På en skærm kan man bruge en lang række subtile farvenuancer og farveforløb, som man ikke ser i  traditionelt logo design. Der skal ikke tages hensyn til, at et logo skal kunne faxes, fotokopieres eller trykkes i den lokale avis.

Web 2.0 bølgen er ved at have en del år på bagen. Og der er store forskelle et logo, der er designet først i perioden, og de logoer, der er blevet designet sidst i perioden. Men samtidig er der også mange fællestræk ved mange af periodens logoer.

Nogle typiske web 2.0 logo kendetegn:

• Simpel logotype
• Neutrale sans serif font
• Stærke klare farver
• Subtile farveforskelle og farveforløb, ofte brugt til glaseffekter eller spejlinger.

De første web 2.0 logoer

I den tidlige del af web 2.0 bølgen indeholdt logoerne ofte en neutral logotype. I mange tilfælde bestod logoet udelukkende af denne simple logotype. Udviklerne af de første web 2.0 tjenester var typisk programmører og fokus var på funktionalitet frem for design.

Digg er en af de ældre web 2.0 teknologier. Den startede tilbage i 2004. Digg’s logo er et godt eksempel på et tidligt web 2.0 logo baseret på logotype. Typografien er en firkantet sans serif font, der signalerer teknologi og funktionalitet.

Kort efter dukkede YouTube op på web 2.0 scenen. Deres logo var i starten noget større og virkede lidt mere klodset, men udfomningen var identisk med det vi kender i dag. Logotypen er en simpel og meget neutral sans serif font. YouTube har dog peppet logoet op ved at tilføje en rød afrundet rektangel (symboliserer en skærm) til deres logo.   Skærmen har fået tilføjet en svag gradient, der giver den et lidt plastikagtigt feel. En forløber for de senere så populære glaseffekter på web 2.0.

Picasa er fra 2004 og logoet udskiller sig fra mange af de samtidige logo’er ved også at have et traditonelt symbolistisk logo sammen med logotypen. Selve logotypen er typisk for perioden. En neutral Sans Serif. Logoet fik en opstramning i 2005, hvor fonten blev skiftet ud til en anden sans serif med noget mere karakteristiske a’er.

Et andet web 2.0 kendetegn er de klare farver i den symboliserede blændeåbning.

De senere Web 2.0 logo

Efter den allerførste web 2.0 bølge begyndte web 2.0 bølgen at udvikle sine helt egne designtrends. I starten blev der ironisk refereret til web 2.0 som værende identisk med grønne glasknapper. Og rent designmæssigt var det ikke skudt helt ved siden af. Den righoldighed og avancerethed man oplevede i de moderne web 2.0 webapplikationer begyndte også at afspejle sig i designet. Det blev leget med gradienter og farveforløb, og både stærke farver og sarte nuancer. Det lidt hårde tekniske udtryk er blevet afløst af en mere organisk og levende stil.

På dette mailbigfile logo fra 2006 ses flere af periodens karakteristika.  Glaseffekten er iøjnefaldende, og det samme er det utraditionelle farvevalg for et logo. Fonten er en moderne sans serif, men i modsætning til mange af de tidligere web 2.0 logoer, er fonten afrundet og organisk. Og det organiske udtryk bliver yderligere forstærket af det hvide omrids på logotypen.

Twitter logoet fra 2007 har mange af de samme web 2.0 kendetegn . Igen sammme organiske udtryk i logotypen som mailbigfile logoet. Nuancerne er tilgengæld lidt mere sarte, og farveforløbet er ganske subtilt. I dag har twitter helt fjernet farveforløbet fra deres logo, og farven på logotypen er blevet mere blå.

Som et sidste eksempel har jeg valgt et logo fra wipbox. Wipbox er en nyere web 2.0 tjeneste fra 2007.  Logoet skiller sig meget ud fra de andre logo’er vi har kigget på, men indeholder alligevel mange web 2.0 karakteristika.

Logotypen er en kursiv serif skrift, så udtrykket er stadig meget organisk i stil med de andre nyere web 2.0 logoer. Logoet har en anelse glaseffekt ved at det er delt i 2 nuancer af grøn. Og endelig har logo’et en spejleffekt, der også er ganske typisk for web 2.0 logo’er.

Flere Web 2.0 logoer og Web 2.0 design

Her er en række ressourcer, hvor du kan skaffe dig et overblik over mange flere web 2.0 logoer, og andet typisk web 2.0 webdesign.

Web 2.0 logo showcases er et site der samler på web 2.0 logo’er

Flere Web 2.0 logoer fra et web 2.0 site. Linket er til deres logo samling.

Web 2.0. Design guide er en lidt ældre artikel, der beskriver en række design karakteristka ved web 2.0. Blandt andet også logo design.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Grunge har været populært inden for design en godt stykke tid. Og grunge fortsætter tilsyneladende med at være moderne og trendy.

Især inden for de kreative områder som f.eks. musik, film og design er grunge vidt udbredt, og det er også ofte inden for disse områder at den mest rå, beskidte og rendyrkede grunge designs findes. Men diskrete grunge effekter er også blevet mainstream, og bruges i mange webdesign.

I denne artikel har jeg samlet alle mine bedste grunge ressuorcer.

Grunge tutorials

Her kan du finde en lang række grunge tutorials. De fleste tutorials er for Photoshop, men der er også enkelte Illustrator tutorials i mellem.

50 beskidte grunge effekter

40 fede grunge tutorials

Og endelig  en række række retro og vintage tutorials, hvor der også er masser af grunge inspiration at hente. Især i form af rå papireffekter og afrevne kanter.

35 vintage og retro tutorials

Flere tutorials linker til andre grunge ressourcer, som f.eks. grunge fonte og grunge teksturer, som er relevante for tutorialens emne.

Grunge fonte

Hvis du ikke gider at lave dine egne grunge effekter på teksten eller hvis du søger inspiration, kan det være en god idé at downloade nogle deciderede grunge skrifttyper.

Her er tre fede artikler der henviser til et par hundrede gratis grunge fonte.

100 gratis grunge fonte

63 gratis grunge fonte

30 ekstra grunge fonte

Grunge Brushes

En god grunge brush kan gøre hele forskellen på dit design. Ikke alle brushene er deciderede grunge brushes, men der findes masser af fede grunge brushes i mellem dem.:

500+ grunge, vintage og retro Photoshop brushes

250 splatter, spray og grunge Photoshop brushes

30 højkvalitets grunge brushes til Photoshop

Hvis du vil lave dine egne Photoshop brushes kan du her finde en tutorialder viser hvordan du gør.

Lav dine egne grunge brushes til Photoshop

Sådan roterer du din Grunge Brush i Photoshop

Når man arbejder med grunge brushes, har man ofte brug for at kunne rotere sin Photoshop brush frit. Her er et hurtigt tip til, hvordan du let roterer dine Photoshop brush.

Grunge teksturer

Teksturer er ofte vigtige for at skabe et tilfældigt , slidt og beskidt look i grunge design.

Grunge teksturer fra Texture King. Masser af beton, rust og andre grunge teksturer

Grunge teksturer fra Urban Dirt. Urban Dirt er et rendyrket grunge site med masser af beskidte grunge teksturer.

Blandede grunge ressourcer

I denne artikel kan du finde lidt af det hele. Den lægger ud med en masser eksempler på, hvordan man kan bruge grunge i webdesign, men derudover henvises også til grunge ikoner, tutorials, teksturer og grunge skrifttyper.

Grunge design inspiration og ressourcer

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Jeg har fotograferet i over 25 år. De sidste 6 digitalt. Nu har jeg har endelig taget sammen, og samlet de bedste billeder fra de digitale år i et dansk fotogalleri.

Billeder fra Danmark

Danske Billeder

“Billeder fra Danmark” indeholder ikke udelukkende danske billeder. Men hovedparten er fotograferet på ture rundt om i danmark og det danske landskab. Og har altid taget mange landsskabsbilleder fra Danmark

Overvejelser om design

Designet af galleriet er minimalistisk for at ikke tage fokus fra fotografierne.

Jeg har valgt sort for at give en rolig baggrund. Desuden er sort en god farve til at understøtte fotografiets egne farver.

Et par hvide vandrette linier holder siden samlet, og tekster og menuer er holdt i hvid og grå.

Overvejelser om funktionalitet

Navigationen skal være enkel og overskuelig. Derfor er den baseret på links til at vælge galleri og thumbnail til at vælge fotografi.

Jeg har fravalgt nogle af de nye JavaScript libraries, der kan lave forskellige smarte galleri funktioner. Jeg kan ellers godt lide mange af de moderne funktioner, men det mindsker overskueligheden, og gør navigation mindre intuitiv.

På ønske fra en par testere har jeg tilføjet et næste/forrige link, så man kan bladre i fotografierne i de enkelte gallerier. Denne navigation er lavet med Prototype’s AJAX funktion, der kalder et PHP-script.

Billeder fra Danmark

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Sidst opdateret og linktjekket 30. marts 2009

Der findes mange gode Photoshop tutorials på nettet. Det svære er ofte at få overblik over, hvilken tutorial, der er den bedste.

Jeg har her lavet en samling af de bedste samlinger og dækker over 500 Photoshop tutorials.

Jeg har samlet de forskellige tutorials i kategorier.  Det gør det let at finde  præcis den type Photoshop tutorial, du leder efter.

Tekst i Photoshop

Hvem siger tekst behøver at være kedelig. Disse tutorial samlinger viser masser af trendy tekst effekter. Her chrome tekst, leopard tekst, flamme skrifter, eksploderende tekster og glødende skrift. Og der  vises Photoshop teknikker og tips til layers, blendmodes, masker og afmaskning af tekst.

Kort sagt: masser af fede tekst tutorials:

22 af de bedste Photoshop tekst tutorials

50 fede tekst tutorials

50 kreative Photoshop tekst effekter

30 smukke tekst effekter i Photoshop

Plakater i Photoshop. 25 tutorials

Grunge, vintage og retro tutorials

Grunge, vintage og retro effekter har været moderne i webdesign i en årrække. Sandsynligvis som et modtræk mod de polerede, skinnnende, glossy glaseffekter og spejlinger. Og grunge dukker ofte også op på flere mainstream websites, som ofte benytter mere afdæmpede grunge effekter.

De første tutorials er fyldt med beskidte, slidte og rustikke grunge effekter:

50 møgbeskidte grunge Photoshop tutorials

40 smukke grunge tutorials

Vintage og retro tutorials:

30 retro og vintage Photoshop Tutorials

Photoshop tutorials med forskellige effekter

Disse Photoshop tutorials  byder på masser af fede og specielle effekter.  Fra farverige moderne og trendy web 2.0 effekter som f.eks. flares, røg, regnbuer, gnister og andre lyseffekter.  Over mørke og dystre effekter.  Til specielle og sjove fotoeffekter.

41 Photoshop tutorials med fede effekter 

30 cool Photoshop effekter

40 tutorials med mørke, dystre og futuristiske effekter

Fotomanipulation med Photoshop. 30 tutorials 

45 Photoshop tutorials med sprudlende farver og farverige effekter 

28 Photoshop tutorials til lyseffekter 

40 nye Photoshop tutorials med lys og lyseffekter

31 space og planet tutorials 

50 Photoshop tutorials med himmel og rum effekter

40 Photoshop tutorial til abstrakte baggrunde 

20 tutorials og ressourcer til at lave røg i Photoshop

Tutorials for webdesignere

En række tutorial samlinger specielt henvendt til webdesignere. Tutorialsene viser eksempler på knapper, ikoner, bannere, headere og footere:

20 Photoshop tutorials for webdesignere

31 Praktiskwebdesign tutorials

40 Photoshop tutorials der viser, hvordan man laver ikoner. Fokus i disse tutorials er på moderne, glossy og skinnende web 2.0 ikoner: 

40 Photoshop tutorials til ikoner

Og tilsidst en række Photoshop tutorial’s, der beskæftiger sig med helheden i weddesign og layout. Hvor de ovenstående tutorial’s beskæftiger sig med detaljerne i designet.

35 Photoshop tutorial til website layout

Photoshop tutorials der arbejder med kroppen

Disse Photoshop tutorials, der omhandler mennesker, modeller og deres kroppe viser vejen.

Her er tutorials til at forbedre teint, som f.eks. fjerne rynker, bumser, ar  og  fregner, blege tænder eller lægge make up. Photoshop gør det let at lave glat, blød og lækker hud.

Andre tutorials viser, hvordan man kan ændre kroppen med Photoshop. Det kan være at lave større bryster, trimme lår, hofte og mave.   

50 tutorials der gør dig lækker 

Retouchering af kroppen. 70 Photoshop Tutorial om skønhed

Illustrationer i Photoshop

Disse Photoshop tutorials beskæftiger sig med illustrationer og tegninger i Photoshop. Normalt bruger vi Illustrator til tegninger og illustrationer. Men photohshop har mange gode muligheder for gradienter og farveforløb.

Illustrationer med Photoshop

40 Photoshop tutorial til illustrationer

Begynder Photoshop tutorials

Her er en håndfuld begynder Photoshop tutorials udvlagt af Six Revisions

35 tutorials til begyndere i Photoshop

Og her er det design reviver, der har samlet 20 Photoshop tutorials for begyndere. Se blandt andet sværhedsgrad og tidsforbrug for den enkelte tutorial.

Lær Photohshop på 24 timer

Jeg har gennemført alle 500+ tutorials. Hvad nu?

Hvis du har lyst til at dele dine arbejder, med andre med samme interesser for Photoshop, tutorial, grafik og design, så kig forbi multimedieforum.dk. Her kan du møde ligesindede, som værdsætter dine arbejder.

Vi er også begyndt at lave små grafiske konkurencer som foregår i en afslappet og venlig atmosfære, hvor fokus er samarbejde og udvikling. Redskaberne er f.eks. Photoshop eller Illustrator afhængig af emnet for konkurencen.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Billedet er kørt igennem Photoshop.  Billedet består af en del gentagne lag med hardlight blendmode, for at skabe en overdreven og hård kontrast. Tilsidst er der lagt et dirty grunge murværks-pattern over, hvor der er blendet med multiply og skruet en smule ned for opacity.

Skateboard grungy Ollie

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Webapplikationerne fylder meget i web 2.0 og på Internettet. Der dukker dagligt nye applikationer op på nettet, og brugervenligheden halter ofte bagefter. Derfor opfylder Hoekman’s  “Designing the Obvious” et stort behov.

Jeg har i denne anmeldelse udvalgt et par af Robert Hoekmans hovedpointer, som jeg kort vil ridse op, så du kan et danne dig overblik over bogens indhold.

Kun 20% af funktionerne

Et af Hoekman’s vigtigste budskaber er, at vi skal skrue ned for antallet af funktioner i vores applikationer. Brugerne benytter kun de allermest nødvendige funktioner, og hæver sig meget sjældent op til et ekspert niveau, der gør at de kan udnytte det hele. Derimod er for mange funktioner med til at forvirre den gennemsnitlige bruger, og gør altså mere skade en gavn.

Rådet er at alle “nice to have” funktioner bliver stillet i bero, og man koncentrerer sig om “need to have” funktionerne i den første udvikling. Når de nødvendige funktioner er færdigudviklet, vil flertallet af “nice to have” funktionerne have mistet deres tiltrækning.  Man kan nu med større overblik gennemgå, hvilke af dem der er nødvendige for en vellykket webapplikation.

Budskabet er langt fra nyt, men Hoekman har sin  argumentation på plads, hvilket medfører, at han taler/skriver med stor vægt.

Design til de gennemsnitlige brugere

Mange applikationer er designet til ekspertbrugere. Der er for mange og for indviklede funktioner. Disse er ofte designet af programmører og tekniknørder.

Andre applikationer er designet til begyndere. Disse er typisk designet af brugervenlighedseksperter, der er gået i den modsatte grøft.

Robert Hoekman argumenterer for at vi istedet designer til de gennemsnitlige brugere, da langt det største potentiale ligger her. Hvis brugerne først går igang med vores applikationer er der stor sandsynlighed for at de hurtigt bliver gennemsnitlige brugere.

Så istedet for at designe til begynderen, mener Hoekman, at vi skal arbejde på, at hurtigt få begynderen op på et gennemsnitligt niveau. Det skal ske ved at:

• tilbyde inline instruktioner inde i applikationerne. Altså ikke i form af videoer, tutorials eller wizzards, der foregår i seperate vinduer.
• vise konkrete eksempler.  Igen inde i selve applikationen.
• vælge gode og relevante default værdier, så brugeren slipper for at tage stilling, men kan komme hurtigt igang.

Når brugeren er nået op på et gennemsnitligt niveau, skal begynder-hjælpen fjernes igen. Dels er den nu overflødig og dels vil brugeren opleve at vi taler ned til ham.

“Designing the Obvoius” byder på mange konkrete forslag til at løse helt konkrete problemer indenfor hele dette område.

Øvrigt indhold

Derudover indeholder bogen bla. afsnit om:

• Brugertests og brugerforståelse
• Ensartethed og konsistens
• Understøttelse af brugerens mentale modeller (læs Normans: “Design of everyday things” for en grundig indførsel i brug af mentale modeller i designarbejde)

Konklusion

Det kan være utaknemmeligt, at skulle skrive bøger om brugervenlighed, da man naturligt nok vil holde forfatterens budskab op imod hans stil.

“Designing the Obvious” starter med  for meget tekst, for mange gentagelser af kendt viden og lidt for meget tomgang. Men efterhånden kommer bogen op i tempo, og byder på mange gode pointer og anderledes vinkler på brugervenlighedsarbejdet.

En af bogens styrker er, at den er nyere end mange af de andre bøger om usability, og har sit fokus på brugervenlige applikationer. Mange tidligere usabilitybøger har haft deres fokus på mere traditionelle hjemmesider.

Mange problematikker i brugervenligt webdesign og brugervenligt applikationsdesign er selvfølgelig overlappende. Men når jeg kigger på brugergrænsefladen på nogle nyere tjenester som f.eks. MySpace, Facebook, Flikcr etc kan jeg sagtens se behovet for en bog med fokus på  brugervenlige applikationer.

Derudover indeholder “Designing the Obvious” mange konkrete forslag til løsning af konkrete problemer, og dette er  en anden af bogens styrker.

Alt i alt er “Designing the Obvious”  absolut anbefalelsesværdig. Så hvis du interesserer dig for brugervenlighedsarbejde generelt eller hvis du designer online applikationer, skal bogen bare læses.

Desværre kommer ”Designing the Obvious” ikke op på “Don’t Make me Think” meget høje niveau. Dertil indeholder bogen i visse afsnit for meget snik-snak.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Men hvorfor ikke kigge på, hvilke webdesign, de profesionelle webdesignerne laver, når de skal sælge sig selv. Man må formode at webdesignerne og webbureauerne er ekstra kritiske og omhyggelige med deres egne sider og udnytter al deres viden, og deres bedste kompetencer.

Danske webdesignere

Her er en liste over en række af de danske webdesigneres og webbureauers egne sider:

• http://www.danaweb.dk/
• http://www.scandesigns.dk/
• http://www.adnuvo.com/
• http://www.envision.dk/
• http://www.headnet.dk/
• http://www.decode.dk/
• http://www.idebureauet.dk/
• http://www.mouseketeers.dk/
• http://www.staerk.dk/staerk.htm
• http://www.ultimate-web.dk/
• http://www.clickwork.dk/
• http://www.jayjaywebdesign.com/
• http://www.customweb.dk/referencer.php
• http://www.ineo.dk 
• http://www.vestjyskmarketing.dk/
• http://www.konstellation.dk/
• http://www.co3.dk/
• http://www.mcb.dk/
• http://www.danskinternetselskab.dk/
• http://www.lbicph.com/
• http://www.dwarf.dk/
• http://www.skybrud.dk/
• http://www.creuna.dk/den/
• http://www.guava.dk/
• http://www.thomasfals.dk

Sjovt nok ser det ud som om stilen på forbavsende mange af webdesignernes egne hjemmesider er rimelig afdæmpede. Også mere afdæmpede end de referencer de selv henviser til.  

Er det sådan, at spræl og vilde designs kan være fede for designeren at vise frem, men hvis man også vil sælge noget, må man satse på lidt mere på  troværdighed og forretningsmæssigt udtryk frem for tjubang farver og ramasjang?

Der er dog også bureauer, der giver den fuld skrue. Og nogle af dem er tydeligvis temmelige svære at navigere og finde rundt på.

Oversete webdesignere eller webbureuaer

Listen er generet udfra et par hurtige opslag på google og hukommelse.

Har jeg overset  nogle store aller gode webdesignere eller webbureuaer , som burde være med på sådan en liste, så sig endelig til?

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

I denne artikel fokuserer jeg på brugervenligt layout. Jeg har  jeg samlet de 4 vigtigste principper for brugervenlighed i layout og webdesign. Valget af de 4 principper er 100% subjektivt og er baseret på studier af brugervenlighedseksperter som Jakob Nielsen, Rolf Molich og Steve Krug, krydret med egne erfaringer.

4  principper for brugervenligt layout

I et brugervenligt layout er det vigtigt at: 

• Sørge for tydelige hierarkier
• Dele siden op i tydeligt definerede områder
• Benytte konventioner, der er opstået omkring Internettet
• Minimére støj

Tydelige hierarkier

Med et tydeligt hieraki viser vi, hvad der er vigtigt og mindre vigtigt. Det gør det lettere for brugeren at overskue siden.  Brugeren skal hverken bruge energi på at finde det væsentlige, eller på at afgøre hvad, det væsentlige  er. Han kan gå direkte i gang med at undersøge, om det vi tilbyder, er det han leder efter.

Et tydeligt hierarki vil gøre brugeroplevelsen bedre og mere flydende, og typisk efterlade brugeren med mere energi og fokus til de væsentlige opgaver på siden.

Steve Krug: ”A good visual hierarchy saves us work by preprocssing the page for us, organizing and prioritizing its contents in a way that we can grap almost instantly.”

Hierarkier skaber vi f.eks. med bevidst brug af grafiske og typografiske kontraster. F.eks. størrelseskontrasten, som er den mest åbenlyse. Men også farvekontraster er gode til at skabe hierarkier med.

Kun tydelige kontraster skaber tydelige hierarkier. Brug af subtile kontraster kan være gode til signalere eksklusivitet og seriøsitet, men i forhold til at skabe tydelige hierarkier i et brugervenligt webdesign, er de ikke meget bevendt.

Tydeligt definerede områder

En side bliver mere overskuelig, hvis siden er opdelt i flere mindre og veldefinerede områder. Inden for hvert område anbringer man så beslægtede former for information. I et brugervenligt layout skal vi opdele en sides mange elementer i 4-7 overordnede kategorier.

 7 er et magisk tal i menneskelig perception.  Mennesker er maksimalt i stand til at overskue 7 elementer. Hvis der optræder flere skal vi f.eks. tælle for overskue, hvor mange der er. Det vil sige, at hvis vi arbejder med områder med mere end 7 elementer er det mest brugervenligt at dele op i kategorier. Det er også derfor man anbefaler at menuer max indeholder 7 punkter.

Eyetracking studier viser, at brugerne meget hurtigt bestemmer hvilke sektioner på en webside, der indeholder de brugbare informationer. De øvrige områder bliver ofte ignoreret. Et godt eksempel fra vores hverdag er vores evne til at ignorere bannerreklamer i toppen af en side. Den slags ”ubevidste” valg træffer vi mange af, især hvis siden samtidig følger konventionerne.

Når man skal inddele websiden i tydeligt definerede områder er gestaltlovene  et godt redskab at bruge.

Konventioner på nettet

I det brugervenlige webdesign, er det vigtigt at benytte sig af de konventioner, der findes på nettet. Nogle af de mest udbredte konventioner er:

• Understreget tekst er links
• Vandrette lister i  toppen af sitet og lodrette lister i venstre side er menuer
• Når man klikker på logo/navn kommer man til forsiden
• Kontaktoplysninger kan findes i footeren

Der er måske ikke meget prestige for webdesignere i at følge konventionerne, da layoutet og det grafiske udtryk  kan blive opfattet som kedeligt. Det webdesigneren laver i dag, ligner det han designede i går. Og ofte har kunderne også en forventning om, at professionelle webdesignere skal levere designs, der er anderledes og iøjnefaldende.

Men som brugere er vi som regel glade for traditionelle løsning, da de er lette at afkode. Funktionerne er lette at finde og vi føler os generelt trygge ved et websted med få overraskelser. Den grafiske oplevelse er oftest underordnet for brugeren. Flot grafisk design kan være lækkert, men det væsentligste er, at det ikke står i vejen for brugeroplevelsen på siden. 

Ifølge Jakob Nielsen (http://www.useit.com/alertbox/20040913.html) sikrer brug af konventioner og standarder at brugerne:

• ved hvilke funktioner de kan forvente
• ved hvordan disse funktoner vil se ud på grænsefladen
• ved hvor man kan finde funktionerne på siden og på sitet
• ved hvordan man skal bruge funktionerne for at nå sine mål
• behøver ikke at bruge tid på at gennemskue ukendte designelementer
• overser ikke vigtige funktioner, fordi de ikke ligner standard design elementer

Disse fordele øger brugerens muligheder for at opnå deres mål med besøget. Og det giver dem en fornemmelse af at beherske hjemmesiden og øger dermed deres tilfredshed med websitet.

Minimér støj

Jo flere forskellige elementer, der er på siden, jo højere er risikoen for støj. Støjen kan komme fra flere typer af elementer. Det kan f.eks. dreje sig om:

• Grafisk støj.
  Undgå unødig pynt. Grafik skal have en mening.
• Multimedie-elementer.
  Det kan være musik, flash eller film, der starter op uden brugeren har klikket på dem.
• For mange informationer.
  Der kan simpelt være for mange informationer på for lidt plads. Hvis et website er informationstungt er det vigtig at finde nogle gode overskuelige strukturer. Hvis for meget information bliver præsenteret for brugeren på engang risikere vi, at han mister overblikket. Hvis det ikke er muligt at bortsortere informationer, er det vigtigt at opdele informationerne i kategorier (se ovenfor).
• For mange funktioner.
  Undgå funktioner for funktionernes egen eller din skyld. 

Rolf Molich om brugervenligt webdesign: ”… mine samtaler med typiske brugere viser, at brugere typisk kun udnytter 20-30 % af funktionaliteten. Resten er set fra brugerens synspunkt overflødigt – eller direkte forstyrrende for den enkle betjening og det hurtige overblik.”

Mere om brugervenligt layout

Der findes et hav af ressourcer til mere viden om brugervenligt webdesign. Læs Steve Krugs bog: “Don’t make me think” eller Rolf Molichs: “Brugervenligt webdesign”.

Når man snakker brugervenligt webdesign slipper man selvfølgelig heller ikke uden om Jacob Nielsens alert box.

Min sammenfatning om brugervenligt layout og brugervenligt webdesign stammer fra min hovedopgave om Tilgængelighed på Internettet (pdf 0.7 mb).

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Jeg vil i denne tutorial gennemgå, hvordan man laver en simpel glasknap. Metoden er let at overføre til andre elementer, så du kan bruge den til at lave både glasknapper, glasbjælker og andre glaseffekter.

Når man først forstår og behersker denne simple teknik, er det let at aflure andre og mere avancerede glasteknikker.

Det grundlæggende

1. Start med at oprette en nyt billede på 200*100px. I starten er det godt at lave knappen stor. Det gør det lettere at styre gradienterne, når man øver sig.
2. Opret i alt 5 lag, navngiv dem fra neden af: Baggrund – Glasfarve – Omrids – Genskin – Tekst
3. Vælg laget Glasfarve
4. Knappens form bestemmes. Lav en rektangel selection. Vælg Select – Modify – Smoth.  Sæt Sample Radius til 4px.

Det farvede glas

1. Vælg farve til knappen. Brug en lys nuance til baggrundsfarve og en mørkere til forgrund.
2. Vælg gradient værktøjet. Vælg gradienten Foreground to Background. Hold shift nede (sikrer et 100% lodret farveforløb)  og træk en gradient, så den lyse farve kommer nederst. Den mørke øverst.
3. Læg en dropshaddow på knappen. Pas på den ikke bliver for kraftig. Når man laver glas, er det vigtig at bruge effekterne subtilt. Jeg har brugt en opacity på slagskyggen på 33%

Omridset

1. Vælg laget Omrids
2. Vælg Edit – Stroke. Sæt farven til sort, bredden til 2px, Location til Inside, klik ok
3. Sæt lagets opacity ned til 33%. På den måde vil omridste tage farve fra baggrunden, og hvis du senere vil ændre farve på glasknappen, er det nok at skifte glasfarven.

Genskin i glasset

1. Vælg laget Genskin
2. Vælg Select – Modify – Contract. Vælg 2px.  Selectionen trækker sig sammen med 2 pixels på alle leder.
3. Vælg rektangel selection værktøjet. Hold Alt-tasten nede og træk en selection, så den nederste halvdel af knappen bliver trukket fra selctionen.
4. Vælg gradient værktøjet. Vælg en gradient, der går fra hvid til gennemsigtigt. Træk gradienten ned over selectionen. Det er vigtigt, at trække gradieneten ned til bunden af knappen, altså længere end selctionen. Så får man nemlig en forholdsvis skarp kant midt på knappen, som underbygger illusionen om genskin i glas.

Tekst på knappen

1. Vælg tekst laget
2. Skriv teksten
3. Tilføj en let slagskygge, for at opnå en illusion af en skygge ned i det underliggende glas. Jeg har valgt en opacity på dropshaddow på 50% 

Du er nu færdig. Bemærk at kun laget “glasfarve” indeholder farve, så hvis du vil ændre farven på knappen, er det nok at ændre farven på dette lag.  

Glasknapper videre

Én udviklingsmulighed er at lægge en hvid til gennemsigtig rund gradient ind på midten af knappen. Det giver en illusion af at knappen er gennemskinnelig, men er bedst egnet til runde knapper.

Pointen er, at når man først kender den basale teknik, er det let at finde inspiration til nye og mere subtile effekter. Glasknapper, barer og ande glas effekter flyder alle steder på nettet. Det er bare at åbne øjnene, og lade sig inspirerer.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Steven Krug’s bog om brugervenlighed blev udgivet for mange år siden og derfor er denne boganmeldelse meget forældet. Men bogen er kommet  i anden udgave i 2006, og jeg har først nu fået fat i den.

Bogen er kort, velskrevet og meget velargumenteret. Steven Krug er uhøjtidelig i sin stil og nede på jorden. Selv om der er mange overvejelser at gøre i forhold til brugervenlighed og usability, formår Krug at overbevise om, at man ved at følge nogle ganske få og overskuelige regler, kan komme endog meget langt. 

Don’t make me think

Steven Krug lægger hårdt ud i første kapitel, hvor han lancerer sin vigtigste lov om brugervenlighed: “Don’t make me think“. Vores brugere ikke skal brug tid og energi på at tænke over ligegyldige ting omkring f.eks. søgning, navigation og brug af siden generelt.

Min første AHA-oplevelse.  Jeg havde et menupunkt på min side, der hed “Quicklinks”, som var genveje til nogle af mine informationer. Med Krug i baghovedet rettede jeg det straks til “Genveje”.

Vi læser ikke. Vi scanner

Næste kapitel.  Vi læser ikke websider, vi scanner dem. Og ofte bare klikker på det første link, der bare ligner noget af det , som vi er på jagt efter. Resultetet er selvfølgelig at vi skal fjerne ord og tekst, og istedet skabe klare hierakier, der kan lede vores brugere hen til det de leder efter.  

Igen måtte jeg tilbage til min side. Teksterne på forsiden blev forkortet. Mine mest besøgte links gjorde jeg fede, så mine brugere hurtigere kunne se dem.

Navigation og søgning

Så fulgte et par store afsnit om navigation, formål med siden og søgning. Meget store emner med mange overvejelser bag. Men igen præsenteret med overbevisning og skåret ned til nogle få logiske retningslinier, det er let at følge.

Jeg måtte igen tilbage til min side. Denne gang skulle søgefeltet gives en mere tydelig placering. Og jeg tilføjede en tagline (“NielsGamborg.dk – Teoretisk webdesign og Praktisk programmering”), så mine besøgende i første øjekast kunne se, hvad jeg havde at tilbyde. “Don’t make me think”

Lån den – Køb den – Stjæl den

Jeg kan kun tilslutte mig skaren af begejstrede fans. Læs den før din nabo.

Steven krugs hjemmeside

Video interview om brugervenlighed med Steven Krug

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.