Gisteren had ik het erover met Dennis, mijn web collega bij Ymere. Er lijkt zich de laatste tijd in webdesign-land een duidelijke trend af te tekenen. We waren het erover eens:

• De mockup ontwerpen die we binnen krijgen ogen ruimtelijker dan een jaar geleden.
• Er wordt veelvuldig gebruik gemaakt van whitespace.
• En — ter compensatie van de toch wat witte pagina’s? — is het kleurgebruik behoorlijk uitbundig. Met name het gebruik van vrij harde kleuren springt in het oog. Geen moeilijke mengkleur rood, maar gewoon kopteksten in compromisloos #f00.
• De kleurencombinaties zijn vaak spannend. En lijken soms de grens van vloeken met kleur op te zoeken.
• Verder lijkt het gebruik van gradient kleuren grotendeels verbannen.
• Evenals schaduwranden.

Eerlijk gezegd spreekt het hierboven genoemde gebruik van kleur en witruimte mij wel aan. Het resultaat is fris, clean en recht voor zijn raap. En met verloopkleuren heb ik het eigenlijk wel even gehad!

Voor Op het Programma, een Google Maps project waar ik dit voorjaar aan begonnen ben heb ik alle vrijheid qua vormgeving. Een mooie gelegenheid om eens met deze minimalistische manier van vormgeving te stoeien.

Het resultaat? Check de eerste opzet van Op het Programma en vergelijk deze met de huidige versie.

Misschien vind je het helemaal niks. Maar voor mij is duidelijk welke richting het ontwerp van de Op het Programma website zal opgaan.

Geschreven door HansR
Tot nu toe zijn er 3 reacties op deze tekst. Laat een reactie achter.
Geplaatst in Mijn websites
Getagged als concept, kleurgebruik, vormgeving, webwerk

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. Laat een reactie achter.
Geplaatst in Mijn websites
Getagged als concept, mockup, webwerk, ymere

Een redelijk drukbezochte website hebben is leuk. Het bezitten van meerdere goedbezochte websites is beter. Gestaag doorwerken aan uitbreiding van dat ** kuch ** online imperium is dan ook het devies.

De eerste stap in mijn streven om een wallpaper, avatar en emotions website voor mijn meiden op te zetten is gezet met het online brengen van Sploeng.

Sploeng oogt wel wat steriel en misschien veel te strak. Vandaar dat ik een beginnetje heb gemaakt met een achterliggend gedeelte: de persoonlijke pagina(’s) van mijn oudste dochter Lynn. Dat wordt heel wat speelser. Qua layout, maar zeker ook voor wat betreft inhoud.

Over dat laatste - de content - denk ik momenteel overigens nog diep na. Ideetjes zat, maar de boel rustig laten bezinken is niet onverstandig. Vooralsnog is het dus lorem ipsum wat de klok slaat. Een eerste vertaling van een Adobe Photoshop / Macromedia Adobe Fireworks mockup naar (x)html ontwerpje is al wel gemaakt.

Geschreven door HansR
Tot nu toe zijn er 2 reacties op deze tekst. Laat een reactie achter.
Geplaatst in Mijn websites
Getagged als concept, webwerk

En toen was de zomervakantie alweer voorbij

Op de valreep van de gang naar m’n baas heb ik nog maar even gas gegeven om een website live te zetten die al een hele tijd in de startblokken stond, maar net niet af genoeg was om te introduceren: Sploeng!. Na een dagje sleutelen kan de boel wel live en is het tijd om de site, onder andere door middel van dit stukje tekst, onder de aandacht van de zoekmachines te brengen.

Sploeng! is op het moment nog steeds niet de website die ik in gedachten had toen ik het domein registreerde. Eerlijk gezegd bevat de site (als initiële vulling) een stukje duplicate content van Leukvoorkids.nl. Naar verwachting zal dat snel genoeg veranderen, want Sploeng! heeft een wat andere doelgroep als LvK. Dan gaat Sploeng! zijn eigen koers varen. De hoeveelheid duplicate content is trouwens ook niet van dien aard dat ik me zorgen maak dat Google er moeilijk over doet.

Echt spannend in technische zin is Sploeng! niet. Het leukste technische snufje aan Sploeng! is de inzet van Ben Nolan’s behaviour.js, het stukje javascript om op charmante manier invulling te geven aan de scheiding van inhoud, vormgeving en actie. Daarnaast was ook de spielerei met een tag cloud (niet verder vertellen, maar-ie is een beetje fake) een aardig leermoment. En oh ja voor wat het waard is (de code-puristen waarschijnlijk een heleboel), er zijn geen tabellen misbruikt tijdens het bouwen van Sploeng! LoL!

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Mijn websites
Getagged als concept, ontwerp, pluggen

Mijn tweede domein (nullbeta.net was in 2001 mijn eerste geregistreerde domein) was leukvoorkids.nl. Kleurplaten, wallpapers en knutseltips. Na ruim vier jaar (ik legde leukvoorkids.nl vast in april 2003) draait deze website nog steeds. Op een laptop achter mijn thuis-dsl.

Op het gebied van bezoekersaantallen heeft leukvoorkids.nl aardige vooruitgang geboekt. Was ik in de beginjaren blij met een paar honderd unieke bezoekers per dag, tegenwoordig ben ik teleurgesteld als er op een dag minder dan 20000 page views zijn.

Geleerd heb ik veel in de afgelopen jaren. Vooral op het gebied van zoekmachines.

Leukvoorkids.nl startte ik op toen twee van mijn drie meiden nog respectievelijk peuter en kleuter waren. Anno 2007 ben ik klaar voor iets nieuws. Lynn (m’n oudste) is op het moment van intypen alweer 11 jaar jong. Gwen is acht en Lara zes. De interesse-gebieden van mijn meisjes veranderen. Van K3 naar Winx Club naar MSN en MTV. Wat ik zeggen wil … leuk voor kids, met kleurplaten en simpele knutseltjes als zwaartepunt, voldoet zo zachtjes aan niet meer. Het is hoog tijd om qua web met m’n meiden mee te groeien. Met andere woorden, tijd voor de introductie van een nieuwe website. Met een iets andere doelgroep dan die van leukvoorkids.nl. Enter Sploeng! Een website met internet dingetjes voor 10 plussers.

Helemaal uitgekristaliseerd is het concept voor Sploeng nog niet. In tegendeel. Als eerste opzet heb ik een paar maanden geleden al eens iets online gezet. Niet onaardig als basis. Maar de echte Sploeng moet toch echt een stukje spannender worden.

Een eerste versie voor een logo heeft in elk geval het daglicht mogen zien ..

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Grafisch geweld · Mijn websites
Getagged als concept, logo, ontwerp