Sometimes the scariest part of any project is not the doing, it’s the starting. It’s so easy to zoom out too far before you’ve started and feel a little overwhelmed by the scope of things, but once you’ve started down the highway, it’s so much easier to see the road ahead, understand where you’re heading, and enjoy the journey.
When the world shut down in March, I had just graduated from Flatiron School’s UX/UI program. It was a daunting time to begin a job search in a brand new industry to me, and after a very intense 6 months immersing myself in design, I decided to take a bit of a breather.
But if I’ve learned anything about adopting a new skillset, it’s that it’s good practice to keep your skills sharp. It took me a while to get back into this mindset, but I recently began doing design challenges through Daily UI and it’s been a lot of fun getting back in the swing of designing again.
Today I thought I’d write a little about my design process for the first challenge I tackled after some time off, which was to design a calculator. This seemed like a great task to ease myself back into the groove again.
As it turns out though, the simplest interfaces are sometimes the hardest to create. I wanted to design something that felt both familiar and a little interesting / funky. I decided to make my calculator design for a phone, and I decided to make it super simple in functionality. I also wanted to avoid using the same color schemes as stock calculator apps that are familiar to iOS or Android users.
I quickly realized that beyond the basic layout of the number keys that are fairly consistent across all calculators, there are a lot of little decisions that go into button style (flat, bubble, square?), placement of functions, colors, and typography. Not so easy after all!
One design trend I’ve noticed in recent months is this ultra-wide, heavy style of typography. For this little challenge, I thought that a wide font might make my calculator immediately feel a little different. I discovered a font called Monument Extended that fit the bill, and the unintended effect of this font is that, at least to my eye, it kind of feels a bit retro-futuristic. I liked that the characters look both modern, but at the same time could be pulled straight out of an 80s movie or an old-school physical calculator.
For buttons, I decided to go with a slightly rounded “chiclet” style after experimenting with circular buttons and a more flat approach that didn’t seem to gel quite right. I added drop shadows to the buttons to give them some dimension and channel that old school feel. From a visual perspective, it was also important to me to make the grid of numbers and functions on the calculator completely symmetrical, with no blank spaces anywhere — something that I didn’t see as much in other calculator apps when I was looking for inspiration.
The colors were the most difficult part to figure out. Coolors.co is always helpful, but for a while it seemed like every color combination I picked was either too loud and distracting, too muted, or too similar to what’s out there already. I landed on a soft blue with a pale beige-ish background, and I leaned into the 80s aesthetic borrowing a shade of the orange seen on many retro calculators. Most importantly, it was crucial that this app not be too flashy, because ultimately you want the user to be able to quickly solve their problem and move on. If you’re able to delight in the process, that’s a bonus.
In terms of usability, I wanted to make the equal button easily reached by your thumb, but I also wanted to differentiate it by color as well. I have no proof of this…but I get the feeling it would be satisfying to tap this distinct orange equal button to solve your problem.
Overall, this was not quite as easy as I thought it’d be initially! That said, it was super fun and rewarding to get back into the swing of designing again.
As I learned again — the starting was the hardest part, but now I’m back on the highway, and it feels great.