LENA SØRENSEN
Redegørelse Opgaven Undvikling og design af logo og hjemmeside til Camillas cupcake. Mit bidrag til opgaven Jeg har arbejdet selvstændigt og alene med opgaven, og har haft frit råderum til at designe og udvikle brandet sammen med kunden. Jeg har selv stået for alt det grafiske, designet (i samarbejde og efter kundens ønske) til logo og hjemmeside, og kodning af hjemmesiden. Afsender Camillas cupcake. Camillas cupcake er et hyggeligt, privat og intimt bageri, som har specialiseret sig i lækre kager, hvor der er kælet ekstra for specielle smage, pynt og udtryk. Derfor tager det også længere tid at fremstille kagerne, og prisen er derefter. Disse kager er specielle og eksklusive, og en nydelse både for øje og mund. Logo Der er i sammenhæng med designet af hjemmesiden, designet et logo. Det er lavet efter kundens ønske om at fange 50 er stilen, og at det skal være feminint uden at blive for piget. Der er valgt 5 farver i brune og grønne nuancer, som supplerer hinanden godt og samtidig skaber en god kontrast. Det er farver, man ikke normalt forbinder med et bageri, og derfor er de lidt opsigtsvækkende. Grøn optager mere plads i menneskers synlige felt, og er efter blå, flest folks farvorit farve. Det er en farve, der er naturlig for folk fordi man ser den alle steder, f.eks. i naturen. Grøn har en beroligene effekt på depression, dårlige nerver og angst. Den er afslappende både mentalt og fysisk. Samtidig giver den en følelse af selvkontrol og harmoni. Alt i alt er de brune og grønne nogle, sympatiske farver som har en positiv effekt på folk. Der er valgt en robust og maskulin Ariel Black og en håndskreven feminin Freestyle Script. Det er begge nogle fonte der står i god kontrast og skaber det ønskede udtryk. Designkrav Kunden ønsker en enkel og overskuelig hjemmeside i klare farver og 50 er stil. Layout Fonte: Der er brugt samme fonte som fra logo til hjemmesiden, hvilket er praktisk, da Ariel er en websikker font. Farver: Der er arbejdet med 5 hovedfarver, som går igen i alle produkter. Der er valgt grønne og brune nuancer i varme toner. Det får designet og stilen til at skille sig lidt ud, da der ellers normalt bliver arbejdet med røde og rosa nuancer til denne type produkter. gang med at brainstorme og søge inspiration til hjemmeside. Jeg har sammen med kunden lavet et flowchart, og ud fra det har jeg lavet skitser til siderne. Siderne designes, sættes op i Photoshop, og disse blev præsenteret for kunden. Skitserne blev godkendt af kunden. Så lavede jeg skelet til siderne og redigerede alle billederne i Photoshop, og alle billederne blev gemt som web-filer. Derefter laves storyboard til de nødvedige sider, og det hele sættes op i dreamweaver med eksternt stylesheet, SEO-optimering, Open Browser Window, Spry Menu Bar, Slider osv. Sites testes af undervejs i forsk. browsere, og hver gang jeg blev færdig med en side, validerede jeg HTML en med http://validator.w3.org/ (se HTML validering side 26). På fjerde møde med kunden blev hjemmesiden godkendt efter et par enkelte små rettelser. Hun havde også en ny opgave; der skal laves indbyddelse til en åbningsceremoni - denne skal ligge i Slideren på index-siden og under nyheder, inden hjemmesiden bliver uploaded. Jeg startede med nogle hurtige skitser til indbydelsen og derefter blev den sat op i Indesign, ved hjælp af flere rationelle produktionsmetoder, som bl.a. Paragraph Styles. Derefter preflightede jeg den, og gemte den som.jpg og.pdf til web. Disse blev sat ind i Dreamweaver. og siden blev uploadet. Den gemmes også som trykbar fil med 3mm. bleed. Derudover har kunden ønsket design af æsker og plakater, og jeg har i mappen vist den færdige udgave. Komposition n er bygget op efter fluid grid layout i dreamweaver (se design on page 12 & Grids til hjemmeside, tablet & smart phone on page 13), og passer til både web, tablet og smart phone. Usability ns første pririotet er overskuelighed, og at navigering mellem de forskellige sider er nem. Derfor er der en menubar i toppen af hver side. Søgeoptimering Jeg har benyttet mig af Metatags, som beskriver virksomheden for at opnå bedst mulig søgeoptimering. Desuden har jeg brugt H1, H2 osv. Browserkompatibilitet Websiden er testet i de forskellige browsere, Safari, Firefox, Google Chrome og Internet Explorer, og virker fint i alle, bortset fra at mit favicon ikke bliver vist i Internet Explorer. Scrollbarer er heller ikke farvet i Internet Explorer, men det er et bevist valg, da hverken kunden eller jeg synes Internets Explores scrollbar er særlig pæn. Jeg har testet at begge forms virker (der bliver sendt mail det rigtige sted hen), og at alle links virker, som de skal. Arbejdsproces Møde med kunden Møde med kunden Møde med kunden Møde med kunden Møde med kunden Logo Indbydelse Brainstorm Moodboard Skitser Udkast Rettelser Brainstorm Inspirationssøgning Flowchart Skitser Opsætning i Photoshop Skelet Redigering af billeder Storyboard Opsætning i Dreamweaver Farvevalg Fontvalg Design i Illustrator SEO optimering og brugervenlighed Tilretning Klargøring til upload Skitser Opsætning i Indesign Preflight & PDF indstilling Indsættelse i Dreamweaver Upload af hjemmeside Slider Open Browser window Design af favicon Arbejdsproces Jeg startede med at have et møde med kunden, hvor vi snakkede om hvilken stil, stemning og farve, hun ønskede. Derefter har jeg lavet brainstorm, moodboard og skitser til logo, både i hånd (se fysisk portfolio) og i Illustrator. Jeg har lavet et udkast i illustrator, som jeg har præsenteret for kunden. Logoet er blevet diskuteret, og der er blevet tilføjet lidt rettelser. Logoet er blevet rettet til og derefter godkendt. Samtidig er jeg gået i Kvalitetsvurdering Jeg mener at være nået frem til et tilfredsstillende resultat, og endte med en meget glad kunde, som ser frem til at bruge hjemmesiden. Siden er enkel og overskuelig, og nem at navigere rundt på. Grafisk har stilen ramt det, kunden ønskede, og især logoet synes jeg personligt er blevet rigtig godt. INFO: Siden er endnu ikke klar til brug, derfor ligger den på mit private domæne og Forms er lavet til at blive sendt til min mail. Ekstra Design af æsker Design af plakater Redegørelse 2
Logo Logo Logo 3
Brainstorm til logo Moodboard Logo Sukker kugler Krymmel Nødder Fuldkorn Sunde Kakao Lemon curd Karamel Marengs Brombær Hyggelig Portion Kanel Fløde Frosting Latter Barnlig Prinsesser Muffins Blåbær Tapet Naturlig Børn Småkager Stjerner Ferie Kontraster Glæde Familie Speciel Ligetil Genkendelig Vanille Jordbær Grafisk signatur Sol Pynt Retro Farver Kaffe Solid Original The Intim Bryllup Troværdig Runde former Blød Venner Camillas cupcakes Sukker Enkel Fin Kongelig Afslappet Feminin Unik Speciel Anderledes 50 erne Sød Barnedåb Blomster Pasteller Hyggelig Speciel anledning Sommer Kager Fødselsdag Glad Barnlig Bånd Personlig Dekoration Honning Stil Opfindsom Usund Natur Streger Amerikansk Hindbær Farverig Tilbehør Små Inspiration Chokolade God Citron Flødeost Topping Guf Banan Kirsebær Frosting Grove Frugt Æble Drys Brainstorm til logo 4
Farvevalg Ideer til farver Fontvalg Camillas Camillas Abadi MT Condensed Extra bold Arial Black Enkel, elegant og simpel, lidt maskulin font. Logo De endelige farver R: 103 C: 40 G: 58 M: 70 B: 21 Y: 100 R: 145 C: 35 G: 94 M: 60 B: 54 Y: 80 #915E36 K: 25 175 C #673A15 K: 50 R: 165 C: 41 G: 213 M: 0 R: 115 C: 56 G: 201 M: 0 B: 186 Y: 34 Pantone Pantone B: 163 Y: 46 #A5D5A3 K: 0 7465 C #73C9BA K: 0 R: 98 C: 64 G: 150 M: 25 B: 144 Y: 43 #629690 K: 7 Pantone 4635 C Pantone 345 C Pantone 5483 C Camillas Braggadocio Camillas Camillas Camillas Camillas Camillas Camillas cupcake cupcake cupcake cupcake cupcake Britannic Bold Colonnia M Eurostile Bold Futura Condensed Extra Bold Gill Sans Bold Haettenschweiler Gabriola Brush Script MT italic Gabriola Edwardian Script Freestyle Script Feminin og sød font. God kontrast til Abadi MT. Farvevalg 5
Design i Illustrator Logo Design i Illustrator 6
Logo aflevering til kunden Grafisk signatur Logo Logo aflevering til kunden 7
Godkendelse af logo & grafisk signatur Logo Logo før kundens rettelser Grafisk signatur Grafisk signatur nr. 2 efter kundens ønske Små rettelser til logo, bl.a. vil hun have cupcake skal stå med stort. Derefter bliver logo godkendt. Kunden er tilfreds med den grafiske signatur, men ønsker samtidig også en stribet signatur. Endeligt logo Godkendelse af logo & grafisk signatur 8
9
Kundens ønske til hjemmesiden brainstorm Til hjemmeside er der ønsket følgende sider: Om mig Kontakt Billedgalleri Bestil tid Specielle lejligheder (billedgalleri) Nyhedsmail Find mig på FB Logo i midten af menu bar Børnefødselsdag Menu Header med logo Menu bar Pæne billeder Specielle anledninger Kort beskrivelse Friske farver Rammer om billeder Browser statistik Klare farver Lav opasitet striber Nyheder Illustrator ikoner Stribet baggrund en del af indholdet også Kort tekst Kontakt Billeder af de ansatte Retro Sød Find os på FB Kreativ Intim Enkel Ligetil Unik Striber Mange billeder Grafisk signatur Farver Original Pasteller Billedgalleri Striber som baggrund Glad Fest Bolsje striber Feminin Nyhedsmail Hyggelig Genkendelig Solid Blog Runde former Fin 50 erne Familie Sommer Lille billedgalleri på forsiden Slikbutik Hvem er jeg Billede af Camilla Rustik Enkel og ene cupcake på forsiden Små og store striber sammen Traditionel Simpel Sider: Find mig Kontakt mig Bestil tid Nyhedsmail Galleri Om mig Nyheder Specielle lejligheder Enkel menu bar Kunstneristiske billeder Drop down menu Bestil et møde Brug af hjerte i design Kundens ønske til hjemmesiden 10
inspiration Sød og enkelt billedgalleri og forside. Lækker brug af stregerne Lækker brug af stregerne God menubar & dropdown menu God og sød menubar Lækker og enkel forside og menubar God menubar Søde rammer om billederne God menubar inspiration 11
flowchart design Først laves der skitser i hånd (se fysisk portofolio). Jeg laver design i Photoshop efter gridsystemet fra Dreamveawer. Kontakt Home Link til FB Om mig Nyhedsmail Billedgalleri Nyheder Menu Billedgalleri Specielle lejligheder Børnefødselsdag Bryllup? Mål: : Tablet: Smart phone: 1000x1059px 768x1024px 480x800px flowchart 12
Grids til hjemmeside, tablet & smart phone Tablet 100x1059px 768x1024px Smart Phone 480x800px Grids til hjemmeside, tablet & smart phone 13
Index design Siderne designes i photoshop Tablet Smart Phone Index design 14
Skelet Index Ommig width: 100% width: 100% auto width: 88.5% SpryMenuBar Max-width: 43em 2% auto auto width: 88.5% SpryMenuBar Max-width: 43em 2% auto width: 66.1016% width: 49.1525% width: 49.1525% width: 88.5% 2% 16.9491% width: 88.5% 2% width: 88.5% 2% Nyheder width: 100% auto width: 88.5% SpryMenuBar Max-width: 43em 2% auto 11% width: 70% 2% width: 70% width: 88.5% 2% Skelet 15
Billeder gemt til web Billedgalleri width: 100% auto width: 88.5% SpryMenuBar Max-width: 43em 2% auto width: 100% width: 88.5% 2% Findmig auto width: 100% width: 88.5% SpryMenuBar Max-width: 43em 2% auto Mappestruktur Alle billeder til hjemmesiden er redigeret og klargjort i Photoshop, og derefter gemt til web. Jeg har helt bevidst ikke indstillet Matte, da jeg ønsker billederne (dem der er fritlagt som f.eks. logo og bestil tid cirkel på index siden), skal fremstå lidt retro og slidte med flosset kant. width: 30% width: 50% 15% 5% width: 88.5% 2% Billeder gemt til web 16
SEO Optimering Storyboard Index 3 4 1: Body Background-img: background.jpg 2: GridContainer ) For at søgeoptimere hjemmesiden har jeg indsat Meta tags. 1 2 7 5 3: Header Img: logo.png 4: Nav SpryMenuBarHorizontal 5: Content Slider: img.jpg img2.jpg img3.jpg img4.jpg 6: Footer facebook.png kuvert.png 6 7: Bestiltid tid.png Ommig ) 3 1: Body Background-img: background.jpg 4 2: GridContainer 1 2 3: Header Img: logo.png 4: Nav SpryMenuBarHorizontal 5 7 5: AsideLeft camilla.jpg 6: Footer 7: AsideRight facebook.png kuvert.png 6 SEO Optimering 17
Brug af EasyRotator Nyheder 3 4 1: Body Background-img: background.jpg Jeg har downloaded og indsat en ekstension, EasyRotator, som jeg har brugt til billedgalleri på index siden og de forskellige galleri sider. 2: GridContainer 1 2 5 3: Header Img: logo.png 4: Nav SpryMenuBarHorizontal 5: asideleft2 bryllup.jpg ballet.jpg 7 6: Footer facebook.png kuvert.png 6 7: asideleft3 lampe.jpg newyear.jpg Billedgalleri 3 4 1: Body Background-img: background.jpg 2: GridContainer 1 2 5 3: Header Img: logo.png 4: Nav SpryMenuBarHorizontal 5: content2 billeder fra mapperne: jul Fodselsdag blandet 6 6: Footer facebook.png kuvert.png Brug af EasyRotator 18
Spry Menu Bar Jeg har brugt Dreamweavers Spry Menu Bar til min menu, og derefter har jeg stylet den efter mit eget ønske, både i HTML en (jeg har slettet undermenu og selvfølgelig skrevet mine egne navne) og i CSS en, hvor jeg har stylet farve, str. font osv. Eksterns CSS Styles - SpryMenuBarHorizontal.css Spry menu i HTML Spry Menu Bar 19
Spry Menu Bar 20
Bestil tid Form og Open Browser Window Færdige Open Browser Windows ) Jeg har valgt at bestil tid siden (og nyhedsmail siden) skal være i Open Browser Window. ) Jeg har indstillet Page Properties for begge sider. ) Der er indsat Forms fra Dreamwaevers Panel ) Derefter har jeg indsat validering, så mailen kun kan blive sendt, hvis den er udfyldt korrekt Først Forms og deri Checkbox Group Bestil tid Form og Open Browser Window 21
HTML & CSS til Pop-Up vindue med Form (Bestil Tid) HTML & CSS til Pop-Up vindue med Form (Bestil Tid) 22
HTML til Index HTML til Index 23
CSS Styles til Index CSS Styles til Index 24
CSS Styles til Index 25
) Design af Favicon HTML validering Jeg har designet faviconet i Photoshop i den ønskede str. Html validering viste fejl på alle siderne pga. at billedstien var for lang til at det hele kunne stå der, og valideringen meldte fejl på Dreamweavers forkortelse... Derefter har jeg converteret Den til.ico, med Online Favicon Maker ) Favicon indsat i HTML Design af Favicon 26
Indbydelse Indbydelse 27
Design af indbydelse Indbydelsen er designet og sat op i Indesign i A5 format. Der er brugt rationelle produktionsmetoder som Paragraph Styles, i hvilke fontene er blevet sylet efter alle kunstens regler, og der er sat Effect på ønskede elementer Design af indbydelse 28
Preflight indstillinger Indbydelse i Dreamweaver Preflight til Web Preflight til Print HTML Preflight til Print.jpg billedet er lavet til en link, hvor.pdf en åbner i sit eget vindue. Jeg arbejder med to forskellige Preflight Profiler til denne opgave, da den både skal bruges til tryk og til skærm Siden Jeg gemmer filen til web, både som Interactive PDF og som JPEG. Preflight indstillinger 29
Upload Upload 30
Ekstra Ekstra Ekstra 31
Plakater Ekstra Plakater 32
Æsker Ekstra Æsker 33