你都去哪裡找網站動態特效設計靈感？(網站設計篇) - 版塊設計 ...

號稱每天更新收集UI介面，隸屬於Panda軟體產品底下的介面收集平台。

是以「元件」作為分享的依據，而不是以「網站」為主的平台。

作品品質不一定比其他 ... BlockStudio©2018Copyright.AllRightsReserved. OTHER 其他文章 到網站上來玩音樂吧！ 2021/08/21 作品解析 版塊設計2021實習計畫(網站設計) 2021/06/12 工作方法 你都去哪裡找網站動態特效設計靈感？(動態特效資源篇) 2021/06/07 工作方法 版塊2020實習計畫成果：網站部門「動態海報」 2021/01/03 工作心得 回文章列表 你都去哪裡找網站動態特效設計靈感？(網站設計篇) 日期 2020/12/28 類型 工作方法 版塊設計都去哪裡找網站動態特效設計資源？ 網站趨勢社團為什麼都知道這麼多網站？ 經過了數十場演說與活動後，發現幾乎每場的Q&A都會被問到的一題「請問你們是從哪裡看到這麼多的網站與參考資料的？」由於實在太常被問到，所以我們乾脆統整一篇文章是關於版塊設計日常都在看的「網站動態特效設計資源」，無私的跟大家公開分享！ 本文內容分成網站設計資源、動態特效資源兩種面向，讓設計師、前端工程師們再提案、發想、製作的過程中有其他多元的參考來源。

【網站設計資源】 內容以「網站獎項、作品收集平台」為主。

大家觀看作品時可以從多種面向切入，包含「視覺、版面、動態、速度、體驗、氛圍」等層面學習觀摩，都是很有幫助的哦～   ❶Awwwards https://www.awwwards.com/ 來自於西班牙的Awwwards，2009年開始營運，是目前全世界第一大且最有指標性的網站設計獎。

它已經大到不用去搜集資料，讓使用者主動提交作品給他們，並建立了完整評選機制。

包含2~3關卡的審核、評審投票、網友投票等機制，獎項早期以及「每天、每月、每年」公布，近幾年加入「開發者獎、行動裝置獎、榮譽獎」...等。

我覺得最棒的是「Nominees」(入圍獎)，在這區塊可以看到許多門檻較低的技術，某種層面對於初階前端工程師非常有幫助！ 這網站能夠參考的資訊非常多面向，非常適合不限程度的設計師、工程師、廣告公司參考閱讀。

目前版塊已獲得五個獎項，可以去看看我們作品～ https://www.awwwards.com/Blockstudio/awards     ❷FWA https://thefwa.com/ FWA是非常早期的網站設計獎，從2000年開始專注於Flash網站設計評選，源自於英國，是目前報名費最高的知名網站獎項。

這網站的作品屬性明顯地會以「高技術含量」為主，獲獎作品不論在3D特效、粒子特效、前瞻性作法都必須有一定程度才會獲獎。

如果你是大神與強者，非常適合以此網站作品為參考。

    ❸SiteInspire https://www.siteinspire.com/ SiteInspire每天會選一個作品與大家分享。

比較屬於小團隊或個人的經營方式，所以不收任何提交作品者的報名費用（非常佛心）。

這裡的作品分享屬性比較偏向以閱讀友善的「資訊形式」網站。

也就是動態特效不會太多、特殊Layout不會太多、創新不會太多的網站類型。

不過！被選到的作品都是品味與水準都很好且平均的類型，非常適合「商業網站」。

    ❹FrenchDesignIndex https://frenchdesignindex.com/ 獎項名稱非常直白來自於法國的FDI獎（以前的介面比較好用😂）。

與上述SiteInspire一樣偏向以閱讀友善的「資訊形式」網站，被選到的作品都是品味與水準都很好且平均的類型。

但是！這裡的作品會在更活潑與創新一點，也就是介於Awwwards與SiteInspire之間、介於創新與平穩之間。

    ❺iKesai https://www.ikesai.com/ 位於日本的亞洲少數網站設計收集平台，沒有評選或投票機制，是那種單純覺得不錯的就會分享在平台上。

這平台有個好處是不會特別介紹作品的優點，點擊後直接連至該網站，相較於其他獎項或平台非常的不囉唆。

而且分類功能完整，可以根據分類找到適合的參考網站。

不過近年這網站更新速度非常之慢，一度認為他已經停擺。

但內容幾乎都會是以日文為主的網站優先，如果有日文網站參考需求，這裡就是必訪之地。

    ❻Muuuuu https://muuuuu.org/ 位於日本的亞洲少數網站設計收集平台。

沒有投稿或評選機制，也是屬於「版主喜好型」的平台。

這個平台不論是「作品挑選、平台介面」都是目前看到日本相關平台做最好的(相對最好)！ 只不過更新速度還是蠻慢的...。

內容也是會放入許多日文作品，如果有日文網站參考需求，這裡也是必訪之地。

    ❼S5Style! https://bm.s5-style.com/ S5與Muuuuu相似度蠻高，內容也是會放入許多日文作品，也是「作品挑選、平台介面」都非常有水準的平台。

不同的是這網站具有投稿機制，並且還有我的最愛功能，還不錯～～     ❽Dribble https://dribbble.com/ Dribble是很早期以「顏色延伸搜尋」的設計靈感網站，起初平台是用邀請制註冊，所以相較於Behance、Pinterset品質都非常之高。

但現在似乎可以直接註冊使用了！ 我們很常在這邊找尋「UI顏色靈感」、「網站UI設計作法」以及「UI動態特效想法」。

但！這裡的「UI動態特效」比較偏用AE做出來的天馬行空型，不考慮實際可能性那種。

所以創意性非常的足，但也非常吃製作面的判斷能力。

所以千萬不要覺得效果不錯就拿給工程師或客戶，會出事啊～～～要評估一下哦！     ❾CollectUI https://collectui.com/ 號稱每天更新收集UI介面，隸屬於Panda軟體產品底下的介面收集平台。

是以「元件」作為分享的依據，而不是以「網站」為主的平台。

作品品質不一定比其他收集平台好，但對於平台左側的Filter篩選功能我覺得非常的棒！ 這個Filter功能有兩個優點： 可以將不需要的UI排除 可以從Filter的名稱學習元件名稱與知識     ❿CSSDesignAwards https://www.cssdesignawards.com/ 2009年創立，獲獎作品80%以上會同步FWA、Awwwards，算是他們的效仿者。

評選機制比較特別是多了「公眾不記名線上投票」，除此之外與其他評選網站一樣都有「每日網站WOTD>本月網站WOTM>WOTY年度網站」。

偶爾會有與其他獎項不同的作品出現，算是可以「加減看」的參考資源。

    總結 上述介紹10個網站都是我們每天都會去閱讀的網站也是很棒的參考資訊！ 以下統整我們的閱讀順序： Awwwards：必看，首看。

Muuuuu：必看。

Dribble：找看看有沒有天馬行空的動態、流行的Layout。

S5Style!：Awwwards與Muuuuu都看不到喜歡的再來這看。

CSSDesignAwards：Awwwards與Muuuuu都看不到喜歡的再來這看。

CollectUI：元件邏輯受阻時、沒有靈感時會來找作法。

iKesai：比較少來看，偶爾會來。

SiteInspire：比較需要資訊平穩網站時來看。

FrenchDesignIndex：Awwwards與Muuuuu都看不到喜歡的再來這看。

FWA：因為作品技術太高難度，當作藝術品觀看。

創意不是光看別人的作品就可以有的 你想過的大家都想過了，創意是要從日常所見去轉化出來的 【下一篇：動態特效資源】 https://blockstudio.tw/blog/webeffect-inspiration-for-blockstudio/ 延伸閱讀 ⓿網站趨勢社團WebTrendCollection https://www.facebook.com/groups/webtrendcollection 『網站趨勢社團』是我們經營的網站趨勢社團，Follow全世界不論是在『創意、創新、良好體驗』甚至『炫技』等厲害的網站設計做法收集。

比較特別的是分享內容都會針對「網站設計細節、動態特效」做文字分析，歡迎加入一起討論哦！   ⓿Eagle-圖片收藏及管理必備工具 https://tw.eagle.cool/ 『Eagle』是版塊設計公司內部每位設計師的標配工具！對於Reference的管理有非常多種方式，包含「標籤管理、多層資料夾、顏色搜尋、註解、截圖方式」等許多功能。

另外也有「字體管理」讓查找更加容易，加速了整體工作效率。

  分享此篇文章 上一篇 版塊2020實習計畫成果：品牌部門賀律銘 回文章列表 下一篇 版塊2020實習計畫成果：網站部門「動態海報」 {{lang=='zh'?'送出':'Submit'}} {{resultTitle[key]}} {{field.label[lang]}} {{field.value}} / {{finalContent}} {{field.value}} - + {{lang=='zh'?'年':'Year'}} {{field.msg}}