GRAFISK DESIGN. Diner no. 34 Hjemmeside + Visuel identitet

Transkript

1 GRAFISK DESIGN Diner no. 34 Hjemmeside + Visuel identitet

2 Diner no. 34 9

3 Opgavebeskrivelse Fiktive opgave. Redesign af visuel identitet og design af ny hjemmeside. Materialet skal skabe et genkendeligt udtryk af burger-baren og skabe et ønske om at bestille deres vare. Målgruppen år. Både mænd og kvinder, enlige og familier med lyst til kvalitets-fastfood til en god pris og oplevelsen af amerikansk burgerbar. Bor i Holstebro og omegn. Diner no. 34 Overvejelser For at bevare restaurantens allerede opbyggede visuelle udtryk var det vigtigt at implementere design elementer som understøtter dette. Produkter Logo + Hjemmeside 10

4 Idegenerering Første tanker og idéer noteret Kerneord Amerikansk Genkendeligt Enkelt Kvalitet Naturligt Logo-skitsering Med kerneordene i tankerne begyndte jeg skitseringen. 11

5 Logodesign Redesign af visuel identitet. Moodboard Anvendt som inspiration og forståelse af datidens grafiske udtryk. Farver Ved brug af den klare blå farve får logoet en større genkendelighed og øget blikfang. Neutral, Isolerende Tillid, Sundhed Den grålige baggrundsform frembringer vinge symbolet og de blå elementer. Varm, Stabilitet Positiv, Naturlig Grafiske overvejelser Amerikansk inspireret former. Vingerne er forenklet. Navnet er sammenkoblet så man lettere forstår det Diner no. 34 Diner no. = 34 Diner no. 34 Genkendeligt uden navn Skalerbart 12

6 Identitet online Implementering af den nye identitet på sociale medier. Her ses Facebook layout. 13

7 Hjemmeside design Efter en grundlæggende visuel identitet kunne jeg designe en hjemmeside i samme ånd og med fuld fokus på sidens funktioner. Forside Menu Billeder Om os Bestil nu Wireframe Sidens formål 1. Inspirere og friste besøgerens behov. 2. Hurtig og overskuelig kontakt info. 3. Uddybende oversigt af muligheder i form af menuen. 4. Udtrykke: Diner No 34 stemningen. Site-map Oversigt over sidens navigation. AIDA - Analyse af sidens funktioner. Inspiration (Attention) - Menu CTA. Anmeldelser (Interest) Stemningsbillede (Desire) Produkter (+Desire) POP UP Kontakt (Action) (Telefon + Facebook) GRID For optimal tilpasning på forskellige skærme anvendte jeg 960px grid. Photoshop layers Photoshop layers Inddelt i letoverskuelige mapper (Det sikre at opgaven let kan videregives) 14

8 Inspiration (Attention) - Menu CTA. Anmeldelser (Interest) Stemningsbillede (Desire) Produkter (+Desire) Kontakt (Action) (Telefon + Facebook) 15

9 HTML Siden er opbygget i Dreamweaver. (Kodet efter design fra Photoshop) HTML ex. Besøg siden her: CSS Styling og layout af sidens opbygning. CSS ex. Javascript - pop up Indhold Javascript pop up (importeret) For at optimere brugervenligheden har jeg indsat en javascript animation som gør kontakt siden aktiverbar på alle sider. (Koden er hentet fra nettet og implementeret) Da det er kodet i Javascript sikre det funktion i alle nuværende browsere. Implementering til index Pop up styling (css) PHP Optimeret ved brugen af PHP. 16

10 DESIGN PARAMETRE Tekst: Teksttypen er grotesk. (Let læsbar på skærm og passer bedst i det amerikanske udtryk) Der vægtes forskelligt i kontrasten for at tydeliggøre vigtigheden af teksten. (Der er importeret Google fonts) Illustrationer: Der er valgt varme og tiltrækkende billeder for at nå målet om at passe til besøgerens behov. Endvidere er der anvendt grafikske illustrationer i overensstemmelse med det visuelle udtryk. Farver: Elementerne har en klar farvekontrast - så brugeren lettere kan navigere rundt på siden og finde den relevante information. Dette er især gældende for Call To Action knapper. Form: For at give sammenhæng til alle elementer på siden har jeg benyttet gestalt lovene. Det gælder især nærhed og lukkethed. Kvalitetsvurdering I min optik har den visuelle udformning ramt godt i forhold til kerneordene og den har stadig en klar forbindelse til restaurantens tidligere design. Logo et syntes jeg fungere godt på tværs af forskellige medier. Jeg ser dog en potentiel forbedring ved at forenkle logo et yderligere. Alt i alt ser jeg designet som en rigtig god løsning og tror at det vil styrke restaurantens generelle branding i forhold til målgruppen og genkendelsesgraden. 17