FORSTÅELSE FOR GRAFISK PRODUKTION

Transkript

1 FORSTÅELSE FOR GRAFISK PRODUKTION OPGAVEBESKRIVELSE Til DI s Digitaliseringsindsats, har jeg udarbejdet en håndbog, med gode råd og cases fra andre virksomheder, om hvordan de har implementeret digitalisering i deres hverdag. Digitaliseringsindsatsen havde et ønske om at gøre håndbogen digital, så den kunne ligge nemt tilgængelig for alle. Derudover ville de gerne kunne have links til andre relevante hjemmesider på sitet, samt lægge videoer op. Sitet skulle ligge udenfor di.dk, som sit eget site i Digitaliseringsindsatsens design. DI s Digitaliseringsindsats er en enhed i Dansk Industri, som kæmper for at gøre virksomheder i Danmark mere digitale, samt styrke den politiske interessevaretagelse i forhold til digitaliseringsområdet. SPECIFIKATIONER Hjemmeside for DI s Digitaliseringsindsats HTML5, Bootstrap, CSS3, jquery Multi-page Responsivt design SEO optimering Google font Font awesome Billedeoptimering Test af browserkompatibilitet: Internet Explorer, Safari og Google Chrome Site Improve PROGRAMMER Dreamweaver CC, Photoshop CC og Illustrator CC

2 KRAV Kort efter at digitaliseringshåndbogen var sendt til tryk, havde jeg et nyt briefingmøde med mine kollegaer fra Digitaliseringsindsatsen omkring den hjemmeside, der skulle bygges op omkring håndbogen. Ud over at de gerne ville have plads til video og links, havde de nedenstående krav til sitet: Som leder behøver du ikke forstå teknikken bag digitaliseringen. Du skal forstå, hvad digitalisering gør for din forretningsmodel. Poul Konrad Beck Adm. direktør, Dansand A/S GODE RÅD: BRUG BESTYRELSEN OG HENT INPUT UDEFRA ANERKEND EGNE BEGRÆNSNINGER Ledelsen kan godt igangsætte en digital udvikling uden selv at have ekspertise inden for området. Hent hjælp udefra, dér hvor virksomheden mangler kompetencer, ved at indgå partnerskaber med mentorer, virksomheder og universiteter. BRUG DIN BESTYRELSES DIGITALE KOMPETENCER Brug din bestyrelse til at løfte dig op over hverdagsudfordringerne. Lad din bestyrelse udfordre dig og få øje på nye digitale muligheder og sørg for at få digitale kompetencer ind i din bestyrelse. Komplementer evt. bestyrelsens kompetencer med eksterne samarbejdspartnere. TÆNK STORT, START SMÅT Vent ikke på at få ideen til den næste Airbnb, Skype eller Facebook. Fokuser på din egen forretning og de økonomiske grundvilkår og markedet. Start med at investere i små digitale initiativer med udgangspunkt i din virksomheds behov. Jo før du laver din investering, desto større markedsfordel får du ud af det. FOR DANSAND A/S VAR VEJEN TIL SUCCES PARTNERSKABER DI s DIGITALISERINGSINDSATS Dansand A/S producerer sand i forskellige sorteringer og specialprodukter til både professionelle og gør-det-selv-markederne. DIGITALISER DIN VIRKSOMHED NU Partnerskab og samarbejde med eksterne parter er blevet en del af Dansand A/S dna. Det har de gjort i erkendelsen af, at de kun kan skabe vækst ved at anerkende egne begrænsninger og hente kompetencer ind udefra. Tilbage i år 2000 lagde Dansand A/S en ambitiøs strategi for at skabe vækst gennem digitalisering og automatisering. Som led i udviklingen frasolgte de halvdelen af virksomheden og indgik en alliance med en større belgisk søstervirksomhed, der kunne give dem større teknisk know-how til at udvikle den - Få inspiration til de næste skridt her løbende været med til at udvikle virksomheden, både i forhold til produktudvikling og udvikling af virksomheden som organisation Brugervenligt Simpel navigation Fleksibilitet på indholdssiderne Lyst og luftigt Moderne design Responsivt PROCESSEN Kundebrief Inspirationssøgning Skitsering Udarbejdelse af flowchart samt wireframes Mockup af sitet i Photoshop Godkendelse af mockup samt flowchart Kodning af hjemmeside Weboptimering af billeder SEO optimering Test af browserkompatibilitet Implementering af Site Improve Upload sitet Opfølgningsmøde Justeringer Vedligeholdelse MÅLGRUPPE Målgruppen er DI s medlemmer som har et ønske om, at implementere eller forøge digitalisering i deres virsomhed. Det er primært mandelige virksomhedsledere imellem år. MATERIALE Da jeg havde sat håndbogen op én gang, havde jeg allerede alt materiale bestående af både tekst og billeder. Det eneste jeg manglede var links til de eksterne hjemmesider, samt de videoer, der var blevet produceret om digitalisering.

3 INSPIRATION TIL RESPONSIVT DESIGN I idéfasen har jeg fundet inspiration på forskellige responsive hjemmesider. Det er en meget vigtigt detalje for mit design, at websitet kan fungere på forskellige platforme. LOGO En anden ting jeg også har kigget efter, var opbygningen af en enkelt og stilren menu samt footer.

4 FORSTÅELSE FORSTÅELSE GRAFISK FOR GRAFISK PRODUKTION PRODUKTION 43 SKITSER Inden jeg gik i gang med at udarbejde mine wireframes, lavede jeg skitser til forsiden og undersiderne. Jeg prøvede også allerede her, at definere mine tags, så jeg kunne få et overblik over mine niveauer. FORSIDE UNDERSIDER NAVIGATION Da kunden ønskede en så nem og simpel menu som overhovedet muligt, består sitet kun af én primær menu, der indeholder alle undersiderne. Sitet skulle bygges op så man kan tilgå alle undersider uanset hvor man er. Dette valg betyder imidlertid også, at kunden måtte have så få sider som muligt, for at beholde letheden. FLOWCHART LEDELSE OG BESTYRELSE INDEX LEDELSE OG MEDARBEJDERE IT-SIKKERHED KOMPETENCER AUTOMATISERING IT-SYSTEMER SALG OG MARKETING ALTERNATIV FINANSIERING EKSPORT IOT FORRETNINGSMODELLEN IOT ORGANISATIONEN IOT EKSTERNE SAMARBEJDER

5 GRID Jeg har brugt et 12-spaltet grid til at sætte sitet op. Alle mine div bokse er sat op i 1, 2, 3 eller 4 spalter og er responsive. For bedst muligt at kunne bestemme hvordan mine elementer agerer i forskellige formater, har jeg defineret mine breakpoint i mit design ved brug af Bootstrap. WIREFRAME FORSIDE MENU UNDERSIDER MENU I min html kode har jeg defineret bredden i small 768px, medium 992px og large 1200px. col-lg-12 > col-lg-4 col-md-4 col-lg-4 col-md-4 col-lg-4 col-md-4 col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 > col-lg-5 col-md-5 col-lg-7 col-md-7 col-lg-3 col-md-3 col-lg-3 col-md-3 col-lg-3 col-md-3 col-lg-3 col-md-3 col-lg-6 col-md-6 col-lg-6 col-md-6

6 FORSTÅELSE FOR GRAFISK PRODUKTION MOCKUP FORSIDE UNDERSIDE MOBIL ENHED

7 GOOGLE FONT For at sikre mig, at teksten på sitet ser ens ud, uanset hvilken web browser brugeren anvender, har jeg valgt at bruge Google fonten Source Sans Pro. Udover at være en web sikker font, minder den meget om DI s sans serif font, som er brugt i den trykte håndbog. WEBOPTIMERING AF BILLEDER For at forbedre hastigheden på websitet, samt gøre det browserkompatibelt, har jeg weboptimeret billederne. Alle billeder er i Photoshop gemt ved brug af Save for Web til PNG-24. Da Internet Explorer forringer billeder, der er i en for høj opløsning, har jeg komprimeret mine billeder, så de passer nøjagtigt i et max format. UDEN OPTIMERING Jeg har installeret min Google Font ved at kopiere et CSS link til Source Sans Pro fonten ind i min header, samt defineret fonten i mit body tag i min CSS kode. MED OPTIMERING FONT AWESOME Ud over Google Fonts har jeg brugt Font Awesome, til diverse ikoner på mit website. Det gælder bl.a. min burger menu samt mine social media ikoner. Fordelen ved at bruge ikoner fra Font Awesome er, at de er skalerbare vektorfiler, som man kan style i sin CSS.

8 SEO OPTIMERING SEO optimering er en vigtig del af brugervenligheden i dag. For at give brugeren den bedst mulige oplevelse med sitet, samt skabe en højere placering i Google søgningen, har jeg benyttet flere metoder: Sidetitler for hver side Meta-description Overskrifter med H-tags Alt- og title-tags på billeder Mindre kodning og mere tekst i min html kode FARVER Til websitet har jeg valgt at bruge HEX farvekoder, som står for Hexadecimaltal og er et 16-tals system. HEX farver er 100% websikre og bliver ligesom RGB farver kun brugt indenfor computergrafik og til materiale, som skal ses digitalt. Da ingen skærme er kalibreret ens, kan man dog aldrig helt sikre sig hvordan modtageren ser farverne på deres skærm. INDEKSERING AF SIDEN Google har indekseret alle sitets indholdssider via både eksterne links, såsom links fra di.dk og igennem sociale medier, og via links til alle mine indholdssider fra mit eget site. RGB: 199, 133, 116 HEX: #C78574 RGB: 151, 114, 164 HEX: #9772A4 RGB: 243, 212, 127 HEX: #F3D47F ØGE SØGEOPTIMERINGEN For at øge min SEO optimering kunne man gøre følgende: RGB: 201, 216, 135 HEX: #C9D887 RGB: 136, 189, 162 HEX: #88BDA2 RGB: 125, 147, 178 HEX: #7D93B2 Tilføje billeder og videoer i søgeresultatet Forbedret hastighed ved færre CSS og Javascript Komprimere mine videofiler RGB: 227, 166, 112 HEX: #E3A670 RGB: 116, 130, 183 HEX: #7482B7 RGB: 124, 127, 152 HEX: #7C7F98 BROWSERKOMPATIBILITET Da jeg bruger CCS3 flere steder til at style mit site, har jeg sat præfikser ind i min css kode, som gør at disse styles bliver vist korrekt i diverse browsere. RGB: 218, 142, 140 HEX: #DA8E8C RGB: 126, 155, 188 HEX: #7E9BBC Jeg testet mit site i Internet Explorer, Safari og Google Chrome. Derudover har jeg testet, at mit design fungerer responsivt på mobil og tablet.

9 VALIDERING Inden upload af det færdige site, har jeg ved brug af Validation funktionen i Dreamweaver testet mit site for fejl. HTML Validation garanterer ikke, at man har et 100% fejlfrit site, men det er en god måde at fange fejl, man umiddelbart ikke havde opdaget. Valideringen tester bl.a. for: Modtagelighed Brugbarhed Samarbejdsevne Sikkerhed Svag præstation UPLOAD AF SITET Jeg har under mit Site Setup i Dreamweaver, defineret min site folder som indeholder alle mine filer. Derefter har jeg via FTP valgt den server som hoster mit website. Dette website bliver hostet af Surftown. SITE IMPROVE For at kunne holde øje med aktiviteten på sitet, bruger vi i DI Site Improve. Site Improve bliver implementeret ved et script i bunden af alle html siderne på sitet. MAPPESTRUKTUR Ved opstart af hjemmesiden, har jeg lavet en mappestruktur hvor jeg har valgt at ligge mine HTML sider i roden af min mappe, og så har jeg lavet undermapper til min CSS og img. Igennem Site Improve kan man holde statistik og få lavet en analyse over brugerne og deres adfærd. Her kan man bl.a. se: Besøgstallene Sidevisninger Søgemaskiner Indgangssider Sidernes popularitet Besøgsdybde Besøgsvarighed Eksterne referende sider REDIRECT Da DI s Surftown profil i sin tid er oprettet til DI Business App, har alle sites fra denne konto automatisk en url som ender med dibapp.dk. For at undgå at dette navn fremgår i Digitaliseringsindsatsens markesføringsmateriale, er der blevet lavet en redirect til sitet, som hedder di.dk/digitalisernu. FORBEDRINGER Da Site Improve analysen viste, at de fleste besøgende ikke klikkede sig videre fra forsiden, mente Digitaliseringsindsatsen, at burgermenuen ikke var fremtrædende nok. Vi kom derfor frem til at implementere en sekundær menu i bunden af hver side, med links til alle undersiderne. CMS SYSTEM Hjemmesiden er designet med den grundtanke, at det er grafikerne i DI, der efterfølgende skal lave rettelser og tilføjelser til sitet. Kommer der på sigt mere aktivitet på sitet, kan man med fordel lave det til et tema i WordPress eller et andet CMS system, så kunden selv kan opdatere sitet.

10 FÆRDIG FORSIDE FÆRDIG UNDERSIDE