Main Points

Here's the design process for our Medieval Scroll layout. We'll walk you step-by-step through the concept, design, and implementation of the design in CSS and images. Best practices dictate that the appearance of your website should be isolated from your content and the behavior (and server side programming) of your webpages. This pretty much demands that the appearance be a module which can be independently maintained. The advantage of this is that not only can the appearance be managed by a CSS expert, but there should be relatively few things an intelligent designer can do in building or maintaining the stylesheets and images that will make work for other people.

I'd like to acknowledge my debt to Jason Beaird's amazing text, The Principles of Beautiful Web Design. While I've talked with numerous designers and have learned from many people, Beaird's text is unique because of his ability to describe the process of web design. His talent as a designer is fantastic, but his skill as a teacher is truly one of a kind; I cannot recommend his book highly enough. If Dave Shea is the master of beauty, Zen, and CSS, Jason Beaird is the guru who will explain exactly what a web designer does and guide you step-by-step through the work. Beaird holds your hand as you go from trying to get an artistic idea, working it up into a design concept, all the way to staring at your beautiful finished design. I didn't learn a lot of CSS, but then the CSS texts I have don't talk about the process of real design, not like this. The five phases of the design process that I follow, I learned directly from The Principles of Beautiful Web Design: Layout, Color, Texture, Typography, and Imagery. While I implement each step a bit differently, hopefully to my credit, these demos would not exist without Beaird's uncanny ability to describe how artistry is done. And he does it in ways that even a programmer can understand.

From Concept to HTML Prototype

The initial stages of a design are some of the most difficult. This is where artists and people with artistic skills absolutely make a difference. Designers have many personalities, many work styles, and many skillsets, but divining an idea from the aether is an ineffable skill without which you cannot even get started. Study the subject of your website, ravish the internet to see what other people are doing, explore nature, explore art. Play around with CSS, and other designers CSS to see what you can get it to do well and build designs that play to your individual strengths. Inspiration is simply the end result of brain storming perspiration; yes it's a lot of hard work, just like anything else. If you want a good idea, you have to work hard looking for it.

I was introduced to this design methodology by a designer friend of mine and much of it is also described in Jason Beaird's revolutionary book, The Principles of Beautiful Web Design. Layout is the first step: For me it starts with research and scribbling down ideas on paper. Once I've nailed down a likely structure, I move from rough sketches to building an initial layout using HTML prototyping. You build the XHTML for the page itself and then work up the general CSS needed to implement your sketches. Layout establishes the structure of the page, that comes first; like real estate, design is all about location, location, location. Once that's finished we can get down to more interesting phases where we start to flesh out that skeleton. We'll deal with making good color choices, adding texture to make the design pop, establishing the typography, before we bring the design alive with images.

  1. Design Concept: Medieval Scroll - How we developed the idea for an illuminated manuscript layout and fleshed the idea out into a realistic implementable scroll concept.

    [chroniclemaster1, 2009/06/07]

  2. Initial Layout CSS - Developing the initial structure of the design in CSS.

    [chroniclemaster1, 2009/06/07]

  3. Fluid CSS Page Border - Inventing CSS for a fluid page border with background images.

    [chroniclemaster1, 2009/06/24]

  4. UI Navigation Design - Prototyping the CSS for the navigation structures.

    [chroniclemaster1, 2009/06/28]

  5. Footer Layout - Completing the initial HTML Prototype.

    [chroniclemaster1, 2009/07/02]

Color Schemes and Visual Texture

OK, now we can get down to the "fun stuff". Half the time when you're working over the layout, you have to stop yourself, because you keep getting ideas for good colors, or the shadow that could go here. You want to dive into imagery. There are few if any programs cooler and more fun than an image editor. You want to throw a first batch of images together and see how it looks. But it's like writing XHTML to create a look that you want. You wind up with crappy XHTML. You've got to write your XHTML without giving a damn what it's going to look like. The same goes for layout. The layout is the skeleton for the design - color is like the skin, images are like makeup. If you build the skeleton while thinking about the makeup, you get a lousy skeleton. That's a sin no amount of makeup can fix, but now that our skeleton is complete we can move forward finding colors that will work for textured paper or a parchment scroll.

  1. Color Theory - Exploring good color palettes that define the psychological meanings and qualities we want to convey on this project.

    [chroniclemaster1, 2009/07/04]

  2. Final Color Palette - Here we condensed our research on old papers and parchments, and finalized our color palette.

    [chroniclemaster1, 2009/07/11]

  3. Painting with Color - We have our palette, now let's paint with the psychology and meanings that good colors provide in design.

    [chroniclemaster1, 2009/07/22]

  4. Polishing the Layout - Revising the HTML Prototype.

    [chroniclemaster1, 2009/07/30]

  5. Applying Textures - Taking our color to the next level, creating depth and feeling with visual textures.

    [chroniclemaster1, 2009/07/31]

Typography and Imagery

First, we mocked up our HTML prototype. Then we got down and dirty with color theory, and even looked at those color variations that can help provide a visual sense of feel, textures that make the design pop into 3D. Now we're putting the finish on our beautiful design. That means applying the imagery that will give the design the look we want and convey the emotions we're shooting for. Starting with the fonts. Fonts are the perfect metaphor for the entire design process; like any good design, they should be great to make the site better but no one should really notice them. If they're noticeable - too "artistic" - they'll distract from the content; that's somewhat the purpose of headings and other attention grabbing items but even there moderation is best. Yet fonts are an important tool to convey the emotions of the site, practically subliminally. While 99% of visitors will never "notice" a font, they will almost always pick up on the emotional register that the fonts "sing" in.

If done well then fonts' big brothers, the images, can be applied the same way, to enhance rather than distract from the content. This goes not only for the visual appearance, but the XHTML code. Images need to be analyzed to see if their purpose is to add content or decoration. Content images need to be added by the <img> tag while decorative images should be applied in CSS with background images. Fonts and images are the final ingredients to create a beautiful, unified design. Combining them to put the content in context, enhances the understandability and readability of the webpage.

  1. Typography - Introduction to the typography phase and discussion of some of the unique problems in this project.

    [chroniclemaster1, 2009/08/14]

  2. Typeface Troubleshooting - Initial studies and review of the available fonts along with some best practices for managing the CSS.

    [chroniclemaster1, 2009/08/19]

  3. Painting with Typography - Applying the font styles in the combinations that we'll actually use them to create the feel that we're going for. This is a balancing process little different than painting the design with color and for the same purposes.

    [chroniclemaster1, 2009/08/19]

  4. Editing Images - Revising the images; working up the placeholder items into completed production quality images from wood grain to parchment texture until we're ready to go.

    [chroniclemaster1, 2009/08/25]

  5. Reinventing the Design - Reviewing the original design specs, it became obvious that we needed to address some fundamental issues.

    [chroniclemaster1, 2009/08/30]

  6. Polishing the UI - Looking over the design for bumps and rough edges, it's time to polish out any last kinks.

    [chroniclemaster1, 2009/08/30]

  7. Deployment and Maintenance - Post completion issues, final deployment, and ongoing maintenance related to the design.

    [chroniclemaster1, 2009/09/13]