Darkmode Design
ITS enhances higher education and research in Sweden by developing, managing, and operating IT systems for universities and colleges. For this project, I created a darkmode version of their University Admissions website.
My Role: Solo designer
Timeline: Feb 2024 - Mar 2024
01
Problem Statement
The goal of this project was to introduce a darkmode option to the current website, offering users the flexibility to switch between light and darkmodes. The challenge lay in translating colors from light to darkmode while maintaining adherence to accessibility standards, improving user experience, and ensuring visual appeal consistent with our brand colors.
02
Research
For this project, I delved into the best practices and UI considerations for designing dark mode, uncovering several key insights.
Use of colour
Research suggests that in dark mode, colorful elements should be used sparingly to prevent eyestrain, with most of the palette consisting of low-light colors. Muted tones are recommended, and it's important not to translate all colors directly into a dark mode version. With this in mind, I decided to remove distracting colors and adjust the brand's blue colour to a lighter tone to comply with WCAG standards.
Opacity
An article highlighted the importance of using opacity to create a visual hierarchy and reduce eyestrain in dark mode. The recommendations were:
87% opacity for high-emphasis text
60% opacity for medium-emphasis text
38% opacity for disabled text
While I used these guidelines as a reference, I made adjustments in the final design to ensure the contrast met accessibility criteria.
03
Concept Development
To develop the UI concept, I created multiple versions of the website, experimenting with different color combinations and shades of black. The final result is a dark mode design featuring subtle hints of blue, giving the website a softer, calmer feel that complements the brand colors.
04
Outcome & Takeaways
This concept still requires usability testing and further user research before implementation. The design allows users to mark courses they’re interested in, automatically adding them to the course planner. Within the planner, users can remove courses, manage favorites, add to "My Selection" for final selection, and prioritize courses for reflection in the "My Selection" tab.
Through this project, I learned several key lessons:
Clear titles are crucial for user understanding; vague titles can complicate a tool unnecessarily and affect users' cognitive schema.
Adding too much functionality to visual elements, like the time visualization, can confuse users.
Simplifying design elements, such as removing functionality from the timeline, can enhance clarity and usability.
Aligning new features with existing website behavior and placement can improve user familiarity and ease of use.
This approach may not suit all projects, but it proved effective here, particularly in projects with multiple buttons and user choices.
