家儒的筆記 » Web Design http://ka-yue.com/blog 網頁設計、開發、SEO 優化 Tue, 27 Jul 2010 17:29:35 +0000 en hourly 1 http://wordpress.org/?v=3.0 BBC 新網站視覺系統 http://ka-yue.com/blog/new-web-design-guideline-for-the-bbc http://ka-yue.com/blog/new-web-design-guideline-for-the-bbc#comments Thu, 18 Feb 2010 23:11:42 +0000 kayue http://ka-yue.com/blog/?p=559

BBC 日前在 Blog 上展示了他們正在設計中的新網站視覺系統，他們稱之為視覺語言 Visual Language，旨在統一 BBC 各個網頁的設計風格。目前 BBC 網站便用的視覺系統是兩年前設計的，該套設計標準規範可在此中尋。

新網站設計想傳遞「現代英國、時事、強勢、獨特、領先、綜合、優秀」等感覺。同時為了適應越來越流行的闊螢幕瀏覽，設計團隊還重新設計了一套新的網格系統 (grid system) 及網頁模版。

當然還少不了字款、顏色選用的規範。總體來說沒有太大改變。將在今年逐漸應用到 bbc 各個網站上。

]]> http://ka-yue.com/blog/new-web-design-guideline-for-the-bbc/feed 0 Web Design Inspiration for the iPhone http://ka-yue.com/blog/web-design-inspiration-for-the-iphone http://ka-yue.com/blog/web-design-inspiration-for-the-iphone#comments Sat, 04 Apr 2009 03:57:52 +0000 kayue http://ka-yue.com/blog/?p=458 Continue reading →]]> iphone-web-design

一般電腦上的網頁設計收藏網站多不勝數，但是 iPhone 上網頁設計收藏站你又知道幾個呢？

因為工作需要，用 Google 搜了一下，發現了cssiPhone.com 。cssiPhone.com 可能是第一個專注於收集 iphone 網頁的設計收藏站。

cssiPhone 作為目前唯一一個同類型的網站，雖然目前收藏品並不太多，但不失為一個不錯的靈感源泉。

以下是該站的自我介紹：

Creative mobile web design is here, and it can be tough searching for iPhone interface inspiration when you need some. You never know if a site has a mobile alternative, and if they do you either have to use your phone to find it, or take a stab at what the sub-domain is: m, iphone, mobile, ect..

CSSiphone.com is dedicated to helping you find your iPhone inspiration.

另外，iPhone 的網站必須用 Safari 才能正常觀看啊。

最近真的很忙，文章有點短請大家見諒。

]]> http://ka-yue.com/blog/web-design-inspiration-for-the-iphone/feed 9 網站設計過程與進化 http://ka-yue.com/blog/design-process-and-evaluation http://ka-yue.com/blog/design-process-and-evaluation#comments Mon, 24 Nov 2008 20:29:09 +0000 kayue http://ka-yue.com/blog/?p=350

經常想知道，那些設計得美倫美奐的網站，究竟經過多少波折才修成正果？是甚麼驅使他們使用目前的設計？否決了哪些方案？又為甚麼否決？

我搜集了國外內的一些設計案例，希望能從中看出個所以然來。

大概可以看出每個 Project 所考慮的因素都有所不同，也見到網站的設計隨著商業定位的改變而不斷作出修正。

]]> http://ka-yue.com/blog/design-process-and-evaluation/feed 4 目錄設計問題 http://ka-yue.com/blog/web-navigation-design http://ka-yue.com/blog/web-navigation-design#comments Sat, 23 Aug 2008 07:44:42 +0000 kayue http://ka-yue.com/blog/?p=283 Continue reading →]]> 對於那些架構龐大、層次很深的網站，目錄的設計十分之重要。一旦設計得不好，很容易讓用戶有 lost 的感覺。要如何解決這個問題，小弟至今仍然沒有一個完美的解決方法。因此小弟比較幾個網站的目錄設計手法，並在此跟大家分享一下所得。

Digg's deep tab navigation

設計師常常會以顏色、字體、位置大小來突出當前被選中的選項。但對於多層次的網站，可能會有多過一個選項被選中的情況。雖然設計師可以同時突出多個項目，但當被突出項目太多的時候，反而會造成用戶認知的困難。正如 Digg 網站的頂部目錄（左方），分為上、中、下三列；三列中又包含五種不同功能的連結，分別為

  1. Join Digg / About / Login
  2. Article category
  3. Popular / Upcoming
  4. Type of digg (News / Videos / Images)
  5. Customize (因大小關係，不在截圖中)

這數目我覺得已經很誇張了，當中更可同時有三個項目被選中（Word & Business, Videos, Popular），並運用了 7 種顏色（2種藍、4種不同深淺的綠、紅式的 icon），如此複雜的設計應該很難為人一下子理解吧。Digg.com 的其他細節都做得很到位，唯獨是目錄太過瘋狂了一點。再看看 funP 的目錄又如何:

相較之下，我覺得 funP 的目錄清晰得多了。不是因為 funP 的功能比較簡單，實際上， funP 網站的層次比 Digg 更加深、功能更加多。funP 的目錄看上去更清晰，全因它把不相關的功能/連結都分別放在不同地方，而不像 Digg 般都堆在一起。看看下方兩張圖就會明白:

這個是 Digg.com 的，所有色塊都在上方。

當然，說到架構龐大，應該沒人及得上 Yahoo! 了。下面是 Yahoo 的做法

[Before] Home page

[After] Content pgae

Yahoo 向來都會為不同服務設計一個獨立的頁面，而不是一種風格套用到整個網站中。所以如果用戶想轉換服務，必須點左上角的連結。你不會在一個子網站的目錄中找到其他服務的身影。雖然比較麻煩，比每個子網站的架構都會因此簡明得多，funP 亦是用此方法。另外 Yahoo! TV 的目錄設計新穎，結合了 tab、breadcrumbs 於一身，雖然尚未被廣泛接受，但仍然很值得參考。

無論如何，有些問題是難光靠設計便能解決的。如果網站的架構混亂，再好的設計也是難以起死回生，反之亦然。君不見 Apple.com 的網站只有 6 個 button 嗎？

]]> http://ka-yue.com/blog/web-navigation-design/feed 5 網頁設計收藏站80個 http://ka-yue.com/blog/web-design-pick http://ka-yue.com/blog/web-design-pick#comments Sun, 25 Nov 2007 18:45:31 +0000 kayue http://ka-yue.com/blog/web-design-pick Continue reading →]]> 香港網頁設計服務

總有人認為網頁設計工作跟去汽水機買汽水一樣，付個錢，按幾下，產品就會從天而降。要知道網頁設計師也是人，我們的靈感也是有限的，秒殺工作談何容易。

這裡收集了共七十個網頁設計好站，對網頁設計師來說絕對是一大好物。它們收集了各式各樣設計優秀的網頁，質量並存。以後各位網頁設計師靈感空虛時不防到這些網站散散心，可能會有意外所得。

排名不分先後，有些我 Bold 了的是我比較喜歡的。

最後更新: 2010 Feb

以顏色分類的網頁設計收集站

香港網站設計

顏色的問題經常讓網頁設計師頭痛，就讓我們看看其他設計師怎樣為網頁配色吧。

  1. CSS Clip:香港網頁設計CSS clip
    CSS Clip: 一個以顏色分類的 CSS 設計收集站
  2. die Kunst:網站設計師die Kunst
    die Kunst: 來自日本的設計網站
  3. strangefruits:網頁設計作品收集http://www.strangefruits.nl/
    SF art & design
  4. blueidea:國內網頁設計師Pages – blue idea
    pages，來自內地的網頁設計作品收藏站。
  5. Design bombs.com
    按網站風格作分類。

CSS 網頁設計作品

用css設計的網頁

CSS, XHTML, Web Standard, what ever you call it. 這部份是我的最愛。

  1. cssvault:Web Standard DesignCSS Vault .com
    CSS Vault: 其網站本身的設計就很優，藏品更棒。
  2. css import:香港網頁設計服務CSS import .com
    CSS Import: CSS 界著名的網頁設計收集站。
  3. css collection:網站製作香港CSS Collection.com
    CSS Collection
  4. css mania:香港css網頁設計師CSS mania .com
    CSS Design: 頗不錯的一個站。
  5. css remix:網頁設計師CSS remix .com
    CSS Remix: 收錄的網站設計都不錯，還有投票功能。
  6. design snack:Hong Kong Web Designerdesign snack .com
    Design Snack: 除了 Web standard site gallery 外，還有 Flash design showcase。
  7. faveup:香港網頁設計服務http://faveup.com/
    Faveup: 除了收集網頁設計作品外，還有 Logos, Business Cards, Flash showcase。
  8. css clip:網站設計香港http://www.cssclip.com/
    CSS Clip: 上面有提過，是一個以顏色分類的設計收集網站
  9. css elite Web Designhttp://www.csselite.com/
    CSS Elite: 所收集的網頁還可以
  10. css-design-yorkshire 網頁設計師http://www.css-design-yorkshire.com/
    CSS Design Yorkshire: 藏品興眾不同 (不同不代表特別好…)
  11. w3c sites: 香港css網頁設計師http://www.w3csites.com/
    W3C Site，即 Web standard 網站收集
  12. css zen garden: Web Standard Designerhttp://www.csszengarden.com/
    Css Zen Garden: 有用 CSS 的網頁設計師都知道的禪意花園。
  13. http://www.webstandardsawards.com/
    Web Standards Awards: 只有自己承認自己的 Web Standards Awards…
  14. http://www.cssallstar.com/
    CSS All Star: 好像程式出錯…
  15. http://standardsreboot.com/
    於 7 Dec 2007 加入。
  16. http://www.cssprincess.com/
    此網站的宗旨是: 支持與宣揚女性的網頁設計師。所以其收藏甚女性化。
  17. http://cssmachine.com/
    收集大量 CSS 網頁設計，並按顏色、CMS 系統、網頁排版、網站類型作分類，推薦。

甚麼都收的網頁設計收藏站

香港網頁設計服務

這部份的網站都很炫酷，因為收錄的網站大都是用 Flash 來設計，設計得天花龍鳳，甚麼都有，就是可用性不高。

  1. http://www.thefwa.com/
    Favourite Website Awards: 所有網頁設計師都聽過它的大名。
  2. http://webrsque.com/
    Webrsque: 以網站類型 (Web、Blog)、語言、配色和樣式等等分類。
  3. http://www.newwebpick.com/
    New Web Pick: 站長好像是華人，定期推出電子設計雜誌，網路上名氣頗大。
  4. http://www.screenalicious.com/
    Screenalicious: 收集各類網頁設計，藏品一般但更新速度快。
  5. http://screenfluent.com/
    Screen Fluent: 收錄了近七千個設計優秀的網站。
  6. http://www.webcreme.com/
    Web Creme
  7. http://irie.be/
    每天為你送上最新的 Flash 網站
  8. http://www.bestwebgallery.com/
    Best Web Gallery: 是不是 Best 就見人見志囉。
  9. http://faveup.com/
    Logos, Business Cards, Flash web design and CSS web design showcase
  10. http://www.designsnack.com/
    CSS, XHTML and Flash design showcase
  11. http://slightshow.com/
    Slight Show: A Silverlight design showcase
  12. http://webrsque.com/
    Web design gallery
  13. http://www.73dpi.net/
    73dpi: 這只是某網頁設工作室的作品集。
  14. http://www.may1reboot.com/
    Web design award
  15. http://strangefruits.nl/
    Art and Design portal
  16. http://www.thebestdesigns.com/
    The Best Design: 網頁設計藏品一般般
  17. http://beautifully-webdesign.net/
    Beautiful Web Design: 主要收集 Flash web site design
  18. http://www.coolsitecollection.com/
    Cool site collection: Digg 形式的網頁設計
  19. http://www.flickr.com/photos/splat/sets/981332/
    Flickr? 看網址就知道是個收集網頁設計作品的 Flickr 相集
  20. http://www.highfloater.com/
    High Floater: 收集 Flash web page design 為主，藏品特別
  21. http://www.websitedesignawards.com/
    Web Site Design Award
  22. http://www.e-motionaldesign.com/
    e-motional Design: version 2.0 soon，期待一下
  23. http://www.designmeltdown.com/
    Design Meltdown: 藏品一般
  24. http://www.gouw.nu/
    Gouw: 收集 Flash web page 為主，頗特別。
  25. http://www.dailyslurp.com/
    Daily Slurp: 收集各類網頁設計作品，藏品一般。
  26. http://screenfluent.com/
    Screen Fluent: 收集各類網頁設計作品，藏品尚算OK。
  27. http://styleboost.com/
    Style Boost: 一個不錯的網頁設計收集站。
  28. http://www.unmatchedstyle.com/
    Unmatched Style: 收集各類網頁設計作品，藏品一般。
  29. http://www.stylegala.com/
    Style Gala: 收錄各種網站，個人認為藏品一般
  30. http://designshack.co.uk/
    Design Shack: 英國的收集站
  31. http://www.e-creative.net/
    e-Creative: 一般一般
  32. http://www.linkdup.com/
    Link dup: 沒落了的網頁設計收集站
  33. http://www.netinspiration.com.ar/
    Inspiration for Web Designer
  34. http://www.designtaxi.com/
    Design Taxi
  35. http://www.xpaider.com/
    XPDR
  36. http://www.moluv.com/
    Moluv (關站中). After 7 years in the trenches, it’s time for a break.
  37. http://www.lookom.com/
    Lookom
  38. http://www.res72.com/
    RES72，頗有名氣的收集站
  39. http://www.crossmind.net/
    Cross mind
  40. http://www.designcollector.ru/
    Design Collector 俄國的網頁設計收集站
  41. http://cartfrenzy.com/
    按網站內容類型

非英文系的網頁設計收集站

  1. http://www.sj63.com/
    設計路上
  2. http://www.die-kunst.com/
    die Kunst
  3. http://phpspot.org/wst/webshot.php?m=alls
    日本
  4. http://www.designlinkdatabase.net/
    日本網頁設計 Gallery
  5. http://www.webneta.net/
    日本的網頁設計 Gallery
  6. http://www.ikesai.com/
    日本 Web design showcase
  7. http://anjo.dekiteharu.jp/
    另一個日本網頁設計 Gallery
  8. http://www.dezinspiration.com/browse/sites
    來自歐洲的網頁設計收集站

其他網頁設計相關

  1. http://www.alvit.de/handbook/
    Web Developer’s Handbook: 網頁設計師必備的手冊。
  2. http://www.opensourcetemplates.org/
    The Open Source Design Community: 有用 CSS 設計網站的人注意了，這裡有免費下載的 CSS Templates 啊。
  3. http://web2.0slides.com/
    Web2.0 Slides is a self-running slide show of over 1,400 of the best Web2.0 sites. It’s categorized by tags and sorted alphabetically.
  4. http://www.smileycat.com/miaow/archives/typography-for-headlines.html
    Typography for Headlines
  5. http://zeniltuo.com/

相關文章

]]> http://ka-yue.com/blog/web-design-pick/feed 60