Grafisk DESIGN. Hjemmeside

Transkript

1 Grafisk DESIGN Grafisk DESIGN Hjemmeside

2 indhold 3 Opgaven 0 Skitser 4 Inspiration Skitser/proces 5 Farvevalg og typografi Færdigt logo 6 Skitser 3 Proces 7 Fotostil 4 Udvalgte koder 8 Storyboard og flowchart 5 Kvalitetsvurdering 9 Logoudvikling

3 opgaven SAGEN KORT Den nystartede konsulentvirksomhed Sans & Samling tilbyder primært behandling og forebyggelse gennem individuel patientbehandlling eller gruppeforløb. Primærmålgruppe Erhverv Socialrådgivere, kommuner, botilbud, væresteder og institutioner. Målgruppen ønsker professionel behandling og rådgivning til at styrke deres faglighed og evt. deres kunders samlede behandling. Målgruppen er bl.a. kommuner, botilbud og sagsbehandlere. Sans og samlings hjemmeside skal indeholde bl.a.: Præsentation af behandler Info om behandlingsmuligheder Lydfil til øvelse Kontaktformular og google maps Sekundærmålgruppe Private Sekundærmålgruppen passer i det grønne segment i Minervamodellen, som dyrker en livsstil med bløde værdier, men er moderne i ordets bredeste forstand. Det er fortrinsvis kvinder mellem 5-60 år som stemmer fra midten og ud mod venstre. Her noter fra mødet hvor firmaets profil og visuelle kommunikation blev diskuteret. 3

4 INSPiration Markedet for disse firmaer er stort og henvender sig ofte til det samme segment; kvinder i den modne alder. For at søge inspiration fandt jeg en del konkurrenters hjemmesider. Rent og harmonisk design holdt i de samme farver. Der var enighed om at denne side var flot opbygget, men for feminin i farver og design. Fotoet udtrykker ikke det vi gik efter, nemlig kompetencer og faglighed. 4

5 FARVEVALG og Typografi Kunden ønskede logo i blålige, og evt. varme orange nuancer. Derfor var første del af designprocessen at få logoet lavet som udgangspunkt for resten. Den blå farve signalerer seriøsitet, tillid og handlekraft. Havde den været mørkere nærmede den sig en bank-farve, som ikke vil passe til den sekundære målgruppe. Den antracitgrå er en rolig ikke for gennemtrængede neutral farve. Se evt. mere på siderne Lyseblå RGB: 93, 84, 3 CMYK: 60, 0, 0, 0 Antracitgrå RGB: 4, 4, 4 CMYK: 0, 0, 0, 90 Typografi Jf. målgruppen var det vigtigt at typografien signalerede professionalisme og kvalitet. Brød og rubrik skulle samtidig være dynamisk og moderne, som tiltaler den sekundære målgruppe. Nogle af de gratis Google Fonts har en tendens til dårlig kerning. Jeg undersøgte derfor også og valgte her to fonte der passede til det udtryk jeg gik efter. Ostrich Sans er for neutral. Mathlete har et meget barnligt skriftbillede og holder ikke grundlinjen. Zag Regular er bedre, men ikke slank nok. Jeg valgte Miso, da den på samme tid er kantet og blød. Museo er en geometrisk semi-serif, men er ikke læsbar og egner sig ikke over for Miso. Podkova har for skæve vinkler. Det tredje eksempel, Luxi Serif, er meget smal med stor kontrast mellem grundstreger og hårstreger (skriftgruppe 4). Den vil ikke være god at læse på skærm. DejaVu blev valgt for det harmoniske skriftsbillede og serifferne, som minder lidt om en Egyptienne, men mere rund og venlig. 5

6 skitser Jeg vil have et enkelt design, med et opblødende element. Der skal være store fotos og en god overskuelighed. Siden skal være responsiv, så alle platforme er dækket ind. AIDA-modellen som inspiration Attention:..Cirklen og baggrundsfoto med den grønne bold. Interest:...Tekst og rubrikker. Desire:...Man får lyst til at læse mere. Action:... Læseren klikker videre på cirklen eller i menuen. Jeg gik senere væk fra den markante sitemap-struktur, da siden ikke er stor nok til, at det er relevant. En rubrik med et stærkt budskab? 3 Det første udkast tager form. 3 6

7 Fotostil Jeg ville lægge vægt på det faglige og selve behandlingen. Derfor ingen fotos fra stranden eller hvirvlende blade i vinden på en solrig forårsdag. Vi fandt en lejlighed som stod tom, da de hvide vægge skulle gøre det ud for et klinikmiljø. Billederne skulle være: Enkle og æstetiske Så få farver så muligt Neutral baggrund 3 Da fotos blev taget i RAW, er de redigeret i Camera Raw. Dette ødelægger ikke fotoets kvalitet hver gang der bliver redigeret. Originalfoto. Der er skruet op for lys og kontrasten. Har stadig det kolde, blå lys fra originalbilledet. 3 Her er justeret på farvebalancen. Kontrasten er sat ned, for at få det venlige og varme udtryk. Jeg valgte denne stil for at understrege den menneskelige kontakt, men med enkle motiver fra behandlingen. 7

8 Storyboard og flowchart Da udkastet var godtaget lavede jeg en strukturoversigt for at få et overblik over diverse divs og mål. Siden skulle være responsiv så wrapperen er sat til 00 % med en max bredde på 960 px. Næsten alle andre divs ligger i procent og forholder sig til wrapperens bredde. Flowchart En oversigt over hvor siderne linker hen. De sociale ikoner er placeret uden for wrapper, så derfor kan de tilgåes fra alle undersider. 8

9 Logoudvikling Farver og udtryk Blå nuancer, varm orange, grå, sort. Logoet skulle afspejle et håndlavet/rustikt element, men ikke blive for fodformet. Stikord Bevægelse, (støtte fra et andet) menneske, kroppen, fart, slap af, stregtegning, give ro, swung/livlig. Inspiration blev samlet hos konkurrenter, og mange steder hvor de dukkede op. Disse logoer leger med det negative rum, som er en fin ide til et logo, da det tit kan gøre det flertydigt på en enkel måde. Her eksempler der udtrykker bevægelse. 3 Konkurrenter eller firmaer inden for sunhedssektoren. 4 Andre inspirationskilder

10 Logo skitser Jeg ville undersøge stregtegningens mulighed som grundlag for logoet. Derfor tog jeg til croquis og brugte nogle af tegninger til den videre proces. Første kolonne kan ses som inspiration og næste kolonne som udkast og skitser. SANS & SAMLING sans & samlin g & SAMLING SANS & SAMLING SANS & SAMLING SA NS & SA M LIN G 0

11 logo skitser For ikke at give kunden en masse forskellige logoudkast og en mindre hovedpine over de mange valg, sendte jeg to udvalgte udkast afsted, som senere skulle rentegnes i Illustrator. Kunden vil gerne væk fra det nøgne udtryk og over i noget mere abstrakt. I nederste kolonne har jeg arbejdet hen mod noget mere abstrakt med akvarel. SANS & SAMLING sans & samlin g

12 færdigt logo Jeg scannede akvarellerne, åbnede dem i Illustrator og benyttede ImageTrace for at bevare den håndmalede kvalitet. Jeg valgte High Fidelity Photo for at få så mange detaljer med så muligt.. Herefter valgte jeg farverne og Select Same Fill & Stroke. Dette forestillede jeg ville give nogle fine nuancer i farverne, hvis der blev valgt lidt mørkere/lysere farveværdier i figurene. Jeg synes dog ikke dette fungerede optimalt, så jeg gik tilbage til ideen med det negative rum efter forskellige fonte og konstellationer. Proportionerne var dog stadig ikke tilfredstillende. Det blev også en smule for fodformet til målgruppen.. Jeg valgte derfor en antikva, Adobe Jenson Pro, for at skabe kontrast til det håndtegnede. Samtidig skar jeg cirklen over og lagde en gradient på den ene flade for at få en D-effekt frem. Den forreste cirkel er større for at forstærke denne effekt. Farven blev blå, da det traditionelt står for en tillidsvækkende farve og efter kundens ønske. Logoet kan tolkes som en vejleder, der hjælper sin patient videre i livet. Det er i bund og grund det, firmaet beskæftiger sig med. 3 I den endelige version skiftede jeg plustegnet ud med &-tegnet, da det dels er meget dekorativt i Jensons udformning og udstråler tidsløshed fremfor det mere moderigtige plus. Cirklens højre side holder kant med tekstens eneste bogstav der rammer overlinjen. Det giver ro, selvom cirklen ikke er centreret. 3 Kundens to udkast i farve, negativ og på sort baggrund.

13 proces For at få elementerne til at opføre sig efter designet satte jeg forskellige baggrundsfarver på diverne. Først herefter kunne jeg style mine diver i css. Da browseren søger på bl.a. H-tags var det vigtigt at få et H-tag med i boblen i stedet for et statisk billede. På denne måde kan teksten også skiftes ud. En effektiv måde at fejlsøge; inspicer element og prøve sig frem. 3 Med to fotos og masser af tekst tipper siden til venstre. 4 Her er portrættet flyttet til kontaktsiden og indsat baggrundsfoto efter redigering

14 UDvalgte koder Der skulle bruges JQuery til Google Maps-inputtet og mobilmenu. Her er links til de scripts som browseren skal læse, for at disse fungerer. En nem måde at søgeoptimere er at sætte relevante keywords ind i <head>. Derudover har jeg skrevet relevante søgeord ind i mine H ere og H ere. 3 Browserkompatible tiltag. Siden bliver bl.a. vist pænere på iphones. 4 Eksempel på media queries; elementerne tilpasses browservinduet. I mobil-skæringspunktet vises elementerne i en kolonne og menuen bliver til en knap med drop down. 5 Her er en formular. Da siden ikke er sat op til PHP eller anden database, er det i virkeligheden blot en mailto-funktion. Senere kan siden dog sættes op i et CMS-system og en database, som vha. en <action> kan sende brugerens besked til rette . Brugeren bliver linket videre til en tak for din besked -side

15 kvalitetsvurdering Designet er ramt godt jf. målgruppe og budskabet. Farverne er holdt stramt og den bløde effekt i billederne passer fint til at understrege det seriøse behandlingsmiljø. Der er nogle få ting, som jeg ville gøre anderledes, f.eks. er mobil-menuen ikke optimal og nogle fotos vil rykke sig lidt på forskellige enheder. Desuden vil en formular tilknyttet en database (online eller f.eks. PHP) være at foretrække. Processen har været meget lærerig, da det ikke er noget jeg beskæftiger mig med til dagligt.

16