As most of you must know by now (which most of you must know by now if you’re reading a blog post like this), times change, especially when it comes to the digital world. And so much of what drives the digital world is online in the form of a website. So, naturally, as trends shift in the web design industry, we’re oh-so-eager to present our favorite, most relevant must haves to help ensure your online success.

But first, a word from our sponsors…

Not really, cause we don’t have sponsors. We’re our own sponsors.. So… maybe this really is a word from our sponsors.


[LONG AWKWARD SILENCE]


Okay! So! Let’s take a moment before diving into trends to consider the overall user experience as it relates to web design. A couple design factors come into play these days that cater specifically to an improved user experience on your website:

Mobile-First Design

Up-Front Takeaway: Make sure your website design is mobile-friendly!

The standard approach used to be that a website design was optimized for desktop or laptop screens, and the mobile adaptive design was sort of an after-the-fact add-on. With the mobile-first approach to design, the opposite applies: the mobile site is designed first with the desktop/laptop design following after.

The idea when determining which approach is best for your site is to cater to the bulk of your target audience, essentially, to ensure the bulk of your visitors have the best possible experience. Regardless of which approach you take, however, you must have a mobile-friendly design, period. You don’t have to start with your mobile friendly design, but you must have one! Why? Well, aside from the fact that Google has shifted into the long-promoted-and-awaited mobile-first indexing method for providing search results, the percentage of mobile users is expected to reach above 50% by the year’s end, so it’s no wonder this mentality is taking over.

Now, all that said, where the masses are (on their phones as opposed to a desktop or laptop computer) depends entirely on what you do and who you do it for. For example, at MayeCreate, we provide services to other businesses who do much of their online research at their office desks, so our website is designed with those users in mind. That’s not to say we don’t have a rockin’ mobile site, but it wasn’t our above-all-else focus during our recent redesign. Now consider Gumby’s Pizza’s website visitors: studying, chillin’ with friends, partying…or hungover… all kinds of college students using a mobile device to place online orders, which means it’s crucial that their website works well and looks good on a smartphone.

Accessibility

Y’all, we gotta. By Google standards as well as just general kindness towards humanity, we’ve gotta focus on accessibility in our web designs.

We want to make sure that if people have vision issues they can see the same amount of contrast non-vision-issue-having people see, we want to make sure they can still read the words, we want to make sure if they can’t see at all, their screen reader can actually interact with their website in a functional way.

Everyone deserves the same experience, and the new movement towards making sure all websites are accessible is key in making sure that happens. We have many different opportunities to move forward with this and many different ways we can test it, but for now, we’re still trying to determine the best way to go about that. For now, we’ll follow the guidelines that are given to us and we will put our sites through as many different tests as we can to make sure people with disabilities have the opportunity to use it.

Okay, now onto the juicy stuff…

Upcoming Web Design Trends and Must Haves in 2019

Micro-Interactions

Sometimes it’s little things that keep people coming back for more, am I right? Same goes for the online experience. Think about the little heart that shows up when you double-tap an Instagram post you like, or the progress bar (AKA the “Pizza Tracker”) that shows up when you’re waiting for your Domino’s to arrive. (Hint hint, Gumby’s…)

These types of things may seem too cutesy or fancy, but at the end of the day, people love that validating feeling of, “Ooooh! I acted and saw immediate positive results!” So why not give it to them if you can? It could be anything from how things interact with your mouse (like the subtle hover effect in your navigation as done on the Ocean School website) to a progress bar for your multi-step forms. Just, ya know, as with anything…don’t go overboard…it might throw your visitors into epileptic fits.

Examples of Micro-Interactions in Web Design:

Illustrations

As Simon says (not the game), “My name is Simon, and I like to do draw-rings.” Well, some web developers (whether or not they’re named Simon, I don’t know…) like to do them in their web designs, too. Now, this isn’t a new trend, per se, just one that’s coming back around this year as a way to add playful personality and vibrance to a website design.

While illustrations are seemingly incorporated mainly into designs for the more creative, artsier websites, it’s amazing what illustrations can bring to the design for a more technical company or cause. A few of our sites use illustrations in the form of blueprints or equipment specs in lieu of real-life or stock imagery as a way to introduce the artistic element of what they do.

Ultimately, illustrations are just another way to communicate, right? And the message tends to be geared toward those who like the aesthetics of things or are more visual with their intake of information.

Examples of Illustrations in Web Design:

Typography: Big Typography in Lieu of True Images

This trend speaks directly to who the star of the show is on your website. As Stacy and Clinton from What Not to Wear used to say: You’ve got to pick one “main actor” in your overall look. Everything else should act as your “supporting actors.” In this case, it’s the text.

This concept works really well for minimalist website designs (which is, coincidentally, included as a trend we cover in this article…) and takes even more of an enhanced effect when paired with microinteractions. For instance, Cuvee Chocolate’s website provides some fun visuals when you hover over the images to click through the site, but the accompanying words still stand alone as a strong element all its own. The Easys website design pairs big typography with imagery and fun color overlays to help support the text. Ultimately, it’s function and beauty in one, almost like an art piece that’s meant to sell something.

Typography: Sans-Serif Fonts & Hand-Drawn Fonts

A font says a lot about a company’s image. This isn’t news to you, I’m sure. And as most trends do, font preferences flow in and out of favor as often as the latest fashions. In 2019, designers are bringin’ back the sans serifs and hand-drawn fonts. And, of course, that’s not to say serif fonts are on their way out by any means, they do have a place in the world of web design and work really well in many cases. Generally, though, there are so many options for sans serif and hand-drawn fonts now that it’s no wonder they dominate.

With the recent wave of affection for calligraphy we’ve seen in the design world, it doesn’t really come as a surprise to us that hand-drawn fonts are becoming favorable again. Similar to illustrations, using hand-drawn fonts is another great way to add personality and art to an overall web design.

You could almost think of designing your web page as a magazine layout with a trend like this, which is what makes it a more out-of-the-box approach to web design in that you use words as elements of design rather than just a language for communication.

Examples of Sans Serif, Hand-Drawn & Big Typography in Web Design:

Minimalism

Sometimes less is more, as they say, as is the case with minimalism in any medium. And for minimalistic imagery-heavy brands with solid messaging that stands on its own, this is a perfect approach to web design.

Let’s do a little activity, here. Imagine a white room with black-framed paintings of black and white photography or monochromatic color, sleek designer furniture, and one colored object in the whole room. The feeling you would get from that room is about what you want to get from a minimalistically designed website. The “stand-out” objects are at the forefront and small, subtle details help lead people through this site. To keep things interesting, you can use other pieces of your branding assets as pagebreak elements or dividers. You can even add a tiny bit of color to the beginning of the first letter of a paragraph. Often times, designers will feature one big “wow” factor, like the moving M on the MashVP site, or the subtle, inviting background on the Velvet Hammer site. This incorporation of small design elements in a very clean design is a great way to avoid overwhelming your visitors.

Examples of Minimalism in Web Design:

Card Layouts

Think Pinterest… Simple, sweet, and good for product marketing and posts. Sometimes you have to lay things out for your viewers to allow for the quickest and most efficient absorption of information. Products and images, when there are a lot of them jammed together on a page design, can become a bit too much to digest. So let an image and title do the talking for you.

That means you need good pictures, so plan accordingly.

You can even use this design element a little more granularly by applying it to your website call-outs because it’s essentially just information and imagery put into boxes, right? A card layout is certainly an effective way to get visitors to go through more of your website content because they just have to jump from piece to piece to access the info they want.

The caveat to this is you have to make sure either your message or your image are concise or clear enough to entice someone to click or interact with that particular “card,” or block. When you’re on Pinterest, you’re not going to click on the useless recipe pair with the image of the super sad and unappealing taco. But you will click on the image that has a really pretty taco (regardless of the fact that you know you’ll never be able to make even though the recipe looks really simple. It just will never look like that taco… but you are going to try, by golly, you’re going to try!).

Examples of Card Layouts in Web Design:

Parallax Scrolling

Para-what scrolling? Right… so, parallax scrolling can be thought of as objects, text, or images that scroll or move in direct correlation with the visitor’s mouse scrolling. Like some of the other trends, this is another “wow-factor” element, something that adds interest and personality to an otherwise bland standardization of web design. It could be a really cool feature for long-scrolling websites that could do with a bit of pizzazz. Most notably, this feature is used in a lot of video game websites like the Firewatch website below.

Here’s a more common example: you might see this implemented on a web page with a section that has a full image background, and when you scroll through the section’s content, the background image scrolls more slowly than the rest of the page elements. Nothing functional about it, just some eye candy with a bit more funk rubbed on it…

Examples of Parallax Scrolling in Web Design:

Large “Hero” Images

This is one our clients continue to favor in their designs: the use of full-scale imagery as page headers. And you’re not limited to just one image — you can easily find this trend also uses multiple full-scale images within a slideshow as well. This trend works well with any image, from something extremely simple to one that’s complex and vibrant to a grayscale image. But it’s always going to be the entrance image at the top of the web page, the “hero” of the page, if you will.

A lot of the sites I saw in my research don’t always go full page with it — they have some sort of content below the image and above the fold to make sure visitors know there’s more to see and do on the page. There are many sites though that do use a full page “hero image” paired with a simple navigation. And some just skip the navigation and use a hamburger menu… but avoid doing that…. because it’s hideous and not very intuitive.

This is something we used on Elicc Group’s website and think it turned out to be quite breathtaking…

Examples of Large “Hero” Images in Web Design:

Gradients

Aesthetics is something that’s always been really important within the Millennial culture, from what I’ve seen, and it’s possible Gen Z has adopted the same mentality, so having an appealing color palette in gradient-form can really help keep your design fresh for the next generation of consumers.

This trend is ideal for simpler sites and pairs well with an overall minimalist design. Coachella and uses gradients in their website design. When used correctly, you can relay certain messages depending on the colors you use and the intensities with which you use them. For instance, Smyodd uses a warm color palette, which puts off an energetic, powerful vibe, while Bluelit’s blue color scheme evokes more of a cool, calm and collected feeling. Both use saturated colors, and that works well on the more minimalist designs. You could also get away with a more washed-out look on busier sites as a way to add a bit of interest to the overall look of the site.

And as with anything, you don’t want to overuse gradients within your design because it will quickly become overwhelming and, to be frank, pretty hideous. Treat it like you would an outfit: you want one big statement piece with everything else supporting that statement piece rather than competing with it.

Examples of Gradients in Web Design:

Integrated Video

While static images load faster, sometimes it takes a bit more than a still shot to get a message across — featuring a video can do this. Basic scenes, drone videos, and aesthetic shots are the most popular for this trend. Moving water, falling glitter, someone embracing another person or enjoying a sport. A skyview of a jobsite… You get the idea. Creative video is yet another way to add personality to a web design and promote interaction with the visitor. We all know what water looks like in a still image, but to see it moving on the website allows for a clearer interpretation the message you’re trying to send.

Say you’re a construction company and you’re using a time-lapse video of a building going up in just a few seconds, your visitor has the opportunity to understand exactly what you do in a way that makes them truly feel something. Integrated video is essentially just another form of communication for the more visually-stimulated.

How many more people would understand what you do if they could actually see it happen from their computer screen? How many more people would buy into your product or service if they could see it manufactured or completed from start to finish in just a few seconds? It can even help with your viral marketing if, at the end, you have something a wide range of people identify with and you share it across all of your online marketing platforms. Oh, the possibilities…

Examples of Integrated Video in Web Design:

Go big, go bold…either way, go on with your bad self.

Some of these trends might seem a bit old school while others really push the envelope of web design and user interactions. Regardless, we encourage you to explore the deep depths of possibility when you start your next web design overhaul. Start by examining your marketing messages and goals to see which of these trends pair well with your brand, and then expand your horizons…your beautiful gold, orange and pink horizons (or blue, purple and navy horizons) that maybe could be turned into a gradient for your new design? Just a thought…

© MayeCreate Design 2019 | 573-447-1836 | [email protected] | 700 Cherry St. Suite C, Columbia, MO 65201