WORKFLOW RESPONSIV HJEMMESIDE MED ET FARVETWIST Hjemmesidedesign og udvikling www.mads-pj.dk/clothesly
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 ImageOptim 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 - WORKFLOW Side 2 af 15
ARBEJDSPROCES Klargørelse af opgave Research & Inspiration Skitser Design i photoshop Test og browser compatibility HTML, SASS og JS/Jquey i Sublime Optimering og upload Færdigt Produkt MADS PADKÆR JØRGENSEN - WORKFLOW Side 3 af 15
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 - WORKFLOW Side 4 af 15
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 - WORKFLOW Side 5 af 15
DESIGNET Layoutet er designet i Photoshop. MADS PADKÆR JØRGENSEN - WORKFLOW Side 6 af 15
MADS PADKÆR JØRGENSEN - WORKFLOW Side 7 af 15
MADS PADKÆR JØRGENSEN - WORKFLOW Side 8 af 15
1 AT HOLDE ORDEN 1. PERSONLIG OPSÆTNING For at øge effektiviteten er Photoshop sat op, med de rette funktioner til opgaven, for at arbejdet bliver udført så effektivt som muligt. 2. MAPPESTRUKTUR For at kunne holde styr på de mange lag, bliver alt lige fra starten lagt i mapper, så det er nemmere og mere overskueligt at finde de rette lag og derved øger effektiviteten. I tilfælde af man senere skal arbejde flere i samme dokument gør det også arbejdet meget lettere for andre. 5 3. NAVNGIVNING Alle filer bliver navngivet, så det er let og overskueligt at forstå deres funktion. Det skal være så alle kan åbne dokumentet og forstå hvad hvert lags funktion er. 4. SHAPE LAYERS OVER BITMAP Bitmap er forbudt! Udelukkende vektor, så langt det er muligt. 5. HISTORY History state er sat til 200, i tilfælde af fejl er det muligt at gå 200 steps tilbage or rette eventuelle fej. Photoshop > Preferences > Performance 3 2 4 MADS PADKÆR JØRGENSEN - WORKFLOW Side 9 af 15
UDVIKLING Siden blev kodet i Sublime Text 2, med HTML5, SASS og en smule Javascript/Jquey til menuen. SUBLIME GIVER GODE MULIGHEDER Sublime Text 2 giver rigtigt gode muligheder, for at skabe en personlig opsætning der kan optimere ens arbejdsproces. Sublime er sat op med et personligt tema, samtidig med der er installeret diverse packages for at gøre ting nemmere og hurtigere som f.eks. SASS og Emmet. SASS OVER CSS Sass er et CSS extension sprog, der gør tingende lettere og giver flere muligheder som bl.a. variabler, partials og mixins. Sass en bliver automatisk omdannet til normal css, som kan læses af alle browsere. Læs mere omkring brugen af SASS på næste side. EMMET GØR TING NEMMERE Emmet er et toolkit for webudviklere der kan gøre tingende lidt nemmere. Man kan bl.a. skrive: ml25px og ved at trtkke på tab, færdigøre den selv sætningen: margin-left: 25px Dette gør at man sparer meget tid på sigt. % OG EMS OVER PX Siden er responsiv, så derfor er siden sat med procenter og ikke pixels. I stedet for pixels er der blevet brugt enten ems og procenter hvis muligt. Dette er fordi en pixel ikke nødvendigvis er det samme på alle skærme. Ems er en relativ enhed. MADS PADKÆR JØRGENSEN - WORKFLOW Side 10 af 15
BRUGEN AF SASS 1. VARIABLER Sass giver muligheden for at arbejde med variabler. Dette er især praktisk når det kommer til farver og skrifttyper. Ved at definere farverne som variabler, kan man skifte farverne på hele siden et sted. Dette er blevet gjort her. 2. PARTIALS Istedet for at have en lang css fil, kan man med sass dele filen op i partials, på den måde kan man have en sass fil for f.eks. header, content og footer. Dette gør det langt mere overskueligt. 3. MIXINS Der er nogle ting ved css der er meget irretende, bl.a. er prefixes træls, men det kan man komme uden om med mixins. 4. NESTING Css kan også nogle gange blive uoverskueligt, med nesting bliver filerne nemmere at finde rundt it. 1 3 2 4 MADS PADKÆR JØRGENSEN - WORKFLOW Side 11 af 15
ANIMATIONER 1. FARVE ANIMATIONEN CSS3 giver mulighed for at arbejde med bevæglse, og ændring af elementer. Det er brugt til at lave baggrunds animationen mellem de forskellige graidenter. 2. NAVIATION Navigations animationen er lavet ved hjælp af css transitions og Javascript for at aktivere dem. 1 2 MADS PADKÆR JØRGENSEN - WORKFLOW Side 12 af 15
FULLY RESPONSIVE 1. MEDIA QURIES Siden er 100% responsiv, dvs der ikke er faste standard mål, hvor siden breaker for at ramme nogle faste mål på devices. Dette er fordi der er så mange forskellige devices på markedet med meget forskellige størrelser. Derfor er siden sat op så den ser godt ud i alle tænkelige størrelser. Dette er gjort med media quries. MADS PADKÆR JØRGENSEN - WORKFLOW Side 13 af 15
OPTIMERING For at optimere sidens hastighed bliver siden optimeret. 1. SAVE FOR WEB Billeder bliver gemt ud med save for web i Photoshop. 2. IMAGEOPTIM Alle billeder bliver kørt igennem programmet ImageOptim, hvor filernes størrelse bliver formindsket. 1 3. BROWSER COMPATIBILITY Siden er testet i Chrome, Firefox, Opera og Safari og siden virker upåklageligt. I Internet Explorer virker den dog ikke super godt, især ikke i ældre browsere. Dette skyldes at der er brugt nyere teknologier som IE simpelthen ikke understøtter. Dette er et koncept, og i tilfælde af siden skulle udvikles rigtigt, skulle der laves fallback løsninger til IE. 2 MADS PADKÆR JØRGENSEN - WORKFLOW Side 14 af 15
SE SIDEN LIVE PÅ: www.mads-pj.dk/clothesly MADS PADKÆR JØRGENSEN - WORKFLOW Side 15 af 15