WORKFLOW & GRAFISK PRODUKTION

Transkript

1

2 Opgavebeskrivelse Kunde: Gorm Larsen & Zornig (GLZ) Websitet Social media cheat sheet er en oversigt over forskellige sociale mediers opsætning. Formålet er altså at gøre det nemt at finde de mål, der f.eks skal bruges til en facebook kampagne. Min rolle Jeg har stået for layout og opbygning af sitet ved hjælp af html 5, CSS 3 og Media Queries. Flowchart, wireframes og layout Inden kodningen har jeg udarbejdet flowchart, wireframes og et layout, som jeg har fulgt hele vejen. Udgangspunktet for layoutet af sitet er, at det er nemt og overskueligt at få præcis de mål, der er behov for i forbindelse med at lave en profil eller et andet projekt på de forskellige sociale platforme. Der er altså fokus på brugervenlighed, og på at sitet er skematisk, enkelt og overskueligt i sin opbygning. Sitet indeholder elementer som f.eks. en faktaboks, der layoutmæssigt er stærkt inspireret af det pågældende sociale medie. Dette er bevidst, fordi det netop er dem, det handler om. Menuen kan udvides til at indeholde mange flere sociale medier efterhånden, som det efterspørges. Responsive design Sitet er opbygget som et responsive site, målrettet pc og tablet. De fremtidige planer er at målrette sitet til smartphone. CSS eksempel på Media Queries til bærbar eller større skærm: Forskellige browsere Jeg har bevidst brugt HTML 5 og CSS 3 på trods af, at det ikke er alle browsere, der understøtter det. Min vurdering er, at den målgruppe, sitet først og fremmest er rettet mod (professionelle indenfor den grafiske branche) er brugere af de browsere, der understøtter html 5 og CSS 3 i en eller anden grad. Men da sitet skal fungere på mere end en browser, har jeg været nødsaget til at bruge forskellige webkits til menuen, så de reagerer korrekt, når man f.eks. hover over, eller aktiverer linket. Eksempel på en CSS regel, som gør at alt indholdet i id en menu ul li a langsomt fader ind ved sideskift: Menu og faktaboks Menuen samt faktaboksen har begge positon fixed, hvilket gør, at de følger med og er synlige hele vejen, mens du scroller. Samtidig med at det gør det hurtigere at navigere i, minder det også om det pågældende sociale medie. Anvendte programmer Sublime text 2, Photoshop, Illustrator Resultat Publiceringen af sitet er udskudt, da Facebook har udgivet et Media Cheat Sheet med nyt design lige før GLZ s launch.

3 En hurtig oversigt over diverse sociale medier, så man kan starte en kampagne hurtigt cross media. Startsiden tilføjes hvis tid haves. Linksne vil stå i faktaboksen og linke længere ned på sitet, der vil fortælle om f.eks. profilbilledstørrelser til alle medier. Social Media1 Social Media 2 Starts side Social Media 3 Social Media 4 Social Media 5 Social Media 6 Mulighed for at tilføje flere sociale efter behov / efter-

4 Fackts omkring det sociale netværk Hver faktaboks vil være designet individuelt, så det minder lidt om selve chatfunktionen eller anden funktion fra det bestemte sociale medie. Faktaboksen indholder nogle facts om det sociale netværk. Faktaboksen er fixed, hvilket vil sige at den følger browservinduet, når du scroller. Ligeså vil navigationen i menuen Logo Social media cheat sheet Menu 1 Menu 2 (Aktiveret) Menu 3 Menu 4 Menu 5 Menu 6

5 Se siden på