# data[].attributes.body
https://designrevision.com/14-modern-web-design-trends-2018/

1. Creative use of AI and Chatbots
2. Gradients
3.Bold Typeography

Samantha Schade

# data[].attributes.body
There are many different trends that are pointed out on this website, but only a handful of them I see.

1. Polygonal Shapes and Geometric Layers:
Some examples include the bold lines that are presented on the Mountain Dew website with the lines drawing the attention.

2. Extreme Colors:
I agree with this section due to many websites using more abstract coloring with textures and gradients.

3. Simple Homepages:
This trend is evident in websites such as Evernote. The website uses minimalism with a lot of negative white space.

-Thomas Godersky

# data[].attributes.attachment_link.readable_text
So far, 2018 has been a remarkable year for web design trends. We're 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's crucial to reflect on what's happening with web design, and what will continue into the future.

In this article, we discuss the 6 web design trends that are influencing 2018 the most, starting with one that's shaping up to be a new design necessity.

1. Component-Based Design Systems

There's 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.
MailChimp, built according to MailChimp Design System .
What is a design system?

A design system includes design standards, documentation, and - one of its central advantages - a UI toolkit with patterns and codes. Design systems aim to ensure consistency across each of an organization's products, and even within individual products themselves, and to use the optimal design solutions in any given situation.
Written content: A style guide for all written content, including grammar/spelling choices, voice & tone, and general guidelines like target reading levels.
Because some of these areas can change, a design system is a "living document," constantly updating itself whenever new or better solutions reveal themselves.

Product principles: Mission statements and approaches to product design, such as putting the merchant first and an emphasis on accessibility.
Shopify's Polaris Design System.
Visual properties: All things visual: color, typography, image guidelines, icons, chart presentation, etc..

Components: The nitty-gritty, covering design patterns, their usage rules, and quick-copy code.

How to Create a Design System

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 .
GE Digital, built according to Predix design system. https://www.anakin.co/
Start building your first patterns: Audit your pattern library to select the ones that best reflect your company, your products, and your customers.

Keep in mind, a design system is never fully finished. Update periodically and keep an eye out for areas that can be improved.
http://www.espn.com/espn/feature/story/_/id/19742921/espn-body-issue-2017
2. Polygonal Shapes and Geometric Layers

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.
http://www.mountaindew.com/nba/
The style essentially centers around geometry, either with shapes (both regular and irregular) or basic geometric patterns (grids, planes). Let's break down its specific components:

Simple geometry

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's slanted shapes above influence the natural visual flow, creating a more dynamic screen overall.
https://chop-chop.agency/
Bold Lines to Grab Attention

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.

When using thick lines, you want to pay attention to both color and intersection points. Color will determine where the user's attention goes, whether drawing attention to or away from the lines. Intersection points inherently become focal points, so use them to your advantage.
https://www.zennioptical.com/
Detailing

If you don't 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.
https://www.epicurrence.com/
3. Tactile Design

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.
https://www.apple.com/ios/ios-11/
Tactile design is hard to pin down with words, but like the geometric trends, you know it when you see it. Let's take a look at its common components:

No Borders
https://www.getprepd.com/products/prepd-pack
Like the real world, there are no borders or windows; everything is taken in altogether. Certain elements - particularly text - 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's why you often see ample negative space (white space).

Multilayer Design
https://www.adidas.com/us/ultraboost-all-terrain-shoes/S82036.html
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.

Purposeful Motion and Animation

Tactile Design prefers meaningful motion over more complicated animations just for fun. Moving elements like hover states and transition animations don't just improve the visuals, they also serve a purpose and improve usability.

Detailed Photography

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're buying.

Grab design ebooks created by best designers

All for free

Download e-book for free

Close

4. Complex Desktop/Simple Mobile

Recently, we're seeing a differentiation between mobile and desktop interfaces of a site. Rather than cramming a complex system into a mobile device or moving a simplistic system as-is to desktop, companies are designing more device-specific variations of the same product, site, or app.

The trouble is knowing what needs to be changed, and how. Below, we've collected some top pointers on how to best use mobile device's individuality instead of just translating a desktop system:

Mobile Alternatives for Complex Interactions

Replace header videos with stills from the video. If you need to include a video on your mobile site, use a link to YouTube.

Don't use hover effects. Instead, tappable buttons or gesture controls can hide/show information.

Simplify animated effects. They just don't work as well on mobile. For example, Coach replaces its desktop slider-animation combination graphic with an animated gif on mobile.

Replace dropdown menus with hamburger menus. Love them or hate them, hamburger menus are an established pattern that everyone already knows how to use.

Implement voice activation when you can. This is becoming increasing popular, and may be the new norm in a couple years.

Reevaluate colors and backgrounds. Mobile devices sometimes require more contrast to maintain readability.

5. Modern Retro Design

90s: A time when designers where exploring what digital platforms could do. Lots of animation, colors, and moving parts, or else stripped-down designs of pure information.

80s: The pixelation from the budding video game industry mixes with the bright neon culture from period fashion and early MTV.

70s: Muted colors and bold typography - particularly psychedelic fonts - from when print media was still strong.

Using retro styles in modern times requires picking-and-choosing the best elements to use. After all, certain design styles are best left in the past. Below are our suggestions on what to keep:

Old-School Typography
http://www.sbs.com.au/imyourman/
We see a resurgence of not just big and bold text, but also the fonts themselves. Fonts with elaborate strokes, thick cursive, and/or rough edges are becoming popular again, as are fonts reminiscent of old movie posters.

The key to using such "loud" fonts effectively is moderation. Big and bold typography is ideal for titles and headlines, but can be distracting for secondary information or body text. It's best to pair loud fonts with a simpler and subtler font for normal copy.

Extreme Colors
https://caavadesign.com/
Whether using muted colors or bright colors, modern web design pays extra attention to color. Color overlays are common, and so is using matching colors to accent other images and illustrations.

Texture and Gradients
http://thislandishovland.com/
Like colors, texture and gradients are commonly seen in extremes. Some organizations put plenty of texture to give their sites a more realistic feel, while others are stripping away such effects for a stark minimalism.

Video-game Style
http://mostdecisivegame.com/
Pixelation, mimicking the original Nintendo console, is a popular style even for non-gaming sites. The juxtaposition of low and high fidelity allows for a interesting aesthetic both older and younger generations love, not to mention how easily it stands out.

6. Simple Homepages

Last, a return back to basics. Homepage trends have come and gone over the years, but now we're seeing simpler home pages that work more as a gateway than a source of information.

This trend actually emcompasses a variety of other trends. So to get a homepage that looks modern, you can utilize any number of the trends below.

Minimalism
https://evernote.com/
The go-to style for simple and easy-to-use interfaces. You can identify minimalism by its abundant negative space (white space), big & bold typography, and colorful accents. For homepages, color works best to draw attention to your main call-to-action, as with Evernote above.

Flat Design Family
https://www.mint.com/
Flat, Almost Flat, and Flat 2.0 - similar but with distinct differences - all work well for simplifying homepages. Like minimalism, they reduce distractions and take advantage of color flourishes, but flat design is more forgiving of detailed visuals like an HD hero image.

Subtle Animations
https://www.roystonlabels.co.uk/ https://www.ditto.com/
Animations can improve both usability and user enjoyment, but they can also distract from your main elements. Lately homepage animations have become more subdued, limited mostly to:

automated animations that move on a fixed schedule

trigger-based animations that move when the user clicks or scrolls

These more subtle animations retain the benefits of movement, but without losing the simplicity that modern homepages are going for.

Beautiful Photography and Videography
http://www.casangelina.com/
As long as you leave out other attention-stealing imagery, using a solid hero image or video background still can make a simple homepage. It allows the user to focus solely on the subject of the visual, which can have a powerful effect when done well.

Prioritize Readability
https://digiday.com/
Particularly popular with long-form content sites, homepages are seeing a renewed appreciation for readability. If you want to highlight your homepage copy, make it more legible by using:

above-average text size (>16 pt. for body copy).

exaggerated leading or line heights (1.75x text size).

oversized gutters.

text color contrasted with background.

centered images and callouts so line lengths remain equal.

Conclusion

Web design in 2018 is making huge advancements, perhaps more than in any preceding year. That makes this year one of change and transition, where fields like mobile design and component-based systems are coming into their own, while older styles like busy pages are retiring.

Now more than ever it's time to reevaluate your design strategies and catch up on everything that's been coming to light over the last few months and years.
For more advice and dozens of examples, download the full 78-page free ebook Web Design Trends 2018 .

# data[].attributes.attachment_link.title
Web Design Trends 2018: The Complete Guide for Designers

# data[].attributes.attachment_link.description
So far, 2018 has been a remarkable year for web design trends. We're 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.

# data[].attributes.body
https://dev.to/carl_conton/3-major-web-development-trends-for-2018-2iac

The three trends that this website lists and that I agree with are:

1. Responsive Web Development
This includes making website friendly to all devices, specifically mobile.

2. Lifestreaming
Live streaming has become popular on many platforms. It's an expansion on the already popular social media sites.

3. QR Codes
QR codes give us quick access to URLs on our phone. Instead of typing out a URL, we can just use our camera to take us there instantly.

-Caleb Lombardo

# data[].attributes.body
https://medium.com/gravitdesigner/how-to-handle-10-most-controversial-web-design-trends-2018-2668f16d90d1
The three trends I have been seeing that I like the most are:
Animation
Bold Colors
AI/Chatbots
I think these are becoming popular because they make a website more. There are so many websites out there it makes sense web designers are going to want to find ways to make their websites more interesting and stand out from all of the other websites.
-Katie Farr

# data[].attributes.body
https://www.uxpin.com/studio/web-design/web-design-trends-2018-the-complete-guide-for-designers/
Some of the trends I've been seeing are:
1. Geometric Shapes
using simple geometric shapes help to enhance the visual flow
2. Bold Lines
bold lines grab attention
3. Multi-Layer designs
using drop shadows give depth to an otherwise flat image.

~Cathy Ziegler
(Pixie)

# data[].attributes.headline
7 Web Development Trends You Can Expect in 2018

# data[].attributes.subject
7 Web Development Trends You Can Expect in 2018

# data[].attributes.body
https://usersnap.com/blog/web-development-trends-2018/

Online and web trends are all moving to mobile and touchscreen devices. Even laptops are going to touchscreens. Minimal sites or using single websites are also trending which with the size of the devices that are being used is a bonus.

Top 3 Trends:
1. Mobilization
2. Web Apps
3. Animations

-Andrew Key

# data[].attributes.body
I have noticed more bright colors and high contrasted backgrounds are becoming more and more of a trend. It makes people instantly distinguish your site from others around it.
This site has 5 trends I've seen become more apparent
https://www.goodbarber.com/blog/top-5-web-design-trends-of-2018-a893/

~Alex Fuller

# data[].attributes.body
I'm noticing these layout trends in cutting-edge websites, as well as in new themes/templates:

Minimal

Plenty of white space

Subtle animations

Smooth page transitions

Fonts used as a design tool

Vibrant color schemes

An overall classy and modern look.

https://99designs.com/blog/trends/web-design-trends-2018/

Anne Allmann

# data[].attributes.body
They are Web notification that a newer feature that is added into a modern browser. Push notifications are intended as alerts for the user outside of the web page context. Mobile apps notifications are turning out to be a very highly efficient means of end user re- engagement. And have recently has been implemented for websites and is becoming new web development trend. The user visits a website and is offered to enable push notifications. This will allow the user to be notified of any changes on the website, even after the user has closed the tab to that website. One major benefit of this technology is obvious - you can keep the user engaged without huge efforts. And in some cases, push notifications can be a cheaper alternative to mobile apps as they deliver information instantly and redirect the user to the website to find out more. You Can find out more about Progressive Web Apps from the Link below.

~Jeff Meisenburg

# data[].attributes.attachment_link.readable_text
Website push notifications are clickable messages that are sent by a website to their subscribers' browsers. They work very similarly to mobile app push notifications (notifications sent by a mobile app that land in your notification tray) except that they work on websites instead of apps and can be accessed on all devices (desktop, mobile, tablet, etc).

In this article, we're going to take a look at website push notifications in the E-commerce space. We're going to discuss why E-commerce players cannot afford to ignore website push notifications, how they work and how to optimize your push notification campaigns to deliver great results for your online store. Let's start!

Why use Website Push Notifications

A brief look at the communication channels for E-commerce

E-commerce businesses use a variety of ways to grow their traffic i.e. new visitors, as well as engage with their existing traffic i.e. the folks who have already visited your website. These include exploring various communication channels - email, social media, SMS, push notifications (both websites and apps); it also involves employing these channels in different kinds of campaigns to reach and engage users. Let us take a brief look at each of these channels and try to understand where they prove useful.

Email

Email is most commonly used to deliver curated product suggestions, advertise upcoming sales and discount offers, ask for product reviews, recover abandoned carts, deliver transactional information such as order confirmation, tracking details etc.

The main advantage of email marketing is that it has a wide reach - a study by The Radicati Group reveals that there are currently 2.6 billion email users, which means that more than 1 out of 3 people have an email account. Another very important advantage is that an email stays in the inbox, accessible anytime, unlike social media messages and notifications, which are harder to access later (or even impossible). This is particularly useful for delivering important information like order and tracking details.

Where email marketing misses out, however, is the ability to deliver time-sensitive information. According to Zipstripe, the average time for email recipients to view an email message is 6.4 hours. This means that email is not effective for sending time-bound emails, such as coupons with a tight redemption period, or important actionable information such as "Your package is out for delivery".

Social Media

Social media networks (Facebook, Twitter, Pinterest, Instagram) work better than email marketing when it comes to delivering short-time offers and discounts since people spend more time on social media websites than on any other online activity. So, what's the problem? It's the problem of engagement - only 0.07% of your Facebook audience interacts with your posts and the figure is 0.03% for Twitter. What this means is that social media is not very effective for messages designed to achieve a specific purpose in a specific time, since so few of your audience will actually react to that message. Instead, social media is better employed as a means to establish your brand and build a relationship with your audience.

SMS

SMS is effective if you want your user to read your message very quickly - 90% of SMS messages are read within the first 3 minutes. This makes it useful for communicating important business-information like "Your cab is arriving" or "Your item will be delivered today".

SMS should not be used for information that the user will need to access later, such as receipts. SMS messages are difficult to search later on. Another disadvantage of SMS messages is that they can only contain a maximum of 160 characters, which drastically limits the kind of communications you can have through SMS.

Push Notifications (Mobile apps)

Push notifications is the default way by which mobile apps communicate. It scores over email for promotional content in that it delivers messages in real-time and it has also reported higher response rates compared to email (Open rates for push notifications are 50 percent higher than for email, and click rates are up to twice as high, according to this survey).

It is tempting to think of app push notifications and SMS as the same but they have crucial differences - the opt-in/opt-out options in app push notifications give the user greater control over what kind of messages he/she wants to receive. SMS on the other hand, often comes unsolicited and it is harder for the user to disable. Because of this, SMS is often perceived to be a lower messaging medium.

Where does Website Push Notifications fit into the picture

Website push notifications fit into a very unique spot in this entire spectrum. It differs from mobile app push notifications in that while app push notifications are limited to mobile devices and tablets, website push notifications also covers desktops. Desktop usage still accounts for 42% of total internet time. Web push notifications deliver the power of real-time push notifications to this 42% of internet users.

Another point which makes website push notifications very important for E-commerce is the cost factor. Building a quality app is an expensive affair and sometimes the ROI can be difficult to justify. In fact, for small and medium sized companies, mobile websites may reach more people than mobile apps do. This makes website push notifications more critical since it gives businesses the ability to send push notifications without investing in an app.

All in all, it can be seen that website push notifications is an important channel for E-commerce since it gives websites the power of instant communication via websites and that too on all devices, be it desktop mobile or tablet.

How do Website Push Notifications work

By default, whenever you install a mobile app, you give the app the permission to send you push notifications on your device. Websites, however, have to explicitly take permission from their users to send them push messages. This is how website push notifications work:

The first step is getting opt-in from visitors. As soon as someone arrives on a website, an opt-in box is triggered. If the visitor clicks on "Allow", he/she is added to your subscriber list.

Opt-in modal box

As soon as a 'visitor' becomes a 'subscriber', you can send them push notifications from your website. The title message and the text message are customizable within certain character limits and a URL has to be specified. These notifications will arrive in real-time even if the browser is not open at that point of time. Clicking on the notification will take the subscriber to the URL specified.

How the notifications look

Optimizing Push Notifications

Now that we've established the importance of push notifications and how they work, it's time to take a look into how to optimize your push notifications to drive more sales from your existing subscribers. This section is divided into the following subsections - writing great push notification copy, when to send a push notification, how frequently should you send push notifications, using segmentation to send personalized notifications and, lastly, what metrics to track.

Copywriting for Push Notifications

Since push notifications impose character limits on the title as well as the message, the copywriting becomes that much more important since you have to squeeze your message into a small package while still retaining its effectiveness.

Whenever you are writing the title and message text for a push notification, the most important thing to keep in mind is that the purpose of the copy is to get subscribers to click. For that, your copy needs to, above all, provide some value to the subscriber. People will only click on the notification if they find it valuable.

Here are a few tips you can follow:

Be clear in what you are saying - Your subscribers have busy schedules and do not have time for vague messages. Do not test their patience by making them think. A clear message will have a greater click rate by the very virtue of the fact that it is action-oriented. In a fight between "Have you read Jeffrey Archer's latest?" and "Jeffrey Archer's latest novel available for purchase", I'll always go for the latter because it is clearer in its message as opposed to the former.

Be crisp in your copy - Different platforms have different character limits for push notifications but all of them fall in the range of 40-120 characters. Thus, it is very important for you to be very concise in what you are saying. This often means that you need to identify the one most important value proposition of your message and let that shine through in the notification copy.

Use scarcity to create urgency - According to Dr. Robert Cialdini, author of Influence: The Psychology of Persuasion, we are more motivated by the idea of potential loss than of potential gain. That is, if we find that an opportunity is closing, we want it that much more. This is also known as FOMO (Fear Of Missing Out).
You can use this psychological principle when you write your push notification copy. For example, if you have a sale coming up for your online store, try sending a push notification that says something like, "Flash Sale! 12 hours only".

Use Social Proof - IBM's marketing slogan in the 80s, "No one ever got fired for buying IBM", is one of the most powerful marketing phrase ever created. This is one of the most powerful examples of social proof, where the company used the tendency of people to go along the established route.
In push notifications, social proof can be used to increase click rate. For example, you can write something like, "4000 marketers have already registered for this event" if you want people to register for an event or "This post has more than 1000 Twitter shares" if you want subscribers to click through to a blog post.
Keep in mind, though, that this is not the 80s and internet users have access to all the information they need on their fingertips. Thus, it is important to not go overboard with claims and only write stuff that is credible.

When to send Push Notifications

Website Push Notifications, by their very nature, require an instant response on the part of the receiver. This makes timing all the more important. A classic mistake when sending push notifications is not take into account the time zone your subscribers are located in. To fix this, you need to have a clear understanding of how your subscribers are spread around the globe and be very particular that each time zone receives the message at an appropriate time. It's definitely more complicated than sending out a notification in a single batch, but that's the kind of effort that is required in this highly-personalized environment. For example, you don't want to end up with this notification when the stars are twinkling, do you?

A wrong time to send this notification Another thing that you need to consider is that different kinds of notifications work at different times of the day. If you are sending a promotional message, you want your users to be in a restful state of mind so that they have the mental bandwidth to check out your offer. Choosing to send something funny and light-hearted? Go for the afternoon, when people are feeling bored in the office and want something to crack them up.

How Frequently to Send

Probably the most important thing to consider as you scale up your push notification campaigns is the frequency of your messages. Since push notifications is a high-engagement communication channel, you need to be really careful not to inundate your subscribers with more notifications that they can handle.

Since website push notifications is a fairly new technology, there is no data out there on optimal frequency. At this stage, you need to carefully monitor your click rates, time on page, bounce rate and opt-outs after every push notification to find out which frequency works best for your audience.

Using Segmentation to Send Personalized Notifications

As E-commerce marketers, personalized messages are nothing new for us. We all know that they work. However, it is doubly critical to not follow the spray-and-pray approach when it comes to website push notifications, simply because opting-out is so easy and there is no way for you to get those unsubscribers back, unless they change their settings. For example, this guy is totally opting-out after receiving this notification.

A poorly personalized push notification E-commerce players, therefore, need to categorize their subscribers into different buckets that are as narrowly defined as possible. One way of doing this is to ask subscribers for preferences at the time of opting-in. Another very effective way is to go for behavioral segmentation i.e. putting subscribers into different segments based on their on-page activities like type of pages viewed, number of views of a particular page etc. For example, if I've been checking out books in the spy thriller genre lately, the store should mark me as someone who's interested in the genre and send me a notification whenever something new is published in that category.

What Metrics to Track

The most immediate metric that comes to mind when thinking website push notifications is click rate. This is how many people clicked on the notification as a percentage of the number of people to whom that notification was delivered.

However, just focusing on this one metric can lead your analysis astray. Instead, you should strongly focus on the business goals you deem most important, which in this case would be sales (primary goal) and visits to checkout page, add to cart (secondary goals). Tag your notification links with the proper UTM parameters and then sift through the data in Google Analytics and other analytics tools you are using to find out how many people arriving on your website via push notifications are actually performing the above actions. This is the only way that you will be able to determine whether website push notifications are working for you or not.

That's it! This covers almost everything you need to know as you start with website push notifications for your online store. Just remember - keep listening to what your audience is trying to say and keep iterating on the basis of that!

About the Author: Anand Kansal works at PushCrew, a tool that enables websites to send push notifications on desktops, mobiles and tablets. He tweets about push notifications and online marketing in general at @PushCrewHQ.

# data[].attributes.attachment_link.title
The Complete Guide to Website Push Notifications for E-commerce

# data[].attributes.attachment_link.description
Website push notifications are clickable messages that are sent by a website to their subscribers' browsers. They work very similarly to mobile app push notifications (notifications sent by a mobile app that land in your notification tray) except that they work on websites instead of apps and can be accessed on all devices (desktop, mobile, tablet, etc).

# data[].attributes.body
I'm starting to see a lot of 3D button effects, and animated websites. Web developers do these things to keep people invested and interested. People get bored very easily and know what bores them. If you're boring you won't get visits or interactions.

https://designmodo.com/web-design-trends-2018/

~Christian John

# data[].attributes.headline
Eight Web Development Trends Coming In 2018

# data[].attributes.subject
Eight Web Development Trends Coming In 2018

# data[].attributes.body
https://www.forbes.com/sites/forbesagencycouncil/2017/11/16/eight-web-development-trends-coming-in-2018/#2b10d10355d8

Progressive Web Apps

Progressive web apps are web-based apps that appear like a native phone app. This is important due to 89% of the time websites are accessed on mobile devices. With technology improvements web-based apps are able to offline caching the data to the device after downloading the content to the device. The apps allow push notifications to the user creating more traffic and the cost is lower than building a native app.

Single-Page Websites

Single-page websites are gaining popularity due to the ease of use of the user interface and low cost of producing. When a user is looking for content they want to find it quickly and easily. A single-page allows the user to scroll through the information without needing to use a navigation bar. These are gaining popularity due to users accessing content on mobile devices.

Push Notifications on Websites

Companies are looking to cut cost and grow traffic with their websites. Companies are using push notifications similar to mobile apps. The reason for this is to not build an application and a website. This drastically cuts the cost for the company and increases traffic on the website. If the Website is mobile optimized if will function as a native app creating push notifications to the users. These are popular with news, sports, and blogging websites.

-Andrew Schnaare

# data[].attributes.body
~Heidi Olson

I've seen a lot of sites using chatbots - I am not sure how I feel about this yet. I am seeing more minimalism which I really like. Three trends that I think are important are:

1. The use of chatbots
2. Animation / Storytelling
3. Bold Typography

This article covers these three trends as well as 6 other.

# data[].attributes.attachment_link.readable_text
Web design trends rise and fall as a reaction to technological and cultural changes. Trends are subject to change at the same super-fast pace like anything else on the web.

Introduction

In this post I'll dive deep and explore some of the most popular web design trends I've analyzed and believe that we'll see more during 2018. Go grab your favorite drink and get ready for an inspirational and trendy rollercoaster! 🍹

Table of Contents

Storytelling through illustrations and animation

The use of illustration joined the mainstream and took center stage during the past few years. Companies like Stripe and Slack have set the tone by using them to tell stories and define their brand.

You can use illustrations for any purpose. The most popular use case is to create meaning through story and to help your audience to visualize certain aspects of your product or service.

Using illustration in web design is a great way to create meaning through story and to help your audience to visualize certain aspects of your product or service. Click To Tweet

This year alone I've noticed designers use illustrations more than ever. Let's take a look at inturn.co for example.

They used animated illustrations to highlight the pains of managing excess assets. The animations are kept to a minimum and in short easy to digest loops. This way, the audience can see the problem their product is solving in a visual engaging manner.

Ethical design and movements against dark UI patterns

It's scary to see how some large companies are making the most out of user collected data to take advantage of the human behavior and trick people.

This is a subject that has been highly debated and it's bringing more, and more awareness in both the community of designers and the general public.

With the upcoming effectuation of the GDPR, we'll see an increasing awareness about how data is collected, processed and safeguarded by companies all over the world (not only those located in the EU).

The latest legislative changes will renounce some of the past high management decisions and allow designers to focus on providing more human-centric experiences.

Design systems

Design systems are not part of the "web design trends" group per se, but they are definitely worth mentioning.

During the past few years, many well known companies have joined the trend of publicizing their internal design systems. By doing so, they not only increase the brand awareness, but also emphasise its consistency.

This is great! Compared to the boring "mission statements", you get to see inside a company's values and how they want to be perceived. A lot of lessons in there if you ask me.

Design systems are great because they are essential in solving problems at scale and provide integral standards and sets of principles. Respecting both not only leads to easier communication within the organisation, but also to an improved consistency across products.

Using a design system leads to easier communication and improved consistency across products. Click To Tweet

Creative use of AI and interactive chatbots

As technology evolves, it's becoming easier to integrate AI powered chatbots for your services using open APIs. Chatbots are not only fun and interactive, but you can program them to self adjust and provide a personalized user experience.

The most popular chatbot use cases at the time are for marketing and advertising, customer support and for creating seamless product onboarding processes.

Chatbots are snappy, always available and you can use them in lots of creative ways. Interacting with a chatbot not only improves user engagement, but also attention span.

Even more gradients

Gradients made their initial debut in the Web 2.0 era when glossy buttons were considered stylish. Now they're coming back more vivid than ever and also in better shape. No pun intended! Designers use gradients everywhere, from basic and organic shapes, to backgrounds and even drop shadows.

Gradients resurfaced a few years ago, but Apple confirmed the trend with the new iPhone X launch. This is the year when we expect to see gradients pushed to the next level and used in even more creative ways.

Whether you like it or not, the web is a colorful place driven by mysterious unicorns. Designers will continue to abuse gradients and combine colors in visually appealing ways as long as there are enough colors in the spectrum.

Storytelling through data visualization

Data visualization is a great tool to create visually engaging stories that captivate your audience. I love data - a lot - and I am definitely biased on this one as it's something I'd love to see more of.

So far, designers used data visualisation for infographics or other static mediums. Yet, the latest progress in web technologies and more accessible libraries is changing that. Web designers are now finding it easier than ever to approach and use data visualisation as an effective tool to tell stories.

Pro tip: Combine data visualization with intuitive user interactions and you'll have the perfect recipe for an amazing online experience that looks good and it's also educative.

Interactive user interfaces

Animated illustrations can take you so far. Using interactions that make use of the current UI state puts you on the next level of creativity. Darin Senneff pulled this off with the interactive Yeti login animation that reacts to the user input.

Interactive animations are a fun and great way to add a unique touch to your user interface. Not long after that we've seen NPM following suit and creating something similar

Implementing UI micro-interactions can also make or break the way your website or application is perceived. Experimenting with creative and non-disruptive interactions that add up to a rich user experience can provide value. Although, adding too much or using transitions in a way that disrupts or makes the UI feel sluggish will affect usability.

Even more (colorful) shadows

Drop shadows help designers simulate depth in an otherwise flat 2D space. They also help with imitating the real world and its natural patterns to create the illusion of distance between elements.

Shadows not only can make UI elements pop, but they also suggest how certain surfaces are positioned in space by providing a sense of perspective.

A new popular trend I've noticed recently is the use of colorful, vivid or even gradient based shadows that match the color of the element that is emitting it.

Organic, oblique or geometric shapes and patterns

Organic curves and rounded shapes are very popular among current web design trends. You can use rounded, oblique or geometric shapes to grab the user's attention and direct it to the most important areas of your website.

Simple, curved objects combined with gradients and shadows can create elegant layout compositions that integrate each section and provide a sense of continuity. Similar shapes can also work very well if you combine them with matching stock photography, video or illustrations.
What makes the use of organic shapes successful in web design is their root in nature and their flexibility in using them to provide a natural visual flow.
Bold typography

Typography is the core foundation of web design and also a timeless trend that won't become unpopular anytime soon. Great designers focus a large part of their time on typography alone to optimize the design for legibility and to improve usability.

A popular direction I've noticed designers taking lately is the use of superimposed typefaces on stock photography and broken layouts. This method is not only great to create contrast and a unique visual balance, but also to ensure that your message is well received.

Using interactive typography focused on storytelling can also create a remarkable and captivating experience. A great example worth highlighting is the K'gari website. It's not only making use of gorgeous custom typefaces, but also allowing the user to move the story forward through interaction.

Minimalism

Minimalism is one of the most popular and timeless design philosophy. It became popular in print and among popular graphic design artists after the second World War and today we still see it as the "go-to" technique.

Minimalism works because it forces designers to distill their product interfaces to the most essential core features. This forces us to put emphasis on content instead of visual appearance. To be effective, minimalism in web design needs to have a strong foundation defined by a grid and also exceptional use of typography and contrast.

Minimal stock photography

The days of cheesy corporate stock photos are long gone, at least in most areas of the modern web. With Unsplash becoming the instant go-to resource for beautiful stock photography, designers have access to an excess of gorgeous images to choose from for their projects.

Having access to great imagery is not nearly enough. It's important to adapt and combine the stock photos and the content in such a way that the message you are trying to communicate resonates with your audience. A popular trend is to use minimal stock photography with solid background colors that emphasize the product or some of its certain key features.

Using well integrated stock photos is also a great way to simulate a natural environment where every component would seem to belong.

Broken grids and layouts

Grid systems are making the foundation for providing a rhythmic structure in any layout. However, sometimes breaking the grid by overlapping elements and displaying them in such a way that doesn't follow the guidelines can end up in pleasant results that are still harmonic.

Breaking the grid has become a popular way of emphasizing UI elements and directing the audience's attention to the call to action. The variance of how much is usually too much may change depending on the layout composition at hand, but usually composing designs based on two juxtaposed overlapped grids is the most common practice among designers.

Variable and expanding fonts

OpenType variable fonts are a relatively new font format that allows packing of multiple fonts in the same file. This presents multiple advantages, the most important being the huge performance gains.

More and more platforms are starting to provide support and I believe this year variable fonts will gain more traction and popularity among designers. The most popular use case of variable fonts is probably the Dropbox rebranding that made its debut presenting Sharp Grotesk, their custom typeface.

Conclusion

This list is far from comprehensive and only some leading web design trends have made it. There are many other trends that I could have added, but I tried to limit myself to only those that I believe will continue to persist during 2018 and the next years.
What are your favorite design trends that you think will make it big in 2018? Did I miss anything? Let me know in the comments section below!
Catalin Vasile

Catalin is a design focused engineer and founder of DesignRevision. When he's not working on a project, he likes to read, watch movies and take long hikes.

Follow @_hiskie

# data[].attributes.attachment_link.title
14 modern web design trends for 2018 - DesignRevision

# data[].attributes.attachment_link.description
Web design trends rise and fall as a reaction to technological and cultural changes. Trends are subject to change at the same super-fast pace like anything else on the web. In this post I'll dive deep and explore some of the most popular web design trends I've analyzed and believe that we'll see more during 2018.

# data[].attributes.body
I’ve seen quite a surge of simplistic, but bold designs recently. I really love what’s happening in the design area, as I see more minimalism and such. I also see expanding or contracting elements on the pages, like an ad or menu.

1.    Big Header Images

2.    Moving Images

3.    Hamburger Navigation

Article:
http://sixtysecondcritic.com/2018/08/01/the-8-elements-of-modern-web-design-and-web-design-trends-to-watch/

-Cheyenne Wiseman

# data[].attributes.body
-Ben Knier

I've seen a variety of trends come to light in the short time I've been a developer. Whether the trends emerged recently or I just recently became cognizant of them, I don't know. At any rate, they're emerging trends from my perspective. Three of the ones that I think are important are:

1. More organic / oblique shapes.
2. Pervasive interactions/animations
3. Page transitions

Here's an article that goes into detail on all 3: https://webflow.com/blog/19-web-design-trends-for-2018