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
Grumpy wizards make toxic brew for
2
the evil Queen and Jack.
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.
Grumpy wizards make toxic brew
1 for the evil Queen and Jack.
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.
Grumpy wizards make toxic brew
for the evil Queen and Jack.
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
the evil Queen and Jack.
MADS PADKÆR JØRGENSEN
Grumpy wizards make toxic brew
for the evil Queen and Jack.
Grumpy wizards make toxic brew for
the evil Queen and Jack.
-
GRAFISK DESIGN
Side 5 af 13
FARVER
#6e96c9 -> #552d85
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.
#4acd91 -> #1f7818
SKIFTENDE FARVER
#FF512F -> #d1354f
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.
#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.
1
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.
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