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
What’s cool about it is that it not only helps make writing valid xml/html files easier, but also seamlessly glues all presentation technologies together, greatly simplifying the implementation workflow. The latest release included SVN support so virtually it’s possible to create graphics in the same editor and reference it from another document after it’s saved.
One problem with it is lack of a plug-in architecture. In today’s web development, how much can you achieve without JavaScript? Therefore a JS syntax highlighter is a minimum needed by any web developer. Because JavaScript isn’t part of W3C standards, they probably didn’t put that as a first class citizen and therefore doesn’t seem to come with JS tools. To add JS support, someone would have to extend the source code and recompile and redistribute it because getting something accepted by W3C takess longer than electing a new president.
