Grafisk design. sundfertilitet.dk

Transkript

1 Grafisk design sundfertilitet.dk Sundfertilitet.dk er en klinik, der behandler mænd og kvinder til bedre fertilitet. Min opgave var at redesigne deres hjemmeside samt lave et logo til sundfertilitet.dk. 1

2 Portfolio 2016 Katrine Rimer Opgave Jeg fik opgaven fra en ekstern kunde om at udvikle et nyt design til sundfertilitet. dk. Herunder skulle ligge et nyt logo samt et redesign af deres nuværende website. Efterfølgende der muligvis nogle tryksager såsom post-/visitkort, notesbøger, notesblok, kuglepenne mm. Deres størtste ønske til det nye design var, at det skulle være enkelt og ligetil. Re-design For at skabe mig et overblik har jeg først kigget på, hvordan deres nuværende hjemmeside ser ud. Den er rodet og svær at finde rundt i. Teksten står underligt og uoverskueligt fyldt med floder. Alt for meget tekst man skal kunne komme hurtigere frem til sin søgning. Farveløst. Mangler inddelinger. Kedeligt og uinspirerende. Hvad kan jeg tilføre? For at gøre hjemmesiden mere inspirerende vil jeg først og fremmest tilføre den noget farve og nogle simple og tydelige opdelinger af, hvor man er på siden, så man hurtigt kan danne sig et overblik. Derudover er det super vigtigt, at siden ser professionel ud. Når man som bruger søger læge eller som her fysioterapi, zoneterapi og samtaleterapi søger man ubevidst efter noget, der ser troværdigt ud. Her er en hjemmeside for det meste det første sted, brugeren møder klinikken derfor er førstehåndsindtrykket også ekstremt vigtigt. Siden skal altså udstråle professionalisme, troværdighed, ro og tryghed. 2

3 Afsender I sundfertilitet.dk på Islands Brygge er der samlet et team af behandlere med særlige kompetencer inden for fertilitet, graviditet og fødsel. I de kommende år har de valgt at sætte ekstra fokus på fertiliteten og har derfor sammensat en række behandlingstilbud, som kan hjælpe med at optimere fertiliteten på sund og naturlig vis. Moodboard Moodboardet var en hjælp til at komme i gang med at visualisere mine ideer og de tanker jeg havde omkring stemning og udtryk. Modtager Klinikkens målgruppe er par i den fødedygtige alder, der har problemer med at opnå graviditet altså er det både mænd og kvinder, der besøger klinikken og dens website for at blive undersøgt eller bare for at få svar på spørgsmål omkring problemer med fertilitet. Da det selvfølgelig er et følsomt emne for mange, skal dette også tænkes ind i designet. Altså skal det være ligetil uden for mange overflødige elementer. 3

4 Gestaltloven Mængden af information på internettet er stor, og brugerens opmærksomhed flygtig. Derfor er overskuelighed vigtig, for at brugeren hurtigt kan gennemskue, hvad en hjemmeside kan tilbyde. Inspiration Jeg søgte efter inspiration, inden jeg gik i gang med at designe hjemmesiden. Da jeg gerne ville lave en one-page hjemmeside, søgte jeg hovedsageligt efter løsninger på dette. Derudover søgte jeg efter simple opsætninger. Endvidere er det sværere at læse på skærm end på papir. Det giver også et stort behov for at organisere informationerne på en overskuelig måde. Gestaltloven indeholder bl.a. følgende parametre, som er gode at forholde sig til når man designer hjemmesider: Nærhed Noget af det første vi gør, når vi kigger på en hjemmeside, er, at afgøre hvad der hører sammen, og hvad der ikke hører sammen. Det er derfor vigtigt at organisere sine elementer og informationer på siden. Lighed Man placerer oftest navigations-menuen i toppen af en hjemmeside. Det giver vores brugere hurtigt overblik og en følelse af at kunne gennemskue navigationen fra første besøg. Lukkedhed Ved at ramme elementerne ind kan man også placere dem tættere på hinanden, uden at det går ud over overskueligheden. Forbundethed Det er en god ide at forbinde elementer på siden ved fx brug af farver eller streger. 4

5 Portfolio 2016 Katrine Rimer Skitser og ideer til opbygningen Her er nogle af de skitser, jeg lavede, inden jeg besluttede mig endeligt for opbygningen af siden. Skitsen til højre er den, jeg er gået videre med. 5

6 Wireframe For hurtigt at danne mig et overblik over opsætningen, har jeg sat det op i et wireframe. Her kan jeg hurtigt fornemme, om min struktur vil fungere. Jeg har valgt, at min side skal være en one-page hjemmeside. Header Logo Navigation Bannerbillede 2 x div Tabel m. prisliste Article Knap m. link Article 3 x article m. billede div og tabel til kontaktoplysninger 3 x article 6

7 Skrift Jeg har valgt at benytte fontene Palatino Linotype og Trebuchet MS. Grunden til, at jeg har valgt disse fonte, er at de begge er websikre fonte dvs., at de vises ens på tværs af forskellige browsere. Farver Kundens ønske til farver var nogle lidt støvede og dæmpede farver. Jeg har som den primære farve valgt at bruge en turkis-grøn farve, da den udstråler renhed, og samtidig symboliserer den fornyelse, energi og livskraft. De sekundære farver er en nuance af den primære, bare lidt mørkere og en lilla. Derudover benytter jeg mig af sort og hvid. Farverne er alle websikre. Web font Palatino Linotype, regular ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Palatino Linotype, bold ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Trebuchet MS, regular ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Trebuchet MS, bold ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Billeder Jeg synes, det er vigtigt, når man bruger billeder i sit design, at de varierer, men også at der er nogle med ansigter. Det er med til at gøre det vedkommende. I banner-billedet har jeg valgt, at der skal ligge en gradient henover fra grøn til lilla. R 0 G 0 B 0 R 51 G 153 B 153 R 0 G 102 B 102 R 102 G 51 B 102 R 255 G 255 B 255 C 0 M 0 Y 0 K 100 C 90 M 3 Y 42 K 5 C 98 M 10 Y 46 K 41 C 51 M 86 Y 14 K 29 C 0 M 0 Y 0 K 0 7

8 Det endelige design Her ses mit færdige resultat af designet. Jeg har lavet designet til forskellige devices, da sitet har nogle forandringer, alt afhængigt af hvor det vises som fx på computer og på en smartphone. 8

9 9

10 Logo Kunden havde et ønske, om at der gerne måtte være en form for simpel grafik i logoet, så man hurtigt kan aflæse, hvad sundfertiliet.dk handler om. Derfor har jeg valgt at tage fat i undfangelsen, som jeg synes var et oplagt valg. På den baggrund har jeg tegnet en sædcelle der svømmer ind i ægget. Fonten, jeg har brugt, hedder CO Headline. Jeg synes, det har en fin form, idet den har en fin rund facon, som efter min mening refererer meget godt til emnet. Idefasen Efter mit første møde med kunden begyndte jeg at skitse på, hvordan logoet kunne udforme sig. Først skitsede jeg i hånden, derefter i Illustrator hvor jeg til sidst kom frem til den endelige løsning. Da jeg var tilfreds og var kommet frem til det færdige resultat, konverterede jeg det hele til vektorgrafik, så det kan skaleres uden at miste proportionerne. Logo font CO HEADLINE, REGULAR ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå