EF UI Design Kit
EF UI Design Kit | 2018
The EF UI Design Kit is EF's global digital design language. It aims to create consistency across touch-points within EF's 22 different business units.
EF Central Creative Studio, Lucerne
:quality(90)/f/51421/1211x807/ca3af3c7eb/fonts.jpg)
:quality(90)/f/51421/1097x738/9a3a1aebb0/tags.jpg)
:quality(90)/f/51421/980x653/603b8a4ca3/colors.jpg)
:quality(90)/f/51421/1710x1140/a20595c371/ef-ui-kit-grid-4.png)
The foundation for a more user-friendly and beautiful digital EF experience.
The EF UI Design Kit lays the foundation for EF to work towards a more user-friendly and beautiful digital experience. It was initiated to increase productivity, improve quality and create consistency across products and teams.
The EF UI Design Kit is an ecosystem consisting of an internal site with documentation, a Sketch file and an HTML/CSS framework.
:quality(90)/f/51421/2508x1407/ee9f6a48cf/uidesignkit-sketchfile.png)
The EF UI Design Kit includes a Sketch file, a site with documentation and an HTML/CSS framework
Defining the minimum core set of reusable components
All EF's businesses have to be distinguishable from each other but still belong to the same EF brand and ecosystem. The EF UI Design Kit aims to include a core set of reusable elements. Outside the core designers are encouraged to add individual product expression.
:quality(90)/f/51421/3024x4032/fccc74c5b0/5ec73f27-282a-4d27-b3b3-187f526f6181.JPG)
:quality(90)/f/51421/4032x3024/6589142a08/26f59353-420f-4132-8759-cda69ec9cfad.JPG)
Introducing the EF UI Design Kit to the organisation.
To introduce the EF UI Design Kit designers, developers and product owners were invited to participate in a series of workshops across EF's main locations.
These workshops introduced the design teams to the setup, use and application of the EF UI Design Kit, followed by a creative exercise where participants where tasked to create a design using the EF UI Design Kit Sketchfile.
:quality(90)/f/51421/4800x2316/4a1d5271d4/frame-2.png)
:quality(90)/f/51421/2301x1800/ace7712b4f/thumb.jpg)
:quality(90)/f/51421/1920x1080/e655b160f5/hero.png)