10 Things You Can Do To Become A Better Web Designer

Like a lot of web designers I didn’t go to school to learn design or development. My degrees are in completely unrelated fields. As a web designer and developer I’m close to 100% self-taught. That self-teaching isn’t random though.

Since the beginning I’ve set a course for self-study that I continue to adapt to this day. I thought I’d share some of the things I do to continue to improve my design and development skills.

First I want to offer a few thoughts on learning in general.

Illustration of an empty classroom

Two Types of Learning

One of the frequent topics of conversation on small business forums is how important a college education is. The argument ultimately boils down to the importance of theory (school) vs. experience (working).

Most people typically fall on one side or the other and I’ve usually found that side depends on their own career path.

There are good arguments for both sides, but I think the best way to learn is through a combination of theory and practice.

e=mc2

Theory

Learning through theory is about learning from the experience of others. Design has a long history and there are many years of thought about design from which you can learn.

Theory:

  • Builds a solid foundation
  • Shows you how others have solved problems
  • Teaches you why things work as they do
  • Gives you a roadmap for further study

Mostly I pick up theory through books and through time spent thinking and analyzing my work and the work of others.

Sadly I think far to many design blogs focus on the how without offering the why. You get recipes instead of learning how to cook. Recipes certainly have value, but if you understand how to cook you can create your own recipes instead of relying on the recipes of others.

One of the reasons I focus on theory and principles here is because I think design theory is under served on the web for the most part.

Cover of practice review record dance album

Practice

Where theory is learning from the experience of others, practice is learning from your own experience. Theory is often taught under ideal conditions. The real world is seldom ideal. It’s also one thing to know something intellectually and another to know it by experiencing it.

Practice:

  • Gives you a deeper understanding through real world experience
  • Allows you to solve problems under less than ideal conditions
  • Trains you to physically do something
  • With theory it combines the experience of others with your own experience, leading to something uniquely you

You can’t do something until you can actually do it. You need practice to improve your skills. Malcolm Gladwell in Outliers suggests you need 10,000 hours of practice to become an expert so start putting in that time now.

However practice without theory is undirected. Without theory, without a solid foundation, you may need 15,000 or 20,000 hours to reach that same level of expertise.

Abstract design around topic of what design is

Tips for Becoming a Better Web Designer

I want to leave you with more practical tips than what I’ve given you above. Below are things I do in order to further my skills and understanding. They’re a combination of theory and practice and aren’t necessarily in any particular order.

Read, Read, and Read Some More

This is mainly how I learn theory. About 3 or 4 times a year I buy anywhere from half a dozen to a dozen books on different aspects of design and start reading through them.

When selecting books I tend to pick one topic of design and get several books on that one topic and then mix in a few books on other topics.

For example over the holidays I picked up about a dozen books, 3 of which were about typography and 2 of which were about visual language. The rest were a mix of books on a variety of design and non design topics.

Set Yourself a Course of Study

With both what you read and what you practice be more conscious of what you’re trying to learn.

Whenever I attempt to learn a new subject I read through a few books on the basics in order to build a solid foundation. From there I dig deeper into aspects of the subject I find more interesting and those I consider most important.

See above for how I choose books. My next round of book purchases will feature several books on constructing grids.

Workbook companion

Work Through a Book Instead of Reading It

It’s not enough to read alone. You still have to do.

I’ve typed out nearly every line of code from every book on html, css, javascript, php, etc I’ve ever read. The act of typing the code will help you learn it much more than just reading it. The books where I didn’t type the code out generally didn’t become part of me.

In typing out code you’ll almost always make some mistakes or find mistakes by the author. Figuring out how to fix these mistakes is invaluable.

With some books I’ll also take notes as I read. Again the act of typing or writing makes the information much more a part of you.

Experiment With Every New Site

As you read and learn begin applying what you learn to your work.

You don’t have to go wild here, but add one additional constraint to a design that’s above and beyond those imposed by the client. Tell yourself you’re going to make a specific color or font work for example and then find a way to make it work.

Make a conscious effort to try one new thing with a design or learn how to code one thing you didn’t know how before.

The knowledge in your head is only useful when you practice using it and apply it to real world design and development problems.

Find a Few Mentors

Choose a couple of designers, developers, marketers, etc and follow them a little more closely than you follow everyone else.

Listen to what they say and more importantly what they do. Study the portfolios of your favorite designers. Dig through the code of your favorite developers. Watch how your favorite marketers promote themselves.

Actions speak louder than words so pay close attention to what your mentors do over time. If you can make connections with these people and get their ear so much the better. However you don’t have to make the connection as long as you continue to observe what they do.

Broken Rubik's Cube

Create Problems for Yourself to Solve

You can’t always experiment on client sites, nor should you.

Do this on your own site or as an exercise. If you want to understand more about color theory start placing shapes of color on a page. If you want to be better at coding navigation bars, open a new file and start coding one.

Think of these as exercises you do to practice new skills. Some of these will remain as exercises and some will eventually find their way in to your work.

Study Websites

Whenever you land on a website you like stop for a moment and ask yourself why you like it. Is it the design? One aspect of the design? Does the site do something you didn’t know was possible with html and css?

Bookmark some for later and more in-depth study and explore every aspect of the design and the code behind the site.

When I was first learning css I constantly viewed source code to find out how a site achieved some effect I liked. Lately whenever I like the type on a site I take a look at what typefaces are being used, how the type is sized, what leading is used, etc.

Don’t Try to Learn Everything at Once

In the beginning what you don’t know can seem overwhelming. Take a little time to learn the basics to build the solid foundation you need. Then start exploring one thing at a time.

Never dwell on what you don’t know. Make the best use of your time today and in 6 months or a year you’ll be able to look back and see how much you’ve learned.

Remember to develop a course of study. A typical undergraduate degree lasts 4 years. A graduate degree another 2 or 3 years. Post graduate degrees continue forever. There’s no reason to expect yourself to know everything in a month or two. Study 1 or 2 things at a time instead.

Design is inspiration

Seek Inspiration

Good designers copy, great designers steal
Pablo Picasso sort of, maybe

Vincent Van Gogh thought of himself as a link in a chain. He took from the work of the masters before him, added something of himself, and passed his work on to those after to do the same.

You don’t need to be wholly original or reinvent the wheel. Instead seek inspiration from those before you and the world around you. Use that inspiration as a starting point from which to learn and build on.

Develop your powers of observation and learn to see design in everything you encounter. Be impressed and amazed by the magic of new technology.

Rinse and Repeat

Learning never stops. No matter what your current skills, you can always improve.

Keep doing all of the above. Revisit the basics now that you have a greater understanding of what lies beyond the basics. Keep digging into your favorite aspects of design and development.

Never stop practicing and doing.

Empty classroom chairs

Summary

No matter what level of skill you have as a designer or developer there’s always more to learn or a deeper understanding to be gained of what you already know. You can never stop learning and working to improve your skills.

Some people naturally gravitate more toward theory and some toward practice. Both are important. Each has different strengths and they complement each other well. You’ll learn more from a combination of theory and practice than you will from focusing on either alone.

We all go through times where we feel like we’ve plateaued or when our passion wanes a bit.

When it happen to me I find that diving in to something on the list above always recharges me much quicker than expected. I can pick up a new book or set myself a problem to solve and very quickly the passion comes back.

Hopefully you’ll be able to incorporate some of the tips above into your own course of learning. You don’t have to do everything I do, though each of the above has helped me and continues to help me in some way.

Download a free sample from my book, Design Fundamentals.

43 comments

  1. Great article. I studied Multimedia Technology at University and it only taught me the bare concept of Web Design and Development. By working through books and tutorials (making myself type out the code and not just adapting the source code) I have learnt so much more in 1 year in the industry than 3 years at University (although I probably wouldn’t have got the job if I hadn’t gone to Uni).

    As for getting a mentor, Twitter is great for this. I use twitter as more of a RSS reader, following people that write design and development articles. Its a great place to start picking up trends as well.

    • Thanks Sam. There’s something in the act of typing or writing that really helps you understand and remember things more. I usually play around with the code too and adapt it to my own needs. I’m guessing you also encounter the occasional errors in the code that you have to spend time figuring out how to get right too.

      I use Twitter the same way. I’ve been posting more links myself lately and when I have a chance try to interact with people, though I generally don’t have as much time. Twitter can be a great tool just for researching.

  2. as i read through this i felt like u were articulating the feelings i have had about education an the value of being self taught. the type of person who takes the initiative to learn on their own is truly a professional in my eyes. im glad you are spreading this message.

    • I guess you didn’t know I have the power of telepathy. :)

      Whether you learn in school or on your own I think education is important. At some point all of us need to teach ourselves new things so I agree about self-education being a sign of professionalism.

  3. “Create Problems for Yourself to Solve”
    I do this enough without even trying, but it’s still rewarding to solve the small problems. I work best with trial and error and I end up finding other things I want to modify in the process.

    “Study Websites” and “Seek Inspiration”
    Designing comes very difficult for me, so I’m constantly bookmarking websites just because I like some aspect of the design. I love the development aspect, so I’m constantly looking at source code and seeing how I could modify it.

    “No matter what level of skill you have as a designer or developer there’s always more to learn or a deeper understanding to be gained of what you already know. You can never stop learning and working to improve your skills.”
    I agree to that and apply it throughout life. You can always learn more and improve.

  4. The author talks about learning – notably design theory – and you chaps (comments) talk about code.

    This is exactly why I keep saying 95% of web designers are not actually designers, but coders who know how to use photoshop.

    • I was talking about both design and development. I think code would be part of that. Quite honestly while this post frames things in terms of design, I think it would apply to all self-learning.

  5. Everything was great, except the Malcom Gladwell portion. That 10k rule thing is miss referenced everywhere, as if people who use it didn’t even get what he was talking about, or maybe just didn’t read it at all.

    • Out of curiosity, how is Gladwell being mis-referenced here? Quoting from Outliers.

      “The idea the excellence at performing a complex task requires a critical minimum level of practice surfaces again and again in studies of expertise. In fact, researchers have settled on what they believe is the magic number for true expertise: ten thousand hours.”

      Isn’t that what I said? The only thing I’m adding is that I think if the practice is entirely random you might need more hours to reach true expertise.

      That opinion is mine and I can’t point you to facts to back it up, but it seems reasonable to think that someone who doesn’t take the time to plan what they practice will probably spend hours duplicating things they already do quite well and as a result need to spend more hours than the person who does plan a direction for practice to reach the same level of expertise.

  6. Great article. One problem that i always find myself in learning is i start with something and if i find a link or reference on that article i jump on to it.This way i forget what i started with. I also jumped onto your article from somewhere else :-)

    • That’s not always a bad thing. You’ll likely end up learning things you may not have otherwise discovered. I think it’s a good thing to sometimes just follow your interest and see where it takes you.

      I do also think it’s a good idea to have a plan with what you study, but exploration without a set plan is also good at times.

  7. Thanks for this. I’m three days off possibly starting a degree in Multimedia, after having hacked my way through a year’s work in web design using WordPress. I’ve learned so much through practicing.

    I’m very unsure about starting uni. I know I need the theoretical grounding especially when it comes to standards, and also the motivation to learn. But uni is a huge chunk of life that I’m not sure I can afford right now, time-wise. I’m sure it would be more fun than sifting through blogs.

    I think I’m going to end up biting the bullet and self-educating through books and experimentation as you’ve mentioned.

    Diving in.

    • I certainly don’t want to talk you into or out of going to school. I doubt this one post made up your mind of course. I did go to school, though not for design or development. For me the time in school was both rewarding and enjoyable and I’m glad I went.

      At the same time I think what’s important is the education and experience and not necessarily getting it from one specific place.

      Good luck making a decision. It’s not an easy and there are a lot of pros and cons to both sides. On the positive side you can be successful either way.

  8. Great post Steven. I actually do this now, but kind of different. When I’m reading blogs, I open up a note pad and make notations about things I don’t know. This help me remember the new things I’ve learned, and benefits whoever else I may pass this onto in the future.

    • Thanks Jarod. You know I don’t take notes on blogs as much as I do when reading books. With blogs I’ll bookmark and tag the posts and then later go back and spend a few days re-reading through a topic.

      For example I have a bunch of posts bookmarked on working with the comment system in WordPress. When I find myself working on a theme and wanting to do more than usual with the comments, I’ll pull up a lot of those posts and spend more time with them. I’ll play around at night and experiment.

  9. a very well written article, love that bit about Picasso, there’s already so much happening out there and finding your own original niche seems impossible. improving an idea gives more room for startups like me. great info here. thank you!

    • Twitter can be a great information resource, though it does depend on who and what you follow. You may want to look into something like Flipboard or similar apps. It basically builds a newspaper from the things people you follow or friend link to.

  10. Wow! This such a great post! An inspiring one too! Thanks for sharing some tips. I myself find inspiration and learn new thing via the internet. Twitter and other motivational and educational sites too!

    • Thanks. The internet in general and social media in particular are great resources for learning. However I wouldn’t ignore books or life. There’s a lot to learn from that isn’t on the internet. And don’t forget you have to practice the things you learn.

  11. a very thoughtful article indeed. I totally believe that practice without theoretical knowledge is like a tree without roots. foundation has to be strong if u want to achieve something. thanks for sharing.

  12. Excellent points. Theory is an important focus for me. Since I too am self-taught from way back in the day, I’m not entirely sure how web design is taught in schools. But from what I’ve seen of some designers and devs, it seems to me that a lot of time is spent on teaching languages and not theory. If you don’t know the hows and whys, the quality of work suffers.

    After 11 years, I’m finally sitting down to learning JavaScript (I just didn’t have the need before) but I find myself frustrated with the quality of a lot of the training. There is emphasis on “this is a variable, this is a function, etc.” with no explanation of standards, syntax, terminology, and more. Those foundations are vital to any aspect of web design and yet I have to hunt down that information myself. A newer web dev wouldn’t have a clue to even look for that.

    • Thanks Janice. I’m not sure how they teach web design in school either. I tend to think the focus is more on the tools and maybe learning a little about the languages. Unfortunately the technology changes quicker than school curriculums do and I think the information is often out of date.

      On the graphic design side they can and do teach theory along with practice. You can get a good design education I think. I’m not sure specifically about web design though.

  13. This is a beautiful post mate…I think you have stated some things here that really have never been on any other blog I have ever read. That’s pretty cool…I read a lot and I have to say this post is one of a kind in a cool kinda way…nice writeup…Learning is a task all its own, and you broke it down to a simple defintion…I was having a great time reading it! Cheers!

  14. I enjoyed reading this article. Thank you very much, Steve! Wanting to become a good web designer and possibly have my own start-up, I am presently on a re-learning spree. I have learned HTML and CSS from Head First books, and now know that I have to start making a few good web pages myself to get a better grasp.
    I wish you could write about what technologies to learn to be able code a functional, complete, modern web site and which are the best books to learn them from. I would appreciate it very much if you could. Thank you.

    • Thanks Srinivasan. Definitely start creating some pages and some sites. Reading is good and I think it’s great for learning, but building some real sites will help a lot.

      There’s no one set of technologies to know. With html and css you can build most sites. What you’ll probably want to know is a server side language like PHP and a database like MySQL. You don’t need to be an expert, but it’s good to be able to understand them when you see them.

      You can also learn a CMS like WordPress or Drupal. They make adding functionality much easier. Javascript or one of the libraries like jQuery will also come in handy.

      I’ve written 2 posts about books I recommend. One with design books and one with development books. Hope they help.

  15. I really enjoyed reading this article. I wanted to hear from someone who has went through the process of teaching themselves about web design and development. Thank you for sharing! :)

    • Thanks Tishka. Believe me I was confused when I first started learning and wondering what I should teach myself first and how to go about learning.

      Little by little it all starts to fall into place. Not that the learning ever ends, but after awhile you get a better handle on how to go about learning.

      I’m happy to share to help others avoid some of the confusion I first felt.

Leave a Reply

Your email address will not be published.

css.php