De opzet voor een website maak je (soms) op basis van een Photoshop mockup. Als we een projectmatige website bouwen voor Ymere worden zaken als de verkoopbrochure, de artists impressions van de woningen en het verkoopbord door één of meerdere ontwerpbureau’s gerealiseerd. De opdracht voor het realiseren van een projectsite houden we graag in huis . Meestal draait het er op uit dat het ontwerpbureau een .psd bestand met een mockup layout over de muur gooit waarmee we aan de slag gaan voor de website.

Zelf werk ik graag op basis van een mockup. Dan hoef ik me niet al te druk te maken over wat de klant (lees: de verkoopmanager die verantwoordelijk is voor het project) mooi vindt. De strijd over de fonts, de kleurstelling en de schermindeling is dan al uitgevochten. Ik kan me lekker concentreren op de vertaalslag van plaatje naar (x)html, stijlbladen en javascript — frontend ontwikkelen.

Maar het is niet alles goud wat er blinkt. In de praktijk levert het bouwen van een website op basis van een mockup ook de nodige problemen op. Zoals het ontwerpje voor de Batikblokken waar ik me op het moment mee bezig hou. Als de mockup onvolledig is in het tonen van de manier waarop de website moet gaan reageren is dat nogal lastig. Dan is het nodig om terug te gaan naar de ontwerper en hem / haar te vragen wat de website moet doen in een bepaalde situatie. Of te gissen naar de bedoeling van de ontwerper — niet zo’n goed idee. In het geval van de Batikblokken:

Wat doet die link?
Op basis van het Photoshop mockup bestand is niet bij alle links duidelijk hoe ze zich moeten gedragen bij mouseover events en in actieve status.

Van de hoofdnavigatie is alleen duidelijk hoe het menuitem de buurt eruit ziet als erop geklikt is. Het is niet beschreven hoe de andere onderdelen in het menu eruit zien als ze actief zijn. Wordt de wolk dan groter om de tekst van het menuitem te omvatten? Hoe gedraagt de stippellijn onder de tekst zich? Is het geschetste beeld ook de situatie zoals die bij het mouseover event optreedt? (zie (1))

Op de pagina die verschijnt als je op Welkom klikt zie je een ander kader dan op de rest van de pagina’s. De navigatie gedraagt zich hetzelfde (er zijn in het PSD bestand geen aanwijzingen te vinden dat het menu anders is). Het gevolg is een vrij klungelig navigatie-effect. Waar het wolkje bij de pagina’s met het grote contentvlak hier keurig overheen valt en een speelt effect geeft, hangt het wolkje op de Welkom pagina in het luchtledige te bungelen. (zie (2))

online != offline
Bij ontwerpstudio’s heerst nogal eens een hardnekkige het ontwerpen een website layout is hetzelfde als het maken van een folder griep. Met andere woorden, men is van mening dat online media (zoals een website) op dezelfde manier als zoals offline media (een brochure bijvoorbeeld) kunnen worden gemaakt. Wanhopige pogingen om controle over de layout van de webpagina te behouden is het resultaat. Ter illustratie, het Batikblokkenontwerp is bedacht voor een schermresolutie van 1024 bij 768 pixels. Bij deze scherminstellingen komt het geheel prima uit de verf. Bij hogere resoluties is het ontwerp een stuk minder aantrekkelijk. De hoofdmoot van de inhoud komt in een vlak met vaste afmetingen. Alles moet in één keer op het scherm. Het mag niet groeien. Een stijl met overflow:auto moet zorgen voor een scrollbalk als de inhoud niet in het betreffende vlak past. (zie (3)) Persoonlijk ben ik het hier helemaal niet mee eens — online != offline.

Afijn, haast heeft de Wonen in Batik website niet. Lees: er is tijd genoeg om terug te gaan naar de ontwerper en te vragen om een hiaten in de mockup in te vullen.

Geschreven door HansR
Er is nog niet gereageerd op deze tekst.
Geplaatst in Mijn websites
Getagged als concept, mockup, webwerk, ymere

Reageren:

RSS feed voor reacties op deze blogpost. TrackBack URL