Design + Sketch
Published in

Design + Sketch

Design Tips

Design Basics: Volume One

Basic design concepts explained.

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


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


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 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 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


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 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


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 — Digital Assets for Creatives

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




A collection of articles, tips, tutorials, and stories on UI, UX and web design and prototyping with Sketch and beyond

Recommended from Medium

Is low-tech the new sustainable?

Your key to success as a UX beginner: UX Research

Is OpenAI’s DALL·E an existential threat to illustrators and photographers?

Venmo, what card am I using?

I asked 19000 people from design twitter this question…

The Bean that Stayed in my Head

Updating a decade old educational site

Lightning Motorcycles Revisits Generative Design for Mass Production

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


Design Articles & Tutorials. Author —

More from Medium

What is Design Thinking & how is it applied?

What is Design Thinking & how is it applied?

Learning how to build a Design System in Figma.

A Glimpse of the Final Screens using The Design System

VanMoof App UX/UI Concept revisited

50 Design Systems examples to learn from (for your next project)