2021/06/08
8,157
網站設計參考資源哪裡找？十大網站推薦給你！
發想網站動態設計時，該去哪裡找資源參考？獲獎無數的版塊設計團隊不藏私推薦。本文內容將主要推薦網站設計資源進行推薦，幫助設計師、前端工程師們在提案、發想、製作的過程中能夠有更多其他多元的參考來源。
對文章有興趣來不及看？點選右上角「
橘色小書籤」收藏 文章，再也不怕錯過就是一輩子！
演講中、私訊裡，版塊設計團隊常被問到：「請問你們是從哪裡看到這麼多的網站與參考資料的？」由於實在太常被問到，所以乾脆統整一篇文章是關於版塊設計日常都在看的「網站動態特效設計資源」，跟大家公開分享！
看更多網站動態特效設計教學，可參考版塊設計的最新課程
此篇的推薦將以「網站獎項、作品收集平台」為主，在觀摩得獎作品的同時也可以獲得不少創作靈感。建議觀看作品時可以從多種面向切入，包含「視覺、版面、動態、速度、體驗、氛圍」等層面學習觀摩，都是很有幫助的哦！
1、Awwwards
來自於西班牙的 Awwwards，2009 年開始營運，是目前全世界第一大且最有指標性的網站設計獎。這網站能夠參考的資訊非常多面向，非常適合不限程度的設計師、工程師、廣告公司參考閱讀。
它已經大到官方不用主動去搜集資料，反而使用者會主動提交作品給他們，並擁有完整評選機制。包含 2～3 關卡的審核、評審投票、網友投票等機制，獎項早期以及「每天、每月、每年」公布，近幾年還加入「開發者獎、行動裝置獎、榮譽獎」等獎項。
版塊團隊認為，最棒的參考獎項是「Nominees」（入圍獎），在這區塊可以看到許多門檻較低卻不失精彩的技術，某種層面對於初階前端工程師非常有幫助！
目前版塊已在此網站獲得五個獎項啦！在文末放上版塊作品的連結，歡迎去看看！
2、FWA
FWA 是非常早期的網站設計獎，從 2000 年開始專注於 Flash 網站設計評選，源自於英國，是目前報名費最高的知名網站獎項。
這網站的作品屬性明顯地會以「高技術含量」為主，網站上的獲獎作品不論在 3D 特效、粒子特效、前瞻性作法都必須有一定程度才會獲獎。如果你是大神與強者，非常適合以此網站作品為參考。
3、SiteInspire
▶ https://www.siteinspire.com/
SiteInspire 每天會選一個作品與大家分享。比較屬於小團隊或個人的經營方式，所以不收任何提交作品者的報名費用（非常佛心）。
這裡的作品分享屬性比較偏向以閱讀友善的「資訊形式」網站。也就是動態特效不會太多、特殊 Layout 不會太多、創新不會太多的網站類型。
不過！被選到的作品都是品味與水準都很好且平均的類型，非常適合作為「商業網站」的參考來源。
4、French Design Index
▶ https://frenchdesignindex.com/
獎項名稱非常直白，是來自於法國的 FDI 獎。與上述 SiteInspire 一樣偏向以閱讀友善的「資訊形式」網站，被選到的作品都是品味與水準都很好且平均的類型。
但是！這裡的作品會再更活潑與創新一點，也就是介於 Awwwards 與 SiteInspire 之間、介於創新與平穩之間。
5、iKesai
位於日本的亞洲少數網站設計收集平台，沒有評選或投票機制，是那種單純覺得不錯的網站就會被分享在平台上。
這平台有個好處是不會特別介紹作品的優點，點擊後直接連至該網站，相較於其他獎項或平台少去很多冗言贅字，讓使用者直接感受。且網站的分類功能完整，可以根據分類找到適合的參考網站。
不過近年這網站的更新速度非常之慢，甚至一度認為它已經停擺。參考上的唯一限制是，網站中的推薦幾乎都會是以日文為主的網站優先，如果有日文網站參考需求，這裡就是必訪之地。
6、Muuuuu
同樣為位於日本的亞洲少數網站設計收集平台。這個平台沒有投稿或評選機制，也是屬於「版主喜好型」的平台。不過，平台中不論是「作品挑選、平台介面」都是目前看到日本相關平台中做得相對比較好的，只不過更新速度還是蠻慢的。
內容也是會放入許多日文作品，如果有日文網站參考需求，這裡也是必訪之地。
7、S5 Style!
S5 與 Muuuuu 相似度蠻高，內容也是會放入許多日文作品，也是「作品挑選、平台介面」都非常有水準的平台。不同的是這網站具有投稿機制，並且還有「我的最愛」功能，同樣很推！
8、Dribble
Dribble 是很早期以「顏色延伸搜尋」的設計靈感網站，起初平台是用邀請制註冊，所以相較於 Behance、Pinterset 品質都非常之高。但現在似乎可以直接註冊使用了！
版塊設計團隊很常在這邊找尋「UI 顏色靈感」、「網站 UI 設計作法」以及「UI 動態特效想法」。
但！這裡的「UI 動態特效」比較偏用 AE 做出來的天馬行空型，不考慮實際可能性那種。所以創意性非常的足，但也非常吃製作面的判斷能力。所以千萬不要覺得效果不錯就拿給工程師或客戶，要評估一下哦！
9、Collect UI
這個網站主打「每天更新收集 UI 介面」，隸屬於設計網站 Panda 軟體產品底下的介面收集平台。是以「元件」作為分享的依據，而不是以「網站」為主的平台。
雖說網站上的作品品質不一定比其他收集平台好，但平台左側的 Filter 篩選功能真的大大幫忙不少，很值得推薦！
這個 Filter 功能有兩個優點：
-
可以將不需要的 UI 排除
-
可以從 Filter 的名稱學習元件名稱與知識
10、CSSDesignAwards
▶ https://www.cssdesignawards.com/
2009 年創立，獲獎作品八成以上會同步 FWA、Awwwards，算是它們的效仿者。
評選機制比較特別是多了「公眾不記名線上投票」，除此之外與其他評選網站一樣都有「每日網站 WOTD > 本月網站 WOTM > 年度網站 WOTY」。
偶爾會有與其他獎項不同的作品出現，算是可以「加減看」的參考資源。
-
補充內容： 版塊設計在 Awwwards 的獲獎作品
（本文原載於版塊設計網站，原標題：《你都去哪裡找網站動態特效設計靈感？(網站設計篇)》）
看完文章要用時卻忘光光？點選下方按鈕
收藏此文章，我隨時都在這等你回來！
🎉 太棒了！你又學會了新知識！
▶ 用 5 分鐘再多學一點
▶ 推薦線上課程
1098