Seeing innovation in webpages has become far more infrequent than it used to be. Does this layout look familiar?
Everyone uses the same templates
I first noticed it when BootStrap became a popular UI resource – The vastly diverse selection of websites started to share simple elements of the toolkit. I noticed navigation bars at the top of websites all looked distinctly similar and it was the reason. Now, this has evolved to entire websites feeling the exact same as the last one.
Bootstrap made it easy to create a decent looking website without much artistic investment. Developers could whip up good looking prototype websites really fast. But once they had done, many never decided to change the design since – why bother when you have something that can work as is?
Similar movements emerged and approaches to web design started being standardized. For icons there were Glyphs , Flat Design and now – material design. Profile pictures are now almost universally enclosed in a circle. The internet is saturated with websites that have auto-scrolling pages, blurred background images for a feel good quote and parallax movements – What happened to old approaches? Bordered content areas and tiled backgrounds?
Having space at the edges used to be common, now sites span the whole width http://alistapart.com/article/holygrail
But not only are the resources and patterns we use for our own sites homogenizing, template sites are doing so too. A lot of website owners don’t care for technical and design work and just wants something that looks nice, so pre-made templates reinforce the standard. Not to mention the total amount of websites is ever-increasing, so templates are in large demand.
The growth in amount of websites (resolved domain names) ref.
More and more products are coming out to replace the traditional web designer. From removing coding with WebFlow to letting an AI decide on design elements with The Grid. While this alleviates duplicate layouts, elements of the design are duplicated instead. No matter how sophisticated the tools are, they will have general patterns that will make them identifiable to those who know about them – when they stumble upon yet another site with the same spacing, image borders, etc.
Real web designers are expensive, so it’s no surprise these tools are being used instead.
As time has progressed, design patterns have evolved. They tend to drag the web with them.
Just because something is hip now, doesn’t mean it suits your use case. Try other techniques or combine flavours of several different ones.
The metro design pattern
Be sensible with them, don’t make your images monotone if their main appeal is their colour. Don’t make your profile pictures circular if it cuts off important detail.
Design Patterns are a useful tool, but they’re not a solution to everything.
Common Standards doesn’t mean Common Design
In the last few years, web design standards have become much more important than before. It matters for automated rankings of websites, of the usability on small readers like phones and tablets. But unfortunately that has encouraged designers to simplify their websites into a single scaling site, rather than one that is appropriate for each platform. If you see a sliding menu open up from the side on desktop, it’s probably an indication that they use it on mobile and tablet too and instead of rethinking their design for desktop, simply scaled it as they had done.
This might be useful on phones, but on desktop it sacrifices a lot of needless space
Screen size and user interactions need different approaches. If you’re using a small smartphone touch screen elements must appear obviously interactive and long sections of the site should be avoided to reduce long scrolling. On desktop however, we have loads of screen room to play with – we can focus on backgrounds, borders and lots of content at a glance. We don’t need a third of the screen to be taken up by a menu that contains three items.
When designs are created to be responsive, the sole requirement isn’t that it scales – it needs to be the best user experience for that device. Otherwise, why switch?
Web design is becoming a copy-and-paste affair, have some originality and design the best page that suits your site and don’t be a copycat.
Feature Image - Close up of spider’s web (sylvia duckworth) / CC BY-SA 2.0