WordPress Design Trends – I am Mel Choyce – Visual Design Trends

WordPress Design Trends

I am Mel Choyce

• Boston-based UI/UX Designer
• WordPress Core Contributor
• Work at Automattic
• @melchoyce | choycedesign.com | melchoyce.com

Today, we're gonna talk about

THEMES

2013 was a pretty good year for themes across the board. It was a pretty good year for both businesses and the theme design ecosystem. We saw some of the best designed and most interesting themes ever

I'm going to talk more about the "what" of the theme design ecosystem rather than the "how"

Themes are becoming more

FLEXIBLE

I mean flexible in two ways, really — the themes that are coming out are becoming more flexible in that they can be used for more complex, more interesting purposes, especially on the magazine, media, and CMS side of things, but also that they're designed to be more flexible so you can use them on your phones and tablets, not just your laptops or desktops.

Themes are becoming more

SPECIALIZED

Even while themes are becoming more flexible, there's a huge segment of themes becoming more specialized — instead of all-purpose blogging themes, we're seeing more themes specifically for microblogging or photoblogging. Instead of generic corporate themes, we're seeing themes come out for real estate, for nonprofits, etc.

Themes are becoming better

DESIGNED

So, this one is probably my favorite — theme design has gone way, way up in the past year, especially the quality of free designs in the WordPress.org repo. We're seeing an overall better understanding of color, type, and hierarchy.

Flexibility

Responsive Web Design

I'm going to assume that by now you're all familiar with what responsive design is, so I'm not going to talk a lot about what it is or how to do it, but give you more of a context for it.

Term coined by Ethan Marcotte

Responsive web design was term coined by Ethan Marcotte in 2010 in an article on A List Apart. He went on to write a whole book about it. The article really took the web community by storm.

Helped inspire "mobile first"

(which then turned into "content first")

RWD went on to inspire entire new methodologies about how we should create the web. Luke W published a book in 2011 called "mobile first," which took responsive web design to the next level — instead of creating desktop sites and making them responsive, he said that we should start mobile first and build up to desktops.

...Which went on to inspire "content first"

This went on to evolve into the "content first" movement, which states that we should design our breakpoints around content, not devices. With themes, we don't have this luxury — we don't know what kind of content people are going to putting into their sites, so responsive or mobile-first it is.

#1 requested feature on Theme Forest in 2013

At Pressnomics earlier this year, Helen Souness from Envato presented on Theme forest's WordPress theme trends from this past year. Customers surveyed said that "Responsive" was the #1 most requested new feature that their clients requested. It was also the #1 most searched term.

Not a trend, but an expectation

Go responsive or go home

At this point, Responsive Web Design isn't a trend — it's an expectation. You need to go responsive or go home. Releasing a non-responsive theme at this point is like going to prom in your boxers.

If you've ever designed a responsive website or theme...

Resolution Independent

Tied closely to responsive design is the concept of resolution independence. Your themes should look crisp and clear whether they're on an Android phone, a iPad, a crappy desktop computer or a top-line Macbook Pro.

Design for Retina

(But "retina" is only the beginning)

Ideally, you want to shoot to design for retina displays. The awkward thing right now is that the best way to design for retina is still kind of disputed, especially as more devices are coming out at varying resolutions. You just need to make sure to keep up to date.

CSS > Images

The easiest way to make sure your theme is responsive is to use CSS in place of image effects whenever you can. CSS3 makes this super easy and it's broadly supported across browsers that actually matter.

If you need images, include @ 2x

If your theme does need images, like if you have a nice background pattern or decoration, be sure to include a 2x version of the image. There's a couple different ways to do that, so just google.

Scalable

Closely tied to resolution independence is the idea of having everything on your site be scalable. Your site should look good zoomed in or out. Ideally, you want to use the same assets at desktop size as you do at smartphone size.

Where you can vectorize something, do it. This is especially true for assets like icons, which are becoming really popular in themes, especially to denote post formats.

SVG

Grunticon / Grumpicon

The first method you can use is turning your icons into svgs. A company called Filament Group has made some really cool and easy tools for doing this. If you're code inclined, you can use Grunticon, which, like it sounds, is a grunt task that takes SVGs and spits out the code you'll need to include them, with png fallbacks. Grumpicon is the browser-based drag-and-drop verison.

Icon Fonts

Alternately, you can create a font out of your icons. We've actually made a custom icon font to use in WordPress core now called Dashicons. You can make you own font using some web services like IcoMoon or Fontastic, or use one of the dozens of icon fonts already out there, like Font Awesome.

Specialization

Generalization → Specialization

In the past year, we've really seen a big shift away from generalized themes to specialized themes.

WordPress for ___

If you can think of a niche market to target, chances are there's already at least one theme for it, if not dozens. We're seeing themes for musicians, for artists, hotels, real estate, higher education, churches, comics, travel... Seriously, if you can think it, there's a WordPress theme for it.

Customers want niche

Back to Themeforest, they've seen that a huge number of their customers are looking for themes that fit their specific needs. People aren't looking for blogging themes or CMS themes, they're looking for exactly what they need. 3 out of 5 of their top searches are for niche themes.

E-Commerce

E-commerce especially is killing it. Themes that come WooCommerce-ready, or support other major e-commerce plugins, are becoming super valuable. Two, three years ago, if someone asked me how to make an e-commerce site, I probably wouldn't have pointed them to WordPress. But now? Absolutely. However — that might mean the market is starting to become oversaturated. If you're making an e-commerce theme now, it's got to be good.

Beyond "CMS"

I've also seen a shift beyond just CMS themes and towards using WordPress almost like an application framework.

p2

A good example of this is the p2 theme, which WordPress core uses for team communication. We also use a version of p2 at Automattic for a lot of our internal communication.

Capsule

Capsule is a fun theme by Crowd Favorite made specifically for sharing or archiving code snippets.

Visual Design Trends

Trends are just tools

Trends aren't inherently bad — they're just more tools for a designer's toolkit. What makes trends bad is overuse, oversimplification, and over-reliance.

Flat Design

Ah, the trend people love to hate, or love to love. Flat design is definitely the big trend at the moment, but I think overall it's a little misunderstood, so I'm going to talk about it.

Characterized by:

• Lack of textures, gradients, and shadows
• Blocks of solid color
• Really clean typography, often using humanist sans-serifs

Flat =/= Skeumorphic

Flat can also be skeumorphic

Flat is often seen to be the opposite of skeumorphic design, the style of design known best for its prominence in iOS. That's not entirely true, though — skeumorphism is about mimicking real life. Flat design can still be skeumorphic. Some have argued that iOS7's use of blur and translucency mimics layers of plastic and glass.

Roots in the Swiss style of print design

Flat design really has its roots in the Swiss style of print design starting in the mid-20th century. Swiss style was characterized by clean, minimal, grid-based content.

Metro

Swiss style has always been popular in web design, but it was brought to the next level and evolved by Microsoft, of all people, by their Windows 8 "Metro" style of design.

Post-Metro

Aspects of flat design have been picked up by Google, iOS7, and the design community at large

Aspects of flat design have been picked up by Google and iOS7, whose designs have started getting flatter. Google has embraced what can be called "almost flat design," where its overall style is flat and simple, but it has touches of depth, shadow and texture to call out elements you can interact with, like buttons. Flat design has also been really adopted by the design community at large.

Lack of Affordance

Flat design's biggest pitfall is its lack of affordance. Affordance is kind of hard to explain, so I'm just going to steal Wikipedia's definition: "An affordance is a quality of an object, or an environment, which allows an individual to perform an action. For example, a knob affords twisting, and perhaps pushing, while a cord affords pulling."

If everything's flat... what's the button? What elements can you interact with? If you're going to go flat go google's route and go almost flat — make sure your users know what they can click on.

Bigger is Better

When it comes to theme design this year, bigger is better. Fixed-width layouts have been traded out for full-width bars of color or images with constrained content. Everything is bigger, from images to text.

Big Images

Images really have become heroes this year. It's incredibly common to see a theme with a bar at the top containing a spot for a site title or logo, then navigation, with a giant, full-width image underneath.

Big Text

Images aren't the only thing bigger — text has gotten bigger, too, as themes focus on highlighting content over design details. My eyes are a big fan of this trend.

Animation

Animation is probably my least favorite theme this year, if only for how overused it is — a lot of the animation-heavy themes I've seen use animation kind of inappropriately. It's like flash all over again. Adding a little bit of animation can liven up your theme and give it some personality, but if you're going to use animation, please us it sparingly.

Web → Mobile → Web

Finally, we're starting to see a big shift of mobile design starting to influence web design. Trends that grew big on mobile are being ported over to web.

Collapsible Navigation ("hamburger buttons")

Probably the most popular of these trends is the "hamburger button," a three-lined icon representing a closed menu. Toggling a hamburger button usually opens up a vertical panel containing navigation.

Translucency and Blur

This particular trend, using translucency and blur like iOS7, has been cropping up around the web, especially in dribbble shots. I haven't really seen it in WordPress themes yet, but I'm predicting that it'll become a trend some time next year.