Design Resources

[Instructor]

Web Design Process

Individual Articles

How to Start a Web Design Project - Not sure how a website is designed in the real world? Well, don't worry. Designmoto has provided a helpful infographic to walk you through the process.

Research

Videos

Just Enough Research by Erika Hall - A great summary of how to research the design of interfaces for websites and applications.

Individual Articles

Carrying Out Successful Research for a Web Project - This article breaks down the various levels of research involved in a web design project and what you the designer need to get out of which level in order to be successful.

Web Design Tips

Individual Articles

27 Research-Backed Web Design Tips: How to Design a Website That Works - Exactly what it says on the tin. A collection of tips and tricks that will immensely improve any website you are designing. Read through this one and reference it frequently.

Article Collections

Smashing Magazine - The finest, most useful, web and mutlimedia design magazine on the internet. It has some pretty eye opening articles about planning, web and print design, careers, and the tecnical aspects of web design.

Web Design Ledger - A blog and news site filled with tutorials, design inspirations, and articles about web design.

1stwebdesigner - A neat collection of articles about web design techniques, design samples, and web design theory.

Page Layout

Individual Articles

What do common web layouts contain? - A quick summary of web page layouts. Great for getting your feet wet.

5 Awesome Home Page Design Layouts You Can Copy Today - Don't let the name fool you. This is a great breakdown of page layout and content prioritization on your homepage. It discusses navigation, interactivity, ease of use, and primary and seconday content.

Web Layout Best Practices: 12 Timeless UI Patterns Analyzed - A collection of fantastic UI examples broken down into a series of problems and their solutions according to web best practices. It includes examples of eye tracking and human information processing.

10 Rock Solid Website Layout Examples - A great collection of sample website layouts to inspire your designs. Note: Always start simple. You can add color, gradients, textures, photos and other detail further along in your iteration. Make sure your layout is good first.

Which Layout? Static, Liquid, Adaptive, or Responsive - A good breakdown of terminology and functionality in page layout. We'll mostly be working with liquid and responsive layouts in this class.

Typography

Article Collections

Typography & Web Fonts - A List Apart's collection of typographic articles. Covering theory, practice, and human psychology. These are a fascinating set of articles on various design topics, some you thought were unrelated to typography. Give 'em a look.

Individual Articles

The Rules of Responsive Web Typography - A fantastic breakdown of web typography with an emphasis on responsive design and how the rules of typography you learned in print design translate to the web. Good stuff!

Professional Web Typography - A DEEP dive into the "whys" and "hows" of web typography. Covering both theory and practice in a series of easily accessible "chapters". Anything you might have ever wanted to know about web typography can be found here. Highly recommended!

The Elements of Typographic Style Applied to the Web - Everything you ever wanted to know about typography on the web. It's a little old, but the principles and examples still hold up. Worth a read!

A Reference Guide For Typography In Mobile Web Design - Smashing Magazine has written a great article on how modern typography must be refined in the age of mobile design.

10 Tips On Typography in Web Design - A great set of tips on typography in general and the web in particular. Easy to ready an easy to digest. Take 'em one at a time and use 'em. Highly recommended!

Color

Individual Articles

Web design color theory: how to create the right emotions with color in web design - A great article that covers the basics of color theory, color terminology and the psychology of color in design. Time to start brain hacking!

An Introduction to Color Theory for Web Designers - A very good breakdown of color theory with some great tool links and good case study examples.

How to Choose a Good Color Scheme For Your Website - An excellent breakdown of the process of choosing colors for your design. It has numerous very specific examples and walks you through the process in detail. Highly recommended!

Color psychology in web design - A great quick reference guide to the effects of various colors on the human mind. And they say mind control doesn't exist!

The Psychology of Color in Web Design - Another handy dandy quick reference on the psychology of color, this time in infographic form!

Design Examples

Best Web Gallery - A gallery of some of the best web design online. Browse through these and breathe in the creativity!

Web Creme - A constantly updated list of examples of the best web design on the internet. Updated daily so check back frequently.

Unmatchedstyle - Another curated list of awesome web designs. In this case curated for excellent use of CSS.

Webdesignersblog - A blog of great web designs organized into categories based on the content of each website.

The Best Designs - A collection of excellent CSS and Flash based designs.

CSSMania - Yet another excellent CSS site listing. Look and learn.

Designrfix - A collection of featured artists, designs, and websites meant to inspire graphic designers and web designers.

CSS Zen Garden - A group of identical HTML pages styled to look completely differently using nothing but CSS.

Words - A powerful example of the power of minimalism and type.

Vibrant Colors In Web Design: 20 Visually Impactful Websites to Inspire You - A fascinating collection of websites that demonstrate the power of color.


Tools

Tuts+ Network - A nifty collection of tutorials for a variety of different softwares, design methodologies, and programming languages. Explore!

Layout

960 Grid System - The industry standard grid layout system. It's getting up there in years, but is still relevant today. Grids really help with laying out websites and building in future responsiveness. Use this to make your life easier.

Color

Paletton - The best color scheme creation tool on the internet, period. Use it and abuse it!

Color in Motion - Hands down the best resource on color on the web. A hilarious little interactive website that goes through the individual colors, their compliments, what each color stands for and how to use that color to communicate. Go through this thing first. Warning: This site needs Flash.

Font

What the Font? - Stumped by a font? Simply upload an image sample of the font here and What the Font will tell you what you've got.

Typetester - An online application that lets you compare fonts to one another.

Filler Text

Bacon Ipsum - A meatier filler text. Simply select how many paragraphs of filler text you need and Bacon Ipsum will provide. Use it to pack your preliminary designs.

Filler Images

Placekitten - Type in your images dimensions after the placekitten URL (ex. an image with a width of 200 and a height of 300 would be http://placekitten.com/200/300) and placekitten will provide an image to fill the area.