No meetups near you? Go ahead and start your own!
With support for Adobe XD coming in the next couple of weeks, it was time to take another look at our file icon system.
- Differentiate between a regular file and a library file
- Shouldn't require the user to "read" the icons to know which file format it is, a glance should be enough
- Proper contrast
- Work across different sizes
- Work on background colors ranging from white to nearly black
- A system we can re-use as we add more file formats in the future
How did we end up with this set? (see attached image)
(1) Icons we used for the first ~3 years after launching Abstract.
(2) Something we tested on our web app for a couple of weeks. The idea was right (the idea that bricks are library files), but it was impossible to differentiate them at smaller sizes.
(3) After dozens of explorations, we settled on this lovely set that looks a lot flatter compared to where we started, and really leaned into using a tool's key colors for the library icons.
L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
© 2019 Dribbble. All rights reserved.
Minimum 6 characters
Uh oh… We’re still waiting for our spam prevention code to load.