May 17 2010

A DIY Web Design Education

Advertisement

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.

Grids

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.

Front-End Coding

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

HTML Code Tutorial offers up tons of HTML tutorials, broken down by category.

HTML Tutorial 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.

CSS

CSS-Tricks 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.

CSS Tutorial is a tutorial covering basic CSS from W3C Schools. It’s interactive and easy to follow and understand.

User Experience

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.

UX Booth is devoted exclusively to user experience articles and has an extensive archive filled with valuable information for both UX beginners and more advanced users.

UX Magazine is a vast resource for user experience information, that talks about UX from both a design and a strategy viewpoint.

UX Passion 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.

Information Architecture

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.

Website Architecture 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

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.

Typographica 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.

PSD Vault focuses on Photoshop tutorials with a catalog of step-by-step tutorials, many with PSD source files to aid you in your design.

GFX Artist is an excellent resource for all sorts of tutorials on every aspect of digital illustration.

Vectortuts+ has a huge collection of both free and premium vector tutorials suitable for intermediate to advanced users.

Psdtuts+ has a great archive of free and premium Photoshop tutorials for intermediate and advanced users.

Interactive Scripting

Almost every site online today has some kind of interactive scripting going on behind the scenes. Whether it’s PHP, JavaScript, Flash, or something else, learning the basics of how scripts work and what they’re capable of is important for any designer. While you don’t necessarily need a working knowledge of these to be a great web designer, at the very least an understanding of what they do can improve your finished designs and make it easier for you to work with programmers and developers.

Understanding Progressive Enhancement covers the basics of implementing progressive enhancement rather than graceful degradation, and why progressive enhancement is preferable.

PHP

PHP Builder combines articles on PHP techniques, tutorials, and an active forum where you can get your questions answered.

Weberdev quick reference guide for php functions and techniques.

PHP: Documentation is the official documentation for PHP, viewable online or by download.

PHP Tutorial is the official tutorial for PHP from W3C Schools.

JavaScript and AJAX

The JavaScript Blog is a blog that covers JavaScript, jQuery, MooTools and even some CSS.

Ajax Blog has an extensive archive of AJAX programming information and resources.

The Seven Deadly Sins of JavaScript Implementation covers a variety of things JavaScript developers often do that aren’t desirable. It’s a good place to check to make sure you aren’t picking up bad JS habits.

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

Flash Animation Tutorials has a wide variety of Flash tutorials available, from beginner to more advanced projects.

WebDesignDev 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.

Graphic Mania 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.

Design Business

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.

FreelanceSwitch has a great archive of freelance and business-related articles aimed mostly at designers and other creative-types.

Freelance Folder offers up posts on productivity, inspiration, lifestyle, marketing and even how to articles for freelancers.

Pre-Bid Discussions 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.

In Summary

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!

About the Author

Cameron Chapman is a professional Web and graphic designer with many years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

Comments and Discussions
  • Jordan Walker, 17 May 2010

    Great article for any one wanted to self learn web design.

  • Mike Heremans, 17 May 2010

    Wow, great list!
    Thanks a lot, since I’m only just starting a list like this is very useful.

  • mvhoute, 17 May 2010

    Wow, thanks! Very useful!

  • LD, 17 May 2010

    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) :)

  • NooN, 17 May 2010

    Thanks Noupe, this will help me :)
    If you have ressources in French I’ll be grateful

  • Edison A. Leon, 17 May 2010

    Great list, I just need to make some time to go through to at least skim it. Thank you!

  • AbyBeats, 17 May 2010

    Please keep up the awesome work.People like me have benefitted so much by reading your articles.Thanks a bunch :)

  • JonathanB, 17 May 2010

    Ty so much for this great resources!
    Learn learn learn :)

  • Sams0n, 17 May 2010

    This is very good for beginners too. I will definitely use it.
    Thanks..

  • Tony Dunsworth, 17 May 2010

    Great article! This will help further the education in many ways.

  • esaiz, 17 May 2010

    Great post!! A lot of interesting links.

  • Tim Ngwena, 17 May 2010

    Great sign post… blog post :)

  • Brian Jones, 17 May 2010

    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!

  • esranull, 17 May 2010

    very very nice thanks lot

  • JK, 17 May 2010

    Thanks very much for sharing! Great list!

  • JK, 17 May 2010

    You should really get a flattr button!

  • sarah, 17 May 2010

    awesome collection … must say great work thanks for sharing.

  • Sara, 17 May 2010

    Thank you so much for all of the great info! I see much bookmarking in my future.

  • Grant, 17 May 2010

    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”.

    • Michael Kozak, 18 May 2010

      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

  • wendell, 17 May 2010

    never been to your website before, thanks a million for sharing.

  • Cre8ive Commando, 17 May 2010

    Great compilation article. Thanks for mentioning my Web Design Survival Guide :-)

  • Rick, 17 May 2010

    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

  • ken the tech, 17 May 2010

    wow, enough to read to keep me busy for next 2 months :)) Thanks mate, I just hope I will survive reading this stuff :))

  • lush, 17 May 2010

    This is great!
    You can learn more in the “street” than in the school, believe me!

  • Sushmita, 17 May 2010

    Great post. Would be very useful for building my site.
    Thanks.

  • $hekh@r, 17 May 2010

    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

  • Kim Rejström, 18 May 2010

    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.

  • Nathan B, 18 May 2010

    Thanks for a great list! I’m working on a site for beginners called Basic Websites at basicwebsit.es — keep an eye out..

  • Henry Bui, 18 May 2010

    Thank you. This is great.

  • Amr hussien, 18 May 2010

    wow, it is really a good and helpful article, i really like it and get the most from it.

  • Laneth Sffarlenn, 18 May 2010

    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!

  • nathan powell, 18 May 2010

    Thats an amazing collection there…wow. Thanks

  • Greg Babula, 19 May 2010

    great list thank you!

  • Nathan Archibald, 19 May 2010

    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.

    great resource!

  • JonnyIrving, 20 May 2010

    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.

  • Jordan Wiedbusch, 22 May 2010

    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.

  • arnold, 22 May 2010

    bookmarked!

  • Alejandrama, 23 May 2010

    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

  • Mike Nguyen, 25 May 2010

    Always wonder how one can self-learning web design. Now I know :) Thanks for the post

  • monica aguinaga, 25 May 2010

    wow just what I needed! I’ll read them all. Great compilation! thank you

  • rosan vaishnav, 03 August 2010

    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.
    Thank you!

  • Tricia, 04 August 2010

    I have learnt more

    Thanks

  • Darlene Hill, 08 August 2010

    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.

  • james weaver, 19 September 2010

    Wow. Thanks for all the info. Must have taken a lot of time to complie?!

    Thanks Again,
    James

  • Daskar, 29 November 2010

    If you want to know more about the SECRETS of SEO join with me

  • Manoj, 30 November 2010

    Question:
    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 ?

  • dj, 06 December 2010

    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

  • Sarah, 14 January 2011

    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!

  • carbon, 21 January 2011

    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!

  • mintdesignnz, 13 March 2011

    this is great a good one thanx for sharing.

  • Dan, 19 April 2011

    Hey. Thanks for the shout-out for Web Design From Scratch. We’ve revamped the site recently. Hope you still like it!

  • PhotoshopWarrior, 06 October 2011

    Thanks for the lsit :P

  • Janna Hagan, 13 December 2012

    Student Guide to Web Design is a good resource that could be added :)

search form
 
image description image description