Sexy Web Design Trends of 2013 (and how to get your hands on them)

Over the years we’ve seen the web reach unimaginable heights as a medium for storytelling, presentation and digital experiences. Leveraging HTML5, CSS3, JavaScript and other flourishing web languages, 2013 has been an exceptional year for web professionals to target the HTML platform as a way to tell their story. Below are some sexy, creative examples web designers and developers are using to harness the potential of the web – and how you can get your hands on these great techniques.

1. Video Backgrounds

As a subtle accent, using background videos as design elements can add a lot of depth to your design you just can’t get with static imagery. Using video is a creative way to introduce a layer of storytelling to your site and a refreshing use case from the traditional embedding of YouTube clips.

Get Inspired

 

How do I get my hands on it?

Check out Ben Kaminski’s tutorial on responsive video backgrounds here. You’ll learn how to create responsive video design elements, and how to use them as backgrounds with additional elements stacked on top.

2. Vertical Breakpoints

Vertical breakpoints (at least that’s what I call it, you may call it something else) is the concept of triggering design and animation cues with the scroll position of your page. This technique is used to control the presentation of your website, using attractor animations and reveal effects to guide the user through hierarchy of information.

Get Inspired

 

How do I get my hands on it?

There’s plenty of libraries to help you get started with scroll motion effects, one of my favourites is Superscrollorama powered by jQuery and Greensock. Includes some great documentation and examples on how to get started.

 

3. Interactive Infographics and Data Viz

Infographics are nothing new, however emerging awesome web technologies allow you to add an interactive presentational layer to guide the user through the story of your data.

Get Inspired

 

How do I get my hands on it?

D3.js is a powerful library for manipulating objects around data sources and worth checking out. Check out the site for examples and documentation.

For the designer-minded infographic builder, tools like infogr.am can help you get started with some templatized data visualization, or try Adobe Edge Animate to help power your infographic designs with HTML animations.

 

4. Experience Sites

Experience sites have fallen out of flavour over the years, largely due to the decline of Flash usage, but are making a comeback (for better or worse, you decide) in the form of HTML. Thanks to modern web languages such as WebGL and Canvas, web designers are able to push the boundaries of HTML to inconceivable limits. Making sure to keep your designs tasteful, high fidelity animated experiences can bring a strong level of engagement and resonance with your brand or campaign.

Get Inspired

 

How do I get my hands on it?

The primary driver behind these kinds of experience sites require a healthy amount of creativity and inspiration above all else. Execution can come from the broad range of frameworks and tools available for the web today, but here’s some resources to get you started:

Greensock is a powerful, lightning fast animation platform for creating stunning JS-based effects. If you become a member there’s tons more goodies you can access, including special plugins and tools.

Adobe Edge Animate can be used to aggregate your favourite frameworks in an IDE environment, allowing you to take advantage of timelime-based animations with scripting against familiar APIs. Also read up on Chris Gannon’s blog on how to use Greensock and Animate together.

 

Final Thoughts

“Where’s the flat UI? Where’s the responsive design?” Yes, absent from this post are some tried and true practices being executed across the modern web today. This post is intended to communicate the presentational, experience side of HTML and how web pros such as yourself can take the web platform to reach new and unexplored territory. Use some of the above techniques to add a unique or inventive experience to your web creations; taking a leap of faith and going against the grain of mainstream design practices can help you stand out from the crowd – when it suits your messaging and brand, of course.

 

215,045 total views, 20 views today

Posted on October 20, 2013 by Sarah · 3 comments

3 comments

  1. Marie Betancur
    - Reply

    No Flat UI, how absurd! Seriously it is nice to see a clean variety of trends.

    I hope doesn’t mean full on flash websites are making a comeback!

  2. Pingback: Current Trends and Use in UI | JENICA CRUZ

Leave a Comment

Your email address will not be published. Required fields are marked *