Wix Platform Application
Editor System Icons
NOVEMBER 2014
THE CHALLENGE
Playful and Natural Set of Icons
Redesign and rebranding Wix Editor required a system of icons that could answer all the editor brand principles; simple & clear, friendly, fun & playful and meaningful.
Icons has an important roll making Wix Editor clear and easy to use
My Role
I was leading the effort of creating icons library. Part of my job was mentoring different designers in the company creating icon, and QA the final results.
-
Design new icons
-
Define how to use icons
-
Create clear guideline
PROJECT GOAL
Readability and Clarity
One of the main principles of Wix Editor is clear and easy UI, which would allow the user to focus on his content. To achieve that we created a set of line icons.
Line set of system icons was made to give light and easy feeling
One challenge that came up in the early steps of the process was that the user's content was competing with the editor interface, so to create a clear distinction and hierarchy between different parts of the editor, we created another set of bold icons.
Bold and black icons supported separation between the Editor interface and user's content
DESIGN
Designing a New Icon
When you design a set of system icons, it is really helpful if you also have a system in your process. Grid is the oldest design tool for creating consistency, adding different rules and principles, and you end up developing a guideline that would help to keep consistency and fasten the process.
The nice thing is that, later on, this guideline has been used by others to help other designers at Wix creating icons in other different products.
Art area & paddings (Example from icons guideline)
Shapes corners (Example from icons guideline)
Icons anatomy (Example from icons guideline)
PRINCIPLES
How to Use Icons
The advantage of using icons is they are fast and easy to scan than text. Icons are helping to understand the context, and adding clear distinguish, for example, when used in a list.
To promise correct usage of icons, I tried to cover all possible use-cases, adding "tips and tricks" that might help designers understand how to use icons in a complex application interface.
Hoe to use icons on buttons (Example from icons guideline)
As symbols, icons are "part of the language", it is wrong thinking that icons are "nice to have" or can be used for decoration. Using them smartly can increase understanding of the massage.
"External link" icon imply what would happen after pressing the link (Example from icons guideline)
Buttons with Icons
The best practice using icons in the button is followed by text, which always explains intention better. Some actions are used always, and those actions we will try to keep textual action.
The context is best to explain combining icon and text together (Example from icons guideline)
The button only with icons is perfect for second and third level actions which being used just occasionally, but still important to be discovered easily when it’s needed.
In any case, icon buttons should always follow with a tooltip presenting the textual action, displayed on hover (with or without delay).
Hovering an icon button, show a tooltip (Example from icons guideline)
CONCLUSIONS
Icons is a Visual Writing
A system icon is a symbol with semantic meaning used to convey a message, just like a word is being used in a different context in writing or speaking language, and like any language, it is on set of rules that are important to keep, in order to promise the message to be clear and coherent.
I must admit that when I started working on icons in Wix, I was sure that all I was required to do was create icons that would be pixel perfect and look good. But with time I saw that two different designers can understand and use an icon in such a different way, to the level that a user could see the same icon in two different places in Wix and get confuse cause every time it says something else.
So, to help designers gain consistency while using icons, and for saving myself reviewing almost every product that Wix release, I started creating a guideline that would help designers to keep coherent usage as much as possible through all Wix products.