Web Design Articles
An index of articles on creating a well designed Web site. Tips and tricks in Web design and help designing your pages.
Articles by Date | Articles by Topic
Contrasting Foreground and Background Colors
A table of colors showing which ones contrast well together and which ones don't.
6 Ways to Get Unblocked
Web designers, like any creative person, can suffer from writers block. But because of our work, there are many ways you can learn to deal with the blocks and get unstuck. These six suggestions have worked for me to get new design ideas in the past and will work again.
Adding an IE Favorites Icon
When your readers bookmark your pages in Internet Explorer, do they get a
customized icon to represent your site? Learn how to create one and add it
to your site quickly and easily.
Advanced CSS
Get the most out of your cascading style sheets. Learn how to use font and text
properties and change the look of your HTML and XML.
Advice versus Control - Web Designers are Not Print Designers
Print designers have very different requirements than Web designers, and if you're designing your Web site like a print project you'll fail
Alignment in Web Page Layouts
Most Web developers, when they think of alignment think of the align attribute or the CSS float property or something like that. But the alignment of the elements on your page is just as important as whether your text is justified or your image is floated to the left. Alignment provides the structural framework of a design. The alignment can affect the mood of the page as well as how effective it is at getting its message across.
The Back Button - How People Use Web Sites
The back button is the most important button on a Web page, and it's not even part of the page itself, but the browser.
Basics of Web Design
Web design is made up of some basic premises, and if you understand them you can design pages that will impress and illuminate your readers. These fourteen tips will help you create great Web designs that work with your readers and not against them.
Basics of Web Layout
It's one thing to know how to build a Web layout, but it's something else to know the rules behind designing a layout that works.
Book Review: The Design of Sites by Van Duyne, Landay, and Hong, second edition
Using design patterns is a great way to create a site that works and is easy for your customers to use. The second edition of the book The Design of Sites, by Van Duyne, Landay, and Hong provides a huge number of paterns.
Box Elements
Box elements or block-level elements can be difficult to understand as they have different properties than standard in-line elements. Some commonly used box elements are p, div, and h1.
Browsing on the Bleeding
Edge
Before you add the newest HTML technology to your site, have you thought about
if you need it?
Building Your Home Page
Learn how to design a front page that explains what your business is and how it will help your customers. The first page is crucial to make a good impression and get off to a good start.
Changing the Design of a Page for Wireless Devices with the Handheld Media Type
First use a media type to define a style sheet for handheld or wireless devices. Then once you've decided on the style sheet, use these tips to create a page that is styled so that wireless devices get the most out of the design.
Changing Font Attributes
When you change your font type, you make your page more unique. This tutorial
will explain how to change the color, size, and face of your text. All with
one HTML tag.
Color and CSS
There are several different ways to specify color values in CSS, the best known are with color names and color numerical values. But there are two other ways you can define colors in CSS 3 and once you understand how you can define your colors you'll have more options available in your color palette.
Color Harmony
Learning to put together colors in a harmonious fashion is one of the most important skills of a Web designer. Once you understand color theory, you'll be better equipped to create color schemes that really work.
Color Symbolism
Color symbolizes many things to different cultures, but it is easy to forget this when designing a Web site. If you use color on your site, then you should be aware of the different meanings different cultures attach to color.
Color Tips for the Web
These tips for using color include color shorthand, finding color triads quickly, and whether or not you should use the browser safe color palette.
Color Wheel and Color Theory
Web pages are designed in color, but if you don't understand how color works, you could end up with some really ugly pages. Understanding the basics of color theory will help you create better Web pages.
Converting Web Sites to XHTML+CSS
Many Web designers have been building pages for years, either by hand or with an editor, and the idea of converting their site(s) to XHTML+CSS is daunting at best. This article looks at the issue of conversion and shows the pros and cons for converting, so you can make your own decision.
COPPA Turns One
Protecting children online is important. Learn about the US law that protects them
as well as other parental controls for the Internet.
Creating Better Links
Links are the mainstay of your site. If you don't have good links, people won't
stay.
Creating a Great Web Page
With this checklist of items, you'll create a page that is well formed, and user
friendly.
Creating a Web Color Scheme
Color schemes are important on Web sites, but it's easy to get carried away, especially if you like a large number of different colors. Use these standard color schemes to create a standard color scheme for your Web site.
Designing a War - Getting Attention With Your Site Design
Learn how to use different design techniques to get attention for unique events on your Web site.
Designing in Color
Learn how to write color codes and convert to hexadecimal from RGB.
Did You Know? - All Web Graphics are Square
Web graphics may look like they are round or have jagged edges, but they are all square. Once you understand the basic shape of a Web graphic, you can use it to manipulate the way your pages look
Differences Between Dreamweaver 8 and Dreamweaver CS3
Learn some of the practical differences between Dreamweaver 8 and Dreamweaver CS3 to help you decide whether or when to upgrade. What new features are must-haves and what features can you live without?
Dreamweaver Workspaces (for Windows)
How to change the workspace in Dreamweaver for Windows.
Dynamic Fonts
Use TrueDoc or OpenType to display the fonts you want to display on your Web pages.
Effective Web Navigation
Designing effective Web navigation is crucial to create a Web site that your readers can get around on. If you don't have decent navigation, even if they like the site, they'll leave without finding all you have to offer. Learn how to design effective Web navigation.
The Elements of Design
The elements of design are the basic building blocks of all design projects. The elements of design include lines, shapes, texture, color, and direction.
Emphasis in Web Design
Trying to make everything on a Web page stand out means that nothing will stand out. Good designers learn to use emphasis wisely so that the important parts of the layout dominate without overwhelming and there is a visual hierarchy that leads the reader through the Web page. You do this through the use of design emphasis.
Fixed Width Layouts Versus Liquid Layouts
Web page layout has essentially two different methods: liquid and fixed width layouts. Learn the pros and cons of each, and how you can decide to use one or the other for your site.
Flow in Design - Layout and Artwork that Conveys Motion
Visual flow carries the viewer's eye through the document. Using obvious flow elements like arrows or numbers is the most common way Web designers use flow, but there are other types of elements that can be used and mis-used to direct your readers to move along a specific path. The steps in this tutorial will show you examples of good and bad flow and help you learn the vocabulary of visual flow in design.
Font Families - Serif, Sans-Serif, Monospace, Script, Fantasy
A guide for beginning Web designers and anyone who uses fonts on Web sites to find the right font for the right situation. This article will help you choose fonts for your site that show your originality but also work for your readers.
05/19/2008 -
Improve Web Designs - What You Must Know About Graphic Design to Build Web Pages
Many Web designers don\'t have a background in graphic design when they start working on pages. But you can still learn the basics of good design. And these tips will help you to think like a graphic designer.
Is Your Site Cool?
Find out why Jared Spool says, "Cool doesn't cut it."
How to Add Styles with Dreamweaver
Dreamweaver comes with a very easy to use style sheet editor. The trickiest part is finding how to add your styles.
How to Add RSS Feeds to a Web Site with Dreamweaver
Sometimes, it seems like the only way to get an RSS feed is to have a blog or to write the RSS by hand. But there is a Dreamweaver Extension you can use to build RSS feeds for your Web site. This extension will build feeds manually or take content from your existing Web pages to build the feed.
04/17/07 -
How to Change the Doctype in Dreamweaver
It's easy to change the doctype in a Dreamweaver document.
How to Drive Away Your Readers
Are you trying to create a site that people want to read and return to? Or are you
doing things that make them never return, and tell all their friends to avoid it, as
well?
How to Save Money on Web Design Software
Some of the best Web design software packages cost hundreds of dollars, and if you need to buy graphics software, video software, animation software, or programming software, the costs can mount quickly. But with these suggestions for getting the most out of your Web editor, you can save money and buy only what you need to buy.
How to Set a Price for Web Design Work
Web design pricing is a hot issue for new designers - learn how to set your web design prices and charge your customers reasonable and fair rates and fees for web design work.
How to Use Dreamweaver Tracing Images
Dreamweaver makes it easy to go from a graphic design rendering of your Web page to the Web page itself using tracing images.
How to Write Web Pages for the iPhone and Other Wireless Devices
If you're going to build Web pages that can be viewed on cell phones like the iPhone, you should be aware of some of the drawbacks to these devices so that your site is not impossible to use. These tips will help you build Web pages that are either designed solely for cell phones and wireless handheld devices or help you design pages that adapt depending upon what type of device is viewing it.
Keeping Images Small
Once you have images on your site, you don't want them to slow it down.
Large Web Sites Don't Change Much
If you've been visiting one of the larger Web sites on the Internet for a long time, you may have noticed that many of them don't do massive redesigns the way that smaller Web sites tend to. Redesigns can be very difficult for customers to get used to unless they are done in an iterative approach.
Little Web of Horrors
Design tactics that will often scare away even the most dedicated reader. These tactics are the worst of the Web - and should be avoided at all costs.
Low Vision Web Page Layouts
Because the Web is primarily text, people with low vision often only need to expand the size of your text to be able to read it. However, even with the most flexible layouts, there can be problems when the reader zooms in using the Web browser. So some designers developed the idea of creating alternate style sheets that were written specifically for low vision readers.
Macromedia MX - A First Look
A first look at a fully-integrated Web development suite and server solution.
Macromedia Studio 8: A First Look
Macromedia Studio 8 offers an exciting upgrade to one of the best software suites on the market right now for Web developers and Web designers. The Studio 8 software suite includes Dreamweaver 8, Flash 8, Fireworks 8, Contribute 3, and Flashpaper.
Mathematics, Seashells, and Web Design
Many designers would like to believe that there is no way to scientifically quantify why things look good. It's just a feeling. But the Greeks came up with a formula for classical beauty that is used to this day. And if you use that same formula on your Web pages, you'll have a design that is pleasing and understandable to the majority of your audience.
Navigating Web Pages
If your readers can't find their way around your site, they won't try, they'll
just leave.
Navigation Menus Using CSS Lists
Learn how to use CSS to style basic unordered lists into vertical navigation menus for your Web site.
A New Resolution
Web design often revolves around screen size and resolution. Take a look at your customers and determine if your site is designed with their resolutions in mind.
A New Year's Resolution
Make the resolution to build or improve your Web site. These tips will help.
Old Aunty Eh-Leeas
(anti-alias)
Images and fonts might have the "jaggies" on your page, if you aren't familiar
with anti-aliasing.
Optimizing Images
Pages that download fast are more than just fast HTML, they have well designed
images. Learn to optimize your images.
Painting the Web by Shelley Powers
This book seemed to be the answer to how to get people to come and stay on your site by making Web graphics that are appealing and interesting. But it's not.
Paths of a Web Designer
Whether you've just decided to learn how to create a Web page or you've been designing pages for years, there is sure to be something new to learn - once you know where you are on the path, you know what you're ready to focus on next - from beginning HTML, advanced HTML, professional web designers and programmers, to XML.
Pixel Perfect Design Does Not Necessarily Equal Good Web Design
We all know that a Web page is not a printout, but it's still very common for designers who started in print media to attempt to make their pages look and act like printouts. However, if you decide to move away from the print beginnings, that doesn't mean you should throw away all design principles - you just need to be less rigid in your interpretation of them.
The Principles of Design
The principles of design are how you apply design elements to your page. These principles are some of the more accepted methods of design.
Safety on the Web
The Web is a wild and mostly non-regulated place, but you can build Web sites
that have any content you would like, but are still rated age-appropriate and
safe for children and corporations.
The Science of Web Design
Most people, when they start building Web pages, don't spend a lot of time thinking about the reasons why they use various techniques. Learn to be more scientific in your Web designs.
Spacing Out Your HTML
Indent your text, hold table cells open, and control the white space on your site.
Splash Pages: Pros and Cons
Splash pages are a popular Web design feature, but if you put up a splash page, you may get more than you bargained for - or less page views.
Stylish Backgrounds
Use CSS style elements to change the backgrounds of your Web pages and elements within them. Set up things like watermarks quickly and easily.
Tabbed Navigation in Web Design
It's easy to add tabbed navigation into your Web pages with CSS and page identifiers.
Use Real Text for Testing Page Designs
Learn when to use lorem ipsum and when to use actual text that people can read when designing a Web site.
Using Browser Safe Colors
When you use browser safe colors on your Web site, you ensure that your page will
look the same (color-wise) on the largest number of browsers.
Validating for Accessibility
Creating accessible pages is easy if you have the tools to check your site.
With Bobby, you can make sure that your pages are accessible to all.
Web Browser Window Size Matters More than Monitor Resolution
Monitor resolution is the most often used metric for determining what size to make a Web page, but is it the right one? At larger resolutions most people do not maximize their browser window, so assuming that it's maximized will force people to scroll horizontally.
Web Color Synchronization
Is it possible to ensure that your Web page colors will look the same browser to browser, platform to platform, and monitor to monitor? Web color synchronization can be challenging.
Web Criticism
Learn how to evaluate Web pages in an objective an useful fashion.
Web Design Basics - Placement and Position
The first thing you do when you design a Web page is you start with a blank page and you place elements on that page. Placement of your elements can be critical to whether your design works or is a dismal failure.
Web Design Software: Which One is Right for You?
If you're looking to find the right Web design software to meet your needs you should take this questionairre. After just a few short questions, you'll have a list of some of the best Web design software tools available to meet your needs and your budget.
Web Grids - Columnar Layout in Web Grids
When you work with Web layouts, you often have more control over the horizontal sizes than you do about the vertical. So grid layouts become columnar layouts. This gallery shows how grids can create dynamic layouts with various numbers of columns.
Web Page Widths
Once you've moved beyond beginning Web design, you'll come across the most aggravating question for a Web designer: what resolution should I design the pages for? This also comes out as how to decide how wide your pages should be.
Web Pages Should Go Away, Eventually
When you move pages or take them down, it is often tempting to put up redirects so that your customers don't get lost or confused. This also helps prevent link rot. But is that really helping things in the long run?
Web Typography
Before CSS there were font tags to style the typography on a Web page, but now CSS allows you to separate how your fonts look from the actual text of the page, providing powerful tools for Web typography.
WebTV HTML
If you design pages to look good in both Netscape and Internet Explorer, then
you should probably think about the ramifications of a new browser out there.
WebTV provides interesting challenges for the Web Developer.
What Makes a Web Form Usable or Unusable
Online forms can be a pain for your readers to fill out, but they don't have to be. With some knowledge of HTML form tags, some CSS and JavaScript, you can create a form that your customers actually want to fill out.
What is a Dreamweaver Design Note?
Use Dreamweaver design notes to describe and annotate files so that your customers won't see them, even if they view the source, but your team mates will.
What is a Font?
Font families can be hard to understand, especially when trying to develop a decent style sheet for a Web site. Once you understand what the fonts are, you can better use them to style your pages.
What is Graceful Degradation and Why Should Web Designers Care?
Creating a Web site with the most advanced features in Ajax, CSS, and XHTML can be a lot of fun. But the first time your page is viewed in IE 5 or a cell phone you end up with a page that is hideous at best, and often unusable. Your goal shouls be to write Web pages that degrade gracefully - they still work even on a cell phone or in older browsers.
What is a Printer-Friendly Web Page?
As Web pages get fancier and fancier, the ability to print out simple versions becomes more necessary. What makes a printer-friendly page printer-friendly
Why Use a Grid to Design Your Page?
Grids are an important part of layout in Web pages. They are a great way to impose order on your Web pages and provide balance to your layouts.
Why Validate Your HTML
HTML validators are a powerful and easy way to make sure that your HTML is
viewable and looks right to most readers.
Writing Well for the Web
Good writing is essential to good content.
You Can't Get Every Page to Look Identical, So Stop Trying!
Do you work with graphic artists and print designers who are always criticizing your Web designs? Well, they need to learn that the Web is not a graphic and it's also not print. Flexibility is key to Web design.
