Sideproject

Building things on the internet

What changed in web design this year (and what’s next)

Design is still about words

This has really always been true, the change here is how much web designers are embracing this fact in the approach to building websites. Jeffery Zeldman's recommendation to design websites "content-first" makes a very clear statement:

Design without content is decoration. It used to be that you worked on look and feel before you thought about content. But it’s actually very hard to do design without content.

More notes on content-first.

37 signals makes this point well by comparing designs with and without text. It doesn't take an expert to tell you that the design of your site needs to follow the content and not the other way around:

Justin Jackson's "Words" post does as good a job as anyone at explaining this. His sentiment that technology decisions should not trump the words on the page, written in plain old HTML without any styling is as important of an understanding as you can have while trying to get your message across to your audience:

At its heart, web design should be about words. Words don't come after the design is done. Words are the beginning, the core, the focus.

Responsive design grows up

Breakpoints should be based on the design and its content, not the width of an iPhone. So you can't assume too much based on screen size, there are literally hundreds of them. The early stages of responsive relied far too heavily on screen sizes and failed to recognize other contexts. The popular Samsung Galaxy S4 is as wide as a traditional desktop screen in landscape mode. This year, responsive design evolved into something more future proof and context-aware.

Practicing responsive responsibly

Responsive design has a boatload of positives and opens the door to content parity across multiple devices. One of the difficult parts about it is when you're serving the same code base up to both a 27-inch Thunderbolt display on a broadband connection and to a 3-inch screen on with a 3G connection on two bars. You have to understand the two different contexts and make sure you are doing your users some favors based on what kind of content you are loading for each experience. This term is really perfect, there's even a book for the Book Apart series coming in 2014.

We can never guess who our next visitor will be or what their context, device or accessibility requirements will be. It’s impossible. We can, however, be ready for and responsive to them. By not anticipating for the device and by embracing and preparing for the unknown, we can provide true, honest responsive products that autonomously provide a “best fit” experience to the end user. —Jordan Moore, "Responsible Considerations For Responsive Web Design"

Communicate effectively

“Innovative products aren’t imagined ahead of time — they’re stumbled upon while experimenting on-the-go.” — Josh Miller, creator of Branch

In my experience, designing and building out a site as a one-man team is a really streamlined, efficient way to do things. The reason for this is because there are no communication gaps. The intent of the designer does not need to be translated to another person, the design is already understood and areas of the design are thoughtfully considered for how they will be built out ahead of time. The reason this isn't commonplace is you're really counting on all of the strengths of a one-man (or woman) wrecking crew to drive the site from design to build, which is a pretty intense job and requires a skill set in multiple disciplines. It's more efficient to do this with a team, but you have to get the communication part right.

Designing in code

The biggest advantage of designing sites in the browser is that it simplifies a two-step process into one. Rather than creating and refining every component on a page in a graphic design tool like Photoshop or Fireworks and then translating those styles into CSS, there's a big productivity leap to be had when you go straight into code. There are plenty of challenges with it, the most pressing being the starting point. It's much easier to play with layouts and shapes in a graphic design tool, but once you have any kind of starting point, it's beneficial to finesse and refine the design in CSS rather than go through the Photoshop dance and doubling the effort.

Photoshop is a graphic design tool, not specifically a web design tool

Smashing Magazine published some great insights on how Photoshop is being repurposed:

A Photoshop comp is a visual representation of what a website or app could be, but not a functional one. This becomes problematic in the scope of effort required, with a comp being produced and then reproduced through Web technology (HTML, CSS and JavaScript). Additionally, the detail of the production is quite considerable — static comps are typically pixel-perfect and fully fleshed out, and front-end development carries the same goal.

In-browser tools:

This has opened up a need for thinking in CSS but still having the drag-and-drop interface that graphic design tools provides. Here are a few of the best options:

FROONT

  • FROONT - Drag-and-drop interface and allows you to oversee how your design is shaping up across all devices
  • Jetstrap - Specifically for Bootstrap 3 (I'll touch on how this framework changed web design this year), this tool gives you an in-browser interface with all of the Bootstrap components to shape your design on the fly and walk away with production-ready code.
  • Divshot - Includes component libraries for multiple front-end frameworks and built-in collaboration tools.
  • Webflow - Robust design app with lots of pre-made templates and an easy visualization of breakpoints for responsive (Edit: Added after recommendations from readers).

And as well-thought out as some of these tools are, our team workflow consists of a UI designer and a front-end developer (among other disciplines), fleshing out all of these details by talking to each other about what works best and collaborating towards the best possible solution when going from design to code.

Design systems, not one-off page templates

Since the web is fluid, responsive design led to a shift in the mentality of how design teams approach their projects. In the past, creating fixed width comps and translating them to interactive pages made a lot more sense. Now, since sites need to accommodate the user at multiple screen sizes, new design artifacts are being used to get the message across. Dave Rupert wrote up a great list of what consistutes a deliverable in the responsive age, here a few site elements you can show in action:

  • Flexible grid
  • Typography
  • Navigation
  • Accessible form controls
  • Carousels
  • Tabbed navigation
  • Responsive tables
  • Accordions
  • Media lists
  • Dropdowns
  • Pagination
  • Data tables
  • Buttons
  • Icons

Front-end frameworks got really popular

Front-end frameworks have existed for years, but this year, the advancements of Bootstrap 3, Zurb Foundation 5, Pure and the dozens of popular frameworks out there have resulted in an adoption rate that is exploding. Bootstrap alone has 60,000+ stars on Github, over 20,000 forks and over a million downloads from their CDN. The reason for this is there's a need for getting a project off the ground with a well-thought out design system. It allows for you to either get your feet wet with a tested system or fork the project into your own creation.

Fat, one of the creators of Bootstrap wrote a post about what he learned building it on Medium, Twitter's blogging platform. He acknowledges the need for it, how it reaffirmed his love of helping people:

As a technical challenge, Bootstrap just isn’t very interesting. It’s trying to provide a collection of components — components like modals, tooltips, and grids that have been around the Web forever — to people who don’t spend a lot of time writing frontend code.

While these tools are widely used, Fat makes an excellent point that what's here isn't really anything new. It provided a new level of accessibility to web builders who might have otherwise not had a starting point. So it's good to keep in mind that learning a front-end framework well is an investment of your time. Treehouse even put up a series on learning front-end frameworks, the best solutions will always have custom aspects to them.

And what's next...

Transitional interfaces

Expect to see a whole lot more of subtle interactions on individual elements, Pasquale D’Silva at Elepath explains:

Folks keep throwing around the word “delight” when referring to animation and cute interactions. Cool and great for those guys. Guess what though? Animation can be used functionally too. It's not just an embellished detail.

Expect to see a lot more CSS3 animations and sweating over small details for functionality's sake.

Designers coding more

Have you ever heard of the Unicorn Institute? When Jared Spool first brought it up during a prototyping session I was at, everyone laughed like he had just made up a place everyone wish existed. But he wasn’t joking. It’s a vocational school trying to fill in the gaps that are typically learned on the fly in user experience careers. While, its still not required for a UI designer to build out their own designs, the skill of communicating interactions in terms of code (i.e. CSS, jQuery) is essential to smooth hand-offs and designing with constraints.

New devices and contexts challenge responsive and adaptive design even more

Image courtesy of AppAdvice.com

From wearable tech to wearable TVs here's a list of a few devices being released next year that will continue to serve up design challenges to conquer:

  • Apple iWatch, Apple's smartwatch with OLED display
  • Google Glass, the explorer edition wraps up and will be released to the masses later this year
  • LG G Flex, a mobile phone with a flexible screen

Happy 2014!

Get periodic updates from Sideproject.io and news on my upcoming book on modern web design, Design and Conquer. Plus, an early access discount when it launches. No spam ever, I promise.

* indicates required