grafisk workflow Madmagasinet

Størrelse: px

Starte visningen fra side:

Download "grafisk workflow Madmagasinet"

Ejvind Mathias Thøgersen
10 år siden
Visninger:

1 grafisk workflow Madmagasinet

2 Dokumentation Opgaven Madmagasinet skal have et website som er responsive, således deres brugere har en side som er optimeret til de forskellige platformer, hvorpå deres site bruges. Designkrav Sitet skal være let anvendelig for brugeren Det skal være indbydende og enkelt Billederne må gerne være i fokus Man skal let kunne udvide sitet med ekstra menupunkter Layout Let, tilgængelig menu Tydelig afsender Enkelt og overskuelig tekstmængde på index-siden Billeder i fokus, men i neutral lys Listevisning - overskuelig Usibility Sitet er enkelt, overskueligt og nemt at navigere rundt på. Sitets index-side er med en begrænset tekstmængde, således brugeren blot skal forholde sig til et væsentlige og kan blive inspireret på billeder, tekst og stemningen på sitet. Arbejdsprocess Møde med kunden Inspirationssøgning på nettet Håndtegnede skitser Layout i Photoshop, som præsenteres for kunden og godkendes Udarbejdelse af flowchart, skelet og storyboard HTML en laves Søgeoptimering ved brug af metatags (title, keyword, description, alt.text mm.) Browserkompatibiliteten testes Demo til kunden Tilretninger i html og tekster Sitet er godkendt og uploades til domænet Browserkompatibilitet Sitet er testet i Chrome, Firefox, Safari og Internet Explorer, og her fungerer det som dte skal. Kvalitetsvurdering Sitets layout er som ønsket - enkelt, skarp og overskueligt. Jeg har lavet denne side, for at øve mig i at lave responsive webdesign, og det er også af denne grund, at jeg blot har lavet index-siden, da det har taget tid for mig. Jeg glæder mig til at skulle have et valgfag, hvr jeg får mere web ind over, sålees jeg kan lære at lave webdesign, som er mere udvidet i niveauet.

tilgængelig menu Tydelig afsender Enkelt og overskuelig tekstmængde på index-siden Billeder i fokus, men i neutral lys Listevisning - overskuelig Usibility Sitet er enkelt, overskueligt og nemt at

4 procesbeskrivelse Møde med kunden Inspirartionssøgning på nettet Skitser Layout i PS præsenteres for kunden & godkendes Udarbejdelse af flowchart, skelet & storyboard Programmering af sitet Søgeoptimering ved brug af metatags Browserkompatibilitet testes Demo til kunden Tilretning af html & tekster Sitet er godkendt og uploades til domænet

Programmering af sitet Søgeoptimering ved brug af metatags Browserkompatibilitet

5 inspirationssøgning Site 1 Inspirationen tages fra forskellige websites, hvorfra det er det enkelte, skarpheden og det æstetiske udtryk som tages med. Med billeder som giver historierne på sitet en opbakning, og en enkelt tekst stående hertil, som også står stærk ved hjælp af enkelte grafiske streger, bygges sitet på en enkelt, stærk troværdighed, som blandt andet også ses på udvalgte sider her. Billederne får lov til at fylde på sitet, således de er med til at skabe udtrykket på websitet.

Med billeder som giver historierne på sitet en opbakning, og en enkelt tekst stående hertil, som også står stærk ved hjælp

8 flowchart Index.html blog.html inspiration.html opskrifter.html koekkenet.html magasinet.html kontakt.html abonnement.html opskrift1.html interview.html redaktionen tilbud.html.html opskrift2.html udstyr.html job.html bliv_abonnent.html opskrift3.html opskrift4.html godefif.html historien.html abonnementsbetingelser.html tilfredshed.html opskrift5.html kundeservice.html annonceinfo.html

html redaktionen tilbud.html.html opskrift2.html udstyr.html job.html bliv_abonnent.html opskrift3.html opskrift4.

9 1.5% skelet screen #wrapper section 3.5% nav 5.5% 7% 5% 5% aside figure figure figure section aside aside article article aside

10 skelet mobile #wrapper header 1.5% 3.5% nav 1.5% section figure 4.1% 5% article 4.1% 4. figure 4. footer aside

11 layout i ps screen

12 layout i ps mobile Forsættelse

13 html Responsive web Responsive web er blevet en nødvendighed i arbejdet med websites. Websites bruges på forskellige flader, og i den grad på smartphones og tablets. For at brugervenligheden bliver optimal, skal websitet være responsive, og jeg har derfor i min html <head> indsat en variabel, således at websitets flade afhænger af dens bredde. Når bredden af sitet er 480 px eller derunder, vil det altså være mobile.css som styrer sitet. Søgeoptimering På sitet har jeg både lavet en description og metatags, for at øge sitets søgeoptimering. Derudover har jeg lavet alternative tekster til samtlige billeder og på sitet og brugt tags som H1, H2, p mm.

For at brugervenligheden bliver optimal, skal websitet være responsive, og jeg har derfor i min html <head> indsat en variabel, således at websitets flade afhænger

14 css screen screen.css #wrapper max-width: 1000px header header figure width: 30% nav width: 68% section section figure width: 55% article width: 35% height: 40% border-top: thin, solid, rgb(0,0,0) border-bottom: thin, solid, rgb(0,0,0) footer aside width: 17.8% H1 font-family: Oswald, Arial, Helvetica, sans-serif font-size: 1.5em font-weight: lighter text-align: center text-transform: uppercase p font-family: Open Sans Condensed, Arial, Helvetica, sans-serif font-size: 0.8em font-weight: lighter text-align: center text-transform: uppercase article p spam a font-style: italic text-decoration: none a:hover rgb(102,102,102)

thin, solid, rgb(0,0,0) border-bottom: thin, solid, rgb(0,0,0) footer aside width: 17.8% H1 font-family: Oswald, Arial, Helvetica, sans-serif font-size: 1.

15 css mobile mobile.css #wrapper header img padding-left: 20% header figure nav aside ul li a font-size: 1 em text-align: senter section figure img section figure width: 96% article width: 96% section figure.top-foto display: none

16 Se det færdige website på

Relaterede dokumenter

GRAFISK WORKFLOW H1 MARIA SCHELDE

GRAFISK WORKFLOW H1 MARIA SCHELDE DOKUMENTATION Opgaven Arkitekt Mette Schelde skulle have designet og programmeret et website, hvorpå hun kunne præsentere hendes produkter. Designkrav Sitet skal være