Over the following years, Readymag’s user interface changed. Hundreds of new features were being added, just as hundreds of flaws were being fixed. Weak points were rethought and redesigned. This process is ongoing. Today, Readymag's UI is still far from our ideal; but there’s something there that many users have fallen in love with. Perhaps, it can be called a human touch. In a world where every product claims to be a problem-solving tool with copycat interfaces, Readymag stands out.
Readymag came out in 2013, when designing a freeform layout in your browser without coding was still brand new. The interface was designed completely in Photoshop. Can you imagine that today? With colorful buttons and interactions, it looked fresh and unique. It didn't look like anything designers were using day-to-day at that time. In many ways, it was a brave experiment.
Readymag user interface in 2012, designed by Anton Herasimenko.
What is special in the Readymag user interface? It’s hard to say for sure, but we all feel it. I made an attempt to deconstruct the way Readymag is designed, over time, by breaking our philosophy down into small chunks — a handful of design principles for you to explore below.
Stas Aki, product designer
Readymag user interface in 2016
The user interface represents the sum of possible experiences, not of visual elements. The way you accomplish tasks with a product — what you do and how it responds — that’s the interface.
So, the structure and appearance of the interface determine what is and isn’t possible.
Structure and appearance are defined through conveyed meanings.
All possible experiences should also be communicated through conveyed meanings.
Once we accept that there is a meaning to be told, it’s useful to think of interface design as a communication process. There is not only a message, but also a sender — as well as a recipient. There has to be a common thread that both of them can understand, otherwise the communication fails.
1.1
1.12
1.13
1.14
1.2
Each piece of our grid control inputs is designed to visually convey its particular function.
It is crucial for every feature to provide a recognizable function. An interface designer should always wonder how a user will know an action is possible.
Preferably, the user interface should be self-explanatory (i.e., easy to understand without any tutorials or support services).
All features should also be discoverable in the interface, without external help.
An interface should keep users informed about their actions and any changes.
2.1
2.2
2.3
2.4
When the interface is self-explanatory, it becomes easy to learn and use.
When a font parameter is being adjusted, the user needs to see what has been changed with the type setting on the page.
When the user uploads an image or processes a payment for more than a second, the interface should communicate that.
Similarly, when the project is published or a font parameter is adjusted, the user needs to know that and perceive changes quickly.
A perfect user interface for a graphics editor is WYSIWYG (What You See Is What You Get).
In a physical world, you simply move objects with your hands if you want to move them. You don’t go to another room, press some button there, and then come back to the first room to see the result. In the digital space, the result of the user actions should be also shown right away; without shifting between panels, windows and preview modes.
Minimize additional layers between the interface and user, and maximize operations performed directly via content.
User attention is a precious resource that should be treated with care. As an interface designer, you must reduce the load put on the user.
Avoid visual clutter. Construct your interface out of only functional elements.
Disclose your interface gradually. As task A and task B often differ, focus the user's attention on whatever part of the UI is best suited to the task.
2.41
2.42
2.5
2.5
2.52
2.6
2.61
2.62
The Text widget padding — space around an element's content, inside of bounding box borders — can be adjusted by directly interaction with the bounding box edges.
Like other widget settings, the Align Controls open only when you need them.