pattern-img-border

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

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

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

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

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

Pattern 6: Source high end photography

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

pattern-img-border

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

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

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

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

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.