How to be a web designer

In 2016 (or any time)

This is a long essay about how to get started in web design. TL;DR: Be humble and curious; learn voraciously; learn design; learn interfaces; learn code. In that order. If you’re not interested in theory, feel free to skip to the resources section.

For almost two years, I worked with an in-house team of smart, talented designers and marketers.

The quality and quantity of work these folks put out is impressive. In a high-pressure, high-production environment, they managed to knock design assets and concepts out of the park consistently, quarter after quarter.

But the marketing campaigns and associated designs all had one thing in common: Print. Catalog, signage, packaging, etc. Capital-P Print. Assets transferred to dead trees and delivered by real, human people.

In my time there, no fewer than four different designers and marketers asked me the same question:

How do I get into web design?

It was obvious to some of them that being an employable graphic designer (whatever that term means anymore) now entails learning something—anything—about how to design for screens, and especially, the web. Learning to design for interaction in addition to delivering the all-important message.

Learning (gulp) to…code.

I did my best to guide these honest, hard-working individuals to good resources for beginners. Resources that I, myself, have used.

But that’s a very difficult, broad question to answer a five-minute conversation in the break room.

Code and web design have grown more complicated in the last few years, and approaching the process can feel like climbing a giant, intimidating mountain. One that changes constantly. Where does one start? And, really, where does this profession fit into a marketplace that has Squarespace and WordPress and folks who only use Instagram to market their work?

I hope this post helps answer those questions for print professionals—or, really, anybody looking to get started in this crazy, dynamic space.

I’m not going to tell you what technologies, programming languages, or techniques to focus on, for the most part. This is, in broad strokes, what one must be/have/do to get going, and maybe some helpful resources for beginners.

The Industry

First things first: nowadays, web design as a profession is becoming a myth. “Web design” has become so broad a title that it’s nearly impossible to define. The folks who simply design (and build) static websites are becoming fewer and further between.

Are you familiar with Squarespace? WordPress? Wix? Instagram? 

Tools have emerged that empower regular folks to create their own websites, publish their own content, often for cheap or free. Regular people can put portfolios online, write in their own blogs, publish photography, and communicate, and the only intermediary they need is their platform of choice. They never have to touch a line of HTML, if they don’t wanna.

They don’t need web designers. Web designers are expensive.

This is a beautiful thing, I think. The power of the web is that everybody’s here, right now, talking about the things they love, even if the platform they use to do so is built and owned by somebody else. Squarespace may have cost many a web designer their job, but they’ve enabled non-web people to create so many more.

Actually, I shouldn’t say it’s becoming a myth. It’s just changing, dramatically. It’s splintered into hundreds of sub-specialties, and will continue to do so as technology evolves. So you can say ‘I am a web designer,’ but that term can raise more questions than it answers.

My wife (a fellow ‘web designer’—her words inspired this section) believes it’s more accurate to call it ‘experience design,’ since we no longer design and build static websites—not often, anyway. With things like animation and applications and marketing and messaging all feeding into this profession, making static web pages no longer suffices.

I agree, but I wouldn’t put a name on it just yet. ‘Experience design’ harkens back to the dark old days of Flash ‘experiences’, and I’m not sure that’s where the industry is headed.

On the other hand, the web is creeping into even small corners of our lives, and impacting every experience we have, even if we don’t realize it. Businesses no longer need sites, they need brand experiences, so maybe I’m wrong.

For that matter, user experience accurately describes the design work we do in this world, although not all of us are necessarily good UX designers.

Or, maybe we’re both right. Who knows!

Anyway—‘web design’ is a convenient catch-all title, and you’ll see it used throughout this article, but you can’t really be too concerned with titles in this industry anyway. Your role changes so often in this field that titles don’t really matter.

Web design is dead. Long live web design!

Prerequisites

While there’s no particular type of person who’s at an advantage when it comes to breaking into web design and development, I think there are certain personality attributes (or, at least, habits) that help one successfully get started.

Incidentally, I think these things help in any profession (especially in design), but they’re things I’ve tried to harness in my own career, and they might help others, as well.

Be curious.

Curiosity is essential. This profession is changing constantly. Every single day, new tools and workflows and technologies are released. Every day (I’m not exaggerating), some talented team or individual announces some new something that’s built to make our lives as web developers and designers easier; there’s some new toy to play with; there’s some new ‘best’ practice to study, and maybe even implement. There’s always a new open source tool or framework.

How can you keep up?

Well…you can’t. Honestly. Don’t try to keep up with it. There is a veritable firehose of information and opinion about the web spraying, uncontrolled, at any given moment. You can’t keep up—and I’d even argue that you shouldn’t, since the new ideas being flung every which way are often untested and flat-out wrong. 

Instead, be curious. Be open to new ideas. New best practices. New ways of working. Everybody has a new opinion or tool, but as the dust settles, better ways of working emerge, and by being curious, you’ll be prepared to learn them.

I have a dirty, dirty secret about this industry:

We’re all making this up as we go along.

We’re still figuring this thing out. The web is difficult, and the way we access it is always changing. Desktop, phone, watch, tablet, virtual freaking reality. (Take a second to think about that. We’re collectively going to have to address 3-D interfaces for our web-based information in the next decade or so—it’s already started—and sometimes it feels like we’ve only just figured out 2-D. Yikes.) For every solved problem, ten more pop up that also need solving.

The web is a Hydra of real tough problems.

So, for now, it’s impossible to keep up. Instead, be curious, learn broadly and openly, and don’t reject new and unfamiliar ideas about the medium.

Which brings us to the second prereq:

Learn how to learn.

This sounds, maybe, a little odd; don’t we all naturally know how to learn?

Well…no, not really. There are effective ways of learning and there are ineffective ones.

Big Think has a smart article and an e-course about learning. Wes Bos wrote an informative post about speed learning.

Apply those techniques in your life, or don’t; the point is, never stop learning. Learn, broadly and voraciously. Always be a beginner. In an industry that never stops moving forward, it’s essential to commit to being a student of those smarter, more talented, and more experienced people than ourselves.

There is no shortage of really high quality educational information out there (found, most often, outside the bounds of traditional educational institutions). You just have to commit to learning.

Along those lines: never be afraid to throw away what you’ve already learned. Be okay with being wrong basically all the time. The industry, again, is always changing. Something that is valid practice now might be considered invalid in a few years’ time. So be okay with throwing away former best practices and moving on. You have to.

If you are an open, avid learner, this profession goes from being overwhelming and scary to being thrilling.

The feeling is eloquently summed up in a Tweet by Rach Smith (she works for CodePen-–you’ll learn what that is in time, young Padawan):

https://twitter.com/rachsmithtweets/status/722202247367512064

Be patient.

You’re going to screw up. A lot. The first bit of code you write will likely be terrible.

But hey, that’s okay. Steve Wozniak started somewhere. We all did. You have to, too.

Computer language is weird and hard.

Think of it this way: when you want to pet your cat, you just…do it. You don’t think about it.

But telling a computer to do that task requires unimaginable amounts of work. You have to tell it where the cat is, how quickly to move its appendage to that position, at what angle to approach the animal, how hard to pet it (we don’t want to kill Whiskers, just give it a nice little robo-pet), etc. etc. etc. And that doesn’t even get into the crazy computer learning stuff out there that can teach a computer what a cat even is.

Point is, we do stuff automatically, but you have to tell a computer (in something resembling its own language) every single little tiny step to get to a goal. And that’s tough.

(Aside: Computers are learning to identify objects and people, without previous input or meta-information. They’re not quite to the point where they understand the concept of themselves, but hey, maybe one day.)

Cosmo Kramer having his mind blown
Computers are learning how to identify objects. Computers are learning.

Before you can work at teaching a computer how to identify a cat, you have to make and break a whole bunch of stuff.

You’ll find that, in general (and especially in the web industry), the internet is full of nice and talented folks who are genuinely excited to share their knowledge with you. Ask questions, check forums, look at Github issues, scour StackOverflow—and share your knowledge, too. Don’t be afraid to ask, if you’re up against a problem you can’t quiet solve, even if it seems ‘dumb’ or trivial or whatever.

Don’t ever say “I should be able to figure this out”—because no, you shouldn’t. Your brain is not a computer and it doesn’t think like one. 

You shouldn’t be able to figure out, but you’re going to anyway, because you’re smart, and you’re patient enough to keep working till you’ve solved the puzzle.

It’s hard work. But it is so much fun. Stick with it, patiently and even doggedly; it’s rewarding to learn.

Know a bit about the history of computers, the internet, and the web.

No, the web is not the internet. Yes, the distinction is more than semantics.

Context is important. Where did the web come from? Why was it invented? How long has it been around? How does it even work?

In learning the answers to questions like these, you’ll understand a bit better why things are the way they are now, and you might even feel a bit less frustrated when things change (again). Learning about the medium itself is important, and can help you anticipate change (even big change!) and prepare yourself for the next thing.

Moving on.

If you’ve read this far, it’s possible you’re all revved up to learn new things. Cool! Now what?

Start your (learning) engines

The following suggestions are broad, and you could spend an entire lifetime diving into each one by itself. They can also be subdivided into a bunch of different categories, and you can specialize in any sub-sub-sub-category you’d like.

But I’ve found that at least a general knowledge of each of these things can make us all better, more empathetic designers/coders/what-have-you. When you understand some principles and basics, your work can help make the web a better, friendlier, more diverse place.

Learn about design

If you’re coming at this profession from a different background (like marketing, or something else entirely), it’s essential that you learn (at least) some design basics.

Design is tough. It is not decoration. It requires deep, intentional, considerate thought about your audience and your message. It is about communication, with human beings (usually), and it impacts every part of our modern and hectic lives. Equally, design is about solving problems — again: considerately, thoughtfully.

Everything is design. Everything!
– Paul Rand

Did you know there was a time when drinking straws, as we know them, didn’t exist? Belieb it. I just learned that nugget this week. When it was patented, we called it an ‘invention’; now, we’d call it a ‘design solution’ brought about by ‘design thinking’.

You don’t need a degree in design to learn design (unless that’s your thing). In fact, chances are, you’ve already applied design to your life in some way, and you definitely use designed things every moment of every day.

The principles of design can guide decisions you’re going to have to be making, all the way down to seemingly trivial decisions, like which color your links should be. (Which, for the record, is not a trivial decision at all.)

Speaking of which…

Learn about interfaces and usability

If you’re coming from a print background, it is essential that you learn to think critically about interface design and usability.

Because the web, unlike almost anything printed, is meant to be used. 

What’s more, it’s used on myriad devices. And each of those devices potentially has a different interaction paradigm (e.g. mouse vs. touch vs. voice vs. whatever comes next).

Being as the web is used, you have users, and they are your primary consideration when making design decisions. ABTAU—Always Be Thinking About The User. (I am bad at memorable acronyms.) When designing, be considerate of their time, attention, context, needs, and capabilities.

In that vein, it’s also important to learn about the limitations and advantages of designing for a screen (as opposed to, say, a brochure). The way screens convey information is significantly different from other means of communication. Learn the constraints and the advantages, and your users will thank you.

HTML was invented as a language that describes a document, so some print design paradigms work here (e.g. good typography, grid systems, design systems, etc.). But HTML, in combination with the other two pillars of web programming (CSS and JavaScript) can be quite a bit more than a static document.

When something is meant to be used as opposed to read, the rules change. So learn them.

Is this really that important?

Yes. A thousand times, yes. I’ve worked with print designers on web projects in the past. They are talented, intelligent people who are passionate about their work—but often, when they design something for the web, it looks like it might as well be a PDF slapped onto a real website. Tiny text, wee buttons, invisible hyperlinks, difficult navigation, little consideration to accessibility. Etc. (If you learn about interfaces, you’ll know why all those things are no bueno.)

If that’s what you’re going for, then that’s fine, I won’t stop you. But it’s almost certainly not what you’re going for.

The web (and interfaces in general) have totally unique, brand-new (historically speaking) affordances that give us designers powers to influence lives and make our users’ tasks easier to accomplish, even if only a little. Learn them!

Learn some animation basics

You read that right: animation. While the printed page is (usually) static, designing for screens opens up an entirely new world of potential for you.

You as a designer have a responsibility to the user to make your interfaces clear, easy to use, and even fun. Animation can go a long way toward that end.

A fun, bouncing cube
With animation, even seemingly boring objects or interfaces can have personality

Like any other tool in your arsenal, animation can be used for good, or for evil. Learn some principles and use them wisely, taking your users’ limitations into consideration when implementing them. (Did you know some people suffer from vestibular disorders? I didn’t. But misuse of animation can really throw those folks for a loop. So know what you’re getting yourself into before making everything move and wobble. The web is used by everyone.)

Animation on the web is young, but it is becoming another one of those specialized disciplines, one you can learn as much or as little about as you’d like.

Learn (oh dear, here it comes…) to code

Oh man, what are we right-brainers going to do? Code is math, right? I hate math. I hate it!

No, it ain’t. I felt this way—resistant, hesitant—about learning code for quite a long time, too, until I came to a realization:

Code is language.

In fact, it’s arguable that the language code most closely resembles is poetry. Despite what our culture tells us, you don’t need to be a genius to know how to code well.

Nick Burns, a Saturday Night Live character, saying
Code isn’t just for the Nick Burnses of the world

Code, like poetry and jazz and abstract expressionism, is often opaque and difficult to understand. But, unlike those other things, code is eating the world, so it makes sense that we should at least have a high-level understanding of what it is and what it does.

I’d even argue (in a different essay) that design is code. Code is design. It’s all the same, it’s all connected, and to succeed, we must understand how to manipulate it.

Code is hard. Like, super hard. But not as hard as you’d think. You could probably learn to write it, if you set your mind to it. Really! I’m not just saying that.

Paul Ford wrote a small book for Bloomberg Business Week entitled What Is Code?, and it’s a great place to start. It’s entertaining, informative, and gives you exactly the sort of high-level understanding of the topic that I think everybody working in this field should have—be you manager, designer, whomever. Take an afternoon or two and read it through.

This, like all the other subheadings here, is its own field of study. You can dive as deep or as shallow as you’d like, and you can specialize in one sub-sub-sub-category if you want. But, at the very least, learn what the heck code is.

Don’t be afraid of it. When you learn to talk to the computers you use, and tell them what to do, you’ve empowered yourself to make…well, anything.

Learn the basics of the Web

Along those lines, you must learn the basic building blocks of the web. I think everybody who designs and builds web software, even if you’re in a design or management role, should know at least some basic HTML and CSS.

HTML is the basic building block of most of the information we interact with on a daily basis. It is beautiful. It is simple, standardized, portable, extensible, flexible, and works absolutely everywhere.

When you consider that more people have access to the internet than to clean drinking water, you understand how important this language is. The first thing people see, on a very slow connection, is usually your HTML document. It is a fundamental piece of the web and a powerful, powerful tool.

Fortunately, it’s also very quick to pick up. (The best tools are the simplest.)

CSS is another essential tool in the competent web worker’s toolbelt. CSS is the language we use to tell browsers (like Chrome, Firefox, and Internet Explorer/Edge) what we want our HTML documents to look like.

Text size, rhythm, scale, positioning—even real, honest-to-goodness layout—are all controlled in your CSS.

CSS is its own field of study, but at least learning some basics—e.g. what can we do with CSS? What are our browsers capable of displaying? How can we make this design adapt from a phone’s screen to a laptop’s?—will more deeply inform your design decisions and, even, how you put together your design assets.

If you’re working with a developer and you know some CSS, it’ll make their life so much easier, your projects will go more smoothly, and little songbirds will help you get dressed each morning.

JavaScript is a ‘real’ programming language and requires more time and study to learn. Whereas HTML is considered ‘markup’ and CSS is considered ‘style’, JavaScript controls behavior.

For instance, when you log into Facebook and scroll through your news feed, what language is being used to tell your computer to pull new content out of the ether and drop it in front of you, so you never have to click or poke another “next page” link in your darn life? JavaScript, that’s what. It’s everywhere, and it is very useful to know.

(Side note: some segments of the industry are moving toward JavaScript-driven everything—as in, using JavaScript to generate our HTML and CSS. Others consider this heresy. You can learn the basics and decide for yourself, but in the meantime, it’s most useful to think of JavaScript in this way—that is, the programming language we use to manipulate behavior in the browser.)

While I’m not as dogmatic about people learning JavaScript, I do think a bit of programming knowledge is good to have, and JavaScript is a good place to start. It’s ubiquitous, you can use your JS skills basically anywhere, and there is an (over)abundance of information about it available to you.

Programming helps you understand how computers think, and empowers you to build anything you stinkin’ wanna. So learn it, at least a little—it’s not as bad as you might think, and lemme tell ya, when you build your first thing or solve your first problem, the feeling of accomplishment is incomparable. (And a little addictive.)

JavaScript (and programming in general) is hard, but I know you can learn. I believe in you. It’s just a tool in your tool belt. It ain’t the boss of you.

What’s a server? What’s a client? How does information get passed around on the internet? What’s a URL?

All important, basic questions whose answers are worth understanding, at least on a fundamental level. Learning how this stuff is architected means that, when problems arise (and they absolutely, positively will), you’re more adequately able to debug them, fix them, and move on.

Moreover, understanding how it all works together (again, generally speaking—you don’t have to be a network engineer) means you can more effectively utilize the tools available to you. Learning how computers talk to one another at least to some degree means you can use tools that facilitate that communication, making your life as a designer/developer so much easier.

The more you know, the less scary all this stuff is.

How deep into this dev thing do you want to dive?

After you’ve focused on the basics and principles above, if you write code on a regular basis, learn version control. The VCS (Version Control System) that many folks use these days is called git, but there are lots of different VCSes that, conceptually speaking, do the same thing.

Version control allows you to keep an exact record of changes to your work. To illustrate: you know how when you’re working on a design project, over time your project’s folder looks like this?

project_v1.psd project_v2.psd FINAL.psd FINAL_v2.psd FINAL_imtearingmyhairout.psd

Version control takes care of that problem, except it’s for text. (That said, there is version control software for PSDs.) You never have to rename a file if you want to try a crazy idea or you have to scrap the old design for some reason—you just take a snapshot of it, branch it (which preserves the original but allows you to work on your crazy idea), and you can always go back to any point in time where your code worked (because, again, you’re gonna break it a lot).

Think of it as a timeline that the computer writes about your code. Each point on the timeline (that is, each commit) represents any changes you’ve made in the history of the project, so that you can go back in time to any past point and change, reuse, modify, undo, or delete stuff.

It’s like having Command + Z superpowers.

Even more powerfully, it allows you to collaborate with other people. For instance, using SVN (another flavor of version control), you can download WordPress—and every change ever made to it in its entire, ten-year history. You can even see the reasoning behind the changes, if you look at the messages in the commits (AKA snapshots, or points on the timeline).

Potentially, you could use that same bit of software to add your own commit to the WordPress timeline, preserved in history, forever and ever amen.

That’s pretty incredible.

So learn version control. If you want specifics, learn git, but it’s more important to learn the general concepts and vocabulary.

Fair warning: git comes with a super steep learning curve, but there are tools that make it easier, and many resources that’ll put it in plain English. The concepts therein, though, are powerful, and will free you up to experiment with your work fearlessly.

Optional: learn a little bit (or a lot, you brave soul) about computer science

You don’t need a computer science degree to learn to write code effectively. (I hope I’m not offending any computer scientists in saying that.)

But if you want to dive into programming…

Many of the paradigms we use in modern web design and development are built on ideas and standards from computer science that are many decades old. But a few high-level ideas and explanations can take you such a long way toward making you a more competent, interested develosigner (devsigner? designoper? I don’t know, sheesh).

Udacity has a free course called Intro to Computer Science. It teaches some programming and CS basics. You can finish it in three months, or more, or less, working very part-time. Up to you. It made me a better, more confident developer. It might help you, too.

What framework should I learn? What build tools? What workflow? What’s React? What’s Grunt? Gulp? Broccoli? Help!

Here’s the deal: none of that matters. 

I mean, yes, of course it matters—but focus on the basics, if you’re just starting out. Get competent at HTML and CSS first, then some basic JavaScript. Try to understand interfaces. Try to understand users. If you’re too busy figuring out how to get Webpack to hotswap your React components to actually learn the basics, you’re going to get overwhelmed, frustrated, and honestly just waste a lot of time. (Yes, by the way, those are all actual names for actual tools and projects. Even Broccoli. Web people are a creative bunch.)

There are so, so many exceptional tools and processes dreamed up by so many geniuses. It’s disgusting. We are a profession awash with beautiful, mind-boggling, functional artwork in the form of Github repositories. There are Michaelangelos alive today whose primary mode of expression is stunning, elegant code.

But learning all that business is pointless for the person just starting out.

Because here’s the other deal:

On the web, those tools change, disappear, and reappear frequently. Standards emerge eventually, but if you spend all your time investing yourself in a tool or workflow without understanding what you’re doing, you might be shooting yourself in the foot.

Of course, look up to our modern Michaelangelos, steal their ideas, and learn from them.

But stick to the fundamentals and the rest will follow.

Finally: just friggin’ start.

In other words: just build websites.

All those words above don’t mean anything if you don’t build stuff. In fact, I’d say the best way to learn this is to ignore all of the above and just start.

Give yourself a project, even if it’s a dumb one. Make a website about your cat (death by robot, poor thing, RIP), build it in a plain ole text editor, upload it to a crappy hosting service. It doesn’t matter. If you give yourself a project, you’ll learn more, faster.

This is a medium that richly rewards diving in and messing with stuff.

Become familiar with the View Source shortcut in your browser of choice. Copy the code from your favorite website just to figure out how it works. Download it, change it, fiddle with it.

The basic question that always comes up when looking at an interesting project on the web is: how did they do that? View Source. Open your web inspector. Figure it out.

And when you’ve figured it out, share your solutions! Answer on StackOverflow. Be a pal and help others just starting out. You can always teach what you know to somebody.

When you’ve built something you think is cool, share it, so others can learn too.

Whew. That’s about it.

I hope this is inspiring, rather than intimidating. This is a dynamic, inspiring place to work. There is so much to learn—you’ll never stop learning in this field, but that’s sort of the point.

Everything changes all the time, and it is an amazing privilege to participate in the chaos, even if you think your contribution seems insignificant.

So, design stuff. Build stuff. Break stuff you build, over and over, and learn. Iterate, improve, don’t stop. In an industry dominated by white males and Facebooks and Googles, your unique voice has never been more important.

Resources for beginners

Simply googling ‘how do i learn web design’ turns up lots of confusing results, many of which are trying to sell you something. Below I’ve compiled some of the things I’ve found useful over the years, and I hope it helps you cut through the crap and get started.

If you learn best in a more traditional classroom environment, there are lots of code bootcamps available. I’ve never been to one, but I’ve heard some success stories. Popular schools include Flatiron, CodeSchool, and General Assembly. There’s also a review site called Course Report devoted to these things. Lifehacker published a good article about them.

Other than that, don’t be afraid to do a bit of self-directed learning; it’s the primary mode by which you’ll learn new tools and techniques on a regular basis, anyway.

This is nowhere near comprehensive. As I think of things I’ve missed, I’ll add ’em.

General resources

  • What Is Code, a short (but great—seriously. Read it.) book about code
  • Being a Developer After 40, an article on Medium by Adrian Kosmaczewski about what it takes to be in the development business long-term. Includes many useful resources for further reading
  • A List Apart is written by industry leaders and has shaped the way we build things
  • Smashing Magazine is an online magazine about all things web
  • Tutsplus has tutorials on all sorts of subjects. Inconsistent quality, but generally, good stuff
  • The Great Discontent, a magazine about successful creative people (web and otherwise)

Things about learning

General information about computers and the internet

Basic design resources

(You’ll see lots of links to A Book Apart from here on out. Their books are written by industry leaders, they’re very short, dense, and easy to pick up. Worth a place on your bookshelf.)

Basic web, interaction, and user experience design resources

Basic web coding resources

Programming resources

Git Resources

Hopefully that’s enough to get you going. There is no shortage of information—books, websites, articles, interviews, conferences, webinars—about this profession. Absorb as much as you can!