On the Cusp: Where Web Design/UI is Headed

by Dan DeMeyere - @dandemeyere

Front-End development has seen some very interesting trends lately. Designers are pushing the boundaries of the experience a website can deliver with the look and feel. Better yet, the best are being done without Flash and utilizing CSS3 (and soon HTML5) - which translates into cross browser/device compatibility. For some specificity, here is what I am seeing:

Emotional Graphical Design

White/negative space has been a very useful tool for designers to avoid clutter and gaudy colors/graphics. It was also easier for developers to create considering in the past Front-End engineers would work with designers to create the user-facing portion of a website. This is where I think there is a dynamic shift occurring that is leading to an emotional push in design. I'm seeing a lot more graphic designers who are capable of using CSS/HTML/jQuery to create a website that is pixel perfect to the design they created. Why I think this is important is because what appears in Photoshop and what shows up inside a browser are different in appearance and how you experience them. The scrolling, re-sizing of the browser window and other subtle things like hover and active states for buttons can be lost in translation between mock-up and implementation. Some developers don't have an eye for this level of detail so if it wasn't in the mock-up, improvisation probably occurs and rest assured the developer will be choosing the path of least resistance for completion, which typically means the design suffers. All the examples I have listed below contain a certain personal feel to them (cozy colors, custom font, etc.) and a lot of the design is made possible through text-shadows, jQuery DOM manipulation, and other enhancements such as custom font APIs. Have a look for yourself:

  • Example 1 - Personal portfolio of designer/developer
  • Example 2 - Custom search field and layered design
  • Example 3 - Embossed effect (most likely created with CSS text/box shadow)

Designing Software-like User Interfaces

UI design is progressing to a uniform experience across all platforms. It's not uncommon to see a website's UI in a browser that would be identical on an iPhone as its own app or an Adobe AIR desktop app.

  • Example 1 - try to tell me if this snapshot was taken from a website, a mobile app, or software app?

Consistent user experience is essential for brand recognition and ubiquitous usability. Allowing users to be proficient in navigating and using the functionality of your website on any device is very important so I wouldn't be surprised if start-ups begin designing their website, iPhone/iPad, and other device apps right from beginning.

Homepage Design

Recent developments in A/B testing have resulted in a higher statistical knowledge of important metrics about your website (heat maps, click-throughs, conversion rates) and in result companies are serving up multiple versions of the homepage and letting the numbers decide the best layout, color combination, and copy. The trend I'm seeing is a consistent formula - main content area below the header that stretches the entire width of the layout, then equal size blocks (less tall) below that contain important sub-components of a website to learn more about the product. Call to action on top with 1 sentence pitch, then supporting items below. The navigation bars are being hidden or reduced to appeal as a more simple site to avoid overwhelming the user. Essentially, homepages are becoming marketing landing pages. Even our new homepage uses this layout to some extent.

  • Example 1 - A visual representation of what I'm talking about.

Finally, another interesting link I wanted to share. This trend is in its infancy, but I believe the next iteration we'll see is designers/developers creating new ways of displays form data. Horizontal signup forms, smarter validation with jQuery, and other usability enhancements.

Snapshots courtesy of forrst.com

Front-End Developer and Ruby on Rails Newbie