- Featured Columnists
Table of Contents
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Visual Design and the Web
- Color Theory
- Working with CSS
- How to Create CSS Menus
- How Should Web Designers Manage Layouts?
- Shining Examples of Bad Design
- Get Your Site in a Festive Mood: How to Quickly Change Styles
- Designing Mobile Web Sites
- Designing for Mobile Devices
- Books and e-Books
- Online Resources
- Meta Tags and Search
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Intellectual Property for Web Designers
Visual Design and the Web
Last updated Oct 17, 2003.
By Molly Holzschlag
Great visual design means being able to move design elements around a given area to create an integrated sense of balance, order, and beauty through type, color, and shape. The success of a great visual design is often related to how the design elements are located in proximity to one another. Another concern is the proper amount of visual elements, including white space: These elements should serve to support the content and help achieve the site's message. It's much like arranging the pieces of furniture in a room. Achieving great "Feng Shui" (composition of movement) is as important within the context of interior design as it is within the visual.
As mentioned, the Web wasn't originally a visual space. It started as a text-only environment. So its creators didn't think about how visual elements might be positioned within a graphical interface. It wasn't until the Web became visual in 1994 that interest in being able to create great layouts came to the forefront. Of course, this didn't mean that designers couldn't do compelling things visually in the early days of the Web (see Figure 2). They could. It's just that their ability to move things around the visual space available was severely limited.
Figure 2 A richly colored, appealing design created prior to table-based layouts.
The first thing that broke the visual world on the Web wide open was the introduction of tables into HTML. Tables for HTML were originally created with one purpose in mind: To offer a means of displaying tabular data such as charts. Remember again that the Web was, in its early days, the realm of researchers and scientists, so it made natural sense to require a means of displaying such data.
But, within a very short time, the border="0" attribute was applicable to the table element, allowing creators of Web pages to remove the visual constraints of a table and have a de facto grid system upon which to place elements. By creating invisible columns and rows, images and content could be placed in individual table cells and arranged in a visual way. Table-based layouts quickly became the means of visually presenting Web pages, and table-based layouts remain the primary way that Web sites are laid out today (see Figure 3).
Figure 3 Most of today's Web sites are still relying on tables to determine their layout.
As you are probably by now aware, this technique, although offering some satisfaction to the visual needs of Web designers, is severely limiting for certain significant audiences. After all, the original intent of the Web was to be interoperable. It shouldn't matter which user agent, which platform, what kind of abilities or disabilities an individual might have, the information is meant to be accessible.
The use of tablesespecially the more complex, nested tablescombined with the convention of using spacer graphics (clear, single-pixel images that could be stretched to shore up empty cells within a design), completely interfered with this original vision of the Web. What's more, it also interfered with the future vision of the Web, which insists upon interoperability and accessibility as its framework. As such, creators of standards and those designers interested in improving practices began to examine the means by which they could solve past problems as well as create a better framework for the future.
CSS to the Rescue
By 1996, the Web had largely become a visual medium. Between the use of complex table-based layouts, Flash presentations, and combinations of scripting and DHTML, sites were at best visually impressive and at worst viewed by certain browsers only. This caused a great deal of frustration for both designers and visitors to the Web, who deserved a seamless, usable experience without the interference of browser inconsistencies.
But with CSS1 on the scene, it was becoming clear that there would eventually be alternatives to the problems occurring as a result of this high-powered innovation. Of course, browser implementation for CSS has been very varied over the years, and although designers began implementing CSS1 in 1996, it was mostly for fonts, colors, link colors, and simple design aspects. As markup became more sophisticated, however, and interested in separating structure from presentation, it became clear that CSS was going to have to be a lot more powerful to address design issues.
Style sheets are not a new concept to the design world. Prior to the Web, desktop publishing solutions such as Quark Express worked on a premise in which you might have your document design in one document and have what is known as a "master style" document controlling the majority of your page styles. CSS was really based on this concept, and over time and with better support, designers are really looking toward CSS to solve the many problems with layout that tables introduced as well as provide greater flexibility to a wide range of visual design concerns.