7 cool web design trends to watch

June 19, 2013

Whether it's your homepage, a microsite, a landing page, or any other piece of virtual real estate you own on the web, design, development, functionality, and user experience are paramount. Plain-Jane HTML just isn't going to cut it. And it shouldn't. There have been many advances in web design technology, and brands have no excuse for not spending the time and effort required to create a truly wonderful web experience.

But before we delve into the lessons we've learned over this past year, it's important to cover what a website should accomplish. Web properties are no longer judged solely on the number of unique visitors or impressions they receive. Now, web design is judged on engagement and the length of time an audience spends interacting with a site.

Whenever you decide to undertake a design or development project, ask yourself what the web property should accomplish. At minimum, web properties should:

Capture the visitor's attention

Be relevant

Be memorable

Be user-friendly

Make the visitor want to tell friends about it

Make the visitor want to return again and again

Below are seven design lessons for 2013. Not every one will apply to every web design project, but it's good for all marketers to know what's new in the palette.

Parallax scrolling

The lesson: 3D-visual effects increase user engagement for image-intensive sites.

Example: eBay

Parallax scrolling isn't new technology, but it's a relatively new trend. The effect produces the illusion of three dimensions within the screen, with content seemingly scrolling behind other features on the site such as the main navigation bar. It's a great effect to use for visually intensive sites, particularly all-important product pages.

eBay uses a tasteful dash of parallax scrolling, and the effect is that the products on the page are the focus. They seem to slide behind the smll navigation bar, which remains ever present at the top of the page. It's an effect that aids the shopping process by allowing users to focus on the products, but still easily navigate should they need to do so.

Infinite Scrolling

The lesson: When there is no end in sight, users remain on the page, increasing engagement time.

Example: Mashable

Traditionally, infinite scrolling was used on social media pages such as Facebook and Twitter. As the user scrolls down the page, the site continues to load content, seemingly endlessly. Other sites have applied this functionality to their benefit; the overall effect is an improvement in engagement time.

eBay uses infinite scrolling, but Mashable's website really takes advantage of this. When users click through to an article on Mashable, they can read the article in its entirety by scrolling down the page. When the user reaches the end of the article, the website appears to loop itself, and the visitor finds himself or herself right back at the beginning. This not only saves the user the need for the "back" button, but it also prompts the user to select another article rather than jumping off the Mashable site once the original article that piqued the reader's interest has been read.

Alternative navigation

The lesson: A website doesn't always have to scroll up or down.

Example: Jacqui Co.

Users are conditioned to a top-down approach. They land on a website and instinctively begin scrolling down, searching for content.

This doesn't have to be the case. By incorporating a number of techniques (including infinite scrolling and the parallax effect) and by designing and laying out the content in an alternative fashion, a website is no longer confined to a y-axis.

Jacqui Co.'s "Journal to the Perfect Cake" is a great example. Users can navigate the page by scrolling left or right, up or down, and zooming in and out as they explore the baking site. It's not only visually appealing, but the alternative navigation also makes it more interesting.

Creating cinematic experiences

The lesson: Marketers are storytellers. The website is a screen. Why not marry the two?

Example: Peugeot graphic novel microsite

If the goal of a website is to hold the visitor's attention, then what better way to accomplish that than by producing a cinematic experience?

Peugeot's graphic-novel-style microsite (advertising the HYbrid4) is a perfect example. The visitor scrolls through what is essentially an action-adventure web comic. Interspersed are tidbits about the HYbrid4's four different driving modes, but it doesn't really detract from the story. The site also uses parallax scrolling and sound effects to truly immerse visitors in the experience.

Interactivity

The lesson: Users appreciate a personal touch. Allowing interaction and personalization creates a bond between the experience and the user.

Example: The Wilderness Downtown

Interactivity improves any cinematic experience by actually letting the user control or personalize some of the functions on the site. TheWildernessDowntown.com is an example. The site is a promotion for the new single by Canadian indie band Arcade Fire. It allows users to enter the street address of the home they grew up in to create a personalized music video of the song "We Used to Wait," with images from Google Maps scrolling and popping up, thus creating a memorable, personal experience. It's no doubt a unique way to advertise the band and the song.

Fresh aesthetics

The lesson: Fresh, custom design elements help humanize the content and the brand.

Example: G'Nosh

Staying fresh and relevant has always been a component of effective web design. Lately, we've been seeing a trend toward original design work, particularly in typography. Hand-lettering is catching on, and sites are using less-traditional fonts in favor of custom work. The photography we're seeing is crisp, and colors are more often vibrant and bright.

G'Nosh capitalizes on fresh design elements on its site. The pictures of the food are vibrant and clear, set against a light plum background to help make them pop off the page. And the typography is fresh and modern, appearing to be hand-drawn in white paint. The overall effect enhances the web experience and highlights the product.

Responsive design

The lesson: Your audience is mobile. Build your site to scale.

Examples: United Pixelworkers, Oneupweb.com

Perhaps the most important lesson is making sure your website is responsive to your mobile users. Your website needs to scale and remain user-friendly no matter what device it's being viewed on.

United Pixelworkers has a great responsive site that scales down as the screen size reduces with smaller devices. And, of course, we're partial to our own site -- Oneupweb.com. We recently underwent a full redesign and one of the key elements was making sure the site was responsive. As the screen size shrinks, certain elements disappear, leaving only the most relevant and useful information. That information is presented to the viewer in a readable way, no matter what device it's being viewed on.

There are many more lessons from web design, and it's true that not every lesson will apply to every project. But if you're not paying attention to the recent trends and if you're not learning about the newest and upcoming concepts, then you're going to get left behind.

The final lesson is simple: The only constant is change. Embrace it with an eye toward strategy, and you can keep your web properties fresh, relevant, and engaging.

Lisa Wehr is CEO and founder of Oneupweb.

On Twitter? Follow Wehr at @LisaWehr. Follow iMedia Connection at @iMediaTweet.

Comments

Commenter: Jo Oskoui

2013, June 17

Great article about current web trends. I think Responsive design is by far the most important of the once listed since it provides users an optimal user experience on all devices. That being said, responsive design not only requires that content is customized in scale but also contextually. Users access different types of content on mobile devices.

As for Parallax, it should be used with caution. There are many sites that look and feel great on a desktop browser but don't work on iOS devices (iPhone, iPad) at all. Unfortunately, this is not acceptable in today's mobile world unless alternative mobile sites are accessible.