Colors

Over the last couple of weeks we made a series of changes to the Krumplr user interface. One set of changes is focused on the first-time experience. We wrote about those in our recent post All Aboard! Another set of changes is focused on the everyday experience.

From the early days on we ensured Krumplr’s user interface was focused, efficient, and insightful. We left out anything we thought could be visual clutter. We don’t show everything up-front. Instead UI elements are only presented to the user when there is a good chance the user needs them.

In UI design, restricting yourself is a good thing. We won’t let that go. However, our UI was understated. You could also say flat. It was intentional though. It is always easier to add than to take away.

We have now started to move the UI from understated to energetic and colorful. We still retain the focus, the efficiency, and the thoughtfulness. We want you to feel good and joyful when you get things done, and we want to give you a user interface that mirrors these feelings. We won’t get there in one iteration but here is what we started with:

In the dark theme on iOS and in the web UI we now use a darker background color and lighter text colors to increase contrast. This not only improves the readability of text but also makes all colored icons and divider lines pop out more.

In all themes on iOS and in the web UI the category titles on the ‘My Lists’ page are now boldly colored. This makes it easier to spot the category a list belongs to.
iphone6_4.7_blue

In the web UI, we use a blue header line for the ‘My Lists’ page and an orange header line when you look at the content of a list. This improves the sense of location within the app.
MyListsMyStars

Overall, more vibrant colors increase friendliness and provide a boost of positive energy.

Once we were there we figured we should start off with the good vibe right from the beginning. So, we also reworked the sign-in and sign-up pages in the web as well as the launch screen of our iOS app.
sign-in

As always, let us know what you think!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s