UX Collective

We believe designers are thinkers as much as they are makers. https://linktr.ee/uxc

Follow publication

Design fundamentals every creative should know

A 101 guide to basics in UI and visual design for beginners

Michelle Chiu
UX Collective
Published in
6 min readApr 3, 2020

--

A simple Google search for educational design resources online yields 6,250,000,000 results — there’s no wonder for those starting out as a designer, it may feel overwhelming to know where to begin. As with mastering any subject, grasping key foundational knowledge is critical before becoming an expert in the field.

Müller-Brockman’s legacy in swiss design

Below are some crucial facets of design I believe every creative should know. As a designer, I can attest that I use my knowledge in these pillars in some way, shape, or form in my day-to-day role.

Grid Systems

Every page starts off as a blank slate. Similar to the process of solving any problem, adding constraints and guidelines helps ease towards a structured solution. In design, this is where the role of a grid system comes into play; it helps align elements according to sequenced columns and rows to achieve balance and consistency on the page.

For historical context, the grid system initially existed as a way to help type-set novels. With the industrial revolution, it transitioned to divide space on pages up into segments for advertising. Movements like the Bauhaus and the Futurists investigated the use of grid systems, and how to play within these constraints.

Josef Müller-Brockman, known as the father of Swiss graphic design, wrote Grid Systems in Graphic Design in the 1980's; it’s considered a must-read for any early designer, providing a comprehensive framework and a myriad of layout examples.

Example of a 12-column baseline grid from Design Systems

In application, most popular frameworks utilize a baseline grid system of 12 equal-width columns; this allows designers to divide the given area into halves, thirds, fourths, or sixths. It’s helpful in building consistency, alignment, and balance as the system ensures that the bottom of each line of text (its baseline) aligns with the vertical spacing.

Once you have your grid established, it’s quick and easy to distinguish placement of the content you want to place on a blank design. The…

--

--

Written by Michelle Chiu

Product designer (225K+ views). Prev Coinbase, Meta Creative X and MongoDB. Tweets at www.twitter.com/michelle__chiu.

Responses (8)

Write a response