Grafisk design. Produkt: Responsiv hjemmeside Klient: EUC Nordvestsjælland

Transkript

1 Grafisk design Produkt: Responsiv hjemmeside Klient: EUC Nordvestsjælland

2 06// Opgave EUC Nordvestsjælland ønskede at få en mere tidssvarende og simpel hjemmeside. Jeg fik til opgave at lave en prototype. Jeg har valgt denne opgave, fordi den viser de mange forskellige faser af en kreativ proces. Arbejdsproces* 1. Analyse 2. Moodboard 3. Sitemap 4. Content inventory 5. Sketching 6. Content reference wireframes 7. Styleguide 8. Digital prototype 9. Kod færdig i Dreamweaver Inspiration: Stephen Hay: Responsive Design Workflow: Mobilism 2012 Luke Brooker: A Future Friendly Workflow Pon Kattera: Design Process in the Responsive Age * Programmer XMind 2013 (sitemap) Balsamiq (wireframes mockup) Dreamweaver (prototype)

3 07// Analyse & målgruppe Problematik En kompleks organisation med mange uddannelsestilbud, deraf meget information. Den nuværende hjemmeside er ikke nem at navigere rundt i. Derudover er den ikke kompatibel med tablets og smartphones. Mål En responsiv hjemmeside med et enkelt design. Nem navigation, så det bliver lettere for brugeren hurtigt at finde de rette informationer. 2,1 mio. danskere går dagligt på nettet via deres mobil. Danmarks Statestik 26. juni 2014, nr. 339 Strategi En fleksibel og responsiv hjemmeside med media queries. Den overordnede navigation bliver opdelt ift. de 4 uddannelsestilbud (gymnasium, erhvervsuddannelser, EUX og kurser), hvortil der vil høre en specifik undermenu til hver. 44% af danskerne ejer en tablet. Danmarks Statestik 30. april 2014, nr. 227 Målgruppe De gymnasielle uddannelser og handelsskolen har fået selvstændige sites. De kunder, der vil forventes at bruge denne side, er fra AMU og de tekniske erhvervsuddannelser. AMU og efteruddannelse Tekniske erhvervsuddannelser Geografisk Fra store og små byer i Vestsjælland. demografisk Mænd og kvinder mellem år. De kan både være faglærte og ufaglærte. Psykografisk De er praktisk anlagt, med en lav uddannelse. De vil gerne arbejde, men sætter også pris på fritiden. Geografisk Fra store og små byer i Vestsjælland. demografisk Piger og drenge mellem år. De har en middel indkomst (fritidsjob eller S.U.). Psykografisk De er ikke bogligt stærke, men mere praktisk anlagt. Mange i familien har en håndværksuddannelse. Minerva: violet Traditionelle Praktikere Selvansvar Nationalt indstillet Materialister Lavere indkomst Gør det selv

4 08// moodboard Med udgangspunkt i EUC Nordvestsjællands farver, har jeg lavet et moodboard for at skabe rammerne omkring mit designprojekt. Jeg har blandet billeder fra EUC Nordvestsjælland med hjemme sider og billeder fra nettet, for at ramme den rigtige stemning.

5 09// Sitemap & Sketch Sitemappet viser tydeligt hvor meget hjemmesiden skal rumme af sider. Men jeg kan ud fra sitemappet få et overblik over eventuelle mønstre - opsætninger der går igen. Jeg laver mine sketches efter at jeg har lavet mit sitemap, da jeg gerne vil starte mit projekt med at skabe overblik over mit indhold. Mange snakker om strategien Mobile First *, men en nyere strategi bliver mere og mere anvendt: Content First **. Her tages der udgangspunkt i sidens indhold i stedet for at fokusere på, hvilke platforme du designer til. *Strategi oprindeligt af Luke Wroblewski, forfatter til bogen: Mobile First (18. oktober, 2011). **Bland andet nævnt i en artikel af Mark Boulton: Structure First. Content Always (6. februar, 2012).

6 10// content inventory & wireframe Generelt 1. a. Top navigation (kviklinks) 2. a. Logo 3. a. Main navigation 4. a. Sociale links 5. a. Undermenu 6. a. Footer 1 2a. Logo 3a. Main nav 1. Billedslider 1a. Top nav 2. Nyheder 1. Forside 1. Billedslider 2. Nyheder (slider) 3. Annoncer 3. Annoncer 2. Uddannelser forside 1. Undermenu 2. Billedslider 4. Introtekst 5. Nyheder (karrusel) 6. Links/genveje/downloads 2 6a. Footer 2a. Logo 3a. Main nav 4a. Sociale links 1a. Top nav 1. Undermenu 2. Billedslider 6. Links/genveje/ downloads 4. Introtekst 5. Nyheder 4a. Sociale links 6a. Footer

7 11// content inventory & wireframe 3. Undersider 1. Billede 2. Sidemenu 4. Tekst 5. Links/genveje/downloads 4. Kontakt 1. Grid med billeder, mail og mobilnumre 3 2a. Logo 3a. Main nav 1. Billede 2. Sidemenu 1a. Top nav 4. Tekst 5. Links/genveje/ downloads Ressourcer: 1. Grid 2. Templates 3. Billedslider (jquery.flexslider) 4. Karrusel (jquery.caroufredsel) 6a. Footer 4a. Sociale links 4 2a. Logo 3a. Main nav 1a. Top nav 1. Undermenu 2. Billedslider 6. Links/genveje/ downloads 4. Introtekst 5. Nyheder 4a. Sociale links 6a. Footer

8 12// Styleguide 01. Farver Jeg har taget udgangspunkt i den mørkeblå og neonblå farve, som er kendetegnet for EUC Nordvestsjælland. Jeg har herefter brugt Adobe Kuler til at finde nogle passende neutrale farver til de blå. 02. billedstil Billederne på hjemmesiden skal være lyse og harmonere med de to blå farver fra hjemmesiden. Så vidt muligt skal billederne være taget på skolen. Baggrundsmønster bright_squares Links hover #003B66 Links / Header #2fa6de Headings / Footer # Tekst negativ #e2e2e2 03. ikoner

9 13// Styleguide 04. Typografi Jeg har valgt Open Sans som den overordnede skrifttype på hjemmesiden. Den er nem at læse, hvilket passer godt til en meget teksttung hjemmeside. Eksempel på brug af typografien Heading 1 font-size: 2.25em 28px line-height: 1.2em Heading 2 font-size: 1.5em 24px line-height: 1.25em Heading 3 font-size: em 21px line-height: 1.3em Heading 4 font-size: 1.125em 18px line-height: 1.35em Heading 5 font-size: 1em 16 px line-height: 1.4em Paragraph font-size: 1em 16 px margin-bottom: 1.5em Link #2fa6de / #003B66 The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. Paragraph text. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in. Egestas eget quam. Maecenas faucibus mollis interdum maecenas faucibus. Link Link hover Samværsregler Vi vil gerne opfordre til, at alle hjælper med til at passe på skolen og det udstyr/inventar vi har. Følg de anvisninger som skolens ansatte giver. 1. Mødepligt og tilstedeværelse Du skal være studieaktiv, når du er tilmeldt skolen. Studieaktiv betyder, at du møder til undervisningen og deltager aktivt. Registrering af fravær: Ved sygdom kan skolen forlange en lægeerklæring, som skolen betaler. Læs mere... Hvis du ikke kan komme i skole skal du give skolen telefonisk besked mellem kl og på skolens telefon