Web Design Basics
By Jennifer Kyrnin, About.com 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.
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.
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
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.
- 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
- Definition of White Space
- What's the Difference Between Padding and Margins?
- Fixed Width Layouts Versus Liquid Layouts
- Use Real Text for Testing Page Layouts
- Web Design Gallery - Layout Ideas
- Layout Glossary
- More About 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.
- 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
- Creating Color Blind Friendly Web Pages
- Validating for Accessibility
- 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.
