Web Design by Sheriar Designs: Impeccable Code | Beautiful Design

I don’t know how interesting this is going to be for anyone but … I spend so much time talking about code that I thought it might be fun to document my (somewhat random) design process. For this peep into The Mind of Mani we’re going to be looking at my latest CSS Zen Garden submission: Elegance in Simplicity.

The Concept

Because I have already made three other submissions, coding a Zen Garden page has become somewhat old hat to me now, so I wanted to really challenge myself on the design side of things. I wanted to do something different. Since I often depend quite heavily on imagery and color, I thought I would see what I could come up with using minimal color and imagery and relying more heavily on layout, font choices, and white space.

Let’s Start With The “Logo”

So, let’s choose a nice font. Or, more acurately, let’s spend about an hour creating a Word doc with the words “css Zen Garden | The Beauty of CSS Design” copied dozens of times over in various fonts that I own. Then, dissatisfied with my impressive home collection of fonts, let’s spend a few hours pouring over hundreds of fonts at myFonts.com, compile an album of all the possibilities, and agonize over them. Now we’re ready to make a choice, and it is Serlio LH (yeah, I actually purchase yet another font).

I was trying to go for a “white on white” sorta thing here. So, white letters with a drop shadow to make them visible. Then, maybe a nice fresh green? Oh yeah, and maybe some lines top and bottom, like in my logo! You can see I worked with the size and leading so that the two components fit nicely on top of each other and were the same width. But, that looks kinda boxy so …

Let’s Try It With The Second Line Over To The Right

Yeah, I think I like that better. But, maybe the second line needs those nice lines top and bottom too, and maybe I’ll use a simple drop shadow to define the page.

And On To The Rest Of The “Header”

Now I’m thinking I have to have some sort of imagry here … even if just a hint of form. So I look through my fairly impressive collection of stock photography for a while and then hit the big guns: iStockPhoto.com. After sifting through an obscene amount of floral images I at last settle on this one:

Two Runners up were these:

After some Photoshopping the header was starting to take form. I’m going for ultra subtle here.

Now, I soften up the outer shadow and I decide that somehow I want to add just a little something outside of the frame. Not exactly a “T” layout, but something that extends and gives the whole thing just a bit more of an open feeling. A little playing around and hey …

As I look at it at this stage, the original css Zen Garden lettering seems awfully cold compared to the warmth of the flower. I like the warm colors of the flower so I decide to emphasize those a bit and then take the zen garden lettering from gray tones to brownish ones.

Now The “Tagline”

Another session agonizing over fonts. I wanted some sort of script to contrast with the small caps of the main title. And I wanted something elegant that would bring beauty to the design all by itself. I chose Snell Roundhand and continued with the warm brown colors.

For the second line should I switch to my lovely green color?

Nah – that looks kinda stripy. We can’t have that! Plus it takes focus off of the “logo.” Better to keep it all brown I think.

The Road To Enlightenment

Hehe … I finally became enlightened when a friend pointed out that I was missing the “a” in beauty. Did you notice it? I’m blushing as I reveal that I got all the way to this stage without catching that, but oh well!

I wanted to set the Enlightenment section apart and so I knew that I wanted the title and the text to be unique from the following sections. For the title I chose the same brownish small caps look with the lines. Maybe they should extend all the way across the column?

Yeah, and I’ll leave space on the right for where I want the links to all go. And then I’ll make the text a serif font, maybe Georgia, and italic.

For a little bit I play around with the idea of this section spanning the entire width of the page …

But I decide against it. I also decide against the lines extending the entire width.

The Link List

Now I turn my focus to the list of links that will go on the right. I think about putting it in a soft, subtle, drop-shadowed box. And then maybe I’ll put the “download” paragraph right above it.

Yeah, and I’ll use the same nice green for the headings, and the same small caps again. And maybe an underline that fades at the edges, like my over/underlines elsewhere.

Nah, I don’t really like that. Too much small caps. Let’s try the scripty font again … no that doesn’t really work. Hmm … I know that I plan to use some form of Lucida for the body text, I quickly count up my fonts so far: 1) small caps, 2) scripty goodness, 3) Georgia, and 4) Lucida. Now I think back to Typography 101 … I know I’m not supposed to use too many fonts but … grrr … I just can’t help it! I need one more. Another scripty one. One that will be much like the first scripty font but perhaps with taller lower case letters and a slightly less formal feel.

Yes, another tiring font hunt ensues and ends with me choosing Coronet. Ah … I love this font! It was worth breaking the rules!! I decide to go all lower case on these and I’m diggin’ it.

But, you know what? I’m not really crazy about that box. Too much boxiness! I get rid of it and move the heading over to the left. Ahhhh. That’s better. I choose to use my body text font for the links, keeping it simple. I then spend an embarassing amount of time agonizing over minute color shifts for the links themselves. I choose just to use the green color for the rollover effect. Then I design a simple bullet that vaguely mimicks the flower theme and …

For the remaining list sections I go with my body font again, in the same color as the main links from the top section, but I go with lower casing them. I also create a new bullet that is slightly smaller and neutral in color. These decision help to set these list sections apart as taking less of the focus than the top section.

You may have noticed that the “download” paragraph is no longer resting above the link box. In general I’ve been continuing to move things around to give everything more space … lots of breathing space seems to be the ticket with this design.

As you can see, I added a simple little arrow to this paragraph … the universal symbol for “download?” The whole thing also got moved below the Enlightenment section. This was actually a bit tricky to accomplish code-wise, because that’s not where the paragraph was in the flow, but that’s another story …

Here’s how it’s all coming together so far:

The Content

Next I choose a font for the remaining titles – I decide to use my original scripty font since I want to use capital letters (and I love the capital letters of this font). And I repeat my faded-at-the-ends underline trick.

And for rollover effect of my content links I choose to underline and overline in a brown color … kinda mimicking the overall line thing I got going, ya know?

The Footer

For the bottom of the page I decide to contue to keep it simple and to simply close the shadow box. And for the links at the bottom I decide a simple check icon will do nicely to convey what they are about.

That’s A Wrap!

Take a look and see how it came together.

This entry was posted on Thursday, December 1st, 2005 at 12:12 am and is filed under Design, Typography. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.