DHI Group

Pure minimalism meets vibrant energy: A striking contrast in design

©2024

Design system design. DHI Group
Design system design. DHI Group
Design system design. DHI Group
Front page DHI Group, UI design

UI/UX Design Studio

Copenhagen

DHI needed a new website, and I had the exciting opportunity to create both a design system and the website itself. Building on the elements of the design system, I crafted a fresh UI/UX for their online presence.
We kicked off the process with a series of workshops to define our objectives and set a clear direction. From these sessions, we created a sitemap that became the foundation of our project. First, we developed UX wireframes to map out all content, then I dove into building the design system’s core elements, ultimately shaping the website’s prototype.
Our aim was to create a sleek, user-friendly website where images would take center stage. DHI specializes in software and knowledge-sharing focused on water and our natural world. Their mission centers on fostering a deeper understanding of water environments—by covering the entire water cycle, they’re pioneering new ways to utilize, protect, and coexist with water while advising on the preservation of water-related ecosystems.
Capturing the essence of the natural world DHI works with and reflecting it on the website was crucial. I placed great emphasis on impactful images that embody everything DHI represents: sustainability, conservation, and expert guidance on protecting our environment.
To balance the vibrant, life-filled visuals, we chose minimalist yet bold text and graphic elements. DHI is a Danish/international engineering firm, leveraging uncompromising data and knowledge to advise communities and businesses. We developed a design style that’s brutalist and minimalist—a stark contrast to the lively images. With these refined guidelines, we established DHI’s new digital identity. The color palette draws inspiration from marine environments and references DHI’s digital bestseller, “Mike,” grounding the site in DHI’s world of water expertise.

If you want to learn more about the process or want to bring another solution to life, feel free to contact Manna Studio

Block UI design for the DHI Group. Design system

Elements from the design system were integrated as building blocks within the various sections of the website. This approach ensured consistency and coherence across the site while also streamlining the development process

Figma
Work

Figma Work

Gain complete control of the design process with a designsystem, ensuring consistency across the brand’s visual identity (CVI). Above you see a sneak peak of the designsystem made for DHI Group.

Examples of prototype designs created for the DHI Group website

Ipad visual DHI Group, UI design
Ipad visual DHI Group, UI design
Ipad visual DHI Group, UI design
DHI GRoup design in Figma. Design process
DHI GRoup design in Figma. Design process
DHI GRoup design in Figma. Design process

Design system

We deliever concept and design for digital solutions

Design system

We deliever concept and design for digital solutions

Design system

We deliever concept and design for digital solutions