Style / Iconography

[erikapelser]

Iconography

Studio UI icons, symbolises a command, file, or specification. These icons are also used to represent common actions like create, save, edit, and delete.

The design of system icons is simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, with every idea edited to its essence. The designs ensure readability and clarity even at small sizes. Consistency aids user comprehension of icons. Use the existing system icons whenever possible and across different parts of the platform.

Clearance
Adequate space around the icon is needed to allow for legibility. As a rule, always multiply the icon size by 2 to get the clearance size
e.g the toolbar icons: Icon size 15px by 15px, and clearance around it 30px by 30px

Current Icon set for Studio
Here is a set of the existing icons used in Studio. There is much work to be done to get these more consistent in terms of size, shape and style

Icon States
A grid of the different states of icons, again, there are inconsistencies that needs to be addressed, like the blue hover state for 'Publish' this should be white, like the rest of the hovers in Studio

Icon States - on light background
This needs further exploration, as really this should have the same visual language, iconography and colours used as in the Admin side of the platform.

---

Working Files
All the icon SVG's live here
This illustrator file can also be found on GDrive
The Font Explorer icons can be found here.
FUTURE SUGGESTION:
I think its worth considering using opacity for icons to reduce the amount of 'shades of grey' needed. Its easier to convey the states; importance or hierarchy of certain information relative to others.