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: , , ,