REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow

Transkript

1 Grafisk Workflow

2 REDESIGN AF GRAFISK FORUMS HJEMMESIDE Før Efter

3 REDEGØRELSE OPGAVEN Da jeg ikke har noget med web at gøre på min elevplads, opfandt jeg en fiktiv opgave - nemlig at redesigne Grafisk Forums Hjemmeside. IDEFASE I idefasen lavede jeg forskellige skitser til layout af hjemmesiden. Dette gjorde jeg for at prøve forskellige ting af for at finde frem til det bedst mulige layout. Jeg fik inspiration gennem Grafisk Forums eget materiale, eksempelvis deres blokke, vandflaske etiket, profilmagasin mm. Udtrykket gennem alle deres ting er det meget stilrene og enkle. Der er for det meste ikke brugt meget andet end deres logo samt den hvide og grønne farve. LAYOUT Det var vigtigt for mig, at det blev holdt meget enkelt, både mht. farver, opsætning og indhold, så det hang sammen med resten af Grafisk Forums materiale. Layoutet er først bygget op i Photoshop, for at eksperimentere lidt med opsætningen, og viser desuden udseendet og placeringen af de forskellige objekter på sitet. SKELET Skelettet er mere detaljeret end layoutet. Her er sat mål på for at få de forskellige objekters præcise placering. Her går man ikke op i stemning og farver. CSS BETINGELSER Disse betingelser er en guideline til, hvordan formateringen på hjemmesiden skal være. Hvilken font man vil bruge, skriftstørrelse, skriftfarve osv. BILLEDER I mit layout i Photoshop har jeg slicet billederne for at få dem i den rigtige størrelse og kvalitet da de skulle sættes ind i Dreamweaver. Jeg har desuden valgt at lave et slideshow på forsiden samt på en af undersiderne. På forsiden fortæller billederne lidt om de ting Grafisk Forum kan lave. På undersiden fortæller billederne noget om hvilke spændende cases Grafisk Forum har haft. TEKST Grafisk Forum har brugt fonten Oswald til alt tekst på deres hjemmeside. Jeg synes ikke Oswald er egnet til brødtekst, da den er meget smal og derved ikke er letlæselig. Jeg har derfor beholdt Oswald til overskrifter, men brugt Arial til brødtekst. BROWSERKOMPATIBILITET Hjemmesiden er blevet testet i Firefox, Safari, Google Chrome og Internet Explorer, og virker i alle disse browsere. Hjemmesiden er desuden testet på forskellige computere. KVALITETSVURDERING Jeg er meget tilfreds med resultatet. Forsiden skaber blikfang ved hjælp fra slideshowet. Jeg synes, jeg har holdt samme stil som Grafisk Forums eget matierlale, så der er en rød tråd. Jeg ville gerne have gjort hjemmesiden responsiv, men efter mange timers forsøg, måtte jeg til sidst opgive. Alt i alt synes jeg, at jeg har formået at holde det enkelt, overskueligt og brugervenligt.

4 IDEFASE Inspiration fra Grafisk Forums materiale Skitser

5 LAYOUT I PHOTOSHOP I Photoshop har jeg arbejdet med grids. På den måde er det let at få ting til at flugte og det er lettere når man skal igang med skelettet.

6 SKELET - INDEX Wrapper 100% x 100% (max width 9) 380x80px 4 920x60px 100%x5px 55 px 920x500px 60px 920x280px 340x280px 100%x5 px 60px 95px 200x200 px 300x200px 2 40x 40x Content 100%x100%

7 SKELET - UNDERSIDE 1 Wrapper 100% x 100% (max width 9) 380x80px 920x60px 100%x5px 55px 920x500 px 60px 100%x5px 2 200x200 px 95px 600x 600x660px 60px 300x200px 4 40x 40x Content 100%x100%

8 SKELET - UNDERSIDE 2 Wrapper 100% x 100% (max width 9) 380x80px 920x60px 100%x5px 55px 100%x5px 2 60px 200x200 px 600x 600x8 95px 300x200px 4 40x 40x Content 100%x100%

9 FLOWCHART Index Visitkort online Tryksager online Cases Reklameartikler Reklamebureau Kontakt Mød vores team Trykkeri Logistik og pakkeopg. Online markedsf. Komm. og design Miljø Sponsor Døde links Flowchartet viser hvordan man kan bevæge sig rundt på sitet. Sitet består af en index side og et antal undersider. De sider der er markeret med en stiplet boks er døde links. Man har på hver underside mulighed for at gå ind på alle øvrige sider, så man ikke skal tilbage til forsiden for at komme ind på en ny underside. Døde links

10 CSS BETINGELSER * margin: 0 padding: 0 body font-family: Arial, Helvetica, sans-serif h1 h2 h3 h4 h5 font-size: 18px color: # margin-bottom: 10px font-size: 18px margin-bottom: 10px font-family: Oswald, sans-serif font-size: color: #ffffff text-align: center margin: 0 font-weight: 300 font-size: 16px font-weight: normal line-height: font-size: 22px font-weight: bold line-height: 24px text-align: center p a font-size: 13px line-height: 18px color: # margin-bottom: 5px font-family: Oswald, sans-serif font-size: 14px color: #87bd25 text-decoration: none a:visited text-decoration: none color: #87bd25 #menu a:hover background-color: #87bd25 color: #ffffff padding-bottom: 15px padding-top: 10px padding-left: 5px padding-right: 5px #menu ul padding:0 5px list-style:none #menu ul:after content: display:inline-block width:100% height:0 #menu ul li display:inline-block margin:0 #menu ud li a display:block font-size:14px color:#000.bold font-family:arial, Helvetica, sans-serif color: # font-size: 16px font-weight: bold line-height: #reklamebureau.bold margin-top: #team a font-size: 22px font-weight: 300 color: #FFF text-decoration: none #menu.active background-color: #87bd25 color: #ffffff padding-bottom: 15px padding-top: 10px padding-left: 5px padding-right: 5px #reklamebureau li list-style: inside margin-left:.nav_box a color: #ffffff font-family: Oswald, sans-serif font-size: text-decoration: none #reklamebureau li list-style: inside margin-left:.nav_box a color: #ffffff font-family: Oswald, sans-serif font-size: text-decoration: none