Designa för webb 2.0.1

lördag den 22 november 2008 fem kommentarer

Det börjar bli tjatigt att höra uttrycket Webb 2.0. Utöver nya tekniker med CSS och JavaScript har designen av användargränssnitt (webbdesign) tagit ett stort kliv framåt.

Om du är ny eller dåligt uppdaterad, hjälper den här guiden dig att komma igång med modern webbdesign. Interaktiv webb och AJAX? Tyvärr kommer jag i den här guiden bara fokusera på den grafiska aspekten.

Enkel design

Det omtalade designyttrycket "Less is more" är verkligen något att ta efter inom modern webbdesign. Använd bara de designelement som fyller någon funktion, resten får inte vara med.

Tydligt separerat innehåll

Låt din design andas med hjälp av marginaler och rymd. Gruppera innehåll som hör ihop, och separera sedan dessa grupper tydligt från varandra med mellanrum.

Stor text

Tack och lov är pixeltypsnitten nästan ett minne blott, idag är det en fördel att använda en rubrik med 28 px (pixlar) i textstorlek. Att tydligt skilja rubriker, underrubriker och vanlig text i storlek och typ hjälper såväl dina användare som sökmotorerna att urskilja intressant innehåll på din webbplats.

Gradient

Gradient

Toningar eller gradient kan tillföra mycket till en design, om de används på rätt sätt. De kan skapa djup i en platt design eller ge en kraftfull effekt på element, text och logotyper.

Centrerad layout

Att centrera innehåll på en datorskärm är ofta en optimal lösning när man vill förmedla information, detta gäller även på webben.

Färre kolumner

Med större rubriker och separerat innehåll är det svårt att få plats med 14 kolumner. Enkel design ger mindre layout och möjliggör större frihet i innehållet.

Separat sidhuvud

Genom att tydligt separera sidhuvudet med färg och/eller form hjälper du dina användare att enkelt urskilja det viktiga, innehållet.

Enkel navigering

Apples navigering

Utan en enkel navigering på din webbplats kan användare lämna din webbplats på några få sekunder. Var inte för kreativ vid design av navigeringsmenyer och markera tydligt var användaren befinner sig.

Tydlig och enkel logotyp

Vem är du? Den frågan besvaras snabbast genom en tydlig logotyp.

Starka färger

Ofta används neutrala färger i kombination med en eller två starka färger för att ge karaktär till en design med koppling till ett varumärke.

Texturer

I bakgrunder eller element kan texturer som liknar trä, betong, papper eller tyg användas för att följa ett koncept eller ge designen ett djup. Men se upp, det kan lätt gå över styr.

Reflektioner

Skapa djup i din logotyp eller objekt med reflektioner. Nyckeln till reflektioner är att använda en låg opacitet och alternativt i kombination med oskärpa, vilket gör den mer realistisk.

Blankpolerade ikoner

Gradient

De blanka ikonerna är ett signum inom modern webbdesign. Men de kräver en enkel och ren grunddesign för att komma till sin rätt. De kan lätt ses som kladdiga om placerade i en redan komplex och färgstark design.

Grå text

Att inte ha en helsvart (#000) text mot en vit (#fff) bakgrund ger en något mjukare kontrast, vilket uppskattas av många användare. Var dock försiktig med att välja en allt för ljus textfärg (låg kontrast), detta kan skapa fina textblock men vara nästintill omöjliga att läsa.

Tack för att du tog dig igenom den här guiden och jag hoppas den hjälper dig i ditt nästa projekt. Har jag missat något som utmärker webbdesign version 2.0?


Jag hoppas du gillade inlägget!

Facebook Delicious RSS Du kan prenumerera på alla inlägg via RSS, e-post eller genom att följa mig på Bloggy.


Kommentarer

Gravatar

Antonio Riveras sa..

lördag den 22 november 2008

Bra skrivet. Fler måste förstå att det är enkelhet som gör en webbplats bra och framgångsrik.

Gravatar

Andreas sa..

söndag den 23 november 2008

Tror Information Architects rekommenderar #333 mot #fff som benchmark, de skrev en sjukt bra artikel angående text på webben: http://informationarchitects.jp/100e2r/

Gravatar

Niklas sa..

måndag den 1 december 2008

Less is more! :)

Gravatar

Andreas Karlsson sa..

söndag den 7 december 2008

"Tack och lov är pixeltypsnitten nästan ett minne blott, idag är det en fördel att använda en rubrik med 28 px (pixlar) i textstorlek."
Har du lust att vidareutveckla denna bit?

Gravatar

sandra sa..

söndag den 7 juni 2009

Hej!

Jag undrar om du har nån bra internetkälla till förklaringen av webb 2.0 grafiska aspekter. Jag behöver nämligen en källa för mitt examensarbete. Helst någon artikel som går att finna som skriver om de aspekter du nu skriver om, en omtalad eller trovärdig källa inom webb 2.0. Har du nått tips?


RSS Lämna en kommentar du också!

Namn: *

E-postadress: (alternativ för att visa din Gravatar)

Webbplats: (självklart får du en länk utan nofollow)

Kommentar: * (ej HTML)