XHTML prototyping allows us to build the website live and see how it behaves. It also completes large amounts of documentation tasks simultaneously with building the design tests. Further, it virtually requires testing throughout the design process which ensures a robust design, as opposed to locking yourself into an image comp, and then starting to think if the webpage code which results is a good idea (or even possible). Additionally, prototyping and documenting the design in XHTML enables us to bring OO - CSS to bear on the design process, and a well-built style sheet optimized for maintenance allows for much more efficient changes throughout the design process than trying to modify an image comp.
Color List
Color list is a component for providing a live demonstration of colors (or potential colors) for a palette. I typically use it early in the color selection process to identify and test colors cross-monitor. While designers have a general sense of what colors will look good, I hate generalities and maybes in my designs. Color list forces you to deal with the realities of your web design as it will look in the wild (as opposed to a Pantone color chip). This makes color selection much more concrete and real world.
Component CSS
/* Color List */
.colorList {
background-color: #CCCCCC;
border: 0.5em solid black;
padding: 1em 2em;
}
.colorList li {
margin: 1em 0;
padding-left: 0.3em;
border-left: 1.6em solid;
}
Component XHTML
<ul class="colorList">
<li style="border-color: #C38E63">
<strong>Tan (#C38E63)</strong> - Rustic and woodsy
</li>
<li style="border-color: #ED8200">
<strong>Amber (#ED8200)</strong> - Mellow, it's an Autumn leaf color
</li>
<li style="border-color: #FFDFAC">
<strong>Ayer Beige (#FFDFAC)</strong> - Soft and earthy; a historical document sample
</li>
.
.
.
</ul>
-
Tan (#C38E63) - Rustic and woodsy
-
Amber (#ED8200) - Mellow, it's an Autumn leaf color
-
Ayer Beige (#FFDFAC) - Soft and earthy; a historical document sample
-
Taupe (#A9A28D) - Classic and organic
-
Ivory (#F2E4C3) - Classic and warm, a natural color
-
Chocolate Brown (#5E1302) - Rich and delicious
-
Brick Red (#A6201D) - Earthy and strong
-
Bright Blue (#0077D4) - Vibrant and aquatic, a sea color
-
Deep Blue (#00237E) - Authoritative, a different mood but also a sea color
-
Bright Green (#009543) - Fresh, it's a Spring color
-
Foliage Greens (#006233) - Lush and natural
Note: I usually avoid inline styling like the plague. However, in keeping with OO - CSS, it's important to code to your abstractions, and this is where the border color definitions belong. The hex code is not only part of the color, but it controls the shade of the color which is the topic of discussion, in short it's content so it should be expressed inline. Therefore, I've broken my typical preferences, because it's more important to maintain the abstraction.
There's another reason as well, maintainability. My first design used classes in a linked stylesheet to define the border color for each list item. That worked OK when I had a limited number of colors (about a dozen) for the one design. However, as an OO - CSS component that technique would require more than 16.7 million classes to cover all colors. Assuming you had the patience, you'd destroy your bandwidth downloading a stylesheet of that size. Moreover, it would be very difficult to remember exactly which class names invoked which colors. Also, it would be a nightmare switching back and forth between the visible text of the hex code written on the page and the linked stylesheet where the hex codes are used in the style rules. It's so much easier to make changes when they're in the same place, just one line apart in code.
Design Background
When working in my image editing software, I like to have a nice grey background for judging colors. This is the same idea behind the neutral grey background in color list. The exact same principle holds for reviewing images in your image editor and in your XHTML documentation. Image editors make it easy to view images against a neutral background, and design background is a component which answers this need in XHTML. It's also nicely flexible – you can use it two ways. If you have a single image, apply the designBg class to the image itself, or if you have many images, wrap them all in a div element with the class, and each image in the div will be matted against the neutral background.
Component CSS
/* Design Background */
.designBg img,
img.designBg {
margin: 1em;
padding: 2em;
background-color: #CCCCCC;
border: 0.5em solid #000000;
}
Component XHTML
<div class="designBg">
<p>
Here's version five of the proposed contact us image.
</p>
<img src="../Images/ContactUsBox5.jpg" height="150" width="150" alt="A demo of the proposed contact us image." />
<p>
Here's version five of the proposed rollover state of the contact us image.
</p>
<img src="../Images/ContactUsBoxHighlight5.jpg" height="150" width="150" alt="A demo of the proposed rollover state of the contact us image." />
</div>
Here's version five of the proposed contact us image.
Here's version five of the proposed rollover state of the contact us image.
