CMD – Responsive Design
School opdracht – Responsive design
Voor het vak Vormgeving 2 kregen we de opdracht om de huisstijl van onze opleiding te onderzoeken. Zo konden we een responsive website ontwerpen voor de CMD opleidingspagina. We kregen beeldmateriaal, iconen, een kleurpalet en typografie aangeleverd. Hiermee heb ik een moodboard gemaakt. Vervolgens hebben ik verschillende deskstop voorstellen gemaakt. Daarna heb ik de tablet en mobiele versie uitgewerkt.
Project details
Vak Vormgeving 2
Datum November 2015
Werkzaamheden Ontwerp
Moodboard – CMD
De huisstijl van CMD is ontworpen door een creatief digitaal bureau, genaamd Grrr. Om de opleiding CMD meer een eigen gezicht te geven, is er een visuele identiteit ontwikkeld. Dit is geen huisstijl met eigen logo, maar een beeldtaal. Onderdeel van de beeldtaal is een serie iconen die staan voor de verschillende facetten van CMD.
De huisstijl wordt niet altijd door iedereen even consistent gebruikt in bijvoorbeeld PowerPoint presentaties en posters. Om een goede houvast te hebben bij het ontwerpen van het Responsive Design, heb ik een moodboard gemaakt. CMD staat voor creativiteit, technologie, design, web, geek cultuur, duurzaamheid, en de focus op de mens.
CMD – Desktop, tablet & mobiel
Per device heb ik in de lay-out kleine dingen aangepast. Ik ben begonnen bij het ontwerp voor de desktop. Daarna heb ik het ontwerp voor de tablet en mobiel gedaan. De iconen van CMD heb ik op verschillende plaatsen subtiel terug laten komen. Ook heb ik zoveel mogelijk fotografie in de tekst verwerkt, omdat de tekst nogal lang is. De content heb ik verdeeld door andere kleuren achtergronden te gebruiken. Geel bij mededelingen en agenda, grijs bij de blogartikelen en lichtgrijs in de footer.
Op de desktop en tablet heb ik de mededelingen en agenda aan de linkerkant gezet. Bij mobiel zijn deze naar onder verplaatst. De blog artikelen van CMD staan op de desktop in rijen van 2. Op tablet en mobiel staan deze onder elkaar. Ik heb de website overal zo consistent mogelijk gehouden. De lay-out is strak en overzichtelijk.
CMD – Desktop
CMD – Tablet
CMD – Mobiel
Breakpoint Graph – CMD
Om de Breakpoint Graph van dichtbij te kunnen zien klik je met je rechtermuisknop op ‘Afbeelding bekijken’. Vervolgens zoom je in door op de afbeelding te klikken.
