Understanding web design

The web turns 25 this year but we're still not treating it as it's own medium. Web design is mostly made by people who are not web designers by using tools not made for web design.
This is a rant against superficial design.

Web is a medium of its own

15 years ago John Allsopp wrote The Dao of Web Design. He explains how when a new medium is born it borrows conventions from a previous one. Some will make sense but much of what's borrowed ends up constraining the new medium. As an example Allsopp explains how we'd first think of television as ”radio with pictures” and in the early TV shows we'd even include a useless radio-like narrator describing what the viewers could now see themselves.

Web design ≠ print design

A similar thing happening with web design borrowing conventions from print design. Many of the same principles apply but we're also carrying unnecessary baggage. Two examples:

  1. Unlike with print on the web the content and the device used to consume it are separate. Because of this the control we used to enjoy with print never existed on the web. This was already true in back in 2000s but with the explosion of mobile and responsive design this ”problem” reached new heights. Countless screen sizes and fragmented support for anything and are finally forcing designers to accept the freely flowing nature of the web. But many designers are fighting against it and still try to control the page like Allsopp phrases it.
  2. Print was made to be looked at (although a lot of poster design would also benefit from UX thinking) while web is meant to be interacted with . Many designers are thinking of the new now arising design challenges as mere aesthetic decisions and overprioritize visuals at the expense of usability.

Roles in web design

Most people working on the web are actually not web designers. They're often graphic designers, developers and teams of these two. 

Graphic designers

Today I spoke to a friend of mine who runs a Helsinki based design agency heavily focused on digital services and usability. They had gotten 40 applicants for a job as a graphic designer, but none of them had any experience with web design. It seems like design schools still got a long way to go. And where does this lead us? If all you have is a hammer, everything looks like a nail. And after years of art school many graphic designers are only concerned about how the site will look like. They'll be designing print on the web.

One of my favourite designers Mike Monteiro has a great definition of a designer:

“A Designer solves problems within a set of constraints. Those constraints often come in the form of available materials (a lack of wood, a small printing press, or bandwidth), the audience for whom the solution is intended (kids, users who aren’t very web-savvy, those who speak a variety of languages), and business requirements (style guides, vendor relationships in place, our logo is Satan).”

- Excerpt From: Mike Monteiro. “Design Is a Job.”

In my experience this kind of designers are often less interested in constraints or solving problems than in artistic self-expression. Their heritage of print design clashes hard with the needs of responsive design. They might be interested in the interactive possibilities of the web but don't understand how they should be used in a user-friendly way and just use them because they're cool. This leads to a lot of problems. Here's a real-life example: An AD sees some fancy concept like this and all of a sudden they need to have it. And now this poor developer has to make it all work in Internet Explorer 8This is a cool demo but it's not meant for production.

This is what how it works in IE8 by the way:

Error on page. No shit?

Error on page. No shit?

It won't work IE9 either. Better make an extra pot of coffee.

Click the image for a GIF of how bad it really is.

Click the image for a GIF of how bad it really is.

And making it work in IE8 and IE9 is not enough. I tried this with a few Androids and none of them worked. I made a video you can see here. And there's 19,000 different Androids before we get to Windows Phone and others. Even with modern browsers many users won't have enough power to make the animation smooth.

You could use this as progressive enhancement, but how long would it take? Could this time be better spent creating a site that would actually benefit the client? This isn't creative problem solving, this is creative problem creation. Spend that same money on a copywriter and you'll see a lot better results. 
By the way, did you read any part of the article or did you just play around with the animation?

In addition to browser support issues, another problem is that this type of designers are designing like their users are in an art exhibition yearning to spend countless hours examining their masterpieces and learning how to use them. But in reality they're already gone because the site didn't load in 3 seconds. The users are drunk.

Paul Boags writes about the issue of superficial design in his article The Dribbblisation of Design

”many designers are designing to impress their peers rather than address real business problems”
”work that doesn’t address real business goals, solve real problems people have every day, or take a full business ecosystem into consideration”
”people calling themselves product/UX designers are actually practicing digital art. They are Artists. They are Stylists. Executing beautiful looking things, certainly an important skill, but not practising product design.”

Here's two very simple examples about day-to-day Web/UX thinking (warning, this won't be sexy):

1. Hamburger menus
I attended the Event Apart: San Francisco last fall and had the pleasure of seeing Luke Wroblewski's presentation. One very current topic was the user experience of so called hamburger menus. These come preloaded with pretty much every WordPress-theme and front-end template. But do users understand them? Here's the data from the A/B test in a nutshell: If you put a border around the hamburger menu making it look more like a button, 22.4% more people click them. And if you simply replace the hamburger menu with the word ”Menu”, 20% more unique visitors click it compared to the hamburger icon.

9 out of 10 user had no idea what those were.

- Damir Danny on Twitter

2. Carousels
What about carousels? They're everywhere but how users respond to them? The designer should know or they're just taking a stab in the dark right? To understand whether to use one or not you should read thisthis, these, probably have this as your conclusion but then read this and think again for image/product galleries. The question is did the designer who decided your homepage should have one know any of this? 

Is a graphic designer up for this?

The point with the examples is that in most web projects all these would be considered aesthetic decisions and made by a graphic designer in the Adobe software of their choice. But they're not. They're decisions for designers who have studied how they actually affect your users.

Web design is a combination of business strategy, user psychology, marketing, copywriting, design patterns, search engine optimization, programming, branding, graphic design, conversion optimization, open source, clients thinking they know what they need but don't, web standards, dynamic content much different than in the beautiful .psd-mockups, user experience design, slow connections, social media shares etc. A graphic designer without a deep understanding of these topics should't be made responsible for them and usually shouldn't be the first piece of the design process.

The most important product design work is usually the ugliest

- Paul Boags in The Dribbblisation of Design

Design by developers

When graphic designers tend to see web designs by how the site will look like developers are sometimes only considering how they should code it. 

UI's designed by developers can look horrible, might be clanky and somewhat unintuitive but most of the time they'll still work. For a fun example read the comments for this post to Reddit's  r/crappydesign. (it also makes you understand designing for a target audience). We have lot's of engineer driven design in Finland. And no design is as bad or worse than superficial design. I spoke with a designer from Nordkapp in an Interaction 15 meetup last week and he complained about the amount of totally unusable engineer driven design he sees in Finnish early-stage startups looking for funding. They don't understand that they cannot compete with silicon valley with a product that doesn't have a stylesheet.

Web design teams

Problems described above lead to web design projects resembling making a movie without a director. Often on one end you've got the graphic designer who doesn't understand the technical constraints and often not UX. And on the other end you've got the developer who doesn't understand graphic design nor UX. Not only they'll have problems communicating because of the lack of a middle ground, but there's also no one responsible for achieving business goals through great user experience. You'll have a website for the sake of having a website but not one that really tackles your issues and communicates the right thing for your target audience. The issue is often exacerbated by the two parties not collaborating in the same room but the designer just emailing a .psd to the developer. After a few rounds of corrections to the letter-spacing and leading the result is a beautiful yet unusable website and both participants complaining to their friends about how ”the graphic designer just don't get it” or ”the coder just doesn't get it”. 

Depending on the developer they might have lots of insight into UX and user psychology but they're often disregarded by designers as mere coders that will just implement their grand vision when really they should be equal parters in the design process. Brad Frost writes about the problem in Development Is Design:

”A lot of brands, agencies, and organizations have their “creatives” (they call them that) in one department and “IT partners” (they call them that) in another department. Sometimes the developers are on another floor. Sometimes they’re in another building. Sometimes they’re in another city. Sometimes they’re in India.”
”...thinking that front-end development is something completely detached from the design process. That you can design everything in isolation then just throw things over the fence to get built.”
”HTML and CSS development is design. The most frustrating projects I’ve ever worked on were with people that didn’t understand why front-end development needed to involved in the design process.”

- Brad Frost on Development Is Design

For great design to happen we must collaborate intensively and respect all the aspects of the design. And we must always have someone (be it the designer, developer or a designated UX designer) responsible for reaching the goals of the project through great design. 

Desktop Created with Sketch. User Experience Aesthetics Technical considerations

If we neglect the other aspects of the design we'll have lots of room to live out our design fantasies. But as we add together the needs of each part we'll have a lot less creative freedom and some people seem to think that's boring. They want to ”think outside the box”. For me the thing that really makes design interesting is the constraints.

Problems described above and variations of these issues is by far the most common problem I see with any web design projects. I see this every day. It leads to crappy design, disappointed clients and designers and developers considering a career change. 

To be continued

In the lead I said web is often designed by people who are not web designers by using tools not meant for web design. Here I've written about the people. In part two I'll be writing about the tools. Like you might have guessed they're also carrying some baggage from the era of print design.

Wanna get in touch?
Say hi at contact@voxpopagency.com or give me a call at +358 503061446.