|
By Cameron Chapman
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.
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.
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.
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.
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.
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.
covers the concept of the “fold” in web design and talks about why it’s not important.
Grids
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.
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
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.
CSS
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.
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.
covers the pros and cons of using a CSS framework for designing and coding the front end of your site.
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.
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.
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.
, 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.
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.
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.
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.
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
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.
JavaScript and AJAX
is a blog that covers JavaScript, jQuery, MooTools and even some CSS.
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
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.
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.
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.
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.
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.
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!
