Trend #1: Responsive Design

When a website is responsive, it means that the layout of your webpage will adjust to whatever screen size on which you're viewing it. This flexibility allows for a better user experience to get around a website, whether you are on a smartphone, tablet, or desktop.

Outdure's website is an example of a business utilizing responsive web design. See how the company's content and images appear in different formats.

Why is it cool?

Not only does Google love responsive design, but responsive design makes it easier for both designers and marketers to build and maintain one website.

As you build your website, you don't have to worry about new mobile devices and tablets with different screen sizes being created because your design will adjust no matter what. You also don't need to worry about someone on a desktop seeing an m.site instead of the desktop version.

Responsive design makes everyone's lives easier: Those creating it have one site to worry about, and those viewing it will have a substantially better user experience.

Trend #2: Retina Support

In 2010, Apple announced that the iPhone 4 would have a retina display. Many of us didn't know what the tech giant was talking about, but regardless, designers rejoiced! We soon found out that the retina display meant that images on the screen would be much clearer than we'd ever seen before.

Think about it this way: You can see twice the number of pixels in a retina display than a regular display. That means designers can fit twice the number of pixels as before allowing them to create much more detailed pictures.

A bit of a disclaimer if you don't have a retina device: Unless you're viewing content on a retina device, you aren't going to be able to see the magnitude of the difference between retina images versus non-retina images.

Why is it cool?

With twice as many pixels to work with as before, designers are able to put more detail into their designs. The retina displays ensure that the details of the designs are picked up much better than before. This opens up a ton of doors for website design and the opportunities that can be depicted through design.

Trend #3: Large Photo Backgrounds

Have you ever gone to a website and been blown away by a stunning image that really takes your breath away? More and more businesses are putting large photographs as the backgrounds of their websites to really give the site visitors an idea of what the company is all about.

For instance, Sweet Basil, based in Vail, Colorado, alternates between different photographs of its restaurant.

Why is it cool?

The large photograph as a website's background is a huge benefit for marketing. Visitors coming to the website instantly get a better idea of what your company is all about -- whether that's the culture or the exact purpose of the website.

In the image above, you immediately understand the ambiance and culture of the restaurant and can get a better idea about whether or not you want to go there. After all, you only have a few seconds to prove to your website visitor that they should stay on your page.

Trend #4: Infinite Scrolling

You may recognize this technique when you are looking at Google Images. Infinite scrolling means that as you scroll down the page, the website continues to load.

Not only can you enjoy cute animal pictures on the website Cutest Paw, but the site uses this technique since it has many pictures that need to load at once.

Why is it cool?

Simply put, infinite scrolling makes for a better user experience. To start, it allows users to remain on the same page instead of hopping between many different pages within your website. Also, it's much faster to continue to load one long page than to load multiple pages.

Consider using infinite scrolling when there are a lot of images on your page so that you can give them a chance to load as your visitors scroll through your content.

Trend #5: Parallax Scrolling

Parallax scrolling is a technique in computer graphics in which the background moves at a slower rate in the foreground, creating an illusion that looks like it is 3D.

Many websites have started to employ this technique, but if overused, it may look gimmicky. But if you consider how this technique will make your website more interactive with the audience, it can be very successful.

For example, when the hit movie Life of Pi came out, the marketing team behind the film employed this technique for its website.

Why is it cool?

Parallax scrolling brings websites to life. The images are still in 2D, but it gives an experience that makes it seem like 3D. It also helps marketers use websites to tell the story of what it is they're marketing. As you scroll down, you find out more information about the product or service as images and text appear in different places.

This technique can be very powerful, as it can really bring your business to life for visitors.

Trend #6: Scalable Vector Graphics

Scalable vector graphics (SVGs) are an XML-based vector image format that allows designers to take their images to the next level with interactivity and animation. The video below shows what SVG files can do to take your graphics and animation to the next level.

Why is it cool?

Because scalable vector graphics use vector images, you are able to resize them while avoiding any distortion of the image. They also work better when creating animations as we saw above.

HubSpot Graphic Designer Ivan Sunguroff says, "Scalable vector graphics are replacing bitmap imagery assets, as modern designers continue to optimize sites' speed and flexibility. SVGs will quickly become a staple of any truly responsive design. A designer only has to export once in one format, and that image will appear beautiful and crisp on anything from a smartwatch to a retina display."

Trend #7: Typography

Many designers are now using a wider selection of typography to help visitors navigate through the site. Web typography includes the headers of the page that keep your website organized but also neat and beautiful. Designers have always used typography in their designs, but the difference now is that the selection of fonts has grown tremendously.

A prime example of a website using great typography is that of The New Yorker, which sports web typography that is beautiful, neat, and recognized nationally.

Why is it cool?

Because typography includes the family, style, and size of a font, it can make an entity's brand easily recognizable upon first glance. It also gives the website an organized and neat feel.

Typography allows us to create a simple design trend that also leads readers across the website. In the case of The New Yorker, the website isn't cluttered -- it's neat, clean, and has enough information to help us understand about its contents.

As we read through the first page, the large typography stands out so we can quickly figure out where we need to go, whether it's the News Desk, Culture Desk, or some welcome items.

Trend #8: Overlay Dropdowns

Overlay dropdowns are a form of dropdown menus that lay directly over the content on your website. That means when you click on an option in a website's navigation, there are other options that pop up below your menu without taking you to a different page.

Why is it cool?

This technique is really valuable for companies that want to fit additional links on the homepage without over crowding the page with text. When you select anything on the overlay dropdowns, you're still able to view the rest of the page and see other content.

Businesses building sites for responsive layouts prefer this type of dropdown since it lets them maximize the real estate on mobile devices and tablets as well.

What other design trends do you think marketers should jump on and implement in their websites?

Responsive design it s a must this days, Yes is here to stay. I like background photo websites a lot , but cant implemented them lot for my clients (this restaurant site is great).
I ma running gift basket e commerce website and , in e commerce websites ther is no much room for new stuff to implement, but responsive design , we use already and is helpfull.

Dave Vranicar

Thanks, Rachel.
This is a very informative and helpful article. It's hard to believe the quality and quantity of great content that HubSpot produces every day, many times a day.
I especially like the fairly recent (it seems) focus on techniques and tools for design.
Now I only wish it were easier to get design enhancements coded into the HubSpot CMS, without paying an arm and a leg to a coder or a design agency.
Too bad we can't use tools like Adobe Muse for building web pages in HubSpot. That would really set small businesses free.
Thanks for a great article.

I just wonder how much is going to impact on a website loading time having a big high quality background image. Since we read that we should have a home page that load in less than 3s, if we add such background the 3s become impossible

Alot of these are pretty. However, I have a problem of following a rend just because 'it's cool'. Responsive is NOT cool, it's a must. Everything else are good design patterns, but the concern should be if they impact usability then pitch them.
I for one hate infinite scrolling. Infinite scrolling only works with a strong wi-fi connection. On 3G devices it can really gum up the works especially when I want to find something quick, and then have to wait for the page to properly scroll.
Performance and Usability will trump cool everytime.

I have to disagree with the title of this post. Many of the items are simply not "trends". As written in the first paragraph (of "trend #1). "Responsive design is one of the latest trends in website design -- and it seems like it's here to stay." If it is here to stay, it is not just a trend. Many of these points are also far from "up and coming" and have been in regular use for a couple of years minimum!
As Aric stated above, "Responsive is NOT cool, it's a must" and personally, so is strong Typography and things like retina support if you want to have the most usable site across multiple platforms.
Perhaps the title would have been more accurate along the lines of "8 Design Movements Marketers Should be Aware of", or even "8 Design Elements Marketers Should be Aware of".

Staci

I've heard that infinite scrolling is bad for Google's crawling algorithm because it prefers page counts. Anyone else hear the same or different?

Another trend I'm seeing are slightly-animated graphics whereby images move themselves into visibility. If you go to the http://www.iofficecorp.com/ website, you'll notice how the homepage graphics move onto the screen. I've been seeing a lot of that recently. Companies are moving away from Flash or "sliders" in favor of these simple animations to catch people's eye (yet not disturb or interrupt the experience). The image on the homepage of https://www.dropbox.com/ is another example.

One thing I don't really care for in responsive design is when the website takes away features when the screen gets smaller. I get that things like twitter feeds aren't necessary on a smaller screen but sometimes I see menus disappear and the menu is the only way to find certain pages. Losing the search bar is also a big mistake.

Interesting that 'large image design' is trending at a time when content creation is said to be critical. Overall, some good trends which should be used to enhance a user's experience, not just 'because we can'.

What do you guys think about the ioffice website? I designed it, so any constructive comments are greatly appreciated. @Jessica thanks for noticing the none flash quick animations.

Rachel Sprung

Hi Alden,
You did a fantastic job with your site! The unique typography helps you scan down the page, and I think you have a great balance of images to text.
And of course as others mentioned in the comments, responsive design is a must now so that is fantastic too!

This is really helpful! I am still trying to understand paralax. I have an iPad so I heard about it first because of that. Life of Pi does a GREAT job with it too! I don't think it is something we will be using anytime soon but it is pretty interesting!

Not really a big fan of Parallax Scrolling (not yet at least). But I do hope SVGs will be adopted at a large scale soon, including vendors who have affiliate programs (it can be extremely enoying when you like a particular banner and you cannot scale it to fit on your website properly).

Responsive design is an important aspect of any website. As more and more users browse websites on mobile and tablet devices, we need to make sure that our designs work well at any screen size. This can be a huge challenge to implement, and requires a new set of skills for designers and site builders

Lyn

Thanks for this list, I worked through it because my own website is currently being developed.
Good examples of how one or two of the "trends" have been used EFFECTIVELY.
That's the key. Non-gratuitous use of good design elements. A great example is the one you showed for Fonts. There would be very few other kinds of sites that would benefit from the use of so many fonts of course. The USER EXPERIENCE for anyone visiting a magazine /news style site is greatly enhanced due to the intuitive nature of the UE (ie; headlines, layout and different fonts are the way we've been taught to navigate this kind of information in the print media so the brain "gets" it immediately and we are COMFORTABLE - and that keeps us on the page.
The thing to remember regardless of the latest trend or UE is to consider for YOUR ideal visitor whether it will enhance, make comfortable, simplify and deliver the ONE thing you absolutely want your visitor to do NOW, next, next.
Your website should be an experiential, emotional and intelligent EXPERIENCE for your visitor and for YOU.
It should be a version of your SALES FUNNEL (maybe even 2 sales funnels).
Remembering ALSO that your visitor could be a first time user or a returning visitor.
When the objectives of your visitors are met (by their UE & the outcome of that visit which HAS to have them feeling satisfied at the very least)...and YOUR objectives have been met...you have both entered the POSSIBILITY phase of doing business together.
How that possibility unfolds or develops is a whole other conversation.
My main POINT here is that you must be clear on what your UE needs to be, then choose from ALL of the new trends, ALL of the tried & tested, and have a designer & developer who GETS the biggest picture and has the ability to translate that into what is (on the surface for your user) an EXPERIENCE that engages them ...
So they don't resist the flow (through the process you have designed for them that's flowing along beneath the surface).
Anything GRATUITIOUS to this experience will just seem incongruous and jarring to the UE. Result? I'm outta here!!
Trends are great. People follow them. It's great to have something new & fresh to PLAY with, but if it doesn't fit your UE, your BRAND, don't worry! Trends come and go. Maybe the next new trend will be a perfect FIT for your site. Then it's BOOM! Your visitor wins, you win. Then the journey through those sales funnels can begin.
And that my friends is where the real action is!
I'll be launching my site in a few weeks. I'd love to get your feedback on whether I've met all of the criteria I've just raved on about! The power of feedback can be huge.
Sending love from my heart to yours
Lyn Bowker
lynbowker.com (coming soon :)

Responsive website can provide a great user-experience across many devices and screen sizes. This is an important characteristic, since it is impossible to anticipate all the devices and screen sizes searchers will use to access your site. Thanks Rachel!

As a web designer, I love responsive design. It's become a staple in our websites, although you still get clients who insist on a customized mobile site. Quite like infinite scrolling although never had to use it.

While I get the need for responsive design and see how it could be appealing, mobile sites annoy me. They are watered down versions of desktop sites. More often than not I look for the link that will take me to the full desktop site and if I don't see that link I leave.
Unfortunately, I am required to design responsively.