A lot of designers and aspiring designers take formal design courses (or get design degrees), while many others wish they could take the time to get some formal design education. But not every designer has the time. After all, if you've come to design later in your career, or just have other responsibilities that preclude you from attending formal classes, going to school for a formal design degree just might not fit into your life.
Image by laffy4k
But that doesn't mean you can't learn just as much as those who have taken formal classes and be just as good a designer. There are tens of thousands of articles, websites, and other web design resources available to anyone willing to look for them. In fact, there are so many that it can be confusing and overwhelming figuring out where to start. That's why we've compiled this list of design resources, based around the same kind of curriculum one might find in a formal design course. It'll take you through the basics of design theory through some coding and scripting, and even touch on things like information architecture, user experience design, and image editing.
It's by no means a comprehensive list, but it's a great place to get you started, and can give you a good foundation for your design education. Even if you plan to get a formal degree (or are in the midst of getting one), the articles here can give you an advantage over your classmates who are just following the curriculum. They're also valuable for those who have a formal degree but would just like a refresher course on a few subjects.
Web Design 101: The Basics
We all need to start somewhere, and the articles here provide a good foundation for the concepts discussed in later sections. These are largely theory-based articles that will serve as an introduction to web design.
Basics of Web Design
is a section on the Web Design from Scratch site that covers basic topics like understanding web design and the principles of good page design.
Understanding Web Design
is a fantastic article on A List Apart from Jeffrey Zeldman that discusses what web design is on both a theory and a practical level. A thorough understanding of web design will lead to better designers.
Web Design Survival Guide
is an article that highlights free software, tools and methods that will allow you to build a website from scratch. The article focuses on PC design applications, but the methods described are universal.
Back to Basics Design
is a series on Renegade Zen that discusses the trend of simplifying design and explains the mistakes that lead beginning designers to create unnecessarily complicated and cluttered designs.
Front-End and User Interface Design
Front-end and user interface design are what most of us are thinking of when we say web design. This is the visible part of the site, the part that's shown to visitors. There's a lot of theory here, as well as plenty of practical information and guidance.
Fixed vs. Fluid vs. Elastic Layout: What's the Right One for You?
covers the advantages and disadvantages of each type of layout, as well as offering designers a guide for choosing the optimal one for each project. Examples are also provided for each.
12 Useful Techniques for Good User Interface Design
provides a dozen best practices for designing more usable interfaces. Included are things like highlighting important changes, enabling keyboard shortcuts, and color-coding lists.
Killing Some Bad Layout Conventions
, from Andy Rutledge, discusses a number of layout conventions that aren't as efficient as they should be, and yet persist in the design world. Included are certain 3 column layouts and traditional news site layouts.
The Lost Principles of Design
covers a variety of traditional design princples that every designer should know. They cover balance, unity, scale, and directional forces, among others.
Sketching in Code: The Magic of Prototyping
discusses the advantages of prototyping over wireframing, and why designers should develop prototypes to streamline their design and development process.
Design and the Divine Proportion
explains the concept of Phi and shows you how to incorporate it into your designs.
Blasting the Myth of the Fold
covers the concept of the "fold" in web design and talks about why it's not important.
Design By Grid
is a site devoted to grid-based design with articles, resources, and tutorials.
Myths and Misconceptions About Grid Systems
explores common arguments against grid-based design and debunks them.
Grid-Based Design: Six Creative Column Techniques
covers a variety of grid-based design techniques, including examples and case studies.
Five Simple Steps to Designing Grid Systems
is a five-part series from Mark Boulton on how to design and use your own grid systems for better web designs.
Applying Mathematics to Web Design
compares various mathematical proportions and geometry in webpage layout and design.
Directly related to front-end design is front-end coding. This is the behind-the-scenes stuff, the HTML and CSS, that structure the front-end of your site and make it display properly. While not all designers code their own pages, it's still valuable to be familiar with HTML and CSS so you have the option and can better work with those who do
code your sites.
10 Rules of Front-End Coding
are the 10 most important points to remember when designing a website from the perspective of a front-end designer.
8 Methods to Bring Your Front End Coding to Rockstar Levels
covers a number of techniques for improving your front end coding.
Top 10 Best Practices for Front-End Web Developers
offers nearly a dozen excellent ideas for improving your front-end development.
HTML Code Tutorial
offers up tons of HTML tutorials, broken down by category.
is a tutorial from W3C Schools that covers all the basics you need to know to start working with HTML.
Dave Raggett's Introduction to HTML
is an older but still relevant introduction to HTML that's simple to follow and understand.
is a blog devoted mostly to CSS (though it covers other web design topics, too) and a vital resource for learning both basic and advanced CSS techniques.
The CSS Blog
covers CSS topics exclusively and provides great information for beginners and more advanced users alike.
What You Need To Know About Behavioral CSS
offers a fantastic introduction to behavioral CSS properties like scale and rotate. It also discusses transitions and animations, and talks about browser compatibility for behavioral properties.
Frameworks for Designers
covers the pros and cons of using a CSS framework for designing and coding the front end of your site.
Concept to CSS
follows the process of converting a website mock-up to a fully-functional website using HTML and CSS.
is a tutorial covering basic CSS from W3C Schools. It's interactive and easy to follow and understand.
Entire degrees could be taught about user experience. It's a vast subject, and something that every designer should have at least a basic grasp of. The sites here have tons of information, mostly on a theoretical level, but also with plenty of practical advice.
is devoted exclusively to user experience articles and has an extensive archive filled with valuable information for both UX beginners and more advanced users.
is a vast resource for user experience information, that talks about UX from both a design and a strategy viewpoint.
has a diverse collection of user experience articles and tutorials.
Visual Decision Making
, from A List Apart, covers how individuals make decisions. Understanding how your visitors make decisions while on your site will lead to a better user experience and result in more visitors following through with what you want them to do while on your site.
10 Most Common Misconceptions About User Experience Design
from Mashable offers some great tips for understanding UX design.
Ruining the User Experience
covers a number of things that designers sometimes do that ruin the experience of site visitors and offers advice on avoiding them.
How information is structured on a site can mean the difference between a user-friendly design and one that's hard to use and has very few repeat visitors. Learning the theories behind information architecture and how to put them into practice in your own designs is vital.
from Web Design from Scratch offers a handful of information architecture articles, including case studies and basic information, as well as more advanced topics.
Complete Beginner's Guide to Information Architecture
is a comprehensive article from UX Booth that covers a gives a thorough overview of what IA is, resources, and some prominent information architects.
Top 10 Information Architecture (IA) Mistakes
is an article from Jakob Nielsen about the most common information architecture mistakes designers make, including some tips on correcting them.
The Elements of Social Architecture
, from A List Apart, outlines the patterns and guidelines for creating good information architecture in a social media setting.
The Curse of Information Design
is another article from A List Apart that covers some of the pitfalls of strict information architecture and its potential conflicts with good design.
Findability, Orphan of the Web Design Industry
explains how "findability" is vital to a successful website. Making it easy for visitors to find your website, find new content once they're on your site, and to rediscover content they've found previously will lead to happier users.
Typography is one of the most important parts of web design. It's also easily overlooked by many beginning designers who are more interested in graphics and functionality than the type on a given page. But excellent typography is what sets the outstanding designs apart from all the rest.
I Love Typography
is one of the leading typography blogs out there. They cover typography news, design, and theory, as well as showcasing great examples of beautiful and functional typography.
showcases typeface designs, offers book reviews, and plenty of commentary on typography both online and off.
8 Simple Ways to Improve Typography in Your Designs
offers simple solutions for imparting great typography design in your websites.
5 Principles and Ideas of Setting Type on the Web
is another excellent rundown of typography principles you should be applying to your website designs.
Five Simple Steps to Better Typography
by Mark Boulton is a five-part series on improving the typography in your designs. It covers typographic measure, hanging punctuation, ligatures, and typographic hierarchy.
Image Editing & Digital Illustration
To a large extent, digital illustration and image editing is intimidating to those who don't consider themselves artistically inclined. But mastering programs like Photoshop and Illustrator are vital for most web designers and expand their options in virtually all aspects of design.
focuses on Photoshop tutorials with a catalog of step-by-step tutorials, many with PSD source files to aid you in your design.
is an excellent resource for all sorts of tutorials on every aspect of digital illustration.
has a huge collection of both free and premium vector tutorials suitable for intermediate to advanced users.
has a great archive of free and premium Photoshop tutorials for intermediate and advanced users.
Understanding Progressive Enhancement
covers the basics of implementing progressive enhancement rather than graceful degradation, and why progressive enhancement is preferable.
combines articles on PHP techniques, tutorials, and an active forum where you can get your questions answered.
quick reference guide for php functions and techniques.
is the official documentation for PHP, viewable online or by download.
is the official tutorial for PHP from W3C Schools.
has an extensive archive of AJAX programming information and resources.
Developing Sites With AJAX: Design Challenges and Common Issues
is a thorough introduction to AJAX and a great place to start for beginners. It covers all the theory you'll need to get started with AJAX development.
Flash Animation Tutorials
has a wide variety of Flash tutorials available, from beginner to more advanced projects.
has an excellent section devoted to Flash development and design with tutorials covering everything from developing small flash applications to full websites.
Best of Adobe Flash Tutorials
is an article that covers some of the best Flash tutorials available.
has a great collection of Flash tutorials that cover both beginner and advanced techinques.
Design Process and Project Management
The way you manage your design process and the projects you work on is something that's often overlooked by many design courses. But developing an efficient design process and learning how to effectively manage projects both large and small can lead to an easier job on your part and happier clients.
10 Project Management Tips
that will help you keep your sanity and save you from extra, unneeded hassle when juggling multiple, complex web projects.
The Art of Finishing A Project
talks about how, oddly enough, sometimes you don't know when a project should be considered "finished" and how to determine when your obligation to a client is complete.
Eight Tips on How To Manage Feature Creep
when your initial plan starts getting unexpected "add-ons" by the client.
The Web Design Process - Step by Step
is an excellent introduction to the steps required to make a website. It's the perfect place to start for someone completely new to the process.
10 Tips for Efficient Design
offers tips that can speed up your web design process and make you a more efficient designer.
This is one area that a lot of design programs are lacking. While many designers fresh out of school will find work with an established design firm or in an in-house design department, there are others who may, sooner or later, want to strike out on their own and start freelancing. It's important that these designers know a bit about how to run a business and how to deal effectively with clients. Even designers who have no interest in freelancing or setting up their own design firm will benefit from a bit of business knowledge, which will likely result in better interactions with their clients and a better grasp of how the entire client-designer relationship works.
has a great archive of freelance and business-related articles aimed mostly at designers and other creative-types.
offers up posts on productivity, inspiration, lifestyle, marketing and even how to articles for freelancers.
is an article from Andy Rutledge that discusses what designers should aim to find out from prospective clients prior to actually bidding on a project. He stresses the importance of carefully vetting clients for the best results.
Filling Your Dance Card in Hard Economic Times
, from A List Apart, is a guide to finding work even when the economy isn't great. It's gives a step-by-step process for maximizing your chances of finding clients.
Calculating Hours - The Client Factors
covers how designers can incorporate factors from individual clients in how they quote and bill for a project. A very helpful (if subjective) chart is included that shows how you might estimate hours based on specific complications to any project, such as a client team involving their own in-house design staff or the client having strong ideas about the design and/or layout.
While this is by no means an exhaustive list, it is a good place to start and provides a framework for a self-guided design education. Please feel free to share additional resources you've found helpful in the comments!
Great article for any one wanted to self learn web design.
Wow, great list!
Thanks a lot, since I’m only just starting a list like this is very useful.
Wow, thanks! Very useful!
Thank you for the useful info! Just what I needed! I am a self-taught ‘artist’ and now entrepreneur (trying to be). I cannot afford going to school. I am trying to find as much (free) information as possible about starting an online business. And -of course- I am sharing what I find with my site (self-made, still need lots of work) and twitter. And as you can read my grammar could be better… English is my second language (self-taught) :)
Thanks Noupe, this will help me :)
If you have ressources in French I’ll be grateful
Great list, I just need to make some time to go through to at least skim it. Thank you!
Please keep up the awesome work.People like me have benefitted so much by reading your articles.Thanks a bunch :)
Ty so much for this great resources!
Learn learn learn :)
This is very good for beginners too. I will definitely use it.
Great article! This will help further the education in many ways.
Great post!! A lot of interesting links.
Great sign post… blog post :)
Great article and thank you for sharing. This will definitely come in handy for a self taught aspiring designer & developer such as myself (struggling by bouncing from 1 subject to another). Great breakdown and resources and I will fit this into a set schedule and will follow it. Thank you again and keep up the great work!
very very nice thanks lot
Thanks very much for sharing! Great list!
You should really get a flattr button!
awesome collection … must say great work thanks for sharing.
Thank you so much for all of the great info! I see much bookmarking in my future.
Definitely a nice list if you want to be a programmer or understand how a good user interface works, but I might debate the DIY web “design” education. Being a good web designer is more than just knowing grids, UI and coding. It is understanding the art and visual side of web design. How to make a site visually interesting is just as important as understanding the technical side.
I would seriously consider retitling this article “DIY back-end education”.
I agree. And please call the whole business ‘webdevelopment’ and skip the ‘design’-part. Of course someone can learn to fly by just trying. But likely, not everyone trying, will survive
never been to your website before, thanks a million for sharing.
Great compilation article. Thanks for mentioning my Web Design Survival Guide :-)
Wow what a great list I can’t even imagine how long that would have taken to put together.
I would like to add lynda.com, kelby training, vtc.com all great premium resources
wow, enough to read to keep me busy for next 2 months :)) Thanks mate, I just hope I will survive reading this stuff :))
This is great!
You can learn more in the “street” than in the school, believe me!
Great post. Would be very useful for building my site.
awesome collections. even i am not fresher, I will do read whole articles to get up in the air for next level.
really great stuffs
Thank you thank you thank you! What a great list to get any new and aspiring web designer going. props for taking the time to put the list together, this will make for some interesting summer reading.
Thanks for a great list! I’m working on a site for beginners called Basic Websites at basicwebsit.es — keep an eye out..
Thank you. This is great.
wow, it is really a good and helpful article, i really like it and get the most from it.
This is excellent.
I currently work full-time to cover my mortgage and cannot foresee a future in which I could have taken time out to study even part time, and most design courses run during the day so I can’t even do night courses.
This list, broken down into a curricular schedule is wonderful – It’s also given me a whole swag of sites to add to my RSS feeds.
Once I’m done with my current home-study course, I’ll be setting myself on a rigorous study schedule with this list!
Thats an amazing collection there…wow. Thanks
great list thank you!
I learned HTML and CSS by reading the Headfirst series of books. Those books are great for getting the basics. Then the rest can only be learned by actually practicing web design.
Fantastic artical. Obviously a lot of research has gone into this one. I’m currently in the situation you described and have been self teaching myself everything from photoshop all the way through to PHP. I could have really used this collection of artical 6 months ago! Having said that there’s a lot on here that will be keeping me busy for a while. Well done.
Wow, thats a heck of a list. I think its going to take a lot of hours to go though it, but from what I scanned it has a lot of great information there. Thanks for this.
OMG, thank you so much for this guide. I was planning to specialize in Web Design (I’m currently studying Graphic Design) en this is by far, the best resource I’ve found. :’D
Always wonder how one can self-learning web design. Now I know :) Thanks for the post
wow just what I needed! I’ll read them all. Great compilation! thank you
hey dear i’m a web designer cool poost.
I’ve found your web via my friend.
I’m very happy to see your website.
I have learnt more
Great article for those wanting to jump into the world of we’d design. I wish someone had collected all these resources before I jumped from print design into web design.
One resource I noticed not listed is the W3C http://www.w3.org. A place that will keep you up to date on the latest standards as well as a useful place to validate your site and styling. This is definitely an important process we never skip when creating a website. It’s just as important to validate as it is to make sure your site works and appears appropriately in IE6. Although it can be a pain, our clients rarely call and say hey it’s not working as expected.
Wow. Thanks for all the info. Must have taken a lot of time to complie?!
If you want to know more about the SECRETS of SEO join with me
Is there a way to see how the pages that have been indexed are ranked without having to type it in at Google and then start searching ?
there is a god… i have been wanting to study design for the longest time.. but somehow i still haven’t managed to put together enough moolah for a college degree… so i started trying to learn myself.. which was a huge disaster.. cos i couldnt find the write articles to start with and i’d end up frustrating myself.. until i came across this.. thank you guys
A fantastic article. I beleive web design can be self taught! Education is sometimes jut a status . Web design takes practice and to be good you have to have experience!
Thanks for the article!
Thanks for this great list of links! A lot of what you posted are things that can easily be overlooked by people fairly new to the design business such as myself. Looks like I have a ton of reading ahead of me! Thanks again!
this is great a good one thanx for sharing.
Hey. Thanks for the shout-out for Web Design From Scratch. We’ve revamped the site recently. Hope you still like it!
Thanks for the lsit :P
Student Guide to Web Design is a good resource that could be added :)