A UX Story. @auxstory - Tumblr Blog

UI Challenge Experiences - Vol. 1: The Tale of a Calculator

As a way to spend some time and become more active on dribbble, I have recently started doing the UI challenge, with a twist. Rather than daily, I am allowing myself a more flexible schedule, trying to complete one every week. Also, I am not following a certain order but rather picking one from a list, whatever looks interesting at the time.

Before I begin telling more, I am aware it does not reflect a “real-world” design challenge. There is no certain requirement, there is no-one else than yourself to please, no need to do user research, no need to worry about UX in a way you would have to in a real brief. And this is exactly why it is fun.

You see, real design challenges come with real problems, something to figure out and address, to solve. It is more than just pushing some pixels around, as much fun as it is, and it requires good amount of prototyping and testing and revising until you start the circle again. Not all the time you end up doing the final visual design either, so UI challenge gives an amazing opportunity on that regard, at least it did to me so far, to be able to improve myself in graphic design. Who knew layer blending and effects were so fun?

After deciding what to design, I start with a sketch, either on paper or on my iPad. I play around with layouts and colours and whatnot, until I do something that I want to pursue more on computer. Sometimes I have an idea right away, sometimes I think I like what I am doing until I start hating it and starting over. That is actually what happened with a calculator ui.

First, I thought of 70s/80s calculators, wanted to do something that looked like it. For some reason, I was just so into that blue buttons, and the tactile feeling they had. I even thought of trying to making buttons a tad differently (keypad with a concave curve and others the opposite) with the idea that it would help differentiate those different functions, and even without looking you would “know” what you were pressing. I was thinking as if I was really designing a calculator.

Well, I hated the outcome. It looked horrible in my eyes. I spent couple days trying to make it look like those calculators, trying to make sense. It just was not working. Then I stopped trying.

The next day, I do not even remember how I ended up on pinterest, but I came across more modern braun products, and similar appliances with a modern and minimalist aesthetic. So after some browsing, I ended up creating a moodboard to base my design on. The outcome, I loved it. Right away.

It felt like a modern calculator with a specific aesthetic, and I just wanted to have it. Next was to turn this into a UI, rather than keeping it as a calculator. With some playing around, I decided to adapt it to iPhone X, to turn it into a giant calculator, where the keypad would look like it is floating on the screen. Below is the final UI I shared on dribbble.

The lesson learned? Or recalled? Take a break when needed. Forcing never works, and even when you keep pushing, the result often does not really please you.

This was the 3rd UI overall, and I do not think I will write a post about each one, but I might end up doing so, perhaps some shorter (hence more bearable?) than this one.

Hope you liked it and stay tuned for more, feel free to comment and ask any question.

Trending Blogs

Last Seen Blogs

A UX Story.