Scroll to top
© 2020 joostbotter
Back
UI design

UI ontwerp voor compeo

Scroll

01. de klant

over compeo

compeo helpt organisaties duurzamer om te gaan met het gebruik van ICT hardware en streven hierbij naar een circulair gebruik van IT hardware.

02. de opdracht

over het project

Ontwerp een fris webdesign die de missie en visie van compeo uitstraalt en leg de focus op de voordelen die ze als bedrijf te bieden hebben. Maak gebruik van een duidelijke en heldere call to action en verwerk in het ontwerp een cleane en moderne uitstraling,

03. het doel

waar ik naar het gestreefd

compeo is een jong bedrijf die zich richt op het verantwoord gebruik van ICT hardware. Voor dit project waren er een aantal eisen zoals een moderne uitstraling, grote en duidelijke tekst en een brede/non boxed ontwerp. Verder had ik bij het ontwerp van deze pagina de vrije hand, 

Met dit ontwerp wou ik de nadruk leggen op hun visie van duurzaamheid en life cycle thinking in een moderne en frisse website, duidelijk tonen wat ze hierin kunnen betekenen en wat hun diensten zijn maar wel een open en licht ontwerp behouden.

04. design elementen

elementen van het ontwerp

Ieder ontwerp bestaat uit een aantal visuele elementen die samen het effect, de uitstraling en hiërarchie bepalen waarmee het doel van het product wordt behaald. De focus lag hier voornamelijk op de frisse, heldere en sprekende kleuren, de vloeiende vormen op de achtergrond en het inzetten van de iconen en illustraties om het ontwerp een duidelijke focus mee te geven en de bezoekers mensen de juiste sturing te kunnen geven.

Alle individuele elementen zijn zo ontworpen dat ze eenvoudig op de overige pagina’s hergebruikt kunnen worden om zo een consistente beleving van de webshop te garanderen. 

04 a. lettertype

i'm very font of you

Bij dit project heb ik gekozen voor het lettertype Muli. Van alle lettertypes werkte deze het beste samen met de eerder ontwikkelde branding, missie en visie van het bedrijf en de gestelde eis qua uitstraling die behaald moest worden.

Over Muli

Muli is een minimalistische unisex sans-serif lettertype met een Europese en toegankelijke uitstraling. Het is verfijnd genoeg om te gebruiken op een redelijk nieuwe markt en is op vele verschillende toepassingen goed leesbaar.

The spectacle before us was indeed sublime.

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

04 b. kleurgebruik

uitstraling en sfeer

Kleur speelt een hele belangrijke rol in het ontwerp van een website. Bewust en onbewust zorgen ze al direct boor een bepaalde associatie. Correct ingezette kleuren versterken de uitstraling van de website en hebben invloed op het vasthouden en het sturen van de bezoekers op de verschillende pagina’s.

Sterke kleuren wordt in vooraf gekozen onderdelen van de website ingezet om zodoende de call to action en het aanbod te benadrukken. Kleur speelt dus een fundamentele rol in het aantrekken en overhalen van een bezoeker om aan een onderdeel van de pagina aandacht te besteden. Er wordt gebruik gemaakt van voldoende witruimte zodat de sterke & felle kleuren de gebruikers niet afleiden van hun on-site doel.

04 c. iconen

sturing en ondersteuning

De gebruikte iconen ondersteunen de content van de pagina’s en kunnen in sommige gevallen content zoals tekst ook vervangen. Ze versterken de gekozen kleuren van het ontwerp en communiceren een duidelijke visuele taal door het gebruik van breed herkenbare afbeeldingen. Ze worden tevens ingezet om de leesbaarheid van de webpagina’s te verbeteren en de bezoekers naar de meest waardevolle en belangrijke elementen van de pagina te sturen.

  • Iconen vergroten de leesbaarheid van de content.
  • Trekken de aandacht voor de meeste belangrijke elementen.
  • Ondersteunen en in sommige gevallen vervangen de tekst.
  • Geven snel en duidelijk de belangrijkste functionaliteiten aan.

04 d. illustraties

Illustraties zijn niet alleen decoratieve elementen maar ook functioneel. Door het gebruik van de juiste illustraties worden de boodschap en interacties verduidelijkt en wordt het ontwerp en het doel van de pagina helderder en visueel aantrekkelijker.

Op de juiste manier ingezet zijn ze een visuele trigger die snel de benodigde boodschap kan overbrengen op de bezoekers. Beeld wordt door het brein vele malen sneller verwerkt dan tekst en worden over het algemeen ook beter opgeslagen in het lange termijn geheugen.

Illustraties zijn ook zeer effectief in het vergroten van herkenbaarheid en merkbewustzijn. Iets wat iedere start-up natuurlijk goed kan gebruiken.

De illustraties in dit project zijn allemaal ontworpen door Panca Okta.

04 e. knoppen

Knoppen zijn fundamentele UI elementen welke in staat zijn de bezoekers om te halen om te converteren en een bijbehorende actie uit te laten voeren. Ze zijn zogezegd de schakel tussen de mensen en de website. De inzet van de juiste knop zorgt ervoor dat de interactie tussen beide blijft bestaan.

Het belangrijkste aan een knop is natuurlijk dat het direct als zodanig herkenbaar is. Het formaat, de vorm, de kleuren en slagschaduw van de knoppen zorgen ervoor dat ze snel en eenvoudig herkenbaar zijn. Door gebruik te maken van verschillende kleuren kunnen er meerdere acties gekoppeld worden aan de knoppen zonder dat de primaire actie aan kracht onder doet.

05. het resultaat

homepagina ontwerp

Samen vormen alle gekozen en ontwikkelde design elementen een moderne interface die zich sterk richt op de diensten, missie en visie en de unique selling points van compeo. Gecombineerd geven ze een cleane, frisse en moderne look & feel met een duidelijke call to action en een consistente gebruikerservaring.

Heb je een goed idee? Bevalt het wat je ziet? Ik ben beschikbaar.

Neem gerust contact met me op als je hulp nodig bent met een (design)project of als je samen mooie producten met een toegevoegde waarde wilt neerzetten. Vul onderstaand formulier in en ik neem snel contact met je op.