10 UX Design Elements and Principles

I am often asked the question — what is considered a good UX design for Web, Mobile and more recently for the Virtual or Mixed Reality platforms. Well, the obvious answer is — “it depends”.

However, I started thinking about the hundreds of product and design conferences that I have attended and some of the most brilliant designers that I have met who don’t like answering this question. Perhaps, it’s because in most cases, a great UX design seems to come naturally to brilliant minds. As they say, “You can’t delegate art.” Similarly you can’t really define or delegate a good UX design but this article summarizes a few key approaches.

Furthermore, design isn’t just skin deep. It’s throughout everything and deeper. The following are the various level of design that you need to consider within a particular application to design a complete framework.

Figure 1 — Levels of Design

Across all these layers, there are some key design guidelines and best practices that you should try to follow (and live by) especially if you believe that focused “design driven thinking” is one of the best strategies for differentiating your product, service or brand.

This design driven thinking approach involves appropriate incorporation of Design Elements and Principles.

Typically, Design Elements are the basic components used as part of any composition and they are as follows:

Figure 2 — Design Elements

However, the most basic fundamental Design Elements are really these two:

  • Color
  • Typography

Now of-course, the other Design Elements such as Size, Shape, Value, Depth, Texture, Density, Saturation, Orientation, Local White Space, Intrinsic Interest, and Perceived Physical Weight are all very important but it begins with Color and Typography.

On the other hand, Design Principles are the foundational laws of designing just about anything and you definitely need to have a deep understanding of their techniques, influence and harmony on the overall outcome.

There are 8 generally accepted Design Principles as follows:

Figure 3 — Design Principles
  • Contrast — represents the difference between two or more objects.
  • Repetition — reusing visual elements to create unity, rhythm or harmony.
  • Alignment —positioning of visual elements for greatest visual consistency
  • Proximity — organizing visual elements to create a sense of grouping
  • Balance—symmetrical, asymmetrical, radial or random presentation
  • Hierarchy — organizing elements in the order of importance/dominance
  • Focal Point — the most important area of interest/attention/emphasis
  • Economy — limiting the inclusion of elements to only the significant ones

My next article will be focused on applying these concepts to Web, Mobile, Virtual Reality and Mixed Reality platforms. We definitely need to strive for a consistent visual design style for a particular brand across all these platforms, but at the same time, we need to appreciate each platform’s own unique nuances, opportunities and levels of perceived engagement.

--

--

Kevin Dalvi
UX Design — Web | Mobile | Virtual Reality

Entrepreneur and Head of Product & Design focused on the future of Cloud | Web | Mobile | Artificial Intelligence