In 2016, it’s unheard of for any business to not have a website. The Internet is a key way for people to discover, research, and engage with businesses.
So how do you compete in such a full marketplace?
There are many digital patterns and techniques that businesses can use to boost their presence. The following common trends can be cleverly utilised to make your business stand out.
User interface (UI) patterns
UI patterns are becoming increasingly popular around the web. Here are some key components of the web user experience, often used to maximise engagement:
- Burger icon – this menu button, consisting of three horizontal, parallel lines, took a lot of criticism when it first surfaced. However, in recent years it's become highly recognisable as a typical menu button.
- Signing up – sign up forms used to be long, annoying forms no one really wanted to fill out. Nowadays, with nearly everyone having a social media account, being able to sign up using your Facebook or Twitter has made the products and services easier and less time consuming to interact with.
- Long scroll – everyone seems to have become used to scroll through long pages, thanks mobile browsing. A few years ago everyone believed the most important element had to be above the fold, but this is no longer the case.
- Card layouts – people have grown to love these rectangular shape boxes. They hold bite-size blocks of information, with the user able to scan through quickly. Pinterest has brought the card layout to the mainstream.
- Hero images – these are large, bold banner images. With advances in bandwidth and data compression, we are able to serve HD hero images – and as vision is the strongest human sense, it’s the perfect way to capture a user’s attention.
We are seeing animation all over the web more and more. It enhances storytelling, and makes the user’s experience more interactive.
However, you can't just throw an animation anywhere you feel like. Consider carefully whether it makes a positive impact, preferably via your website’s story elements or through a personal connection.
Animations can be summed up in two categories. Large-scale animations are primary interactions which require user input, whether that is scrolling the page to cause a parallax effect or clicking a button for a modal to appear. Meanwhile, small-scale animations are secondary interactions that require little user if any, input. Examples of this are hovers, loading spinners and loading bars.
Here are the main trends in animation – use these to give your users a more compelling experience.
- Loading animations – used to show the page is loading.
- Navigations – a hidden navigation that the user interacts with via an icon or button.
- Hovers – give a more intuitive feel to a site, appearing as users mouse over content.
- Carousels – image slideshows which can show multiple images in an area.
- Motion – our eyes are naturally drawn to movement of any kind, which makes a movement animation the perfect tool to catch a user’s eye.
- Scrolling – smooth scrolling relies on animation and gives further control to the user, who can determine the pace of how the animation unfolds.
- Backgrounds/Videos - A simple background animation can add visibility to your website.
Late last year, Google launched its new style language, Material Design. It uses shadow effects, the concepts of movement and depth in order to make the design appear more realistic. Material Design’s goal is to create clean and modern designs, with user experience as its core focus.
Responsive design has become increasing popular over the recent years, due to mobile internet usage rising. It‘s relatively simple way to build a functional mobile-friendly website. It is highly compatible with minimalism, which is necessary to keep page load times down. It also works great with cards as it can be easily restructured in order to fit any breakpoint or screen size.
Ever-enduring flat design has been around for a while now. It intertwines with minimalism, material and responsive design.
We have started to see certain trends in flat design all around the web:
- Long shadows – bring more depth to a flat design.
- Vibrant colour palette – a framework such as BootFlat, which is also known as Flat UI, have been known to experiment with bright vibrant colours.
- Typography – with responsive design becoming more of a web standard, choosing a simple easy-to-read font assures your content remains readable.
- Ghost buttons – these allow functionality without breaking up the UI, often shown as an outline which changes on hover.
- Minimalism – to cut down on clutter in your UI.
Do some testing
Ultimately, the web trends you use have to reflect your brand. Don’t use a vibrant colour palette if the tone of your business is more refined and subdued. A photography company could make great use of a card layout, as it is highly visual.
Try out a few techniques and see what you think. Used correctly, the above methods could really give your web presence more personality, dynamism and interactivity – which means visitors will remember you, and come back for more.