3 Ways To Improve Your Visual Design Skills: Julie Cheung

Product Designer Julie Cheung, describes herself as “passionate about simplifying systems and building throughtful products.” In the design community, this is a must. Julie takes this thinking a step further with her piece on 3 Ways To Improve Your Visual Design, posted earlier this year. The article is intended for beginners getting into visual design, but we feel any designer, beginner or advanced, can benifit from these widely used concepts. You can see a snipet of her article below the break.

 


 

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.

 

https://cdn-images-1.medium.com/max/1600/1*I-dxupDU1y12IklZn3ZWEA.png

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:

https://cdn-images-1.medium.com/max/1600/1*Xmijiv8m4gcW7NFyU27U2A.png

 

Luckily visual design skills can be learned over time! Here’s one of my recent projects:

 

https://cdn-images-1.medium.com/max/1600/1*xBDVYn1NHLVnqW0WPmgXPg.png

 

Today I’ll share 3 tips to improve your visual design skills.

 

1 — Establish visual hierarchy

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:

https://cdn-images-1.medium.com/max/2000/1*XEx3Ps-4JkaprbDFLIMt8Q.png

 

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:

https://cdn-images-1.medium.com/max/2000/1*xEcYLTt2bUp1AS-fre7OPA.png

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:

  • Fonts — Larger and bolder fonts capture attention and should be used sparingly for headers.
  • Lines — Lines help separate groups of information, serve as layout grids, and can fill awkward white space.
  • Color — Darker and more saturated colors draw more attention.
  • Shapes —Simply shapes (circle, triangles, squares) are generally more aesthetically pleasing.
  • Images — Images can be enticing, but try to stay away from stock photography.
  • Space Space is your best friend. Use it to separate groups of information or to isolate (highlight) important things.

If you need help understanding the fundamentals of visual design components, Steven Bradley wrote some amazing posts on lines, color, shapes, and space.

 

READ MORE

 

2 — Use Gestalt principles

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.

Figure/Ground

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.

https://cdn-images-1.medium.com/max/1600/1*nF4y7N64ViXSc_U6SMWKnQ.png

 

Proximity

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.

https://cdn-images-1.medium.com/max/1263/1*ARNWf0mYLtF-c4TdL8DYfQ.png

 

Similarity

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.

https://cdn-images-1.medium.com/max/1263/1*psXPhFfUbUJZnL1bnO13MA.png

 

Continuity

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.

https://cdn-images-1.medium.com/max/1263/1*W3agq1wGGnDiqKQZIbnYVQ.png

Closure

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.

https://cdn-images-1.medium.com/max/1263/1*602XLaGq6NoazS4ZhiXSVg.png

To read more of this article on Medium click here

 

 

You may also like

No Comments Yet

Leave a Reply

Your email address will not be published.

Close
Scroll Up