Interested in web design, where do I start?

psCover

Your desire to try your hands at web design leads you to search “how to create a website”. Google says one of the most popular approaches are(amongst dozens of others) to learn HTML or learn to use Photoshop.

Not in the mood for coding, you fire up Photoshop… 40 minutes later you feel you lost your time choosing the right typeface, placing text where it “exactly” needs to be, wondering how to create containers, learning how to move containers, sizing containers…

“It is not done yet,” you say to yourself.

“I’m not sure if this really should be here…” you think.

“Hm, maybe the font has to be darker and I should try changing the color of the buttons a bit”—you mutter. This is your last effort to make a website out of the mess of layers and objects … and you feel overwhelmed.

Not only you are trying to get a clear idea of what you should be doing, but Photoshop tools get in your way and slow you down.

Working in complex environments, filled with new tools and options you don't understand yet, makes learning web design harder than it has to be.

But you don’t have to punish your struggling self by doing more of the same and hoping for better results. There is a smarter approach suited for the pace of a beginner.

A route that helps you move forward quickly, one simple step at a time and see your progress on the way.

Just like you learn to write words only after you know how to write individual letters, to get on with web design you need to learn its building blocks first.

Time to skip the popular tools

The natural inclination of people is to try the most famous tools in the web design communities—Photoshop, Sketch, Illustrator, Fireworks, Keynote … sometimes even going to HTML and CSS. This approach piles layers upon layers of complexity on the way of your goal—to design a website.

All of these tools create high-fidelity prototypes.

Apps with high-fidelity output give you too many options to play with in the first place. They dilute your focus and overwhelm you. (Think writing a novel when you can barely write your name)

Use the right tool at the right time

Having more tools than you need available will only slow your understanding of the thinking process that makes up the design of a website.

Obsessing over “pixel perfect” positioning, colours or typefaces at this point will only distract you from the thinking phase.

This is not design.

This is “playing design”, a game that besides being a fun way to procrastinate also wastes you tremendous amounts of time every time you play it.

Nudging objects in an application, pixel by pixel, is not design. Design is the reason that guides the movement.

Even though your ultimate goal is to design websites, it is too big to jump on straight away. To run the marathon of a web design project you should first get a grip on your 1km, 5km and 10km runs. That said, have you ever thought of skipping design apps altogether and scaling back your goal even more?

When you are just starting out, your focus should be on making it as easy as possible for you to learn the basic building blocks of a website. And then get to use them.

Box yourself in

Lets try something together, shall we?

Pick a pen and a piece of paper now.

Actually, the pen is for sissies. Go ahead and pick a marker. A fat one.

Now draw a box.

Two website wireframes side by side

It is not perfect, I know.

Actually, it is far from perfect. You can do much less to correct it. You either have to draw over your previous drawing or draw it better the next time. But it serves its purpose—you know you meant to draw a box. This is a low-fidelity sketch.

As opposed to the apps for high-fidelity prototype creation(Photoshop and the likes), low-fidelity website sketching makes it harder for you to obsess with the details. Its goal is to get your ideas out of your head so that you can think about them and compare different options. The permanence of paper and lack of inherent precision of the marker is what limits you.

Your tool boxes you in. And this is not as bad as you may think. This boxing limits the degree of complexity in the design process.

In other words, marker sketching brings you closer to the actual “design” and keeps details, that you would otherwise fidget with, out of your way. For now.

Using a simple tool all you are left with is quickly noting the gist of your ideas down. Want to see if having a bigger content pane is better? Just do a 10 sec sketch and compare it with the 2 column layout you sketched before.

Drawing of a box(cube)

Getting ideas out of your head that fast is exactly what you need when starting—bite-sized steps that are easy to complete. Because details are a devil of their own.

Sketching may seem like the “slow lane” of web design, but it is worth it

The reason for paper sketching is to remove the technological barriers to web design as a process. It also gives you time to practice analytical thinking.

The more you sketch the more you think about the site you are designing. The better you understand the reasons behind the design you are doing, the easier it would be for you when you get to hi-fi prototyping. Then you’ll have criteria for success.

Sketching gives you answers

When you interact with elements on a design level you get to understand how they work together. Deconstructing websites on paper is just like the autopsies Leonardo da Vinci used to uncover the mysteries of the human body. Sketching is the easiest way you can start mentally dissecting your ideas and existing websites.

TL;DR:

When you start your next web design (learning) project, instead of firing up Photoshop / Illustrator / FireWorks / Sketch 3 try grabbing a marker and a piece of paper first.

Sketch for a while. Seek relationships between the sizes and the space between the elements. Try different options. Create a paper prototype of what you want to do first. You’ll be amazed how fast you can get a quick win that will motivate you to work on your project even further. Your sketches will pay off with the clarity you will get after making them.

Looking to become a web designer?

The post you’ve just read is actually Part 1 of the free email course “Web Design Beyond HTML&CSS” that I created for people like you.

Get the Rest of the Course