20 Methods for Upping Your Current Web Design Skills

20 Methods for Upping Your Current Web Design Skills

All great designers are constantly improving their skills. There has never been a successful designer, or anyone of another profession for that matter, that has stopped at a certain point and said, “Good enough”. Fortunately, there are plenty of ways to always be learning new things, and to always be improving.

In this post we’re looking into 20 different ways a web designer can improve their skills at any time. They involve everything from learning new abilities, to changing focus, and to revamping one’s mindset when it comes to design. Check out these 20 methods for improving as a web designer, and feel free to add your own techniques in the comments section!

20 Methods for Upping Your Current Web Design Skills

20 Great Improvement Methods

1. Study UI Design Patterns

Check out websites like UI-Patterns.com to explore the best user interface patterns for the web. They come in nearly every category, and can provide great new ideas to get you out of your own interface rut. Do you tend to give your clients the same layout over and over? Do you use the same navigation look, or use the same format with forms? Check out the user interfaces of other websites with collections like these to gain inspiration and learn new habits.

UI

User Interface Pattern Websites:

2. Pay Attention to Detail

Look at the detail in everyday objects, and actively look at detail in other web designs. Practice adding more of this detail into your own designs. A great designer looks at texture, shadows, indents, shapes, cutouts, and much more. Don’t get lazy! Look at and add every little detail into a web design from your source of inspiration.

3. SEO Techniques

Many clients love a designer that offers SEO services. Whether you’d like to do this or not, though, learn more about how to create and code websites that are SEO friendly. By adding it to your resume, you’re helping your client’s websites more, and therefore helping yourself more. The more successful your client’s website, the more referrals you’ll be able to get!

4. Learn Web Design Trends

Trends are never something a web designer should solely rely on, but learning new trends is a great way to keep up with technology, and to keep you as a designer out of a rut. Of course, on another note, you’ll never know when a client will see a technique they like on another website and want a similar look.

Do yourself a favor by keeping your designs modern, and by keeping your skills sharp by studying trending techniques.

Trend

5. Know Typography Well

Keep in mind that what will be viewed most on any website you design will be the text. Know how to design this text well. Having a good understanding of typography involves math, a good vocabulary of fonts, and more advanced technologies such as SIFR and Cufon. Learn about these things and learn how to use them.

Learn about baseline rhythm, readability issues for different fonts, text sizes and their effects, and more. There are plenty of useful tools/articles, such as the Baseline Rhythm Calculator, Better CSS Font Stacks, Typechart, and Typetester.

6. Practice With Color

Have you ever grabbed a palette off of ColourLovers, looked at it for awhile, and then realized you had no idea what to do with it? If so, you may have some trouble understanding how one should use color. Learn about color theory and the psychology behind color to know what to do with a palette, and to learn how to create your own palettes better.

Color
Image credit: Dey

7. Know JavaScript

Many web designers make the choice of whether to learn additional web development languages or not, but JavaScript is quickly becoming one of those languages that belongs more with the web designer than the developer. It is grouping itself with HTML and CSS in terms of when it should be used. As a web designer, know the basics of JavaScript, and learn about at least one JavaScript library to work with.

For a great start, check out The Bits of JavaScript that Every Designer Needs to Know, right here on onextrapixel.

8. Become a Better Communicator

It doesn’t just take the ability to make great websites in order to be a great web designer. Being a web designer involves knowing how to solve client problems as well. Client problems can be solved faster, more efficiently, and better with overall better communication skills. No communication is fine for personal projects because you already know what you need and want out of the project. With clients, it’s different.

Being able to call a client with confidence and win over projects is a must for a web design business to survive. It is also important throughout the design process for getting the project done right the first time. Better communication means better final projects, and better final projects means more repeat business, happier clients, and more referrals!

9. Do Some Tutorials

I used to not be a big fan of tutorials, as I felt they took a long time, and I just felt as though I was copying someone else’s work, step for step. However, I soon realized that by doing a few, I began picking up techniques and best practices, and I also began using tools in some of my favorite software with more confidence.

There are a lot of tutorials out there, from coding to design, and some are for small effects or an entire project. Whatever sort of tutorial it is, it can be a great way to learn something new. Sometimes going through something with someone else can help one to pick things up better than reading a book on design theory or programming syntax.

Tutorial
Image credit: Jakob Montrasio

10. Learn from Your Mistakes

Making mistakes and learning from them is the absolute best way to learn. Think about your past web design years — were they perfect? Of course not. Take some time to reflect on some moments where you made mistakes, and then know and recognize the lessons learned. Literally take out a piece of paper and start writing them down.

Some lessons may be client related. Maybe you were not good about calling clients back or too nervous about client phone calls and meetings in the beginning. Where are you now? What were the negative consequences in terms of the project? How can you improve in that area today? Other mistakes may be skill-related. Perhaps you made a design, thought it was fantastic, but then got some negative feedback on it. How do you take the criticism? What were others saying was the biggest problem?

In a very skill oriented field like web design, mistakes are going to be made. The biggest mistake of all is not to learn from the previous ones.

11. Get Technical

Design is a lot of math. Learn more about the technical sides of design, rather than being in the habit of placing things wherever you please. If you’ve ever had the feeling that something was just ‘not right’ in your design, it was likely your subconscious telling you something was off-kilter.
Great things to look into are hierarchy, the Golden Ratio/Divine Proportion, Sine Wave Design, etc. Take a look at Smashing Magazine’s excellent post on applying geometry and other forms of math in website design: Applying Mathematics To Web Design.

12. Use a Sketchbook

Get in the habit of brainstorming your ideas on paper first. A good sketchbook is a decent investment for any web designer. Illustrate backgrounds, wireframes, or write down and organize ideas in writing. However you use it, use it for developing your skills and brainstorming effectively for the best final results.

Sketchbook
Image credit: elbragon

13. Go Outside and Get Some Air

In other words, get your brain going again. Sometimes the best web designs are formed from true, clean, inspiration. Get off of your computer and take a break. Don’t go to the TV, or even to a book. Always take some time out every day to let your mind wander aimlessly to keep stress low and improve your natural design ability.

14. Collaborate with Others

Discuss your projects, designs, clients, and best practices with other web designers. Discuss them with graphic designers and web programmers as well. Discuss them even with family and friends. Get opinions, see what others think of your work, and be motivated through that socialization.

Not only will you likely learn specific techniques from those in the same or similar professions, but you’ll also be able to reflect on the reactions from those that aren’t experienced in design. These people would be similar in thought to your own clients, so take their advice and examine their opinions well.

15. Whitespace: Take More Out

This is not a movement to get every web designer into a minimalistic look. Rather, it is a movement to get every designer to see the fundamentals of great design. Do you over clutter your designs? Try to take everything out of your designs that is unessential. What is left?

Minimalism

By focusing on what is needed, we can prioritize the elements that make up our web designs, and organize them better overall.

16. Re-learn the Basics

Do you think you know the basics of everything that involves web design? Look them up again, and you may be surprised what your seemingly experienced mind has missed. Google things like:

  • “Essential CSS techniques”
  • “Basics of web usability”
  • “Design principles”
  • “Color theory basics”
  • “Design theory”

17. Know the Grid

Know what a web design grid is, how to use one, and get experience working with a popular grid framework, such as the 960.gs System. There are plenty of articles on how to use a grid, including Grid-Based Layout, 5 Simple Steps to Designing Grid Systems, Grid-Based Design 101, and Grid-Based Design: Six Creative Column Techniques.

18. Buy a New Book

Buy a new book or resource concerning something you don’t have much experience in. Always be learning as a web designer, and always be expanding your knowledge. If you feel like you’re in a design rut, there’s nothing like learning something completely new to find inspiration. You’ll immediately want to try out the new things you’re exploring, and then you can add those skills to your already vast set of experiences.

Books
Image credit: dareppi

Buy a new book that will teach you a new language, teach you how to do something specifically (like creating an iPad app), or a book that focuses very specifically on your own specialty. Learn anything that tickles your fancy – as long as it’s new and intriguing.

19. Attend Conferences and Events

Many web designers overlook the importance of attending web design conferences and events. They are a great place to network and to learn new things. Sometimes, the cost of the conferences is what gets many designers: they all have registration fees, and for many, the cost of traveling is an issue as well.

To combat these fallbacks, understand that the registration fee is relatively cheap for what you’ll be getting out of it, and it is one of the most important investments a web designer can make in their field. Also, always be checking for events that are closer to your area to avoid traveling costs.

20. Convert Your Own Designs

If you don’t already, begin converting many of your own designs from PSD to HTML and CSS. Many web designers choose not to do this on their own because it’s time consuming and can be boring if it’s just not something one likes to do. However, could you be one of those designers that doesn’t do it because they don’t know how? Do you know the techniques necessaray to convert your own designs in the first place?

Converting your own designs can alter the way you design altogether. You may find some usability errors you’ve been designing around, or you may begin designing with the developer in mind more. By coding your own designs, you can see and fully understand how your designs are functioning in the back-end – how easy it is for them to implement SEO techniques, their load time, etc.

Conclusion

Any designer can benefit from improving their skills, and the best designers know that improving a little bit every day is the key to success in this industry. As anyone can see, a web designer can improve in a variety of areas, from design to coding, and from business to networking. It doesn’t have to all be about design specifically; what’s important is that you, as a web designer, are growing professionally in any way for the future.

How do you improve as a designer? What do you do to learn new things and keep up-to-date on the latest trends, and how do you improve as a professional?

Kayla Knight is a web designer and frontend web developer. She specializes in responsive web design, progressive web technologies, and also knows her way around most CMS's and PHP. You can find out more and check out her portfolio at kaylaknight.co.

Comments

  1. / Reply

    Wow! This is a very well-made guide! Thanks for the links. These will come in handy, gonna bookmark them. :D God Bless

    • Darren,
    • August 24, 2010
    / Reply

    I especially like methods 8 through 10. Oh, what? Hey, wait a minute :) Or was it an extra test to train our observational skills?

  2. / Reply

    Bookmarked! Excellent source here, I feel like every one of us get into a rut from time to time, and it’s always great to go back to the basics, and also learn new skills. Keep up the good work Kayla!

  3. / Reply

    Love it! “Take some air” is a great method to get inspired.

      • Fernando,
      • August 27, 2010
      / Reply

      Or to not get crazy…

    • Greg,
    • August 25, 2010
    / Reply

    Nice article

    FYI Section “17. Know the Grid” the link to 960 Grid System is linked correctly but spelled wrong. it says 960.cs instead of 960.gs

    1. / Reply

      Thanks for pointing that out Greg, yes it is supposed to be ‘gs’! Hopefully we’ll get that fixed asap.

      1. / Reply

        Hi Greg,

        Thank you for pointing that out. We have made the amendment. Sorry for any confusion and inconviences caused.

  4. / Reply

    “3. SEO Techniques” – in my opinion this is one of the most underestimated skills among webdesigners.

    Great Job!

  5. / Reply

    Great Adive, I agree with most of it! :D

    • Darren,
    • August 25, 2010
    / Reply

    Am I really the only who finds it odd that methods 8, 9 an 10 are missing? Some great tips though, especially 16. Re-learn the basics. The stuff you think you know in and out, usually have some secrets you’ve always overlooked.

  6. / Reply

    Great article! Paying attention to the details is my favorite point.

  7. / Reply

    Learning new things is important, otherwise we’ll end up without any clients and using outdated methods, such as all of those “IT professionals” who claim using tables in HTML for layouts is on the up and up ;)

    1. / Reply

      Very familiar with the type.

    • Steve,
    • August 25, 2010
    / Reply

    Nice and really comprehensive methods shared! I’m really curious and excited about the missing portions 8-10 and hope to see them soon to complete this great article.

    • Brad,
    • August 25, 2010
    / Reply

    Great article. I would say learning development (XHTML + CSS) is great start that helped me, years later I am glad I picked it up. Even a basic understanding of SEO can go a long way as well.

    • Clipping,
    • August 25, 2010
    / Reply

    It was really awesome post! Thanks a lot for sharing.

  8. / Reply

    Written in guide 11 (Get Technical) – Design is a lot of math. That’s another learning for me. And I also see that guides 8-10 are missing.

    • Nicolas C.,
    • August 25, 2010
    / Reply

    Excellent article, thanks.

    (Quince link miss)

    • Dan,
    • August 25, 2010
    / Reply

    Great article, I can feel my skills improving already!

  9. / Reply

    Great tips. Some of them are easier to put in practice than others. There’s many points in your list I should pay more attention to, and things I’ve meant to do but haven’t yet. Thanks for the links as well, I’ll check them later. I feel a bit cheated to get 17 tips when I paid for 20, but honestly I didn’t even notice it until I read through the comments. Still a great article, thanks!

  10. / Reply

    One of the most useful articles I’ve read in a while. Good stuff Knight.

  11. / Reply

    great read!

  12. / Reply

    Sorry for the 3 missing methods. We just got it fixed.

    • whiskey,
    • August 26, 2010
    / Reply

    Love it. It’s very useful for everyone. Thanks a lot, Kayla!

    • Simon,
    • August 26, 2010
    / Reply

    Thanks, this very useful. Btw., a UI Pattern Website you are linking to, UI Pattern Factory, is now Patternry, and the URL has changed.

    1. / Reply

      Hi Simon,

      Thanks for letting us know. We’ve got it amended.

  13. / Reply

    Thanks.

    Also I’m gonna use all links provided in this article. Thanks.

  14. / Reply

    “Get some air” is the first thing I do when I hit a brick wall. When I come back the answers always stirring me in the face.

    1. / Reply

      true that!

  15. / Reply

    Dear Kayla, great article, thank you!
    I only hope you don’t mind that I popularize your thoughts for Russian web-auditory in my blog here: http://lentaprowebdesign.blogspot.com/2010/08/20.html
    (if you do, I sure will remove it immediately, please feel free to notify me)

    I especially like ## 1, 4, 16 and 18.
    9 and 17 are my nearest future’s targets.
    The colors and color spaces are my whole-life-passion :-)
    And 14 is my favourite style in my musicmaking yet.
    Generally – again – this is very optimistic, really deeply felt and inspiring article.

  16. / Reply

    Thank you so much for taking the time to put all of this information together, and in such a well-presented format. I am also going to bookmark it and research some of the sites that you recommend. I am NOT a web developer, but have been in the past, and am in the position of having to design and keep up with my current company website and blog, the latter of which I have zero experience but am rapidly gaining some!

    • jose,
    • August 28, 2010
    / Reply

    Really good post!!!, i´ll keep it

  17. / Reply

    Nice! Sometimes I think these sort of articles are just filler and usually full of stuff that is just common sense… but this one had some genuinely useful stuff. Thanks for putting together a nice resource!

  18. / Reply

    thanks, but give me more good books i can buy about webdesign ……..

  19. / Reply

    Hey Kayla, these ideas are super – and practical advice too!

    I am considering adding to my current skill set and developing my love for design further with a certificate course/training in web design and development from the local IT institute and thanks to you, now I can select the right modules on my own. Going bk to college seems fun now!

  20. / Reply

    Wow, what a great article!

    • Rain8,
    • September 5, 2010
    / Reply

    I especially like the comment about white space. We operate here in Shanghai and modern Chinese design is typically very cluttered. This is a bit ironic to me because the Chinese pioneered the use of white space in their ancient art forms. The artists of this period followed a philosophy to only tell the essence of the story, allowing the viewers to fill the empty space with their imaginations thereby making the art more personal. It seems the local designers need to take a cue from their own ancient masters.

    • Shoemitt,
    • September 15, 2010
    / Reply

    Great list. I often decide I have to do ‘one thing’ to improve whatever I’m working on, and this helps me keep in mind that there’s a lot of different skills and knowledge that go into really creating a design that is useful, informative and attractive. Thanks!

    Also, I like your ring!

  21. / Reply

    Thanks for the great info, I found it very useful I have bookmarked the page and hope to be back soon

  22. / Reply

    OH mY GODDNESS.. is i found for my skill supgrade learning. Thxs for share this. love it pro

    • Anna,
    • September 19, 2010
    / Reply

    Hi Kayla,

    Thanks for sharing this list. Live & Learn!

    Good luck!

    • Anna,
    • September 19, 2010
    / Reply

    Hi Kayla,

    Thanks for sharing this list. Live & Learn!

    Good luck!

    • Terry,
    • November 2, 2010
    / Reply

    Very well said. A lot to learn but the output is worth it. Thanks for the good read.

    • Demonhorse,
    • November 30, 2010
    / Reply

    If the title were “A Method for Upping your Current Web Design Skills in Twenty Steps” it would be more accurate than “Twenty Methods…”.
    Thnx for the post!

    • Deepesh Fagna,
    • December 17, 2010
    / Reply

    Hi Kayla,
    Thanks for sharing this article, I like methods 1 and 7 very much.

    • Ana,
    • December 19, 2010
    / Reply

    Great article, very useful for a person like me!

    • Benny,
    • December 28, 2010
    / Reply

    very useful ~

  23. / Reply

    wow, great list! Much thanx for summing up all these resources

  24. / Reply

    Having recently completed a development course i had been on for about 4 years, and soon will sit the exams.I am always looking for my skills to refined/improved, like most passionate designers.I have various books to get through etc.So much learning, i feel a designer should not delve and get to bagged down with all there is to learn (will drive you crazy) but if you are so determined etc… your road will lead you to go where you want to go… Trial & Error!

    Great blog.

    • jamal,
    • January 11, 2011
    / Reply

    really superb …….amazing tips , nowi am feeling more confident on web designs…thanking

    • Cris,
    • February 2, 2011
    / Reply

    this is great! Thanks. Great Article

  25. / Reply

    WOW.. really great article & very helpful. Thanks a lot…

  26. / Reply

    Nice one……….. specially the uI pattern one.

  27. / Reply

    Nice for exlpore more…. ^_^ I love design

    • azdrian,
    • July 22, 2011
    / Reply

    very nice article!

  28. / Reply

    Best one ever :))

    You could have put some websites too for each point. For example for color pattern search you could have put http://kulers.com or if someone wanted user interfaces based on color patterns they could have searched on http://uicart.com

    Also for wireframes, you could point some wireframe tools like http://www.balsamiq.com/

    • eye,
    • September 18, 2011
    / Reply

    ya i like it

    • Anag,
    • September 26, 2011
    / Reply

    great collection. thanks for sharing this.

    • Mita,
    • November 11, 2011
    / Reply

    Great article! Love it..I am looking at refreshing my skills and this really helps!

    Thanks a ton!

  29. / Reply

    Really some high and good sounding conversation is provided !!

  30. / Reply

    Great post. It is fantastic when a web designer does span across all the disciplines in web development because it all makes more sense then. Putting the pen down at the beginning of the project with the end objectives in mind is what any client should dream of, but most will never figure it out. They generally prefer the guy drawing the pot of gold at the end of the rainbow.

    • Nisha,
    • May 31, 2012
    / Reply

    Get article! I loved it reading over and over again.

    • Nisha,
    • May 31, 2012
    / Reply

    Great article! I love to read it over and over again.

    • Jeremy,
    • October 17, 2012
    / Reply

    This was really great. Enjoyed reading it and better yet loved seeing that I am already doing a number of these.

  31. / Reply

    Point 10 is very relevant, I have learnt from previous project mistakes especially within the web design world !

  32. / Reply

    This is a nice article. I have got lot of knowledge and I will try to keep up those points which are I don’t have.

    • Dave,
    • June 19, 2013
    / Reply

    Well, Ok, here is an idea for you. There is an Html facility rarely or ever used at all. It is “Layers” (not tables!). The only program that facilitates using layers is MS Expression Web (EW) Ver 4 – (and SP2 is good – it’s free too! on Microsoft site.)

    Here is the thing, though: layers are divs but not all divs are layers. Layers can be drawn right on the Html design area in EW easily to any size you want. You can put anything into that layer you want, images, text, flash elements, sliders… whatever. You can move a layer anywhere on the page you want it by drag and drop. All layers are independent of each other unless you choose to link them and then they can be moved together as a group but remain independently moveable nonetheless.

    Layers have dimensionality. They are 3D and can sit on top of each other in whatever depth of layers you choose and that dimensionality is always changeable.

    Layers behave wonderfully in all browsers (even old ones) and they are 100% compliant with Html5 and CSS3. You can never use a “container div structure” again… NEVER! You remain marvelously fluid and flexible for your clients because if they change their mind and want THREE columns, oh no, four columns, with images crisscrossing over the whole page, that is fine… easy to do in a few moments because there is NO container div and no fussy container div structure that gets broken again and again when clients change things.

    You can see how they work at: http://skyboroteaching.com/free_tutorials.htm – and they get truly liberating once you get over NOT doing container divs (which a lot of designers seem to be stuck on.) This works and is worth your investigating.

    Enjoy. Oh, did I say it was 100% compliant with Html5 and CSS3??? It is. Works consistently in all browsers (even old ones) and allows you design freedom in Html editor. But, only in EW. Layers do work in Dreamweaver but the program ignores them and does not allow drag and drop (just not there.)

  33. / Reply

    point no 3:-> SEO technique i think there are very less people in market have idea about how to promote the website so keep this things in mind while searching for website marketing

    • Megabyte,
    • April 28, 2015
    / Reply

    Just an FYI… I clicked on the author’s website and her navigation took me to a page with a whole bunch of ads for porn. You probably want to remove that link at this point…

      • aidanoxp,
      • April 29, 2015
      / Reply

      Thanks for informing us. We have deleted the links.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.