Designmanual. Bilag 04

Relaterede dokumenter
GARA DESIGN MANUAL. På de følgende sider kan Agaras designmanual findes.

Mark André Lyhne. Eksamen web1b

Michella+Serritzlew+Jacobsen+

1. Semester afsluttende Projekt Charlotte Bruhn MUL A December Januar 2015

Lav din egen forside i webtrees

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

Designmanual for websider

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S.

Grafisk design AnnA SkAk Mediegr Afiker

COPENHAGEN. Opgaven. Kunden. Målgruppe. Layout 1. GRAFISK DESIGN // METTE-MARIE RANDSKOV

3. semester F&A, 2014 Jump Rope Production

Se hjemmesiden på:

Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, Der refereres fra nu af blot

Grafisk workflow. Se siden her:

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen.

Grafisk design. Ide. Designprocess. Målgruppe

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb

Selv om websites er yderst forskellige i deres fremtræden, så kan de stort set alle sammen passes ind i den skabelon som er illustreret herunder:

Grundforløbsprøve Projektbeskrivelse

Jeg har anvendt Chrome måske ser det lidt anderledes ud i andre browsere).

Oliver Marco van Komen Afsluttende opgave Kost ved slidgigt. Case 2. Personlig fysisk hjælp

I denne manual kan du finde en hurtig introduktion til hvordan du:

Grafisk Design 70% Skitser

GRAFISK DESIGN. webdesign af pl.dk

Forside 1: Bagside og bogryg:

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på

Grafisk design 1. hovedforløb Julia Igaard Abrahamsen

Indholdsfortegnelse Idéen bag logo Idéen bag website Farveversioner af logo Webdesign Videoen: Visuelle tanker Stil Speciel effects Motion Design

Stine Dorry Meulengracht Madsen Rapport Multimedie og kommunikation

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen

Afsluttende opgave Webdesign Den 24. maj 2007 Klasse 1.2

Cecilie Maria Nielsen, Mathias Fornitz Eriksen og Martin Arnetoft klasse

Opgaven. Brugervenlighed. Designparametre. Følgende krav var : Research. Målgruppe. Konklusion. sitet ikke bliver for mørkt.

Her ses et screenshot af websitet solsystemet i menuen Merkur. Baggrundsbillede skal være static så resten af siden skal man scrolle ned for at se.

Portfolio. Udvikling af min portfolio Link til portfolio: Michell Aagaard Dranig

Betinget formatering med fremhævning af celler der passer overens med betingelser

OPGAVE: WELOVEORGANIC.COM WEBSHOP

Grafisk design. Filmblad til tablet

Vigtige funktioner i Word 2003

MANUAL - Joomla! Version 1

Vejledning. Tabulex Hjemmeside. Styling af sidemenuer. Side 1 af 8

Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2

Spørgsmålene kan tages som en fælles klassedebat eller i mindre grupper.

Portfolie Redesign. Forord. Det tekniske. Tema ide. Css. opløsning.

Grafisk Design. Facebook: Opdatering fra en Teenager en typisk fredag aften. Kilde: Min kusines datter.

Design manual for Bifrost

Indre Missions visuelle identitet Designmanual

Grafisk Design. fra idé til visuelt udtryk Benett

Disse har alle sammen hjulpet til at skabe min hjemmeside. Ved at give inspiration og få ideerne ned på papir, før de blev vist til omverdenen.

Grafisk design. Webdesign til barbershop

Typografi og ombrydning 1. hovedforløb Julia Igaard Abrahamsen

Y s MEN International. Designguide. Region Danmark. Side 0

Portfolioudvikling. Line la Fontaine. Multimediedesigner

REDESIGN AF PORTFOLIO 16. jan. 2015

Projekt 1 Re-design af Odense Bunkermuseum

Vejledning til Sang- og liturgiark

Kom/IT rapport Grafisk design Anders H og Mikael

Book Creator. Du skal bruge App en Book Creator for at følge denne vejledning. Scan koden og se en videovejledning

JB Plastic A/S. 3.Projekt - Rapport. MUL B - Gruppe E1 & E2

GRAFISK DESIGN GRAFISK PRODUKTION & WORKFLOW

TalkingWeb til ipad / Android

kollegiekokkenet.tmpdesign.dk Side 1

HHBR. Design. Kvalitets vurdering. Opgaven. Målgruppe og Budskab. De Grafiske valg

Indholdsfortegnelse. Forord 2. Logo 3. Respektafstand 5. Farver 6. Typografi 7. Eksempler 9

GRAFISK DESIGN. Hjemmeside

Rapport Grafisk design Af Benjamin, Steffen, Jacob A og Nicklas

Naja Schlüter Roskilde Tekniske Gymnasium 26/ Interessentanalyse

Poster design. Meningen med en poster

6. November 2014 JB Plastics Projekt Gruppe D MULA Rie, Rasmus Seindal, Benjamin Vinje,Andreas, Anders, Jonatan Vanja og Pia JB PLASTICS

Portfolio - sunestenild.dk

Y s MEN INTERNATIONAL. Region Danmark. Y s MEN International. Region Danmark. Designguide. Side 0

PORTFOLIO TIL HOVEDFORLØB 1

For at finde en stil til hjemmesiden, starter jeg med at lave et moodboard af alle Mikkalina Glas s produkter.

Produkt. Index side GRAFISK DESIGN

Designguide til Region Hovedstadens Web- & online-tv

Sådan indlægges nyheder på DSqF s hjemmeside trin for trin

workflow Programmer: Om opgaven: Kvalitetsvurdering: Afsender: Modtager: Cathrine Laulund Web: Dreamweaver Billedbehandling: Photoshop

Sider, indlæg og projekter

Designmanual til FOA.dk. Seneste redigeret: 21. juli 2006/pilo

Grafisk Design En rapport af Jonas, Lenni, Andreas og Sebastian 1.2

Portfolio Grafisk Design Grafisk Design

Gruppe 9: Jan-Nilas Gerth, Jonas Thomsen, Collyre Niyokuri, Michelle Thomsen

Avisforside. Vi har skrevet en avis om studier ved Aarhus Universitet

Designmanual BUTLER FM

Vejledning i Powerpoint

PROJEKTET LAYOUT IDEUDVIKLING - PROCESS FRA IDÉ TIL PRODUKT

Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS

Designguide til Region Hovedstadens Web-TV

WOODKID. The Golden Age. Banner Projekt - 1 Semester, CPH Business, MUL-A13E. Casper Birch Buchberg, Natahlie Heiden & Sebastian Nyholm

1. Større opgaver i word

Microsoft Word fremgangsmåde til Snemand Frost 1 / 6

det færdige resultat

Grafisk design. Opgavebeskrivelse. Stil og æstetik. Typografi: Briefing. styrker: svagheder: Målgruppe/segmentering. MuligheD: trusler:

Grafisk produktion & workflow

Portfolio - Grafisk Workflow

En liste, hvor der kun kan angives et svar. En dropdown menu, hvori kun et svar kan vælges

Grafik & Billede weloveorganic.com webshop

Transkript:

Designmanual

Tekst logo: Gruppens logo er RER (står for Red Eyed Rabbit). Det er enkelt og stilrent, men samtidig lidt rustikt, hvilket kendetegner gruppen godt, med den mørkere lidt alternative stil. at logoet er sort/hvid gør det let at bruge mod mørke eller lyse baggrunde og kan printes ud i sort/hvis uden problemer. RER: Farverne er sort hvid, da dette passer bedst til den lidt mere mørke stil. Tekstlogoet er simpelt og kan fungere på flere farver. Logoet kan let skaleres ned og vil stadig være let genkendeligt, samt det vil stadig være let at se, hvad det forestiller. At det let kan skaleres er vigtigt, da logoet så let vil kunne bruges på mindre merchandise så som kuglepenne.

Billed logo: Vores gruppe har også et billede-logo. Dette vil nok blive vores mest brugte logo, i hvert fald på web og større merchandise. Logoet er en kanin med blodige øjne. Logoet passer til vores lidt mørkere alternative stil, men udstråler samtidig noget lidt sødt, idet at det er en kanin med et lyserødt hjerte i panden. Dette repræsenterer os godt, da alle gruppens medlemmer er piger, og selvom vi godt kan lide det lidt dystre, er det ikke det eneste vi går op i. Logoet er samtidig kreativt og cartoony, hvilket illustrerer, at vi især arbejder med film og animation og generelt kreative emner. Logoet er samtidig originalt og let genkendeligt.

# 69524C C= 44 % R= 105 M= 54 % G= 82 Y= 51 % B= 76 K= 46 % # 695C55 C= 49 % R = 105 M= 49 % G= 92 Y= 51 % B=85 K= 41 % # AFA99F C= 33 % R = 175 M= 28 % Hvis logo G= 169 Y= 34 % B=159 K= 8 % # 440F0F C= 46 % R =68 M= 93 % G= 15 Y= 74 % B=15 K= 73 %

- Skal på lys baggrund bør denne udgave bruges (logoet på mørk baggrund fungerer dog bedre og benyttes derfor også oftest af gruppen): - Logoet kan formindskes, og man kan stadig se, at det er en kanin: Den eneste ulempe er dog at billedlogoet er lidt mere detaljeret og derfor fungerer bedre i lidt større udgave, så det frarådes at billedlogoet bruges på mindre merchandise som kuglepenne.

logo lavet sort/hvid: - logo i sorthvid: Logo speciallavet sort/hvid: Hvis et sort/hvid print af logoet skal laves, kan man selv vælge, hvilken sort/hvis udgave man synes bedst om. - Kun kanin-logo: Kanin-logo mod sort baggrund og mod hvid baggrund (fungerer generelt også bedst mod mørk baggrund):

Brevpapir: Brevpapiret uden tekst:

Brevpapiret med tekst på: Skrifttype/font til brødtekst: Times New Roman. Skrifttype/font til navn: Stencil STD Skrifttypen/font, der bruges til brødtekst og informationer i informationspanelet (til højre på arket), er Times New Roman, da den er let læselig. Red Eyed Rabbit er skrevet med skrifttypen/fonten Stencil STD, både i overskriften, men også ved afsender, da dette er skriften, der generelt bruges til navnet (Red Eyed Rabbit).

Detaljeret illustration af logo: Kan bruges bl.a. på hjemmeside/nettet og større merchandise.

Hjemmeside: Vores hjemmeside har vi valgt at bygge op på simpel vis med en banner med vores navn og logo, en menulinje, der vil være gennemgående på alle sider, så man let kan klikke frem og tilbage, en linje ved foden med vores kontaktoplysninger, og på selve forsiden vil der være en kort præsentation af vores bureau, som skal fungere som Call of Action, og få folk til at klikke videre på vores hjemmeside. På banneret vi vores navn og logo som sagt stå. Logoet vil være placeret i højre side efter navnet, som vil strække sig over det meste af banneret. Dette er med til at skabe ballance/ligevægt, så den ene side ikke kommer til at virke tungere og derved genere øjet. Teksten vil være hvid mod sort, hvilket har været gennemgående i begge vores logoer og derfor er de farver, der kendetegner os bedst. Dog er teksten på menulinjen rød, så den skiller sig lidt ud og danner blikfang, samt giver lidt farve, så siden ikke synes for kedelig. Den hvide og røde tekst passer derved også sammen med logoet. At hvid og sort er kontrastfarver, gør også, at vores navn syner stærkere, og derved fanger seerens bliks som noget at det første. De tre farver sort, hvid og rød er de farver som kendertegner gruppes stil og som ses i logoet. Vores hjemmeside skal dog åbnes i Chrome, da vi har designet den i Chrome og har ikke testet den på andre browsere og ved derfor ikke, hvordan dette vil se ud.

Skrifttyper på hjemmesiden: Skrifttype/font til navn og overskrifter: Stencil STD skrifttype/font til brødtekst: Verdana. På hjemmesiden/web vil Red Eyed Rabbit (og overskrifter) også være skrevet med skrifttypen/fonten Stencil STD, da denne font generelt lidt kendetegner navnet (Red Eyed Rabbit). Til brødtekst vil Skrifttypen/fonten være Verdana, da denne er let læselig og fungerer godt til web. Farver, design og opstilling af hjemmeside: På ovenstående billede ses hjemmesiden være delt op i nedenstående kasser, som er brugt i kodningen/opstillingen.

baggrundsfarve: container #020202 vidde: 988px Center alignment header navigation banner: 988*148 linje farve: #440f0f style: solid tykkelse: 2px link margin: 17px font family: stencil std, stencil, verdana font størrelse: 25px

link besøgte link over link aktiv link farve: #b22222 baggrundsfarve: #020202 dekoration: ingen farve: #b22222 baggrundsfarve: #020202 dekoration: ingen farve: #b22222 baggrundsfarve: #333333 dekoration: underline farve: #b22222 baggrundsfarve: #333333 dekoration: underline main content vidde: 850px margin: 0 px overskrift paragraf font family: stencil std, stencil, verdana farve: hvid font størrelse: 30px font family: stencil std, stencil, verdana farve: hvid font størrelse: 16 px footer text linje font family: stencil std, stencil, verdana text farve: hvid font størrelse: 20px farve: #440f0f

style: solid tykkelse: 2px Alle sidder er opstillet på samme måde, med samme farver, og man navigerer ved hjælp af menulinjen.

App Vores app bruger samme farver som vores hjemmeside sort, hvid og rød, så det passer til den mørke lidt rå stil, men samtidigt harmonere. Det får den også til at syne mere enkel og overskuelig, hvilket vi synes er vigtigt for vores app. Den skal være let at finde rundt på.. Selvom stencil flere steder er blevet brugt som skriften på vores navn og overskrifter, vil skriften på appen være Verdana, da den er let læselig. Både overskrifterne, vores navn og brødtekst vil stå med denne skrifttype, da Stencil STD ikke fungerer særlig godt i så lille format. Det vil se for kringlet ud og vil genere læserens øjne i længden. Når man trykker på en af menu knapperne på siden, vil man slide over til den ønskede side. Farver og opstilling: Baggrundsfarve: container #020202 vidde: 988px Center alignment

header tekst navigation linje farve: #440f0f style: solid tykkelse: 2px link margin: 17px font family: stencil std, stencil, verdana font størrelse: 25px link besøgte link over link aktiv link farve: #b22222 baggrundsfarve: #020202 dekoration: ingen farve: #b22222 baggrundsfarve: #020202 dekoration: ingen farve: #b22222 baggrundsfarve: #333333 dekoration: ingen farve: #b22222 baggrundsfarve: #333333 dekoration: ingen main content vidde: 850px margin: 0 px overskrift font family: verdana farve: hvid

paragraf font family: verdana farve: hvid linje farve: #440f0f style: solid tykkelse: 2px

Design af film og figurer: Tanken bag filmen: I vores film har vi valgt at gengive H.C. Andersens eventyr den lille pige med svovlstikkerne, men i en mere moderne version. Den vil komme til at foregå i nyere tid, og den lille pige vil i denne fortælling være afbildet som en teenage pige, som i stedet for at tænde svovlstikker, tager piller, som giver hende følelsen af midlertidig glæde. Dette foårsager hendes hallucinationer, som man også hører om i den oprindelige fortælling. Hun vil ligesom i historien også dø i slutningen af filmen, men her skyldes det selvfølgelig pillerne. Stilen på vores film er mørk og kølig og relativt mørk, dog vil scenerne med hendes hallucinationer være lysere og varmere, da disse er dejlige med hygge og varme, og derved giver vores hovedperson glæde. På samme måde vil scenen, hvor hun dør og ser bedstemoren være med varmere farver, så det symbolisere, at hendes død ikke er noget dårligt, men derimod bringer hende til lykke og genforening med et kært familiemedlem. Annabelle: Annabelle er bare et navn vi har valgt til vores hovedperson (som er skabt ud fra den lille pige med svovlstikkerne.) Vi har gjort hende til en teenage pige, da dette fungere bedre i en mere moderne sammenhæng, hvor hun jo også tager piller. Hendes design er ligesom resten af filmen mørk, da dette var stilen vi gik efter. Hendes ansigt er formet både i Iclone og Maya, og er hverken photorealistisk eller cartoony, men har mere et klassisk tegnefilms-look med afsæt i det realistiske ansigt (tegnefilmstrækkene ses bl.a. i de store øjne og det store hoved mod den spinkle krop). Hendes øjne er gjort store, for at gøre hendes design lidt sødt, samt for bedre at kunne vise og udtrykke hendes følelser igennem filmen. Annabelle har fået kort rødt hår, da rød er farven brugt i vores navn (Red Eyed Rabbit) og ses både i vores logo og på vores hjemmeside og app. Hendes tøj er blevet sort, for at fastholde den mørke stil, og igen er farven en af de farver, som kendetegner vores gruppe bedst. Hun er lav og spinkel med tøj er slidt, med hullede netstrømper, hvilket afspejler hendes lidt afsporede og triste livstil uden et hjem. Nedenfor ses nogle billeder af Annabelle:

Bedstemoren: Bedstemoren er iført vidt, som kontrast mod det mørke og triste for at symbolisere godhed og glæde, samt det, at hun er død, giver hende en næsten engle-lignende rolle. Vi har så vidt det varmuligt forsøgt at give hende rynker samt leverpletter og fregner for at få hende til at syne gammel (der var ikke nogen gammel person i Iclone, som kunne bruges). Hendes hår er sat op i en hestehale som bedstemødre tit har det. Håret er hvidt og ikke gråt, for at fremhæve hendes symbolik yderligere. Bedstemorens øjne er ligesom Annabelles store, og giver dem derved en mere familiær lighed. Nedenfor ses bedstemoren:

Byen: Byen følger stile på filmen og er gennemgående mørk og trist. Huse og lygtepæle er både mørke af farve og er asyametriske, hvilket bidrager til den lidt dystre stil. Disse er ikke realistiske, ej heller moderne i nutidig forstand, men er lidt dystre, og vinduerne er lavet, så de ligner triste øjne, for skal biddrage til den nedtrykkende stemning i film. Nedenfor ses nogle af husene:

Der er samtidig masser af tåge, som får miljøet til at virke mere trist og koldt. Det eneste lys der rigtigt er, er de små lys fra lygtepælene. Dette ses nedenfor, dog er tågen endnu ikke så kraftig på billede 1. De fleste scener vil være relativt mørke, dog vil scenerne med hendes hallucinationer være lysere og varmere bl.a. vha. farveredigering., da disse er dejlige med hygge og varme, og derved giver vores hovedperson glæde. Nedenfor ses en af opsætningerne til disse behagelige syn.

Motiondesignmanual Title screen Vores title screen er vores navn placeret centralt. Den er designet i rød, hvid og sort, da det er de farver der går igen i vores design. Bumbers Vores bumbers er et billede med vores navn/logo, tildelt lidt 3D-effekt og animeret lys. 3D-effekten ligger i vores baggrund og navn/logo, som får et rugt metallisk ydre, hvilket passer godt til den lidt rå stil, som vi kører. Vi har endvidere animeret et rødt lys til at køre over skærmen og oplyse vores navn undervejs. Den røde farve er den samme farve som vores billed-logos røde øjne (#B22222), og passer derved både til vores logo og vores navn. Bumbers ne er generelt mødrke, lidt dystre, hvilket igen passer godt til stilen vi kører. Bumber 1+2 (screenshots):

Rød farve brugt til lys: (#B22222) Lower third: Vores lower third-bjælke er sort med logo, så den passer til vores bureau. Den er placeret så den øverste kant af den sorte bjælke er præcis en tredjedel fra bunden. Vores bjælke er en asymmetrisk firkant med en trekanten spis, som slutter præcis en fjerdedel fra den venstre kant, og punktet, hvor firkanten begynder at trække ud i en spids, ligger præcis på den horisontale midte. Den hvide tekst mode den sorte bjælke gør teksten let læselig. Nedenfor ses vores eksempel på lower third: