articles

Learn UX, visual, and interaction design at Proximity School. We share free design articles and a UI & Visual Design pattern library.

shape-static-hex shape-cir-gradient shape-static-lines shape-lg-3 shape-arrows
icon for Create a Starter Type Library with Google Fonts

Create a Starter Type Library with Google Fonts

You don’t need a new font for every design. But you probably feel like you do. We designers are obsessed with finding new fonts. The buzz surrounding typography trends and the constant reposting of font pairing guidelines can subtly persuade you to think you need new fonts on the regular. But you don’t. Here’s why. […]

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.