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.

It looks quite primitive comparing to other tools such as Dreamweaver and Expression Web etc., but it is lightweight and simpler to use, a little easier than plain text editor, quite nice compromise between editor responsiveness and intuitiveness.

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.

http://www.w3.org/Amaya/Overview.html

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

Essentially instead of wrapping the camera box within the cushioning, he put it on one side of the box.

Moreover, the camera I selected (Z1285-IS) in the last post is CRAPPY! BEWARE OF IT! On the image it looks good, but when I held it in my hands, first, it’s too light, meaning the body is full plastic; second the lens cover wasn’t gonna open when it’s turned on, and doesn’t close fully when it’s turned off; and third, it uses AA battery. The image quality isn’t all that bad though, at least it’s better than my Blackberry, but I couldn’t bare it. The relatively more expensive one (V1073) has a much more solid build, as it turned out, it also came with re-chargeable battery and charger, making it even more convenient to use. So I ran to Walmart the second day and exchanged it, and I am 100% satisfied with the latter.

I will post more daily shots here more often, thanks to my new HD Camera!

Nicely done video presentation!