GRAFISK WORKFLOW H1 MARIA SCHELDE
DOKUMENTATION Opgaven Arkitekt Mette Schelde skulle have designet og programmeret et website, hvorpå hun kunne præsentere hendes produkter. Designkrav Sitet skal være indbydende og enkelt Det skal være nemt at navigere rundt Produkterne skal være i fokus Man skal kunne lægge flere artikler ind under publications, uden det er for tidskrævende Layout Sitet skal opbygges i et grid Sitet skal senere hen kunne laves responsivt Produktteksten skal kunne læses, uanset hvor på produktsiden du er Logoet og menuen skal scrolle med ned på siden Der bruges fonten Helvetica, da den er let læselig på skærmen Billederne har en hvid ramme på 2 px., således de er rammet ind, hvis hun senere hen ønsker anden baggrundsfarve Usibility Sitet er enkelt, overskueligt og nemt at navigere rundt på. Produktteksterne er opdelt i korte afsnit, så de ikke bliver for lange at læse. Ligeledes er linjelængden også kort og menuen er let tilgængelig som ønsket. Arbejdsprocess Møde med kunden Inspirationssøgning på nettet Håndtegnede skitser Layout i Photoshop, som præsenteres for kunden og godkendes Udarbejdelse af flowchart, skelet og storyboard Programmering af sitet Søgeoptimering ved brug af meta tags (title, keywords, discription, alt. text) Browserkompatibilitet testet Demo til kunden Tilretninger af kode og tekster Sitet er godkendt og uploades på domæne Browserkompatibilitet Sitet er testet i Chrome, Firefox, Safari og Internet Explorer, og her fungerer det som det skal. Kvalitetsvurdering Jeg er blevet rigtig tilfreds med det færdige resultat, da sitet er blevet overskueligt og nemt at navigere rundt på. Det har fanget kundens ønske, som er enkelt og indbydende og det lever op til kundens forventninger. Kunden er tilfreds med både layout og funktionalitet af sitet. Senere hen skal det laves responsivt, således det virker på tablets og smartphones - det er en nødvendighed.
PROCESBESKRIVELSE Møde med kunden Inspirationssøgning på nettet Skitser Layout i PS præsenteres for kunden og godkendes Udarbejdelse af flowchart, skelet og storyboard Programmering af sitet Søgeoptimering ved brug af metatags Browserkompatibilitet testes Demo til kunden Tilretning af kode og tekster Sitet er godkendt og uploades til domænet
INSPIRATIONSSØGNING Tager følgende med derfra: Har et visuelt udtryk og teksten scroller med ned Tager følgende med derfra: Har et visuelt udtryk og enkelt udtrykt Tager følgende med derfra: Produktet er i fokus med store billeder
SKITSER index
SKITSER produktsider
FLOWCHART index.html architecture.html publications.html about.html contact.html viften.html sidetable.html theonethatmoves.html etkoekken.html flex.html planetlamp.html www.pleasewaittobeseated.com
TYPOGRAFI & FARVER På sitet er Helvetica brugt hele vejen igennem, hvad end det er menuen, H1, p mm. Helvetica er en enkelt font, med skabe linjer. De giver den seriøsitet, kombineret med det enkelte look, passer fonten perfekt ind til Mettes produkter og miljøet som skulle skabes på sitet. Ligeledes står fonten også godt til Mettes logo. Farverne på sitet er neutrale. Med den hvide baggrund og den grå tekst - rgb(102,102,102) - er det billedernes farver og materialer som får fuld fokus. Dette er et bevidst valg, da det er den lækre kvalitet produkterne har, som hun skal sælges på. H1 Helvetica, Arial, Sans-serif; Lighter, uppercase, str. 14px. ABCDEFGHIKLMNOPQRSTUVXYZÆØÅ H2 Helvetica, Arial, Sans-serif; Lighter, lowercase, str. 12px. abcdefghiklmnopqrstuvxyzæøå p Helvetica, Arial, Sans-serif; Lighter, str. 12px. ABCDEFGHIKLMNOPQRSTUVXYZÆØÅ abcdefghiklmnopqrstuvxyzæøå #nav ul li p Helvetica, Arial, Sans-serif; Lighter, str. 11px. ABCDEFGHIKLMNOPQRSTUVXYZÆØÅ abcdefghiklmnopqrstuvxyzæøå
LAYOUT I PS Layoytet pæsenteres for kunden, og godkendes. Her er der fokus på stil og opsætning af sitet. Her ses layoutet af index.html, samt hvordan siderne, hvorpå produkterne præsenteres, vil komme til at fungere. Produktsiderne vil naturligvis afhænge af antal produktbilleder kunden ønsker at vise af hvert enkelt produkt. Siden er lavet med en bredde på 960px. og en auto højde. En bredde på 960px. vil fungere til både tablet og smartphones, indtil sitet også er opbygget responsive.
SKELET Skelet for index.html Alle mål er i pixels 60 #header: 960x80 Mål: 960x80 14 20 20 20 20 30 #content: 960xAuto #left: 314xAuto #boks1_1:310xauto border: 2px. solid #right: 633xAuto #boks2_1:633xauto border: 2px. solid #boks1_2:310xauto border: 2px. solid #right_spalte1_1: 314xAuto #boks2_1_1:310xauto border: 2px. solid #right_spalte2_1: 314xAuto #boks2_1_1:310xauto border: 2px. solid #boks2_1_2:310xauto border: 2px. solid #boks2_2_2:310xauto border: 2px. solid #footer: 960xAuto 20 30
60 #header: 960x80 Mål: 960x80 SKELET #content: 960xAuto #left: 314xAuto 14 30 20 20 20 20 #right: 633xAuto pic: 633xAuto Skelet for produktvisning Alle mål er i pixels pic: 633xAuto 9 pic: 633xAuto 9 pic: 633xAuto 9 pic: 633xAuto 9 pic:310xauto border: 2px. solid 9 pic:310xauto border: 2px. solid 9 #footer: 960xAuto 20 30
1 16 STORYBOARD 9 10 1 logomettescheldegraa.png 2 planetlamp.metteschelde.png hover: planetlamp.metteschelde.gif 3 flex.metteschelde.png hover: flex.metteschelde.gif 1 2 4 11 4 et_koekken.png hover: koekken.metteschelde. kitchenart.gif 5 bangogolufsen.metteschelde.jpg hover: bangogolufsen.metteschelde_ tekst.jpg 12 6 frankchair.metteschelde2.png hover: frankchair.metteschelde.png 7 sidetable.metteschelde.jpg hover: sidetable.metteschelde_tekst.jpg 5 7 3 8 draabenmetteschelde.jpg hover: draabenmetteschelde_tekst.jpg 8 9 et_koekken.jpg 13 10 water.metteschelde.jpg 11 fire.metteschelde.jpg 12 block.metteschelde.jpg 13 etkoekken.action.png 14 etkoekken.parts.jpg 15 etkoekken.skitser.jpg 15 etkoekken.doc 6 14 15
HTML OG CSS Template Jeg har opbygget sitet med en template, således jeg kun skal rette i et dokument for alt der vises på samtlige sider på sitet. Content har jeg som det eneste gjort redigerbar, således det er der al indhold på de forskellige sider er. Kommentarer I mine html-koder bruger jeg kommentarer til at gøre det mere overskueligt, og for at <div>-taggene er hurtige at referere tilbage til
HTML OG CSS Søgeoptimering På sitet har jeg både lavet en description og matatags, for at øge søgeoptimeringen. Derudover har jeg lavet alternative tekster til billederne, samt brugt H1, H2... Google Analytics I mellem <head> og <body> har jeg indsat et <script> som hjælper kunden med at følge med i aktiviteten på hendes site via Google Analytics.
HTML OG CSS.class Billederne er placeret med class sådan at man nemt kan tilføje og fjerne billeder, uden at der kommer rod i koderne.
HTML OG CSS generelt.css body font-family: Helvitica, Arial, sans-serif font-weight: lighter color: rgb(102,102,102) font-size: 11px float: left #header position: fixed #nav font-size: 12px #nav ul li list-style-type: none display: none #nav center ul li text-decoration: none #footer p font-size: 9px text-align: right p font-size: 14px line-height: 15px margin-bottom: 15px h1 font-size: 14px text-transform: uppercase h2 font-size: 12px text-transform: lowercase produktsider.css #left position: fixed
SLUTPRODUKT grafisk workflow Se det færdige websitet på www.metteschelde.dk