Tag Archives: Design trends

WordPress Design Trends for June 2013

WordPress evolves at a steady and predictable pace.  This is a nice feature of the core WordPress.org project.  Since version 1.5, the theme system has allowed designers and WordPress admins to create cutting edge designs that are portable across almost any WordPress site.  With a virtually instantly available design, administrators can change the overall look in a heartbeat.  As WordPress evolved, the theme engine allowed people to install a framework and customize it quickly and easily without affecting the core code.

Even though modifications became easy to do, the theme system created enormous competition for designs.  With the ability to download a theme that is ready to go out of the box, designers were forced to get creative.  Now it seems as though there is a WordPress theme shop next to every Starbucks (that is to say, on every corner, ubiquitous).

With a vibrant theme community, designers have to adapt quickly to changing trends.  And boy do they change quickly.  Here are some of my favorite design trends that have emerged in this first half of 2013.  If the first have is any indication, the second half of 2013 will be incredible.

Responsive Designs (vs. mobile)

responsive

When mobile devices were first starting to be built with enough oomph to handle modern web applications, designers had to think quickly and incorporate mobile designs in good WordPress themes.  Initially, each standard theme came packaged with a corresponding mobile theme.  This mobile theme was compatible with the ipad and blackberry devices.  Then the iPad came out and changed everything.  Designs were faced with a decision to add a third layout to their themes (some chose this path) or develop a new way to handle different screen resolutions elegantly.  In 2013, responsive designs really came into their own.

Responsive designs (in case you’ve been living under a rock, trying to get Joomla to work for the last year) is concept that allows a design to scale in all sizes.  Although scaling and moving elements may change how the site looks, it won’t distort, squeez, squish or otherwise befuddle your design.

Specialized mobile navigation

mobile nav

In concert with the advent of responsive designs, WordPress custom menus allow designers to create a menu that is only to be used for mobile browsers.  This doesn’t matter if you only have 3 menu items.  But scrolling through 10 menu items and their 50 sub-items can be frustrating on a mobile device.  So frustrating you can easily lose visitors.  Developing a mobile menu can resolve this frustration.  A restaurant I recently worked with has a full menu for standard browsing, but the mobile menu only offers information on their story, location and menu.  The three critical pieces of information for the mobile user.

Media-centric designs

media-centric design

With more households having high speed internet, and mobile device load time improving for that matter, design limitations have decreased.  I remember using AOL as my browser, with a 14.4kpbs modem to browse the web.  When I came across a website with lots of images, I had to either go run an errand, or look elsewhere.  Not anymore.  2013 designs are riddled with high-resolution images.  Not just as content, but as design elements.  New media-centric designs focus on the media, not the structure.  Examples include sites with entire backgrounds taken up by high-res images.  Without the featured images, there wouldn’t be much to the design, in fact.

Single-page designs

single page design

Single-page designs have really taken off this year.  A couple of things make this possible.  First, the web design community as a whole is moving back toward simplicity.  Simple sites mean more focus on content.  Second, the evolution of infinite scrolling technology has made single-page designs more realistic since all of your content can eventually be displayed without navigating.  This is most effective with two types of websites: 1) those with minimal content (business or splash type pages) and 2) those with socially generated content or a steady flow of content (read: Facebook, Pinterest, traditional blogs).  A cool design element that I’m keeping my eye on is called Parallax Scrolling, see an example.  Parallax connects the scrolling action to other design elements.  Scroll in the example and watch the navigation menu.  Check out OnePageLove.com, a gallery dedicated to single page designs.

Custom fonts

custom fonts

Custom fonts are not new in 2013, but they are quickly becoming the standard.  It used to be there was one choice for font, then a few, then limited to your browser’s capabilities.  Now, due to evolving browsers and the beauty of CSS3, virtually any font can be packaged with a WordPress theme.  This has opened the floodgates for designers that were previously limited to Times New Roman and -GASP- Comic Sans.  I personally never realized how much of an impact a font could have on the overall design feel.  Then Google Fonts muscled into web design and my eyes opened in a totally different way.  Thanks to Theme.fm for the above image.

What is your favorite WordPress design trend for 2013?