Grafisk Design. Website til Brainreader

Transkript

1 Grafisk Design Website til Brainreader

2 Opgaven: Brainreader udvikler og sælger software til scanningsmaskiner, som hjælper lægen/radiologisten med at lave mere præcis og ikke mindst hurtigere scanninger af specielt hjernen. Min opgave lå i at lave et redesign af deres hjemmeside. Deres tidligere hjemmeside var meget teknisk og tung, hvilket de gerne ville have lavet om på. De ville have større fokus på kunderne fremfor det tekniske. Brainreader havde ikke nogle specifikke ønsker til designet, så det var op til mig at lægge en ny stil til dem. Formålet med den nye hjemmeside er at øge salget og skaffe flere leads - der skal være fokus på brugervenlighed og Call-2- Action s. Målgruppe: Brugerne af softwaren fra Brianreader er neuroradiologists, radiologists og MD s (læger og radiologister, som er dem som scanner kroppen og specielt hjernen). Der er to hovedgrupper, som er henholdsvis: - Universitetshospitaler - Mindre klinikker / Private hospitaler / Scanningscentre I det følgende har jeg argumenteret for mine designvalg. Når jeg træffer valg har jeg hele tiden det økonomiske og funtionelle i baghovedet. Opgaven er en katagori B, så det vil sige, at den ikke skal være alt for kompliceret

3 Gammel design Den daværende side var meget teksttung, og havde alt for stort fokus på det tekniske omkring deres produkt. GRAFISK DESIGN 5

4 Få styr på tankerne Jeg startede min designprocess med lidt offline idéudvikling. Jeg fik skrevet alle de tanker jeg havde omkring designet og virksomheden ned på et mind-map, som hjalp mig med at få nogle ord på den retning jeg gerne ville gå. GRAFISK DESIGN 6

5 Idéudviklingsboards Lifestyleboard: Boardet giver mig forståelse af målgruppens livsstil, og gør det nemmere at skabe en stil der passer til dem. Moodboard: Boardet viser den stemning, som jeg gerne vil opnå med sitet. Det er godt at have en idé om stemningen fra start, som jeg kan gå tilbage til så jeg ikke lige pludselig kører af sporet. Styleboard: Boardet visualiserer den stil jeg gerne vil ramme. Boardet fungerer også som god inspiration til mit design, og er egentlig det board der har hjulpet mig mest. GRAFISK DESIGN 7

6 Valg af typografi Jeg bruger Google Fonts til at finde mine fonte, da de er websikre og lette at implimenterer i vores kodning senere hen. Jeg har udvalgt 5 fonte, som jeg vurderede passede godt til sitet. Jeg sammenlignede dem og fandt frem til en vinder. Open Sans er en populær webfont. Det er en grotesk font, som er meget letlæselig pga. dens åbne former og gode harmoni. Fonten har et moderne og seriøs, men samtidig behageligt udtryk. Lidt for useriøs og blød i udtrykket. For lille x-højde. For smal, dårlig læsbarhed. God læsbarhed, og behagelig udtryk. Bogstaverne står lidt for tæt sammen. Accentlinje Majuskellinje Hovedlinje Grundlinje Underlinje Overskrift Grumpy wizards make toxic brew for the evil Queen and Jack. Overlinje X-højde Open Sans Open Sans Light Open Sans Light Italic Open Sans Regular (Brødtekst) Open Sans Italic Open Sans Semibold Open Sans Semibold Italic Open Sans Bold (Overskrifter) Open Sans Bold Italic Open Sans Extrabold Open Sans Extrabold Italic Brødtekst Omnis dolescia que dolupta tempore similiquati di senditia et dolor asi dolorum rehenti inus, volut volupti ommoditi ipienit ma sequi aut magnisint illorepedis quatus, core dio. Et quia nos eum et omni doluptatia que et. Open Sans har mange skriftsnit, og er derfor god til at skabe hieraki og diversitet i teksten. Til højre ses et udsnit af, hvordan jeg har stylet hhv. overskrifter og brødtekst i Photoshop. GRAFISK DESIGN 8

7 Valg af farver Da Brainreader havde et logo i forvejen var det oplagt for mig at bygge hjemmesiden op med de farver de bruger i logoet, for at skabe en sammenhæng og genkendelighed. Primære farver: RGB: 0, 90, 150 CMYK: 95%, 62%, 15%, 2% HEX: #005a96 RGB: 247, 147, 27 CMYK: 0%, 50%, 92%, 0% HEX: #f7931b RGB: 0, 117, 179 CMYK: 86%, 46%, 7%, 0% HEX: #0075b3 RGB: 57, 181, 74 CMYK: 72%, 0%, 88%, 0% HEX: #39b54a Den mørkeblå farve har et seriøst og loyalt udtryk. Den leder tankerne hen på teknologi. Den orange farve står i rigtig god kontrast til den blå farve, og skal primært bruges som Call-To-Action farve, og lede brugeren videre på siden. Den udstråler energi, ambitioner og succes. Den lyseblå har også et teknisk udtryk, men dog lidt til den legende side - da den bliver lidt for lys og useriøs. Den grønne står ikke i særlig skarp kontrast til den blå farve. Derudover synes jeg den leder tankerne hen på miljø og natur, og ikke teknologi. Nuancer: På hjemmesiden bruger jeg forskellige nuancer af grå, til bl.a. tekst, bokse og streger. CMYK: 67%, 57%, 54%, 59% HEX: #3d3d3d CMYK: 21%, 15%, 16%, 1% HEX: #d2d2d2 CMYK: 8%, 5%, 6%, 0% HEX: #efefef GRAFISK DESIGN 9

8 Komposition - forside For at få opbygningen af hjemmesiden på plads tegnede jeg forskellige skitser i hånden. Skitserne giver mig et godt overblik, og jeg får prøvet nogle idéer af uden det tager for lang tid. Den valgte opbygning ses til højre. Forsiden er opdelt i overskuelige sektioner, som giver brugeren et godt overblik. Jeg bruger et 12-kolonne system, for at matche det framework vi bruger til opsætning af siden senere i processen. Hver sektion bruger forskellige antal kolonner, for at skabe variaton og dynamik. Den blå intro med billedet bag skaber liv og steming på siden; brugerens opmærksomhed er fanget og den får hurtigt indblik i virksomheden. Her får man et indblik i, hvem der er målgruppen for produktet, vha. simpel kasse opbygning i 2 kolonner. Den orange boks bryder forsiden, og får sat stor fokus på fordelene ved produktet. Ikonerne er med til at understøtte teksterne. Udtalelserne fra kunderne er også sat op vha. kasse opbygning og følger 3 kolonner. Udtalelserne skaber stor troværdighed. Den mørke footer slutter siden fint af, og giver en god kontrast til resten af designet. Her er brugt 4 kolonner til indholdet. GRAFISK DESIGN 10

9 Komposition - Underside Når der er tale om en kategori B hjemmeside, så har de fleste undersider samme opbygning, for at gøre kodningen simplerer. Med samme fremgangsmåde som forsiden kommer jeg fremtil en opbygning af undersiderne. Til højre ses opbygningen af en underside med tekstindhold. Jeg holder mig også til mit 12-kolonne system her. Toppen bevarer det blå overlay som på forsiden, for at bryde headeren og indholdet. Indeholdet fylder 8 ud af mine 12 kolonner. Vi har ikke kontrol over indholdet i indholdsfeltet, da brugeren selv indsætter indhold når siden er kodet. Da der er undermenuer til mange menupunkter på siden er det vigtigt at have en sidebar, så brugeren let kan navigerer rundt på siden. Tidslinjen er et ekstra element der er designet netop til denne side. GRAFISK DESIGN 11

10 Grafiske virkemidler Pattern overlay: I mit design har jeg nogle store orange flader til at fange opmærksomheden, og bryde siden. Dog synes jeg de blev lidt for hidsige i deres udtryk, derfor fandt jeg et diskret mønster at lægge ovenpå, som gjorde den orange boks mindre vild at kigge på, og som samtidig gav dybde og spil. Color overlay/blending modes: På de sider hvor jeg har et stort topbillede har jeg lagt et blåt color overlay hen over billedet, for at få den blå farve frem i designet, og for at give billederne en sej effekt. Jeg legede lidt med forskellige mænge opacitet samt blending modes, for at få et godt udtryk frem. 40% opacity - for svært at læse teksten - billedet får en træls farve Ren orange: For hidsig 90% opacity - for lidt fokus på billedet, men teksten står godt frem Hard light blending mode 70% opacity - for kontrastfyldt Bølger: For legende Bokse: For forstyrrende 70% opacity - god harmoni mellem tekst og billede Skrå tern: For feminin Skrå linjer: Tilpas diskret GRAFISK DESIGN 12

11 Styling af faste elementer Styling af billede-bar på undersider: Ingen overlay: Svært at se overskriften og brødkrummeteksten. Gradient overlay m. s/h-billede: Billedet er nu i sort hvid, og jeg synes egentlig det giver et godt spil i headeren, men brødkrummen er stadig svær at se, selvom jeg har sat en drop shadow herpå. Gradient overlay: Stadig svært at se brødkrummen. Den blå farve kan godt komme i konflikt med farverne i billedet, da kunden selv ligger billeder op, og vi ikke har nogen kontrol herover. Jeg vælger at lave hele billede-baren med blåt overlay, og billeder har fået en blur effekt så det bliver mere blød at se på. Alt tekst står nu klart og tydelig frem. Styling af menuen i sidebaren: For simpel - man bemærker den ikke. For knappet og kasset. For grå - ikke særlig i øjnefaldende. For stor fokus på kategorien i toppen. Så var den der. Kategorien er der, men tager ikke fokus fra menupunkterne. GRAFISK DESIGN 13

12 Styling af moduler Hjemmesiden skal indeholde 3 moduler: Medarbejdere, nyheder og kundeudtalelser. Modulet er et element som er designet, men hvor kunden selv lægger indholdet ind/kan tilpasse indholdet løbende. Design af kundeudtalelser: Design af nyhedsmodul: Teksten er lidt for utydelig, og står ikke nok frem. Design af medarbejdermodul: Teksten står godt frem, men datoen bliver for sammenklemt. Datoen har fået godt med plads, og der er kommet et ikon på, som indikerer at man kan klikke videre. Jeg endte med et design som ligger sig meget op af nyhedsmodulet, hvilket gøre at min kollega kan bruge nogenlunde samme kode til de to elementer i opsætningen. GRAFISK DESIGN 14

13 Kvalitetsvurdering: Jeg er godt tilfreds med resultatet, og synes det er lykkedes at skabe en brugervenlig og overskuelig hjemmeside, som tager brugeren i hånden og guider den igennem siden. Det er lykkedes ved at lave et luftigt og lyst design, og med tydelig Call-To- Actions, som står godt frem ved hjælp af den orange farve. Brainreader var også glade for det nye lyse design, dog er de efterfølgende kommet med rettelser til designet - de var alligevel ikke så glade for de store orange flader, så vi fandt en anden løsning, og lavede dem i en svag nuance af grå i stedet. Hjemmesiden er endnu ikke gået online. Se hele designet i bilagene. GRAFISK DESIGN 15