GRAFISK DESIGN RESPONSIV WEBSHOP MED ET FARVETWIST Hjemmesidedesign og udvikling www.mads-pj.dk/clothesly MADS PADKÆR JØRGENSEN - GRAFISK DESIGN Side 1 af 13
DOKUMENTATION OPGAVE Opgaven jeg stillede mig selv, var at designe og kode et koncept til en webshop der sælger tøj. Siden skal være fully responsiv og fungere på en række forskellige typer skærme. PROGRAMMER BRUGT Photoshop Sublime Text 2 MÅPLGRUPPE Målgruppen er de 14-35-årige, der går op i mode og design. Det er dem, der gerne vil smide lidt flere penge efter de rette mærker og som er med på moden. De er skarpe med en computer. MÅL At designe og kode en en hjemmeside til en fiktiv virksomhed ved navn Clothesly. Virksomheden sælger modetøj. Virksomhedens produkter skal have sidens hovedfokus. Siden skal være moderne, den skal være lækker at bruge og den skal være anderledes og skille sig ud fra mængden ved at have et unikt design. Siden skal være 100% responsiv, så uafanset hvilket device man sider med, ser siden perfekt ud. Det vigtige her er at komme frem til et fedt koncept der er anderledes og som ville vække opsigt. Derfor er bliver der også kun designet en enkelt underside. Undersiden som skal designes er en produktside for t-shirts til mænd. MADS PADKÆR JØRGENSEN - GRAFISK DESIGN Side 2 af 13
INSPIRATION RESEARCH Jeg lod mig inspirere af nogle af de helt store webshops som sælger tøj på nettet. De har alle et meget traditionelt layout. De er samtidig meget komplekse, noget jeg gerne vil simplificere. www.asos.com www.stylepit.dk www.boozt.dk http://www.kaufmann.dk/ Nogle andre sider med et fedt design jeg var inspireret af: www.wedistill.io Gradient www.etq-amsterdam.com www.inventid.com www.briandelaney.com Brug af forskellige farver www.andershede.com Brug af forskellige farver MADS PADKÆR JØRGENSEN - GRAFISK DESIGN Side 3 af 13
SKITSER IDÉER Skitsefasen er her hvor de første idéer kommer frem. Det er ikke pænt, men det er også kun for at få nogle idéer at arbejde videre med. MADS PADKÆR JØRGENSEN - GRAFISK DESIGN Side 4 af 13
TYPOGRAFI RESEARCH Målgruppen er de unge med sans for design og mode, derfor skal der en god skrifttype til, der kan matche det stilsikre tøj der bliver solgt. Skriften skal være enkel og ren, men ikke kedelig. Måden den rette font blev fundet på, var ved at åbne photoshop og skrive en sætning med en masse forskellige typer, for at få et overblik og for at bedre kunne stille dem op mod hinanden. 1. RALEWAY Den udvalgte font er raleway. Det er en enkel grotesk skrift, men med karekter og genkendelighed. Den er er stilren og er meget moderne, hvilket gør den matcher målgruppen perfekt. Desvære er dens tal ikke super gode. 2. LATO Idet Raleway ikke har de pæneste tal, vil Lato blive brugt til store priser. Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for 2 the evil Queen and Jack. Grumpy wizards make toxic brew 1 for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack. MADS PADKÆR JØRGENSEN - GRAFISK DESIGN Side 5 af 13
FARVER DYNAMISK FARVETEMA Efter en del mislykkedes forsøg på at finde en farve der kunne være virksomhedens signaturfarve kom jeg frem til en speciel og anderledes løsning. Fordi der bliver solgt tøj til både mænd og kvinder og der bliver solgt mange forskellige typer af tøj med mange forskellige farver, var der ikke en enkelt farve der gav mening. Derfor fik jeg idéen at virksomhedens signaturfarve skulle være en række af gradienter. Sidens farver skal skifte regelmæssigt, for at give et dynamisk flow, der giver spil og skaber et unikt visuelt udtryk, der fanger opmærksomheden. SKIFTENDE FARVER Når der ikke er nogle faste farver, kan de udskiftes så de matcher årstiderne eller modens hotte farver. SEKUNDÆRE FARVER De sekundære farver er sort og hvid. De er klassiske og står godt til billeder. #6e96c9 -> #552d85 #4acd91 -> #1f7818 #FF512F -> #d1354f #FF512F -> #d1354f #FF512F -> #d1354f MADS PADKÆR JØRGENSEN - GRAFISK DESIGN Side 6 af 13
DESIGNET Layoutet er designet i Photoshop. RESPONSIVT I TANKERNE Siden er designet med tanken om at det skal fungere responsivt. Det vil sige der ikke er brugt et gridlayout, men der derimod er taget højde for elementernes størrelse matcher hinanden og der konsekvent er brugt de samme afstande mellem elementer. MADS PADKÆR JØRGENSEN - GRAFISK DESIGN Side 7 af 13
MADS PADKÆR JØRGENSEN - GRAFISK DESIGN Side 8 af 13
MOBIL DESIGN Efter designet var lavet til desktop, blev designet lavet til mobil, for at få en fornemmelse for, hvordan de forskellige elementer skal brydes når de skal kodes. 1. MENU For at menuen ikke fylder for meget, bliver den skjult og kan aktiveres ved at klikke på burger ikonet. 1 MADS PADKÆR JØRGENSEN - GRAFISK DESIGN Side 9 af 13
MADS PADKÆR JØRGENSEN - GRAFISK DESIGN Side 10 af 13
ANIMATIONER OG BEVÆLGELSE Design er ikke bare et fast statisk billede, det er også hvordan elementer bevæger sig, samt hvordan siden opfører sig, når man benytter den. En hjemmeside skal ikke bare se godt ud, den skal være lækker at bruge, dvs. elementer reagaere når man bruger dem. Når musen bevæger sig over et element, så sker der en effekt, på den måde føles det mere interaktivt. Disse effekter skal være subtile og ikke stjæle for meget opmærksomhed, det skal føles naturligt. Nogle eksempler på dette er: 1. MENU På mindre skærme forsvinder menuen og et burger ikon kommer frem. Når ikonet klikkes flyver menuen ned, samtidig med baggrunden bliver mørknet. Istedet for at burger ikonet bare bliver udskiftet med et kryds, transformere de 3 streger sig til et kryds, dette kan virke ligegyldigt, men det er disse små detaljer, der gør en side supper lækker at bruge og det hele virker mere harmonisk. 2. FARVER En anden detalje er den subtile farve ændring der sker ca. hver 20 sekund. Alle elementer med farve skifter præcis på samme tidspunkt, dette giver et unikt visuelt design, der hele tiden får designet til at virke nyt og friskt. Se næste side for eksempel. 1 MADS PADKÆR JØRGENSEN - GRAFISK DESIGN Side 11 af 13
MADS PADKÆR JØRGENSEN - GRAFISK DESIGN Side 12 af 13
KVALITETS VURDERING Jeg er kommet frem til et unikt og gennemført lækkert produkt. Designet ligger sig op ad hvad de store webshops har, men med et mere enkelt, lækkert og unikt udtryk. Der er lagt fokus på den udvalgte målgruppe som er de unge med trang til godt og lækkert design. Siden er 100% responsivt, og fungerer på alle (testede) devices, lige fra smartphones til tablets og computere. Siden er dog ikke helt optimeret til Internet explorer, især ikke på ældre versioner, idet siden gør brug af nyere teknologier. Men da målgruppen er de unge som har forstand på teknologi, er sansynligheden for de bruger gamle versioner af IE meget lille. Dette er kun et koncept, så hvis det skulle bruges en dag, skulle der nok mere fokus på brugerenlighed. Der skal flere filter funktioner ind, der kunne gøre det lettere for kunden at finde præcis hvad de leder efter. Samtidig med der skal laves fallback løsninger til Internet explorer. Siden kan ses på: www.mads-pj.dk/clothesly MADS PADKÆR JØRGENSEN - GRAFISK DESIGN Side 13 af 13