By Jeff Kline

Blog

The Best of 2013: Top 10 Web Design Trends

Wednesday, December 4, 2013

We spend so much time looking forward for the newest trend, sometimes we forget to look back at past innovations that have worked and are still going strong!

Here are the top 10 web design trends that emerged in 2013. We think they’ll still be incredibly important in the new year. 

 

1) Responsive Design

At the beginning of 2013, responsive design (a website layout that adjusts to fit different screen sizes and mobile devices) was an innovative idea. Now it’s just one more standard of modern web design in a world where nearly everyone is connecting to the web with a mobile device.

The West Coast Chamber website has a responsive design that looks great on desktops, tablets and smartphones.

West Coast Chamber website - responsive design

 

 

2) Flat Design

Another trend that has emerged in response to mobile web browsing is flat design. Drop shadows, 3D textures, gradients and realistic depictions are out—large geometric shapes, bold colors and simplistic graphics are in! Flat design makes things clearer and easier to see on a mobile device. Microsoft started this trend with Windows 8, and Apple quickly followed suit with the iOS 7 update. 

The Silicon Valley JCC website uses bold flat colors to make calls to action stand out.

Silicon Valley JCC website - flat design

 

 

3) Dynamic Grid Layout

Windows 8 also popularized the dynamic grid layout. This layout looks great on all types of screens—the flat colors work whether you have a retina display or not, the large boxes are easy to click, and the grid is responsive, so the boxes will reorganize themselves to fit on any size screen. Dynamic grid layouts also often include rollover effects, which creates an enjoyable experience for visitors. This is commonly used for blog or news listers. 

New Music USA’s blog is a great example of a dynamic grid layout.

New Music USA blog - dynamic grid layout

 

 

4) Rollover Effects

You can add interactive elements to your website through the use of CSS3 animations. Rollover effects allow you to provide additional information while still keeping a fresh, clean design. Check out DoSomething.org and hover your cursor over the call to action boxes at the bottom of the page to see a great use of rollover effects.

DoSomething.org website - rollover effects

 

 

5) Massive Text

Text is getting larger and larger on websites, presumably so it’s easier to read and click on a mobile device. Large text may also be a nod to the importance placed on content today. Large text demands to be read—just be sure to limit your really massive text to just one or two sentences. Eye Am executes large text flawlessly.

Eye Am website - large text

 

 

6) Long-Page or Single-Page

“Below the fold” is no longer a danger zone. Websites with long pages that require lots of scrolling have become commonplace. Some organizations have even gone so far as to create single-page websites, where all content exists on just one page.

When long-page and single-page designs are done right (with clean layouts, gorgeous images, and inviting text) they can enhance user experience by allowing visitors to scroll rather than click through to different pages of your website.

The Rotary homepage features a long-page design, while the rest of the pages on the site are standard length.

Rotary website - long-page design

 

 

7) Fixed Navigation 

If you do go for a long-page or single-page web design, fixed navigation is crucial. Fixed navigation means your top menu sticks to the top of a visitor’s web browser even as she continues to scroll down your page. 

When you scroll down on the Alper JCC website, you’ll notice that the navigation bar sticks to the top of the page.

Alper JCC fixed navigation 

 

8) Parallax Scrolling

This is a very cool effect that occurs while you scroll down a page. Parallax scrolling gives the illusion of depth as several “layers” of information move at different speeds. The best way to understand it is to see it in action—check out the Jacksonville Art Walk website and scroll!

Jacksonville Art Walk website - parallax scrolling

 

 

9) Hero Images

By far the most beautiful trend of them all, hero images (full-page photo backgrounds) are all the rage. This is a great way to create an inviting homepage and show the personality of your organization. The Mandel JCC Of The Palm Beaches welcomes visitors with a vibrant hero image.

Mandel JCC of the Palm Beaches website - full-page photo background

 

 

10) Circles

Despite the rising popularity of dynamic grids, circles haven’t lost their appeal in web design. Circles stand out from the straight lines and edges of common design elements, making them a great choice for call to action buttons. I love the use of circles on the Mandel JCC website.

Mandel JCC Palm Beaches - circles

 ***

As you can see, mobile has had a huge impact on web design in the past year. Responsive design, flat design, dynamic grids, large text, and long pages that don’t require a lot of clicking—these are all results of the continuing rise in mobile web browsing. At the same time, many of these design trends—rollover effects, parallax scrolling, full-page photo backgrounds and the use of circles—are still developed with desktop browsing in mind.  

I encourage you to keep all of these design innovations in mind as you think about the future of your website.

For more great nonprofit websites, check out my post on Top 10 Nonprofit Web Designs. Get more of the best of 2013 with 5 Inspiring Nonprofit Marketing Moments.

 

Free Website Assessment

Comments

comments powered by Disqus

Need Support?

Submit a Ticket
Back to top
Ready to Get Started? Contact Us for Pricing