How to Start Learning Web Design? Pt.1

Let’s Talk Web Design.

Hao Luo
6 min readJan 17, 2014

A friend of mine recently told me she wanted to start learning web design, and wanted to see if I have any insights on where she should begin. I was lost for words as thoughts rushed through my head. “Should I tell her about responsive design concepts first? Or mobile first concepts? Do I tell her about HTML/CSS? menu patterns? CSS preprocessors? Then she should learn Grunt or Gulp. Then she would need to know Javascript…” The thought of ALL the design principles and technologies she’d had to learn just to be familiar with the current web design technology stack overwhelmed me.

Then, I took a deep breathe, and presented her with a simple Choose-Your-Adventure-esque question, “Would you like to design or code?”

I plan to write an article for each, but let’s talk about the design first.

Design

How many of us have spend hours and hours browsing through the endless roundup posts titled along the lines of “50 must-see transition effects” or “25 mind-blowing CSS Buttons”? We see a button that looks cool, and we say to ourselves, “oh I’m definitely using that for my next project”. I have nothing against these posts, but they are meant to inspire, not meant to be copied. Ultimately web design is not about the aesthetics; it’s not even about the technology. And mindlessly following either will only lead to a site full of Cargo Cult designs.

Web Design is about the user.

Trend-setters come from a place of truth, and trend-followers a place of want. And the “truth” of web design comes from the understanding of who the users are and what they do. Even if the users’ behaviors change, once we know what drives a user, we can guide their experience; thus design with confidence.

Designing for the web is intrinsically different from designing for any static medium (such as posters or a book covers). The web is dynamic, and ever changing. And our designs need to consider interaction. In that regard, web design is less like creating a magazine layout (as the only interaction a reader has with a magazine is flipping its pages), and more like design for a car’s interior.

Can you tell what those buttons do? (Source)

Most people’s reason for buying a car is not to marvel at its interior, but is to get from Point A to Point B. Similarly, most people’s reason for going to a website is not to marvel at how a web page looks, but is to access information or perform a task.

Grant users some freedom.

While web designers have the ability to control every aspect of how the user should experience the website. “Video should play as soon as the page loads.“External links should always open a new tab.” Just as how a car should not set which radio station it should play, designers should not restrict the users’ ability to choose their browsing experience. That kind of control would only leads to frustrated users (or satisfy the few while alienating the many).

Giving users the ability to choose how they can access and browse the web is more important than ever. Users could be accessing a site on their tablet, phone, desktop, TV, or through their screenreader software. Yes, granting the users that freedom means the designers need to consider things like responsive design, web accessibility, “don’t break the Back Button” principle, etc.

Consistency does not equal boring.

There is a reason why Medium uses serif fonts for its content texts and san-serif fonts for its headings. Typography conventions have been established through centuries of trail-and-error considering appearance and readability. Granted, if every website uses the same font styles, the web would look pretty boring. But for a Medium article to look and feel like a printed publication, the designers of Medium would need to make this choice.

The problem with other aspects of web design is that it changes so fast, designers don’t have the luxury of following some well-established convention. But there are a hundred and one patterns to designing a menu, for instance. Patterns are good, as with each pattern, there is a purpose for using it (otherwise it would be called an anti-pattern). Therefore, it’s up to the designer to evaluated the purpose of the pattern with the goals of the web element that they are trying to design.

Be Skeptical.

There are two truths that I hold true for the web.

  1. What’s on the web will stay on the web.
  2. What’s not on the web will probably be on the web soon.

Anyone can post anything on the web. Google indexes it, caches it. Immortality achieved. Pages with some web design advice published 10 years ago still show up on some forum or comment when someone wants to prove a point. While, new articles are written everyday on what the next big thing on the web is going to be. Many concepts won’t ever get implemented before it becomes lost in the noise. Thus any page giving advice on the next big thing, needs to be taken with a grain of salt. With the wild wild web growing at an exponential pace, now it’s even more important to focus on the “why”, rather than on the “how” or “what” of design.

Be observant. Be resourceful.

I say we stop worrying about trends and get back to the basics. We should learn web design by learning the user. Everything else comes naturally after that. Learning from the user could be as simple as watching people as they use their phones on the train. If that’s too stalker-ish, then go to web design meet-ups and discuss, or survey your co-workers, parents, and friends on how they use the web.

Be the master of your domain.

Back to the car analogy. Car manufactures probably don’t use people who don’t know anything about cars to design their vehicles. No matter how the car designer designs the interior, with paper or CAD, the designer needs to design with the car in mind. Similarly, web designers need to know about the browser. Users don’t accessing websites with Photoshop. Understanding the browser means understanding how the colors, sub-pixels, fonts, etc, will render differently in different browsers, how browsers support different features and levels of the W3C specs, how the different styles of form elements and scroll bars will complement (or conflict) with the designs. Designers need to see the browser as a tool and a canvas instead of a portal to other people’s creations.

Be a part of the community.

The days of sitting behind a computer, solo, cranking out mock-ups in Photoshop is gone. There are communities that we can and should all take part in. There are stackexchange sites dedicated to web design and UX questions. There are sub-reddits to share links, articles, and ideas with like-minded peers. There is forrst.com for sharing your work and critiquing others’. There are probably meetup groups in your area, meeting face-to-face and talking about the things designers (should) care about.

Be curious.

When I hear “I don’t care about the browser” Or “I don’t want to know CSS” from a person claiming to be a web designer, it’s like hearing a person say “I don’t care about salt” or “I don’t want to know how to chop lettuce. Oh by the way, I’m a chef”. Please understand that I don’t mean to shame anyone. I’m merely pointing out the absurdity of the statements that is already quite common in our field.

Web design is exciting because there is always something new to learn and explore, but don’t get bogged down on the design trends and the technology. I urge new web designers to look at web design less like graphic design but more like experience design (like designing a game).

--

--