Web 2.0 視覺設計/線上產生工具之不完全整理

web20_name_gene (by joaoko)

在這個言必談 Web 2.0 的時代,不管是新推出的網站,或是舊有網站的改版,介面一定是漂漂亮亮的、粉粉的、顏色鮮明的,版面設計最好是要有圓角,logo 裡的字一定要帶有倒影,最後再蓋上 “beta" 這個帥氣到不行的 Web 2.0 精典 (或精神?) 標緻。
因應這個朝流,網路上也開始出現了一些「如何設計才能更符合 Web 2.0」的教學文章,諸如配色、樣式、按鈕之類的,或是甚至直接幫你在線上快速產生一個有 Web 2.0 味道的 logo 或是網站名稱。
那麼下面就把我之前有接觸過的網站或是文章整理出一個「不完全」列表:

  1. Web 2.0 Logo Creator by Alex P
    只要輸入文字,就能快速的產生帶有倒影及 beta 字樣的 Web2.0 超級 logo。
    剛才去看的時候發現網站好像有一點問題,不知道是不是太多人用,用到爆了…
  2. Web 2.0 Company Name Generator
    除了要有漂亮的介面之外,網站當然也要取一個有 Web2.0 味道的名稱。按下網頁的 Generate Name! 扭,便會以亂數拼出一個名稱,當然程式裡的規則是有設計過的,所以拼出來的名稱並不會讓人覺得無厘頭,有一些反而還蠻有質感的呢。除此之外還提供了檢查名稱是否已經被人家註冊為網址的功能。
  3. Ajax loading gif generator
    說到 Web 2.0 網站,多多少少一定會運用 ajax,這個線上工具能夠產生網頁 loading 時所顯示的動畫。
  4. Simple Rounded Corner CSS Boxes made easy
    圓角在也是被 Web 2.0 網站拿來大量使用的視覺元素之一,這網站能幫助我們以 CSS 樣式配合背景圖片設計圓角。
  5. Web 2.0 Design Kit
    這是一篇「如何使用 Photoshop 設計 Web2.0 logo」的教學,淺顯易懂的範例帶領使用者設計出一個屬於自己的 Web2.0 logo。別忘了還有 Part2
  6. Web 2.0 how-to design style guide
    這篇文章列舉了 15 項常被用來設計 Web2.0 網站的元素,例如簡單乾淨的樣式、版面置中、明顯的 logo、強烈的顏色等等,並解說為什麼要這樣用,使用的適合時機,要用在什麼地方,蠻值得一讀的。
    柏強在這裡做了一個這篇文章的摘要簡譯。
  7. Web 2.0 style buttons
    同樣是使用 Photoshop 為教學範例的一篇「設計 Web2.0 樣式按鈕」的教學文章。
  8. Web 2.0 Colour Palette
    這篇文章整理出一些知名 Web2.0 網站的用色,秀過這些顏色可以依照自己的感覺再組合出一套完美的 Web 2.0 配色方案。
  9. Web 2.0 的視覺設計
    由大陸網友翻譯的 The visual design of Web 2.0,內容同樣是講述常被用來設計的 Web 2.0 樣式。
  10. The Logos of Web 2.0
    這篇文章蒐集了許多 Web 2.0 網站的 logo,並且還替他們分類。

Web 2.0 的精神除了注重內容、架構及溝通外,還需要好的視覺設計來襯拖出他們的珍貴。
畢竟除了 BBS 以外,如果使用者在第一眼看到設計不良,版面雜亂無章的網站,我想要再回去第二次應該是很難了。

7 thoughts on “Web 2.0 視覺設計/線上產生工具之不完全整理

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *