{"id":16388,"date":"2018-04-16T14:51:42","date_gmt":"2018-04-16T21:51:42","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=16388"},"modified":"2024-09-09T21:20:35","modified_gmt":"2024-09-10T04:20:35","slug":"web-design-trends-2018-the-complete-guide-for-designers","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/web-design\/web-design-trends-2018-the-complete-guide-for-designers\/","title":{"rendered":"Web Design Trends 2018: The Complete Guide for Designers"},"content":{"rendered":"

So far, 2018 has been a remarkable year for web design trends. We\u2019re seeing years of design evolution finally come to fruition in trends like Design Systems and Tactile Design, as well as fun and energetic styles like the return of retro. Now more than ever it\u2019s crucial to reflect on what\u2019s happening with web design, and what will continue into the future.<\/p>\n

In this article, we discuss the 6 web design trends that are influencing 2018 the most, starting with one that\u2019s shaping up to be a new design necessity.<\/p>\n

1. Component-Based Design Systems<\/h2>\n

If your company hasn\u2019t implemented a design system yet, chances are you will in the next few years. According to the most recent 2017-18 Enterprise UX Industry Report<\/a>, 67% of those surveyed are now currently building theirs, if they don\u2019t have one already.<\/p>\n

There\u2019s a good reason for their success, too. Design systems are the natural progression of style guides and pattern libraries, but with so much more to satisfy the needs of modern companies.<\/p>\n

\"MailChimp\"<\/p>\n

MailChimp, built according to <\/i>MailChimp Design System<\/i><\/a>. <\/i><\/p>\n

What is a design system?<\/h3>\n

A design system includes design standards, documentation, and \u2014 one of its central advantages \u2014 a UI toolkit with patterns and codes. Design systems aim to ensure consistency across each of an organization\u2019s products, and even within individual products themselves, and to use the optimal design solutions in any given situation.<\/p>\n

As Nathan Curtis says<\/a>, a \u201cdesign system isn\u2019t a project, it\u2019s a product, serving products\u201d.<\/p>\n

\"Design<\/p>\n

Because some of these areas can change, a design system is a \u201cliving document,\u201d constantly updating itself whenever new or better solutions reveal themselves.<\/p>\n

What does a design do in practical terms? Let\u2019s look at the Polaris Design System<\/a>, used by Shopify. They break their design system into four areas:<\/p>\n

Product principles<\/b>: Mission statements and approaches to product design, such as putting the merchant first and an emphasis on accessibility.<\/p>\n

Written content: A style guide for all written content, including grammar\/spelling choices, voice & tone, and general guidelines like target reading levels.
\n<\/b><\/b><\/b><\/p>\n

Visual properties<\/strong>: All things visual: color, typography, image guidelines, icons, chart presentation, etc..<\/p>\n

Components: The nitty-gritty, covering design patterns, their usage rules, and quick-copy code.<\/p>\n

\"Design<\/p>\n

 <\/p>\n

Shopify\u2019s Polaris Design System. <\/i><\/p>\n

How to Create a Design System<\/h3>\n

You can create your own design system by following these 7 steps from our free ebook Creating a Design System: The 100-Point Process Checklist<\/i><\/a>.<\/p>\n

    \n
  1. Create the UI inventory<\/b>: Go through all your products\/websites and list all the design patterns used. Rectify any inconsistencies you come across.<\/li>\n
  2. Get support of the organization<\/b>: Present your findings to get everyone else on board. It helps to estimate the number of design and engineering hours wasted on redundant work, plus mention how more streamlined products can improve NPS scores.<\/li>\n
  3. Establish design principles:<\/b> What are the principles that govern your company? Consolidate answers into a master list.<\/li>\n
  4. Build the color palette<\/b>: Standardize your color palette using precise color codes and agree on a universal naming convention<\/li>\n
  5. Build the typographic scale<\/b>: Fine tune your font sizes, weights, line-height, etc. and establish concrete rules for displaying text.<\/li>\n
  6. Implement icons library and other styles:<\/b> Revisit your initial UI inventory and carry over select icons and design choices.<\/li>\n
  7. Start building your first patterns<\/b>:\u00a0 Audit your pattern library to select the ones that best reflect your company, your products, and your customers.<\/li>\n<\/ol>\n

    Keep in mind, a design system is never fully finished. Update periodically and keep an eye out for areas that can be improved.<\/p>\n

    \"Update<\/p>\n

    GE Digital, built according to <\/i>Predix<\/i> <\/a>design system. <\/i><\/p>\n

    2. Polygonal Shapes and Geometric Layers<\/h2>\n

    One of the most distinct web design trends of 2018 focuses on geometric themes, specifically polygons and layered shapes. Chances are you recognize this style when you see it, but to put a precise definition on it, a polygon is any closed-off shape with straight lines, typically 3-5 sides. This trend includes every floating triangle and square you see, but also original shapes that fit the definition.<\/p>\n

    \"Geometric<\/p>\n

    https:\/\/www.anakin.co\/<\/a><\/p>\n

    The style essentially centers around geometry, either with shapes (both regular and irregular) or basic geometric patterns (grids, planes). Let\u2019s break down its specific components:<\/p>\n

    Simple geometry<\/h3>\n

    \"Geometry<\/p>\n

    http:\/\/www.espn.com\/espn\/feature\/story\/_\/id\/19742921\/espn-body-issue-2017<\/a><\/p>\n

    Rather than filling the entire screen, many companies like ESPN above opt instead for more original, but simple, shapes. This can bring other subtler benefits; for example, ESPN\u2019s slanted shapes above influence the natural visual flow, creating a more dynamic screen overall.<\/p>\n

    Bold Lines to Grab Attention<\/h3>\n

    \"Bold<\/p>\n

    http:\/\/www.mountaindew.com\/nba\/<\/a><\/p>\n

    Lines are geometry too, so highlighting them fits this style as well. When used correctly, big, bold lines can visually carry a screen, or draw attention to the complementary image.<\/p>\n

    When using thick lines, you want to pay attention to both color and intersection points. Color will determine where the user\u2019s attention goes, whether drawing attention to or away from the lines. Intersection points inherently become focal points, so use them to your advantage.<\/p>\n

    Detailing<\/h3>\n

    \"Lines,<\/p>\n

    https:\/\/chop-chop.agency\/<\/a><\/p>\n

    If you don\u2019t want to commit to a full geometric aesthetic, you can also use this trend for detailings. Polygons and geometric layers are visually interesting at any size, and so they make great secondary graphics or even button icons.<\/p>\n

    3. Tactile Design<\/h2>\n

    Tactile Design has an interesting origin: it grew from the principles of Material Design, but at the same time it modernized the old skeuomorphism trends from the early 2010s.<\/p>\n

    In a nutshell, Tactile Design makes objects appear real in a digital space. In the words of Google\u2019s Material Design guidelines<\/a>, \u201cthe material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.\u201d<\/p>\n

    \"Materials\"<\/p>\n

    https:\/\/www.zennioptical.com\/<\/a><\/p>\n

    Tactile design is hard to pin down with words, but like the geometric trends, you know it when you see it. Let\u2019s take a look at its common components:<\/p>\n

    No Borders<\/h3>\n

    \"Tactile<\/p>\n

    https:\/\/www.epicurrence.com\/<\/a><\/p>\n

    Like the real world, there are no borders or windows; everything is taken in altogether. Certain elements \u2014 particularly text \u2014 cross over from one element or screen to the next. For this to work, designers make a good use of space so that users know what they can click on and where it will take them. That\u2019s why you often see ample negative space (white space).<\/p>\n

    Multilayer Design<\/h3>\n

    \"Multilayer<\/p>\n

    https:\/\/www.apple.com\/ios\/ios-11\/<\/a><\/p>\n

    Just like Material Design, Tactile Design incorporates multiple layers to create a more realistic look. That means lots of drop shadows to distinguish layers and instill a little more realism.<\/p>\n

    Purposeful Motion and Animation<\/h3>\n

    \"Purposeful<\/p>\n

    https:\/\/www.getprepd.com\/<\/a><\/p>\n

    Tactile Design prefers meaningful motion over more complicated animations just for fun. Moving elements like hover states and transition animations don\u2019t just improve the visuals, they also serve a purpose and improve usability.<\/p>\n

    Detailed Photography<\/h3>\n

    \"Detailed<\/p>\n

    https:\/\/www.adidas.com\/us\/ultraboost-all-terrain-shoes\/S82036.html<\/a><\/p>\n

    Again because of the importance of realism, Tactile Design uses highly detailed photography, a mixture of HD quality and close-up angles. This is doubly beneficial to ecommerce sites, since detailed photos give shoppers a better understanding of what they\u2019re buying.<\/p>\n<\/section>

    Grab design ebooks created by best designers<\/h3>

    All for free<\/p>