Psychology-driven brand design. Creating and refining remarkable brand identities.

Design - from all angles

A blog about branding, marketing, and design, mostly through the lens of practical psychology, intended to be a resource to small businesses and entrepreneurs. Unless otherwise noted, all articles are written by Nyla Smith, owner of n-Vision Designs. {Subscribe to the RSS feed here: RSS}

Web Design Trends for 2018

Guest Author | Tuesday, July 31, 2018

who does web designSometimes, trends get a bad rap (polyester jumpsuits, anyone?). By very nature, they will soon be out of favor, and those left hanging on are seen as out-of-touch. But not all trends are fleeting. Trends can reveal the direction that society is moving, indicative of more permanent underlying shifts. This is as true of design as anything else.

By studying global web design trends, we can discover the direction of movement of those at the cutting edge of their industries. It’s not about following in their footsteps. It’s about using their work as a point of reference to fuel your own creative path… and keeping your eyes open for what is to come.

We’re more than halfway through 2018. Here are trends that have emerged or strengthened this year that we believe will have staying power.


Web Design Trend #1: Mobile-first Design Experience

Example:

example of web design trend

Description:

Smartphone browsing is now officially more popular than desktop browsing. Mobile browsing occupies 63% of all browsing worldwide. Due to these huge surges in mobile browsing, Google has altered its search algorithms to prioritize mobile-optimized websites in what is known as “mobile-first indexing.”

For designers, this initially posed a rather large and unique problem: how do we cram appealing and useful graphics and UI features into such a small space?

Businesses and brands who step up to this challenge are sure to be rewarded since 4 out of 5 smartphone users access retail websites from their mobile device each month.

Mobile-first design is all about compacting the main components of your site into an easily digestible format for mobile browsing. Keeping important graphics big enough to fill the screen allows users to view your website without zooming or squinting.

Benefits of mobile-first design:

  • Increases your website’s accessibility
  • Simplifies your content down into manageable chunks for small screen viewing
  • Yields proven advantages in SEO and organic search rankings

Web Design Trend #2: Broken Grid Layouts

Example:

example of web design trend broken grid

Description:

Instead of using linear grids with gutters that form hard stops, broken grid layouts allow elements to break through the gutters, often forming a catalogue or collage-like effect.

Broken grid layouts promote symmetry without being too cookie-cutter or boring.

Using a broken grid layout for your web pages can produce unexpectedly effective results with relatively little effort.

Benefits of Broken Grid Layouts:

  • Provide a modern style which is organized without being too boring or generic.
  • Can quickly transform a series of geometrical graphics and letterforms into something all the more unique.

Web Design Trend #3: Illustration-inspired Graphics

Example:

example of web design trend illustration

Description:

In our digital age of futuristic design it is somewhat surprising that illustrators are retaking the center stage in the design world. Formerly, web designers would orient imagery around one of two things:

  1. Digitally generated product or UI shots
  2. Photography

Now, we’re seeing a resurgence in hand-drawn graphics. Often, these are digitally altered but the core of the graphic is distinctly illustrative or hand-drawn.

The reasons as to why this is happening in 2018 are interesting, but it could just be that web design is mirroring the cyclic nature of the fashion industry. Advertising in the 60s, 70s and 80s was driven by illustrators and we’re now going through a time in which nostalgic or retrospective design creates a compelling sense of striking vintage familiarity.

Benefits of illustration-driven design:

  • Illustrated graphics provide a natural and humanistic taste of creativity to your brand.
  • Unlike photography, which is bound to the laws of physics and nature, illustrations allow brands to capture the essence of a product in more abstract terms.
  • Illustrated design can provide a canvas for daring and original digital enhancement whilst retaining the core illustrative form.

Web Design Trend #4: Organic and Circular Shapes

Example:

example of web design trend organic shapes

Description:

The effects of shapes on our mental state has been of fundamental interest to psychologists for centuries. Throughout art and design, shapes have been used to evoke human emotions and responses like motivation, trust, danger, fear, and competence.

Whilst a subjective and complex subject, scientific research reveals our reactions to some common shapes:

  • A delta, or upside down triangle, signifies danger or conflict since it seems like an illogical and perilous position for the shape. Many hazard or road signs are shaped this way.
  • An upright triangle has a clear peak which can be used to indicate motivation or determination, rather like a mountain top.
  • Circles are perhaps some of the most potent shapes in nature since they represent celestial bodies including the Sun, Moon and Earth itself. They represent togetherness and unity.
  • Rectangles and sharp edges are uniform and linear and can represent technicality, modernism and complexity.

Whilst design has formerly concentrated on modern, angular and geometric shapes and designs, it is now positioning itself to be more curvy, natural and organic.

This style may seems like it contradicts the trend of harsh-edged broken grid layouts but the juxtaposition of both design elements can create interest and drama. See the example below of Bitlocation's overtly minimalist juxtaposition of circle and square.

example of web design trend organic shapes

Benefits of using organic shapes:

  • Organic shapes can align your brand to seem fresh, in-tune and flexible.
  • By combining linear geometric elements with curvy or circular shapes, you can create impactful juxtapositions.

Web Design Trend #5: Creative Interactions and Animations

Example:

example of animation web design trend

Description:

Design is no longer dominated by static images. The animation of web pages is a distinctly modern development and has been widely adopted thanks to the optimisation of motion graphics along with higher speed internet connections.

Animation has always been a tricky subject in web design and designers have questioned the point at which things become overwhelming and pointless.

Always keep this golden question in mind: do your graphics enhance UI or UX?

Motion graphics and transitions should always aim to provide something useful to a user’s experience.

Transitions are the most popular form of page animation. They can set a web page in motion to provide a UX that is more compelling than a static page. They improve user experience by adding fluidity to the browsing experience.

example of animation web design trend

Aside from transitions, designers can employ animations for a variety of purposes:

  • Animations can inform new visitors or users on how to navigate or use a site and its features.
  • Animations can be purely aesthetic, fun and visually appealing
    example of web design trend
  • Animations can bring life to functions and processes that were once lifeless formalities.
    example of web design trend

Benefits of animation and interaction in design:

  • Animations are captivating and compelling and we’ve become familiar with seeing them on web pages every day.
  • Animations can teach users how to use a site or product in an intuitive manner.
  • In a web design world where static design has dominated for years, motion graphics provide something fresh and exciting.

Web Design Trend #6: Floating Navigation Menus

Example:

example of web design trend floating navigation bar

Description:

The floating menu has become a hallmark of modern website design. An immediate benefit is that your CTA travels the website with your user and is always handily displayed in the same place on each page.

Some designs have taken this a step further by featuring a completely detached menu from the top of the webpage.

The floating menu can be pretty subtle like this menu on Anchor and Orbit which seamlessly blends between backgrounds of equal colour.

example of web design trend floating navigation

This menu on Resau is less subtle and uses a drop shadow to blend it into the site’s background. There’s just enough contrast to make it obvious and apparent to the user.

example of web design trend floating navigation from Resau website

Benefits of floating menus:

  • Improves site accessibility and navigability whilst keeping CTAs visible at all times.
  • Adds a modern visual element to a webpage that is continuous through the site.

Web Design Trend #7: Content Hubs

Example:

example of web design trend

Description:

Content has been a major SEO and ranking factor for over a decade and its enduring importance isn’t set to fall or falter.

Visibility & Traffic: In order to succeed in boosting your search traffic, you’ll need great content and a well functioning content hub. Hosting a content hub with high quality resources will place you in a good position to reap the benefits of organic search.

Authority: Consistently publishing trustworthy, useful content is a proven route to become a niche or subject leader.

User Personalization: A great benefit of hosting a content hub is that you can provide content that is personalized, relevant and appealing to the user’s interests. Plus, you can choose to host a comprehensive range of topics, pillars, related CTA’s that’ll boost your brand’s thought leadership credibility.

But what does content have to do with design?

A content hub has to look great and be organized intuitively. See these examples:

example of web design trend content hub
example of web design trend content hub

The design of these content hubs lifts the entire site into something a bit more modern and integrates with the sites’ design and UI/UX principles.

Content hubs like these can drive users to read, value, and share your site’s content.

Benefits of content hubs:

  • Provide long-term benefits to SEO and organic search ranking.
  • Give users a new and innovative way to explore your site’s resources.

Web Design Trend #8: Component-based Design:

Example:

example of web design trend component-based design

Description:

A component design system contains design standards and guides, tools and codes for UI development and extensive documentation for everything from product and app creation to content and graphic creation.

Component-based design systems provide a single-source approach to UI and UX and this keeps a business’s designs, products and resources in alignment across multiple platforms and sites.

Component-based design systems are broadening in their accessibly and appeal to SMEs and enterprise-level brands alike. According to the 2017 - 2018 UX industry report, 67% of companies who do not use component-based design are currently planning to.

This is trending in 2018 because of the huge efficiency bonus it gives to a company’s digital operations. Alignment of graphical and design style to everything else — from content to marketing collateral — is hugely important.

Benefits of component-based design:

  • Provides consistency across the whole spectrum of digital design.
  • Allows for smooth B2B interfacing between partner companies.

Web Design Trend #9: Simplicity and Minimalism

Example:

example of web design trend minimalism

Description:

Minimalism has long been seen as web design’s ace in the pack.

Firstly, minimalist sites are less cluttered and simpler for the user to navigate. Even complex sites can be cleverly split into a series of neatly organized minimalist elements.

Secondly, minimalist sites experience faster load times than those which are cluttered with graphics and features. This can open up resources for animations and transitions. You’re less likely to be calling multiple javascript files or stylesheets. This in turn will improve site speed by reducing the number of HTTP requests.

Thirdly, minimalist web designs place the focus on a website’s content and products. 79% of text users scanned any new page they visited, in comparison to only 16% that read the page word by word. It’s a difficult balance to strike - you don’t want to make your site look flat and boring. A minimalist canvas can however optimize your site for the addition of other new-gen design elements.


Conclusion

Web design is a multidisciplinary creative industry and it’ll forever remain in a fluid state that twists and turns between contemporary and classic styles. There really is no standardization of rules or sets of principles to abide by and that’s the beauty of it.

As we keep our eye on these trends, we’re also looking ahead to what is next, and how current trends will influence the future. We’re now at the cusp of a new generation of web design that involves AI and virtual reality which will further push the boundaries of creative investigation for artists and designers. It’s exciting to see what comes next!

Despite all trends, one consistent aspect to web design is that it’s always humans who are using your site. Whatever choices you make, orient your site around user experience. Design concepts can be created, adopted, or destroyed. However, you should always make sure that your site is user-centric and focuses on pleasing your visitors and customers.

About the Author: Article produced by Sam Jeans and James Phoenix from Vidioh, a video brochure marketing company that focuses on video and print solutions.

Comments
Post has no comments.

Keep reading: