Embracing flat design 2015-06-08
The Stet.io editor is continualy improving with minor tweaks here and there. Recently, however, it was redesigned with a new branding and some changes to the user experience. This redesign hopefully makes the editor more pleasant and easier to use.
First an overview, before the redesign version 0.3.X of the Stet.io editor looked like this (see right or larger).
The general feedback was negative, the editor looked and felt to complicated (so many icons) and it looked a bit bland.
More specifically the icons that users look for first and expect to be top left (load, save) are in fact on the right hidden below the tabs.
The quickstart popup helps, but only slightly.
There were two aims for the redesign, improve the UI to make Stet.io stand out and to improve the UX by organising the icons. The first was influenced by this proposed redesign for photoshop, whilst the latter has been on the todo-list for some time.
The first action was to choose a colour scheme and base dimension i.e. size of the icons. There are quite a few flat UI colour scheme websites that recommend swatches. For Stet.io the background colors are #262E30, first accent #3B494C, second accent #6C7A89 and highlight #95A5A6, colors are #E2E2E2 and #008080. The latter two have been choosen with a reduced contrast in mind, so as to reduce eye strain. The swatch is shown below, in the same order as written
As for the base dimension 36px was chosen as the largest size that didn't overly reduce the available editing space. Equally as before all the icon buttons will be square, with the icons themselves staying the same size. This gives the icons a metro like style.
To improve the user experience, the load + save, copy + paste, undo + redo have been moved to the top left in that order. This follows almost every other application in existance. Secondly the icons have been grouped into tools, transformations, views and settings.
Back to blog