CenterMax : The most straightforward design guideline
Simple set of rules that will make your apps look great
People expect good UIs. Here is a framework to do just that.
Optimize design for the eye and brain, not the thumb
Center align everything!
Everything except long text can safely be centered. Hence the name CenterMax.
Have one element per row
Since there is only one center per row, this rule forces you to keep the design simple and clutter free. This makes it easy to grasp the information on screen.
Optimize for scrolling
People are used to scrolling. If the actionable items or important text is located at different places on the screen, it applies strain on the eyeball and reduces the scroll speed. People want to scroll fast.
Making actionable items in one line (center axis) makes perceiving easier.
Everything should pass through the center of the screen
Assume the user is always looking at the center point of the device. Everything that demands the users’ attention should either be right at this point or it should be possible to scroll and bring the element to this position.
Imagine people are looking at one point and using their thumbs to move content into that line of sight. Optimize for the eye, not the thumb.
Tip : Put in blank space at the end of the scroll
Rounded borders everywhere
Rounded borders are easier on the eye. They don’t attract attention. You need to attract attention to the action buttons and copy, not edges.
Give rounded borders to all UI elements
Buttons, progress bars, input boxes should all have rounded borders.
Be consistently rounded
Having multiple UI elements makes you wonder what should be rounded, what should be rectangles. Having a rule to round everything makes sure you never face that dilemma.
Use colors frugally
Colors should be used only to attract attention where it’s needed
Use pale colors
Only important action buttons should be in a contrasting color. This is a philosophy directly against that of Material Design’s color palette. Material design advocates the use of vibrant bright colors. It further emphasizes the use of #500 colors, that is the brightest shade of each color. This is causes distraction to the eye. Only things that need the user’s immediate attention should be in bright colors. Everything else should be a harmonious existence.
Use gradients for actions
Human eyes are not accustomed to solid colors. Eyes are used to light sources that generate a gradual gradient. The gradient should be subtle, probably unnoticable in one look.
Don’t color what needn’t be colored
Color (and gradient) should be used only to attract attention explicitly. These are usually limited to action buttons and critical information. Other things can be in base color. Base color is usually off-white or dark grey. The segregation of sections may use different shades of the base color.
Everything actionable should be in color
Use color to signify that something is tap-able. There seems to be some confusion on this front in the Material Design spec. There’s confusion between using elevation, use of color and use of copy. CenterMax mandates that if something is actionable, it should be colored (preferably in gradient). Use color to provide affordances.
Typography is underrated
A learning I take from medium.com is the use of different fonts for headings and main text. Headings should be bold and authoritative while text should be simple and easy to read. More importantly, there should be significant contrast between the two fonts. Google Fonts provides a neat interface to choose a font combination.
Different fonts for headings and text
Have 2 forms of headings (h1 and h2) and one primary text for all long form text and button copy. Fix the sizes upfront. The font family and font size put together define a font style. Your entire app should have only 3 font styles. If there’s need for another font style, it is a red flag. Can you discard some information or move it to some other place?
Make your app pixel perfect
Keep the sizes of your UI elements consistent and in multiples of 8.
Drive correlation with sizes
If a button is 32px high, so should be an input box. The user should know just by looking at the size and color that something is actionable and what is not.
Consistent multiples
It feels great when things just align perfectly. That can happen only when objects have a common multiplier. 8 turns out to be a good number to use.
Large images
Instagram has pioneered the use of large images. Images attract attention. When displaying images, use maximum screen real estate. Make scrolling easy. People are used to that action.
Same goes for videos and any form of media. Make media consumption easy and center stage. No bezels. Extreme of this is TikTok — no UI elements at all other than the media itself!
Action buttons with text
Kill ambiguity
Do not make action items with icons. Icons are almost invariably inconsistent. Very few icons are actually universal.
Always add text to buttons. Let there be no ambiguity. Use verbs in button copy. Use text generously.
When someone taps on “Like” they’re saying the exact word in their head to the device. The text makes the action easy. Tapping on a button with only an icon is a lot of pressure on memory. It is unnatural.
Don’t use animation
Use animation very sparingly. Animations are a major source of distraction. A moving pixel trumps everything else on the screen. Don’t use it unless absolutely necessary. Again, this is against Material Design’s spec arguing for playful interactions. The flood fill on tap of a button on Android for example suggests that the button has been tapped for almost half a second. The user needs to see what she expected after tapping a button, not a fancy animation. The animation takes a toll on the user’s concentration.
That’s it!
Keep it simple and optimize for the eye & brain, not the thumb. Happy designing. This is an evolving design philosophy, feedback is most welcome.
Implement CenterMax in your app
Library for implementing CenterMax coming soon!
