A DIY Web Design Education

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. 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! Featured Image by MChe Lee on Unsplash