Placeholder afbeeldingen voor websites

Bij Pronamic maken wij websites op basis van WordPress. Zodra het ontwerp van een website akkoord is bevonden door de opdrachtgever werken wij deze uit naar een werkende website. In het grafisch ontwerp staan ook altijd afbeeldingen die bij de content horen en niet bij de styling. Deze afbeeldingen slaan wij op om te kunnen zien hoe de afbeeldingen in het ontwerp worden weergegeven. Eén nadeel is alleen dat deze afbeeldingen elke keer op maat gemaakt moeten worden. Nou heeft Brent Spore een erg handige tool ontwikkeld om heel makkelijk zogenaamde ‘placeholder’ afbeeldingen te kunnen toevoegen aan een website.

Bij het uitwerken van een grafisch ontwerp naar een werkende website is het opslaan van de gebruikte afbeeldingen een tijdrovend onderdeel. Vooral bij de afbeeldingen die niet bij de styling horen maar bij de inhoud is het onhandig deze steeds weer opnieuw te moeten opslaan. Zoals gezegd heeft Brent Spore daar een handige tool voor ontwikkeld, namelijk Placehold.it. Zoals deze website zelf al zegt “A quick and simple image placeholder service”.

Het enige wat je hoeft te doen is de afmetingen van de afbeelding achter de url van placehold.it te plaatsen. Er wordt vervolgens een afbeelding gegenereerd met de opgegeven afmetingen. Ter voorbeeld heb ik hiernaast een afbeelding van 320×240 pixels geplaatst.

Op deze manier kunnen heel snel afbeeldingen met de gewenste afmetingen in een technisch ontwerp worden toegevoegd. De service biedt echter meer opties. Zo kun je eigen teksten toevoegen aan een ‘placeholder’-afbeelding. Zoals volgende afbeelding:

Of de afbeelding van een andere kleur voorzien:

Op de website van placehold.it zijn nog een aantal andere voorbeelden die mogelijk zijn bij het maken van ‘placeholder’-afbeeldingen.

Conclusie

Ik denk dat ik deze tool nog vaak ga gebruiken bij het uitwerken van websites. Voornamelijk omdat ik hiermee flink wat tijd kan besparen en mij nog meer kan richten op het goed uitwerken van het grafisch ontwerp. Ik ben benieuwd welke tools jij gebruikt bij web-ontwikkeling.