HTML and CSS Reference
In-Depth Information
start thinking about the underlying HTML structure, considering which elements you'll eventually use to
give the content a meaningful, versatile structure.
Visual Design
Visual or graphic design is the part most people think about when they hear the term “web design,” but it's
really only one aspect of the entire design process. With some sort of plan in place and an idea of just
what it is you need to build, you can finally begin planning what the thing will
look
like. This is the stage
when you'll think about color, texture, imagery, typography, iconography, and branding.
As with every other part of the process, there isn't any one definitive approach to the visual side of web
design. You might start with sketches, color swatches, and scrapbooks of patterns and ornaments to grasp
the general mood before focusing your efforts on the real thing. You might instead prefer to jump directly
into designing the site with a blank canvas, trying out different styles and treatments to see what works
and what doesn't. It's also a common practice to produce multiple design variations before finally choosing
the one you like best (or the one your client or boss likes best). Or it may be more efficient to work through
numerous iterations of a single design, gradually honing it to perfection.
Whatever approach you take, your finished design will be more enlightened because you took the time to
understand your audience and your content. If you're only working on the HTML and CSS and someone
else is defining the visual design—as is often the case in larger teams—the guidelines and wireframes
you've worked so hard to put together will help the designer create a better product that aligns with the
project goals and the site's architecture.
Any visual designer working on the Web should be familiar with the fundamentals of HTML and CSS, even
if he or she isn't writing any code. For a web designer, knowing how web pages are made is like an
architect understanding the structural properties of glass and steel, or an artist learning that oil paints and
watercolors don't mix. HTML and CSS are the tools and materials of the Web medium.
Where Design Happens
Many web designers, especially those with a background in traditional printed graphic arts, prefer to
design web pages with graphics software like Photoshop or Fireworks. They'll produce a polished
mockup
(also called a
composite
, or
comp
for short), a full-scale image of the completed site design, essentially a
picture of a web page. Once the mockup has gone through all the reviews and revisions necessary and
the complete design is settled and approved, only then can a developer begin to convert the mockup into
HTML and CSS. This method works well for some, but it has some major drawbacks.
A static image of a web page can't demonstrate interactivity like opening dropdown menus or hovering a
mouse pointer over a button, and certainly not complex actions like validating a form or dragging a box. It
also can't reveal how a liquid layout moves and responds as the window changes size, and it doesn't
illustrate how a design might degrade in less advanced browsers. Fonts render very differently in graphic
design software and text can flow in different ways once the picture of a web page becomes an actual web
page. Worst of all, some shapes and effects that are trivial to produce in Photoshop can be nearly
impossible to achieve in markup and CSS. Focusing too much attention on a frozen mockup of a web
page can lead to unrealistic expectations of what the end product will look like.
