ellipsis flag icon-blogicon-check icon-comments icon-email icon-error icon-facebook icon-follow-comment icon-googleicon-hamburger icon-imedia-blog icon-imediaicon-instagramicon-left-arrow icon-linked-in icon-linked icon-linkedin icon-multi-page-view icon-person icon-print icon-right-arrow icon-save icon-searchicon-share-arrow icon-single-page-view icon-tag icon-twitter icon-unfollow icon-upload icon-valid icon-video-play icon-views icon-website icon-youtubelogo-imedia-white logo-imedia logo-mediaWhite review-star thumbs_down thumbs_up

7 cool web design trends to watch

7 cool web design trends to watch Lisa Wehr

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.


7 cool web design trends to watch


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


7 cool web design trends to watch


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


7 cool web design trends to watch


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.


7 cool web design trends to watch


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


7 cool web design trends to watch


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


7 cool web design trends to watch


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


7 cool web design trends to watch


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


7 cool web design trends to watch


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.


7 cool web design trends to watch


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.

Lisa Wehr, Oneupweb’s founder and CEO, is a true visionary in the world of search engine optimization and marketing. She was designing and optimizing webpages before most people had ever logged onto the internet. Her prophetic vision has made...

View full biography

Comments

to leave 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.