前一陣子在 Smashing Magazine 看到了一篇 Web 2.0 Tutorials Round-Up ,整理了多篇有關 Web 2.0 且值得大家參考的視覺設計教學文章。從這些教學裡看得出來,幾何、漸層、圓角、倒影、陰影、半透明、頁籤、放射狀標誌等等效果,都是 Web 2.0 在視覺上的特色。不過我想功力高強的視覺設計人員,對這些趨勢也一定有自己深刻的想法;就算去除 Web 2.0 的外衣,這些特色也必定能被他們所掌握。
然而我所接觸過的大部份網頁設計人員,在我的感覺上對這樣的趨勢還不是這麼熱衷;但事實上,其實是他們很多設計都是被客戶所左右;因為對視覺設計人員來說,麵包有時比創意還重要。台灣很多專案公司給視覺設計人員的待遇真的不是普通的差 ( SOHO 和學生大概是禍首) ;而且每個案子都會因應客戶的要求,兩三次以上改版是跑不掉的。
而現在有客戶會去關心 Web 2.0 是什麼嗎?我想絕大部份非網路產業的公司可能不會這麼在意吧。在視覺設計方面,他們常常會有自己的想法;但是實際上真的符合瀏覽者的需求嗎?就我個人看過的案子來說…很少。很大的原因是這些客戶自己其實不太會去使用自己的網站,他們只是覺得這樣看起來比較爽 (註1) 而已。像這樣的客戶,我真的很想把「 Don't Make Me Think 」這本書粘在他們的鼻子上。
其實不管是不是 Web 2.0 ,瀏覽者其實要的不多,重點在於他們在使用上的感受。除了保持新鮮感之外而且還要易用,不同類型的網站就要有不同的設計方式 (註2) 。主事者應該確切瞭解網站的定位,並清楚表達給視覺設計人員;然後不要有太多的意見,把專業的事情留給專業的人去做就好了。
註1:好啦,我承認這樣大家都有爽到…
註2:另外還有一個重點是…我套程式時要很容易!天殺的想了一些亂七八糟的功能,百分之七八十都用不到,結果害我改程式改得要死…|||Orz
扯太多了,我把該文相關內容摘錄如下:
Visual effects
1. Three girls posing in the night Illustration
2. Adobe Software - Adobe Photoshop
3. Adobe Software - Adobe Photoshop
4. Create a software box - Photoshop Tutorial
7. Gradient Styles & How To Make Dashes
8. Creating a page curl in Photoshop
9. Creating patterns in Photoshop CS2
Logos, Logotypes
12. Jelly Remake
15. How to Make a Web 2.0-Style Logo
16. Learn to create your own Web2.0 Logo
17. How to create a WEB 2.0 style logo
18. Web 2.0 Logo #2 | Designphase
19. Web 2.0 Logo | Designphase
20. Web 2.0 Logo
23. The Logos of Web 2.0 | The FontFeed at FontShop
24. web2logo.com
25. How Web 2.0 Logos are Drawn
26. Flickr Photo Download: LOGO2.0 part I and II
Text Effects
30. 3D Text Professional Tutorial
31. Text Kerning
32. The Glossy TEXT web2.0 style
33. Photoshop Tutorials: Texteffect
34. Web 20 Shiny Floor Effect - video tutorial
Badges
35. Web 2.0 Badge Photoshop Tutorial
36. Create a Shiny Badge - Photoshop Tutorial
37. Supermarket Stickers Tutorial - Visualdesigncore.com
38. Web2.0 Badges
39. Glossy web 2.0 badge with rounded corners
40. A Glossy Starburst Tutorial
Buttons
41. Badge'n Button | Designphase - Web Design Tutorials
42. Toxiclab.org - Photoshop - Web buttons tutorial
43. Photoshop Buttons Create glossy button for web 2.0 Tutorial
45. Glossy Button Video Tutorial and PSD
46. Creating flexible buttons using Photoshop shapes and styles
47. Web Badges: Video Tutorial
Web 2.0 Layouts, Gradients, Headers
48. Design a Web 2.0 tab with Photoshop
49. PXLGFX- Perfect Pixel Patterns
51. Banner Navigation Tutorial
52. Shadowness / Tutorials - Website Header Tutorial #3 by Rinn
53. Shadowness / Tutorials - Professional Looking Website Header by Rinn
54. Sleek and Spicy website header Tutorial
55. Vista Style Layout - Talk Mania Forum
56. Web 2.0 "STYLE" web layout - Free Psd
57. Web 2.0 Layout - Tutorial Kit
59. Irish Content Box Tutorial
60. Web 2.0 Design Kit | Photoshop Lab
61. Web 2.0 Design Kit, Part 2 | Photoshop Lab
Web 2.0 Round-Up
63. The Web 2.0 Secret Weapon - Thoughts and errata from Miles Burke.
65. The visual design of Web 2.0
66. Web 2.0 how-to design style guide