« terug naar Home

Coolminds: een one-page case-study

coolminds.nl_header

Voor een sollicitatie een ontwerp en inhoudelijk onderzoek gedaan voor een one-page variatie op de huidige Coolminds website.

Mijn insteek met betrekking tot de visie voor een nieuwe site; minder content en iets meer bravoure. Gezien de scope van de opdracht (enkele dagen) was het niet wenselijk de communicatiefilosofie van de huidige website radicaal om te gooien; de focus ligt nog steeds op de boodschap ‘wij hebben de specialisten voor uw klus in huis’, de verpakking van deze boodschap is alleen flink verandert.

One-page sites hebben veel minder ruimte voor uitgebreide artikelen dus de inhoud van de oude site is flink ingekort. Om de langere teksten en hun auteurs toch een goed platform te geven, is het voorstel om naast de one-page site een blog te ontwikkelen en de huidige langere teksten daar in artikel-vorm te plaatsten. Daarnaast is het advies is om de communicatie in de eerste linie te herschrijven naar simpelere uitingen.

coolminds-popover

Daar waar meer content wenselijk is, zijn popovers voorzien, zie bijvoorbeeld de popover bij de ‘diensten’ keywords. Detail pagina’s met betrekking tot cases in ‘Ons Werk’ werken volgens het lightbox principe.

Het ontwerp combineert de in de briefing voor de klus genoemde wensen met recente, en opkomende, trends in webdesign; forse typografie, focus op content, geen rommel; minimal, flat, responsive en een lichte verwassen kleurstelling.

De nu gebruikte Museo is een prima font, en doordat het al in het Coolminds logo gebruikt wordt, een goede basis de site, hier zit dus ook nog een verwijzing naar de ‘oude site’. Het beeldmerk is bewust weggelaten; beeldmerk en woordbeeld zien er niet bij elkaar ontworpen uit, iets wat dieper graven op internet bevestigd. De Museo vervangt daarmee het CM-beeldmerk als herkenbaar element voor Coolminds.

coolminds-team-controls

Niet uitgewerkt, maar wel bedacht, zijn subtiele CSS-animaties, zoals animatie on scroll. In dit ontwerp geen parallax. Bij het scrollen wordt een aantal visueel sterke elementen opgebouwd en een aantal controls worden bij passeren geduid. Voorbij de 100px scrollen maakt dat het menu een een vaste balk met kleiner logo van boven het beeld in animeert. Hover states mogen ook kleine slide en fade animaties bevatten.

Context: een proof-of-concept applicatie

context

Als sollicitatieopdracht een semi-werkend interactief woordjes overhoor applicatie gebouwd. De uitdaging voor deze proof-of-concept was om mee te gaan met de trend van minimale interfaces; dus geen traditionele inputvelden (wat je verwacht dat editable is, is dat ook), opslaan gaat automagisch – de UI bestaat dan in de basis alleen nog uit een knop nodig om nieuwe vakjes bij te voegen en eventueel te deleten. Dit is het deel waar de focus van het uitwerken van de functionaliteit op ligt; het is mogelijk titels, teksten e.d. te editten en woordjes toe te voegen of te deleten, overige functionaliteit is niet uitgewerkt.

Er kan begonnen worden met een bestaande vaste lijst – als een element niet editable is, verschijnt daar een ‘locked’ icoontje bij. Ook is er rekening gehouden met langere beschrijvingen voor een woord in kolom 2, zodat deze applicatie breder inzetbaar is dan alleen voor talenlijstjes.

Sovon Vogelatlas Bannerkit

bannerkit-psd

Samen met Thoas.nl een bannerkit voor de Vogelatlas ontwikkeld. Deze kit werd zo ontwikkeld dat op simpele wijze teksten en achtergronden aanpasbaar zijn; alle formaten banners staan in 1 PSD, maar door het vervangen van 2 externe files, en het slim inzetten van slices, is met 1 menu handeling en een Save for Web een complete nieuwe kit te genereren. Achtergrond van deze oplossing, is dat de kit nu, door Sovon zelf, breder dan voor alleen de Vogelatlas ingezet kan worden.

Voorbeeld 1 – met een kleurstelling gebaseerd op de Vogelatlas huisstijl. En Voorbeeld 2 – om te laten zien dat de uitstraling ook heel anders kan zijn.

Naast de kit, bestaande uit een aantal gestandaardiseerde banner formaten, werd een cinematic animated banner ontworpen.

Dutch Premium Horses

Ontwikkeling van huisstijl een communicatie voor Dutch Premium Horses, een startende onderneming die paarden en expertise naar China uitvoert. Er werden voor DPH, naast een standaard correspondentiereeks, presentaties, flyers en rollbanners ontworpen. De kleurstelling is gebaseerd op de in China belangrijke kleuren blauw en goud, terwijl nadrukkelijk weggebleven is van de ‘slechte’ kleuren wit en rood. De DPH site is op WordPress gebaseerd, met from scratch gebouwde templates en een custom op paarden gerichte admin sectie. De site is tweetalig opgezet.

Dijkerman Stables

Met Thoas een visitekaartje voor Dijkerman Stables ontworpen.

Visitekaartje voor Dijkerman Stables / Stal Dijkerman

Bouwbedrijf Joorse

Voor Bouwbedrijf Joorse werd met een minimaal budget een basis site met een simpel Flash intro ontwikkeld. Zonder budget voor logo, huisstijl of iets anders dan een werkende, door hen zelf goed te onderhouden website is door middel van een goed gekozen font toch een eigen identiteit neergezet.

Sloterwijk & Heinen Bedrijfsmakelaars

Sloterwijk & Heinen is een jong makelaarskantoor in Emmeloord waarvoor het logo, de huisstijl en site ontworpen en uitgewerkt werden. mr10 was in deze verantwoordelijk voor alle uitingen van Sloterwijk & Heinen. Er werd bijvoorbeeld autobelettering, presentatiemapjes, rolbanners, flyers, vlaggen, raamdecoratie, borden en advertenties in de krant ontwikkeld.

De door mr10 ontwikkelde site is intussen vervangen; ten tijde van het oprichten van Sloterwijk & Heinen, was het begrip aankoopmakelaars nog niet ingeburgerd en de site was toendertijd ingericht om dat begrip te verklaren. In de loop der jaren burgerde de ‘aankoopmakelaar’ in en veranderde de focus van Sloterwijk & Heinen van aankoop- naar bedrijfsmakelaars, waartoe de site een upgrade ondergaan heeft.

Foto Retoucheren voor HU

Voor:
Ongeretoucheerde Foto voor de HU

Na:
Geretoucheerde Foto voor de HU

Neem contact op om een grote gedetailleerde versie toegestuurd te krijgen.

De Zuinigste Rijder

Screenshot van het project De Zuinigste Rijder

Een interactieve bouwplaat, waarbij je het uiterlijk en de accessoires op de auto zelf kunt bepalen, werd in opdracht van ARC-Amsterdam (nu Saatchi & Saatchi | Leo Burnett) ontwikkeld voor de campagne ‘de Zuinigste Rijder’. Deze Flash gebaseerde site heeft de mogelijkheid om je eigen patroon voor op de auto te uploaden. De bouwplaat wordt gegenereerd als PDF; die is te printen, zodat je je eigen auto ook daadwerkelijk kunt bouwen.
P.S. Het motorgeluid houdt na 3 keer op.

Interactieve PDF Reader

Deze uitgebreide applicatie werd in 2006 voor Zicht ontwikkeld. De opdracht was om de PDF met de begroting van Noord Holland online te kunnen presenteren. De in Flash ontwikkelde reader kon door een AMFPHP database koppeling de tekst doorzoeken, je kon bookmarks opslaan en en notes aan bepaalde pagina’s toevoegen. Het was mogelijk delen van teksten, losse pagina’s of spreads printen vanuit de applicatie. Pagina’s konden ingezoomd of als spread getoond worden. Alle kleuren, teksten en logo’s werden extern ingeladen (met als doel de reader breed in te kunnen zetten), de inhoudsopgave en bladerfunctie werden dynamisch gegenereerd.

Interactieve PDF Reader - 2 Pagina Spread   Interactieve PDF Reader - 1 Pagina Spread   Interactieve PDF Reader - Thumbnail Overzicht

De website URL en achterliggende databse zijn long gone – wat overblijft zijn deze screenshots en de source files.

Inertia Creative

Screenshot van het Inertia Creative project

Voor een Canadese partner werd een interactieve, creatieve Flash site ontwikkeld, waarbij elke sectie een navigatie experiment is. Deze site uit 2005 was zijn tijd ver vooruit, waardoor de site er anno 2011 nog steeds fris uitziet; alleen jammer van de verouderde nieuwsberichten.

Krant in de Klas

Voor Stichting Krant in de Klas heb ik een site ontworpen waarmee zij hun informatie en aanbod beter kunnen ontsluiten. De site heeft als doelgroep leraren en beleidsmakers. De ontwikkeling van deze site is gedaan door Acato. Daarnaast heb ik ook het logo en bijbehorende huisstijl ontworpen. Krant in de Klas is inmiddels Nieuws in de Klas geworden.

Sneaknacht

De Sneaknacht was een avond vol cabaret, literatuur, film, theater en muziek. Toendertijd hebben Thoas en mr10 de vormgeving van alle uitingen van de Sneaknacht gedaan.

Er was volledige vrijheid over de designs, en een deal met een drukker waardoor experimenteren met metallic inkt uit konden. Er werd gekozen voor een vast, afwijkend formaat voor de flyers, zodat deze op zouden vallen in flyerstands, en een terugkerend herkenbaar element in de vorm van het gestreepte logo.

Bekijk ook de flyers of posters voor de Russian Edition, de Verwen Sneak, de 1000 en 1 Nacht Sneak poster en de Sneaknacht on Tour flyer en poster.

De Sneaknacht reeks werd afgesloten met een Supersize Sneak, waarvoor een 3 bij 1 meter poster werd ontworpen.