jan 6 2009

Bedre design med 4 basale principper: CRAP

Jeg har lært et nyt ord i dag: CRAP! Et huske­ord eller en forko­r­telse for 4 basale design­prin­cip­per under over­skrifterne Contrast, Repe­ti­tion, Align­ment og Prox­im­ity.

Con­trast: Kon­trast drejer sig om udnyt­telse af stør­relser, for­mer og farver til at skelne ele­menter fra andre ele­menter. Bru­gen af fed får f.eks. den fed­ede tekst til at adskille sig fra den øvrige tekst. Et ele­ment med orange bag­grunds­farve skiller sig f.eks. ud, hvis alle andre ele­menters bag­grunds­farve er grå osv.

Rep­e­ti­tion: Gen­t­agelse af designele­menter drejer sig om at skabe et kon­sis­tent design. Infor­ma­tion, der optræder på alle sider, bør således plac­eres ens på alle sider. Punk­top­stillede lis­ter bør være ens. Antallet af skrift­typer bør begrænses til 2–3 og over­skrifter, under­over­skrifter og brødtekst bør se ens ud på alle sider. Det han­dler om at skabe en hel­hed, hvor brugeren hur­tigt vil komme til at for­vente, at eleme­ter med et bestemt udseende indik­erer en bestemt egenskab.

Align­ment: Opstill­ing af ele­menterne han­dler om at sætte designet i sys­tem. Intet bør plac­eres til­fældigt. Et grelt eksem­pel er cen­tr­eret tekst, hvor tek­sten man­gler bagkant og derved bliver min­dre læs­bar. Alt bør have en vis visuel forbindelse til noget andet. Det gør det nem­mere for brugeren at forstå og nav­igere i designets system.

Prox­im­ity: Nærhed drejer sig om elemternes ind­byrdes rela­tion. Ele­menter, der har rela­tion til hinan­den bør grup­peres tæt sam­men. Når mange ele­menter grup­peres tæt sam­men, bliver de visuelt til én enhed snarere end mange seper­ate enkelt­dele. Dette hjælper til at organ­is­ere infor­ma­tion og reduc­erer rod.

Mange af disse prin­cip­per ser vi også i gestalt­lovene. Men forko­r­telsen CRAP gør det måske lidt nem­mere at huske.

By Morten Brunbjerg Bech • Web Design • 1 • Tags: , , , ,

dec 21 2008

Art Direction plugin til WordPress — Pimp dine indlæg

Jeg har tidligere skrevet om Jason Santa Maria’s blog, der har det særk­ende at næsten hvert indlæg er indi­vidu­elt gen­nemde­signet i en stil, der passer ind i sitets overordnede look and feel.

Nu er det blevet lidt let­tere, i hvert fald rent teknisk, at opnå noget lig­nende med Word­Press. Noel Jack­son, designer hos Automat­tic, der udvikler Word­Press, har nem­lig for nylig udgivet et plu­gin, der gør det muligt at lave brugerde­finerede designs til indlæg enkeltvis, mens et glob­alt stylet arkiv bibeholdes.

Men ét er teknikken. Den virke­lige udfor­dring lig­ger i designop­gaven, hvis hvert indlæg i en blog ønskes stylet individuelt.

Plugin’et hed­der Art Direc­tion. Det er i beta og ver­sion 0.2 er ude nu.

By Morten Brunbjerg Bech • Web Design, Wordpress • 0 • Tags: , , ,

dec 18 2008

Tips til forbedring af brugergrænsefladen

Web­de­sign består i overve­jende grad af design af bruger­grænse­flader. Man falder ofte over sites, hvor fokus i designet er plac­eret uhen­sigtsmæs­sigt. Der findes mange eksem­pler på at farver, kon­traster, stør­relser og afs­tande i tekst og lay­out er mere til­fældigt valgt end bev­idst udnyt­tet til sam­men­bind­ing og adskil­lelse af ele­menter samt opmærksomhedsskabelse.

Hvilken søge­boks er f.eks. vigtigst i dette design?

Søgebokse

Her giver især gestalt­lovene nogle gode rettes­nore. Niels Gam­borg har  nogle udmærkede fork­laringer af gestalt­lovene her:

Smash­ing Mag­a­zine har et rigtig godt indlæg med 10 gode tips og masser af både gode og dårlige eksem­pler, der kan hjælpe med at rette et web­site med for mange design­til­fældigheder op til en mere effek­tiv bruger­grænse­flade.
10 Use­ful Tech­niques To Improve Your User Inter­face Designs

By Morten Brunbjerg Bech • Web Design • 0 • Tags: , , ,

dec 16 2008

Apropos enestående webtypografi

Fornylig skrev jeg lidt om typografi på net­tet. Web­De­sign­er­Wall har en glim­rende artikel om emnet, Fonts and the Web af Juul Coolen. Artiklen kom­mer omkring 4 forskel­lige metoder til at spiffe de typografiske muligheder i web­de­sign op.

  • Image Replace­ment — hvor tek­sten erstattes af grafik med CSS.
  • sIFR (Scal­able Inman Flash Replace­ment) — hvor typografien erstattes af Flash.
  • FLIR (Facelift Image Repal­cement) — hvor tek­sten erstattes af grafik on the fly vha. PHP.
  • CSS3 — hvor der i fremti­den vil kunne gøres brug af @font-face reglen.

Læs Fonts and the Web af Juul Coolen på Web­De­sign­er­Wall.

By Morten Brunbjerg Bech • Quick tips, Web Design • 0 • Tags: , ,

dec 16 2008

Julekalender for webnørder

Min favorit-julekalender i år er abso­lut 24 Ways. 24 Ways er julekalen­deren for web­nørder. Hver dag i decem­ber frem mod jul pub­liceres her en daglig dosis web­de­sign– og udviklings­godter i form af artik­ler om emnet, skrevet af nogle af branchens førende designer og udviklere.

Årets foreløbige favorit­ter er:

By Morten Brunbjerg Bech • Quick tips, Web Design • 0 • Tags: , , , ,

dec 5 2008

Inspiration til design af søgeboksen

Når brugeren ikke kan finde rundt på web­sitet, er søge­bok­sen ofte sid­ste udvej? Men hvor­dan designer man en effek­tiv søge­for­mu­lar? Smash­ing Mag­a­zine har en god artikel om emnet med eksem­pler på dos & don’ts, bud på desig­noverve­jelser og masser af inspir­erende screen dumps.

Design­ing The Holy Search Box: Exam­ples And Best Prac­tices.

By Morten Brunbjerg Bech • Inspiration, Quick tips, Web Design • 0 • Tags: , , , ,

dec 5 2008

Hvordan designer man en effektiv 404 side?

Fejl 404 sider er ikke altid lige hjælp­somme. Tal­let 404 siger for­mentlig de fær­reste brugere noget som helst. Hvor­dan designer man en 404 side, som kan hjælpe brugeren videre?

Hongkiat.com har sam­let en liste over 404 sider. De er ikke alle lige gode, men her er nogle kreative bud på fejlbeskeder og under alle omstændigheder god inspiration.

Se Hongkiat’s “60 Really Cool and Cre­ative Error 404 Pages”.

By Morten Brunbjerg Bech • Inspiration, Quick tips, Web Design • 1 • Tags: , , , , ,

dec 1 2008

Enestående webtypografi

… er en umu­lighed, fordi antallet af skrift­typer, der typisk findes på brugernes com­put­ere og dermed er tilgæn­gelige til brug i web­de­sign, er stærkt begrænset. Har man en lækker cor­po­rate skrift­type kan den altså ikke umid­del­bart bruges. Man må gå andre veje, hvis man vil fremhæve et bestemt visuelt udtryk eller iden­titet på nettet.

Grafik
Nogen har fun­det på at gøre det med grafik. Tek­sten udskiftes enten manuelt med grafik og CSS eller dynamisk med PHP og javascript. Begge metoder giver et pænt resul­tat, men kan, hvis det gøres fork­ert, være på bekost­ning af tilgæn­ge­lighed, og sam­tidig bliver der naturligvis mere grafik, der skal downloades.

Flash-metoden sIFR
Andre har fun­det på at udskifte tek­sten med flash. En metode, der kaldes sIFR. Resul­tatet er nydeligt, men ulem­pen er, at den specielle skrift­type først indlæses, når resten af sitet er indlæst.

Ren CSS
Man kan godt lave sig­nifikant typografi med de gængse web skrift­typer og CSS alene. Fak­tisk er de typografiske muligheder i CSS ret over­sete, efter min mening. Man kan få ganske meget genk­ende­lighed ud af at arbe­jde med skrift­stør­relser, ser­if­fer, sans-seriffer, minuskler, majuskler, kur­siver­ing, vægt­ning, skyd­ning og knib­n­ing, selv med et begrænset udvalg af skrift­typer. Og her gås til gengæld ikke på kom­pro­mis med mængder af grafik, indlæs­ningstider og tilgængelighed.

Nogle eksem­pler i vilkårlig orden:

Helvetica/Arial, 44 pix­els
Quizdelt­agerne spiste jord­bær med fløde, mens cirkusklov­nen Walther spillede på xylo­fon. 1234567890

Tre­buchet MS, 24 pix­els
Quizdelt­agerne spiste jord­bær med fløde, mens cirkusklov­nen Walther spillede på xylo­fon. 1234567890

Geor­gia, 12 pix­els
Quizdelt­agerne spiste jord­bær med fløde, mens cirkusklov­nen Walther spillede på xylo­fon. 1234567890

Geor­gia, 20 pix­els
Quizdelt­agerne spiste jord­bær med fløde, mens cirkusklov­nen Walther spillede på xylo­fon. 1234567890

Ver­dana, 13 pix­els
Quizdelt­agerne spiste jord­bær med fløde, mens cirkusklov­nen Walther spillede på xylo­fon. 1234567890

Tre­buchet MS, 14 pix­els
Quizdelt­agerne spiste jord­bær med fløde, mens cirkusklov­nen Walther spillede på xylo­fon. 1234567890

Helvetica/Arial, 18 pix­els
Quizdelt­agerne spiste jord­bær med fløde, mens cirkusklov­nen Walther spillede på xylo­fon. 1234567890

Tre­buchet MS, 18 pix­els
Quizdelt­agerne spiste jord­bær med fløde, mens cirkusklov­nen Walther spillede på xylo­fon. 1234567890

Prøv også
Typechart.com har sam­let en masse eksem­pler sam­men, hvor CSS koden er lige til at klippe og kopiere.
Tjek det ud på typechart.com

By Morten Brunbjerg Bech • CSS, Web Design • 1 • Tags: , , ,

nov 27 2008

Runde hjørner med jQuery

jQuery logoPænt afrund­ede hjørner i web­de­sign laves på klas­siske vis med grafik­s­tumper i top og bund af de bokse, der ønskes afrund­ede. Denne metode har imi­dler­tid ofte den ulempe, at den kræver ekstra opmærkn­ing, der ikke nød­vendigvis giver mening, skaber rod i koden samt kræver indlæs­ning af ekstra grafik, som er med til at sløve indlæs­ningsti­den af websitet.

Slip for unødig grafik og HTML
Med javascript kan man imi­dler­tid undgå både ekstra opmærkn­ing og grafik. Dave Methvin har lavet et plu­gin til javascript-biblioteket jQuery, som kan netop dette. jQuery er et glim­rende letvægts-javascript frame­work, der gør det nemt for designere med begrænset kodeer­far­ing at lave rel­a­tivt avanceret funk­tion­alitet i et website.

Fra grafik-pest til javascript-kolera?
Skal man så rode sin kode til med javascript i stedet for grafik og opmærkn­ing, bare for at få runde hjørner? Som sagt kan jQuery bruges til rigtig mange ting. Har man i forve­jen brug for noget af jQuery’s funk­tion­alitet, er det oplagt at anvende til også at lave visse grafiske effek­ter og vil klart være at fore­trække frem­for den ekstra opmærkn­ing og grafik. Jeg vil helt sikkert gøre brug af dette plu­gin i frem­tidige projekter.

Der er en demo af Round Cor­ner plugin’et samt link til down­load af scriptet her.

By Morten Brunbjerg Bech • Web Design, Web Development • 0 • Tags: , , , , , ,

nov 25 2008

Ultrakorte uddrag i WordPress

I Word­Press kan man skrive et kort uddrag til de enkelte blogindlæg. Det er ofte anven­deligt på sites, der ikke nød­vendigvis har karak­ter af en typisk weblog, f.eks. jour­nal­is­tiske mag­a­siner, por­taler eller virksomhedssites.

Uddraget har som udgangspunkt en stør­relse på 55 ord og det kan man ikke umid­del­bart ændre på. Men 55 ord kan godt være 40 ord for meget, hvis uddraget ønskes vist på en bestemt måde. Jeg har gravet lidt i uddraget og fun­det frem til en måde at begrænse det på.

The_excerpt() laver for lange uddrag
For at imple­mentere uddraget i tem­platen bruges tag’et the_excerpt() (se doku­men­ta­tion her). Dette tag er imi­dler­tid ikke en streng, men en funk­tion og der­for kan man ikke umid­del­bart splitte det ad med PHP. Jeg fandt dog ud af, at grund­laget for funk­tio­nen the_excerpt() er stren­gen get_the_excerpt() og denne streng kan godt splittes ad.

Vi har altså brug for en funk­tion, der kan splitte ind­holdet i stren­gen op i enkel­tord, tælle antallet af enkel­tord og dernæst sætte det ønskede antal ord sam­men igen. Jeg nåede frem til føl­gende opskrift:

Opskriften på korte uddrag
Put neden­stående funk­tion ind i filen functions.php i dit theme:

<?php
function string_limit_words($string, $word_limit)
{
  $words = explode(' ', $string, ($word_limit + 1));
  if(count($words) > $word_limit)
  array_pop($words);
  return implode(' ', $words);
}
?>

Placér dernæst føl­gende kodes­tump i din tem­plate, der hvor du ønsker at få spyt­tet uddraget ud:

<?php
  $excerpt = get_the_excerpt();
  echo string_limit_words($excerpt,25);
?>

… hvor 25 er antallet af ønskede ord i uddraget. Du kan nu styre, hvor mange ord der skal vises i dit uddrag.

Løs­nin­gen er tillige pub­liceret i Word­Press’ sup­port­fo­rum.

By Morten Brunbjerg Bech • Web Development, Wordpress • 0 • Tags: , , , , , , , ,

1 2 3 4 5 6 7