Design Tips
Design Basics: Volume One
Basic design concepts explained.
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.
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.
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.
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.
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.
Color contrast
Contrast helps to increase readability and accessibility.
Use it to differentiate elements and focus the reader on focal, more high contrast actions.
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.
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.
Hope you have found this useful. Cheers! 🙌
This material was originally posted on my Instagram.