Grafisk Design. fra idé til visuelt udtryk Benett

Transkript

1 fra idé til visuelt udtryk Benett

2

3 Indholdsfortegnelse Brief...5 Idé og skitsering....6 Værktøjer....6 Farvevalg....7 Flowchart eksisterende site...7 Design i Photoshop....9 Ikoner i Illustrator...11 Setup i Sublime Udvalgte designelementer Færdigt website...22 Flowchart for nyt site...8

4 Benett blev grundlagt i 2007 og holder til i Vejle. De har i dag eneimporten af traktorer og entreprenørmaskiner fra producenten Foton i Kina. Målgruppen ligger derfor primært inden for landbrug og sitet skal derfor være brugervenligt og nemt at forstå for alle lige fra avancerede brugere til nybegyndere på nettet. 4

5 Brief Benett ønsker et redesign af deres eksisterende website, primært skal al indhold med på redesignet. De ønsker brugervenlighed og enkelthed. Farverne skal bibeholdes, men må gerne nuanceres. Logoet er i første omgang Foton Danmark i mørk blå, dog ændredes dette til sidst. De kunne egentlig godt lide opsætningen, så jeg måtte gerne bibeholde lidt, selvfølgelig med opdateringer. De ønskede at kunne administrere sitet selv, derfor skal der lægges et CMS på til sidst. Dette havde jeg ikke mulighed for, så der måtte jeg alliere mig med professionelle. Om Os Kontakt Produkt Forhandlere FORSIDE 5

6 Idé og skitsering Min intension var at gøre sitet nemt at navigere på, der skulle ikke være for mange effekter og distraheringer. De kunder/besøgende, der kommer ind på dette site, har for det meste et specifikt ønske så som at undersøge produkter eller kontakte Benett/andre forhandlere. Jeg ville lave et flat design, hvor enkelthed og matte farver er i højsædet. Jeg lavede et flowchart for at få overblik over det eksisterende site og dets undersider med få kommentarer. Derefter lavede jeg et nyt flowchart til redesign, som godkendtes af kunden, og herudfra kunne der skitseres et storyboard, hvorfra design kunne udarbejdes. Værktøjer Der er brugt forskellige værktøjer til den grafiske process. Photoshop blev benyttet til at opsætte designet. Her blev benyttet et grid med vidden 1080px. Ud fra dette grid kan der udregnes diverse bokse f.eks. top, bund, navigation, billeder og tekst felter. Der er mulighed for at opsætte farver i Swatches, så samme farver hele tiden benyttes. Setup er i Pixels, således at alle udregninger foregår i px og mål kan findes senere til kodning. Der er mulighed for Save for Web and Devices..., denne funktion gemmer i 72ppi (skærmopløsning) Photoshop grid px 6

7 Illustrator er benyttet til udvikling af ikoner, da de på denne måde har ubegrænset skalérbarhed uden at forringe kvalitet. Har man efter udvikling ombestemt sig i forhold til dimensioner, specielt hvis de skulle have været større, så er det ikke noget problem. Samtidig er det et godt værktøj til netop illustrationer. Her er der også mulighed for Save for Web and Devices..., dermed nedsættes en fuldopløselig 300ppi illustration til 72ppi. Farvevalg HEX: #28476d RGB: 40, 71, 109 HEX: #5e758f RGB: 94, 117, 143 HEX: #d2cac6 RGB: 210, 202, 198 HEX: #fffffb RGB: 255, 255, 251 Photoshop Swatches Sublime er brugt til kodning af sitet. Det har gode funktioner som overblik over projektmappe, sort bund med forskellig farvet tekst alt efter funktion og giver automatisk bud på indtastning. Der er taget udgangspunkt i farverne på det eksisterende site, mørkeblå og hvid. Der er hertil valgt en lidt varmere støvet mørkeblå og en lysere matchende blå, gengerende til grå. I stedet for den kolde kridt hvide, er der tilsvarende valgt en knækket hvid og en tangerende til grå. Der er valgt HEX eller RGB farver da det er beregnet til web (skærm). Flowchart eksisterende site 7

8 Flowchart for nyt site som senere i processen blev opdateret til: 8

9 Design i Photoshop Der blev lavet jpgs af designet undervejs, så kunden kunne komme med kommentarer og godkende inden kodningen gik igang. Under kodeprocessen blev designet dog ændret og screenshots blev sendt for godkendelse. 9

10 10

11 Ikoner i Illustrator Jeg valgte, at der skulle være ikoner på produktgruppe siden i stedet for billeder, da dette kunne give et mere differentieret look og gøre det mindre kedeligt at se på, men stadig holde sin enkelthed. Ikonerne skulle være i stil med resten af designet, altså flat design med støvede farver. Produktgrupperne var: Trillebøre Traktorer Tilbehør Gummiged gemme de valgte farver og matchende farver blev tilføjet. Traktorer Der blev fundet inspiration til at lave ikonerne Trillebører Ved hjælp af Pen Tool og Pathfinder blev ikonerne skabt. Her blev Swatches også benyttet til at 11

12 Gummigeder Tilbehør til traktorer 12

13 Setup i Sublime CSS Fjerner pre-indstillede margins og paddings Sikre at font str. altid er 100%, fjerner evt. pre-indstillinger til dette Generel setup for alle fem headings - kan overskrives Setup for heading 1 - kan overskrives Setup for heading 2 - kan overskrives Generel setup for paragraph - kan overskrives Generel setup for links - kan overskrives 13

14 CSS Udvalgte designelementer Der er udvalgt nogle elementer, hvortil der er knyttet nogle koder for at vise opsætningen i Sublime og dertil det visuelle resultat. Her er defineret nogle farver som kan bruges i classes, f.eks. som baggrundsfarve. HTML HTML CSS 14

15 CSS HTML 15

16 Ikonet blev udviklet i Illustrator sammen med: CSS HTML CSS HTML 16

17 CSS CSS 17

18 HTML Her er formularen klar til videre teknisk opsætning til mail client 18

19 Opsætning med brug af ikoner HTML 19

20 CSS CSS 20

21 Kunden ønskede dog senere (efter alt var godkendt, testet og opsat) at de ikke ville have ikoner alligevel. Ud fra HTML og CSS koden, blev der indsat billeder istedet for ikoner. Herudover var kunden logo blåt fra starten, dette ændrede de i mellemtiden til rødt. Derfor blev der indsat røde designelementer på sitet. 21

22 Færdigt website Da kunden ønskede, at kunne administrer dele af sitet selv, skulle der implementeres CMS. Dette blev overdraget til en samarbejdspartner, som implementerede Wordpress. 22

23 23

24 Michele Lindhardsen Aagade 1, 1. sal, 2. dør 7100 Vejle