Gratis HTML 5 device mock-ups voor presenteren van designs

Iedereen die regelmatig bezig is met webdesign of wireframing zal het volgende probleem wel herkennen. Je hebt een prachtig ontwerp gemaakt voor een nieuwe website, en je wilt dit op een nette manier aan de opdrachtgever presenteren. Je kunt dan natuurlijk een e-mail sturen met een paar afbeeldingen. Maar de ontvanger krijgt zo geen goede indruk van hoe het design eruit ziet in een browser of op een specifiek apparaat.

Gelukkig hebben twee designers (Angelos Arnis en Tommi Hiltunen) daar nu een elegante oplossing voor gemaakt: HTML5 device mock-ups. Dit zijn volledig schaalbare versies van de meestgebruikte devices (denk aan smartphones als de iPhone, Samsung Galaxy S3 en de Nokia Lumia 920, maar ook een iPad en een MacBook).

De heren hebben er een soort HTML / CSS framework van gemaakt, waardoor het doodsimpel wordt om je eigen content (afbeeldingen, of eigen HTML code) te tonen in één of meer devices. Zie bijvoorbeeld mijn eigen website in zowel een iPhone als iPad frame:

Zoals je ziet kun je hiermee ook je responsive design mooi in beeld brengen, zeker als je al een HTML versie hebt uitgewerkt.

Ook een keer uitproberen? Downloaden kan gratis via GitHub.