RAPPORT WEBP MAGNE SILJAN -12.12.13 INNLEDNING TOLKNING AV OPPGAVEN Tolkingen av oppgaven var at det skulle utvikles en webside for en klient (firma, organisasjon eller et annet prosjektområde). Websiden måtte være en html-side med css, men kunne også lages som en Wordpress-side. Kriteriet var at den måtte skille seg tydlig fra opprinnelig Wordpresstema. Det skulle også lages en prosjektbeskrivelse, fremdriftsplan og rapport som tydlig henviste til websideurl. Prosjektbeskrivelse, fremdriftsplan og klient måtte godkjennes av veileder før prosjektperioden. KONSEPT OG MÅLGRUPPE Jeg har valgt å jobbe med coverbandet, Pink Slips, fordi jeg ønsket å hjelpe de med å videreutvikle deres profil, prosjektet er spennende, og fordi jeg kjenner de fra før av. Forrige prosjekteksamen laget jeg profillprodukter for bandet. Pink Slips ønsker å fremstå som et profesjonelt og seriøst rockeband/coverband, få flere fans og flere og større spillejobber. Med en egen hjemmeside vil de enkelt kunne promteres til konsertarrangører, fans og andre som ikke har hørt musikken de spiller. Bandet ønsker at websiden skal ha god funksjonalitet, være lett å navigere i og ha et profesjonelt design. Websiden skal ha et tøft og "rocka" uttrykk som gjenspeiler musikken de spiller og som står i kontrast til de rosa slipsene som de har på seg. Headerbildet skal avbilde medlemmene i bandet og deres logo skal være med. (Bilder og logo etc. laget jeg for bandet forrige prosjekteksamen). Målgruppe: Unge menn og kvinner i alder 20-30 år som liker rock og hardtslående musikk med mye trykk og energi.dette er også en aldersgruppe som er mye på nettet. Jeg ønsket å lage siden i Dreamweaver og ikke som cms for å få et eget design og ikke bygge videre fra en template, designet av andre. INSPIRASJON OG KREATIV METODE Inspirasjon er hentet fra ulike nettsider for band. Skisser og noen provisoriske utkast er utgangspunktet som websiden sprang ut fra. Disse viste jeg først til kunden og fikk deretter godkjenning. Det fungerte bra og jeg kom relativt raskt til ferdigstilling av websiden.
www.metallica.com www.inflames.com
SKISSER AV WEBSIDESTRUKTUR
DESIGNVALGET Logo: Logoen er plassert nederst til høyre på bildet på bandfotoet for å skape balanse til navigeringsmeny, overskrifter og brødtekst. Typesnittet i logo er Trajan. Trajan var en romersk keiser, sunn, kraftig, beslutningsdyktig og rettsindig, som satte sitt preg på Roma. På torget i Roma bygget de Trajans basilika, på Triumfbuen i Paris er det relieffer som viser begivenheter i hans liv, og ved Capitolbygningen i Roma ble det reist en 30 m høy søyle der hans aske er oppbevart i en urne av gull. Den ble reist i år 113 e.kr., og ved foten av søylen er det inskripsjon som har typesnitt som det vi i dag bruker som Trajan. Ønsket ved valg av typesnitt var å få mektig og hellig, fundamentale og sterke signaler og Trajan er da et godt valg. Bevisst valg var å øke bokstavavstanden (tracking), noe som underbygger storhet, det å ta selvfølgelig plass. LOGO PROSESS:
Trajan Strukket litt og øket tracking Forlenget leg på "K" Laget tagger/ torner med Pen Tool, kopiert og reflektert Lagt på tgger på alle bokstavene. Laget symbol ut av P, kopiert, reflektert og lagt på samme tagger som det er på "I". Taggene gir et mer aggressivt uttrykk.
Andre versjoner (rød er mitt valg) På forskjellige bakgrunner
Bandfoto: Bakgrunnen av Stonehenge er et gammelt bilde fra reise i England. Bildet er i tre plan, forgrunn, mellomgrunn og bakgrunn og kameravinkel er i synsperspektiv. Bildet er satt i sort/hvitt for å fremheve rosa slips som bandmedlemene har på seg. Det er lagt til solskinn for å gi en dramatisk effekt. Kontraststyrke og tonenivåer er øket for å gi bildet mer informasjon. Orginalfoto Redigert utgave
Orginalfoto av personen til venstre på bildet. Bilder av bandlemene er tatt i studio for å oppnå en god lyssetting. Deretter er de beste bildene av medlemmene valgt ut, klippet ut med lassotool og satt sammen i photoshop. Satt i sort/hvitt, men beholdt farge på slips. Navigeringsmeny: Typesnitt er Arial, bold, versaler, 20 px, en grotesk sansserif font som kan leses i allle browsere. Sansserifer er letter å lese på skjermbaserte medier og gir et mer moderne uttrykk som treffer målgruppen til Pink Slips bedre enn en antikvaskrift. Navigeringsmenyen er plassert øverst til venstre for lett oversikt og fordi det er et av de stedene vi naturlig leser informasjon fra i vår vestlige kultur. Hvite aktive linker for å skille mot det grå. Grått har jeg valgt å bruke fordi det harmoniserer med den hvite body'en og er nøytralt. Hvit og grått er også farger som harmoniserer med fargenetonene i bandbildet. Grå er en farge jeg har brukt mye og som gir et profesjonelt inntrykk. Den står i stor kontrast mot de rosa slipsene og gjør at det blir fremhevet. Overskrifter: Arial bold, 24 og 18px, mørke grå versaler, og har samme padding som navigeringsmeny for å skape ro og orden og for å skape en helhet. Brødtekst: Arial, 16px, lettlest størrelse. Komposisjon: Et enkelt oppsett ble valgt for komposisjon av siden. Det gjør at vi unngår rot, og gjør navigasjon enklere for brukeren som finner siden på Internett. Alle undersider har lik typesnitt, fontstørrelser og padding for å skape orden, sammenheng og et godt helhetsinntrykk.
CASCADING STYLE SHEETS Websiden er laget som HTML og CSS i Dreamweaver. Pink-slips.net- domenet samt webhotell er opprettet hos One.com,. Se rød tekst for beskrivelse. * { * For å resette standard nettleser padding og margin padding: 0; margin: 0; body { * Oppsett for standard font-typer, bakgrunnsfarge og skriftfarge font-family: Myriad Pro, Arial, Verdana, Tahoma, sans-serif; background-color: #333; color: #fff; a { * Standard farge på linker <a> og for å fjerne text-decoration: underline; color: #0000FF; text-decoration: none;
#wrapper { * Standardbredde og sentrering av side max-width: 1009px; margin: auto; #wrapper > table img { display: block; * For å unngå mellomrom mellom bildet og hvit content table { border-collapse: collapse; border-spacing: 0;.header { * For at all skrift skal være caps og for padding (plass, margin) text-transform: uppercase; overflow: hidden; padding: 10px;.header img {
* Bandbilde float: left; img { border: 0; margin: 0px;.header ul { float: left; list-style: none; margin-top: 10px; margin-right: 0px; margin-bottom: 0; margin-left: 70px; clip: rect(auto,auto,auto,100px);.header li { * Font-størrelse og flyt meny-elementene til venstre font-size: 20px; margin-right: 40px; float: left; margin-left: 0px;
color: #0000FF;.header a { * Standard-farge på lenker i menyelementer color: #888;.header a.active,.header a:hover { * For å endre farge når man har musepekeren over eller meny-elementet har class="active" color: #FFF;.content { * Font-størrelse, padding og bakgrunn på innholdet. Satt en minstehøyde på 668px (bakgrunnstørrelsen). Border-box er der så man kan legge til padding uten at høyde/bredde blir større. font-size: 16px; min-height: 300px; box-sizing: border-box; background-color: #FFF;
background-repeat: no-repeat; padding-top: 40px; padding-right: 80px; padding-bottom: 80px; padding-left: 80px; H2 { font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: #333333;.content.inner { * Indre bredde så ikke texten flyter ut width: 850px; left: 0px; color: #00F;.content h1 { * Satt opp font for oversrkifter font-size: 18px;
color: #333; margin-bottom: 10px;.content p { * Margin for paragrafer margin-bottom: 10px; * Nedover er det veldig likt som meny i header.footer ul { padding: 5px; text-align: center;.footer li { list-style: none; display: inline-block; padding: 2px 4px; border-left: 1px solid #888;.footer li:first-child {
border: none;.footer a { color: #888; * * #wrapper.content.inner p { color: #000; #wrapper.content.inner p { color: #333; EGENEVALUERING OG KONKLUSJON Det har vært lærerikt. Jeg har lært masse nytt om html og CSS og jeg har lært å sette inn youtube-videoer og lage fotogalleri. Skal ikke legge skjul på at det har vært mye knoting ettersom jeg er veldig fersk på det å lage websider, men det går lettere og lettere for hver gang jeg lager en side. Det er gøy! Fotogalleriet kunne fungert bedre, men ettersom jeg aldri har gjort dette før er jeg fornøyd. At websiden vises riktig i forkjellige browsere, er også et stort pluss. Tidsmessig har alt gått som planlagt og jeg har fulgt fremdriftsplanen. Sammarbeidet med kunden har gått veldig fint. Jeg spurte de om de ville ha en egen underside "om bandet" og kontaktinformasjon "direkte" i footer, men det ville de ikke ha. De var storfornøyd med siden slik den er nå!
KILDEHENVISNINGER OG REFERANSER Lyndavideoer: Successful Branding av Lorrie Thomas Ross. Designing a Logo av Nigel French. Creating a CD cover av Nigel French Foundations of Typography av Ina Saltz HTML Essential Training by Bill Weinman Responsive Design Fundamentals by James Williamson Dreamweaver CS6 Essential Training with James Williamson Creating a First Web Site with Dreamweaver CS6 with Paul Trani Inspirasjon: http://www.metallica.com http:/www.inflames.com Lærevideoer på youtube: http://www.youtube.com/watch?v=-fyanby0zum http://www.youtube.com/watch?v=qerf3p64wx8 MIN WEBSIDE: http://www.pink-slips.net WORDPRESS: http://magnesiljan.wordpress.com/