Life Realities

Web Design Basics
By Jennifer Kyrnin, your Guide to Web Design / HTML

Web design uses all the same elements as print design. You need to explore the space and layout, handle fonts and colors, and put it all together in a format that puts your message across. These resources will help you learn Web design whether you are already a professional Web developer or just getting started in the Web arena.

1. Elements of Good Design
2. Fonts and Typography
3. How to Use Color
4. Graphics and Images

5. Web Layout Basics
6. Tackling Web Navigation
7. Accessibility and Usability
8. Web Design Software

Elements of Good Design

Good Web design is the same as good design. If you understand the elements that make up good design, you'll have a Web page that works well. These elements of good design apply whether you are writing a Web page, a business card, or a t-shirt and once you understand them you'll have the skills to be a great designer.

1. Elements of Design
2. Principles of Design
3. Web Design Glossary
4. 10 Tips to a Great Web Page

5. The Web is Not Print
6. How to Drive Away Your Readers
7. More Web Design Basics

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.

1. What is a Font?
2. Web Typography
3. What Font Size Should I Use?

4. Font Weight
5. Continue Learning About Fonts

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.

1. Colorizing the Web
2. Color Symbolism
3. Color Wheel and Color Theory
4. Color Harmony
5. Creating a Web Color Scheme

6. Web Color Synchronization
7. Color Charts
8. Is the Browser Safe Color Palette Really Required?
9. Color Glossary
10. 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.

1. How to Add Images
2. Taking Great Photos for Web Sites
3. When to Use JPG or GIF Formats
4. Make Your Images Small
5. How to Protect Your Digital Images

6. Graphics Glossary
7. How to Build an Image Map
8. How to Choose Graphics Software
9. More Help with Graphics and Images

Web Layout Basics

When people think of Web design often what they mean is the layout. Layout is the organization of elements on a Web page. First you need to start with basic design principles. Once you understand them, you can move through how to place elements on your Web page. These links and resources will take you through the steps to learn good Web layout design.

1. How to Decide Where Your Elements Should go in the Layout
2. Once You've Decided the Placement, Learn the Basics of How to Lay Out Web Pages
3. Definition of White Space
4. What's the Difference Between Padding and Margins?
5. Fixed Width Layouts Versus Liquid Layouts

6. Use Real Text for Testing Page Layouts
7. Web Design Gallery - Layout Ideas
8. Layout Glossary
9. More on Web Layout

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.

1. Designing Effective Web Navigation
2. Navigating Web Sites
3. Organization will Help Your Navigation
4. Link Rot: Are You a Culprit?

5. Web Pages Should Go Away
6. Adding Search to Your Web Site
7. What is Information Architecture?
8. 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.

1. What is Accessibility?
2. What is Usability?
3. What do the Accessibility Guidelines Mean to Me?
4. How to Write Accessible Web Pages

5. Creating Color Blind Friendly Web Pages
6. Validating for Accessibility
7. Advanced Topics in Accessibility and Usability

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.

1. Find the Right Web Design Software for You
2. Before You Buy a Web Design Editor
3. Myths and Facts About Modern WYSIWYG Editors
4. WYSIWYG Isn't Really
5. Top WYSIWYG Editors for Windows

6. Top WYSIWYG Editors for Macintosh
7. Top Web Design Suites for Windows
8. Top Web Design Suites for Macintosh
9. Dreamweaver Resources
10. Other Web Design Software Needs

Jennifer Kyrnin, Your Guide to Web Design / HTML