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.

Having a consistent motion of the eyeball makes it easier for the brain to process

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.

Zigzag eye motion makes scrolling slower

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.

The most important button should be at the center of the device, or should be possible to bring it there

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.

Rounded borders and circles are pleasing to the eye

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.

Glaring colors distract the user from what she was intending to do

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.

Using color gradients attracts attention but without straining the eye

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.

Sections like the appbar can be just a shade of the base color instead of bright app personality colors.

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.

Making all actionable elements colored makes discovery easy

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

Headings should have a different appeal as compared to body 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.

People want images. Give them images.

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.

Don’t assume people know your icons. Use text in buttons.

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.

Too much animation is a distraction

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!