I should have replaced the word ‘basic’ in my headline to something more click-worthy like ‘crucial’. The best response would be in 2018 web layout trends must be tied to address the user’s needs. Gone is the impulse to flaunt what the browser can do. Nowadays, the rule of thumb when designing web pages is that functionality must take precedence before design. Forget about all of the web layout trends, 2018 is about utilitarianism. Below I will discuss some of the changes taking place to web design. So, regardless if you have a steel fabrication in dandenong or a home extensions in Melbourne business, you need to be prepared to adapt in order to attract new clients and promote your business.
- Fewer menu options
In 2017, numerous websites upgraded and reduced primary navigation options. Like, header menus offered beforehand where around 5-7 options but now it has been reduced to 3-4. This will probably turn into a major trend in 2018. The rationale is to lessen the selection of activities, one thing summed up in a recent Econsultancy article by Michael Sandstrom. With lesser selections, the user can easily navigate to what they’re searching for. If they are searching for a female electrician and that is under a tab then it can easily be found, but not if there are too many options overcrowding the menu bar.
- Bye bye, hamburger
Although we’re on menus, we should bid farewell to the hamburger. Truly, it perfectly hides all your menu gubbins, however users usually don’t recognize the symbol. All the more imperatively maybe, cheeseburger menus mask the profundity and broadness of your site or application. Users are left with no introduction; out of the picture, therefore irrelevant. The hamburger menu has been removed off from Spotify which is a clear indication that more changes are coming.
- Duotones
Duotones are used to discover a balance between a nominal and a busy or distracting website which can be seen on sites ranging from homewares to liquid waste disposal. Symbolism can be incorporated along these lines, without pulling the eye far from key messaging or navigation, or in fact clouding them.
Go search a Google Image for ‘duotone examples’ and you may recognize the technique and many of the examples. Expect more duotone images replacing higher resolution hero backgrounds, or accustomed to consistency whilst numerous pictures are displayed.
- ‘Tactile’ design
This year, Google has further outlined its Material Design approach (it calls the Material Design guidelines a ‘living document’), and 2018 may see numerous website specialists following Google’s lead.
The goal is to conceive a ‘unified expertise across platforms and device sizes’. It’s about UX. To put it plainly, Material Design has numerous characteristics of a flat design (bold, graphic, with lots of colour) however it uses material as a metaphor; hence it incorporates tactile attributes such as surfaces and edges, moreover as rationalized area.
- Bye bye, parallax scrolling
Parallax scrolling is the embodiment of design floats that expects to motivate instead of serve. These encounters make utilization of background and foregrounds that scroll at very surprising velocities, that appears to add significance to the page. You can see a relatively refined utilization of the effect on Firewatchgame.com, which uses parallax in the hero image on top of the page.
Check AlfredService.com, for included illustration. Heaps of these sites are utilizing ‘scrolljacking’, a component that altogether bothers/befuddles a few clients (where the scroll of your mouse doesn’t correspond precisely with the movement of the page).
Other than perplexing the client, the downsides of parallax experience, it slows down load times and provides poor SEO (if a large portion of the site are images).
- Meaningful motion
One of the standards of Material Design is ‘motion provides meaning’. In spite of the fact that we’ll see the back of animation for animation’s sake (parallax), there is a case for the development of motion in web pages and apps. Google places it well, saying that motion have to be meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.
Browse through Android’s website to a few examples:
- The way that text flexes as it swings in on the main carousel.
- The way the carousel indicates you have gone full circle.
- The way images slide in as you select a dynamic menu option (OS devices).
- Bye bye, crappy stock imagery
We are presently at the point where we are undergoing various types of excavation services, in that, getting rid of stock imagery and using imagery provided by the business. The accessibility of top-notch imagery, close by the client driven mantra of organizations undergoing virtual transformation, leaves no area for crappy, unrepresentative and unimaginative stock imagery.
Corporation websites must be inviting and have to replicate the values of the business. That is not possible with images which appear on competitor websites because they are stock standard images. By showcasing projects via an image of what you have done, such as a second storey extension, you show potential clients/customers what they will be getting with your business.
- Fewer apps, more PWAs?
In 2016, app-inspired web layout got a bit of attention, with the advancement of several high profile progressive web apps (PWAs). On first visit, PWAs take advantage of HTML5 program innovation and advances in JavaScript to cache an ‘app shell’, and permit offline capability in addition to push notifications and a home screen icon.
- Google Fonts
Google created the open source library of fonts in 2010. As Google kept on taking a shot at Material Design in 2016, the Google Fonts service was also patched up.
Previewing fonts is faster and simpler, which include the potential to preview fonts on a whole swatch of history shades. It is also simpler to configure fonts, and Google highlights featured fonts that it feels are appropriate to Material Design. Google developed a free font called Noto, intended to deliver a cohesive visual language to over 800 unique languages, in order that there can be a continuity when converting language settings or juxtaposing scripts. Having these varying fonts means that if you want to highlight that your business specialises in commercial electrical contractors then you are able to.
- Minimalism
Typography, contrast and space are immeasurably critical. Minimalism implies an accentuation on performance (speed) and uncluttered UX. This trend sums up a number of the others on this listing.
To a degree, the trend turned into commenced via the flow to responsive websites, which now not only need to be clear on a mobile screen, however have conjointly inspired scrolling, that means users don’t anticipate that all substance will be stuck above the fold. If you are on an organisation’s metal fabrication site, you cannot expect a dropdown menu for each service such as galvanised steel mesh panels, wire furniture, etc. Less is more is the approach that is been taken now.