Connect with us

General Web Design

How To Learn Web Design As Quickly As Possible

How can I Learn Web Design Quickly?

  • Study the best
  • Learn from mistakes
  • Practice as much as you can

Taking the leap into web design can feel daunting. There’s so much to learn, and you might not know where to start.

Design isn’t like programming or frontend coding. There isn’t really a linear learning path that you can take. Instead, you need to try different things, learn how to re-create designs/patterns and use that knowledge to create new interfaces.

I’d like to share some tips to help newcomers improve their web design skills as quickly as possible. The obvious step is to practice a lot. But what exactly do you need to practice? There is no single right answer but I hope to illuminate some good starting points.

Study From The Best

If you wanted to learn how to sing, you would study from musicians who can sing well. The same goes for UI design.

You’ll find thousands of tutorials online of varying quality and detail.

Poor-quality design tutorials may teach you design software, but they won’t teach you how to design websites. Well, not good websites.

Here’s my rule of thumb: if the end result looks like crap, then don’t follow the tutorial.

We actually have a huge collection of tutorials strictly focused on mockups with Photoshop. This gallery is a great place to start, but you might also want more recent tutorials.

In that case, I highly recommend the TutsPlus blog. Specifically the Photoshop category, which is full of amazing tutorials.

01-envato-webdesign-tutsplus-ps

You’ll find a wide variety of tuts including web design, mobile app design, and icon design.

All of the TutsPlus content is refreshingly detailed and you can always preview the end result before starting. If there’s any one website you should use for web design tutorials, it’s TutsPlus.

I’ve also found some decent tutorials on PSDFan, but they haven’t updated with new content in a while.

02-psdfan-tutorials

Just remember that what you study will affect your design quality and your design process. Your time is precious. Spend it studying quality tutorials that’ll teach you practical steps—steps to create websites that actually look good.

Be judicious and even picky if you have to. In the end, you’ll notice a much larger jump in skill and even your practice layouts will look good.

If you don’t use Photoshop, there are other tutorials out there. I like these Sketch tuts from the Sketch App Sources website. And TutsPlus even has their own Sketch category featuring mobile/web UI tutorials.

03-sketch-app-resources

You could also practice with Adobe Illustrator or Affinity Designer. Truthfully, the software doesn’t matter.

It’s just about practice and repetition to get comfortable with the process of designing a website from start to finish.

Here are some high-quality tutorials to get you started:

Learn Through Mistakes

When you’re just starting as a designer, you will make bad work. It’s just part of the process.

Many times newer designers won’t even notice that their work is sub-par. The way to properly gauge this is through feedback.

A good website design is instantly recognizable. Nobody looks at the overall layout of Mashable or the White House website and thinks, “Agh, this is terrible!”

Some people may have critiques or suggestions to improve those websites. But generally speaking, those websites are well-designed.

So what’s the difference between that work and your work?

The answer to that question is the learning process.

By trying to answer that question, you’ll start to understand why another website’s design looks better than yours.

Is it color choice? Typography? White space? Navigation or usability? Or maybe all these things combined?

04-white-house-homepage-2017-obama

Constantly ask yourself these questions and really try to figure out the answer.

Connect with other designers on forums or in small social communities. This way, you can get opinions from other designers and hopefully gain some new insight.

Reddit has a large sub called /r/web_design, which can be helpful. I also recommend /r/design_critiques specifically for critiques of your work.

05-design-critiques-reddit

Try not to take criticism personally, and don’t get down on yourself for making bad work. It’s gonna happen!

Every time you design a new mockup, you should feel proud. Even if it looks like garbage, you’re still putting in the work and trying to improve.

It’s better to accept that it’s gonna take some time to get good. Nobody is born with design knowledge; it needs to be acquired. And the quickest way to do that is through observation, practice, failure, then back to observation and repeating (hopefully) to learn along the way.

This video by Ira Glass talks about “the gap” that beginners face when doing creative work, and he explains it much better than I ever could.

Practice Makes Perfect

You can read hundreds of design articles, but they won’t make you a great designer. The only way to get better is practice, and really consistent practice.

You need to work through design ideas from start to finish. You can use Photoshop, Sketch, Adobe XD or any alternative that lets you create mockups.

A good place to start is with the 100 day UI challenge.

06-daily-ui-homepage

New designers need to practice a lot, but they may not know what to practice. The daily UI concept is really cool, because it forces you to sit down and design something every day. Even if it sucks.

You’re training yourself to push through design work and familiarize yourself with the process.

You can see tons of daily UI examples on Dribbble, where designers share their 100 day challenges publicly.

07-dribbble-daily-ui-tag

Obviously you don’t need to do this, but if you do take the challenge, I’d recommend saving your work. Keep your designs in a folder somewhere, and mark the files with the completion date.

In two, three, five or ten years you may look back and have a good laugh at your early work. I know I do.

But if you don’t like the daily UI approach, you could instead try designing existing websites.

Pick one of your favorite websites and study the design. Look at each element ,and think about how you would recreate that in Photoshop or whatever design software you use. Then try re-creating that site’s design from start to finish.

This boils down to three steps that can be constantly repeated.

  • Study websites you like
  • Analyze each area of the design and break it down
  • Recreate the website as a mockup for practice

Once you get good at cloning existing designs, you can try redesigning those websites. Take a big site like Facebook, LinkedIn, Twitter, or really anything you like.

Consider which areas of the design work best vs which areas could be improved. Then redesign the layout from scratch and compare your design to the original.

This is a great practice regimen that not only improves your technical design skills, but also sharpens your ability to conceptualize a new layout.

If you follow this routine and keep trying to improve, I guarantee you will see results. Anyone can learn design on their own with patience and a willingness to keep going.

Over To You!

With this in mind, you should have more than enough info to sit down and get started.

The only surefire way to improve rapidly is constant practice, and you should always be trying to improve with each practice project. Try to understand what makes certain websites so great. Look for specific features that make the design work well.

Once you start looking at websites like chunks of design elements, you’ll have an easier time combining these ideas together in your own layouts.

Like this article? You may also like:

Jake is a freelance writer, designer, and illustrator. He currently writes articles on user experience design for web & mobile. You can see more work on his portfolio site and follow his tweets @jakerocheleau.

Click to comment

More in General Web Design

To Top