Kræn Byskov Videndjurs Webintegrator Designmanual for webintegrator grundforløbs eksamen 7 marts 2014 Side 1-14 Indholdsfortegnelse Indledning3 Målgruppe 4 Timeline5 Logo6 Font7 Farver8 Flowchart9 Storyboard side 1-2 10 Storyboard side 2-2 11 Menu12 Mockup13 Plugin14 Indholdsfortegnelse 7 marts 2014 Side 2-14 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 7 marts 2014 Side 3-14 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 7 marts 2014 Side 4-14 Design af Design Manual hjemmeside og logo kodning af hjemTestning af meside Samle information Design i praksis og inspiation og code Uge 1 kodning af hjemmeside aﬂevering af det færdig produkt Fejlretninger og ﬁnpudsning 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 7 marts 2014 Side 5-14 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 7 marts 2014 Side 6-14 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 7 marts 2014 Side 7-14 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 7 marts 2014 Side 8-14 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 7 marts 2014 Side 9-14 responsive/Max width 960px $ Storyboard side 1-2 7 marts 2014 Side 10-14 responsive/Max width 960px Storyboard side 2-2 7 marts 2014 Side 11-14 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 7 marts 2014 Side 12-14 Mockup 7 marts 2014 Side 13-14 Smooth-scroll http://cferdinandi.github.io/smooth-scroll/ jQuery Lightbox Evolution http://codecanyon.net/item/jquery-lightbox-evolution/115655 JQUERY.VIDEOBG http://syddev.com/jquery.videoBG/ Plugin 7 marts 2014 Side 14-14