Grafisk design 21
Grafisk design Opgavebeskrivelse At designe en hjemmeside for et reklamebureau og komme med firmanavn og logo. Hjemmesiden henvender sig til virksomheder og private, der har brug for at få brandet eller reklameret for en vare eller ydelse. Opgaven er fiktiv. Bidrag Jeg har selv stået for alt fra idéudvikling til det færdige produkt. Programmer Kernekompetencer Grafisk design System Dreamweaver er et softwareprogram, der bruges til at programmere hjemmesider. Jeg har arbejdet med HTML 5 og CSS 3. Opbygning Hjemmesiden er bygget op om en forside, der har tilhørende tre undersider: Kunder, Om os og Kontakt. Hjemmesiden er lavet med et responsivt design, der ændre sig efter den enhed den ses på: computer, tablet eller smartphone. Browser vinduets størrelse afgør hvor logo og menu er placeret, og om teksten står i tre, to eller én spalte. På siden Kunder er logoet til Folkekirkens Nødhjælp aktiv og linker til en underside; en case, der viser et eksempel på et produkt, som reklamebureauet har arbejdet med. De få sider gør sitet nemt at overskue og navigere rundt i. Design, font og farver Designet er moderne og stilfuldt. Baggrunden er et bybillede fra København, der skal referere til firmaets beliggenhed. Der er gennemgående få farver, og de akromatiske farver (sort, hvid og grå) giver et enkelt og rent look, hvilket tillader de farverige billeder at stå uforstyrret. Der er brugt en stærk pink (RGB: 236, 29, 85) som kontrast, hvilket giver liv, dynamik og varme. Af fonte har jeg tilføjet en web font, der hedder Exo til overskrifter og Praxis Com til brødteksten. De skiller sig en del ud fra standard webfontene og da Exo også er brugt i logoet, fungere fonten som en del af hele reklamebureauets brand, som er nem at genkende. Proces 1. Brainstorming på koncept, design, navn og logo. 2. Inspiration findes fra andre kreative hjemmesider. 3. Skitser af design. 5. Flowchart for hjemmesiden. 6. Forskellige fonte og webfonte bliver afprøvet og testet i forskellige browsere. 7. Skitser af logoet på papir og i Illustrator. 8. Endelig logo laves. 9. I Photoshop laves forskellige udkast til designet. 10. Det endelig layout laves i tre forskellige størrelser, så det passer til en gennemsnitlig smartphone, tablet og på en PC/Mac. 11. Billeder og grafik gemmes som Jpeg eller Png i RGBfarverummet, 72 ppi. 12. I Dreamweaver arbejdes der med procenter og em 13. CSS-styles for det mindste design laves først, og der laves justeringer ved de andre størrelser. 14. Undervejs testes designet i forskellige browsere for at se om det virker, som det skal. 15. Der udarbejdes en designmanual. 16. Hjemmesiden uploades til en server, så den ligger tilgængelig for alle. 17. Projektet afsluttes. Logo Logoet består af fonten Exo i Medium og Extra light, der er efterbehandlet, så det fungere som et logotype. Der er ikke nogle grafiske ikoner knyttet til logoet. Fonten er negativ og indrammet i en sort kasse. Kvalitetsvurdering Jeg synes selv godt om det endelige resultat samt den stil og stemning hjemmesiden udtrykker. Den er simpel og overskuelig for brugeren. Min egen stil lyser meget igennem især da jeg ikke har haft en kundes krav, eller et eksister ende brand, at skulle forholde mig til. Det kan både være en fordel og en ulempe at have så frie hænder, da det nok sjældent vil forekomme i virkeligheden. Processen har været en spændende udfordring, i og med at skulle tænke i procenter og et responsive design, hvor mange af de ting man er oplært i ikke længere er gældende. Find hjemmesiden på mariafulton.dk 23
envision.dk Brainstorming skaevt.com censure.dk n o i t a r i Insp happyogco.dk wordlab.com Pravda Responsive design adtention.dk 24 25
Skitser De bedste skitser udvælges og prøvelayoutes senere i Photoshop. 26 27
Logotype Idéudvikling på logoet Før Der knibes og spærres mellem bogstaverne, for at få et pænere skriftsnit og gøre den mere unik. Efter Designmanual for logotype 100 % 7 50 % 2 Sort/hvid #000 #fff Negativ Logoanvendelse Millennium Bureau Adobe Song Std, L FuturistStencil, Regular Praxis Com, Semibold & Light Eurostile, Regular MaxOT, Regular Millennium Bure au 28 Ebrima, Regular M Samme font, som valgt til overskrifter Chiller, Regular ArenaBlack, Regular Exo, Medium & Extra light Exo, Medium & Extra light Gothic725 Bd BT, Bold & Light M M Ebrima, Regular ArenaOutline Regular, Regular Century Gothic, Regular I et kontormiljø ser man typisk logoet på ting som kugle pinde, kopper, kalendre, blokke samt på firmabiler. Det er en god måde at få reklame og omtale på, hvis folk ser det og evt. tager en kuglepind med sig. 29
Farver Flowchart Forside (index) Kunder Om os Kontakt DKNY Diesel ELLE FKN Harley-Davidson HI-FI Klubben HTH Natactive Renault Tuborg Tryg Vestas Fonte Virker lidt lille og trykket Dette er en god font til brug på web, og den indeholder også skriftsnittet æ, ø og å. Calibri, Regular Ofte set lidt kedelig og almindelig Dette er en god font til brug på web, og den indeholder også skriftsnittet æ, ø og å. Tahoma, Regular Ligner meget Tahoma Dette er en god font til brug på web, og den indeholder også skriftsnittet æ, ø og å. Arial, Regular Meget bred font fylder meget, men pæne runde former Dette er en god font til brug på web, og den indeholder også skriftsnittet æ, ø og å. Verdana, Regular Lidt anderledes god som fallback -font i font-family Dette er en god font til brug på web, og den indeholder også skriftsnittet æ, ø og å. Trebuchet MS, Regular Flot til brødtekst, med lidt blødere former end de andre fonte Dette er en god font til brug på web, og den indeholder også skriftsnittet æ, ø og å. Praxis Com, Regular På kuler.adobe.com afprøves forskellige farvekom bina tioner, for at se, hvilke der fungerer godt sammen. Kantet, men god kontrast til Praxis Com og flot til overskrifter Dette er en god font til brug på web, og den indeholder også skriftsnittet æ, ø og å. Exo, Regular Flimrer måske en anelse på skærm fordi den er så tynd Dette er en god font til brug på web, og den indeholder også skriftsnittet æ, ø og å. Exo, Light Pæn font, men igen, ofte set på nettet Dette er en god font til brug på web, og den indeholder også skriftsnittet æ, ø og å. Gill Sans, Regular 30 31
Layoutforslag i Photoshop #ec1d55 #46d946 Diamantformede kasser som baggrund, dynamik og spænding, forskellige farver og opaciteter, dybde, grøn: natur, ungdom, håb, vækst og energi. Sketch-effekt som baggrund, dynamiske linjer >< statiske linjer, pink: feminint udtryk, lykke, glæde og samvær. #a1d4d7 #5bc7d0 Diamantformede kasser som baggrund, dynamik og spænding, forskellige nuancer og opaciteter, dybde, blå: selvtillid, køligt, renlighed, moderne og nytænkende. Futuristisk baggrund, kontraster, dynamiske linjer, blå: fred, ro, loyalitet, køligt, teknologi grå toner en anelse simpelt/kedeligt. #ec1d55 #d0b42c Bybillede af København som baggrund, dots i billedet slører motivet, stor kontrastfarve i pink, simpelt layout men stadig interessant. 32 Tapetet associere til det hjemmelige, gul: idealisme, munterhed, kreativitet og glæde, stilen kan virke en anelse gammeldags. 33
Layout & komposition Template 1 Original billede Et udsnit af baggrundsbilledet vises alt efter hvilken enhed den vises på. Baggrund 2 Templaten er bygget op om fire kasser i body > div : header navigation section footer Header og navigation er enten ved siden af hinanden eller under alt efter hvilken størrelse enhed, den ses på. Mellemgrund Forsvindingspunkt 3 Halvtone Pattern: Size 3, Contrast 5. // De dobbelte skråstreger fungere som grafiske elementer, der dels opdeler menupunkterne men også bryder det ellers meget statiske udseende. Section har en hvid baggrund med en opacitet på 8, så baggrunden stadig kan anes og teksten tydeligt kan læses. Forgrund Skyggen på kassen er med til at give dybde og en fornemmelse af rum i billedet, samtidig med, at den indrammer og adskiller indholdet fra resten. De diagonale linjer i billedet givet en fornemmelse af dybde og perspektiv, hvilket også forstærkes af bygningernes størrelse der bliver mindre i mellemgrunden. Da man ikke kan se horisonten, virker bybilledet næsten urbant og uendeligt. De statiske, vertikale linjer gør, at motivet stadig virker roligt og struktureret. Motivet er i normalperspektiv så iagttageren er på niveau med billedet og hverken skal se ned eller op på det. 4 Motivet sløres med Halvtone Pattern, så man næsten ikke kan se en kvalitetsændring, hvis skærmen har en opløsning, der er større end billedet på 1200 px bred. Menu hover: farveskift i tekst og baggrund samt a-taggets højde. 34 35
Forside Billeder til slideshow Korte linjelængder (omkring 45 tegn pr. linje) hjælper læsevenligheden på skærmen. På forsiden ses et stort slideshow der skaber blikfang og viser et overblik over nogle af s største kunder og cases. Billederne skifter auto matisk hvert 5. sekund, og ellers kan brugeren selv navigere ved at klikke på knapperne nedenunder. Knappen er pink (RGB: 236, 29, 86) når den er aktiv samme fave som der er brugt i menuen. Reklamerne har meget forskellige udtryk, hvilket viser alsidighed, og kan inspirere kunden. FIRMANAVN 36 8 sort Myriad Pro, negativ 37
Kunder Case Kundekardoktetet er bygget op med en visning af kundernes logoer, fordelt alfabetisk. De vises alle i sort/hvid for at siden ikke ser rodet ud, men ved at køre musen hen over et logo, vises det originalt (i farver). Siden er bygget op med en kort beskrivelse af casen, kontakt oplysninger til firmaet/kunden og et billede af det færdige produkt/koncept, som har stået for. Streger på 1 pixels tykkelse adskiller indholdet, så det giver et mere roligt overblik. Logoerne gemmes med Slice Select Tool og Save for Web and device. 38 39
Kontakt Nyhedsbrev Der er knapper til nemt at kontakte på E-mail, Twitter og Facebook her er igen brugt roll-over effekt, så knapperne bliver pinke når de er aktive. Sections højde forholder sig til indholdet, så der ikke vises en masse overflødig hvid flade. Siden er meget simpel, da den blot skal give brugeren en forsikring om, at informationerne er modtaget og muligheden for at navigere tilbage. Ved udfyldelse af formularen bruges den pinke farve også til skriften. Der er lagt en indre skygge på knapperne ved roll-over, for at give en 3D-effekt og dybde, så knapperne virker mere autentiske. 40 41
S til & stemning billedbehandling Om os Efter Før 1 Med Gradient map ændres billedet til sort/hvid. 2 Den sorte og hvide skyder justeres. Hvid sættes til 98 %. 3 Gradient Map -laget får en opacitet på 80 %, så noget af farven fra billedet skinner igennem. 6 Baggrunden clones med Clone Stamp Tool på et nyt lag, og Sample sættes til Current & below Øverst ses et billede af den samlede personalestab. Navn ene er roteret for at give noget liv og dynamik til billedet. Den lidt atypiske opstilling med tovtrækkeri udtrykker kreativitet og samarbejde, hvilket er vigtigt for et reklame bureau. Kontaktoplysningerne er højrestillet i det store layout, dels for at skabe balance, udnytte pladsen og dels for at bryde lidt med det ellers gennemgående layout. 4 Billedet roteres 8 mod venstre. 5 7 42 Billedet beskæres med Crop Tool. Der indsættes navne med fonten Exo, Demi Bold i negativ med underlinje. De roteres 25 mod venstre. 43
Skelet af template & index Backend, frontend & browsers min-width: 320 px max-width: 640 px min-width: 641 px max-width: 768 px auto header 30 px 20 px nav 30 px 20 px body > div 90 % af skærmen header 100 % nav 100 % auto auto header 30 px 20 px nav 30 px 20 px body > div 7 af skærmen header 100 % nav 100 % auto Split view: kode og design Frontend Mobil enhed Tablet section auto height blueberry 90 % padding 15 px auto height cols 90 % column-count: 1 section auto height blueberry 90 % Designet testes løbende i forskellige browsers og enheder. section 100 % column-count: 2 padding 15 px auto height cols 90 % Hvis ipad en vendes, gælder css-styles for det store design section 100 % Ikke redigerbare områder Favicon min-width:769 px header 30 px auto header 3 body > div 60 % af skærmen nav 6 auto Design af ikonet, der vises på fanebladet: 16x16 px 20 px section auto height PC/MAC blueberry 90 % max-width: 825 px MB MB MB M M M M M M MB M M Exo Medium Extra light padding 15 px auto height column-count: 3 cols 90 % section 100 % 44 45
Designmanual Det færdige design font-family: Praxis Com, Exo, Trebuchet MS h1 font-size: 1.3em line-height: 1.5em (15/18 pt.) font-weight: bold h2 font-size: 1em line-height: 1.2em (12/14 pt.) color: rgba(0,0,0,.6) font-weight: bold Overskrift h1 Overskrift h2 1 em = 12 pt = 16 px = 100 % p font-size: 0.8em line-height: 1.3em (9/15 pt.) font-weight: regular Abore landand ucientiantur sam anis prae porisciis quas in re eaquis sita volvio ma numqui delent aut venihit explis ea dis doluptiume pratibus eritionserum reiunte vent arum quia et fuga. Igentio. Omnisit, tem ex. Forside/index Kunder Footer p font-size: 0.75em line-height: 1em (9/12 pt.) color: #fff Facium ressim // rehenis volorep // udipistrum ducipic // illibus andelle #medarbejdere text-align: right Case: Folkekirkens Nødhjælp Om os Footer p a text-decoration: none font-size: 0.8em line-height: 1.3em color: #ec1d55 Footer p a:hover text-decoration: none font-size: 0.8em line-height: 1.3em color: #666 Michael Engdahl / Kreativ Chef Tlf.: (+45) 42 42 49 10 me@millenniumbureau.dk Michael Engdahl / Kreativ Chef Tlf.: (+45) 42 42 49 10 me@millenniumbureau.dk Michael Engdahl / Kreativ Chef Tlf.: (+45) 42 42 49 10 me@millenniumbureau.dk Nav font-size: 0.75em font-weight: 1em 236, 29, 86 Nav li a display: block color: #ec1d55 text-decoration: none padding: 0 5 5 0 height: 30 px line-height: 30 px; -webkit-transition:200ms ease-in -moz-transition:200ms ease-in transition:200ms ease-in 60 % 255, 255, 255 Kontakt Nav li a:hover padding-top: 3 px height: 30 px background: #ec1d55 color: #fff 000, 000, 000 46 47