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.

user interface

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.

UI elements

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


shape

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

text widget

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.

The interfaces should be easy to understand, learn, and efficient over time.

The ideal humane interface reduces the interface component of a user's work to pure habituation.

A well-designed human interface should not be split into beginner and expert modes. Instead, think of the interface as a beginner-to-expert journey.

The learning phase of working with any professional interface requires conscious attention. Simplicity, clarity of function, and the visibility of a user interface helps beginners learn.

The expert phase is characterized by fast unconscious use.

3.1




3.2




3.3






3.31







3.32

3.33





3.34







3.35

According to Jef Raskin, qualities like suitedness to the task and modelessness lead the way for UI to be habitual.

Users shouldn’t have to get lost among multiple elements. There should be only one way to perform a task. Jef Raskin wrote, the more ‘monotonous’ an interface, the more quickly it becomes habitual.

Avoid alternate modes that can shift the user's attention. And if you have them, make sure they are distinctly marked.

Let’s look at the round buttons at the bottom of the screen. When the Pages Menu is open, tapping the button switches on the Settings Menu. When the Settings Menu is open, tapping the same button will open the Pages Menu again. Users didn’t notice the buttons’ switch, and weren't sure how to open the Settings panel. We made a mistake trying to save space on the page.

Non-split interfaces are more consistent for users, and easier to maintain for designers and developers.

3.36

Reliability is often thought of as purely technical. But a fairly reliable interface can still be designed on top of a system that isn’t 100% reliable.

The system should never lose any work a user has done or any information they have entered.

All actions must be auto-saved.

It should be possible to restore large chunks of content, like pages or projects.

4.1






4.2




4.3


4.4

Design has always been about invention. On the way to something new, designers are constantly experimenting. Even a simple design task requires figuring out how to build a coherent message out of raw content.

Design software should provide an enjoyable environment for creative work.

5.1








5.2

A beautiful, well-crafted interface earns the trust of its users. It reassures them that the product is reliable and could be in use for a long time.

5.3

All elements of the Readymag UI fall strictly into the 8 px grid. Thus, the UI gains an invisible consistency and clear aesthetics. The design process is determined by necessary order and restrictions.

To support problem solving, a design tool should also encourage designers to explore and venture into the unknown. In such an explorative process, a user might end up in a place where no one else has been before. The creation of something outstanding becomes possible.

A design tool should inspire its users to create. Otherwise, it is not a design tool.

5.4










5.5

As a product grows, new features are always being added. The interface tends to get messier. As a result, users need to apply more effort to use the interface.

Complexity harms everyone.

For developers, it leads to incidents and bugs. The service delivery system becomes less reliable.

For users, it becomes time-consuming to learn and work with. The creative process slows down.

So: keep things simple. Though simplicity is one of the most important principles behind good design, it’s still one of the most neglected.

Don’t hesitate to trade off other values for simplicity. No matter how complex the overall system is, there is no excuse for complicating simple tasks.

Features are very easy to add, but almost impossible to remove.

6.1






6.2


6.21




6.22




6.3






6.31






6.32

Simplicity doesn’t happen by itself. Simplicity has to be designed.

Simplicity comes from a thorough understanding. The point here is to know the ins and outs of the process. If you do not, the result of your efforts will be ‘simplistic’ rather than simple.

While designing a feature, constantly ask yourself: which elements convey information, which elements serve as decorations, and what will happen if you remove the element.

Get rid of anything that is not essential.

Add multiple functions to a single element.

6.4



6.41







6.42







6.5



6.6

In Readymag you can't nest groups inside other groups. Untill it becomes an absolute nesessity for users' needs, we'll keep this feature as simple as it is.

A red dot indicates the current page. A red lock icon means that the page is private.

Look for universal solutions to solve general problems.

Let's assign both of these states to one icon.

6.7

6.8

A numerical input that adjusts letter spacing can also be used to adjust kerning — the individual spacing between two characters.

Remember: even if a way of doing things has remained unchanged for a long time, it doesn’t mean it’s still the best way. It may also mean that no one has tried to find a simpler way.

An interface is communication.

An interface should be intelligible.

An interface should be habitual. An interface must be reliable.

A design interface should be aesthetically pleasing.

Entropy is the main enemy of an interface designer.

The best interface is no interface.

1
2
3
4
5

6

7