Daily UI Challenge #004: Calculator
Firstly, I only focused on making the UI for this calculator since this is a UI challenge. If I were to implement logic into this calculator to make it usable, I would probably do it in a framework like Angular or Vue.js and spin it off to its own project, since calculator logic can be a bit of an undertaking.
Designing a calculator UI seemed simple on the outset. The arrangement of buttons almost exactly the same across calculator apps and physical calculators that there was little fuss in that regard. But then it hit me. What do the buttons look like? What colours should be used to denotate each function? Would I add any additional buttons apart from the standard minimum? There was more work that needed to be done than I originally thought.
I decided to add gaps in between buttons like real calculators. Many apps remove the gap, but made the calculator feel more digital that I wanted. In regards to colours, I originally attempted to use a colour scheme similar to a real calculator that I own -- the Texas Instruments TI-30XIIS. Upon applying the colours, I came to dislike how it looked. So I settled on blue and orange scheme based on a calculator image I found here, added subtle gradients to make the buttons feel more 3D without going too overboard.
Finally, when working on which buttons to show, I decided to take the mobile app approach of only showing the standard buttons on portrait and adding in scientific buttons in landscape. I also placed height and width restraints on the container on bigger screens because a full-screen calculator on a desktop isn't the best thing to look at, or even use.