I have been fascinated by the creativity one can have during web site design since I first learned to use FrontPage and FTP back in early 2000, quite late comparing to American kids, but somewhat “cutting-edge” among my high school buddies. Lacking of practice in drawing skills, I always feel handcuffed creating designs for my web projects as I can’t fully express my vision with my mouse-drawing skills. But things are getting better and I am occasionally making break-through recently.

Over the years I’ve established several rules or basic design guidelines to help maintain consistency between different versions of my blog and homepage. They are by no means unalterable rules as design shouldn’t really be limited by anything.

Proper Metaphor

In the early phase of a new design, I will decide on a primary metaphor for the entire page, whether it’s mimicking a printed page, newspaper, a desktop, or a sci-fi space. This is used to get myself inspired by thinking around the metaphor and mapping web page elements to those in the target context. In this way the web page elements will look natural when putting side-by-side since presumably their presence is common and expected in their metaphorical context.

In the design of this blog, v3 of Dawn of Hero, I really wanted to emphasize the two key words “dawn” and “hero” in the design. I  was able to creat a background image with much more details than previous version which I created more than 2 years ago. I iterated a couple times. First I created a theme image and then implemented the body of html and recreated the them image since I figured I could make it look a lot more realistic. The theme image tries to illustrate a morning mountain scene, when the Sun just rises above horizon. Then to highlight featured posts, I created the parchment roll, replacing the dummy tri-column post lists. And in the end I re-did the sidebar to try to reassemble a knight’s sacred rolls and documents.

One of the common blog layout patterns I tried to incorporate into this design is grid-based-header-body-footer layout, as illustrated below.

This pattern is very popular and common. Some people do it in a minimalism fashion and works pretty well in general. In particular, minimalistic web designs do not add extra stuff at the borders between sections, a pure clear cut.

Examples:

• http://doloresjoya.com/blog/
• http://www.45royale.com/
• http://www.bartelme.at/journal/archive/flux_iphone_wallpaper
• http://agamicreative.com/
• I swear I see many more than this, I will add more as I revisit them.

Having a perfectly cut line between sections doesn’t work very well for me, especially as I am trying to map design to real world objects. In real world you never have a perfect line. While in fact the borders between objects can be really clear and crisp, there should always be some further details giving us a sense of their relationship in the space, such as shadows, depths of field, reflections, uneven cuts, and textures etc. In above examples these were not shown. Here are some examples that added extra decoration to the borders and tries to make sense out of it.

Examples:

• http://www.branded07.com/
• http://nimbupani.com/blog/
• http://orderedlist.com/
• http://robgoodlatte.com/
• http://devthought.com/
• http://www.rootcreative.co.uk/

In the image above we can see the designer signifies the sky with the header color and earth with the brown color and uneven ground under the tree. It’s a much more interesting design in terms of interpreting the sudden change between a blue and a brown background.

Similar rules apply to sidebar as well. For this version of my blog, I really want to differentiate the design by creating more original graphics as opposed to solid color fills and general icons.

I miss the simplicity my last design has but think this is a necessary step to go through. I think ultimately design should be about both simplification and sophistication.

Other principles I will write about are

• Consistency
• Color Palette
• Font
• Originality
• Flatness
• Quick Scan
• Shallow Contents

I started redesigning my blog about a month back, on a Sunday afternoon at Starbucks around the street corner. I could finally use Pen Tools in Photoshop skillfully and successfully traced and drew several simple scenes or figures with it. With that extended skills, I thought I could try something more chanllenging for me, drawing a relatively realistic scene from scratch, (This ended up not so true in the last version of my theme image, as I will possibly explain in a next post describe how the image was done) . I was greatly inspired by a Time Lapse video by a Japanese photographer mockmoon . (4:10 in the following video)

[Read the rest of this post ...]

So I think I’ve done enough with the new design to roll it out today. Here is a screenshot of the old design. The old one was simpler but also had less features. Just as a reference.

[Read the rest of this post ...]