Web Design Trends 2017

Published by Spinutech on September 12, 2017

"I'm an inventor. I became interested in long-term trends because an invention has to make sense in the world in which it is finished, not the world in which it is started."

- Ray Kurzweil

As designers, following trends is something we all accept and respect as a mandatory part of our profession. It allows us to stay on top of what’s hot and what’s not. More importantly, it ensures that we’re keeping our clients’ websites looking fresh and performing well. Sometimes trends are visual while others are more technical, or under the surface. Whatever the trends, we do our best to know them and deploy them when appropriate.

The following represent just a small set of trends we’re keeping our eyes on and using regularly. These, in particular, are quite fluid and may look starkly different tomorrow than they do today. As a client or potential client of Spinutech, it’s worth your time to also maintain some level of understanding and appreciation for these as they directly influence your brand and effectiveness in the online marketplace.

Site Speed

Making websites “faster” will continue to be a trend and influence web design. Fast websites increase conversions, make for a better user experience and allow crawlers to index your pages easier and more frequently. Decisions we make in the design phase can greatly impact site speed.

Rotating banners, for example, are a good example of a design element that can have potentially negative effects on site speed. As a web designer or web manager, it’s important to ask yourself if a rotating banner is absolutely necessary. If it is, then you should also be familiar with the potential repercussions.

A rotating banner:

• will likely load at least three images instead of just one, which increases load time
• will likely require jQuery or Javascript, also increasing load time
• will likely create usability and accessibility concerns

With these considerations, you may decide a banner isn’t the best design decision when putting user experience first. This is just one example of how site speed can help direct a web design.

Website Accessibility

When we talk about “trends,” it’s tough not to include web accessibility in the conversation. To be clear, when we refer to web accessibility as a trend we are NOT implying it is here today and will be gone tomorrow. It is, in fact, here today, here to stay, and continues to evolve as a critical element of good web design.

Web accessibility, in a nutshell, means that a person with a disability (vision, physical, hearing, cognitive, or other) can navigate, understand, and interact with the web. Additionally, the term can include older people, people with low literacy or poor language fluency, people with poor internet connections or older devices, mobile phone users, and more.

There is much to know and learn about web accessibility. At Spinutech, we will continue to research, learn, and adjust our design practices as we strive to make the web a better place for all.

Web Accessibility Resources:

• Spinutech’s Beginner's Guide to Website Compliance
• W3C Web Accessibility Initiative
• Web Content Accessibility Guidelines 2.0

HTML/CSS Techniques

New HTML/CSS techniques are trending because they offer more design flexibility. One of these tools is Flexbox, which is short for the CSS Flexible Box Layout Module. Flexbox allows a content container to alter an item's width, height, and order it appears on a page while also solving some of the old frustrations when using the float property or vertically aligning items.

Another new tool is the CSS Grid which was introduced in March. CSS Grid is used to build full-page grid layouts that are flexible enough to easily arrange the order of content through the use of different CSS breakpoints.

Both of these solutions are being adopted across our industry thanks to the growth of responsive design and designing for mobile devices. They are time-saving tools because they allow the flexibility to change the position of content through media queries without making changes to the HTML. As browsers quickly become more compatible with these new tools, they become more appealing to designers and developers.

Photography & Videography

When you think of website “trends,” do you envision photography being on that list? Photos surround us everywhere we look. They're on television, the internet, books, billboards, magazines, etc. They can grab your attention and photo quality can either make or break the design and feel of a site. With video leading the digital marketing environment, it's important that you also pay attention to your video work. Sometimes even more than photos, videos can express your company tone and culture.

This is why photography and videography should not be an afterthought. It should be what drives your design to work as a whole for your business.

Here are some helpful tips we recommend for making your website’s content successful:

• Take the leap and invest in professional photography
• Ask your web designer for a specific direction or vision
• Use stock photography sparingly
• Use images that “fit” for your business
• Sometimes less is more

We recently launched Kuder and their website’s photography/videography portrayed their brand’s image successfully. It was important to them, and to us, to focus on how to visually present their identity. The photographer selected showcase images that displayed a positive glimpse into Kuder's culture and who they are. It was just the piece to the puzzle they needed to complete their new website for many years to come.

Typography

Well written content needs to be backed up with well designed typography. Here are a few things to consider when designing for the web.

Hierarchy

Make it easy for your viewer to read your content. Implementing a visual hierarchy in your content allows the reader to easily navigate different sections of content. One of the easiest ways to create hierarchy is with font size and weight.

Number of Fonts

Use no more than 2-3 different fonts in your design. Using more than 2-3 fonts can make your page look busy and unprofessional. With font embedding services like Google Web Fonts and Typekit, there are more font choices now than ever before to choose from. However, keep in mind that when you use more fonts, the potential for initial load time increases.

Pixels vs. EMs vs. REMs

With the introduction of Media Queries and Responsive Design comes the task of making sure your content looks good on any device.

Pixels (which have a fixed size and do NOT scale,) were the norm before the introduction of Responsive Design. Now that your website can be viewed on different devices, the need for scaling your content is of utmost importance. This is where EM and REM come into the picture.

EM and REM allow for the scaling of font size, padding, and margin across media queries to ensure your content looks good on any device. The difference between EM and REM is that an EM scales relative to the parent font size and a REM scales relative to the root font size.