Day 4 - Design a Calculator

You know why I like UX/UI design? Because of days like this when I’m not feeling particularly creative, imaginative, or inventive, I can just stick to functionality. This calculator doesn’t need to change the world today. Could a new take on the calculator potentially grab the user’s attention and brighten their day? Will they then postulate “Who is this Marisa? How can I find her and thank her for re-designing the standard calculator??” Not out of the realm of possibility.

That’s not my goal today! Just working on basic design skills of spacing, hierarchy, and maybe some push interactions to allow the user to have more of a real life calculator feel. That’s today’s goal. Let’s get started!

First, a list of ideas/features:

• Each number has its own space

• Add, subtract, multiply, divide, equals

• Decimal

• Clear, negative/positive, percent

• Different colors for meaning

• Dark and light mode

Next a low fi wireframe to map out spacing,

This wireframe shows rectangles for numbers and circles for all other items. I wanted to keep this layout, but you will see in the final iteration, that I ultimately went for a more uniform look and let the colors show function.

Here is the final product. What do you think?

So, did I do what I set out to do on this project? Not necessarily. I intended to keep it simple, but I also intended to create some interesting interactions. I only had time for the basics on this project, therefore, fancy extras were omitted. Design done.