Red Hat Micro-Winery - Part III

9. How much time did you spend on the little details (polaroids, notes, etc.) compared with the meat of the page?
The devil, of God, is in the details as they say. I’ve spent a long time trying to refine my workflow — I’m not what I’d consider a fast worker by any means. I’m a tinkerer. Tuck something in. Look at it. Think about it. Change my mind. Untuck. Rinse and repeat.

This process has become much easier since I have been using Fireworks as my main layout tool. I only use Photoshop for (oddly enough) photos and “effects” and bring all of the files into Fireworks for layout. I love how Fireworks makes every image or line of text an object. This allows pixel precision. You can move anything around at any time and see the coordinates. It also allows you to choose colors from anywhere on the screen, not just within the application itself. Its things like that that make me work faster. I can import Photoshop files, EPS, and PDFs. This is especially important as my fiancé uses Illustrator for most of her sketches.

Lately I have been increasingly picky about color. During the sketching process of the site, I think I changed the shades of greens, reds, etc at least 3 or 4 times. I just always want to know that the values we’ve set are right. Do they create the right mood? While text that is too dark or too light may appeal to designers, it is very difficult to read. I try to keep my parent’s in mind when I design a site or an application. Would my dad understand this page? I think as designers we just need to think more like a consumer. Attention spans are short and you only have 30 seconds to draw them in or else they’re gone. How do we keep them? Details and clear communication.

I think I actually spent more time on designing solid CSS and XHTML markup than I did on the design elements themselves. I wanted to ensure that I could reuse CSS as much as possible. For instance, we essentially have a 2 column grid with a sidebar. Rather than call each column a different name, I made one class called “column” that could be reused. In some cases I was able to accomplish that and in others … well … I’m still learning.

10. Why did you use a fieldset in the Featured Wine div?
I have been trying to think about semantics and how one can write a semantic document. This has been a re-learning process for me. When I decided to learn web standards and do it the “right” way, I was amazed by how many common HTML tags I didn’t know. When developing this site, I wanted to try and lessen the reliance on <div> tags. What does a <div> tag mean? It defines a section in a document. What is a section? In this case, I think its the 2 columns of content and the sidebar. Unfortunately, we all have to use <div> tags for more than that to accomplish certain visual styles. However, it was this thinking that got me to thinking about other HTML tags that could be used to accomplish similar ideas and perhaps communicate more clearly the content’s intent.