PR D O U ION KT // W KFKF OR LOW PRODUKTION // WORKFLOW
// WORKFLOW HJEMMESIDE / REDEGØRELSE / IDÉ, FARVE, FONT OG GRAFIK / SKITSER OG FLOWCHART / SKELET / STORYBOARD / CSS HVAD? Opgaven er en fiktiv hjemmeside med 5 html sider. Dertil er der udarbejdet visuel identitet, skelet, storyboard og flowchart. Hjemmesiden er kodet i Dreamweaver med anvendelse af CSS. Websitet er en kortfattet eksempel på en præsentation af nordens tendenser indenfor indretning. MÅLGRUPPE Målgruppen er unisex, og henvender sig til de 25-45 årige. Det er den minimalistiske tankegang/indretter som sitet henvender sig til. Samtidig er det henvendt en gruppe der sætter pris på det eksklussive og et flot grafisk udtryk. Websitet har fået navnet visrum. LAYOUT OG MODULOPBYGNING Sitets komposition er bygget traditionelt op med header, footer og menu til venstre. Sitet måler 950 x 800 px og er venstre-justeret hvilket gør sitet nytænkt og anderledes fra de mange centrerede layouts. Jeg har valg et næsten kvadratisk layout, igen for at gøre det lidt anderledes. På skærme der er mindre end 1024 x 768 kommer der scroll på siderne, men det forstyrrer ikke dette sites layout. Layoutet har et moderne udtryk. Det bærer præg af rene grafiske linjer og et meget enkelt farvevalg. Top og bund/logo er grafiske elementer som går igen på alle sider og danner ramme om indholdet. Alle sider er ens i deres opbygning, da det ikke behøver være anderledes i forhold til dét det skal kunne - at vise tendenser indenfor de forskellige overskrifter. Jeg har anvendt Verdana, en grotesk skrift, da det er et moderne skriftsnit og i alle tilfælde egner den sig godt til web. Til logoet har jeg anvendt Impact Regular som også er en moderne grotesk skrift, blot med et meget mere kompakt, lidt blødere udtryk. Impact er en flot harmonisk font som kan klare at være anvendt som logo-type. BROWSERKOMPATIBILITET Jeg har testet hjemmesiden i følgende browsere: Mozilla Firefox, Google Chrome, Safari, Eksplore; alle versioner nyest opdaterede. Sitet virker optimalt i alle browsere. Jeg har ikke bevidst gjort brug af scroll-barer på hjemmesiden; hvis det havde været tilfældet ville der i den forbindelse have været forskel på udtrykkene i de forskellige browsere. BRUGERVENLIGHED Sitet er overskueligt og i sin enkelthed let at bruge for den besøgende. Der fremkommer ingen skjulte menuer på siderne, og de store rubrikker som umiddelbart stemmer overens med menupunkterne fortæller altid hvor man befinder sig. PROCES Emne- og indholdsbestemmelse Beskrivelse af målgruppe Inspirationssøgning og udarbejdelse af idéskitser Typografi og farver vælges Logo og grafik laves Udarbejdelse af layout Målbestemmelse af sitet - skeletopbygning Udarbejdelse af storyboard Udvælgelse af billeder, klargøring via Photoshop Opsætning af site i Dreamweaver Tjek at sitet fungerer i alle browsere KVALITETSVURDERING Overordnet er jeg tilfreds med hjemmesiden, idet den virker. Jeg er tilfreds med det udtryk og udseende den har fået. Jeg har været lidt begrænset af mine manglende tekniske evner i Dreamweaver, især i forbindelse med galleri-delen, som jeg ønskede at lave, men som tydeligvis er udeblevet. Jeg har forsøgt med forskellige gallerier bl.a. jquery. Jeg ville netop anvende javascript på min side og ikke flash, da flash er ved at uddø og de fleste apple produkter ikke læser det. Jeg ønskede et galleri som var integreret på siderne, således at der ikke åbnede sig et vindue ovenpå, men at billederne blot skiftede indeni min galleriboks. Det er til gengæld lykkes mig på min egen hjemmeside at lave et sådant galleri. ANVENDTE PROGRAMMER Billedematerialet er henholdsvis fra colourbox og egen kreation.
// WORKFLOW HJEMMESIDE / REDEGØRELSE / IDÉ, FARVE, FONT OG GRAFIK / SKITSER OG FLOWCHART / SKELET / STORYBOARD / CSS INSPIRATION/MOOD BOARD FARVESKEMA FONTVALG LOGO visrum visrum visrum logo visrum logo, negativ Impact Regular visrum font De primære farver er sort og hvid. De giver et moderne og enkelt udtryk og symboliserer kvalitet. Jeg bruger den gule og den lyseblå farve til at skabe kulør, uden at det bliver farvelade. Gul og blå er sammen med den sorte og hvide to moderne farver som i dette tilfælde også ubevidst kan referere til det nordiske. Til <p> har jeg anvendt grå, hvilket får teksten til at fremstå roligt på den hvide baggrund. Jeg anvender Verdana (11/16 px), en grotesk webfont. Den er enkel i sit udtryk og let læselig. Fonten tager ikke opmærksomheden fra billerne på siderne. Rubrikken er sat med 30 px, da den skal være tydelig og fungere som en slags navigation og kobling til logo. Menuerne er kapitaler for at markere dem ekstra. Jeg har valgt en blanding af små og store typer i mit logo for at gøre det lidt anderledes og samtidig markere betydningen af ordet, så det ikke nødvendigvis læses som et fladt ord: visrum, men i stedet vis rum. Logo type er i sig selv en del af udsmykningen på websitet og Impact er æstetisk set en god font i dette tilfælde. GRAFIK Dette er henholdsvis top og bund på sitet. De to elementer passer godt sammen og danner rammen om sidernes fælles udtryk. Header Footer
PRODUKTION // WORKFLOW HJEMMESIDE / REDEGØRELSE / IDÉ, FARVE, FONT OG GRAFIK / SKITSER OG FLOWCHART / SKELET / STORYBOARD / CSS SKITSER FLOWCHART skitse til flowchart Endeligt flowchart INDEX.HTML HJEM.HTML OM.HTML TRÆ.HTML POSTERS.HTML PLEKSIGLAS.HTML
// WORKFLOW HJEMMESIDE / REDEGØRELSE / IDÉ, FARVE, FONT OG GRAFIK / SKITSER OG FLOWCHART / SKELET / STORYBOARD / CSS 950PX SKELET index.html (ingen galleriboks) hjem.html om.html trae.html posters.html pleksiglas.html 200PX 950X200 140PX 800PX 230PX 150X230 380X230 260X230 40PX 180PX 950X180 Wrapper 950x800px, top-margin 100px, float lef PADDING 15PX 150PX 50PX 380PX 60PX 260PX PADDING 15PX 20PX
// WORKFLOW HJEMMESIDE / REDEGØRELSE / IDÉ, FARVE, FONT OG GRAFIK / SKITSER OG FLOWCHART / SKELET / STORYBOARD / CSS STORYBOARD 1 1 1 5 4 5 4 6 5 4 6 3 3 3 2 2 2 index.html hjem.html om.html 1 #headder, headder.psd 1 #headder, headder.psd 1 #headder, headder.psd 2 #footer, footer.psd 2 #footer, footer.psd 2 #footer, footer.psd 3 #tekstboks, H1 (Verdana 11/16px, normal) #666, 3 #tekstboks, H1 (Verdana 11/16px, normal) #666, 3 4 #tekstboks, p (Verdana 30/33px, normal, 4 #tekstboks, p (Verdana 30/33px, normal, 4 5 #menuboks, border-right-style: dotted; 5 #menuboks, border-right-style: dotted; 5 6 #galleriboks, billede_hjem.psd 6 #tekstboks, H1 (Verdana 11/16px, normal) #666, #tekstboks, p (Verdana 30/33px, normal, #menuboks, border-right-style: dotted; #galleriboks, billede_om.psd
// WORKFLOW HJEMMESIDE / REDEGØRELSE / IDÉ, FARVE, FONT OG GRAFIK / SKITSER OG FLOWCHART / SKELET / STORYBOARD / CSS STORYBOARD 1 1 1 5 4 6 5 4 6 5 4 6 3 3 3 2 2 2 trae.html posters.html pleksiglas.html 1 #headder, headder.psd 1 #headder, headder.psd 1 #headder, headder.psd 2 #footer, footer.psd 2 #footer, footer.psd 2 #footer, footer.psd 3 #tekstboks, H1 (Verdana 11/16px, normal) #666, 3 #tekstboks, H1 (Verdana 11/16px, normal) #666, 3 4 #tekstboks, p (Verdana 30/33px, normal, 4 #tekstboks, p (Verdana 30/33px, normal, 4 5 #menuboks, border-right-style: dotted; 5 #menuboks, border-right-style: dotted; 5 #tekstboks, H1 (Verdana 11/16px, normal) #666, #tekstboks, p (Verdana 30/33px, normal, #menuboks, border-right-style: dotted; 6 #galleriboks, billede_trae.psd 6 #galleriboks, billede_posters_samlet.jpg 6 #galleriboks, billede_pleksi.psd
// WORKFLOW HJEMMESIDE / REDEGØRELSE / IDÉ, FARVE, FONT OG GRAFIK / SKITSER OG FLOWCHART / SKELET / STORYBOARD / CSS VISRUM.CSS #wrapper { height: 800px; width: 950px; margin-top: 100px; ; #headder { ; height: 200px; width: 950px; #menuboks { height: 240px; width: 150px; border-right-width: 1px; border-right-style: dotted; border-right-color: #666; margin-top: 140px; ; padding-right: 15px; text-align:right; #tekstboks { height: 240px; width: 380px; margin-top: 140px; margin-left: 50px; ; #galleriboks { height: 240px; width: 260px; float: right; margin-right: 20px; margin-top: 140px; #footer { ; height: 180px; width: 950px; margin-top: 40px; a { font-size: 16px; color: #000; font-weight: normal; a:hover { font-size: 16px; font-style: normal; font-weight: normal; color: #FC3; h1 { font-size: 30px; font-style: normal; font-weight: bolder; color: #000; line-height: 33px; p { font-size: 11px; line-height: 16px; font-weight: normal; color: #666; a:active { font-size: 16px; font-weight: normal; color: #FC3; background-color: #000; text-decoration: blink; SE SITET PÅ: www.mediegrafiker-ats.dk/christinnah1