GRAFISK PRODUKTION & WORKFLOW

Transkript

1 GRAFISK PRODUKTION & WORKFLOW CASPER GEIPEL JENSEN

2 INDHOLDSFORTEGNELSE OPGAVEBESKRIVELSE...3 MÅLGRUPPE...3 KUNDEKRAV...3 SPECIFIKATIONER...3 BRUGTE TEKNIKKER...3 PROCESSEN...4 INSPIRATION...4 STYLETILE: MINDMAP...4 UDVIKLING AF STYLETILE...5 STYLETILE TIL GODKENDELSE...5 LAYOUT + RESPONSIV WIREFRAME...6 SKITSE AF LAYOUT...6 LAYOUT I PHOTOSHOP MED 960 GRID...6 SITEMAP/FLOWCHART...6 WIREFRAME: INDEX + UNDERSIDE...7 OPSTART I DREAMVIEWER...7 RESPONSIV WIREFRAME KODES MED MEDIA QUERIES...7 KUNDEMØDE: GODKENDELSE AF RESPONSIV WIREFRAME + FORSIDE LAYOUT...8 PRODUKTION AF WEBSITE: STYLING...9 GOOGLE FONTS BILLEDER PÅ WEB...11 OPTIMERING AF BILLEDER...11 BILLEDER TIL RETINA...11 BILLEDER OPTIMERET TIL VIEWPORT...12 BILLEDER: AUTOMATISERET WORKFLOW...12 SEO: SEARCH ENGINE OPTIMIZATION...13 FAVICON...13 KOMMENTAR I KODEN...13 TEKST I SPALTER...14 UPLOAD AF WEBSITE...14 W3C VALIDERING AF KODEN...14 GOOGLE SEARCH CONSOLE...14 OUTLINE AF WEBSITE...15 BROWSERKOMPATIBILITET...15 FÆRDIG WEBSITE TIL GODKENDELSE...15 OPGAVEBESKRIVELSE, Nikolaj Bach, havde et ønske om et mere professionelt, moderne og rent udtryk på deres hjemmeside. Bach Event tilbyder professionelle barløsninger, lige fra komplet mobil bar med bartendere og udstyr til mindre delløsninger, hvor man f.eks. kan leje en bartender til festen. Nikolaj er en af Danmarks bedste til flair og et kendt navn i branchen. Nikolaj ønsker en mere brugervenlig hjemmeside, som skal genere forespørgsler til virksomheden. Hjemmesiden skal have et mere moderne udtryk, som passer bedre til Nikolaj og hans kompetencer. MÅLGRUPPE Målgruppen er mænd og kvinder i alderen KUNDEKRAV Enkelt og indbydende Brugervenligt Overskuelig og informerende Responsivt Fokus på at skabe forespørgsler Moderne grafisk udtryk SPECIFIKATIONER Kunde: Nikolaj Bach v/ Bach-Event.dk Opgave: Redesign af Bach-Event.dk Programmer: Dreamviewer CC, Photoshop CC, Illustrator CC, FileZilla, Firefox Developer Tool BRUGTE TEKNIKKER Skitseringsprocess Styletile Responsiv wireframing Flowchart Programmering i HTML5, CSS3, jquery Basal SEO Kontaktformular med Forms (optimeret til Smartphones og tablets) Optimering af billeder til web i Photoshop Automatiseret billedredigering til Retina Valideringprocess af kode Brug af Firefox Developer Tool Test af : Firefox, Chrome, IE og Safari + Retina Google Search Console Nuværende website: Redesign og responsivt website: c-portfolio.dk/bach-event/ 3

3 Møde med Nikolaj Bach PROCESSEN UDVIKLING AF STYLETILE Pic 4 Pic 5 Processen starter med et møde med kunden Nikolaj Bach, for at finde ud af hvad opgaven består af. Her er det vigtigt at finde ud af: Målgruppe Udtryk Formålet med siden Indhold på siden Responsiv eller ej Økonomi Jeg udvikler Styletile med designelementer som: Sammen med Nikolaj bliver vi enige om følgende nøgleord: Brugervenligt, enkelt og indbydende Overskuelig og informerende Responsivt Fokus på at skabe forespørgsler Moderne grafisk udtryk STYLETILE TIL GODKENDELSE Farvepalette (med inspiration fra Adobe Color(Pic 4)) Flatdesign ikoner Typografi (med inspiration fra Google fonts(pic 5)) Finder billedemateriale, som passer til den ønskede stil. Design af knapper Design af menu og hover effekt Færdigt Styletile sendes til kunde for godkendelse. (Pic 6) Kunden var vild med stilen, men kunne ikke så godt lide den grønne farve. Jeg rettede farven og sendte Styletile v1.1. Den blev godkendt. (Pic 7) Pic 6 - Styletile v1.0 IKKE GODKENDT Pic 1 INSPIRATION Nikolaj gav mig et par sider med hjem til inspiration, hvor han specielt godt kunne lide et par elementer, f.eks.: Pic 2 Mørke farve, som giver et eksklusivt look og giver assiociationer til natteliv. Dog blev siden generelt for mørk og tung, syntes Nikolaj. (Pic 1) Pic 7 - Styletile v1.1 GODKENDT Mulighed for at sende en forespørgsel via formular på de fleste sider (Pic 2) STYLETILE: MINDMAP Styletile er et styling dokument, som udelukkende er fokuseret på de overordnede designelementer. Styletile danner udgangspunkt for min css styling senere i processen. Jeg benytter mig af et Styletile for at få godkendt Look & Feel på siden, inden jeg begynder at designe wireframes. Pic 3 Med udgangspunkt i nøgleordene fra kunden, har jeg lavet et mindmap for at få inspiration til designet af Styletile. (Pic 3) Mit mindmap gav mig følgende udgangspunkt for design: Lyst design med moderne kontrastfarve Mørke billeder Ikoner/flat design Elementer inddelt i kasser for bedre overskuelighed 4 5

4 Møde med Nikolaj Bach LAYOUT + RESPONSIV WIREFRAME WIREFRAME: INDEX + UNDERSIDE Nu hvor det overordnede look and feel for websitet er på plads, kan jeg nu begynde at tænke over strukturen af websitet og begynde processen med at danne wireframes og det endelige design/layout. Skitse til wireframe/skelettet, som bagefter bruges til at kode skabelonen i HTML og CSS. (Pic ) Pic 11 Pic 12 Pic 8 SKITSE AF LAYOUT Der laves skitser over layout, inden vi går videre til Photoshop og den reelle designprocess. (Pic 8) LAYOUT I PHOTOSHOP MED 960 GRID OPSTART I DREAMVIEWER Grid 960 System er et hjælpeprogram til at sikre en god og overskuelig stuktur på sit design. System er baseret på bredden 960 pixels og findes i 3 varianter: 12, 16 og 24 kolonner. Pic 9 Pic 10 Grid hentes og ligges i Photoshop-dokumentet inden designprocessen går igang. (Pic 9) Designet af forside bliver lavet med udgangspunkt i det godkendte Styletile, skitser og Grid 960 System. (Pic 10) SITEMAP/FLOWCHART FORSIDE index.html COCKTAILKORT cocktailkort.html Viewport meta tag: For at browseren reagere på mobile enheders størrelse og opløsning skal der indsættes viewport meta tag i <head>. (Pic 17) KONTAKT kontakt.html Output: Output: Output: Output: COCKTAILKORT cocktailkort.html COCKTAILKORT cocktailkort.html LØSNINGER losninger.html LØSNINGER losninger.html LØSNINGER losninger.html KONTAKT kontakt.html Pic 15 Pic 16 Media queries er en CSS teknik, hvor man afgrænser CSS-regler til bestemte skærmstørrelser. Websitet indeholder 3 break points som svarer til smartphones, tablets og desktop. (Pic 16) Der laves flowchart for at få sat struktur på hele sidens sitemap inkl. alle undersider og links. 6 Jeg koder udelukkende i Code View, så kunne have brugt hvilken som helst program til at kode i. Jeg bruger Dreamviewer fordi: Godt overblik over filer med et Site. (Pic 13) Programmet hjælper med at afslutte mine koder og gør derfor arbejdet hurtigere. (Pic 14) Bruger farve til forskellige tags - hvilket gør dokumentet mere overskueligt. (Pic 15) RESPONSIV WIREFRAME KODES MED MEDIA QUERIES VORES LØSNINGER losninger.html Pic 14 Jeg opretter et nyt Site i Dreamviewer til mit projekt og opretter mappestrukturen med det samme. (Pic 13) Jeg har brugt Grid 960 System med 12 kolonner fordi: Sikre et enkelt og overskueligt udtryk Sikrer lige linjer i designet og gode marginforhold Ensartet struktur OM BACH EVENT om-bach-event.html Pic 13 Pic 17 Mål i procenter: For at sitet skal blive responsivt, skal bredder opgives i procent frem for målfaste pixels. (Pic 16) 7

5 Møde med Nikolaj Bach KUNDEMØDE: GODKENDELSE AF RESPONSIV WIREFRAME + FORSIDE LAYOUT PRODUKTION AF WEBSITE: STYLING Pic 18 Pic 19 Efter den responsive wireframe er kodet, har jeg et møde med kunden, hvor jeg præsentere skabelonen sammen med layout på forsiden. Jeg viser kunden hvordan sitet reagere når viewport bliver mindre og har en dialog om hvordan de forskellige elementer skal bevæge sin på mindre enheder. Pic 23 Jeg bruger elementerne fra det godkendte Styletile og koder i HTML og CSS. GOOGLE FONTS Google fonts er en gratis og nem løsning, hvis man vil benytte andet end standard webfonts. Jeg har valgt Open Sans, som findes i mange forskellige vægte og er en flot sans serif font, som fungerer godt til web. Jeg bruger kun normal og bold, så undlader de andre for at formindse loadingtiden. (Pic 23) Pic 18: Wireframe for desktop Pic 19: Wireframe for tablet Pic 20: Wireframe smartphone Pic 21: Wireframe for smartphone med aktiv menu Pic 22: Design/layout af forside (nødvendig for at forstå wireframes) Indsættes hurtigt og nemt et link i <head>. (Pic 24) Nu er vi klar til at style css: Paragraph + h-tags(pic 25) Knapper + farver(pic 26) Baggrundsbilleder (Pic 27) Menu (Pic 28) Hovereffekt på menu(pic 29) Pic 22 Pic 20 Pic 24 Pic 25 Pic 26 Pic 21 Pic 27 Pic 28 Pic 29 Kunden godkendte både design og wireframe strukturen for de forskellige viewports. 8 9

6 Møde med Nikolaj Bach Pic 30 BILLEDER PÅ WEB Pic 36 Det er vigtigt for Bach Events, at kunderne altid kan sende en forespørgsel og komme i kontakt med Bach Events. Alle punkter i formularen er bestemt af kunden. Kontaktformularen er kodet med <form> i HTML(Pic 30) og stylet i CSS en(pic 31). Hvis vi vil optimere loadingtiden på vores website, så er billeder klart den mest væsentlige faktor at kigge på. httparchive.org indsamler data fra hele det store internet, og deres tal viser, at billeder er klart den tungeste del af et gennemsnitlig website. (Pic 36) Pic 37 Formularen er optimeret til mobile enheder ved at bruge f.eks. type= tel, der gør, at tastaturen på en telefon vil skifte fra bogstaver til tal, når man trykker på feltet i formularen. (Pic ) Der rettes i media queries for at optimere formularen til mindre enheder. Jeg har f.eks. gjort felterne en anelse større og flyttet felterne længere fra hinanden, så det er lettere at ramme med fingeren. (Pic 35) Pic 31 Pic 32 - type= tel Pic 33 - type= text Pic 34 - type= Der er flere grunde til, at loadingtiden er vigtig for vores side: Hurtigere loadingtid optimere brugeroplevelse Google ser hurtige sider som mere væsentlige Websitet kan tilgåes selv med dårlige mobilforbindelser OPTIMERING AF BILLEDER Alle mine billeder er gemt i 72 ppi og i srgb. srgb er den mest brugte webprofil og er et mindre farverum end Adobe RGB (Pic 37) og derfor oftest lidt mindre. Billeder er gemt med Save for Web -funktionen med 4-up, som giver mig et overblik over billederne i forskellige kvalitet og den aktuelle størrelse. Heraf kan jeg vurdere hvor langt ned i kvalitet, som billedet kan komme uden at det går ud over oplevelsen. (Pic 38) Pic 38 BILLEDER TIL RETINA Resultat Retina skærme arbejder med 144 ppi, men samme antal pixels som 72 ppi skærme. For at optimere til Retina skærme gemmer jeg alle mine billeder i dobbelt størrelse, f.eks: Billede1.jpg 400x200px, 72 ppi = Billede1@2x.jpg 800x400px, 72 ppi Pic 39 Jeg bruger et script ved navn Retina.js (Pic 39) til at bestemme hvilket billede, som skal vises på siden. Retina aflæser hvilken skærmresolution kunden bruger, hvis det er Retina bliver Billede1@2x.jpg vist, hvis ikke, bliver Billede1.jpg vist. Pic

7 Møde med Nikolaj Bach BILLEDER OPTIMERET TIL VIEWPORT Pic 40 SEO: SEARCH ENGINE OPTIMIZATION Pic Jeg har optimeret mine billeder til forskellige viewports. F.eks. har jeg 3 forskellige billeder af cocktails, én til desktop, én til tablet og én til smartphone. (Pic 40) Til Bach-Event har jeg lavet den basale og nødvendige SEO. Dette giver sitet et godt udgangspunkt for at blive indekseret på Google. Pic 48 Fordele: Billeder er cropped og tilpasset viewport = bedste oplevelse for brugeren. (Pic ) Der skal ikke loades større billede end nødvendigt. Ulemper Kræver mange billeder. Ikke alle browsers forstår srcset -tagget endnu. Pic 41 - tilpasset billede med srcset Jeg har lavet: Title-tags (Pic 46) Meta description + keywords (Pic 47) H-tags (Pic 48) Alt-tags (Pic 49) Interne links (Se flowchart) Responsivtet - Google slår ned på ikke responsive sider Webmaster Tools/Google Search Console (Pic 50) Pic 49 Pic 50 Pic 42 - billedet uden srcset FAVICON Pic 50 BILLEDER: AUTOMATISERET WORKFLOW Alle cocktails har 3 forskellige crops af billedet. De 3 billeder har alle retina version. Det betyder, at for hver gang brugeren ser 1 billede, så ligger der 6 bag. Pic 43 Favicon indsættes for genkendelighed. Indsættes i HTML. Lavet i 32x32 px, hvilket er dobbelt størrelse = retina ready. (Pic ) Jeg har brugt online værktøjet: til at konvertere min png fil til ico. For at optimere processen har jeg lavet en Photoshop Action der: Åbner billedet Forstørre til 2x Konvertere til srgb Gemmer dokumentet som ~60% quality jpg Lukker billedet Der er lavet action til hhv. desktop, tablet og smartphone billeder. (Pic 43) Pic 44 KOMMENTAR I KODEN Jeg har indsat kommentarer i HTML og CSS koderne. (Pic 52) Det gør jeg fordi: Gør filerne mere overskuelig Nemmere at overdrage koden til andre Pic 52 Pic 51 For at køre min Action bruger jeg Photoshop Batch (Pic 44). På den måde kan jeg med ét klik sætte hele processen igang og tilmed ændre alle filnavne til at ende og gemme direkte i min images mappe. (Pic 45) Pic

8 Møde med Nikolaj Bach TEKST I SPALTER OUTLINE AF WEBSITE For at gøre teksttunge sider som f.eks. Om Bach Event nemmere at læse, så har jeg lavet en CSS regel der deler teksten op i 2 spalter for desktop(pic 53). Når sitet breaker til mindre viewports, så forsvinder spalte nr. 2. (Pic 54) Jeg lader W3C crawle min side, for at finde ud af om crawlers kan finde ud af læse strukturen på min side. Dette er specielt væsentligt for Google crawlers. Pic 62 Eksempel for (Pic 62) Pic 54 BROWSERKOMPATIBILITET UPLOAD AF WEBSITE Websitet er testet i de mest almindelige browsers: Chrome Firefox Internet Explorer (Pic 63) Safari Retina display Pic 53 Pic 54 Pic 55 Websitet uploades til test server på: Jeg tester Retina display ved at ændre indstillinger i Firefox til at arbejde med dobbelt PixelsPerPx (Pic 64) Jeg bruger FileZilla til at tilgå min FTP server. (Pic 55) Med FileZilla kan jeg: Tilgå mit FTP server med ét klik Få styring med mine filer Kan begrænse overwrites til: Only overwrite if newer Jeg bruger herefter Firefox Developer Tool og tjekker via Netværk -funktionen hvilke filer som siden loader. Her kan jeg se at retina scriptet virker, da alle billeder bliver hentet. (Pic 65) W3C VALIDERING AF KODEN Pic 63 Pic 64 Pic 65 Pic 56 Pic 57 Jeg tjekker mine koder for fejl og mangler ved valideringsprocessen på W3C.org. (Pic 56) W3C er et internationalt community, der udvikler web standarder og arbejder med at udvikle kodesprog til internettet. Fejl rettes og alle sider valideres succesfuldt (Pic ) Pic 58 Pic 59 GOOGLE SEARCH CONSOLE Jeg tjekker om Google Search Console har fundet fejl på websitet, som gør, at sitet ikke kan blive indekseret. (Pic 61) FÆRDIG WEBSITE TIL GODKENDELSE Websitet sendes hos Bach-Event. Websitet vil fortsat være på min testserver, indtil alt er godkendt. Pic 60 Pic 61 Herefter overleveres alle filerne til Bach-Event og sitet uploades til deres domæne. En del af aftalen med Bach-Event er, at jeg hjælper med opsætning af, når websitet er klar til launch. Websitet er ikke endelig godkendt endnu

9 CASPER GEIPEL JENSEN