martin berglund » Tips

Tips til forsidedeskere

Martin Berglund — Mon, 21 Jun 2010 06:43:31 +0000

I dag skal jeg snakke med de som jobber med forsiden til nrk.no. Jeg skal gi deskerne tips til hvordan de – designmessig – kan lage en enda bedre forside.

Hva synes du om nrk.no og hvordan kan forsiden bli visuelt bedre?

Skjermknips med stil

Martin Berglund — Sat, 05 Sep 2009 10:21:46 +0000

Det hender ganske ofte at nettaviser, magasiner og blogger bruker skjermknips (screenshot) for å illustrere sakene de skriver. Som oftest blir resultatet flatt og kjedelig, men det skal ikke så mye til for å fikse på det.

En løsning er å fotografere skjermen. Erik Solheim i NRKbeta benytter denne teknikken, og resultatet blir mye bedre enn å legge inn ubehandlede skjermknips.

En annen løsning er å gjenskape litt av fotofølelsen med noen enkle grep i Photoshop. Du kan for eksempel gjøre slik:

Åpne eller lim inn bildet i Photoshop.
Pass på at bildet ligger i et eget lag, slik at det er enkelt å rotere og/eller endre perspektiv med Free Transform (CMD + T/CTRL + T).
Endre Canvas Size til størrelsen du ønsker å bruke.
Opprett et nytt lag (Layer) og pass på at det legger seg over bildet.
Velg filteret Lens Correction på laget med hvit fyllfarge.
Sett ønsket mengde Vignette seksjonen på høyre side av vinduet og klikk OK.
Endre lagets Blending Mode til Multiply eller Linear Burn, og sett ønsket Opacity.
Merk bildelaget og bruk Free Transform (CMD + T/CTRL + T) til å endre perspektivet på bildet slik du ønsker. For å ta tak i enkelthjørner når du er i Free Transform modus, kan du holde nede CMD/CTRL.
Aktiver Quick Mask Mode (Q) og trekk opp en Reflected Gradient (sort/hvit) for å skape et begrenset fokusplan.
Deaktiver Quick Mask Mode (Q) slik at en markering kommer til syne, og sett ønsket mengde uskarphet med filteret Gaussian Blur.

Det ferdige resultatet blir slik:

Denne stilen kan ikke helt måle seg med ekte fotografier, men den skaper et mer spennende uttrykk enn et helt ubehandlet skjermknips.

NB: Simon S. Strumse synes skjermknips er en bedre norskifisering av det engelske ordet screenshot, enn skjermskudd. Derfor har jeg valgt å bruke skjermknips i dette innlegget

Tabloide titler med CSS

Martin Berglund — Fri, 19 Jun 2009 06:23:26 +0000

Til tross for min skepsis til det tabloide «avisuttrykket» mange nettaviser tar i bruk for å gjøre forsiden sin spennende, må jeg si at det har en effekt på meg også. Stadig flere blogger lar seg inspirere av nettavisstilen og legger opp til layouter som bruker prinsipper fra papir- og nettavisene. Det kan for eksempel være at man legger toppsaken i full bredde, mens resten av sakene vises i halv bredde. Et annet eksempel er ulike tekststørrelser i titler, der enkelte ord blåses opp eller krympes for å sette fokus på det som er viktig.

De store nettavisene har systemer som gjør det enkelt å oppnå den rette layouten. På mindre sider, der publiseringssystemet for eksempel er WordPress, er det ikke like lett å løse alt på like elegante måter. Kanskje tittelen ikke blir så fin, når toppsaken hopper ned til neste posisjon, men beholder sin formatering.

Jeg har lekt med en ide som jeg ønsker deres innspill på.

La oss si alle saker, uansett bredde, har samme HTML-grunnlag. Det eneste som skiller fullbreddesaker fra halvbreddesaker er en CSS-klasse og bildenes høyde og bredde. I CSSen definerer vi en standardstørrelse på tittelen i fullbreddesaker og en standardstørrelse i halvbreddesaker. Det er en fordel om halvbreddesaker har halvparten så stor tittelstørrelse. Ord(ene) vi ønsker å utheve eller forminske, pakker vi inn i en . På denne taggen kan vi enten sette en klasse eller skrive inline CSS. Tekststørrelsen, innenfor , definerer vi i prosent. Det gjør at tittelen på fullbredde- eller halvbreddesaken vil ha et fast forhold mellom standardstørrelsen på tittel, og prosentverdien på .

Skjermdump av toppsak på VG.no - 19.06.2009

Nettlesere er spesielt ulike i sin behandling av tekst. Det skal ikke mange pixler til, før teksten bryter i en nettleser, mens andre nettlesere viser teksten slik den var tenkt. Derfor er det viktig å ikke finjustere titler for mye. Titlene på VG.no faller stadig fra hverandre i min standard nettleser (Safari).

Hva synes dere om løsningen?