PRODUKTION & WORKFLOW

Transkript

1 Produktion & workflow PRODUKTION & WORKFLOW SVENDEPORTFOLIO SIDE 37

2 R E D E S I G N A F C O N N E R Y. D K C ONN E R Y T E S TDK. M A G N E S IU M. J U S TWORK S. DK SIDE 38 SVENDEPORTFOLIO

3 P rod ukt ion & workflow O P G AV E N O P B Y G NIN G KR AV TIL P RODUKT E T Connery.dk er et populært online magasin der følger tidens trends, derfor skal siden have et skræddersyet og moderne, design der er mere overskueligt og lettere at navigere i. Siden består primært af 4 elementer: <header>, <nav>, <main>, <article> og <footer>. Derudover har jeg implementeret et jquery slideshow, en pop-up med en mailformular (nyhedsbrev) og et søgefelt, placeret i navigationen. ěě CMS integration ěě Containeren skal være max 998px bred, af hensyn til adds. ěě Der skal være et reklame-banner, øverst. ěě Der skal ryddes op i kategorier ěě Favicon og logo ěě Slideshow på forsiden ěě Pop-up med mulighed for at tilmelde sig nyhedsbrev ěě Vis både populære artikler og nye artikler på forsiden ěě Mulighed for at indsende tips til redaktionen ěě Søgefunktion ěě Links til sociale medier M Å L G RU P P E Målgruppen er mænd i alderen 18-32, kønsfordelingen er 82% mænd og 18% kvinder. Den seneste undersøgelse viser at over 40% af trafikken på siden kommer fra mobiltelefoner, det er derfor vigtigt at siden bliver så responsiv som muligt. B R A IN S TOR M B IDR A G U S A B ILIT Y Alle artiklerne er blevet hentet fra Connery. dk, det samme er billederne, som Connery har brugsrettigheder til. 40% af Connery's trafik stammer fra mobiltelefoner, derfor har jeg gjort mobil-versionen af siden utrolig overskuelig. Ved mit møde med chefredaktøren fik jeg at vide at det er vigtigt at der ikke er slideshows på mobil-versionen. Er din skærm mindre end 450px bred, simplificeres designet. Jeg har undgået at bruge en hamburger-menu, for at spare klik. P RO G R A M - VA L G Sublime: Til programmering CMS system: Funktionalitet og integration Photoshop: Favicon og logo eksporteres til web, Minimalistisk Nordisk Mænd Status Classy Overskueligt Less is more Drengerøv Neutralt Fart over feltet Aggression Spænding Dyrt Eksklusiv SVENDEPORTFOLIO SIDE 39

4 ARBEJDSPROCESS Kundemøde Media Queries Skitser & moodboard Browser tjek Flowchart & wireframe Flexskabeloner & moduler Device tjek Farver & typografi Korrekturgennemgang Opbygning af "skelet" HTML & CSS Udarbejdelse af hjemmesiden er en iterativ process med flere faser; navigationen kodes og designes før slideshowet kodes og designes etc. Undersider Projekt slut Konfiguration & metadata Scripts PHP & placeholders Logo & favicon SIDE 40 SVENDEPORTFOLIO

5 SKITSE & MOODBOARD

6 FLOWCHART Standard.tpl Kategorier Forside (Frontpage.tpl) Undersider (Article.tpl) Nyhedsbrev Søg Indsend tip Annoncering Redaktionen Cookies Kontakt Ophavsret

7 WIREFRAME STANDARD.TPL Navigation.tpl Flex skabelon nyhedsbrev.tpl Footer FORSIDE (FRONTPAGE.TPL) UNDERSIDER (ARTICLE.TPL) Navigation.tpl Navigation.tpl Slideshow.tpl Frontrising.tpl Frontwhatshot.tpl undersider (Placeres i CMS) Frontrising.tpl nyhedsbrev.tpl nyhedsbrev.tpl Footer Footer

8 FA R V E R GRÅ For at komplimentere den varme røde farve, benytter jeg en kold grå farve, primært til baggrunde. Den grå farve har et neutralt og tidsløst udtryk og giver designet en fin balance og dynamik. HEX: #d9d9d6 CMYK: C4 M2 Y4 K8 RGB: 217, 217, 214 Pantone: Cool gray 1 C D Y B S ORT Hvor den røde farve skaber intensitet og bevægelse skaber det sorte en ro og dybde til mit design. Det sorte er med til at gøre siden mere sofistikeret, seriøs og stilfuld. HEX: #000 CMYK: C70 M50 Y30 K100 RGB: 0, 0, 0 Pantone: 2336 C C ONN E R Y R Ø D Jeg vælger at tilføje en rød farve til det nye design for at sikre genkendelighed. Jeg har valgt en varm men skarp rød farve der bidrager med en masse intensitet og spænding. HEX: #BA0C2F CMYK: C3, M100, Y70, K12 RGB: #BA0C2F Pantone: 200 C SIDE 44 SVENDEPORTFOLIO

9 P rod ukt ion & workflow TYPOGRAFI BEBAS NEUE OPEN SANS Ligesom i mit magasin bruger jeg også bebas neue på hjemmesiden. Jeg fremhæver skriften med spærring. Bebas Neue bliver kun brugt som <h1> på hjemmesiden, <h1> bliver kun brugt en enkelt gang af hensyn til google. Skrifttypen er synkroniseret med Adobe Typekit. Typografisk, bliver "Open Sans" brugt mest. Open Sans er optimeret til både web, mobil og print. Open sans har en god x-højde, en bred inderform og en god kontrast mellem grundstamme og bug, hvilket leder øjet horisontalt og gavner læse-venligheden, hvorfor den er idéel til Connery. Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Ææ Øø Åå Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Ææ Øø Åå SVENDEPORTFOLIO SIDE 45

10 KO D E R M E TA - D ATA S C RI P T S CSS E K S E M P E L PÅ E T P H P LOO P ( S LID E S H OW ) SIDE 46 SVENDEPORTFOLIO

11 P rod ukt ion & workflow TRELLO Under hele processen har jeg krydset mine delmål af på en liste i organisationsværktøjet Trello. Her kan mine kollegaer også se hvor langt jeg er i processen, og jeg kan tilføje dem til min liste hvis jeg har brug for assistance undervejs. Når hjemmesiden er færdig ligger jeg listen hen på et nyt "board" der hedder "Klar til intern test" SVENDEPORTFOLIO SIDE 47