WEBP – Font, farge og header

Jeg har ikke vært så flink til å poste her på bloggen den siste uken, men skal oppdatere dere om alt jeg har stevd og arbeidet med den siste uken, samt hvordan jeg ligger an i prosessen.

«Troverdighet er viktig på web fordi terskelen for å etablere nettsider er veldig lav» (Furu, 2005: 112). Det er faktisk slik at hvem som helst kan lage en nettside, og skrive akkurat det de vil, uten at noen vet om det er riktig/sann informasjon eller ikke. Det visuelle førsteinntrykket er det aller viktigste, så jeg har prøvd å planlegge design og utseende til nettsiden svært nøye. «Design og formgivning må være ryddig og oversiktlig, og må kommunisere seriøsitet» (Furu, 2005: 114).

Fargevalg: For å velge ut noen farger har jeg brukt Photoshop, og laget et slags moodboard. Fra et tidligere innlegg har jeg skrevet at kundens ønske var å bruke fargene indigo eller burgunder. Kunden ønsker en klar og enkel stil, med hvit/grå bakgrunn (til tekst), og selve teksten i svart/kull. Vi har tatt dette i betrakning utifra at svart tekst på hvit bakgrunn gir den beste lesbarheten: positiv tekst (Nielsen, 2002). Foreløpig har jeg valgt #4c4d4e til hover på menyen. Om jeg kommer til å bruke noen av de andre fargene noen andre steder på hjemmesiden vil jeg diskutere med kunden.

«Tekster beregnet for skjerm bør forfattes og presenteres på en annen måte enn hva tilfellet er for trykte medier» (Hoem, 2002:124). Brukerne er ikke interessert i å sløse bort noe tid på uinteressant informasjon, og de vil ofte «scanne» en tekst og lese i stikkord form. Beskrivende overskrifter er viktig, bruk forskjellige nivåer på overskriftene (H1, H2, H3 etc), samt bruk lister og korte avsnitt. «Bokstavenes form har betydning for lesbarheten, noe som er spesielt viktig ved skjermvisning. Gode skjermfonter er Verdana, Arial og Helvetica» (Hoem, 2002:126).

Fontvalg: Her har jeg laget et utvalg av fonter til skal fungere som titler/overskrifter som jeg mener passer til hjemmesiden og er brukervennlige. Har prøvd ut mange ulike typer for å få variasjon, og tilslutt ba jeg kunden velge 5 favoritter (kan sees til høyre). Alle de fem fontene har blitt testet ut på hjemmesiden, og fonten LHF Indian Script 2, som kunden allerede har benyttet i andre sammenhenger, reflekterer best det kunden ønsker å uttrykke.

Fra wikipedia: Gill Sans – Humanist sans-serif av Eric Gill, utviklet i 1926-28.
Optima – Humanist sans-serif av Hermann Zapt utviklet i 1952-55.
Trebuchet MS – Humanist sans-serif av Vincent Connare utviklet i 1996.
Helvetica – Neo grotesque sans-serif av Max Miedinger utviklet i 1957.
Arial – Neo grotesque sans-serif av Robin Nicholas og Patricia Saunders utviklet i 1982.
Fra wikipedia sine sider om de ulike formene for sans-serif er humanist sans-serif den typen som er mest kalligrafisk, mens neo grotesque sans-serif er de mest vanlige og mest brukte fontene.

Deretter valgte jeg ut noen forslag til fonter som kunne brukes i brødtekst, altså i all tekst som kommer på de ulike sidene. Brukte samme metode her, hvor jeg ba kunden ende opp med 5 favoritter. Noen av fontene har blitt testet ut i bruk av en lengre tekst. Vi har testet ut alle og synes Gill Sans og Trebuchet MS er de beste.

Header: Har jobbet en del med design og utvikling av en header de siste dagene, og diskutert med kunden hva han helst ønsker. Før arbeidet med dette har jeg gjort en del research, og vil anbefale disse sidene:
http://codex.wordpress.org/Designing_Headers:

1. «Websites are also judged by their covers and the first impression often comes from the header.» Headeren er altså noe av det første folk ser og legger merke til på hjemmeside.
2. «Pay attention to text placement and color.»
3. «Have a purpose and point. «
4. «It should invite visitors to remain.»
5. «It should blend in with the overall look.»
6. «Headers do not need to have pictures.»
7. «Cluttered headers are still cluttered.»
8. «Maintain accessibility standards in your header.»
9. «Headers can be any height, but remember content sells. «
10. «Think ‘Site Identity’.»

http://www.sitepoint.com/gif-jpg-png-whats-difference/
http://randyzwitch.com/custom-header-twenty-eleven-child-theme/
http://en.support.wordpress.com/themes/custom-header-image/
http://www.w3schools.com/tags/tag_comment.asp

Her er noen av mine forslag til header for Steel Feather:

Foreløpig har det siste eksempelet blitt valgt, dette fordi det viser en viktig detalj ved produktet som blir solgt (selvedge) og logoen med firmaets og designerens navn. Denne headeren vil mest sannsynlig bli byttet ut mot en annen, noe jeg skal jobbe videre med de kommende dagene.

Logo: Kunden har selv utarbeidet logo, og kjøpt fonter og dekorasjon/elmenter er har blitt benyttet i designet. Han har designet en lærmerke som vises på baksiden av jeansen, hvor merket/navnet er med, fjæren som er symbolet, dekorasjon og tekst rundt, samt slagord.

Dette er også designet av kunden selv, som viser merkenavnet og designerens navn. Denne logoen skal brukes på alle bilder som skal bli publisert på nettsiden, for opphavsrett og copyright av bilder tatt av Steel Feather. På bildet til høyre vises et sizing label med vaskeinstruksjoner, merkenavnet, størrelse og designerens navn.

 

Kunden har også designet et stempel, som fungerer som en hang-tag som han sender ved alle produktene sine. Dette er for markedsføring, og her går fjæren og fonten i merkenavnet igjen i designet.

Kunden hadde ingen logo som var skjermvennlig, så sammen utviklet vi denne logoen, med tanke på å beholde fonten i merkenavnet og fjæren. Denne logoen er enkel og viser de to viktigste elementene som representerer firmaet og deres produkter. Logoen har blitt testet ut, men om den kommer til å bli benyttet på nettsiden og eventuelt hvor blir opp til kunden å bestemme.

– Annette B. D.

Mappevurdering 2.semester

Du skal til denne mappevurdering samle alle arbeidene fra 2.semester på EN nettside. Denne nettsiden må designes på en måte som representerer deg som designer. Siden skal ha linker til alle oppgavene, og link til din reflekterte dagbok.

De siste ukene har jeg jobbet veldig intenst med mappevurderingen for 2.semester. Jeg har hatt mange problemer med WordPress, både med installasjonen og videre i prosessen. Føler fortsatt jeg ikke har fått tilstrekkelig med hjelp fra lærere, og føler dette er et veldig krevende emne hvor studentene blir etterlatt for å klare seg selv. Derfor har de siste ukene vært veldig krevende både psykisk og fysisk, samt lite motivasjon og ønske om å gi opp. Tross en vanskelig periode har jeg klart å komme i mål, og jeg har produsert en nettside jeg er fornøyd med.

Først måtte jeg laste ned WordPress på nytt. Det er slik at man må laste ned WordPress på nytt for hver nettside man skal lage, så dermed blir det mange brukernavn og passord man må holde styr på. Etter installasjons delen lastet jeg ned en del themes som passet designet jeg ønsket for min mappevurdering. Themet Photolistic ble mitt valgte tema, som fokuserer på bilder/illustrasjoner, siden designet er minimalt og rent. Videre forandret jeg en del innstillinger under Settings i Wp; general (title, tagline, date), reading (static page, front page). Under Appearance ble det også gjort en del endringer for å lage mitt eget design, og gjøre nettsiden mer personlig, samt gjøre nettsiden mer som en webside og mindre blogg aktig.

Jeg startet med å lage noen skisser til layout og design, og innholdet/tekst på nettsiden. 

Jeg bestemte meg tidlig for at jeg ville inkludere sommerfugler i denne mappevurderingen også. Sommerfugler fasinerer meg, og de skaper stemning og liv til en nettside. Jeg er glad i farger, og derfor passer det bra å kunne gi hver og en sommerfugl hver sin farge. Det skaper en god helhet, og mulighet for gjentakelse ved bruk av de samme fargene.

Denne illustrasjonen er brukt som utgangspunkt, og deretter har jeg nøye valgt ut farger som passer sammen og danner en god helhet til nettsiden. Etter arbeid med å fargelegge sommerfuglene, startet arbeidet med å lage en header til nettsiden. Jeg brukt de dimensjonene som temaet jeg lastet ned allerede brukte til sin header, 940 px x 350 px. Plassering av elementene tok mye tid, og etter mange utkast og vurdering ble tekst lagt til.

Etter arbeidet med headeren har jeg jobbet mye med å fjerne uønskede widgets, og dette kunne jeg utføre ved å gå inn i Editor, og finne de ulike html filene det gjaldt. Videre lastet jeg ned en plug-in for flash filer.

Deretter åpnet jeg Adobe Flash og utarbeidet 4 forskjellige pekere med linker til obliger og blogg. Disse pekerne inneholder titler til obliger og blogg, samt hver sin sommerfugl med farger tatt fra headeren.

Disse pekerne lastet jeg opp via SWFObj plug-in, på en side jeg hadde kalt for WEBM 2.semester. Jeg forandret størrelsen så det ble to og to pekere (slik som vist over), istedenfor at det var en og en. Mitt ferdige resultat av mappevurdering for 2.semester kan du finne og se ved å bruke linken under:

http://elevarbeid.webstudent.no/dmk1_nettstudier/annette_dahlen/WEBM/

Jeg beklager lite blogging og oppdatering fra min side, det er ikke noe jeg har for vane å gjøre. Det skal bli mye oppdateringer og blogging fremover, neste uke starter eksamen og da gleder jeg meg til å fortelle dere alt jeg skal ta for med i 4-5 uker fremover.

Ellers ønsker jeg alle medstudenter lykke til med eksamen; vi må støtte og hjelpe hverandre om det trengs! Riktig god help til alle sammen!

– Annette B. D.