door Sabra Issa

En waarom Photoshop hier plaats maakt voor een knullige text editor.

Eindelijk; het is tijd voor de oplevering van je templates

Vorige week startte ik met deze serie blogs over het verloop van een webdesign traject. Ik behandelde de intake en de oplevering van het kleurenpalet, lettertypen en de design elementen.

Deze week vertel ik wat meer over het proces van het ontwerpen van de daadwerkelijke website. En waarom wij hebben besloten om onze klanten niet alleen afbeeldingen van het design aan te leveren, maar meteen een werkende demo online te zetten.

Wat is een master template?

De master template is eigenlijk gewoon je homepagina. Waarom noemen we het dan master template?

Sommige delen van een website komen terug op elke pagina die je bekijkt. Denk hierbij aan je navigatie, je logo en je footer. Soms komt ook je call-to-action terug op de vervolg pagina’s. Wij noemen deze onderdelen de master template om duidelijk te maken dat dit het ‘jasje’ is van je pagina. Het is dus belangrijk dat deze de stijl bepaald en uitermate gebruiksvriendelijk is.

Omdat wij standaard responsive websites opleveren, is ook onze demo responsive. Dat kun je testen op je mobiel, of door je browser scherm te verkleinen. Een aantal elementen veranderen wat drastischer dan de rest; bijvoorbeeld je navigatie. Die wordt mobiel geoptimaliseerd. Ook zul je vaak zien dat je telefoonnummer veranderd in een duidelijke knop. Je bezoekers kunnen zo met een druk op de knop, telefonisch contact met je opnemen. (want tja, je zit niet voor niks op je telefoon!)

De master template wordt dus altijd gepresenteerd op de homepagina. Zo zie je meteen wat het startpunt van je website wordt. Tijdens het controlemoment leg ik uit welke keuzes ik heb gemaakt en waarom.

Waarom werk jij niet ‘gewoon’ in Photoshop?

Ik geloof dat iedereen – wat voor werk je ook doet – op z’n tijd moet bekijken of datgene wat 5 jaar geleden prima werkte, nog steeds voldoet. Dat doe door verder te kijken dan je huidige tools en de manier waarop je ze gebruikt. Het kan zijn dat je er dan achterkomt dat het nodig is om op een andere manier te werken.

De afgelopen jaren begon ik steeds meer nadelen te ervaren van het opleveren van webdesigns op de oude manier; als afbeelding. Dat is ergens niet heel onlogisch, want een website ‘doet’ wat terwijl een afbeelding daar maar zit te zitten. Toch had het jarenlang prima gewerkt. En…iedereen bleef het maar doen.
Naast het feit dat het erg veel tijd kostte om het gedrag van elementen duidelijk te maken in een grafisch ontwerp, werkte het ook nog eens niet altijd. Er ontstond verwarring bij een klant. Of bij de programmeur. Dan moest weer overlegd worden over dingen waarvan ik dacht; kan dat niet meteen duidelijk gemaakt worden.

Begrijp me goed, ik ben geen tegenstander van overleg. Maar teveel overleg kost tijd, en ja, tijd kost geld. Dat zie je misschien niet terug op de gemiddelde factuur, maar in de praktijk worden dat soort uren vaak op voorhand verrekend in de prijs. Terwijl er genoeg bespaard kan worden door op een andere manier te werken.

Inmiddels werk ik al een paar maanden niet meer alleen met grafische software. Ik lever mijn ontwerpen op als een werkende demo website. Daarmee is de website niet af maar het design gedraagt zich zoals het dat als live website zou doen.

Live demo van Blue Leopard
Live demo van Blue Leopard

Voordelen van live (oftwel: in-browser) design

Tijd: Door je ontwerp op te leveren als demo website bespaar je tijd. Een programmeur hoeft niet meer jouw afbeeldingen na te meten, jouw kleuren om te zetten en zich af te vragen wat je nou allemaal bedoeld met die rare lagen.

Jij bespaart jezelf tijd door niet elke hover, active of current-page status te hoeven tekenen.

Nog meer tijd: vergeet je aparte templates voor responsive design. Programmeer je demo in een framework zoals Bootstrap. Dan is 80% al optimaal responsive.

Ja, nog meer tijd: De grootste frustratie van een designer, zijn programmeurs die niet op de pixel hun design overnemen. Dus dan doe je het maar zelf. Scheelt jou frustratie (en dus tijd) en de programmeur…ja…tijd.

Er zijn nog veel voordelen (en ook nadelen, maar daar werk ik vakkundig omheen 😉 ) van deze manier van werken. Daar blog ik volgende week verder over als ik wat meer vertel over aanpassingen en uitbreidingen van je webdesign.

Laat een reactie achter