Daily UI #004 - Calculator

calculator app mockup

As someone who is a bit of a calculator nerd, I used this challenge as a way of making my ideal calculator app. The most important things for me were:

  • Scientific functions easily accessible (not hidden in landscape mode)
  • Ability to type in long calculations before hitting the equals button (like in my favourite SVPAM fx-100AU)
  • Large buttons and large answer display
calculator screen 1
calculator screen 2

In order to fit all the scientific functions on the screen without it looking too crowded, I took inspiration from the iOS keyboard – holding down a key (or possibly 3D touching) brings up a menu to choose the specific function you want. I'd imagine this permanently swapping the key to that function (i.e. if you choose cos under the trig button, it remains cos until you change it to something else)

Your full calculation appears in the top bar, until you press equals. You can edit your calculation in this bar (by selecting, deleting etc.) at any time.

Daily UI #003 - Landing page (above the fold)

003 2
Landing page for a nursery website specialising in edible plants. Had fun getting the type to tangle in with the photo.

Daily UI #002 - Credit card checkout

002
I'd seen a lot of credit card forms recently where the layout of the form mimics the layout of a real credit card, so I wanted to give something like that a try. Pleased with how it turned out.

Daily UI #001 - Sign up/Log in form

001

Trying the daily UI challenge. Hopefully it will give me the opportunity to work in some different styles and get me thinking about some creative UI concepts. I might not be able to do one every day, but I'll try to do as many as I can

I wanted to do something a bit more angular/boxy for this one. I'm trying to get out of the habit of rounding every single corner. Added some slanted lines for some fun.