01. the client
compeo helps organizations to strive for a circular use of IT hardware. By drawing up a plan at the time of purchase, the hardware can be used sustainably throughout it’s entire life cycle. They help organizations to use ICT hardware in a more sustainable way based on life cycle thinking.
When the hardware no longer can be used within the organisation compeo evaluates the possibilities of selling, refurbishing, reuse and recycling.
joostbotter – compeo – UI – image 5
joostbotter – compeo – UI – image 6
joostbotter – compeo – UI – image 7
joostbotter – compeo – UI – image 8
02. the brief
about the project
Create a fresh webdesign that reflects compeo’s mission and vision to improve hardware sustainability and put the main focus on the advantages we as a company have to offer. Showcase a clear call to action and incorporate a modern look & feel.
what i'm aiming for
compeo is a start-up focussing on sustainable use of ICT hardware. For this project there were a couple of demands like a modern feel, big lettering and a wide/non-boxed design. Other then that I had a carte blanche to create the design.
I wanted to express their vision of sustainability and life cycle thinking in a modern and fresh webdesign, show what they do & what their services are while retaining an open and light design.
04. design elements
it's in the details
Every design consists of smaller core visual elements that together create a certain look & feel and hierarchy. For this project the colours, the fluid shapes on the background, icons and illustrations provided the design with a clear focus and direction for the visitor. The individual design elements can easily be re-used on other pages to create consistency for the
users people visiting the website.
04 a. typeface
For this project I decided to use Muli. Of all tried-and-tested typefaces, it worked best with the company’s prior designed branding, mission and vision and the clients demand on the look & feel the website should get.
Muli is a minimalist and unisex sans-serif typeface that incorporates a European edge while remaining approachable. It is sophisticated enough to be used for a reasonable new market and is easy to read on many different applications.
The typeface is designed mainly for use as a display font but is useable as a text font too.
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. colors
Colours play a very important role on the website. They complement the modern feel of the website but also affect how the website can retain users and lead them to the right on page elements.
In this design bold colours are used on certain parts of the site to highlight call to action, offers or services and as a key part in attracting a potential customer to clicking and finding out more. Lot’s of whitespace is used so the bright, bold and vibrant colours will not distract the user from their on-site goal.
04 c. icons
The chosen icons support the text content or in some cases act as a replacement. The icons in this project enhance the chosen colour palette and communicate a visual language by using widely recognised images. They are also used to increase the readability of the webpage and direct users to the most valuable and important elements of the homepage.
- Icons increase the readability of the content.
- Draw attention to the most important elements.
- Support text content or in some cases replace it.
- Quickly highlight crucial functionalities.
04 d. illustrations
As well as any of the other core visual elements an illustration is not only a decoratieve element but also a functional one. By using the right illustration(s) it makes the message and interactions easier, clearer and more visual appealing.
They create a visual trigger that can quickly transfer the necessary message on to the user. As any other visual they are transmitted to the brain much faster and have a tendency to stick better in long-term memory. Illustrations are also highly effective in growing brand awareness and recognizability. Something every start-up can use lots of.
The illustrations used in this project are all designed by Panca Okta.
compeo – UI – Illustration 2 – joostbotter
compeo – UI – Illustration 1 – joostbotter
04 e. buttons
Buttons are fundamental UI elements that have the power to compel users to convert and carry out an action. They are the middleman between the user and the product. Creating the right button keeps the conversation between a person and a machine going.
It should go without saying that the most important aspect of a button is that a user should immediately identify it as a button. The size, shape, colours and dropshadow make them stand out between the rest of the core visual elements so they can be easily found. By using different colours the button with the primary action has the strongest visual weight.
05. the result
All the core visual elements come together in a modern interface which strongly focusses on the services, mission and vision and USP’s of the client. All combined they give a fresh, modern look & feel while still providing a clear call to action and delivering a consistent user experience.
Have a great idea? Like what you see? Great, i'm available.
Feel free to get in touch should you need any help with your project or if you’d like to build beautiful, meaningful things together. Complete the form below and I will contact you shortly.