Hent PDF - Grafisk design

robertopia.com

Hent PDF - Grafisk design

WORKFLOW &

GRAFISK PRODUKTION


WORKFLOW &

GRAFISK PRODUKTION

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.

ROBERT LØWENDAHL SØRENSEN SVENDEPRØVE 2013 WWW.ROBERTOPIA.COM


WORKFLOW &

GRAFISK PRODUKTION

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.

Starts side

Link til længere nede på siden

Link til længere nede på siden

Link til længere nede på siden

Link til længere nede på siden

Social Media1

Social Media 2

Social Media 3

Social Media 4

Social Media 5

Social Media 6

Mulighed for at tilføje flere

sociale efter behov / efter-

ROBERT LØWENDAHL SØRENSEN SVENDEPRØVE 2013 WWW.ROBERTOPIA.COM


Menu 1

Menu 3

Menu 4

Menu 5

Menu 6

WORKFLOW &

GRAFISK PRODUKTION

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 2

(Aktiveret)

ROBERT LØWENDAHL SØRENSEN SVENDEPRØVE 2013 WWW.ROBERTOPIA.COM


WORKFLOW &

GRAFISK PRODUKTION

Se siden på http://clients.gormlarsenzornig.com/robert/fb.html

ROBERT LØWENDAHL SØRENSEN SVENDEPRØVE 2013 WWW.ROBERTOPIA.COM

More magazines by this user
Similar magazines