Work done at and for DIGITAG  /  UX and UI Design  /  Made with tools: Pen & Papers – Post it – Gloomap - Sketch/Adobe XD – Invision - Adobe illustrator
CEFIC is a European industry specialized in chemistry. CEFIC asked Digitag to revamp their entire website, with the objective to be more readable, to restructure the information, to remain flexible for the future, all with a more refined design.

Today, Cefic and Digitag are still working together on optimizing and improving the website; by creating new content, new pages and new features.
#1 Sitemap
Based on the content of the old website, the new content that the client wishes to add and the objective of the client and the user, we defined the architecture of the website.
#2 Wireframes
Then, we identified the different templates, and their structure according to their use and their place in the site.

At this point, we brainstormed as a team to work on a creative concept that will follow the whole website: We turned to a concept that reminds us of the principle of turning the pages of a book/report. To do so, we used a panel logic opening from right to left.
The main content of the page is in the center, a breadcrumb trail on the left reminds us of a book stack, and on the right, depending on the pages, a menu or a panel opening with the content or an aside.
Wireframes of main pages and templates
#3 Design
We decided to go for a very pure design with only the two main colors of CEFIC: orange and gray.
The main objective is readability and content.
Orange is the primary color that highlights the action and the main elements. And the grey is present to create depth.

Mockups are available on Invision
View of some pages. The expanded pages are below.
Main page expended:
Navbar and Megamenu
Homepage
Short Homepage fort "Policy Matters" section
First sub-page level of "Policy Matters".
Second sub-page level of "Policy Matters".
News Archive page
News Detail page, exemple of open panel.
Example of the use of the panel for the filter.
Exemple of flexible content page
#3 Responsive
Declination of the design for the responsive.
#4 Design system
Organization and documentation of the graphic components that build the design of the website, for an efficient communication to the developers and to ensure a consistent adaptation of the design in the future.
#5 Site Maintenance
After the development of the site, I continued to adapt the design of the site; working on new visuals, new pages and wordpress management. I worked closely with the developer and the client, using Gitlab to manage demand and tickets.
CEFIC
Published:

Owner

CEFIC

Revamping of CEFIC's Website. Work done at Digitag

Published: