The Visual Design of Web 2.0

来自：http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/

明快的颜色

流行的颜色有绿色、深蓝、橙色和粉色。

圆角和圆的一切

利用新的CSS技巧可以很容易实现

圆角字体也很受欢迎

 

免费，全都免费

 

别依赖商业图库

 

KISS

突出应用的重点，del.icio.us管理链接，flickr管理照片。

合理运用排版颜色字体，让软件更易于使用，减少用户遇到的问题和障碍。

 

大就是美

大字体易读易用

 

擅用留白

空白可以：

1. 突出重点
2. 不会给用户的眼睛太多“压力”
3. 隐含着放松和秩序
4. 引导浏览路线和用户动作

 

讨人喜欢的行文方式

Friendly, informal copywriting allows a more personal relationship with website visitors. A List Apart singled out Flickr and Photojojo for an honorable mention in this department, and it’s a lesson that many Web 2.0 sites put into practice. WebTango isn’t just free, it’s “free of additives, cholesterol, ozone-depleting CFCs, and most importantly, free to use”. Tioti doesn’t just have tagging and RSS, it has “tagging and RSS up the yazoo”. FAQQLY founder David Liu isn’t a isn’t a faceless entity, Dave is “your first friend once you register”. And the toolbar on eSnips isn’t just flexible, it’s “a toolbar you can use in a bunch of cool ways”. You get the idea.

Eye Candy

 

Web 2.0 how-to design guide

See http://www.webdesignfromscratch.com/web-2.0-design-style-guide.php

简单

• 网站有明确的目的，每个页面也是如此。
• 用户的注意力是有限的资源
• 设计师要帮助用户找到用户所需
• 屏幕上的“东西”别太多

中央布局

减少栏数

2栏很常见，3栏最多

正确：

错误：

分离的顶部区域

明确清楚够大的品牌和导航区域

用颜色条分隔页面头部和页面内容区：

头部区域和页面内容区域完全分开，颜色不同，没有导航栏：

实在的内容区域

最简单的突出主要内容部分的办法是用强烈的颜色：

白色也可以：

简单的导航

导航元素通常是字体大、加粗、清晰而且明确；带链接的文字和普通文字通常有明显的区别：

导航系统要让用户知道：

1. 你在哪里
2. 你还可以去到什么其他地方
3. 你做一件事情的时候有哪些选项

通常应该让导航链接：

1. 和其他内容在位置上分离开
2. 用颜色和图形是导航元素与众不同
3. 用明确的文字说明来避免歧义

所以导航元素应该清楚明白地和非导航元素分开：

粗大的Logo

Logo应该：

1. 能和内容在视觉上相衬，而且可以用于别处（比如印在TShirt上）
2. 能够被识别和区别
3. 第一眼就能表达出你品牌的特质和质量

这里是一些不错的logo： http://www.webdesignfromscratch.com/great-web-logos-for-creative-inspiration.php

大字体

大字体突出重点、易于识别

粗体介绍

使用粗体标题来作为介绍文字

强烈的色彩

明快强烈的色彩能吸引眼球，善用颜色来分隔区域、突出重点。

颜色可以用来表达品牌价值：

当色彩元素应用于（或者环绕）主要内容时，需要小心:

丰富的表面效果

真实的表面效果（例如投影、渐变色和反射）让用户感觉表面更真实。

参见3D效果的例子:http://www.webdesignfromscratch.com/3d-effects.php

渐变

渐变效果可以让原来平板的色彩和表面更柔和。

渐变通常用在页面顶端的背景

反射

一：光亮表面的反射效果，参见Aqua界面效果。

 
二：shiny table效果

参见：Here’s how to do it (from photoshoplab.com)

可爱的图标

现在应该使用更少更好的图标来表达更丰富的含义。Web 2.0的设计师仅仅把图标用在更有价值的地方。

星标

一页最多用一个：

 

Graphic Design Skills for Web Page Design

See http://webdesignfromscratch.com/graphic-design.php

【未完成】

Usability

See http://webdesignfromscratch.com/usability.php

【未完成】

 

 

Current style in graphic design for the web

From:http://webdesignfromscratch.com/current-style.php

使用3D效果，但要谨慎

反光和渐变的效果很常用，投射阴影则要注意使用频度

圆形的标识到处都是

使用柔和而自然的背景色

简单的白色和灰度渐变的背景给人cool、自然和柔和的感觉，加上前景强烈的颜色，很容易吸引用户的眼光。

小心使用强烈的颜色

用强烈的颜色抓住用户的眼球

适当地应用漂亮的图标

别在同一个页面使用过多的引人注目的元素

留白要充分

留白可以分隔页面元素，辅助用户阅读

大字

让最重要的文字比普通文本更大。但是如果所有的字都大，那么等于没有任何大字——仅仅突出那些重点。

 

 

The Logos of Web 2.0

See http://fontfeed.com/archives/the-logos-of-web-20/

柔和的（Softies）

字体多用圆角柔和的，如VAG Rounded、Helvetica Rounded、Arial Roundeed、Bryant还有FF Cocon。

最近下面字体也很常用：Foco、Tondo、FF Netto、Estilo Text和FF Unit Rounded。

Clip Shack — video sharing
Font: VAG Rounded and Light obliqued

Zimbra — collaborative calen­dar
Font: VAG Rounded Light

Way far ing — custom Google Maps
Font: VAG Rounded (fat tened with added stroke)

Kajeet — mobile phone service
Font: VAG Rounded (custom ‘j’)

Pando — file sharing
Font: sim i lar to Bryant Medium Alt

Zopa — lending exchange
Font: sim i lar to Frank furter Medium or Bryant Bold Alt

MySpace — socialnet working
Font: Arial Rounded Bold andBell Gothic Black

Track sLife — per sonal data base
Font: Arial Rounded Bold

Event ful — collaborative calen­dar
Font: Arial Rounded Bold (slightly smooshed)

Sponge cell — collaborative cal­endar
Font: Arial Rounded Extra Bold

Skype — internet telephony
Font: Hel vetica Rounded Bold

ShoZu — photo sharing
Font: FF Cocon Bold

Tabblo and Tabblog — photo sharing
Font: FF Cocon Bold

 

预言家（Futurists）

点阵图，直边和简单的构图

字体：FS Sin clair, FSAlvar, FF Cube, FF Netto, Sys, Notes Style, Purista, Stra tum, Neu traliser, ITCTetra, Stain less, Atrament

Last.fm — musi cal social net­work
Font: ITC Ronda (cus tomized)
Alter nate: Aver nus

Pho to bucket — photo host ing
Font: Dig i tal Sans Medium

Plazes — geo graph i cal net work­ing
Font: Base 9 Reg u lar SC

News Ga tor — RSS aggre ga tor
Font: ITC Bauhaus Medium

Reminder Feed — reminders via RSS
Font: FF Dot Matrix Two Reg lar

Tech no rati — weblog search tool
Font: Neo Sans Medium

Tag World — social net work ing
Font: Handel Gothic Bold

Shoutwire — news shar ing
Font: Agency Bold

 

 

经典型

保守地使用下面的字形：Trade and News Gothic, Frutiger, Avenir, Inter state, FF Meta,FF DIN, Helvetica

下面这些替代用字型可以让你的logo看起来与众不同：

• Trade Gothic → Spiegel, Benton Sans, Brown Gothic
• Frutiger → Loca tor, FF Transit, Vialog
• Futura → FF Super Grotesk, Neuzeit Grotesk, Nobel
• FF DIN → Malmö Sans, Magion, Sophisto, Antagometrica, FF Good
• Helvetica → see Alternatives to Helvetica

Xanga — weblog community
Font: Trade Gothic No. 2 Bold and Light

Feed Burner — RSS optimiza­tion and tracking
Font: Trade Gothic Bold

Newsvine — news sharing
Font: FF Meta Bold and Book

Stand Point — belief sharing
Font: FF DIN Medium

DropSend — file sharing
Font: Frutiger Bold

Flickr — photo sharing
Font: Frutiger Black

PureVolume — music promo­tion
Font: Avenir Book and Medium

Shutterfly — photo service
Font: Avenir Heavy (cus­tomized)

9rules — web design ne work
Font: Helvetica Bold

PODZINGER — podcast search
Font: Interstate Black

Camp fire — group chat
Font: Interstate Regular

YouTube — video sharing
Font: Alternate Gothic No. Two

Blog lines — news aggregator
Font: ITC Officina Bold

Weblogs, Inc. — blog network
Font: Syntax Bold

Wikipedia — collaborative ref­erence
Font: Hoefler Text

 

新古典

 

Social text — enter prise wiki
Font: Lisboa Sans

Face book — social networking
Font: Klavika (customized)
Also: cards with Vista Sans

Joyent — small business server
Font: Proxima Nova (alt ‘a’)
Not a logo, but we love Joyent’s use of Proxima — a new face that feels familiar but has its own character.

 

 

免费图标

See http://www.iconspedia.com/

 

写作

See http://www.alistapart.com/articles/learntowrite

【未完成】

配色

See http://www.modernlifeisrubbish.co.uk/article/web-2.0-colour-palette

Neutrals

Shiny silver [#EEEEEE]

Reddit white [#FFFFFF]

Magnolia Mag.nolia [#F9F7ED]

Interactive action yellow [#FFFF88]

Qoop Mint [#CDEB8B]

Gmail blue [#C3D9FF]

Shadows Grey [#36393D]

Bold

Mozilla Red [#FF1A00]

Rollyo Red [#CC0000]

RSS Orange [#FF7400]

Techcrunch green [#008C00]

Newsvine Green [#006E2E]

Flock Blue [#4096EE]

Flickr Pink [#FF0084]

Muted

Ruby on Rails Red [#B02B2C]

Etsy Vermillion [#D15600]

43 Things Gold [#C79810]

Writely Olive [#73880A]

Basecamp Green [#6BBA70]

Mozilla Blue [#3F4C6B]

Digg Blue [#356AA0]

Last.fm Crimson [#D01F3C]

 

Designing for Web 2.0: The Visual Ecosystem

See http://www.slideshare.net/lukew/designing-for-web-20-the-visual-ecosystem

一些Web2.0网站

http://thesleepydumpling.blogspot.com/2008/07/interesting-web20-tools-and-links.html

工具

多种Loading动画 http://ajaxload.info/

圆角生成 http://www.spiffybox.com/

Web2.0风格按钮 http://iris-design.info/photoshop/web-20-style-buttons/

渐变效果 http://www.photoshoplab.com/web20-design-kit.html 和 http://www.photoshoplab.com/web-20-design-kit-part-2.html

书籍

http://savethepixel.org/