gnsi de ks i gafr · flash banner og flash gallerier kan ikke vises på tablets og mobiltelefoner....

GRAFISK DESIGN / Dorte Damsgaard Larsen 1/15

GRAFISK DESIGNSVENDEPRØVEDorte Damsgaard Larsen

OPGAVE

Designforslag til hjemmeside til motorcykelklubben Mc Chaufførerne


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.

Tiltrække nye medlemmer.

Klubbens medlemmer kan holde sig ajour med aktiviteter.

Eksisterende hjemmeside www.mc-chaufforerne.dk


Grundlaget for idégenerering er følgende

Resultatet af mødet med bestyrrelsen.

Eget kendskab til klubben som medlem.

Research af andre mc relaterede hjemme- sider.

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


Moodboard

Logo

Vigtige designelementer

Mc Chaufførernes logo.

Former der indikerer fart, feks. skrift i kursiv.

Primærfarver / signalfarver.

Sort / grå / asfalt.


Sitemap / flowchart

Skitser til forside

Skitser til undersider med galleri

Struktur og layout

Hjemmesiden er struktureret i et sitemap / flow-chart.

Skitser til design af hjemmesiden er lavet, først i hånden, derefter i Indesign.


Skitser lavet i Indesign


Denne skitse vil jeg arbejde videre med

Skitse til videre bearbejdelse

Jeg har valgt at arbejde videre med denne skitse.

Designet er enkelt, overskueligt og brugerven-ligt.

Logoet er grundlæggende i designet, det be-stemmer 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 hol-de ro og harmoni.

Skrifttypen i logoet er Helvetica, men jeg har valgt at bruge Arial, som er meget lig Helveti-ca. Begrundelsen er at Arial er installeret på de fleste computere, og derved sikres at teksten bliver vist rigtigt.


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 pile-tasterne 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 kom-mer højere op.

Der er lagt en lille “asfalt” struktur ind på bag-grunden, og baggrunden er lysnet.


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. Ind-hold 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 hori-sontalt.

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.


Undersiden „AKTIVITETSKALENDER“

Tekst er placeret i spalte 1, og et billede er pla-ceret i spalte 2.

Teksten er opdelt i 3 div classes, aktivitetsdato, aktivitet og spalte1.


Undersiden „MEDLEMMER“

Galleriet er lavet i Dreamweaver, med swap image funktion, når man klikker på de små billeder.

Swap image på undersiden MEDLEMMER


Galleri opsat i IndesignLinks til gallerier

Undersiden „GALLERI“

Jeg har oprettet ikoner som link til billedgalleri-erne.

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.


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.


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.


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 di-rekte ind på Mc Chaufførernes gruppe på face-book.

Kort fra Google map er indsat.

Søgeoptimering

Jeg har indsat meta tags i head.

Overskrifter er h1.

Alle links er søgbare.

gnsi de ks i gafr · flash banner og flash gallerier kan ikke vises på tablets og mobiltelefoner....

Documents