Grafisk workflow 3. Hovedforløb

Transkript

1 Grafisk workflow 3. Hovedforløb

2 3. Hovedforløb Grafisk workflow Dreamweaver Opgavebeskrivelse Højbakkegaard har brug for en hjemmeside, som kan vise hvad gården har at byde på, deres unikke vine og faciliteter til heste. Det skal være nemt og overskueligt at finde informationerne, og derefter skal der være mulighed for at komme i kontakt med gårdejeren, ved hjælp af en kontaktformular. Der skal også være et galleri, som viser forholdene på stedet, samt diverse vine. Det er en familiegård, som er gået i arv i flere generationer, derfor skal hjemmesiden være simpel, og have en jordnær og hyggelig stemning, men uden at være rodet og utroværdigt. Siden skal være responsive altså kunne bruges på mobil og tablet, såvel som computer. Målene for hvornår designet ændre sig til en anden platform indstilles med media queries. Hjemmesiden er sat op med Bootstrap. Proces 8 Brainstorm Moodboard/indspirationssøgning Skitser og opbygning Grundlæggende kode Beskæring og klargøring af billeder Lightbox galleri formular Præsentation for kunden Justering og søgeoptimering Ideproces Brainstorm Moodboard Højbakkegaard Småt Hyggeligt Lokalt Natur Landet Landbrug Frugt Vin Redskaber Marker Organisk Grøn Brun Orange Dyr Landbrugsdyr Heste Forside Flowchart Forside Velkommen/ grundlæggende info Vin Heste Galleri Skitser

3 Grafisk workflow 3. Hovedforløb Wireframe Standard, computer Gårdens navn menu Tablet lukket menu Mobil åben menu Galleri standard, computer Gårdens navn Burger menu Gårdens navn Menu Burger menu Tekst logo menu Galleri Galleriet har følgende min-width: 1200 px 992 px 768 px Ved hver mindste vidde rykker en kolonne ned. På tablet og mobil versionen bliver menuen gemt i en knap som åbner og lukker for navigationen. formular: formular: formular: 9

4 3. Hovedforløb Grafisk workflow Farvevalg Opsætning om koden # Grundlæggende kode #FF9900 #DBCA69 #668D3C Bomærket fra logoet går igen som et favicon i fanebladet Typografi Overskrifterne har fonten Playball, som er en let g elegant script front, som giver et gammeldags og personligt look til den ellers meget simple og forholdsvis minimalistiske hjemmeside. Playball findes som Google webfont, og skulle derfor være mulig at se ligemeget hvilken browser og platform man bruger, men for en sikkerheds skyld har jeg i CSS koden givet den nogle alternative fonte at vælge. UTF-8 står for Unicode Translation Form og sørger for at specielle tegn, som æ, ø, å bliver vist korrekt. Viewport meta-tagget gør at brugeroplevelsen på mindre platforme bedre, ved at indstille elementerne så de passer til skærmen de bliver vist på. Hjemmesiden er søgeoptimeret ved at bruge meta-tagsne description og keywords, her går de ord igen som søgemaskinen skal reagere på. Nederst i head-tagget, er der linket til de CSS-filer som er brugt til at style siden. Der sættes media queries på overskrifterne, så de bliver mindre alt efter skærmens størrelse. Hjemmesiden er afprøvet i Google Chrome, Internet Explorer og Firefox, og på både PC og imac. Playball ABCDEF GH IJ K LMNOPQRS T U VX YZÆØÅ abcdefghijklmnopqrstuxyzæøå , : ; ( ) %!? Den øvrige tekst har en sans-serif font, som er stilfuld og let læselig, især på skærm. Navigationen til Vin og Heste er linket til billedernes div-id, så billedet og ikke overskriften bliver det øverste på siden når man klikker ned til det gældende emne. er derimod linket til et div-id som indrammer hele boksen. Galleriet er lavet på en anden html-side, da index siden ellers kan ende med at blive meget lang, alt efter hvor mange billeder galleriet skal indeholde. 10

5 Grafisk workflow 3. Hovedforløb HTML & CSS formular HTML & CSS Galleri med lightbox boksen har en min-width på 1200 px, som gør at den rykker ned under teksten når siden formindskes. Der er også min-width på 992 px og 768 px hvor kontaktformularens bokse bliver tyndere. En lightbox template bliver sat ind, og billederne linkes ind. I custom CSS'en rettes størrelsen på thumbnailsne og der laves gennemsigtighed ved mouse-over. (Nederst th.) Hvis der er nogle problemer med beskeden bliver en en fejlmeddelelse vist, så man kan se at informationerne skal rettes. 11