Oebe Rombout

Oebe Rombout

Technisch directeur

Oebe is verantwoordelijk voor de algemene bedrijfsvoering rondom Occhio's webprojecten (websites, webapplicaties en webmodules). Oebe is regelmatig projectmanager van zowel lopende projecten als een aantal servicecontracten. De ontwikkeling van producten en modules is een van de dingen waar hij zich in het bijzonder sterk voor maakt. Meer

Tips voor samenwerking grafisch ontwerpers en webbouwers (1)

Oebe Rombout 18 maart 2010

Een deel van onze opdrachten komt via externe ontwerpers bij ons terecht. Deze ontwerpers zijn veelal vooral gericht op grafisch ontwerp: een flyer, poster, boekje of huisstijl is voor hen geen probleem. Echter, als hun enthousiaste klant vraagt of ze ook een website kunnen verzorgen, dan is het antwoord vaak: “Ontwerpen wel, maar bouwen niet…”.

Om de website toch te kunnen verzorgen, moeten ze dus op zoek naar een ‘bouwer’. Liefst een goede bouwer die ook meedenkt over de interactie, zodat de ontwerper tijdens het ontwerpproces navigatie en interactie kan bespreken. Het verschil tussen traditionele media en interactieve media is op dit punt namelijk erg groot. Daarbij moeten de ontwerper en de ontwikkelaar ‘elkaars taal spreken’. Voor beide partijen is het dus belangrijk om de verschillen tussen drukwerk en het web te kennen.

Daarnaast moet het uiteindelijke ontwerp duidelijk, compleet en gemakkelijk te verwerken zijn. Dit laatste betekent niet dat dit ten koste gaat van de ontwerpvrijheid. Vaak is het een kwestie van het aanpassen van een paar instellingen in het ontwerpprogramma die een hoop ontwikkeltijd kunnen schelen. Hoe je dat het beste kunt doen, vertel ik over twee weken in een nieuw blogartikel.

Nu wil ik het vooral hebben over de verschillen in navigatie en grootte.

Navigatie boek vs. website

De meeste boeken worden van voren naar achteren gelezen. Soms valt de boekenlegger eruit, dus het is handig om via de inhoudsopgave en wat duidelijke koppen weer het deel van het boek te kunnen vinden waar je voorheen was. In alle gevallen heeft de lezer eerst het boek opengeslagen… en dus de kaft met titel gezien. Navigeren gaat dus vrij rechtlijnig: je begint bij de kaft, slaat het boek open en gaat de pagina’s stuk voor stuk af.

Bij een website gaat het heel anders. Weliswaar komt een deel van de bezoekers via de homepage binnen, maar een groot deel ziet deze homepage nooit aangezien ze via een zoekmachine komen.
Titel en navigatie moeten dus op elke pagina staan. Bezoekers gaan daarmee kris-kras door een website heen.

Verschil tussen navigatie boek en website

Overleg in een vroeg stadium over navigatie. De ontwikkelaar zal aan de hand van de sitemap van de website waarschijnlijk een aantal goede navigatiesopties kunnen voorleggen.

A4 vs. beeldscherm en scrollen

Bij drukwerk ligt het formaat vast. Dat betekent dat de ontwerper binnen een bepaald kader moet werken. Deze limieten zijn er bij webpagina’s niet. Veel grafisch ontwerpers die net beginnen met webontwerpen houden nog vast aan kaders. Als de klant dan uiteindelijk aangeeft dat hij meer tekst op de pagina wil zetten dan in het ontwerp past, komt er vaak een scrollbalk binnen het kader. Deze oplossing is qua usability niet optimaal en houdt geen rekening met het feit dat er veel verschillende beeldschermformaten zijn.

Als je een groot beeldscherm hebt, ziet de website er namelijk wat klein uit door alle ‘witruimte’ eromheen en krijg je ook nog een onnodige scrollbalk (zie linker illustratie). Er kan veel beter gekozen worden voor een ontwerp waarbij het content-deel uit te rekken is (rechter illustratie). De website past dan beter in beeld en toont alleen een scrollbalk als de pagina niet op het beeldscherm past.

Links onnodige scrollbalken. Rechts een beter ‘rekbaar’ ontwerp.

Maak een website waarvan het content-deel  ‘uitrekt’  naar gelang er content is

Ruimte voor banners

Sommige klanten zullen uiteindelijk banners in hun website willen hebben. Vaak worden deze banners vanuit andere partijen aangeleverd. Houd dus rekening met de standaardbannerformaten (bijv. van Google Adsense) die gangbaar zijn of overleg hierover. Soms kan het verbreden van een ‘zijbalk’ ertoe leiden dat een standaard banner er prima inpast en goed in het design opgaat.

Deze tip geldt ook voor het maken van eigen banners die in eerste instantie alleen op je eigen website komen. Door een standaard formaat te kiezen, kan je banner op een later tijdstip ook op andere website’s ingezet worden.

Overleg met de klant of er ooit banners in de website komen en houd rekening met de standaard formaten.

Conclusie

Bij Occhio werken we al sinds onze oorsprong met ontwerpers en ontwerpbureau’s samen die uit de ‘drukwereld’ komen. Door deze ervaring hebben we geleerd wat de verschillen en overeenkomsten zijn, waardoor we gemakkelijk een goede samenwerking  kunnen aangaan. Ben jij ook een grafisch ontwerper die ‘bouwers’ zoekt voor een goede samenwerking, neem dan contact met mij op.

Binnenkort deel 2 over technische instellingen van o.a. Photoshop en Illustrator.