Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 6 down vote favorite

A while ago, I built a count down timer app based on a designer's free giveaway. It turns out users like it and it is even mentioned on beautifulpixels.

This time I'm building a calculator named Minimalist Calculator, on my own, without any help from a designer. Apple link: Minimalist Calculator, I'll share the screen shots here:

　 enter image description here

　 enter image description here

Comments from my friends so far are kind of negative. Something like it looks bare-bone rather than minimalist.

As an app developer, I am looking forward to advice on how I can improve the look and feel of my app, which mainly uses font, color, layout (but specifically little/no images)

Fonts are selectable by user, i.e.:

　 enter image description here

Any reference work I can learn from? A designer for hire who is reputable in minimalism design you could recommend? Thanks!

UPDATE: About options ...

@OghmaOsiris, I did include an option to disable grid lines:

　 enter image description here

　

　 enter image description here

UPATE 2: Colors

Last night, I added the option to change the colors of:

  • keypad button face
  • button text, and
  • button border

Graphite:

　 enter image description here

Orange:

　 enter image description here

It's now on AppStore. Download link: Minimalist Calculator

Please feel free to send me comments.

share|improve this question
You haven't shown any interactive states in these images, are there any? E.g. Tile color changes when you press it. – Joonas Jan 16 at 14:32
In the current version, the color is inverted when a button is pressed, i.e. the background color changes to the text color, the text color changes to the button face color. – ohho Jan 16 at 14:35
I like it.. but I'd want a larger = button. – Scott Jan 17 at 4:09
@Scott, different from a traditional desktop calculator, the equal button is relatively less important in this app. It is because the result is shown continuously when the user enters a formula. So before the equal button is pressed, the result is already shown. As shown in the diagram, the result 24 is shown after entering (5-1÷5)×5, without touching the equal button. – ohho Jan 17 at 4:17
1  
Generally, I'd recommend putting more effort into typographic details of the maths (also, some form of printing or pdf export). When users see a nice representation of their input, the'll instantly like the app and use it more often, even if the functionality might not cater to, say, the calculation of multidimensional hyperspace coordinates, or something. Moreover, add a lotto number chooser for use with cats (I'm serious.) – TehMacDawg Jan 17 at 12:25
show 2 more comments

3 Answers

up vote 8 down vote accepted

You're delving into a matter of taste here. There are many ways to be minimal. You have done it successfully, in my opinion. I suspect it is the extreme reduction in styling that is bothering your friends.

All critiques are not equal

The first question you should ask is, are your friends representative of your target audience? If not, find some people who are and see how they respond.

Styling minimalism

Just because something is minimal doesn't mean it has to be completely unstyled. Various techniques are still available to you that might add some humanity to your design. A few things to consider:

  • Visual hierarchy. You are currently addressing two levels of information: the keypad and formula, and the answer. Are there shades of grey in between that might be worth delineating? Numerals vs operators vs functions (like clear, store, recall) might be valuable categories.
  • Color. Black and white is an obvious choice for this aesthetic but so are shades of grey, neutral, or even palettes like jewel and earth tones.
  • Texture. Don't limit yourself to flat color in the name of minimalism. Look at Apple's app design, lots of textures there. Subtlety is the key. Take a look at the aptly named SubtlePatterns.com.
  • Depth. Texture adds a little realism but the impression of depth will take it up a notch. Drop shadows on the type. Gradients on the buttons to imply surface curvature. The result area could be "recessed" or "elevated".
  • User configuration. Allowing the user to change fonts is an excellent idea. What about some additional skins? Maybe a dark, light, and medium. The texture idea could come into play here too. Preselected font options might work well.
share|improve this answer
I like these solutions, too. – OghmaOsiris Jan 16 at 6:03
1  
Thanks for the great input! I am adding theme support in upcoming version 1.1. However, it's the combo of color/shade/texture which I do not have confidence. Currently, I am now googling something like: dribbble.com/shots/364467-Assembler dribbble.com/shots/727342-Stream dribbble.com/shots/344343-Blog-post-sidebar but hardly have the idea of how to put things together. – ohho Jan 16 at 6:25
1  
You obviously have an eye for excellent work. Try building on that by giving it a go in your own app. If you feel the need, see if you can find a designer who's willing to go in on it with you for the sake of some credit. You already have one success behind you, let potential collaborators know that you're shooting for a repeat and they can tag along for the ride. Or you could just offer them some money ;) – plainclothes Jan 16 at 6:30
up vote 2 down vote

I would say get rid of the borders around the buttons and don't let the user choose the font. I wouldn't use Futura as the font tho (even tho I love Futura). I think it ends up being monotonous rather than refreshing.

I like what you are going for, but I do see what your current critiques are trying to say.

I would also increase the calculation display and remove any buttons that aren't needed. Put them on a separate screen if need be, or do how the built in calc does and reveal the scientific calc buttons on didRotate(). Maybe even a tab bar controller to switch between different types of calculators.

I just downloaded your timer you made and think it it absolutely beautiful. Don't be afraid to be inspired by a previous design.

share|improve this answer
screen shot of no grid line added in UPDATE – ohho Jan 16 at 6:14
up vote 1 down vote

For visual hierarchy, you should have the most used keys black (#s, +, -, etc..) and have all the other keys a medium-dark grey.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.