GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen OPGAVE Designforslag til hjemmeside til motorcykelklubben Mc Chaufførerne GRAFISK DESIGN / Dorte Damsgaard Larsen 1/15
DESIGNPROCES Indledende møde med klubbens bestyrrelse På mødet blev ønsker om design og funktioner på siden klarlagt: Siden skal kun indeholde de mest elementære funktioner: præsentationstekst, billedgallerier, aktivitetskalender og kontakt oplysninger. Den skal være enkel og brugervenlig. Nutidigt design. Skal visuelt udtrykke klubbens identitet. Klubbens logo er et vigtigt element. Sidens formål: Præsentere klubben for mc folk og andre mc klubber, som kunne have interesse i at deltage i klubbens aktiviteter. Eksisterende hjemmeside www.mc-chaufforerne.dk Tiltrække nye medlemmer. Klubbens medlemmer kan holde sig ajour med aktiviteter. GRAFISK DESIGN / Dorte Damsgaard Larsen 2/15
Grundlaget for idégenerering er følgende Resultatet af mødet med bestyrrelsen. Eget kendskab til klubben som medlem. Research af andre mc relaterede hjemmesider. Mindmap som præciserer klubbens interesse område. Moodboard som visualiserer udtrykket indenfor interesse området. Målgruppen som hovedsagelig ligger i det blå og det violette segment i Minervamodellen. Mindmap Minerva modellen GRAFISK DESIGN / Dorte Damsgaard Larsen 3/15
Vigtige designelementer Mc Chaufførernes logo. Former der indikerer fart, feks. skrift i kursiv. Primærfarver / signalfarver. Sort / grå / asfalt. Logo Moodboard GRAFISK DESIGN / Dorte Damsgaard Larsen 4/15
Struktur og layout Hjemmesiden er struktureret i et sitemap / flowchart. Skitser til design af hjemmesiden er lavet, først i hånden, derefter i Indesign. Sitemap / flowchart Skitser til forside Skitser til undersider med galleri GRAFISK DESIGN / Dorte Damsgaard Larsen 5/15
Skitser lavet i Indesign GRAFISK DESIGN / Dorte Damsgaard Larsen 6/15
Skitse til videre bearbejdelse Jeg har valgt at arbejde videre med denne skitse. Designet er enkelt, overskueligt og brugervenligt. Logoet er grundlæggende i designet, det bestemmer farverne på siden: hvid, blå og rød. Navnet Mc Chaufførerne er fremhævet i hvid på rød baggrund, som i logoet. Stregen under menuen er blå som bunden i logoet. Baggrunden er en mørk grå, farve #111. Al tekst er hvid med rød hover på links. Billederne i flash banneret er i sort/hvid for at holde ro og harmoni. Skrifttypen i logoet er Helvetica, men jeg har valgt at bruge Arial, som er meget lig Helvetica. Begrundelsen er at Arial er installeret på de fleste computere, og derved sikres at teksten bliver vist rigtigt. Denne skitse vil jeg arbejde videre med GRAFISK DESIGN / Dorte Damsgaard Larsen 7/15
USABILITY Udfra skitsen har jeg kodet hjemmesiden i Dreamweaver, formuleret nogle spørgsmål og præsenteret den for klubbens medlemmer til en klubaften. Spørgsmål til klubbens medlemmer Hvad synes du om forsiden? Hvad synes du om medlemsgalleriet? Hvad synes du om galleriet? Er hjemmesiden overskuelig? Er det nemt at navigere mellem siderne? Udtrykker hjemmesiden Mc Chaufførernes identitet? Svar på spørgsmålene det er flot med s/h billeder på forsiden, men godt at der er farver på gallerisiderne banneret på forsiden er for langt nede, kan ikke ses helt på en lille skærm forsiden er lidt mørk galleriet fungerer godt, man kan bruge piletasterne til at skifte til næste billede, og der er en flot overgang mellem billederne kan man evt. vise gallerierne internt i sitet? hjemmesiden er rigtig flot og god links i tekst skal markeres med en streg under hjemmesiden er fin, enkel og overskuelig hjemmesiden er flot og den fortæller en god historie om os Konklusion Jeg har fået brugbart indput, og går nu videre med at rette hjemmesiden til; Menuen har jeg ændret så teksten står på den blå streg. Siden har fået en border, for at samle indholdet. Links i main er markeret i kursiv bold med hover i rød. Nyheder er placeret i spalte 2, så banneret kommer højere op. Der er lagt en lille asfalt struktur ind på baggrunden, og baggrunden er lysnet. GRAFISK DESIGN / Dorte Damsgaard Larsen 8/15
Opsætning i Dreamweaver Siden er kodet i xhtml og stylet i CSS. Bredden er 960 px. Den er opdelt i top, menu, main og footer. I main ligger tekst og billeder i div classes. Indhold her kan tilføjes, fjernes eller udskiftes. Flash banner og Flash gallerier kan ikke vises på tablets og mobiltelefoner. I stedet for banneret på forsiden kan man se et billede. FORSIDEN Grafiken i toppen og stregen med asfalt struktur under menuen er lavet i Illustrator og gemt som henholdsvis png og gif. Stregen ligger på body og er rapporteret horisontalt. Der er præsentationstekst i spalte1, med link videre til den fulde tekst under menupunktet KLUBBEN. I spalte 2 er der plads til nyheder. Banneret har jeg oprettet i Flash. GRAFISK DESIGN / Dorte Damsgaard Larsen 9/15
Undersiden AKTIVITETSKALENDER Tekst er placeret i spalte 1, og et billede er placeret i spalte 2. Teksten er opdelt i 3 div classes, aktivitetsdato, aktivitet og spalte1. GRAFISK DESIGN / Dorte Damsgaard Larsen 10/15
Undersiden MEDLEMMER Galleriet er lavet i Dreamweaver, med swap image funktion, når man klikker på de små billeder. Swap image på undersiden MEDLEMMER GRAFISK DESIGN / Dorte Damsgaard Larsen 11/15
Undersiden GALLERI Jeg har oprettet ikoner som link til billedgallerierne. Ikonerne er pakket ind i en div class for hvert årstal. Der kan tilføjes flere ikoner. Billederne i gallerierne er opsat i Indesign og gemt som SWF, med turn page funktion og fade effekt ved billedskift. Links til gallerier Galleri opsat i Indesign GRAFISK DESIGN / Dorte Damsgaard Larsen 12/15
Undersiden KLUBBEN Til denne side er der udover link fra menuen også link fra forsiden, hvor en del af teksten er vist. Tekst i spalte 1 og billede i spalte 2. GRAFISK DESIGN / Dorte Damsgaard Larsen 13/15
Undersiden HISTORIE En af klubbens medlemmer har skrevet et stykke om klubbens historie. Teksten er indsat i spalte 1. Et billede er indsat i spalte 2, der er plads til flere. GRAFISK DESIGN / Dorte Damsgaard Larsen 14/15
Undersiden KONTAKT OS Her er et link, hvor man kan skrive en e-mail til formanden. Her er link til facebook, hvor man efter at have indtastet sin egen indgangskode, kommer direkte ind på Mc Chaufførernes gruppe på facebook. Kort fra Google map er indsat. Søgeoptimering Jeg har indsat meta tags i head. Overskrifter er h1. Alle links er søgbare. GRAFISK DESIGN / Dorte Damsgaard Larsen 15/15