I dybden: layout

Layout No Comments »

Når man laver et layout er der fire hoved principper man skal have for øje. De principper er nærhed, justering, gentagelse og kontrast. Jeg vil i løbet af denne artikel komme ind på deres betydning i forhold til hinanden. Et godt hjemmeside layout handler i høj grad om at give læseren en bestemt oplevelse. Det handler med andre ord om at lede læserens øjne i den retning vores vi ønsker.
Hvis vi vil sælge et bestemt produkt er vi nødt til at gøre brugeren opmærksom på det sted på hjemmesiden hvor vi rent faktisk sælger det produkt.

Nærhed er et spørgsmål om at gruppere elementerne i vores layout logisk. Det er vigtigt at sørge for en sammenhæng mellem de elementer på siden der hører sammen. På hjemmesider sker det meget naturligt. Husk på at et web site er et medie i sig selv. Det kan ikke sammenlignes med aviser, brochurer, plakater eller andre medier. Den naturlige opdeling af sider på internettet vil tit være en titel, kolonner til navigation og indhold, samt evt. en footer i bunden af sitet. Det betyder at sidens elementer i forvejen vil være samlet i logiske enheder.

Hvor nærheden skaber en naturlig logisk sammenhæng mellem elementer sørger justeringen for at give sitet som helhed en sammenhæng. Det er derfor utroligt vigtigt at kigge efter de usynlige linier mellem elementerne. Ligesom der også er vigtigt at være meget bevidst om teksternes justering. Hold generelt den samme justering sitet igennem. Det er i orden eventuelt at centrere titlens justering, men lad for dine læseres skyld være med at centrere brødteksten.

Gentagelse giver den besøgende en større tryghed. Hun vil føle sig tryg ved at hun ikke er kommet til at bevæge sig uden for dit site. Det er samtidig også med til at forstærke dit brand. Gentagelse handler om skrifttyper, former og farver. Sørg for at der er en god ensartethed. Sammen med de to foregående principper vil det give dig et godt og sammenhængende layout.

Kontrasten bruger vi til at lede vores potentielle kunder i den rigtige retning. Endnu vigtigere er det dog at vi fanger kundens blik, hvis vi ikke er i stand til det vil vi helt sikkert ikke få solgt nogle af vores produkter. Det gælder om ikke at være bange af sig. Dit layout vil ikke tage skade af det så der er ingen grund til at være en forsigtigper.

Det er i virkeligheden ikke så meget der skal til. Fire principper vil sikre at du laver et bedre layout af dit web site. Det vil ikke i sig selv gøre dig til en superdesigner, men det vil sikre at du ikke ryger i de mest almindelige faldgruber.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • bodytext
  • Bumpzee
  • del.icio.us
  • Facebook
  • Furl
  • Mixx
  • NewsVine
  • Reddit
  • StumbleUpon
  • YahooMyWeb
  • Google

I dybden: kontrast

Layout No Comments »

De andre 3 principper for layout har drejet sig meget om at få designet til at se pænt og sammenhængende ud. Kontrast er lidt anderledes. Kontrast drejer sig i særdeleshed om at skille sig ud fra de andre elementer på siden. Blikfang om du vil.

Vi vil gerne skabe kontrast for at lede læserens øjne derhen hvor vi ønsker, men kontrast handler sådan set ikke om at bryde med de andre 3 principper. Det er et spørgsmål om at styre læsningen af vores layout. Samtidig er det også et spørgsmål om i det hele taget at få læseren til at læse vores layout.

Det gælder om at være lidt modig. Hvis man skal skabe kontrast skal man gøre det ordentligt.

På nettet vil det være oplagt at bruge kontrast til overskrifterne for rigtigt at fange opmærksomheden.

Husk at kontrast handler om farver, former, tyngde og og retninger. En lodret streg danner for eksempel kontrast til vandret tekst. Der er mange måder at skabe kontrast på. Brug det til at lede læserens opmærksomhed og hold dig ikke tilbage de steder du vælger at bruge det.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • bodytext
  • Bumpzee
  • del.icio.us
  • Facebook
  • Furl
  • Mixx
  • NewsVine
  • Reddit
  • StumbleUpon
  • YahooMyWeb
  • Google

I Dybden: Gentagelse

Layout No Comments »

Dette er det tredie af de fire principper om godt design og klart det vigtigste når det gælder webdesign. På hjemmesider bruger vi naturligt gentagelse. Vi har det samme banner på hver side, vi har navigationen det samme sted, vi bruger den samme skrifttype på alle sider osv.

Det kan ikke siges tydeligt nok hvor vigtigt gentagelse er på nettet. Nettet er et miljø hvor læseren konstant kun er et enkelt klik fra at forlade din side. Vi vil gerne beholde læseren på siden så længe som muligt. Derfor er det vigtigt at give læseren den fornemmelse af tryghed det er at vide at det er den samme side han er på når han navigerer rundt på dit site. Den fornemmelse giver vi læseren ved hjælp af gentagelse.

Gentagne Elementer

Jeg har i forvejen nævnt banner, navigation og skrifttype. I den forbindelse er det selvfølgelig også vigtigt at bruge det samme farvetema på siderne. Hvis du har nogle sjove grafiske elementer på dit site, f.eks. dit logo kan du også gentage det, men pas på ikke at overdrive. Gentagelse kan også blive irriterende.

Skil Dig Ud

Gentagelse er som sagt vigtigt. Derfor kan det en gang i mellem være en god idé at lade et element skille sig markant ud fra resten af sitet. Især hvis det er et element du virkelig vil have at læseren skal være opmærksom på.

Eksperimenter gerne, men sørg for at læseren aldrig er i tvivl om at det stadig er dit site der bliver læst.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • bodytext
  • Bumpzee
  • del.icio.us
  • Facebook
  • Furl
  • Mixx
  • NewsVine
  • Reddit
  • StumbleUpon
  • YahooMyWeb
  • Google

I Dybden: Justering

Layout No Comments »

Justering af elementer på vores site har en stor betydning for hvordan det vil blive opfattet af andre. Det er vigtigt at sørge for at et element altid har en visuel linie til et andet element. På websites kan det være svært, især når vi har at gøre med sites der har en fleksibel størrelse.

Prøv at se det her eksempel:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed diam magna, faucibus ut, accumsan quis, scelerisque ac, magna. Suspendisse a quam in massa placerat tempus. Fusce condimentum, elit a ornare imperdiet, augue sem facilisis enim, id tincidunt quam magna id orci. Donec mollis sapien vel urna lobortis facilisis. Nulla diam dui, adipiscing et, laoreet a, pellentesque eu, lorem. Nullam rhoncus ante ac metus. Aliquam aliquam lorem a augue. Cras erat pede, bibendum vitae, tristique eu, tincidunt ut, ipsum. Cras imperdiet, nulla et fringilla bibendum, eros quam auctor mi, viverra porta nulla metus id sapien. Ut vel arcu id diam tincidunt fringilla. Phasellus quis pede. Aliquam vel libero. Aenean ut nibh ut ligula lobortis hendrerit. Nullam posuere congue dolor. Maecenas dolor.

Det har en centreret justering, der kommer til at se meget rodet ud fordi linierne er næsten lige lange. Nedenunder har jeg justeret det til venstre ligesom resten af teksten.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed diam magna, faucibus ut, accumsan quis, scelerisque ac, magna. Suspendisse a quam in massa placerat tempus. Fusce condimentum, elit a ornare imperdiet, augue sem facilisis enim, id tincidunt quam magna id orci. Donec mollis sapien vel urna lobortis facilisis. Nulla diam dui, adipiscing et, laoreet a, pellentesque eu, lorem. Nullam rhoncus ante ac metus. Aliquam aliquam lorem a augue. Cras erat pede, bibendum vitae, tristique eu, tincidunt ut, ipsum. Cras imperdiet, nulla et fringilla bibendum, eros quam auctor mi, viverra porta nulla metus id sapien. Ut vel arcu id diam tincidunt fringilla. Phasellus quis pede. Aliquam vel libero. Aenean ut nibh ut ligula lobortis hendrerit. Nullam posuere congue dolor. Maecenas dolor.

Nu har det en sammenhæng med resten af teksten. Det ser pænere og mere ordentligt ud. Vores øjne kan godt lide orden derfor er det en god ide at prøve at undgå især en centreret justering.

Hold Linierne

Der er tidspunkter hvor man fint kan bruge centreret tekst, det skal selvfølgelig bare ikke være hele afsnit som ovenfor. Men på forsider af f.eks bryllupsinvitationer, der er rimelig formelle begivenheder fungerer det fint.

En blog som den her og de fleste andre websites er derimod ikke særlig formelle. Derfor er det bedst at holde sig fra centrerede elementer. Prøv i stedet for at skabe en line mellem dine elementer. Nu er det ikke sådan at alle elementer skal være forbundet med hinanden, men sørg altid for at et element er forbundet med mindst ét andet element på dit site.

Kan du finde et element på det her site der ikke har en lige linie til et andet? Jeg tænker selvfølgelig ikke på den centrerede tekst i eksemplet.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • bodytext
  • Bumpzee
  • del.icio.us
  • Facebook
  • Furl
  • Mixx
  • NewsVine
  • Reddit
  • StumbleUpon
  • YahooMyWeb
  • Google

I Dybden: Nærhedsprincippet

Layout No Comments »

Nærhed er med til at binde elementerne i dit layout sammen. På websites ser vi tit at navigation er grupperet som en logisk enhed og inhold er grupperet som en anden logisk enhed. Det er netop det nærhedsprincippet handler om.

Indkøbssedlen Som Eksempel

Når vi skriver en indkøbsseddel bliver de varer vi mangler skrevet ned i den rækkefølge vi kommer i tanke om dem. Jeg er ofte kommet hjem fra Bilka uden at få det hele med. Ofte har det været fordi tingene ikke har været grupperet ordentligt (og selvfølgelig også fordi jeg har været lidt glemsom). Jeg har tit tænkt på at det ville være en fordel hvis varerne var grupperet i kategorier (mejeriprodukter, pålæg, grøntsager osv.). Prøv at se på denne her liste.

mælk
kylling
agurker
knækbrød
tomater
oksekød

Hvis jeg skal følge listen vil jeg først komme hen til mejeriprodukterne, derefter kølediskene med kød, grøntsagsafdelingen, brødhylderne, grøntsagsafdelingen og til sidst kølediskene med kød igen. Det gode ved denne her liste er at jeg for en masse motion, men det er også en anelse uoverskueligt. Lad os prøve at lave den lidt om efter nærhedsprincippet.

Mejeriprodukter
mælk
ost
parmesan ost
youghurt
kernemælk

Kød
kylling
oksekød

Grøntsager
agurker
tomater
løg
kartofler

Brød
knækbrød
rugbrød
toast

Selvom der er over dobbelt så mange ting på den nye liste er den mere overskuelig. Selv jeg vil ikke glemme at få noget af det med hjem fordi det nu står fint grupperet i logiske enheder. Nærhed handler nemlig ikke kun om at sætte sidens elementer tæt på hinanden. Det handler også om at sætte de ting der ikke har noget med hinanden at gøre forskellige steder så man nemt kan se forskellene på dem.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • bodytext
  • Bumpzee
  • del.icio.us
  • Facebook
  • Furl
  • Mixx
  • NewsVine
  • Reddit
  • StumbleUpon
  • YahooMyWeb
  • Google
WP Theme & Icons by N.Design Studio | SEO | Silver Cross Jewelry | Online Marketplace | B2B | Blogging | Barter | Entries RSS Comments RSS Log in