The Current State of Web Design (As Observed in Early 2012)

Back in early 2012, I gave a work presentation detailing what I saw to be the latest trends in web and application design. The main purpose of the presentation was to help guide the design of various in-house projects. Since then, my observations/predictions have, for the most part, stayed/come true. When setting up this blog, I tried to keep in mind my own design advice, so as a result, you’ll find many of the elements I discuss in this post reflected in the design of blog.danbrust.net.

I recently came across the presentation, and figured it would be interesting to briefly share the main talking points. My hope is that laying out some of these observations will help someone out down the line. Just make sure to keep up with any future trends. What’s current now (or close to two years ago) will seem woefully outdated just a few years from now. Also, please don’t mistake this for a Web Design 101 course. Rather, this is merely a listing of observations that were/are relevant to my purposes. The Web is a Wild and Untamed Place. There is no right or wrong. People will do what people will do.

What’s Out?

Some design choices have really dropped off the face of the Web, usually for good reason. This has mostly been caused by the current minimalism trend. Minimalism isn’t for everyone, but it is the prevailing design method right now. For a long time, some factions pushed for the Web to feel like an extension of the real world (aka Skeuomorphism). Apple (Steve Jobs, really) was the chief proponent of this. Slowly, as the Web has matured, designers have come to realize that the Web is its own thing. A web page doesn’t need to “feel” like a piece of paper. Your calculator application doesn’t need to look like an old-school accountant’s calculator. What good are those big, receiver-style dials in your music application? The Web (and applications) have matured into their own world. They have their own interface standards, designed to be efficient in their own realms. Now, even Apple has begun to see the light.

“Loud” Gradients

An example of a loud, harsh gradient.

An example of a loud, harsh gradient.

What are “loud” gradients? Any sort of “extreme” color change, really. Yes, I know, I replaced one ambiguous descriptor with another… Well, think of a red to green gradient, or blue to orange (as seen in the example I’ve included). Most gradients you see are now very soft. It is rare to see more than one color in a gradient. Often, the gradient simply uses different shades of a single color. Light gray to lighter gray, red to light red, etc.

“3D” Buttons and Graphics

A selection of "3D" and round buttons.

A selection of “3D” and round buttons.

Gone are the days of using gradients to make buttons and graphics appear to be 3D. You’ll still see it here and there, but those graphics will instantly stand out as out-dated. Instead, graphics are given a soft gradient, simply adding some texture and visual appeal to the image. The goal is to make it obvious that an element on the page can be interacted with, but not make it the sole focus of the user’s attention.

Round Buttons, Borders, Windows, Etc.

We finally get proper radius support in our browsers, and what happens? Everything moves to hard corners. The minimalist trend has been a large influence here. You won’t see a lot of heavily-radiused borders anymore. What you will see are a lot of straight lines and boxes. Rectangular shapes are just plain efficient. Don’t get me wrong, you’ll still see some rounded edges; they’re just not as rounded as they once were. A 1px or 2px radius is most common. “Back in the day”, a nice radius was something to be proud of. It took a lot of work to get that rounded corner. You had to design and splice the appropriate graphics, lay out all your content in perfectly aligned DIVs or tables, and hope that whatever browser came along would display your images correctly. Now, you add a simple tag to your stylesheet, and you’re good to go. If a browser supports it, great, rounded corner. If not, oh well. It is my belief that the newly found simplicity of rounding is at least a partial cause of its diminished use. Before, if you were going to put in the effort to round your edges, you wanted to make sure everyone saw them. Now that it takes just a few CSS tags…a simple, understated curve will do.

Drop Shadows

Drop ShadowRemember the first time you used a word processing program, and you discovered the Wonderful World of Word Art? Yeah, that’s pretty much the last time you should have used heavy drop shadows. Just a few years ago, shadows were all over the Web. Every site you visited went to great lengths to make it appear that their pages were floating off in space somewhere. Like other current web trends, shadows are now all about subtlety. A light, barely-there drop shadow is enough to give your page, text, button, whatever, the extra bit of depth you’re looking for. Thankfully, this has also meant the death of completely nonsensical and inconsistent shadowing. Check out this page for a great look at some of the more common shadowing mistakes (and how to fix them).

What’s In?

So, what’s in? What sort of design trends are ruling the Internet these days? If you’ve been reading along, you may have already gotten the hint. The trend these days is towards minimalism. It’s all about removing barriers between the user and the content. A page design should be attractive, without being the center of attention. After all, most users aren’t surfing the ‘Net in search of interesting and unique page designs. They’re after the content. I have to imagine the shift in design trends has been a bit hard on professional web designers. They now have to show off their design skills in whole new ways. Flashy graphics no longer suffice. Now, one has to think about how a user will use a page, how to best help them get to the content they seek, and how to keep the web design attractive, while simultaneously allowing it to fade into the background.

Pastels

Ahh, one of my favorite trends. Gone are the garish, bold colors of yesteryear. A nice light blue for a header here, a light gray (I’m counting white and gray as pastel) background there. Black backgrounds are now few and far between, with beautiful, clean, white pages dominating our browsers. Light colors have a real knack for making a page feel “clean.” It makes everything feel less cluttered. Pastels also work well with the subtle gradations now in use, which brings us to….

Soft Transitions and Borders

With modern design, it’s rare to notice a transition from one color to another. You’ll find gray on slightly lighter gray, or light blue with a slightly darker blue border. Black borders are almost completely gone. Instead, subtle gray lines are the current trend. The key is to avoid any hard, jarring transitions. Page areas flow together with only subtle differences in coloring. Light backgrounds don’t really factor into the equation. You’ll find every color under the sun floating on white or gray backgrounds, but those colors will then, usually, blend well together.

Large, Rectangular Data Blocks

The Modern UI interface, as found in Windows 8.1.

The Modern UI interface, as found in Windows 8.1.

Sigh. This may be the one area where things have just not worked out as I had predicted. Mind you, I wasn’t the sole predictor in this area. Essentially, Metro Modern UI was just starting to roll out. Microsoft was heavily investing in large, rectangular panels. Many of my other observations were reflected in Microsoft’s Modern UI, and were hardly unique to Microsoft. Square edges, flat tiles, pastel colors, little to no gradients, etc. Their somewhat unique spin, though, was the use of large, rectangular data panels. Some panels were simply buttons, launching various applications, while other panels were designed to display data.

It stood to reason that, were Windows 8 to take off, the Modern UI would become a familiar and welcoming environment. Well, things haven’t quite worked out that way. As of this posting, Windows 8 stands at only 8% adoption. Microsoft, for better or worse, has started to relent to consumer demand, reverting some of the bigger changes Windows 8 brought (ahh, the joy of booting into desktop mode).

So, where does that leave the data panels concept? I still like it. One of the main features of arranging data in rectangular panels is the ease with which they re-arrange on a page. Imagine laying out data on a page, in three columns, with each column containing panels of varying heights. Now, re-size the page so you’re down to two columns. If designed properly, the panels will seamlessly adjust so that they’re displayed in just the two columns. Some would simply classify this as responsive design, but I would say it is a design scheme that takes responsive design even further. You can see one approach to the panel layout on the AIGA website.

Streamlined Websites

Bring all of these different elements together, and what do you get? Extremely streamlined websites. Overall, websites are now focusing less on elaborate headers and graphics, and more on content and back-end code. A good website design should encourage exploration and continued reading. If a user has to work to figure out how to navigate your site, then they’re not going to stick around. One great side effect of the lessened focus on graphical design has been the increased focus on the code driving websites. Advances in web technology have been coming at a rapid pace for the last few years. HTML5, CSS3, AJAX, responsive design; all of these elements (and more) have resulted in websites that feel and act more and more like full-blown applications.

What’s It All Mean?

So, we’ve talked about what to avoid. We’ve talked about what to embrace. What now? Well, get to work redesigning your sites! Even if you don’t roll out a change in design, the experience you’ll gain working out how to redesign your site will make it all worth it. If you’re not up on responsive design, then explore what it is and how it works. Does your restaurant site’s background look like a table cloth, with spoons and forks acting as box borders? You’re not fooling anyone. Strip out the fluff. Note that I would actually like to see that design, so send it my way before you “fix” it. Last redesign your site in 2005? Might be time to head back to the drawing board.

Or…just leave everything as is. The Web is a Wild and Untamed Place. There is no right or wrong. People will do what people will do.