UI & Visual Design Pattern Library

A reference for new ideas to try in your designs that live on independently of “design trends”.

Example of overlapping elements in the Carbon Beauty design

Pattern 10: Create Overlapping & Collaged Elements

When an element flows outside its expected boundaries, we notice. Creating overlaps and collages is a useful visual design pattern for emphasizing important elements.

Example of a gradient effect in Stripe's design

Pattern 9: Create Depth

Don’t assume you can’t use depth and lighting effects because of debates over flat design vs skeuomorphism. Adding depth in your design can still be a useful and worthwhile design pattern depending on your goals.

Screenshot of the use of alternating backgrounds in VWO's design

Pattern 8: Alternate section backgrounds

This design pattern probably seems obvious to you right now, but when you’re in the middle of designing a long page it’s easy to forget that you don’t have to keep the background color the same all the way through. So here’s your reminder.


Pattern 7: Add simple & geometric shapes

Don’t let design blogs fool you. Using simple shapes in design is not a “design trend”. Designers have been using geometric shapes as decorative and structural elements in our designs for practically a century.

Screenshot of the Wonder Woman Movie website

Pattern 6: Source high end photography

High end photography can practically do half your visual design work for you.


Pattern 5: Improve usability of long forms

While clever designers and writers can simplify forms somewhat by cutting unimportant fields, in many cases long forms are essential and unavoidable. Here are some design patterns you can use to make long forms less intimidating and easier to complete.


Pattern 4: Use illustration to emphasize messages and emotions

Just as color and typography can create emotion, illustration can communicate complex messages and feelings quickly. Illustration is an important pattern to remember when you’re trying to appeal to specific audiences and emphasize messages through visual design.


Pattern 3: Simplify Deep Navigation

When designing complex sites and apps with deeply nested pages and information, it’s tempting to use a complex navigation design that ends up becoming difficult to use and understand.


Pattern 2: Animate on scroll

Animating elements as a user scrolls can add a lot of personality and energy to a design, and this pattern is a simple way to add animation to elements you already have without creating more complex video-like animations.


Pattern 1: Use an Offbeat Font

Intentionally using an offbeat typeface might seem like an obvious mistake, but it’s a great method for making a dull design demand more attention. If you do it right, the result can turn out lovely.