Web Design Trends and Inspiration for 2017

Web Design Trends and Inspiration for 2017

The web is becoming increasingly beautiful and interactive. From videos to illustrations and vectors, media is more rich and engaging than it was only a couple years ago. How we engage with websites has improved immensely, from touch controls to autofill and more. What’s more is that we are seeing better and better design and interactivity almost daily. As a web developer and designer, I can say that this is both exciting and intimidating, because I see trends that excite and amaze me, and in turn that can make me feel behind the curve. At the same time, we motivated developers/designers take what we see and learn about it, trying to fine tune not only our existing skills but also build on them and create something better, every single job.

Exciting Web Experience for 2017 and Beyond

Web experience continues to evolve at a rapid pace. Development and design are becoming great partners (rather than separate entities) due to advanced programming, internet speed, mobile access, advanced typography, video, and more. A number of articles have already been written about what we can continue to anticipate in web design—Adobe, The Next Web, and Creative Market have published their own lists—so let’s take a brief look at what’s trending.

Video Is Continuing to Succeed

Step Inside Japan website screenshot
Step Inside Japan’s website makes good use of background video and stunning visuals.

A lot of websites use video to tell a story. Whether it’s a design agency providing a glimpse at their process, or a movie website using background video to display dramatic scenes, video is a powerful tool in marketing your brand in a beautiful way. While a slider with static images can highlight a business’s products, a video can provide users with an intimate look at the business itself, as well as its people. Having the right video can help sell your product before your visitors even fill out a form or view your store.

Content Is King, and “Complements” are Less Necessary

It’s been common practice for quite some time that websites contained headers with navigation, sidebars with additional navigation and complementary content, and footers with even more navigation and useful information. This practice is still completely okay and, in many cases, a great way to sell your product. Yet what still remains most important is content. Sometimes it’s best to strip away all (or most) distractions and clutter and focus on what you are selling and why your visitors are on a page. The folks at No Sidebar took this very concept and applied it to not only their website, but also to a healthier lifestyle.

Papazian website screenshot
The Papazian site is elegantly displayed, as if inspired by print, with minimal clutter.

One way I have been trying to think about how to apply this to my designs more is to keep mobile first design in mind. Phones simply cannot and should not display content with sidebars next to them. Because mobile first design requires one to think small and work up to large screens, the most important elements in the design are often considered first, rather than going by a standard template or wireframe. Granted, with the available technology, we are becoming more flexible in how content translates between devices and window sizes, but minimalist design on the web is continuing to produce better and better sites.

Signature International website screenshot
The Signature International website pages flow like print, but without the need to turn the page.

If your website is still not responsive and you rely on it to drive traffic to your business, you are missing out. Google has made efforts to favor mobile friendly websites. If you want a fresh, mobile friendly site to cater to today’s market, contact us today to get started.

Web Typography Is Gorgeous

KIKK Festival website screenshot
Type on the KIKK Festival website is presented as part of the design, not just the content.

For a long time, web designers often felt limited to using a handful of fonts in their designs. This is because we had to focus on what fonts we knew existed on most systems. That time is long gone, and free web fonts, as well as licensed commercial fonts, have become available for use, opening the door to limitless opportunities. Sites can now look as stunning as print, but with the added bonus of being interactive and responsive. With advances in CSS, designers can feel free to use type as part of their design rather than apart from it. Type provides a personality and sparks an emotional response, and that helps visitors take action. Check below for great examples of type used in design.

Animation Moves In

SVG and CSS3 are just two examples of how animation continues to become more popular on the web. An animation can often provide a quick and meaningful explanation for a product in the way that video or text cannot, and it often doesn’t require the amount of load time that an image might require. Illustration along with animation can provide easily understood visuals that also speak to the brand, so having your product marketed in this way can be highly effective.

Panic website screenshot
Panic’s logo bounces in upon load, evoking a playful and creative message.

True Photos of Your Brand Matter

Have you visited a website and swear that the family in the photo is one you’ve seen before? Does that woman you saw on a university’s website also happen to be the same woman who practices safe bike riding techniques? Stock photography is something we’ve all seen our fair share of. When it comes to design and SEO, stock photography is often dull. A web designer/developer is supposed to provide text along with a photo in order for search engines to understand it, but what do we say about a photo of a woman smiling, holding books, and standing in front of a university building?

Gentlemen Barber Clubs website screenshot
Photography is crucial to the brand presented on the Gentlemen Barber Clubs website.

Photos of your brand and products matter a great deal. They, just like video of your brand, tell of your signature quality. More and more businesses are launching their websites with tailored photography, and we recommend you do the same. We’ll ask you about photographing your business, team, and products before starting the job. Contact us to schedule a photo shoot.

A Great Design Matters

There are so many more parts to a great website design. The small list described above is a fraction of what you can expect to see in the coming years. Columbia Marketing Group also will see a redesign by spring 2017, so check back often to see what’s in store!

Websites that Inspire Me

Now for a fun way to burn through some of your day. I’ve bookmarked a number of sites over the years, and it’s pretty amazing to see in that short time just how much better the web has gotten. Some of these websites are best experienced on the desktop, while others do an impressive job of translating to mobile.

Rally Interactive Studio

Rally Interactive Beta website screenshot

Because Recollection

Because Recollection website screenshot

Step Inside Japan

Step Inside Japan website screenshot

Spotlight Film

Spotlight Film website screenshot

Signature International

Signature International website screenshot

Microsoft Story Labs

Microsoft Story Labs website screenshot


Papazian website screenshot

Sweet Magnolia Gelato

Sweet Magnolia Gelato website screenshot

Panic Animation Studio

Panic website screenshot

Grain & Mortar

Grain & Mortar website screenshot


DigiTech Web Design Austin website screenshot

Green Chameleon

Green Chameleon Design Agency website screenshot

Gentlemen Barber Clubs

Gentlemen Barber Clubs website screenshot

Kontra K — An Deiner Seite Video Site

Kontra K - An Deiner Seite -

Snowbird (by Rally Interactive)

Snowbird website screenshot

Beat Box Academy

Beatbox Academy website screenshot

Torchy’s Tacos

Torchy's Tacos website screenshot
I might be a little biased with Torchy’s because I absolutely love their food.