Good & Bad Trends Powering Websites
I thought it would be a good idea to create a list of things I commonly see in the world of web design — if for nothing else than to have a list I can refer back to next time I am looking for inspiration when starting a new project.
Some of these things are not necessarily good either — one of the aspects of our jobs is to look for new clients, and as such wecan look at over 100 business websites in a few hours of the day — often all these websites blur into one, and it’s difficult for any of them to stand out and be memorable.
P.S this list is not exhaustive, it’s limited by the amount of time I currently have to write! … We have obviously oversimplified whether a trend is good or bad, as with most techniques it’s how it’s used been used that determines if it is bad or good, this is just a fun way of quickly looking at this :)
Mega Menu’s (Good)
Websites with lots of content can be challenging to design a useful menu for. How do you strike a balance between showing the most useful information but still allowing people to deep dive into your content? Enter the Mega Menu! I often reference the example above Bloomberg, who in my opinion have a groundbreaking website design. You can see that they have traditional header navigation which is then complemented by a colour coded pop out Mega Menu that allows you to deep dive into topics — notice how it also features video and images as well — very controversial for a menu — but it does help draw your attention.
Feature / USP Icons (Bad)
We once spent a whole three days looking at companies listed on CrunchBase, and we found that all of these technology startups where essentially using the same template for their website — something that stuck out was the use of icons for the sake of icons to describe their services or products — the risk is that among 100 other blockchain startups you will all look the same if you use the same template. In the example above I have only shown two different cases — icons can be an excellent way to instantly be drawn into a visual cue however if you are all using the same icon styles you will all look the same when explaining your features or USP’s — you should always try to avoid looking the same unless it plays to your advantage.
Animated Transitions (Good)
Animating transitions across websites is making a big wave at the moment — its not an easy thing to do, but done tastefully it adds a higher level of production value to a websites experience. In the example above not only does it feel nice but on a practical level the animations are allowing the image and text to make the most use of the screen real estate, drawing the eye and subtly introducing content onto the page — the lines between the art of motion graphic design and web design are being blurred. The good thing is modern browsers and devices allow us to take advantage of this technique to make a website work harder for your product and service content.
Scroll Hacks (Bad)
A Scroll hack website is where you force the users scroll to behave differently to normal. In the example Gif above you can see that the user is forced to have elements slide in a bit like a vertically scrolling carousel. We generally don’t like to give websites a scroll hack as it can feel like a hacked experience, and it is very difficult to control how every single mouse reacts to the javascript that controls the mechanic. A user arrives on a website and expects to be able to scroll normally, they can find a scroll hack a jarring or alienating experience. P.S in the example above i found it very very difficult to scroll on my mac magic mouse!
Sticky Headers (Good)
Sticky headers are content or navigation shown at the top of the page that then minimises or stays in place at a reduced capacity to allow for scrollable content in the rest of the website screen space. Traditional websites (and a lot of websites out there) have their website header/navigation scroll out of the viewport when the user scrolls the content — this makes it difficult for the user to then navigate elsewhere without scrolling all the way to the top again. This can be a bad user experience — and especially dangerous if you have call to actions or critical conversion functionality at the top of the page. If you employ the sticky header design pattern however you can tuck away the header/navigation and quickly unfold it if the user scrolls up again. This particular design pattern deserves its own blog post as there are many great things you can do.
Graphical Flourishes (Good)
Graphical flourishes are a very abstract thing — it’s essentially a design language that animates or is interactive through scroll or mouse movement. In the example above i chose to use one of our projects that had a fantastic brand developed by our client OPX. We drew from the custom typography and bought the flourishing lines to life as the user scrolls, they also just sort of spring to life and fade away randomly adding a bit of life to the page, something much more branded and a little different than every website with text on a white page!
Hero Video Loops (Good, Sometimes Bad)
We are seeing more and more websites using videos on their websites and apps. It’s a great way of setting a scene for your product or service, or even showing a product being used in situ. Pictures say a thousand words and a video is just lots of pictures, that says it all! Be careful not to make it too busy or distracting and ensure that your website can properly compress and stream the video without affecting the users experience. Remember also not to include to much obvious stock footage, this can come across as impersonal or off brand.
Thats all folks
There are a few more we can think, but we will update this post as and when we come across them and have the time.
Happy website building!
Co-founder & Director of Strategy
