User interfaces need to constantly evolve to reflect the product, its feeling and the vision. Today we explore the reasons behind it.

Our first redesign

Michael von Hohnhorst
Michael von Hohnhorst
2 min read

User interfaces need to constantly evolve to reflect the product, its feeling and the vision. We did a big redesign in Capacities and want to take you on a journey to explore the reasons behind it.

The most significant aspect we changed is lifting the content above the rest of the user interface. The content is the center of your work, which is now deeply rooted in the user interface. We donโ€™t want to distract our users by treating sidebars and secondary UI elements the same way as the content itself.

New page design

Your content is the center of everything.

We created friendly, rounded corners around the main content panel, set it apart with a small margin and lifted it up with 1) a shadow and 2) by giving the surrounding area a slightly darker background. The effect of this is striking. It subconsciously puts the primary content into the center of you attention and creates a much calmer, more focused working environment.

New database design

Screenshot of page in dark mode. Shadows donโ€™t really work in dark mode so the contrast with the background is stronger.

New page design in dark mode

New database design in dark mode

Smooth, rounded corners create a friendlier interface for thinking.

We did not only add more roundedness to the main content panel but also to several other elements such as dropdown items and cards. This again makes the app friendlier and overall more pleasant to work with.

Example of our main dropdown to reuse content.

Color code for reuse

Metaphors are still important in UI design.

A paper on a desk is still something many of us feel a deep connection with โ€“ and reminds us of deep and focused work. We want to bring the same feeling to our users when they are building and cultivating their knowledge.

Less lines and separators

We realized that too many lines in our UI were distracting and moved attention away from the actual content. So we tried to remove as many lines as possible and leave them only when they were both visually appealing and contributing to the understanding of the user interface and information architecture.

Combining calm surfaces with colorful accents.

We kept our calm, gray surfaces but tried to combine them with more colorful accents in several areas. Examples for this are tags, which initially get a random color.

Tags

Color accents in dark mode.

Tag page in dark mode

Colors should be semantic where possible

Since we donโ€™t use to many intense colors in the app, we try to use colors to convey a certain meaning that helps the user understand the user interface better. This is also referred to as semantic coloring. Below are some examples.

Creation of new content is color-coded in green.

Color code for add

Reuse is color-coded in blue

Color code for reuse

Color codes are also visible in the hints

Color code also reflected in hints

Delete actions are color-coded in red.

Color code for delete

Color for emojis is violet.

Color code for emoji dropdown

Adding tags get the color orange.

Color code for tag dropdown


Thatโ€™s it for this post.

Stay tuned for another one and make sure to follow @capacitiesHQ, my co-founder @steffeBle and me @MvHohnhorst on Twitter.

And have a look at the new design yourself.

capacities.io

Build your second brain.

๐Ÿš€ Get started now
It's free. No credit card required.