Today’s article is not about the basics of design, but rather a conceptual approach to the problems that often arise in prototyping. If you are a developer and want to present your product build ideas to a client or team, these principles should help you avoid pitfalls and achieve your goals!

Author: Translated by Nucleon Cola

As developers, you often need to build prototypes to prove your design ideas. It might work as expected, but the horrified looks on the users’ faces tell us there’s a problem, and the whole demo becomes worthless. In today’s article, we’ll look at 10 simple guidelines and tips to remember.

relax

You’ve probably heard the following phrase: “Good design should be hidden in the product after successful implementation. Only bad design will be noticed by users.” – Jared Spool

This maxim applies to all designers, but it is particularly applicable to developers. The goal of building a demo is to prove your idea, so the user needs to focus on the task in front of him, not the “design.”

Number one: Focus on simplicity rather than pageantry. The purpose of a presentation is not to show off, but to convey ideas.

If it “looks awkward”, try removing all visuals and going back to the basic blueprint.

Don’t use messy colors

Bad color combinations can be a pain in the eye. In fact, color selection should be an important part of UI design, even before you start designing.

Review images

This is obviously not what we were hoping for.

If you’re going to build a UI, make it as simple as possible; Use basic shapes, lines and colors. Add more details after the layout relationship is set up, tweak it and find the perfect match.

Second point: Use monochrome in your demo and use gray gradation to distinguish objects — unless there’s a clear reason to use color to highlight certain elements.

Review images

Even if nothing is done, the effect is much better than before.

Third point: As a design consensus, avoid using saturated colors (such as solid or white) as much as possible, as the effect can be “hard to look at”.

Fourth point: if using black and white, pay attention to the use of dark gray and light gray to help users protect their eyesight.

Think hard about how to use black and gray. As Ian Storm Taylor suggested in 2012:

“Shadow is not black”

Ian was speaking in an art school class — AND I remember being asked by my teacher to identify the pure black spots on Georges Seurat’s Painting Sunday Afternoon on the Island of La Grande Jat.

Review images

The answer is, there are no pure black dots.

Number five: When adding color to a monochrome design, be careful to add only one color at a time. Each color we add can affect the user’s attention. Don’t use high saturation colors, but try to use different hues within a certain range, which is the safest color choice.

Review images

Don’t use overly complex print elements

Use native fonts as much as possible in demos and prototypes. In addition, please note the following points:

No. 6: It’s best not to use serif fonts, because the edge processing of these fonts is complex and therefore not suitable for every situation.

Review images

Serif fonts often add personality to designs, and often make text easy to read. However, it is rarely used in UI design, especially when the display area is limited.

Note: As screen resolution increases and sharpness improves, the choices can become more flexible.

Review images

Roboto & Noto

Google has adopted the easy-to-read Droid Sans font for its Android system, further tweaking it to Roboto and Noto in the new version. Apple uses Neue Helvetica and San Francisco fonts in its operating system. Firefox OS uses Fira Sans. Notice the pattern? All non-serif fonts.

Number seven: Avoid ambiguity. Common combinations that are easily confused include O0, AEO, 8B, Il1, 5S, 2Z, 6B and 9G, so please test carefully to avoid the problem that the display content is difficult to recognize.

Review images

Fira Sans (from Firefox OS) is pretty sharp.

Pay attention to the space

Pay attention to white space in the visual design, this spacious space collocation helps to achieve a sense of balance and reduce the user’s reading intensity. If the UI is too tight or even crowded, users often find it uncomfortable or difficult to handle tasks effectively.

When dealing with large amounts of information, compacting data is often more intuitive. But looking at the following two sample images, which one do you think is better?

Review images

Titles and content have taken up the entire page

Review images

Reserve reasonable space for each cell and its surroundings

8. More white space is always better. We can fill it, increase margins, adjust the height of the table, etc.

Point nine: Keep the spacing consistent. Use standard units as a baseline, such as a 10px base for stacking space. This approach provides a clear sense of rhythm and harmony.

Review images

Non-serif fonts, monochromatic transitions, plenty of space and spacing consistency.

Make life easier

Feel free to use frameworks like Bootstrap and Foundation. Yes, some might say they’re all cut from the same cloth, severely lacking in creativity. But for prototyping, they’re definitely worth a try.

So far, we’ve talked about typography, color, spacing, consistency, and forms. Following these tips will make your design simple and powerful.

No. 10: Build on what you already know. You can use ready-made Bootstrap templates, Foundation templates, Material Design Lite, Skeleton, Pure CSS, or UIKit designs. In addition, feel free to add your own style to this foundation, keeping in mind the principles mentioned above.

Review images

These frameworks are comprehensive solutions that you can choose to use to turn your ideas into reality.

conclusion

Today’s article is not about the basics of design, but rather a conceptual approach to the problems that often arise in prototyping. If you are a developer and want to present your ideas for building your product to your client or team, these principles should help you avoid pitfalls and achieve your goals!

10 Remedial Design Pointers for Developers

51CTO.com (www.51cto.com)

【 Editor’s Recommendation 】