šŸš‚ SteamĀ UI Redesign

2019 - Personal project

A UI redesign of the online PC game store's library and shopfront pages as a personal project. Aiming to update to a more modern style while decluttering and reprioritising information for users. I should also mention that this project started before the 2019 Steam library update. 'Summer Sale' artwork by Ann-Sophie De Steur

šŸ Ā Starting point

To begin the project, I listed the possible issues or pain points with the product's design at the time.

šŸ“š Ā Iteration

I felt it was important to get the 'game cards/tiles' to feel right first, as they're arguable the most important element of Steam's front page. From there, IĀ focused on the navigation, introducing a sidebar that's consistent with the library page.

šŸ–„ļø Ā Final Mockups

Below is a collection of other final mockups, including the 2 at the top of this page, as well the colours used throughout.

Blue - Lightest
#c3dcee
Blue - Light
#87c2ed
Blue (Brand)
#54adef
Blue - Dark
#176aa8
Blue - Darkest
#14476e
Low Contrast Dark
#3f3f3f
Dark (Brand)
#221f20
White (Brand)
#ffffff
Disabled (Light)
#c3c3c3
Low Contrast White
#e6e6e6
Disabled (Dark)
#545253
Success & Sales
#49d435
Errors & Alerts
#e93d37
ā–²