Designmanual for webintegrator grundforløbs eksamen

Transkript

1 Kræn Byskov Videndjurs Webintegrator Designmanual for webintegrator grundforløbs eksamen Side 1-14

2 Indholdsfortegnelse Indledning 3 Målgruppe 4 Timeline 5 Logo 6 Font 7 Farver 8 Flowchart 9 Storyboard side Storyboard side Menu 12 Mockup 13 Plugin 14 Indholdsfortegnelse Side 2-14

3 Jeg har valgt at lave min hjemmeside til Tritone some en one page da det vil gøre den mere overskuelig når den bliver åbnet på en mobil enhed. Selve navigationen er lavet som en menu bar der sider i midden af siden hvor når du begynder at scroll ned gennem siden vil den hoppe op i toppen og side fast. Du ikke skal til toppen hvergang du skal vælge et nyt menu punkt. Siden vil automatisk scroll ned gennem siden til det valgte menu punk når du trykker på linkende, da jeg mener det vil give et nemt og overskuelig overblik over hjemmesiden. Forsiden starten af siden består af en stor image/video slider gallery der vil vise det nyeste information eller nyheder for Tritone. Indledning Side 3-14

4 Min malgruppe er 3D brancen, både inden for reklame/film og Architect men os spille brancen derfor har jeg valgt at lave det som en one page/oplevelse s side da det giver en mere overskulig hjemmeside til hurtig at finde den information du søger både på din pc eller mobil/table. Målgruppe Side 4-14

5 Samle information og inspiation Design af hjemmeside og logo Testning af Design i praksis og code Design Manual kodning af hjemmeside kodning af hjemmeside Fejlretninger og finpudsning aflevering af det færdig produkt Uge 1 Uge 2 Den grønne bolde symbolisere dage der er sat af til de forskellige opgaver de overlapper hinden for at give plads til at have lidt mere frit spil og ikke følge tidsplanen 100% men alt i alt er der sat en dag af til hver opgave af processen ud over kodning af hjemmeside som jeg har valgt at bruge 4 dage på. Timeline Side 5-14

6 Mit Første valg af logo var en firben da det er det første der kom frem når man søgte på Tritone på nette. men efter at have prøvet det i praksis fandt jeg ud af dette ikke var en holdbar en ting er at en firben ikke har noget med 3D animation at gøre og selve navnet hvis du deler Tritone op vil man komme frem til tri som i de 3 person og tone som farve. Derfor valgte jeg at lave den ikoniske firkant med 3 synlige sider til at symbolere tri og det at give dem 3 forskelligge farve nuancer af grøn. Selve den grøne farve kommer fra greenscreen da når man tænker 3D tænker man ofte grøn på grund af den grønne farve på et greenscreen. #39FF14 #2BBF0F #1C7F0A Logo Side 6-14

7 Raleway er en elegant sans-serif skrifttype familie. Oprindeligt designet af Matt McInerney som en enkelt tynd vægt, blev det udvidet til en 9 vægt familie af Pablo Impallari og Rodrigo Fuenzalida i 2012 og ikerned af Igino Marini. (text taget fra Google.com/fonts) Light 300 Ved Tritone. er kreativitet det vigtigste. Normal 400 Ved Tritone. er kreativitet det vigtigste. Medium 500 Ved Tritone. er kreativitet det vigtigste. h1 font size 40px line height 50px color #FFF h2 font size 35px line height 40px h3 font size 28px line height 34px h4 font size 21px line height 30px Font Side 7-14

8 Grundlaget for at bruge den grønne farve var som sagt at når jeg tænker 3D Animation tænker jeg automatisk greenscreen Jeg valgte den neon grønne da jeg syntes den har noget spark i sig og der er noget leg i den der var intrasandt. Efter at have valgt farven har jeg kørt min farve igennem Adobe Kular og fundet 5 grundfarver til brug på hjemmesiden Farver Side 8-14

9 Da denne hjemmeside vil fungere som en one page er flowchart meget lige ned og simpel, da det er en scroll hjemmeside Index.html Forside Om Tritone Nyheder Ydelser Kontakt Architect artist Character artist Environment artist Flowchart Side 9-14

10 responsive/max width 960px $ Storyboard side 1-2 Side 10-14

11 responsive/max width 960px Storyboard side 2-2 Side 11-14

12 Min menu har jeg valgt at lave som en navigations bar der har en position realativ fra starten men når den når toppen af skærmen skifter den fra realativ til fixed. det gør at den forbliver i toppen af skærmen og derfor giver en hurtigere og mere overskuelig måde at navigere rundt på siden. Menu Side 12-14

13 Mockup Side 13-14

14 Smooth-scroll jquery Lightbox Evolution JQUERY.VIDEOBG Plugin Side 14-14