Grafisk workflow Se siden her: www.cormas.dk Dokumentation 4 Procesbeskrivelse 5 Inspirationssøgning 6 Skitser 8 Layout i Photoshop 9 Farver 10 Font 11 Flowchart 12 Wireframe 13 Storyboard 14 kontakt.html 15 Responsivt design 16 Html 17 CSS / stylesheet 18 Afslutning 19
Dokumentation Opgave Kunden er min kæreste, som har startet egen virksomhed med akupunktur, massage og cupping. Han var derfor helt på bare bund hvad angår salgmateriale, og derfor har jeg stået for alt grafisk: visitkort, folder, annoncer og hjemmeside. Procesbeskrivelse START Møde med kunden Responsiv tilpasning til tablet og mobil med jquery Krav til hjemmesiden Enkelt site, som passer til hans øvrige materiale; både hvad angår font og farver Nem navigation Kontaktinformationer i bunden på hver side, så det er nemt at finde Målgruppe: Fra unge mennesker (sen teenage-alder) til ældre mennesker Skal være responsiv i tre udgaver: Skærm Tablet (481 px bredde - 825 px bredde) Mobil (op til 480 px bredde) Idéer til layout Enkelt layout med top (logo), menu, indhold (tekst) og bund (kontaktoplysning) Link til forside ved hjælp af både logo og menu Menu med hover-effekt for brugervenlighed Farve- og fontvalg ud fra kundens yderligere materiale Tydelige overskrifter for overskuelighed Inspirationssøgning Skitser Layout i Photoshop præsenteres for kunden og godkendes Flowchart, wireframe og storyboard Søgeoptimering med meta tags FavIcon Browserkompatibilitet Demo uploadet til kunden Programvalg Edge Code (og Sublime Text) Kodning af hjemmesiden Photoshop Billeder klar til web Kodning af hjemmesiden Korrektur Illustrator Logo og illustration til baggrund Kontaktformular med php Hjemmesiden godkendes og uploades på domæne SLUT 4 5
Inspirationssøgning Rene og få farver Hvid baggrund til tekst Tydeligt logo i toppen Tekst centreret på siden. Få elementer. 100% bredde. 6 7
Skitser Layout i Photoshop 8 9
Farver Jeg har valgt nedenstående farver ud fra kundens allerede eksisterende materiale (folder og visitkort). #FFF Hvid Baggrund Font Igen er fonten Open Sans valgt, fordi det er den font, som kunden plejer at bruge. Al materiale til Cormas skal gerne passe sammen, så hans kunder får noget genkendelighed, og derfor har der ikke været mange overvejelser i fontvalg. #000 #666 Sort Den aktive side i menuen Mørk grå Brødtekst Open Sans #F0F0F0 #1D5B89 #2472AC Grå #top baggrund Mørk blå Streger og overskrift (h2) Blå Menu, underrubrikker, #footer baggrund A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 @ % & ( ),. :!? #80BCE9 Lys blå Knap i kontaktformular Jeg har valgt at bruge den mørkegrå farve til brødteksten, da den giver et mere roligt udtryk end hvis der er brugt sort. Den hvide baggrund er ligeledes brugt for at give ro. Kunden ville gerne have en så enkel side som muligt, som samtidig udstråler ro og renlighed, og det synes jeg bestemt er lykkedes på hans hjemmeside. De blå farver har jeg som sagt valgt for at hjemmesiden passer til kundens profil og logo, så her har det kun været en overvejelse om hvor de forskellige blå farver skulle anvendes. 10 11
Flowchart Wireframe index.html Screen akupunktur.html Logo: 150px X auto h1 Titel Top: 100% X 120px Baggrundbillede: 20% X min-height 600px h2 Rubrik Main: min-height 500px Wrap: 100% X auto Menu (formular): 20% X min-height 600px Billede: 25% X auto <p> Brødtekst massage.html STARTSIDE cupping.html index.html Footer: 100% X 120px <p> Brødtekst Billeder med link til kort og Facebook: auto X 30px height priser.html Logo: 150px X auto Top: 100% X 120px Menu knap: 40px X 54px Logo: 150px X auto Top: 100% X 120px Menu knap: 40px X 54px Main: 100% X min-height 750px Menu (formular): 90% X min-height 250px h2 Rubrik Javascript: show/hide Billede: 40% X auto formaaftaler..html h2 Rubrik Billede: 146px X auto <p> Brødtekst Main: 100% X min-height 750px <p> Brødtekst kontakt.html tak.html Tablet med åben menu Footer: 100% X 110px Footer: 100% X 110px Mobil med lukket menu 12 13
1 Storyboard index.html 1 kontakt.html 2 3 2 3 4 4 5 5 6 1. logo_web.png Linker til index.html 1. logo_web.png Linker til index.html 2. Til forsiden Linker til index.html 2. Akupunktur Linker til akupunktur.html Massage Linker til massage.html Cupping Linker til cupping.html Priser Linker til priser.html Firmaaftaler Linker til firmaaftaler.html Kontakt Linker til kontakt.html Til forsiden Akupunktur Massage Cupping Priser Firmaaftaler Kontakt Linker til index.html Linker til akupunktur.html Linker til massage.html Linker til cupping.html Linker til priser.html Linker til firmaaftaler.html Linker til kontakt.html 3. torsten_portraet.jpg 3. Kontaktformular 4. maps_icon.jpg Linker til Cormas adresse på www.google.dk/maps 4. Send-knap Sender udfyldt formular til info@cormas.dk Redirect til tak.html 5. facebook_icon.jpg Linker til Cormas Facebookside 5. maps_icon.jpg Linker til Cormas adresse på www.google.dk/maps Alle sider har samme links/elementer. kontakt.html er dog lidt anderledes. 6. facebook_icon.jpg Linker til Cormas Facebookside 14 15
Responsivt design Hjemmesiden er responsiv, og for at gøre dette har jeg benyttet mål i procenter, media queries og viewport meta tag. Følgende koder har jeg benyttet: Html Herunder ses head-delen af mit index-dokument: <meta name= viewport content= width=device-width, initial-scale=1.0, minimum-scale=1.0 > For at der kan tages højde for mobile enheders størrelse og opløsning, skal denne linje indsættes i head-delen på en hjemmeside. Dette medfører at browseren selv justerer den responsive hjemmeside til den skærm, som hjemmesiden bliver vist på. <link href= css/style.css rel= stylesheet type= text/css /> Dette er linket til mit stylesheet. Heri angiver jeg de forskellige styles til alle de enheder, som layoutet skal justeres efter. I dette tilfælde har jeg 3 forskellige: almindelig skærm tablet mobil Jeg styler først hjemmesiden til en almindelig skærm, og derefter laver jeg to media queries i bunden, som angiver tablet- og mobil-udgaven. @media only screen and (min-width: 481px) and (max-width: 825px) Dette er opløsningen på min tablet-udgave. @media only screen and (max-width: 480px) Dette er opløsningen på min mobil-udgave. I både tablet- og mobil-udgaven har jeg valgt at menuen skal ligge i toppen som en tænd/sluk-knap, så menuen ikke hele tiden ligger og fylder på skærmen. Ellers er det kun ændringer i justering af tekst og baggrund, som er anderledes i to media queries altså ikke nogen store forandringer udover menuen. I dette screendump kan man se at siden er lavet som html5 <!DOCTYPE html>, hvilket betyder at hjemmesiden kan styles meget nemmere med alle de nyeste elementer og effekter. Jeg har brugt tegnkodningen UTF-8, da den sørger for at alle specielle tegn, som f.eks. æ, ø, å og bullet point bliver vist korrekt. Min font Open Sans er ikke en standard-webfont, og derfor er det smart at det er en Google-font jeg har indført et link til fonten på Googles system, og derfor vil alle kunne se fonten rigtigt på browseren. Jeg har taget højde for søgeoptimering og indsat en beskrivelse som meta tag. Det er de ord, der dukker op, når søgemaskinerne finder Cormas side. De fleste af ordene går igen på de forskellige sider (på hjemmesiden), og det er disse gentagelser af ord, som søgemaskinerne reagerer på. For at give genkendelighed har jeg genereret et ikon til øverst i menulinjen. Det er gjort her: www.favicon-generator.org. 16 17
CSS / stylesheet Her ses et eksempel på min CSS, som er det stylesheet, der udgør hele layoutet på hjemmesiden: Afslutning Browserkompatibilitet Siden er testet på Safari, Google Chrome og Firefox. Jeg har ikke nogen superavancerede elementer på hjemmesiden, så derfor vurderer jeg, at det ikke er nødvendigt at teste siden i flere browsere. Kvalitetsvurdering Hjemmesiden fungerer som den skal, og kunden og jeg er begge yderst tilfredse med den. Siden er som kunden har ønsket den; enkel, ren og nem og overskuelig, samtidig med at den har en god brugervenlighed til alle aldersgrupper. Tablet- og mobilmenu Menu-knappen er lavet som formular med checkbox, hvilket betyder at den kan klikkes til/fra. Det er i stedet for at lave menuen med javascript, da checkboxen er en mere simpel måde at lave den på. /* markerer, at linjens tekst er en kommentar, som ikke kommer med på selve siden. Det er blot for at gøre det nemmere at huske de forskellige koder. Upload I første omgang uploader jeg hjemmesiden via min portfolio, så det kun er kunden der kan se demo-siden. Efter han har læst korrektur, når der er indført rettelser, og kunden har godkendt siden, uploader jeg på kundens domæne via app en FileZilla. 18 19