Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

uxdesign.cc – User Experience Design — Medium | Jules Cheung
I’ve noticed a trend after screening dozens of junior designer portfolios. Designers (mostly from bootcamps) were heavily focused on UX and evangelizing the Design Thinking mindset popularized by consultancies like IDEO. What lacked was the ability to breath life into designs, and portfolios fell flat in showcasing visual design fundamentals taught in art school.
As of April 2017, a quick search on Glassdoor reveals that companies are hiring more Product Designers capable of end-to-end design.
I started off my career as a graphic designer and through trial and error, learned the art of layout and composition. Reflecting upon my journey, I’ve come a long way since my first school project:
Even for Kanye…its a bit too powerful
Luckily visual design skills can be learned over time! Here’s one of my recent projects:
Layout and composition matters
Today I’ll share 3 tips to improve your visual design skills.
Visual hierarchy is organizing information by order of relative importance, and its established by arranging components (typography, lines, shapes, images, color, and space) on a layout. Designs with strong visual hierarchy and composition will communicate a message by seamlessly guiding your eyes. For example, let’s look at how Airbnb arranges components on their website:
Where do your eyes look first and in what order? If you’re not sure, try converting the page to black and white. Notice how your eyes are drawn to larger and darker (more saturated) components.
Visual hierarchy is established by arranging components to convey high-priority information first and low-priority information last. This is often an exercise of balancing user needs with business goals. For Airbnb, the business goal is to increase signups for work-related accounts, while user needs are to search for places to stay. In other words, business goals trump user needs on this page.
Strong visual hierarchy and composition will guide your eyes fluidly across a layout. Poor visual hierarchy will result in miscommunication or confusion.
Feast your eyes on these bad boys:
Photos submitted to r/crappydesign by ibegross, JoJoeyJoJo, and jaapgrolleman
Practice establishing visual hierarchy by creating many variations of a design using different component styles, and use the black-and-white technique when you feel stuck. A few tips on components:
If you need help understanding the fundamentals of visual design components, Steven Bradley wrote some amazing posts on lines, color, shapes, and space.
All designers should understand Gestalt Theory and the principles of visual perception. Gestalt Theory was developed in the early 1900s by German psychologists, who theorized ways in which humans organize visual experiences. Designers nowadays use Gestalt principles as a framework for more effective visual communication.
“By matching a target audience with selected high impact gestalt images we can shorten the distance to effective communications” — Gregg Berryman
Smashing Magazine already explains the fundamentals of Gestalt Theory, so I’ll focus on showing examples instead.
Typically the ground is the background in which the figure (object) exists upon. The goal is to maintain focus on the figure and clearly differentiate it from the ground. Designs with high-contrast colors will establish a stronger figure/ground relationship, while designs with low-contrast colors will have a weaker relationship. Newbies should keep backgrounds simple (light colors or subtle textures) and limit the number of colors for figures.
Objects in proximity will visually unite into groups. Proximity can be combined with color to make groups even more apparent. The opposite of proximity — space — can reinforce groupings or isolate unrelated objects.
Similar looking objects are perceived to be related. Similarity in objects share the same color, shape, size, or direction. Use similarity to visually tie related objects together.
Photo submitted on r/crappydesign by UglyDuce
The human eye continues to follow lines, curves, or objects placed in sequence. When objects in continuity intersect with other objects, our eyes naturally perceive these objects as distinct entities (not grouped). Use color to further reinforce continuity and flow.
We are naturally able to distinguish objects with continuity from other objects.
Incomplete objects, or space that is not completely enclosed, are perceived to be whole because our brain fills in the missing gaps. Designers can use the principle of closure to create visually compelling graphics.
Designers should make sure that words are both legible and readable. The older I get, the less patience I have for deciphering tiny, ultra-thin, or lightly colored words. With typography there are a few best practices to follow:
A font is a typeface (aka font family) set at a specific size and weight. Jon Tan explains:
“Using the Georgia typeface example, the “Georgia Regular”, “Georgia Italic”, “Georgia Bold”, and “Georgia Bold Italic” in my library are all fonts of the Georgia typeface.”
Rule of thumb is to start with 1 header font and 1 body font of different typefaces, and to use no more than 2–3 typefaces per layout. The more headers or styles you have (quotes, links, etc), the more fonts you’ll need. This Medium post uses 2 typefaces (Lucida Grande and Cambria) and 7 fonts.
Check out Hongkiat’s font tools to find good font pairings. Many designers use Google fonts because it has 818(!) free typefaces to choose from. Other designers subscribe to paid services such as MyFonts or Fonts.com.
I was once part of the ‘tiny words are cooler’ camp. After watching dozens of users struggle to read my designs with 12px font, I killed this mentality and found 14px to be the minimum size for readability. Web trend nowadays are to go even bigger, as evidenced by this 21px body font Medium post. The exception is when you want to deemphasize things like disclaimer text. Check out Christian Miller’s piece on Why your body text is too small.
Line height refers to the amount of space between sentences in a paragraph. Too small of a line height makes text feel crammed, and too big of a line height makes sentences feel disconnected.
“Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one .” — w3c.org
In addition to line height, paragraph height is the amount of space between paragraphs. According to W3c’s web content accessibility guidelines, you should set paragraph height to >1.5x the line-height.
The number of characters per sentence is key to ensure readability in design. Sentences too long are hard to follow, while sentences too short break reading rhythm. Many designers regard The Elements of Typographic Style as industry standard for character count:
“Anything from 45 to 75 characters is widely-regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal.” — Robert Bringhurst
W3c’s web content accessibility guidelines reinforces this standard, asserting that sentences should contain “…no more than 80 characters or glyphs.”
3 ways to improve your visual design skills was originally published in uxdesign.cc on Medium, where people are continuing the conversation by highlighting and responding to this story.
AI-driven updates, curated by humans and hand-edited for the Prototypr community