2. HOVEDFORLØB 2016 GRAFISK DESIGN

Transkript

1 2. HOVEDFORLØB 2016 GRAFISK DESIGN

2 KUNDEN POLE FITNESS VEJLE Pole Fitness Vejle har en template hjemmeside, som ejeren selv redigerer. Jeg har besluttet at lave et alternativ til deres design, og hertil vil det blive kodet med html og css. Desuden vil det blive responsive, således at det også tilpasser sig mobil/tablet. Målgruppen Primært piger/kvinder i alderen 15+, som har en interesse i pole fitness eller kunne tænke sig at se hvad det går ud på. Drenge/ mænd er også velkomne, men målgruppen spænder knap så bredt. Budskab Sitet skal være brugervenligt, det skal indeholde de informationer man typisk vil søge på et website f.eks. kontakt informationer og adresse. Da det er et fitness center, vil der specielt blive lagt vægt på hold info og tilmelding hertil samt indmeldelse. Nuværende site indeholder mange links/ undermenuer, som menes at kunne komprimeres ned. Derudover er det en smule kaotisk med med neon farvede tekstbokse forskellige steder. Der skal bringes ro over sitet, men en lettere farverig stil skal dog stadig holdes. Budskabet skal stadig være et spændende og farverigt sted. Typografi Pole Fitness Vejle (PFV) har i forvejen valgt to skrifttyper som bibeholdes. De får et nyt udtryk ved hjælp af konsekvens i brugen af typografien og farver. Deres display tekst/overskifter bliver skrevet med JosefinSlab-SemiBold altid i kapitaler/ versaler. Den bliver ikke brugt til brødtekst, da denne ikke menes at egne sig hertil. Den er ikke specielt læsevenlig i minuskler og mindre skriftstørrelser, da den har en lav x-højde og dens slab seriffer kan være forstyrrende. Til brødtekst og i nogle tilfælde mindre overskrifter, hvor display teksten er brugt samtidig, anvendes en OpenSans-Regular, -Bold eller -Light. Denne er moderne og god til skærm. Den har en lettere høj x-højde, som gør den læsvenlig helt ned i de små skriftstørrelser. Farver Som beskrevet er de eksisterende farver meget fremtræden i form af to neon farver, som skriger lidt til hinaden, når de står sammen. De to farver bibeholdes, dog lægges en dæmper på neon delen, og der fokuseres på to mere passende farver, som supplerer hinanden i deres enkelthed. Dertil kommer tekst farve og duchede baggrundsfarver. Et farveskema følger. Billeder Tages fra PFV s eget site og galleri. Men bruges kun som dummies/eksempler. Arbejdsprocess Studér PFV s eget site Inspiration i andre nærliggende sites som andre pole- og fitness centre Flowchart eksistrende samt nyt Skitseringer Style Tiles Design i PhotoShop HTML, CSS etc. PhotoShop Til design anvendes PhotoShop (PS). Her bruges et grid, som gør det lettere at arbejde med tekst og objekter i forhold til vidde og afstand også set i forhold til det responsive aspekt. Der arbejdes en del med procenter under kodning, hvilket vil sige at præcis pixel ikke er så vigtig under design processen. Kvalitetssikring Sitet tjekkes konstant og primært i FireFox, dog også i andre tilgængelige platforme som Safari og Chrome. Der kan bl.a. spottes en forskel i font vægte fra FireFox til Chrome og Safari, dog ikke af betydning. Der forventes ikke brug af avanceret kode, hvilket giver en større sikkerhed i at sitet fungerer i flere browsere f.eks. også Internet Explorer, som jeg ikke har umiddelbar adgang til, men dog tjekkes. Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 2

3 EKSISTERENDE SITE både PFV s stil som den er samt information på sitet blev undersøgt. Stil/farver skulle bruges til en videre design process. Der er taget udgangspunkt i de i forvejen valgte farver, men tilpasset et mere brugervenligt og roligt site. Information skulle bruges til at lægge et eksisterende flow chart og få overblik over sitets information. Herefter skabes et nyt flow chart, som tager forbehold for de nye rammer. Flow chart følger. Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 3

4 NÆRLIGGENDE SITES der blev undersøgt andre nærliggende sites så som pole- og fitness sites, for at få inspiration og gode idéer til hvordan både design og flow chart skulle udarte sig. Design mæssigt til baggrund tog jeg udgangspunkt i den flade, lette, horisontale opdeling af sektioner som på billede 1. Runde billeder, for at give sitet lidt bløde former til et ellers stringent og skarpt design som på billede 3. En knappe opdeling som på billede 4. En holdopdeling som på billede 2. Pris opdeling som på billeder 6, dog ikke så avanceret. Således har jeg benyttet mig af andre designlinjer til at skabe PFV s design. Brugen følger. Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 4

5 INDEX/FORSIDE ELEV LOGIN INSTRUKTØR LOGIN HOLDPLAN M.M. PRISER GALLERIER LINKS SHOP Holdplan Priser Instruktører Samarbejdspartnere Gavekort Få login/køb medlemsskab Anmeldelse Acro yoga Klubmesterskab sponsor Tøj Indmeldelse 29/8-15 Event Bidragsydere Grip Aid Forældre tilladelse 16/8-15 Scrapbog Vilkår Leg i Mariaparken PBS tilmelding Dato Graffiti 9/8-15 Hygge aften Photoshoot Albuen Klubmesterskab Videoer Sociale medier Denne kan evt. fortsætte i takt med flere events og billeder EKSISTERENDE FLOW CHART Dette er en kortlægning af det eksisterende sites information. Dette giver et fint overblik over den information, som det nye site skal indeholde. Det findes at der er mange undersider, som ikke umiddelbart er nødvendige at liste op. De kunne f.eks. samles eller lægges ud til en anden navigation. Undersiden Gallerier er specielt uholdbar, da denne kunne fortsætte i uendelighed. Disse overvejelser kan ses i næste, opdaterede flow chart. Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 5

6 Samarbejdspartnere INDEX/FORSIDE Klubmesterskab sponsor Bidragsydere ELEV LOGIN LINKS INSTRUKTØR LOGIN DIN INDKØBSKURV HOLDBOOKING MEDLEMSSKAB GALLERIER SHOP Holdplan Priser Instruktørerne Gavekort Vores Hold Anmeldelser Billeder Tøj Vilkår & Betingelser Billede serie 1 Grip Aid PBS tilmelding Billede serie 2 Billede serie 3 Videoer Social Media Scrapbog NYT FLOW CHART Sitet har to globale menuer. En primær og en sekundær. En lille menu øverst med links/undersider som sekundær emnu. Under menuen Links, findes de undersider, som før tilhørte den primære globale menu. Derudover er diverse logins tilføjet, så de altid er tilgængelige, de lå før under Holdplan m.m.. Indkøbskurven er også lagt her, hvor den før kun var vist i et hjørne kun med ikon. Den primære globale menu indeholder nu de links/menupunkter, som er fundet mest vigtige. Holdbooking (før Holdplan m.m.) indeholder Vores Hold, som bliver en ny side. Det er fundet ved research at holdbeskrivelser er vigtige, derfor en underside hertil. Medlemsskab (før Priser) indeholder næsten det samme, dog skal Forældretilladelse og Indmeldelse tilføjes som punkt i Vilkår & Betingelser. Gallerier koges ned, men under Billeder, skal der være mulighed for at oprette billede serier/albums. Shop forbliver som den er. Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 6

7 SKITSERINGER der er lavet hurtige thumbnail skitseringer, for i at have et layout at forholde sig til under design processen i PhotoShop. På denne måde kan man også nemmere få et overblik over stilen gennem flere undersider. Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 7

8 STYLE TILE er til for at lægge en retningslinje for den videre design process. Den definerer ikke noget fast, men giver et godt indblik i det færdige udtryk, som man kan holde sig til. Sammen med skitser er det et godt udgangspunkt for et design. CALL-TO-ACTION funktioner så som knapper til tilmelding, køb osv. AIDA modellens sidste skridt er Action, og her bruges den grønne specielt; den indbyder til noget godt der ligger en hvis optimisme i farven ATTENTION til at tiltrække opmærksomhed - første skridt i AIDA modellen. Denne farve er logo farven, og skal kun bruges diskret for genkendelighed og blikfang. Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 8

9 ARBEJDSPROCESSEN PHOTOSHOP Der er brugt PhotoShop til hele den digitale design processen. OPSÆT der er som skrevet benyttet et grid. Dette er for at tilpasse tekst og objekter nemt og pænt under og ved siden af hinanden. Det giver et godt grid til afstand i vidden og benyttes også til hjælp for responsiv tilpasning. TOP OG BUND en top og bund designes, disse elementer vil være gennemgående for resten af sitet. LAYERS med mappe struktur i PS layers, holdes der styr på de forskellige sider til sitet. Herunder også navngivning af enkelte lag. Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 9

10 SEKUNDÆR GLOBAL MENU 1. PRIMÆR GLOBAL MENU med logo placeret i det typiske venstre øverste hjørne starten af læseretningen. TOP IMAGE et billede, let sløret placeret som blikfang. Sløringen skaber en hvis ro og giver en bedre bund til teksten til højre. Denne er placeret således at øjet falder på logo henover menu mod højre og derefter ned på overskrift med tilhørende knap videre til tilmelding. SEKTION 1 to måder at komme videre på og skabe opmærksomhed. Et link for eksisterende elever (Holdbooking) og et til både eksisterende og kommende elever (Hvem er vi?). Reglen om nærhed (Gestaltlovene) - det er tydeligt, at der findes to opdelinger her. Sektionsfarven giver lukkethed. SEKTION 2 et hurtigt og nemt overblik over de forskellige hold i sin enkelthed. Der kan klikkes på kategorien og man kommer ind på Vores Hold. Reglen om nærhed og lighed (Gestaltlovene) - overskrift og underrubrik hører sammen (nærhed), kasserne hører sammen (lighed og nærhed). FOOTER et overblik over diverse kontakt oplysninger. Adresse, kontakt, sociale netværk man kan følge og tilmelding af nyhedsbrev. Enkelt og let tilgængeligt INSPIRATION den enkelte horisontale linje i duchede farver, som kører fuld vidde uanset browser størrelse (billede 1, side 4). Opdeling af hold i knapper med stroke. (billede 4, side 4). Samt runde billeder (billede 3, side 4) FOKUS på enkelthed og det brugeren skal bruge. Går brugeren direkte til menuen, så er alt hvad der skal bruges, i en enkel opstilling. Scroller brugeren ned, så er der mulighed for diverse links på forskellige interessante måder - direkte til Tilmelding, Holdbooking, Instruktørerne eller et kig på de forskellige udbud af hold. Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 10

11 TOP IMAGE her forbliver overskriften den samme og link til tilmelding, så dette konekvent er tilgængeligt sidte led i AIDA > Action > PFV ønsker nye medlemmer. SEKTION 1 en overskrift med tilhørende spalteafsnit. Reglen om Nærhed (Gestaltlovene) hjælper brugeren til at se hvad der hører sammen her. EKSTERNT SYSTEM holdplanen er et eksternt system, der skal integreres på sitet. DROPDOWN MENU en overskuelig dropdown menu, som har hover og active link i Bold, så man kan se hvad man står på nu og hvad man kan klikke på. Man kan ikke klikke på Holdbooking, men en border under skal vise man står på et link herunder. Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 11

12 2. SEKTION 1 En overskuelig oversigt over de forskellige hold, som PFV tilbyder. Denne side er ny, PFV har ikke en underside dedikeret til beskrivelse af hold på deres nuværende site. Det er efter research fundet aktuelt at lave en sådan side. INSPIRATION holdindeling på Fitness World hold side (billede 2, side 4). DROP DOWN her kan man vælge en kategori og gå til denne på siden. Overskrift og link i dropdown menuen er lavet som et Anchor Point, som linkes sammen. BOKS reglen om lukkethed (Gestaltlovene) hjælper brugeren til at se hvad der hører sammen. Elementerne har en bestemt højde for at billede og tekstfelt kan være lige store. Længden på teksten er tilpas lang. Man kan trykke læs mere og et vindue kommer frem med hele beskrivelsen, hvis nødvendigt. Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 12

13 6. OVERSKRIFT venstrestillet da dette var mest passende for det efterfølgende design. INSPIRATION idéen til pris kasse opdelingen og tilhørende købs knap stammer bl.a. herfra (billede 6, side 4). PRIS KASSER en overskuelig oversigt over priserne. Ved hjælp af denne inddelingsmetode reglen om lukkethed efter Gestaltlovene giver man hurtigt brugeren et godt overblik og en opfattelse af de forskellige pris kategorier med fokus på pris. CALL TO ACTION sidste skridt i AIDA modellen > Action. PFV søger i sidste ende køb fra brugeren, derfor den grønne call-to-action knap. Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 13

14 ARBEJDSPROCESSEN HTML & CSS Der er brugt Sublime Text 2 til kodning af websitet. Herunder findes et uddrag af CSS styles, som specielt fokuserer på designet. { font-family: JosefinSlab-SemiBold; src: { font-family: OpenSans-Bold; src: { font-family: OpenSans-Regular; src: { font-family: OpenSans-Light; src: url(../fonts/open-sans/opensans-light.ttf); FONTE der er som nævnt valgt en JosefinSlab og en OpenSans i forskellige vægte. Her reglen brugt, for i CSS en at linke til de valgte fonte. Fontene vil så også ligge på serveren sammen med resten af filerne. Dette gør at brugeren har fontene tilgængelig, så de ikke erstattes med en anden font, hvilket kan ødeægge designet..bg-row-white { background-color: #fcf9f8; display: block;.bg-row-darker { background-color: #e9e5e6; display: block;.bg-row-black { background-color: #3e3b3d; display: block; CSS HTML <!--SECTION1--> <div class= row bg-row-white > </div> <!--SECTION2--> <div class= row bg-row-darker > </div> <!--FOOTER--> <div class= row bg-row-black > </div> SECTION FARVE her er der defineret classes, der lægger farve i bagrunden ved brug. Som det kan ses i HTML delen, så bruges den sammen med en anden class, her.row. Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 14

15 h1 { font-family: JosefinSlab-SemiBold; font-size:2.5em; text-transform: uppercase; color: #830058; line-height: 1.06em; margin-bottom: 0.2em; letter-spacing: 0.04em; width: auto; CSS h1 + h2 h3 + p h2 { font-family: OpenSans-Light; font-size:1.3em; color: #3e3e3e; line-height: 1.35em; margin-bottom: 0.2em; h3 { font-family: OpenSans-Regular; letter-spacing: 0.05em; font-size:1.3em; color: #3e3e3e; line-height: 1.35em; text-transform: uppercase; margin-bottom: 0.1em; HEADERS OG PARAGRAPH h1-h4 har fået en defination på forhånd, så de nemt kan bruges i den videre styling. De pre-definerede styles kan så overskirves, hvis dette bliver nødvendigt. På denne måde kan der holdes en god konsekvent brug af ens headers og paragraph, i form af pre-defineret font familie, -størrelse, og -farve samt linjehøjde. Herudover er der sat Uppercase (Versaler/ Majuskler) på JosefinSlab og Letter-spacing (Generel spatiering), der hvor det er fundet nødvendigt i forhold til udseende i browser. Flere eksempler på generel styling på de næste sider. p { font-family: OpenSans-Regular; font-size:1.1em; color: #3e3e3e; line-height: 1.3em; Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 15

16 CSS a { font-family: OpenSans-Regular; color: #3e3e3e; text-decoration: none; a a.inline a.inline { font-family: OpenSans-Regular; color: #90ae2b; line-height: 1.3em; display: inline; text-decoration: underline; a.stroke-button CSS a.green-button { max-width: 210px; width: auto; max-height: 42px; font-family: OpenSans-Regular; letter-spacing: 0.05em; font-size: 1.1em; color: #FCF9F8; background-color: #90AE2B; display: block; text-align: center; padding: 15px 0px; border-radius: 8px; a.green-button a.stroke-button { max-width: 220px; min-width: 200px; width: auto; max-height: 45px; font-family: OpenSans-Bold; letter-spacing: 0.05em; text-transform: uppercase; font-size: 1em; color: #3E3E3E; border: 3px solid #90AE2B; display: block; text-align: center; padding: 15px 0px; border-radius: 8px; float: left; CSS Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 16

17 .hold-container { width: 70%; max-height: 160px; margin: 0px 10% 20px 10%; position: relative; padding: 0px 0px; float: left; background-color: #E9E5E6;.hold-container img { width: 221px; height: 160px; float: left; margin-right: 2%;.hold-container h3 { text-align: left; margin-top: 10px; CSS HTML <div class= hold-container bg-row-darker > <img src=../img/holdbillede.jpg alt= hold1 tit le= hold1 /> <h3>pole Intro/Legetime Børnevenlig</h3> <p>dette er holdet du skal på, hvis du ikke har prøvet Pole Fitness før. Her gennemgår vi de basale ting, der er vigtige for at træne pole. Vi gennemgår: Holdning, svingben og nogle basale spins. <a class= inline href= # >Læs mere</ a></p> </div> h3 +.hold-container h3 <h3>pole Intro/...</h3> p +.hold-container p <p>dette er holdet...</p>.hold-container p { text-align: left; padding-right: 10px;.hold-container img <img src=../img/... />.a.inline <a class= inline href= # >...</a>.hold-container +.bg-row-darker <div class= hold-container... >...</div> Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 17

18 .priser-info { width:94%; min-height: 120px; height:auto; float: left; padding: 3%; background-color:#dad5d5;.priser-info h1 { line-height: 0;.priser-pris { width:94%; height:auto; float: left; padding: 3%; background-color:#830058; text-align: center; CSS.priser-pris p { font-family: JosefinSlab-SemiBold; font-size: 2em; color: #90ae2b; HTML <div class= col4 > <div class= priser-info > <p><span class= bold-sans >Medlemskab pr. år med Betalingsservice</span> <br />(dette inkluderer en gratis prøvetime)</p> </div> <div class= priser-pris > <p>kr. 150,00</p> </div> </div> p + span <div class= priser-info > <p><span class= bold-sans >Medlemskab..</ span><p> </div>.priser-info <div class= priser-info >...</div>.priser-pris <div class= priser-pris >...</div>.priser-pris p <p>kr. 150,00</p> Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 18

19 FÆRDIGT RESULTAT MOCK-UPS Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 19

20 Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 20

21 Grafisk Design 2. Hovedforløb 2016 Michele Lindhardsen 21

22 EGEN REFLEKTION Det er lykkedes godt at re-designe PFV s website med et mere roligt og professionelt udtryk. Farverne komplementerer hinanden godt og sitet er ikke blevet kedeligt selvom de lyse neon farver er dæmpet. Det nye flowchart giver mere mening i forhold til relevans og fokus, det henvender sig til både nuværende og potentielle elever/kunder. Specielt er Galleriet mere holdbart i længden nu. Med henblik på arbejdet med responsiv web, er det konstateret at funktioner som dropdown i navigation, collapsed menu osv. skal integreres samtidig med den generelle opsætning. I dette tilfælde, forsøgtes der efterfølgende at bruge diverse pre-definerede scripts, styles og koder. Disse var svære at integrere i sitet, da det kom i konflikt med mine koder. Der kan f.eks. istedet linkes til Bootstrap i <head> fra starten. Bootstrap indeholder et pre-defineret opsæt af HTML og CSS, som man så kan kode op omkring istedet for HTML roden. Michele Lindhardsen