Our aim with the refresh was to reduce the number of individual assets as much as possible, in order to make it faster and easier for teams to add to the system. In our previous icon set we had more than 220 icons x 5 size variants = 1,100 individual assets. This meant staying as close as possible to whole pixel or half-pixel values, which designers would find easier and faster to work with. The new weights needed to be easy to design when creating new icons.
With 1.5px and 2px, we were increasing the stroke-weight at 50% for the 16px sizes and 100% for the 24px sizes. In order to meet our goals for the project, the new weights needed to be noticeably bolder than before.
This decision was based on two key aspects: After rounds of iterations, we settled on the two new weights. We primarily used 1px stroke weight and we knew we wanted to increase it - but by how much? We tried several different options the bolder we got from where we’d been, the more we could see a clear improvement. One of the key steps in this process was defining the icon weight we would use going forward. For several months, Rob Bartlett embedded with the team to ensure a very close and successful collaboration. We’re going from 1px to 2px at 24px icon size.Įncore Foundation is responsible for all the core elements of Spotify’s design language. So, what’s new?Īlong with an overall refresh, the key difference is that we’re increasing the weights of our icons by changing the main stroke size. For the vast majority of icons, we’ve kept the current metaphor intact for this very reason so that users can find their way but enjoy a refreshed icon style.
#Spotify logo update
We wanted this update to feel like a seamless transition for end-users. Another one was to try and reduce the number of icon sizes we had to create for every single icon that was being added to the system.Įnabling a seamless transition for everyone One key aspect was to build on our recent switch to Figma by bringing the design source files for icons and creation flows there in full. We saw a need to simplify our icon system for teams in general. Over time, Encore systems had diverged and we set out to create a new set that could accommodate them all, making things more consistent and easier to manage.Ĭreating and managing icons wasn’t as easy as it should be We had a few different sets of icons to merge Most importantly, we also saw an opportunity to increase the readability of icons, especially when they’re sitting on top of a variety of different backgrounds. On top of that, we’ve also increased the size and weight of our typography, which made thin icons look a bit out of proportion. In the evolution of our visual language over the last few years, we’ve increasingly switched out text-based buttons for icons and made them more prominent in our UI. We wanted to revisit the weight of our icons based on a few things: The weight and thickness of strokes were too thin Together, we identified the key challenges they needed to address: To refresh our icons, one of our design systems teams, Encore Foundation, teamed up with Rob Bartlett, the skilled iconographer who worked on the 2016 redesign.
Our current suite of icons has been with us since the last redesign in 2016 - and while they’ve served us well, recently, we identified a need to update them, bringing them in line with the evolution of our visual language.
0 kommentar(er)
