Grafisk produktionsforståelse

Transkript

1 Grafisk produktionsforståelse Lavet for Windar Photonics A/S Produkt Design af responsivt website Programmer Dreamweaver Photoshop Illustrator Opgavebeskrivelse Med tiden har jeg fået Windar Photonics grafiske stil i en anden retning, end da jeg startede i virksomheden for 2 år siden. Ønsket er derfor, at få et website der passer til resten af vores materialer. Desuden er brugen af mobiltelefoner og tablets kun vokset, og derfor er det vigtigt at sitet er responsivt. Målgruppe Energiselskaber og vindmølleproducenter Ønsker for et nyt website Dynamisk, evt. slider Forside: Elevator pitch. Clean forside uden produktfokus News skal opdeles i en news og where to find us Fjerne resultater men bruge masser af referencer Site-map i bunden af siden Designet og opbygningen på siden er fremtidssikret ift. at tilføje yderligere indhold Undgå lange drop-down menuer Grafisk og indholdsmæssig synergi med Book of LiDAR Link til nuværende website 44 Grafisk produktionsforståelse

2 Proces Briefing Inspirationssøgning Skitser Layout i Photoshop & Illustrator Præsentation af designforslag Feedback Rettelser Kodning af udkast Godkendelse af design Tilbud fra Web2IT Godkendelse fra ledelsen Grafisk produktionsforståelse 45

3 Inspiration og skitser Inspiration. Designforslag 1. dk.pinterest.com/pin/ / Skitse. Designforslag 1. Skitse. Designforslag 2, 1. forsøg.. 46 Grafisk produktionsforståelse

4 Inspiration. Designforslag 2. Skitse. Designforslag 2, 2. forsøg. Skitse. Designforslag 2, underside. Grafisk produktionsforståelse 47

5 Brugerflade Design til PC. Opsætning i Photoshop. Drop-down-menu. De hvide menupunkter er primærmenuen. Det er disse som linker til websitets undersider, og den skal kunne udvides med en hover-effekt. Sekundærmenuen skal overvejende bruges som downloadlinks til eksempelvis magasiner, manualer og certificater. 48 Grafisk produktionsforståelse

6 For at skabe den røde tråd, er farvevalget vigtigt, og derfor har jeg valgt farver, som matcher de andre grafiske materialer. # #F1934D Ikonerne laves i Illustrator, og gemmes som SVG-filer. Denne type fil bevarer sine vector-egenskaber, og kan bruges direkte i koden. Godt til et responsivt format. Undersiden skal i pc-format have, hvis sitet er tilstrækkelig langt, en form for afsnitsindeling. Skal linke til overskrifterne på siden. Billeder: 72 ppi, RGB Grafisk produktionsforståelse 49

7 Design til mobiltelefon. Designet af drop-down-menuen til mobilplatform, er en udfordring i forhold til PC-hovereffekten. Dette kan løses ved, at lægge et downloadmenupunkt ind i primærmenuen. En anden mulighed er, at sekundærmenuen dukker op ved førsteklik, og undersiden dukker op ved dobbeltklik. 50 Grafisk produktionsforståelse

8 Font-family Arial som 1. prioritet. Arial kom frem i 1982, og er en af de mest anvendte de sidste 30 år. Dermed er Arial gennemtestet på samtlige platforme, og er et sikkert valg. Den fungerer godt til skærmbrug, og er en letlæselig font både i lille og stort format. Kompatibilitet Win: 99.84% Mac: 98.74% * * basic.css body{ margin: 0; padding: 0; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 13px; line-height: 18px; position: relative; background-color: #304364; padding-top: 39px;.content h1{ position: absolute; font-weight: bold; font-size: 15px; color: #304364;/*dark blue*/ left: 58px; top: 7px; text-transform: uppercase; h2{ font-size: 19px; margin: 20px 0 0 0; color: #F1934D; h3{ margin: 25px 0 0 0; color: #F1934D; line-height: 5px;.title h1 { color: #F1934D; /*orange*/ float: left; width: 135px; margin-top: 32px; margin-left: 58px; text-transform: uppercase; font-size: 19px;.h2-top{ margin:0; Grafisk produktionsforståelse 51

9 Skelet 52 Grafisk produktionsforståelse

10 Websitet er delt op i henholdsvis 1, 2 og 3 kolonner, og mit udkast er struktureret ved hjælp af flexbox. Hierarki 1: id = menu 2: class = left-menu 3: class = right-menu 4: class = menu-nav 5: class = width-menu 6: class = menu-element 7: id = header 8: class = single-item (slider: kenwheeler.github.io/slick) 9: class = white 10: class = content 11: class = main-column 12: class = side-bar 13: class = bottom 14: id = width 15: id = footer 16: class = footer-1 17: class = footer-2 18: class = footer-3 (min-width:700px){.content{ display: flex;.main-column{ flex-basis: 620px; margin-top: 25px;.side-bar{ flex-basis: 203px; margin-top: 25px; Jeg har gjort brug af en smule javascript for at få et par funktioner til at fungere. <head> <link rel= stylesheet type= text/css href= basic.css > <link rel= stylesheet type= text/css href= slick/slick.css /> <link rel= stylesheet type= text/css href= slick/slick-theme.css /> </head> <body> <script type= text/javascript src= min.js ></script> <script type= text/javascript src= js/ scripts.js ></script> <script type= text/javascript src= slick/ slick.js ></script> <script type= text/javascript > $(document).ready(function(){ $(.single-item ).slick(); ); </script> </body> Grafisk produktionsforståelse 53

11 NEWS < MENU ENGLISH / 中文 / INVESTORS < COST EFFICIENT LiDAR PRODUCTS / READ MORE WP WINDAR PHOTONICS Lorem ipsum dolor sit amet, urna ac sagittis ligula convallis, aliquam ac fusce vel libero in urna, fringilla nam id tincidunt wisi bibendum, facilisis sociosqu quisque et pede elit. Voluptatibus ante sed, sapien eros, accumsan erat, tempus nonummy. Urna vitae. Pede pulvinar fusce commodo nunc enim proin, enim iaculis, ullamcorper ipsum. Nisl imperdiet. Nunc arcu at sed id aenean interdum. Libero libero voluptatibus molestie in at, maecenas nibh dapibus massa mauris, euismod enim amet, quia parturient et suspendisse neque amet felis, integer in ac dolore. Curabitur rutrum, neque nec at placerat. Massa non sapien volutpat, morbi rhoncus integer ipsum, donec culpa, hendrerit debitis venenatis at molestie curae, turpis lobortis eleifend sit. Lacus cras porttitor turpis lectus arcu, rhoncus accumsan non nulla mauris iaculis. 12:31-10 May 2016 WINDAR PHOTONICS AT WIND CONNECT O&M FORUM, APRIL, 2016 Windar Photonics will be present at Wind Connect O&M Forum, April, 2016 READ MORE» 12:31-10 May 2016 WINDAR PHOTONICS AT WIND CONNECT O&M FORUM, APRIL, 2016 Windar Photonics will be present at Wind Connect O&M Forum, April, 2016 READ MORE» 12:31-10 May 2016 WINDAR PHOTONICS AT WIND CONNECT O&M FORUM, APRIL, 2016 Windar Photonics will be present at Wind Connect O&M Forum, April, 2016 READ MORE» Windar Photonics A/S Helgeshøj Alle DK-2630 Taastrup Denmark Copyright 2016 Windar Photonics A/S All rights reserved FOLLOW US ON LINKEDIN SUBSCRIBE TO OUR NEWSLETTER CVR.nr AIDA-modellen Attention Slider med referencebilleder på forsiden. Interest Overskriften Cost-efficient LiDAR. Hovedbudskabet står klart og tydeligt. Skal fange potentielle kunders interesse. Desire Kort og præcis salgs-pitch. Action Kontaktoplysningerne er både som menupunkt og som tekst i footeren. 54 Grafisk produktionsforståelse

12 < Resultat MENU ENGLISH 中文 INVESTORS Websitet har fået et enkelt og professionelt udseende uden at blive kedelig. Det er et fleksibelt design, så der er mulighed for tilføje og fjerne indhold på siderne alt efter behov. Jeg har formået at imødekomme, de fleste ønsker, og har skabt rød tråd, så websitet matcher de andre materialer. < COST EFFICIENT LiDAR PRODUCTS / READ MORE Jeg har kodet et funktionelt udkast, som giver et godt indtryk af sidens opbygning. Når websitet skal sætte i produktion, skal et webbureau ind og over, som kan tilføje CMS-system, yderligere funktioner og sikkerhed til websitet. MENU ENGLISH / 中文 / INVESTORS TECHNOLOGY Libero libero voluptatibus Lorem ipsum dolor sit amet, urna ac sagittis ligula convallis, aliquam ac fusce vel libero in urna, fringilla nam id tincidunt wisi bibendum, facilisis sociosqu quisque et pede elit. Voluptatibus ante sed, sapien eros, accumsan erat, tempus nonummy. Urna vitae. Pede pulvinar fusce commodo nunc enim proin, enim iaculis, ullamcorper ipsum. Nisl imperdiet. Nunc arcu at sed id aenean interdum. Libero libero voluptatibus molestie in at, maecenas nibh dapibus massa mauris, euismod enim amet, quia parturient et suspendisse neque amet felis, integer in ac dolore. Curabitur rutrum, neque nec at placerat. Massa non sapien volutpat, morbi rhoncus integer ipsum, donec culpa, hendrerit debitis venenatis at molestie curae, turpis lobortis eleifend sit. Lacus cras porttitor turpis lectus arcu, rhoncus accumsan non nulla mauris iaculis. Libero libero voluptatibus Lorem ipsum dolor sit amet, urna ac sagittis ligula convallis, aliquam ac fusce vel libero in urna, fringilla nam id tincidunt wisi bibendum, facilisis sociosqu quisque et pede elit. Voluptatibus ante sed, sapien eros, accumsan erat, tempus nonummy. Urna vitae. Pede pulvinar fusce commodo nunc enim proin, enim iaculis, ullamcorper ipsum. Nisl imperdiet. Nunc arcu at sed id aenean interdum. CONTENT Libero libero voluptatibus Maecenas nibh dapibus Accumsan erat Lorem ipsum dolor sit amet Euismod enim amet, Pede pulvinar fusce Libero libero voluptatibus molestie in at, maecenas nibh dapibus massa mauris, euismod enim amet, quia parturient et suspendisse neque amet felis, integer in ac dolore. Curabitur rutrum, neque nec at placerat. Massa non sapien volutpat, morbi rhoncus integer ipsum, donec culpa, hendrerit debitis venenatis at molestie curae, turpis lobortis eleifend sit. Lacus cras porttitor turpis lectus arcu, rhoncus accumsan non nulla mauris iaculis. Windar Photonics A/S Helgeshøj Alle DK-2630 Taastrup Denmark Copyright 2016 Windar Photonics A/S All rights reserved FOLLOW US ON LINKEDIN SUBSCRIBE TO OUR NEWSLETTER CVR.nr Grafisk produktionsforståelse 55