Welcome to IZI by EDF.
These guidelines communicates our intentions as a brand. It highlights our unique personality and our visual design system which guides everything we put into the world. This document acts as a reference tool to maintain a consistent design language as we develop our platform. This is how we tell our story.
The brand aims to serve as a bridge between our clients and the artisans. The main goal is to create an approachable atomsphere where our users feel invited to browse the site and discover the offers. We also want to communicate trust and expertise; it's simple, it's IZI.
The logo is an extension from the main EDF logo. Think of the turbine from the EDF logo as a brush- each brush-stroke on the IZI logo, is a stroke with the turbine on paper.
Our logo symbolizes playfulness and de-dramatizes the notion of home renovations. It evokes a notion of being approachable, which refers to one of our main purpose.
Download the logo here.
The design team at IZI follows the 8px rule. Every measurement should be divisble by 8. This allows for continued consistency across teams and platforms. It also allows for quicker design process and easier design-decisions.
If you want to read more about the practise, check out Google's nifty handbook.
Color is one of the cornerstones of our designsystem. It makes our brand stand out and helps keep consistency across teams and platforms. We use colors to highlight certain areas and help guide our users through their journey and intended destination. Our colors are the key to set the tonality and to paint the scene of where our users navigate on their journey.
We have chosen a system of primary, secondary, and additional colors.
With bold, bright and playful colors, we tell our story.
Our primary typeface is Noto Sans. We use this as a body typefont as it works extremely well across all platforms. It renders fast and is optimized for web usage.
Our additional typeface is TT Norms. We use it in areas we want to catch the user's attention, such as titles and CTA's. It's more of a traditional sans serif with a simple, clean and modern look. As we rely heavily on imagery, icons and patterns on our site - Norms offers a symetric form that is easy to read and balances well with our somewhat busy site. Just a heads up - don't forget to turn off the ligature.
We also use a logic of desktop vs responsive. In the sketch file, we separate all font sizes based on screen width. That means that anything below 769px is considered as responsive.
Shadows are a great way of creating depth perception. We use it mostly when we want to highlight certain areas - both on hover interaction and on static components.
The logic is inspired from the 8px rule described earlier. The density of the shadows multiply for each iteration. Each weight doubles as you increase.
We try to not use the shadows too often as it quickly can become over-powering.
To streamline and simplify our work-progress and hand off to the integration, we've chosen to keep it simple by using Font Awesome's library.
Of course, Font Awesome can't cover all cases. Custom icons are allowed. Though, only if FA's library lacks the icon, or if argument to create a custom icon is strong enough.
Download the SVG's here.
We use illustrations as a visual aid when embarking the user into their experience. It's important that the drawings take into consideration the context, the modality of the user and the end goal. To be direct, clear and meaningful.
We also welcome humor into the illustrations. If we can manage to put a smile on our user's face, we count that as a win! Not only that, but psychologically, it puts the user in a positive mental state. This leads to a positive experience and (hopefully) a positive exit.