2013: The Next Phase of Web Design

The Future of Web Design Conference (FOWD) was held right before Hurricane Sandy swept through NYC, and the timing couldn’t have been more fortuitous. The conference provided a valuable look into the future, and it’s safe to say that 2013 is shaping up to be an exciting year in the world of web design.

The most talked about trend at the conference was the next phase of web design. When websites first appeared, they were flat and one-dimensional. From 2004 through 2010, websites evolved into two-dimensional, stylish experiences thanks to CSS. With the progression of technology, websites are becoming layered, interactive and dynamic experiences filled with motion and transitions. That is the future of web design for three reasons:

1) Technology has evolved:

HTML5 now allows for the creation of motion through transitions offered by JQuery and CSS3.

2) Interactive sites are engaging:

Users tend to stay on a site longer if content is interactive. Instead of just reading content, website visitors will encounter animation, letting them interact with graphs, images, video and other dynamic content as they move through a site.

3) The next generation of touch-screen kids:

Whether they’re playing Minecraft or scrolling through their music library, the current generation of kids is growing up engaging with content, and they will require interactive websites.

It is important to note that the creation of interactive websites will require a shift in website design and development. Designers will approach a website project as one would a movie or TV show. Storyboards charting how users will experience content as they move through the site will be developed before design even begins. Developers will work in tandem with designers throughout the project to create an engaging experience

The big trend of this year, responsive design, will evolve as we move into 2013. As CSS3 and JQuery are used more frequently to create interactive websites, front-end development will become even more complex. Each interactive element will have to be replicated across device breakpoints. One thing highlighted during the conference was the role of the front-end developer through 2013 and into 2014; his or her role will become significant.

As you may have concluded, companies will need to spend more money on website design and development as they adopt responsive and interactive sites.

During the conference, I was able to attend a few discussions, and two really stood out:

Chris Coyier’s presentation, A Modern Web Designer's Workflow, captivated the audience. His message to the community was that it’s no longer acceptable to be a rogue coder. Following the proper code development and deployment practices ensures maintainability and code reuse, which is especially necessary as we move into creating more dynamic websites.

Darcy Clarke’s presentation on Front End Development Techniques for the Modern Web was especially valuable, as it included great examples of dynamic sites and transitions. He also provided some good links for developer resources.

One new technology that grabbed my attention was Reflow from Adobe. It’s still in beta, but it’s going to be an especially important tool moving forward, as it helps designers create interactive websites and translate the design to code that developers can refine and use to build websites. Reflow by no means will eliminate the need for coding by front-end developers, but it will help reduce the ambiguity between what a designer wants and how a developer interprets their needs.

Charity Water’s presentation that kicked off FOWD provided a really exceptional website use case around moving online campaigns offline. They raised money on their website to buy and build the Yellow Thunder Truck, a truck that is equipped to drill wells and provide clean water to poor villages in rural areas. If you see the Yellow Thunder Truck in person, you’ll recognize it as their truck thanks to online promotion. Additionally, they added a GPS chip on the truck so you can see where the truck is drilling a well and contribute directly to that project.

Another takeaway was the future of eCommerce. We all understand the current eCommerce flow from product pages to baskets to checkout. For the past 10 years, eCommerce has been about you buying something for yourself online. The next iteration is about gifting platforms. A lot of people actually buy for someone else, and not a lot of websites include an easy way to buy something for other people (J.Crew and Gap are exceptions).

The eCommerce platform of the future will include a gifting framework: 1) the trigger, which could be a holiday or birthday, 2) the dimension, like a back-to-school section for college kids or a Mother’s Day gift section, 3) search capabilities, 4) a deadline that ensures the dimension is only available for a limited time and 5) the gift itself will be easy to deliver and return if need be.

Other observations I shared on Twitter:

#FOWD adobe Edge tools introduce Reflow. Design responsive sites with a easy to use tool for designers.

— deepakdogus (@deepakdogus) October 22, 2012

#FOWD users tend to stay on a site longer if content is interactive. Jquery animation effects $.animate() enable animation of DOM objects.

— deepakdogus (@deepakdogus) October 22, 2012

#FOWD coming to HTML 5 form validation tags as well as more form element tags, date picker etc.

— deepakdogus (@deepakdogus) October 22, 2012

#FOWD users tend to stay on a site longer if content is interactive. Jquery animation effects $.animate() enable animation of DOM objects.

— deepakdogus (@deepakdogus) October 22, 2012

#FOWD fonts have bugs too. Check out webink.com a great web font service provider

— deepakdogus (@deepakdogus) October 22, 2012

By all accounts, 2013 will be about catching up to responsive design, keeping up with technology and creating interactive, dynamic and engaging websites.

My firm is engaged with a number of enterprise clients building responsive websites and we also just launched our own responsive site. Are you contemplating a responsive website for 2013? What do you believe are the most significant pros and cons? Feel free to leave comments or email me at info@siteworx.com.