IOGT is a voluntary organization working for a substance-free and safer society. They influence drug and alcohol policy, carry out preventive initiatives, and provide support to those struggling with substance use, as well as their loved ones. Their goal is to make substance-free choices easier and to create an inclusive community for everyone.
Innsight Phase
The purpose of the solution is to create a community for people who actively choose to abstain from alcohol – for their own sake and for the sake of others. The website provides access to materials that support the target group’s engagement and informational work, and can be used to promote clarity and a more thoughtful approach to alcohol in society.
We associate significant alcohol consumption or substance use with things becoming "blurry." Boundaries are blurred, and you don’t think as clearly as when sober.
Design Phase
The concept is that the user makes an active choice by selecting a path filled with clarity and focus, where everything that matters in life is brought to the forefront. It’s about prioritizing oneself and one’s health, family, and friends, and moving together toward a clear direction.
The gradient functions as a directional element, visualizing the transition from unclear to clear – from past to future. The blue circle marks the user’s position in life and provides a clear anchor point in the interface. In this way, the concept’s idea of direction and clarity is integrated into the visual expression.
Highlighting Informative Content
A visual approach to connecting concept and UI is to highlight informative content. This makes the content clear and gives the user a sense of clarity when the information is presented.
A white gradient over the background color is used to soften the background’s intensity, emphasize the content, and create a clear visual hierarchy, while keeping the background color as an integrated part of the design.
Colors
IOGT is part of an international network with an established color palette. To ensure good contrast and readability, lighter shades are used as background colors. Dark blue serves as the primary color, providing contrast and authority for key components such as logo and icons, while ice blue is used as a secondary color on UI elements and navigation, contributing to a light and readable interface.
