« 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.