Grafisk Workflow. hovedforløb 2

Transkript

1 Grafisk Workflow hovedforløb 2

2 WORLD OF FURNITURE

3 Forside.wrapper width: 95%; margin: 0 auto; box-shadow: 0px 0px 25px #888888; <script> Image slider carousel 5 sekunder <button>.button span.button span:after.button:hover span.button:hover span:after.icons.fa.fa:hover Fx..fa-facebook

4 Produktliste <script> Image slider carousel 5 sekunder <button>.button span.button span:after.button:hover span.button:hover span:after

5 Produktside

6 Kunde: World Of Furniture Målgruppe: Aldersgruppe mellem år. Hvad har jeg bidraget med? Da der ikke var et eksisterende website, da jeg begyndte på opgaven. Stod jeg selv med opgaven til designet, og havde helt frie hænder i forhold til layoutet, hvis bare jeg opfyldte designkravene. Jeg har kodet hjemmesiden fra bunden af, og har derfor selv haft kontrol over elementerne i kontrast til at have brugt en WordPress template. Udover dette har jeg skulle skabe en visuel identitet til firmaet, som har bestået af farvekoder, cirkler og fede navne på kategorierne. Opgaven: (Denne opgave er fiktiv) Opgaven gik ud på at lave en stilfuld møbel webshop, hvor alt var ligetil og nemt at overskue. Firmaet ønskede også at sitet skulle passe til de møbler de ville sælge, og på den måde skabe en ro over sitet. Programvalg: Brackets Arbejds proces: 1. Første del i arbejdsprocessen, var at tage et godt langt møde med firmaet, hvor vi sammen kunne gøre det klart hvad de egentlig ønskede sig. 2. Dernæst fik jeg lavet et logo og et layout i Photoshop, og sendte det til kunden. På denne måde kunne de sige om det bare var spot on eller om der var nogle ting de ikke så godt kunne lide. 3. Alle produktbilleder og andre billeder der skal ind på sitet, bliver tilsendt fra kunden til mig. Jeg redigerer billederne, så de passer i størrelsen og selvfølgelig fritlægge de billeder der var nødvendige. 4. Jeg fik lavet header billeder til alle kategorierne, og klargjort alt til hele websitet. 5. Påbegyndelse på at kode websitet, hvor jeg starter med forsiden, således at elementer som menuen og footeren, er klar til at blive lagt ind på alle undersiderne også. 6. Jeg har nemmest ved at gøre sitet responsivt efter, at jeg har kodet hele sitet. Så det afsluttede jeg med. 7. Optjekning på at alt virker og små rettelser til de ting som ikke virker som de skal, hermed kommer padding så tingene ikke kommer til at stå for tæt. 8. Nu er siden færdig og skal præsenteres for kunden. Hvis kunden ikke kan lide produktet skal det naturligvis laves om. Couches Coffee table Armchairs Plaids Pillows Dining table Dining chair Grunden til at jeg har lavet et flowchart er primært hvis der er andre der skal arbejde videre på siden, en anden gang, så kan de kigge paa flowchart og finde ud af hvilke sider der hænger sammen og linker til hinanden, det gør det meget nemmere, så man ikke skal ind og lede efter de forskellige sider hver gang. Flowchart Living room Dining room Bedroom Lightning Decoration Hall Contact Beds Beddings Frontpage Dette flowchart viser fx at Dining room - åbner op for at kunne komme ind på Dining table og Dining chair via en dropdown menu. Drop down menuen gør det meget nemmere at overskue de mange menupunkter, da mange af dem ikke er synlige i første omgang, først når man bevæger sig rundt på hjemmesiden

7 Layout & Responsivt Programmering Designkrav: Kravene til denne website var, at det skulle være rent og stilfuldt. Der måtte ikke være for mange elementer, der ville forstyrre kunderne. Sitet skulle også gerne være lækkert og følge lidt den nuværende mode. Som er det lidt rå og fine blandet sammen. Layout: Sitet har en wrapper med en bredde på 95%, og er centreret. wrapperen har også fået en boks shaddow, sådan at det ser ud som om at den ligger ovenpå body en. Det gør også at siden ikke ser tom ud, hvis jeg havde undværet boks shadow. Og hvis siden havde været i fuld bredde, havde den ikke haft samme effekt, som den nu har fået. Billeder: width: 100%; height: auto; Ved at ligge billederne ind i en div med en bestemt bredde, kan jeg ligge billederne ind med en bredde på 100%, som er med til at gøre dem responsive. billederne er lavet udfra den aktuelle størrelse de skal have på hjemmesiden, og på den måde fylder de ikke mere på sitet, end hvad de er beregnet til. medie screen and (max-width: XXX px; ) Ved hjælp af denne formel, kan jeg gøre hjemmesiden responsiv til både mobil, tablet og computere i forskellige størrelser. Formlen gør at jeg kan bestemme hvilken størrelse hvert enkelt punkt på hjemmesiden skal have når siden fx ryger ned på en bredde på 300 px, så man er sikker på at man kan se hele elementet når siden bliver sat ned i størrelsen. En del af at gøre sit site responsivt, ligger også i at arbejde med % istedet for pixels. Man ønsker helst at fikse så meget som muligt ved at bruge % istedet for pixels. (Dette gælder primært ved kod fra bunden websites) Kodning Jeg har valgt at kode hjemmesiden fra bunden af ved hjælp af Brackets, fremfor at benytte mig i flader som SmartWeb og WordPress. Dette har jeg gjort dels fordi at jeg ønsker at lære mere omkring kodning, men også for at være i kontrol af hvordan koden er opsat. Det ville være en fordel at have brugt WordPress, da jeg kunne have brugt WooComerece til at opsætte webshoppen, så den var funktionel. Der er brugt en smule Java script i forbindelse med at få implementeret de font typer jeg har valgt at bruge som er web fonts. De skal ligges ind mellem: <!DOCTYPE html> <html lang= en > <head> <meta charset= UTF-8 > <title>frontpage</title> <link rel= stylesheet href= css/style.css > <script src= ></script> <link rel= stylesheet href= font-awesome.min.css > </head> Java script er også brugt i forbindelse med image slideren.

8 Skitser Skelet

9 Fonte Former & farver Onyx MT Std 107 pt Onyx MT Std var i 1940 erne en meget populær reklame font, og grunden til at jeg har valgt at bruge en ældre font er, at den er retro og elegant. Den er perfekt til denne virksomhed, hvor de ønsker at det skal være retro og old school. Fonten er også elegant, hvilket kan hjælp med at skabe et udtryk af at det ikke er billige møbler der sælges, men dyrre og er lavet i god kvalitet. Former Cirkler er blevet en stor del af den visuelle identitet for firmaet, og det har nok stor forbindelse med at i denne sammenhængen giver de rå møbler en lethed. Selve sitet ser mere let ud, hvis jeg måske havde valgt at bruge firkanter, havde sitet måske kommet til at se lidt mere kantet og kasset ud. Roboto 63 pt Roboto er en moderne webfont, som er en grotesk sans serif font. Fonten er mere kantet og regulær i forhold til Onyx MT std, hvilket giver en god kontrast i forhold til læsning. Da den er moderne passer den rigtig godt til virksomhedens udtryk, ligesom Onyx. Farver Hvid er brugt i større områder, for at gøre stilen ren, og give det et let udtryk. Hvid skaber ro og giver nemmere overblik over de ting som indeholder farve. Brun er brugt for at fremhæve natur delen i virksomheden, og den del i at det skal være passende med den nuværrende trend. Grå er brugt til cirklerne, først og fremmest for at man kan se produkterne og teksten, men også for at give sitet lidt liv. #ffffff #7e6b5d #e6e6e6

10 Flex box 1400 px Image slider Header Man kan fx lave header billeder med tilbud, fede opsætninger og nyheder. 900 px Da den er sat som en carousel med settimeout(carousel, 5000); vil den skifte billede hvert 5 sekund. På den måde er der en sikkerhed i at kunden ser mere en ét header billede når de besøger webshoppen px I min header, har jeg valgt at sætte en image slider script ind, således kan man vise flere forskellige billeder i headeren, og hvert billede giver et nyt look til sitet, men viser også forskellige ting og kan give inspiration til kunderne px 1

11 Inspiration Kvalitetsvudering Denne opgave var lidt af en mundfuld, da det jo gerne skulle have været en webshop. Grundet at jeg slet ikke er nok inde i programeringen, kunne jeg ikke skabe en funktionel webshop. En anden gang ville jeg nok opsætte et site som denne i WordPress, så er det også langt nemmere at implementere en webshop via WooComerce. Derved er det også nemmere at vidregive sitet til en anden web designer. Men udover det, er jeg egentlig meget godt tilfreds med resultatet, og jeg har i denne proces også lært en hel del mere indenfor kodning.

12