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’ve had my D80 for more than 2 years. I just can’t know it too well – I probably only used half of its features. While the image quality is really significantly better than the compact cameras I used before, I shoot less and less because it’s such a burden to take it with me all the time. One of the fundamental rule many professional photographers emphasize is “always bring your camera”. It’s not hard to understand that the most unlikely events will most likely happen when you are unprepared. I absolutely agree but it’s just not practical for me, for 3 out of 5 weekdays I need to travel with my laptop, 5lbs, and sometimes a book in the messenger bag as well. Carrying an extra bag not only slows me down when I need to catch a bus, it’s also makes my everyday trip miserable. So I need a compact camera!

But I don’t want anything beyond $200.00. I can get another lens for my D80 and I will have completed my little lens collection. A couple really cheap models attracted my attention. One of them was from Polaroid, costing only $80 last Christmas with a touch-screen control. Brilliant! But my coupon expired so I passed on it. More recently, after seeing an HD video on someone’s blog, I found HD recording is quite charming. The images are so sharp and with Vimeo and Flickr, sharing video art has become technically mature. So I want it too.

I came across with Kodak V1073 , compared in this post, at Walmart. It’s the first compact camera I saw with HD recording feature, yet it was so cheap! Think about D90 asking for $900+, this is only $180, although the latter is 720p/i. And there are cheaper ones!

Here are the key factors affecting my choice:

• price
• size, including portability and durability
• zoom
• resolution
• video

[Read the rest of this post ...]

[原文] Amanda L. French – http://amandafrench.net/…compared/
[译文] coolnalu – http://www.kunalu.com/blog/2009/02/24/facebook-tos-…twitter/

根据作者授权，译文与原文都以创作共用许可发表。

2009年2月16日 – 2:28 pm

随着今天网民对Facebook新修改的服务条款的愤怒达到极点，我认为我应该简要的将其服务条款中用户上传内容的部分与其他人际网络站点做个对比，以事实来验证所谓的愤怒是不是合理的。例如上次网民千夫所指布什的robots.txt文件好像并不太合乎情理，而我却帮助散播了此事，有些负罪感。

这次这个事件的结论？ 继续愤怒下去吧。Facebook对用户上传内容表现得极为贪婪和傲慢。以下是我的详细分点讨论：

1. Facebook显然想在你把你的东西从网站上删除后依然维持他们对用户内容拥有的全部权利；他们从条款上移除了原有的几行“用户内容删除后他们对用户上传内容的权利将终止。” 没有别的网站，至少我这里要比较的那些，能想到做这样的事情; 大多情况下他们特别指出，他们对用户上传内容的权利将于用户删除内容或删除帐号之时结束。
2. 第二个变动最要命:Facebook声称，一旦你在你的网页上放上“到Facebook上分享”字样的链接，他们就可以任意处置你网页里的内容。尽我所知，这个条款令人难以置信并且绝无仅有。用户可以在Facebook里剪贴指向到你网页的链接，但如果你想帮用户省几个键盘操作而在你的网页上放上“到Facebook上分享”的链接或者类似功能的插件，Facebook就会声称获得了你一系列模糊的授权。我不想被Facebook算在内。
3. 其他网站在服务条款里指出，你仍然拥有你的内容：Facebook刻意没有提到这一细微的事实。 Facebook也忽略提醒用户上传内容的同时也授权了其他用户使用你的内容 — 而拿YouTube来说，就明确说明了除了YouTube以外，其他用户也有权使用，传播你上传的视频。总体来说其他网站的服务条款措辞听起来更像在帮助你。

让我们看看其他热门用户生成内容网站关于自己对用户内容所拥有的权利是怎么说的：

[Read the rest of this post ...]

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 ...]

• Akismet 2.2.3 -  Must have for spam prevention. Without it you really won’t be able to use your wordpress.
• Facebook Connect 1.0 – Effectively turns your blog into a extension of facebook, which maybe good or bad.
• ShareThis 2.3 – Needed to enable quick social bookmarking features.
• SyntaxHighlighter 1.1.2 – Essential for any code snippet posts.
• WordPress Database Backup 2.2.2 Backing up your thoughts.
• wp_time_since 1.0 – Convert time to meaningful post freshness info.
• Yet Another Related Posts Plugin 2.1.6 - Great tool for increasing page view.

Thanks to all these people’s great work!