Er bestaan programma’s die je beloven om in zo goed als één klik van een website-ontwerp naar afgewerkte site te gaan. ‘Save as website’. Je ontwerpt zorgvuldig de pagina’s, al dan niet met echte inhoud, en dan zet je dat om naar HTML, CSS en afbeeldingen. In Fireworks zit dezer dagen zelfs een ‘pages’ feature om dat proces te ondersteunen.

In bepaalde heel beperkte situaties zal dat werken, maar over ‘t algemeen leidt dat model van werken enkel naar frustratie. Een website is namelijk geen brochure met pagina na pagina, maar een informatiesysteem met inhoud. Je ontwerpt een interface, die flexibel en toch consistent moet zijn.

Na het maken van wireframes begin ik met het maken van een paar realistische type-pagina’s. Om visueel evenwicht en structuur te blijven overzien.

En dan komt het low-tech maar hyperefficiënte slicedeck. Een document met alle grafische elementen samengebracht, opgedeeld in slices die in één keer kunnen geëxporteerd worden. Dat is veel handiger dan al die visuele elementen apart in pagina-layouts laten zitten. Een paar voordelen op een rijtje:

• Consistentie: je kan gelijkaardige elementen centraal beheren en bewerken, en je ziet snel wanneer er iets niet klopt. Ook het consistent houden van de namen van afbeeldingen gaat een pak makkelijker.
• Vindbaarheid: je vindt snel alle afbeeldingen uit je site terug op één plek. Om dat nog te verbeteren, kan je gelijkaardige elementen ook in elkaars buurt zetten.
• Efficiëntie: Moet je snel de kleur van een hele reeks afbeeldingen veranderen? Dat kan je in één keer. Formaat of achtergrondkleur wijzigen? Simpel.

Ik gebruik Fireworks om slicedecks te maken, maar Photoshop voldoet ook prima. Smaken en kleuren. Je hebt wel een slice-functie nodig, dus Paint of Gimp zijn minder geschikt.