Design Tips

Design Basics: Volume One

Basic design concepts explained.

Buninux
Design + Sketch

--

This article is brought to you by Buninux.com.
Visit our digital asset store and level up your design inventory.

Intro

Hey! Glad to present the first episode of design basics.

In this series, I want to cover fundamental graphic design concepts such as whitespace, unity, balance, and every other base knowledge, which is a must for a modern UI designer.

Design basics
instagram.com/p/CPibp--CecX/

Whitespace

Whitespace defines the overall composition and visual relationship in which elements and their container are present.

Whitespace defines the area between elements. Use it to maintain an optimum level of white space in your design composition.

Whitespace in UI design

Balance

Balance in UI helps eliminate the visual tension when elements are arranged in a chaotic or unlogical way.

To apply the balance, you’ll need to spread the visual weight evenly through the X, Y-axis of your design.

Balance in UI design

Unity

Unity helps to bound your design with common rules and logic.

Elements sharing a common behavior and style make the whole design look brand unified and more predictable in behavior.

Unity in UI design

Hierarchy

The hierarchy guides the user through the visual order of text and UI elements — larger, more colorful elements are read first.

Use visual hierarchy to communicate the order in which the user encounters and interacts with your design.

Visual Hierarchy in UI design

Color contrast

Contrast helps to increase readability and accessibility.

Use it to differentiate elements and focus the reader on focal, more high contrast actions.

Color contrast

Emphasis

Emphasis helps the user instantly differentiate the CTA of your design from less important actions or sections.

Use emphasis to create a focal point: an eye-catching part of your layout that stands out and is distinct from the rest of the elements.

Emphasis in UI design

Symmetry

Symmetrical elements visually appeal to human eyes because our brains always seek order in the chaos surrounding us.

Apply symmetry to make your UI actions more predictable and easy to memorize.

Symmetry in UI design

Hope you have found this useful. Cheers! 🙌

This material was originally posted on my Instagram.

If you want to support the release of new tutorials, you can visit my digital asset store and support your local design dealer :)

Visit buninux.com — Digital Assets for Creatives

Buninux — World-class UI assets for designers & developers.

--

--