The Repetition of UI Patterns



Creative Director

I’m Kim a passionate marketer | Sharing growth insights for success | Proud founder of Squibble, empowering Midlands marketers to thrive by turning clunky websites into marketing joy | Let’s fuel your journey!

One of the side effects of responsive design has meant that a lot of sites look similar and we are seeing repetition of UI Patterns. Responsive design isn’t solely to blame however. The huge rise of WordPress sites and the booming WordPress the me market has also contributed to it.
Having a similar look and layout isn’t necessarily a bad thing. That’s because we’ve changed the way we consume the web, which has resulted in a lot of common UI design patterns. Design patterns have matured and as such, there’s little in the way of innovation when it comes to UI patterns.

In other words, certain things, such as a checkout or login should function and be displayed as such.  There’s no need to re-think these common user interfaces.  Using common UI patterns means end users will have a smoother, easier experience.

A few UI Patterns you may be familiar with;

Long Scroll

Placing all your important content / calls to action above the fold is now a well-known myth.  Most people are used to long scrolls thanks to mobile screens.  This technique works really well for sites that take a user through a journey.  Long scroll can mimic a multipage site by splitting a page into well-defined sections.

Account registration:

You’ll see this pattern whenever you register for a site.  There will usually be a form to fill or a button which allows you to sign-up / sign-in with your social media account. Form wizards or multi step forms are a good idea as they encourage visitors to sign up, not bombarding them with one massive form in one go.

Card Layouts

Pioneered by Pinterest, card layouts are very popular.  Card layouts show content in small chunks which are easy to scan through.  Each card shows a specific topic. Cards are ideal for responsive design as their dimensions make them easy to rearrange for different device dimensions.

Hero Images

Hero images are a great way to grab a user’s attention. Hero images generally stay above the scroll as a full-screen high resolution image.

The Hamburger menu


This is very recognisable to users as a pop-out menu and is extremely common in responsive designs when viewed on mobile screens.

For information on how to use UI Patterns to your advantage, visit;


If you think we have missed any common UI patterns, please share your links or thoughts that you think are essential for web designers and developers to know about.

What Are Brand Guidelines?

What Are Brand Guidelines? A Comprehensive Guide to Crafting and Implementing Brand Consistency. In today’s fierce business landscape, consistent branding is paramount for success. This definitive guide unravels brand guidelines’ intricacies and...

Crafting a compelling value proposition

Crafting a compelling value proposition Words like ‘innovation’ and ‘differentiation’ are often thrown around. But at the core of these ideas that’s where the concept of the value proposition comes into play....

Navigating the Fields of UX, Graphic Design, and Web Design

Are you eager to dive into a career in UX, graphic design, or web design? Let’s delve into a thorough guide that unravels the career avenues in these dynamic domains, offering insights...