Det jeg liker veldig godt med denne siden er at juryen har et system hvor de gir poeng etter design, kreativitet osv, og det gir deg en mye bedre pekepinn på hvor godt mottatt siden din faktisk blir, en bare at den blir godtatt i et hvilket som helst galleri.

Ta en titt på hva juryen sier om siden min!

Men hva skjer når man begynner å utforske disse reglene? Jeg har sett litt nærmere på bruk av Helvetica fremfor Arial i webdesign.

Et paradigmeskifte

Selv om vi er i ferd med å få et paradigmeskifte i bruk av fonter på web, vil det fortsatt ta tid før teknologien hos brukerne henger med. Men bruk av @font-face er i ferd med å revolusjonere typografien totalt på nett. Alle de største nettleserne i dag støtter @font-face. Og det er ikke et sekund for tidlig. Men da må vi heller ikke glemme at mange fortsatt bruker eldre versjoner av nettleserne.

I tillegg har metoder som sIFR og Cufon løst mange av problemene, selv om det finnes ulemper og fordeler her og. Men disse teknikkene brukes stort sett på overskrifter.

Men selv om de fleste er smertelig klar over begrensningene knyttet til nettlesere, og brukernes innstallerte fonter, er det ikke alle som er klar over hvordan operativsystemene viser fontene. Og det er her (mis)bruken av Helvetica kommer inn.

Arial vs Helvetica

Helvetica har aldri vært en trygg font å bruke på nett, om den er aldri så pen. For den er pen, dvs i hvert fall hos Mac brukere. Når man skal stable fonter i CSS, og man ønsker å bruke Arial, pleier man å stable dem slik;

body {font-family:Arial, Helvetica, sans-serif;}

Med dette sier vi at vi ønsker Arial som font over hele siden, og Helvetica dersom leseren av en eller annen grunn ikke har Arial innstallert, og til slutt en hvilken som helst sans-serif font, om de 2 første fontene ikke eksisterer hos brukeren.

Med @font-face forandrer alt seg. Da flytter vi nemlig fonten ut på nett, slik som vi gjør med feks bildefiler i dag. Vi lenker fonten opp mot nettsiden, og dermed er vi ikke avhengig av hva brukerne har innstallert av fonter. Genialt, så langt.

Men det er minst et problem ved det. Windows! For mens Mac brukere nyter nettsider i deilig flytende former, ser fortsatt Windows brukere mer hakkete fonter. Enn så lenge. Dermed løser ikke @font-face alt.

Utsnitt av Holte Design. Windows øverst, Mac nederst. Klar forskjell, selv ved bruk av Arial.

Og her kommer problemet med Helvetica inn. For svært mange rundt omkring velger å stable Helvetica fremfor Arial. Det skulle man tro løste saken. De med Mac får Helvetica, som jo er å foretrekke visuelt. De med Windows har ikke Helvetica ferdig innstallert , og dermed hopper man rett til Arial. Men hva med de som har innstallert Helvetica på Windows? Jo, det ser ut som et typografisk helvete. Her er et eksempel;

Webdesignmagasinet er nærmest uleselig på Windows med Helvetica innstallert.

Som man ser ganske tydelig har Windows mye å gå på med typografien. Og når jeg har nevnt dette pleier folk i min bransje ofte å si; “Skift heller til Mac du!”. Men hva hjelper det når majoriteten bruker Windows? Frem til Windows gjør noe med dette er det desverre vår oppgave som webutviklere å ta dette i betrakning, slik som vi i mange år har måttet ta hensyn til IE6. Det er brukeropplevelsen som må stå i fokus.

Så hva gjør man?

Noen har hevdet av man bør sette Helvetica fremfor Arial. Jeg skal ikke si hva dere skal gjøre, men det er viktig å være klar over at Helvetica renderer ekstremt dårlig i Windows i alle store nettlesere (ikke bare Firefox som har vært hevdet tidligere). Se an målgruppen din. Test på tvers av operativsystem og nettlesere om mulig. Vær klar over at selv om teksten er leservennlig hos deg, betyr ikke det nødvendigvis at den er det over hele linja.

Grunnen til at jeg nevner Helvetica spesielt er fordi mange velger å bruke det fremfor Arial, fordi Arial er en dårlig etterligning av Helvetica. Det er det ingen tvil om. Men det er heller ingen tvil om at Helvetica er nærmest uleselig i Windows. Og jo mindre størrelse, jo verre.

Men så kan du jo også stille deg spørsmålet; Hvor mange lesere har du med Helvetica innstallert på Windows?

Har dere noen tanker rundt dette?

Bruk av padding og margin i CSS kan være svært effektivt om man bruker det riktig. Har du lyst til å lese mer om hvordan du kan bruke luft i webdesign kan du lese artikkelen min i Bloggebyen.

Her får du servert 10 luftige nettsider;

BKWLD

BKWLDs sider er så rene, så luftige, så innbydende at jeg blir sittende å studere sidene i minutter før jeg hopper videre (noe som må betegnes som timer i nettsurfing).

CouchCreative

Det er spesielt undersidene jeg blir imponert over på CouchCreative (se bilde). Snakk om å holde tekst og spalter ryddig!

CreativeDepart

Her funker det meste. Grid, fargepalett, typografi, og ikke minst god bruk av luft!

Curato

Delicious

Definitivt en av mine favoritter og grunnen til at jeg bestemte meg for å skrive denne artikkelen. Her sees luften godt pga det “boksete” designet Delicious har valgt. De kjører sin egen stil og det funker som bare det. Nydelig!

Finch

FRKT

The Invoice Machine

UT

Dette er ventesiden til den nye turtjenesten til NRK og Den Norske Turistforening og er designet av Martin Berglund. Vakrere design skal du lete lenge etter. Jeg gleder meg til den endelige versjonen. Den har også fått mye skryt for sin geniale sømløse bakgrunn.

Valgpanelet

Ryddig og luftig side, og kjekk å ha i disse valgtider også!

Mer om luft/whitespace:

• Atle Webdesign: Luft i design
• A List Apart: Whitespace

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your body.

Happy CSS Naked Day!

Mye trafikk ga blod på tann

Jeg må jo bare si jeg er milevis fra å ha samme trafikk som jeg hadde den gangen, men når det er sagt forstår jeg ikke helt hvorfor den ble så godt mottatt. Det merkes at jeg ikke kunne så mye om webdesign. Men dette var det virkelig første forsøket på å kode i html/css. Og det at jeg fikk så god feedback gjorde at jeg fortsatte med webdesign! Og det er jo gøy å vise fram da?

Jeg har snoket på en del gamle utgaver til kjente webdesignere opp gjennom og jeg vet jeg ikke er alene om å grynte på nesen av gamle prosjekter. Men er ikke det et godt tegn at man ser utviklingen i sitt eget arbeid? Det betyr jo bare at man forsøker å bli litt bedre dag for dag.

Tar dere utfordringen?

Ja, i dag har jeg lyst til å komme med en liten utfordring til dere! Hvis du har din første nettside liggende og slenge en plass, vis oss den! Du behøver ikke engang å unnskylde deg! Herregud, det var ditt første forsøk! Det skulle bare mangle om du ikke er fornøyd med den i dag! Men det må være noe du har laget selv!

Om noen velger å gjøre det hadde det vært kult om dere slang igjen en link! Jeg har i hvert fall veldig lyst til å se deres første forsøk også!

Webdesignmagasinet er fortsatt i beta (bildet er stjålet fra fireisland.no i beste hensikt)

Når får Johan Bakken (Styleboost) konkurranse! Det vil si, egentlig ikke, for det er litt forskjellige konsepter. Men vi snakker om et nytt norsk galleri som skal vise god norsk webdesign. Det er Anders Meyer-Eldøy som står bak konseptet. Han  jobber som webdesigner i Argo Internett på dagtid, og er webdesignersuperhelt på kveldstid, under navnet Fireisland.

Fortsatt i betastadiet

Er det noe jeg brenner for så er det å fremme norske webdesignere og norsk design, så dette er et viktig steg i riktig retning!

Jeg gleder meg til å se utviklingen av dette galleriet, ettersom det fortsatt er i betastadiet.

Et par irritasjonsmomenter

Som hyppig bruker av CSS gallerier har jeg riktignok et par ting å komme med som jeg syns kan blir bedre. På siden har du mulighet til å foreslå nettsider, og det er bra. Men to ting fikk meg til å stoppe opp og la være. Jeg kunne fint stoppet opp når man ble bedt om å registrere seg, det i seg selv er et irritasjonsmoment så lenge man bare skal foreslå nettsider.

Men det som fikk meg til å la være var når man ble spurt om å laste opp et skjermbilde av siden. Det hindret meg ikke i å gjøre det, men da tenkte jeg med en gang, “har ikke tid nå, tar det senere”. Det blir fort i min verden til aldri. Det er ikke ment å være vanskelig her, men det er sånne småting som kan få folk til å snu i døra. Det finnes håp likevel, ettersom han melder i bloggen sin om en løsning på dette senere. Det håper jeg man får en ordning på!

En annen ting som gjorde meg usikker også var når jeg ble spurt om webadresse. Mener de min webside eller den jeg foreslår? Dette  er gjennomgående problem på mange gallerier.

Utrolig viktig for oss som jobber innen webdesign

Alt i alt ser siden veldig lovende ut. Jeg gleder meg stort til å følge med på videreføringen av nettsiden og  jeg håper folk vil benytte seg av den! Besøk Webdesignmagasinet med en gang og foreslå gode sider, stem på de du liker som allerede ligger der, og spre det glade budskap videre! Denne siden skal i hvert fall jeg omfavne og benytte meg hyppig av.

PS; Jeg må i samme slengen takke så hjertelig for at jeg ligger ute i galleriet! (stem meg opp dere).

Og det skjønner jeg godt. Jeg er ikke sikker selv. De av dere som leser bloggen min fikk kanskje med dere et innlegg hvor jeg etterlyser forklaringer til hva webdesign er. Jeg fikk inn en del tilbakemeldinger, og folk forklarte hva de la i begrepet webdesign;

Webdesign er utforming og oppsetting av en nettside – Joakim

Joda, det er sant som Joakim sier. Webdesign er utforming og oppsetting av en nettside. Dette er kanskje den vanligste assosiasjonen folk har til webdesign? Men den er litt for enkel.

For meg er god webdesign kunst. Webdesign er innramming av innhold. Webdesign er identifikasjon av sidens eier. – Åsmund

Jeg liker denne! Å begynne å diskutere hvorvidt webdesign er kunst er egentlig en håpløs debatt, fordi kunst i dag kan pr definisjon være alt, og dermed ingenting. Men om ikke webdesign er kunst så er det i alle fall en kunst å beherske! Design uten mening og funksjon er pynt, design handler også om funksjonalitet. Hvor mange ganger har du ikke kjøpt noe som ser kult ut men som ikke fungerer slik du ønsker?

Arbeid i Photoshop er etter min mening grafisk design, ikke webdesign. – Henrik

Henrik er inne på noe her. Dette er kanskje en av de største misforståelsene man har om webdesign. Jobben er ikke gjort når skissene er ferdig i Photoshop! Henrik er også inne på noe viktig når han nevner programmering og SEO;

En flink webdesigner trenger ikke nødvendigvis å kunne programmere, men kjenne til fordeler og ulemper med de forskjellige tilnærmingene til webutvikling og hva det har å si for resultatet. I tillegg bør personen kjenne til de fleste store CMS og hva de er i stand til. Det er ingen grunn til å finne opp hjulet på nytt. – Henrik

Okei, så med en liten oppsumering kan vi si at webdesign ikke bare dreier seg om å sette opp en webside (gjennom (X)HTML, CSS og Photoshop), men også vite en del om CMS og SEO, samt ha kjennskap til koding og programmering. Nå nærmer vi oss arbeidsoppgavene til en webdesigner, og en typisk dag på kontoret for meg!

Så hva er en vanlig dag på kontoret?

Godt spørsmål. Det varierer, det er pr i dag ikke et avgrenset arbeidsområde. Søker du jobb som webdesigner kan få jobben med å lage flashannonser i en lokalavis, eller du kan få jobben med å kode valid html/css  fra 9 til 4. Men jeg kan si hva jeg føler meg forpliktet til å gjøre når jeg gjør jobben min (og her kan det hende noen blir en smule overrasket over hvor mange arbeidsoppgaver det er snakk om);

Analysering og planlegging

En viktig del av jobben min er å bli kjent med kunden, og kundens kunder for å best mulig tilpasse websiden til ønsket målgruppe. Her kreves det en god del samtaler og møter med kunden, analysering og planlegging før de første skissene kan starte.

Skisser

Her jobber jeg først på papir (stikkord, tankekart, enkle skisser av oppsett), deretter begynner jeg å sette opp en skisse i Photoshop. Det er antageligvis denne fasen mange ser for seg en webdesigner koser seg med, men dette er bare en del av prosessen. Som regel gjør man flere skisser hvor man hele tiden har en dialog med kunden/oppdragsgiver. Her jobbes det med fargepalett, typografi, oppsett gjennom grids eller andre “matematiske” løsninger, grafikk, og noen ganger logo. I tillegg må man mange ganger hente inn/kjøpe inn grafikk, bilder og ikoner mm som trengs.

Koding

Når skissene er klare skal dette konverteres til en webside, og det gjør man gjennom å dele opp skissen i mindre biter (jeg klipper ofte ut logo/header, knapper, bakgrunn og andre grafiske biter). Deretter setter man opp en reell testside i (X)HTML, CSS. I (X)HTML putter man innhold, i CSS putter man design og stil. I tillegg legger man gjerne til javascript, flash og andre ting man trenger for å oppnå ønskede effekter og funksjoner.

Implementering

Nå gjelder det å få websiden ut på nett, og det gjør man ofte gjennom en back-end løsning. Kan man for eksempel ikke php, ruby ol gjelder det å få tak i en ferdig løsning, som feks WordPress, som jeg jobber med. Jeg trenger og innstallere WordPress, og deretter legger jeg ut designet mitt. Det går gjerne litt tid med til å lime inn de forskjellige elementene inn i php’en, og mye tid til å få alle funksjoner på plass, dette kalles implementering.

Siste finpuss

Når design og funksjon har smeltet sammen gjelder det å teste siden, validere den (retningslinjer for webdesign), og sjekke brukervennlighet osv. Ideen er at websiden skal fungere for alle brukere uavhengig av operativsystem, nettleser, skjermoppløsning osv, og her er det mange hensyn å ta.

Ikke alle gjør som meg, men dette er en mulig fremgangsmåte, og det sier litt om hvor mye jobb det er å “sette opp en webside”. Så hva er webdesign?

1. Webdesign er å forstå internett
2. Webdesign er å forstå kunden
3. Webdesign er å forstå kundens kunder, målgruppen
4. I motsetning til det mange tror er ikke god webdesign avhenging av god grafikk, men god typografi og arkitektur, og kunnskap om hvordan dette vises og oppfattes hos forskjellige brukere.

Hvordan oversette til familie og venner?

En webdesigner jobber med å gjøre det mulig for kunden å kommunisere på best mulig måte med sin målgruppe gjennom en webside, som man hjelper til med å sette opp, og designe.

Webdesign er å strukturere og presentere innhold på internett, og gjøre innholdet tilgjengelig og likt for flest mulige brukere.

Har dere bedre forslag? Antageligvis. Si din mening.

Topp 10

AdaptD

Authentic Style

Barack Obama

Du kan si hva du vil om den kommende presidenten, men han vant en overlegen seier på nett med en ubermoderne web 2.0 side fullstappet av sosiale duppedingser. Men mest av alt var det en inspirerende side og designet er noe av det nydeligste jeg noen gang har sett!

Jason Santa Mariaz

En av de mest gjennomførte websidene jeg noen gang har sett. Nytt stilark til hver artikkel og et utrolig ryddig arkiv. Typografi i særklasse.

Jeff Sarmiento

Nydelig design, du får bare lyst til å være der inne i timesvis.

Red and Blue

Ikke ofte jeg faller for flash, men denne er innovativ og retro på samme tid.

Starbucks Coffee At Home

Årets beste flash? Det syns jeg i hvert fall. Nydelig design og artige detaljer (se bare på restene som blir igjen hver gang noe viskes ut på tavla).

Studio 7 Designs

Take the walk

Web Design Ledger

Artig oppsett og jeg liker godt kommentarene som er satt i midten av oppsettet. Nydelig bruk av padding/luft.

Noen norske

Endel nordmenn har helt eller delvis stått bak noen av websidene som har fått mye skryt i år. Her er noen av dem.

Berit Sømme

Hyper Island

Morsomt design med geografisk tilhørighet (kan man si det?). Farlig nærme topp 10 lista mi.

Apilot

Divensis

Min personlige favoritt. Så enkel, så genialt!

Noen som er verdt å ta en titt på

Det er mange andre sider i år jeg har latt meg inspirere av. Her er noen av dem.

• Let It Bleed
• Bird Malaysia
• Carbonica
• Don’t trust this guy
• Made By Elephant
• Silverback
• Toucouleur
• Viget Labs

Carbonica

Dette er sketch design på sitt beste, og siden har et organisk preg over seg. Fargene er som tatt fra naturen med teksturer og farger i beige- og grønnnyanser. Hva som får siden til å funke? Nøye utførte og geniale hover effekter, nydelige teksturer i myke farger, “håndlaget” typografi i overskrifter og kun flash elementer i små doser. Nydelig!

CSS-Ninjas

En innbydende side som glimrer med god bruk av ikoner og grafikk, god fargebruk (blått og grønt er bestandig en sikker vinner). I tillegg til et flott design er det innholdsmessig rent og ryddig presentert (sjekk feks faktasiden) og websiden rett og slett selger budskapet!

Mia & Maggie

Foruten nydelige varme farger fungerer navigasjonen spesielt godt på denne siden.

Styl Srvc

Nydelige bruk av blå og grå nyanser, typografi, kreativ struktur, samt ganske heftig bruk av javascript.

Think-Design

Jeg elsker skinnbruken og grønnfargen og treverket passer perfekt inn. Bloggen har også en utrolig struktur. Om det var noe å utsette på designet måtte det være logobakgrunnen som dessverre ikke passer inn med bakgrunnen. Men absolutt en innovativ side og en av de beste sidene jeg har sett i år!

Stikk innom Holte Design for å se selv. Legg gjerne igjen en kommentar om i forhold til hva du syns.