DOKUMENTATION MARIA SKAU MADSEN WWW.BY-M.DK
INDHOLDSFORTEGNELSE OPGAVE BESKRIVELSE.... 5 RESEARCH.... 5 DESIGN.... 5 SPECIFIKATIONER DET TRYKTE MEDIE.... 5 NUVÆRENDE IDENTITET... 6 PRIMÆR OG SEKUNDÆR MÅLGRUPPE....................6 INSPIRATION... 7 LOGO... 8 FONT VALG.... 9 VALG AF PAPIR... 10 FARVER TIL LOGO OG WEBSITE.... 10 ONLINE IDENTITET.... 11 INSPIRATION TIL WEB.... 12 SKITSER.... 12 SITEMAP / FLOWCHART.... 13 WIREFRAME... 14 DESIGN MED GRID... 15 WEBSITE LAYOUT... 25 BOOTSTRAP.... 26 BOOTSTRAP STYLING.... 26 GOOGLE FONT... 27 FAV IKON.... 27 DROP DOWN MENU... 28 IFRAME.... 28 SVG BILLEDER.... 28 MOBIL ENHED.... 29 DIGITAL INDHOLDSFORTEGNELSE Læser du dokumentationen online, så har du mulighed for at gøre brug af den digitale TOC som er linket. SØGE OPTIMERING.... 30 VALIDERING AF WEBSITE.... 30
KUNDE OPGAVE FARVERUM PROGRAMMER OPLAG MD Cosmetics Ny identitet Hjemmeside, logo, visit- og gavekort CMYK og RGB InDesign, Illustrator, Photoshop CS6 og Sublime text. Visitkort: 500 stk. Gavekort: 200 stk. OPGAVE BESKRIVELSE Jeg fik til opgave at redesigne MD Cosmetics identitet, i form af nyt kernedesign som bestod af: logo, hjemmeside, visit- og gavekort. Dog skulle nogle af de gamle elementer genbruges, fordi kunden ønskede at bibeholde deres valg af farver, og få elementer genkendelighed. Kunden ønskede et mere eksklusivt og stilrent udtryk. Det skulle udstråle kvalitet, og derfor blev der bla. lagt vægt på valg af papir og design, samt brugervenlighed på den digitale del. RESEARCH Hvem er kunden? Hvilke værdier har de? Hvem er deres målgruppe? Efter research har jeg en idé om hvem kunden er, og kan nu definere en målgruppe og hvilket segment designet skal henvende sig til (læs mere på side 6). DESIGN Enkelt Stilrent Eksklusivt Kvalitet Troværdighed Disse 5 ord er kernen i mit design, som kunden ønsker skal kendetegne virksomheden. I min dokumentation kommer jeg nærmere ind på mit kernedesign. SPECIFIKATIONER DET TRYKTE MEDIE Visitkort: Format: 85x55mm (visitkort) 2 sider Gemund 925, 310g 1+4: CMYK Gavekort: Format: 190x90mm (løsblad) 2 sider Gemund 925, 310g 1+4: CMYK 5
NUVÆRENDE IDENTITET Kunden havde et ønske om at bibeholde farven fra deres logo, da det var en af deres genkendelsesfaktor. Pic. 1 INSPIRATION Moodboard (Pic. 1) Mindmap () Brainstorm (Pic. 3) Mit moodboard hjælper mig med, at få dannet en helhed i mit design stil og tone. Mindmap samt brainstorm hjælper mig med at komme frem til det rigtige udtryk med stil, farver, toner, værdier mm. PRIMÆR OG SEKUNDÆR MÅLGRUPPE MINERVA MODEL Sekundære: De kunder som allerede er ved MD Cosmetics, som kender til salonen og allerede har et forhold til den. Pic. 3 Primær: Folk der ikke er kunder, men som har en interesse for bl.a. sundhed og velvær. Mænd og kvinder 20+ som har stor interesse i velvær og er kvalitetsbevidste, som går op i deres ydre en blanding af de grønne og blå segmenter. Kilde: http://www.slideshare.net/kimhansen7547/minervamodellen 6 7
Majuskler/ Versal Minuskler Overlængde Underlængde Serif Hårstreg Stamme/ Grundstreg Gennemgående grafisk element LOGO SKITSER Optimer løsninger Hurtig og nemt at danne overblik Jeg laver skitser fordi, det er nemt og hurtigt med blyant og papir, at danne sig et overblik over sit design. På den måde undgår jeg, at blive fanget i løsninger der ikke kan lade sig gøre under produktions fasen. Baskerville Regular Baskerville Demi Bold Gotham Light Italic Gotham Book LOGO FONT Serif fonten: Baskerville, og brugt skriftsnit: Regular og Demi Bold. Elegant med seriffer Udstråler kvalitet og eksklusivitet Flot tynd hårstreg elegant God med en masse luft FONT VALG Tryk og digital brug: En letlæsende font, som har et godt sammenspil med logo fonten og som både kan bruges på trykte og digitale medier. METTE DAL Indehaver, kosmetiker i avanceret hudterapi. LOGO Kvalitet Enkelt Budskab Professionalisme Udfra logo skulle der kunne ses hvilke ydelser salonen tilbød, kunden ville ikke have en illustration af objekt grafik f.eks. af en blomst. Kunden blev inspireret af mode brandet: Chanel. Gotham Book Italic Gotham Medium Gotham Medium Italic Sans Serif font: Gotham, Book Bredt skriftsnit mange varianter Egner sig både til tryk og digital Font brugt til layout på website, Pic. 1 Font brugt på visitkort og gavekort, gensgade 43, 1. sal Esbjerg.mdcosmetics.dk Tlf. 25 61 96 04 Mettedal88@gmail.com Facebook: M.D Cosmetics MD COSMETICS B E A U T Y A N D L A S H E S Pic. 1 8 9
MD COSMETICS B E A U T Y A N D L A S H E S ONLINE IDENTITET Jeg sørger for at der igennem mit design, er en genkendelighed fra det digitale- til det trykte design. Mit moodboard (side 7) hjælper mig, så jeg holder mig til det grundlæggende design og skaber en helhed og genkendelighed. Gavekort (Pic. 3) Visitkort (Pic. 4) Hjemmeside (Pic. 5) GAV EKORT Dette gavekort kan bruges hos MD Cosmetics, og skal indløses inden. Se behandlinger og meget mere på www.mdcosmetics.dk Beløb: Udstedt af: Mette Dal www.mdcosmetics.dk Tlf. 25 61 96 04 Mettedal88@gmail.com Facebook: M.D Cosmetics Pic. 3 VALG AF PAPIR Det rigtige papirvalg er med til at udtrykke designet papiret er en del af designet! Jeg har valgt at få trykt kundens visit- og gavekort på eksklusivt papir. Det udstråler kvalitet og giver et professionelt udtryk. MD COSMETICS B E A U T Y A N D L A S H E S METTE DAL Indehaver, kosmetiker i avanceret hudterapi. Kongensgade 43, 1. sal Tlf. 25 61 96 04 6700 Esbjerg Mettedal88@gmail.com www.mdcosmetics.dk Facebook: M.D Cosmetics Papirtype: Gemund 925, 310g Hvidt perlemors papir med et glans skær. (Prøver er vedlagt i den fysiske dokumentation) Pic. 4 C: 0 M: 0 C: 0 M: 0 C: 0 M: 29 Y: 0 K: 100 Y: 0 K: 40 Y: 13 K: 0 #000000 #b1b1b1 #d79e9f FARVER TIL LOGO OG WEBSITE God kontrast Kvalitet Elegant Enkelt og stilrent Genkendelsesfaktor Renlighed Skønhed Rosa Specifikationerne på mit valg af farver er defineret både i CMYK og hex-koder. Pic. 5 10 11
INSPIRATION TIL WEB Cirkel med bærende ikon grafisk element Navigation menu top Responsiv top banner billeder SITEMAP / FLOWCHART Opbyggelse af mit website Sammenhæng på website Strukturering af sider INDEX / HOMEPAGE BEHANDLINGER ANSIGT NEGLE VOKS DERMA MÆND SKITSER Idé udvikling Skitser af tanker og idéer Virker/ virker ikke? EYE LASHES PRODUKTER KONTAKT BOOKING Ekstern link væk fra site FACEBOOK 12 13
WIREFRAME TIL INDEX OG UNDERSIDER Bevar mit grunddesign Klar designlinje Skabelon Pic. 1: Index : Underside: Behandlinger Pic. 3: Underside: Produkter Pic. 4: Underside: Kontakt Pic. 5: Underside: Booking DESIGN MED GRID 960 grid Design efter 1280 x 600 px Pic. 1: Index : Behandlinger Pic. 3: Produkter Pic. 4: Kontakt Pic. 1 Pic. 4 Pic. 1 Pic. 3 Pic. 3 Pic. 5 Pic. 4 14 15
Logo Navigation top menu WEBSITE: INDEX / HOMEPAGE Forsiden består af logo og navigation, under er der tilføjet et banner, som viser billeder, nyheder eller tilbudskampagner. I midten vises der en velkommen teaser, kort fortalt: hvem er vi, og hvor befinder brugeren sig. Hurtigt, nemt og overskueligt. Herefter de mest eftertagtet ydelser og en call-to-action knap. Top banner Billeder, nyheder, tilbud, kampagner mm. Teaser tekst Velkommen til, hvem er vi... Quick respons Den mest eftertragtet viden på sitet Call-to-action knap Bund med kontakt info Facebook ekstern link 16 17
WEBSITE: UNDERSIDE BEHANDLINGER Quick-overview boks, hvor befinder vi os på sitet. En overskuelig liste med behandlinger, tid og priser. Midt navigation som slider ned til behandlings område. Info boks, som fortæller om den ekstra service man får efter behandlinger (mer-salg). Nederst en call-to-action knap, som linker ind på undersiden med booking. Kort teaser quick overview ANSIGT NEGLE VOKS DERMAOXY MEN S ROOM SINGLE LASH MAKE UP Call-to-action anchor-points navigation Behandlinger, info, tid og priser Info boks serivce Call-to-action knap 18 19
WEBSITE: UNDERSIDE PRODUKTER Kunden ville have en underside, hvor man kunne se de brands hun sælger og bruger til behandlinger. Hun har erfaret at hendes kunder går meget op i de produkter der bliver brugt. Kort teaser quick overview Info med de forskellige produkter/ brands salonen sælger/ bruger til behandlinger 20 21
WEBSITE: UNDERSIDE KONTAKT En simpel underside, som har de vigtige oplysninger. Det skal være nemt, hurtigt og overskueligt for kunderne at finde de oplysninger de ønsker. Kort teaser quick overview. Evt bruges til... det skal du vide Kontakt info Adresse, telefon og mail Iframe Kort med adresse, fra google maps Åbningstider 22 23
WEBSITE: UNDERSIDE BOOKING Booking system er integreret via iframe og er en service fra systemet: Onlinebooking.nu. Det er et booking system, som kunden betaler månedlig abonnement på, som arbejder sammen med resten af hendes systemer. Bla. Lager beholdning, regnskab mm. Booking system 24 25
BOOTSTRAP Et CSS og Javascript framework Bruger det primaet pga. grid Hurtigere og nemmere produktion Responsivt grid mobil, tablet enheder Pic. 1: De standard mål bootstrappen køre med. : Eksempel på opdeling af grid funktionen. Gotham Grumpy wizards make toxic brew Grumpy wizards make toxic brew Grumpy wizards make toxic brew GOOGLE FONT Økonomisk synspunkt Relaway erstatning for Gotham Nem løsning Skrittyper der ikke er standard Verdana Pic. 1: Indsat i HTML : Brug i CSS Pic. 1 Relaway BOOTSTRAP STYLING Tabel Knapper Færdig lavet elementer Udgangspunkt fra stylet Bootstrap Pic. 3: HTML fra Bootstrap Pic. 4: Indsat i HTML og stylet i CSS Pic. 1 Pic. 3 FAV IKON Indsættes i HTML Genkendeligheds objekt Pic. 1: Vist i browser : Indsat i HTML Pic. 1 Pic. 4 26 27
DROP DOWN MENU Ændret til fast navigation, optimeret til mobil- og tablet enheder. Drop down er ikke optimalt på touch enheder, og brugerne scroller når de navigere rundt. Gør også der er elimineret flere undersider der ikke skal navigeres rundt på. Pic. 1 MOBIL/ TABLET ENHEDER Optimere til mobil og tablet ved hjælp af CSS, ved f.eks. at tilføje til mobil: @media (max-width:700px) hvilket gør at CSS reglerne indenfor denne mediaquery gør sig gældende for alle skærme der er fra 0-700px bred. Til tablet er der skrevet en anden mediaquery som tilpasser sig efter tablet proportion. Pic. 1: Optimeret til mobil i CSS : Index på iphone 6 IFRAME Ved hjælp af iframe har jeg indsat bookingsystem og google maps kort. SVG BILLEDER Er vektorbaseret bruges til ikoner. Fordele / ulemper: - enfarvet fil - kan skalere vektorbaseret (står skarpt) Ved brug af SVG billedfiler så sikrer jeg mig at min ikoner/ logoer mm. står skarpt på alle enheder, da nye skærme køre med en højere dpi. Kilde: https://www.liquidlight.co.uk/blog/article/working-with-svgs-insprites/ 28 29
SØGE OPTIMERING Søgeoptimering er en vigtig del når man laver hjemmesider, og for at optimere kundens hjemmeside har jeg bl.a. gjort følgende: Title på sitet er navngivet () Alle billeder er indsat med et alt tag, og beskrivelse af selve billedet (Pic. 3) Indsat description og keywords i head (Pic. 4) Pic. 3 Pic. 4 VALIDERING AF WEBSITE Til sidst validere jeg siden for at tjekke for fejl og eventuelle mangler, som er opstået under kodning af sitet. 30 31
MARIA SKAU MADSEN WWW.BY-M.DK