by Kevin Kononenko

How to learn web design when you have the creativity of Homer Simpson

For a few lucky people, design comes naturally. This guide is for everybody else.

When you are just starting out with web design, your first few creations can feel like disgraceful failures.

On one hand, professionals have designed all the products you use on a daily basis, so you feel that you must live up to their lofty standards. On the other hand, your designs make you want to scream “AVERT THINE EYES!” to your users.

For the sake of comedy, here is the original site design for my personal website:

To keep it positive, let’s just say there was a lot of growing left to do. When I was starting out, I would stare at my designs and change them up. Then I would bang my head on the wall when I could not figure out what the heck was wrong.

Unlike coding, when you can usually consult a reference somewhere to fix your problem, you may have a hard time finding direction on how to fix your initial designs. It can feel like a series of unknown challenges stacked up on top of each other.

So, here are 5 different ways to get a firm grasp on design basics and quickly analyze your own designs so that you can improve more quickly.

Please note that you can always stop your build process or learning process to learn all the design basics. That could take many hours. These strategies will teach you how to learn design on the fly as you build a product or learn code.

Find designs that you like. Copy them.

This is what experienced designers sometimes call “taking inspiration” from other people’s designs. In other words, check out sites from your industry and design your site in a similar way, either through color, or more likely structure.

When you are just a beginner, it is hard to tell what you are doing wrong when you try a new and creative approach. You can be stuck for hours thinking about why your design just isn’t right. The fix is to take a look at what the experienced designers are doing, and do that.

You can head over to Behance or Dribbble, and check out designs from your industry. Let’s say you are designing a blogging site. You could check out a site like Medium, and tie your design closely to their existing design. You can always change it up later, or when you add a more experienced designer to your team.

This actually makes your user’s life easier. When a user is trying out your site for the first time, it is already stressful enough to figure out exactly what the site does. Adding unknown design patterns will likely only confuse your user — especially if you are a beginner designer.

2. Pick out specific things within designs that you like and take notes.

Let’s say you are trying to get a certain color scheme or information hierarchy to look awesome, but you can’t figure out why it still looks ugly after many tweaks. Think of an example site that you already use that does a good job with this one small, specific design. Head over to the site, and jot down 3–5 notes on what you love about it.

Example: Let’s say I am designing a landing page, and I cannot figure out how to quickly explain a couple key benefits of my site. One of my favorite sites is Lumosity, so let’s see what they do.

• Great 5 word explanation over each of the paragraphs
• Both font-weight and font-color balances the header with the paragraph
• Good line-spacing on paragraph makes it easy to read
• Left alignment of header and paragraph makes it easier to read
• If you look at the image again, you realize it tells the story if the text. Even if you don’t, it provides balance.

Once you create your list of positive attributes, you can look back at the one specific similar piece in your site and fix based on the positive attributes you listed. You can right click on the specific elements you like, and use “Inspect Element” to see the exact CSS that the design uses.

3. Find a designer. Become their friend. Ask for criticism whenever possible.

It will be even more difficult to learn design if you are continually second-guessing yourself. If you don’t have a good idea of what is wrong, you can’t just deliberate for minutes or hours and expect to get it right.

So, if you can discuss your issues with somebody who has even a little design expertise, you will learn much more quickly. Most designers should be able to instantly point out flaws, and you will be able to learn from their analysis.

Here is how to find one of these generous designers:

If you work at an established company: Find a way to meet a member of the design team, either through a mutual friend at your company or by just approaching one of them. Tell them about what you are trying to learn, and ask if they would be willing to give you 15 minutes of time 1–2 times a week to talk design. If they are a good teacher, they will find this rewarding!

If you work at a coworking space/incubator/accelerator: If your team does not already have a designer, approach one of the designers at another company in your space! They will be happy to help, since they are just trying to get their company off the ground like you are. Make it clear that learning design is a big deal to you, and this is crucial for your team to succeed. It is not just a vague curiosity. Again, 15 minutes, one or two times a week should be appropriate for both of you.

If you work at home or don’t have a clear way to meet designers: Use Meetup to check out local events that web designers might be attending. This could be a web design-focused meetup, or even a front-end developer meetup. You can also check out the Free Code Camp campsite list to see if there is a group of beginner web developers in your area. Announce yourself to the group online, and when you attend an event, start telling people about what you are trying to accomplish. If they seem interested, ask if they might be willing to set aside some time to help!

Of course, the three approaches above assume that you do not have your own designer friends. If you do, those would be the best people to talk to.

4. Build mock-ups with programs you already use, like PowerPoint or Keynote

You may be tempted to learn a real web design program like Adobe Illustrator. Although that will be helpful in the long run, it will create a 20+ hour learning curve as you spend time learning how to use a new tool.

Alternatively, if you build your product without creating mock-ups or a design, you may spend hours tweaking CSS without a clear vision for your site.

I strongly advise that you create mock-ups. It will allow you to practice creating a full page without spending hours on code. Powerpoint and Keynote are two great options.

You can build interactive mock-ups by adding triggers to your buttons. Most importantly, you can use a familiar system to learn design. You can even set up gridlines just like in Illustrator.

Then, tweak this design until you are happy with it, before writing code. Yes, it will look a little different than it would in a browser. But you can quickly try different options and tweak it based on a designer’s feedback.

This will also push you to fully understand all the different design decisions that go into a specific view. Do not skimp on colors or font types, or anything really. Make it as close to pixel perfect as possible. Need inspiration to get everything right? Check out Adobe Color or Google Fonts.

5. Read a book on design principles

This is the last option because it will take you completely out of your product building process. But, you can choose a more practical book as opposed to a more theoretical one.

For a person with limited creative ability, the suggestions from a theoretical book may be a bit challenging to try out. They may make sense as you read them, but attempting to implement them may throw you right back into the confusion that you started with.

I recommend a book that focuses on teaching lessons around real-world successful web designs. Here is one great, free e-book on design basics with website examples.

Unleash your inner designer

Unlike coding, you cannot consult a design reference to learn an exact way to make functional designs.

A likely way that you will learn about the crappiness of your design will be when you show it to users, and they go “This just doesn’t look right,” or “This isn’t very pretty.”

Don’t expect specific feedback from them!

Also, do not hesitate to surround yourself with excellence, and “take inspiration” from that. Mimicking the designs of great designers — or just hanging out with designers after hours — will help you learn so much faster than trying to invent your own solution as a beginner.

And remember that every great designer had to go through that nasty beginner phase as well.

Did this guide help you? Let me know in the comments!