Web Design Basics
The following articles will help you learn web design whether you are already a professional web developer or are just getting started learning web design. Even if you've been doing web design for a while, the resources available on this site can help you hone your skills and create better looking web pages.
Elements of Good Design
Good web design is the same as good design. If you understand what makes something good design you'll be able to apply those rules to your web design. The elements of good design apply whether you are designing a web page, a business card, or a t-shirt. And the links below will help you understand the important features of good design.
- What is Design?
- Elements of Good Design
- Principles and Rules of Good Design
- What Design Scares You? - Examples of Bad Web Design
- The Web is Not Print
- 10 Tips to Designing a Great Web Page
- How Your Design Drives Away Your Readers
- Learn Web Design Terminology
- The Importance of White Space in Web Designs
- Learn Even More about Design...
How to Design the Layout of a Web Page
Many people think that the layout is the design, and in many ways it is. Layout is the way the elements are positioned on the page. Once you understand the basic principles of web design you can start placing the elements on the page. By creating an amazing web layout, you create the bones of an amazing design. And the links below will help you learn what makes a great layout great and how to apply that to your web designs. Plus you'll find links about responsive web design (RWD) as the primary focus of RWD is to change the layout depending upon the width of the device viewing the page.
- How to Decide Where Your Elements Should go in the Layout
- Once You've Decided the Placement, Learn the Basics of How to Lay Out Web Pages
- Basics of Web Layout
- What is Responsive Web Design?
- How to Build a Responsive Design for Your Website
- Don't Use Tables for Layout
- Tableless Layouts - Using CSS Positioning to Lay Out Web Pages
- Most Web Layouts are Formed from Grids
- White Space is a Key Component of Layout
- Sample Layout Alignments for Web Pages
- How Long Should Your Web Page Be
- Fixed Width Layouts Versus Liquid Layouts
- Free Layout Templates
- Understand Layout Jargon
- Learn Even More About Web Page Layout...
Fonts and Typography
Fonts are the way your text looks on a Web page. And most Web pages have large amounts of text. When you're thinking of design, you need to think about how the text looks on a micro-level (the font glyphs, what font family, etc.) as well as the macro-level (positioning blocks of text and adjusting the size and shape of the text). These resources explain how to work with fonts on Web pages.
How to Use Color
Color is everywhere. It's how we dress up our world and how we see things. Color has meaning beyond just "red" or "blue" and color is an important design element. These color resources teach how to use color effectively in Web design.
- Colorizing the Web
- Color Symbolism
- Color Wheel and Color Theory
- Color Harmony
- Creating a Web Color Scheme
- Web Color Synchronization
- Color Charts
- Is the Browser Safe Color Palette Really Required?
- Color Glossary
- Additional Color Resources
Graphics and Images
Graphics are the fun part of most Web pages. As the saying goes "a picture is worth 1,000 words" and that's also true in Web design. Learn how to get the most out of your Web images with the following links.
- How to Add Images
- Taking Great Photos for Web Sites
- When to Use JPG or GIF Formats
- Make Your Images Small
- How to Protect Your Digital Images
- Graphics Glossary
- How to Build an Image Map
- How to Choose Graphics Software
- More Help with Graphics and Images
Tackling Web Navigation
Navigation is how your customers get around from one page to another on a Web site. Navigation provides movement and gives your customers the chance to find other elements of your site. You need to make sure that the structure of your Web site (the information architecture) makes sense so that your customers aren't forced to simply use search.
- Designing Effective Web Navigation
- Navigating Web Sites
- Organization will Help Your Navigation
- Link Rot: Are You a Culprit?
- Web Pages Should Go Away
- Adding Search to Your Web Site
- What is Information Architecture?
- Additional Web Navigation Resources
Accessibility and Usability
Accessibility and usability are often seen as a detriment to Web design, but a good designer focuses on making their site useful to as many people as possible. The links below take you through the basics of making an accessible site without compromising the design.
- What is Accessibility?
- What is Usability?
- What do the Accessibility Guidelines Mean to Me?
- How to Write Accessible Web Pages
Web Design Software
Most Web designers prefer to work in WYSIWYG or "What You See Is What You Get" editors because they provide a visual interface to the design. But finding the best Web design software is more than just WYSIWYG or not. Plus there are other tools you will need to build Web pages beyond just the Web editor.
- Find the Right Web Design Software for You
- Before You Buy a Web Design Editor
- Myths and Facts About Modern WYSIWYG Editors
- WYSIWYG Isn't Really
- The Best WYSIWYG Editors for Windows