Web Design Trends for 2017 – Improved Popup Options

Web Design Trends for 2017 – Improved Popup Options

Popups were once a very popular method for displaying ads. They became so annoying that users started using popup blockers (or throwing their monitors out the window in frustration… not that I ever did, but I was tempted a few times. Even the programmer who developed the code to use ads within popups apologized for creating the code). The popups then became pop-under’s until they started getting blocked too. Even today’s web browsers still have popup blockers built in and turned on by default. There are still a few out there but popup ads are no where near as bad as they used to be.

Image source: https://cdn.theatlantic.com/static/mt/assets/science/Pop-UpAdsWiki-Post.jpg

The Move From Ads to Newsletters

What’s popular today is the use of popups for newsletter subscription notices. In my opinion these are no less annoying than popup ads of yesteryear. Most sites that use them only have one popup per page instead of a half dozen or more, so there’s that. Fortunately there are alternatives.

The most popular type of popup today is the newsletter signup form. It usually includes a message with a free gift that either pops up on load, after a few seconds, after you scroll, or as your mouse goes to the address bar. There’s no denying that it works. However, if it’s overdone it can be extremely annoying – especially if the reader has already subscribed.

Many sites have figured out better methods to get readers to subscribe than annoy them with constant popups. Some provide offers within their content, some use cookies to hide them, others have moved them to the corner, and others have removed them completely. Here are a few of the newsletter popup alternatives that are trending for 2017.

Call to Action Within Content

One example is the approach that Elegant Themes has taken as seen here in the free download called Coffee House by Olga Summerhayes. Rather than have popups about their newsletter, they create free downloads within their content. To get the download you simply click the download button and enter your email address. You’re then signed up to their email list and the download button appears immediately on screen.

Cookies

Another option is to use cookies to determine if the user has opted in or chosen not the see the popup. This example is a plugin for Divi from SA Web Solution called Divi Multi Modal uses this type of cookie. The cookie is good for 30 days. Users can hide the popup by clicking the message in the corner.

Corner Popups

Some websites have moved the popup to the corner where readers can still see the screen. They started out as large modal windows that took up a decent chunk of the corner but they’re starting to become smaller. You can see in the example from wpmudev that this call to action (CTA) doesn’t get in the way of the content. Animation can call attention to the CTA without it becoming obnoxious. Also, they can deny it all they want too but that green guy is ROM.

Message Bars

One of the most popular methods is to use a message bar that remains at the top or bottom of the screen until the user clicks to close it. As you can see in this example from WP Theme Roundups, this message bar is small enough not to get in the way yet stands out enough to alert readers to your newsletter. They can be styled to match your branding or you can make them stand out to keep them from becoming invisible.

Let’s Discuss

1. Do you use popup ads?

2. Do you use popups for your newsletters or do you use another method?

3. What is your favorite method for newsletters?

Let us know in the comments. Thanks for reading and please subscribe if you haven’t already.

Featured Image by Simson Petrol

Web Design Trends for 2017 – Material Design

Web Design Trends for 2017 – Material Design

Material Design is Google’s web design principles that are basically a digital version of classic principles of good design. It uses visual cues for surfaces that are clickable and bold typography and vibrant color. It uses shadow and edges to show what can be clicked. Google has created lots of guidelines, resources, and tools, and since Google is behind it you can bet it will continue to grow in popularity.

Where flat design once ruled I see material design taking over. Flat design will continue to be used and even evolve to be more useful. However, it’s still limited. For example, flat design doesn’t have shading which can make it difficult to tell what is clickable (note – there are ways to achieve shading in flat design but that’s not typical). Shading looks better in many situations and Material Design is better suited for shading. Google explains all the details in their guidelines.

Material Design Blog

One of the best examples of putting Material Design to use is Google’s Material Design Blog.  They have a similar layout to mine. I designed mine first, they just started their blog before I did. Yeah, I’m going with that.

Material Design Themes

Websites will focus on Google’s Material Design principles while developing their styles and designs in order to stand apart from the crowd. There are lots of themes built around Material Design to help you get started. There’s a nice list at Theme Forest. Here are a few examples…

WordPress Material Design

BeMaterial is a premium theme from BeThemes fully incorporates Material Design and a lot of design trends that I’m starting to see implemented on other websites. It’s built with the idea of online community engagement. It includes a modular drag-and-drop front page module builder, one-page parallax, AJAX portfolio, and unlimited typography and colors. Other features include image and video backgrounds, slider, more than 25 page transition effects, over 30 CSS animations, Magnific image gallery, and more.

Zephyr

Zephyr is a premium theme from UpSolution that won Evanto’s Material Design Most Wanted competition. It includes a header builder which lets you place any custom element within the header. It includes multiple sliders, portfolios, blogs, elements, advanced typography, pages, 1273 icons, and unlimited colors. Design your layout using the built-in drag-and-drop page builder or use one of the pre-made layouts.

Let’s Discuss

1. Do you follow Material Design Principles?

2. What are your favorite Material Design tools?

3. What are your favorite Material Design Themes?

Let us know in the comments. Thanks for reading and please subscribe if you haven’t already.

Featured Image from Google’s Material Guidelines

Web Design Trends for 2017 – Bold Color Choices

Web Design Trends for 2017 – Bold Color Choices

Color can have an influence on the reader. Readers expect certain colors for certain genres. Expect an increase in awareness of color choices. As designers explore and become more creative with color choices, I would also expect to see some creative ways that designers are successfully breaking the rules or blending genres.

Purposefully Chosen Colors

In the past website owners have chosen colors they enjoy rather than colors to affect their readership. For 2017 websites will focus more than ever on color choices specific to their audience and purpose. Color sets the mood, tone, thoughts, and even affects conversion. Colors should be chosen carefully.

Color Psychology

There’s a lot of science behind color theory and psychology. Here’s a short list of how color affects readers and how to know which colors you need based on your niche:

  • Black – sophistication, power, edginess, timeliness, seriousness – great choice for backgrounds.
  • White – cleanliness, purity, virtue, simplicity, seriousness – great choice for backgrounds and for minimal and simple sites.
  • Ivory – comfort, simplicity, elegance, softens colors, complementary – excellent for highlights, secondary, and background colors.
  • Gray – formal, neutral, sad, professional, traditional, seriousness, calmness – great choice for backgrounds.
  • Beige – humility, promotes the traits of surrounding colors – excellent for highlights, secondary, and background colors.
  • Red – importance, power, danger, youthful (bright colors), comforting (warm colors).
  • Pink – youthful, feminine, innocent.
  • Orange – friendliness, energy, movement, uniqueness.
  • Yellow – happiness, enthusiasm, youthful (bright shades – great for children), comfort (using middle shades), antiquity (using dark shades – great for showing authority), versatile.
  • Green – growth, stability (using dark shades – great for environmental and financial themes), relaxing, honesty (using lighter shades).
  • Blue – calm, safe, friendly, open (with lighter shades), reliable (with darker shades).
  • Purple – luxury, mystery (using darker shades), romance (using lighter shades).

Pantone Color of the Year

Pantone provides color palettes that work in many industries including graphic design with each year focusing on a single color. For 2017 Pantone has determined that the color of the year is green. More specifically, Greenery 15-0343. Pantone provides color-paring charts to create 10 palettes of neutral, bright, pastel, metallic, deeper shades, etc. Expect to see Greenery 15-0343 and its surrounding palettes used a lot in 2017 as the various shades are well-suited to many genres.

Material Design’s Color Palettes

Google’s Material Design is becoming more popular among designers and in turn so will its bright color palettes. Google’s Material Design Palette allows you to choose two colors and it provides a palette that works with those colors.

Material UI

Another Google Material Design tool is Material UI. This tool has lots of features to choose color palettes for flat UI, social, Material, metro, HTML, Hex, and lots more. I expect this tool to become even more popular for choosing color palettes.

Let’s Discuss

1. Do your color choices follow the common color trends?

2. What are your favorite color tools?

Let us know in the comments. Thanks for reading and please subscribe if you haven’t already. 

Image by Kyler Nixon