Layout variatie deel 2: bewegende afbeelding

Dit artikel komt uit een serie over variatie in webdesign, waarbij een aantal mogelijkheden worden besproken om net wat meer variatie in je website te brengen.

Als tweede deel in de serie bespreek ik een variatie op de manier hoe afbeeldingen geplaatst worden.

Afbeeldingen in de content plaats je meestal als GIF, JPEG of PNG. Maar je kunt ook kiezen om eens te variëren met de manier hoe je een afbeelding plaatst. Het is mogelijk om van een afbeelding een korte animatie te maken met bijvoorbeeld Flash. Het is erg belangrijk dat een animatie niet storend is. Daarom maak ik vaak gebruik van een rustig effect. Bijvoorbeeld een effect waarbij op de foto ingezoomd wordt.

Door in te zoomen op een gedeelte van de foto verhoog je de attentiewaarde van de afbeelding enorm. Daarnaast is het mogelijk om op een bepaald gebied van een foto extra aandacht te vestigen. De extra aandacht krijg je natuurlijk door naar een specifiek gedeelte van de afbeelding te zoomen.
Er zijn naast het inzoomen ook heel andere bewegingen mogelijk. Elke beweging geeft weer een andere betekenis aan hetgeen wordt weergegeven. Het tegenovergestelde van inzoomen is natuurlijk uitzoomen. Wanneer je van één object uitzoomt naar een totaal overzicht creëer je overzicht en duidelijkheid.
Een horizontale of verticale pan (camera beweging van één locatie naar de andere) legt verband tussen twee objecten of verlegt de aandacht binnen één object.

Het Nederlandse rode kruis maakt op één van hun sites op een indrukwekkende wijze gebruik van enkele van deze effecten. Hieronder is een banner te zien die gebruikt wordt. In dit voorbeeld wordt een vertical pan gebruikt om de aandacht te verleggen van een slachtoffer naar de hulpverlener.

Het nadeel van het plaatsen van een afbeelding in een animatie is het feit dat animaties lang niet zo goed worden ondersteund als afbeeldingen. Gebruikers hebben plug-ins niet geïnstalleerd of bepaalde functionaliteiten uitgeschakeld. Ook worden animaties minder goed geïndexeerd door zoekmachines. Ten slotte neemt een animatie veel meer bandbreedte in beslag dan een afbeelding.

Een dergelijke oplossing komt vooral tot zijn recht wanneer je een sfeer van een ruimte onder de aandacht probeert te brengen. Vooral wanneer een bepaald gedeelte van de afbeelding er uit moet springen is het een interessante techniek.

Lees ook de andere delen in deze serie

  1. Navigatie onderaan
  2. Bewegende afbeelding
  3. Sfeerafbeelding onderaan de pagina
  4. Drie koloms websites variatie
  5. Horizontale scrollbalk
  6. Easter eggs

Noot: In dit artikel zouden nog wat voorbeelden moeten zitten van flash afbeeldingen. Maar omdat Drupal nogal raar doet, laat dit nog even op zich wachten. Er wordt aan gewerkt :-)