BlockStudio

Blog部落格

你都去哪裡找網站動態特效設計靈感?(網站設計篇)

版塊設計都去哪裡找網站動態特效設計資源?
網站趨勢社團為什麼都知道這麼多網站?

經過了數十場演說與活動後,發現幾乎每場的 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 不會太多、創新不會太多的網站類型。
不過!被選到的作品都是品味與水準都很好且平均的類型,非常適合「商業網站」

 

❹ French Design Index

https://frenchdesignindex.com/

獎項名稱非常直白來自於法國的 FDI 獎(以前的介面比較好用 😂)。
與上述 SiteInspire 一樣偏向以閱讀友善的「資訊形式」網站,被選到的作品都是品味與水準都很好且平均的類型。
但是!這裡的作品會在更活潑與創新一點,也就是介於 Awwwards 與 SiteInspire 之間、介於創新與平穩之間

 

❺ iKesai

https://www.ikesai.com/

位於日本的亞洲少數網站設計收集平台,沒有評選或投票機制,是那種單純覺得不錯的就會分享在平台上。
這平台有個好處是不會特別介紹作品的優點,點擊後直接連至該網站,相較於其他獎項或平台非常的不囉唆
而且分類功能完整,可以根據分類找到適合的參考網站。

不過近年這網站更新速度非常之慢,一度認為他已經停擺。
但內容幾乎都會是以日文為主的網站優先,如果有日文網站參考需求,這裡就是必訪之地

 

❻ Muuuuu

https://muuuuu.org/

位於日本的亞洲少數網站設計收集平台。
沒有投稿或評選機制,也是屬於「版主喜好型」的平台。
這個平台不論是「作品挑選、平台介面」都是目前看到日本相關平台做最好的 (相對最好)!
只不過更新速度還是蠻慢的…。

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

 

❼ S5 Style!

https://bm.s5-style.com/

S5 與 Muuuuu 相似度蠻高,內容也是會放入許多日文作品,也是「作品挑選、平台介面」都非常有水準的平台。
不同的是這網站具有投稿機制,並且還有我的最愛功能,還不錯~~

 

❽ Dribble

https://dribbble.com/

Dribble 是很早期以「顏色延伸搜尋」的設計靈感網站,起初平台是用邀請制註冊,所以相較於 Behance 、 Pinterset 品質都非常之高。但現在似乎可以直接註冊使用了!
我們很常在這邊找尋「 UI 顏色靈感」、「網站 UI 設計作法」以及「 UI 動態特效想法」。
但!這裡的「 UI 動態特效」比較偏用 AE 做出來的天馬行空型,不考慮實際可能性那種。所以創意性非常的足,但也非常吃製作面的判斷能力。所以千萬不要覺得效果不錯就拿給工程師或客戶,會出事啊~~~要評估一下哦!

 

❾ Collect UI

https://collectui.com/

號稱每天更新收集 UI 介面,隸屬於 Panda 軟體產品底下的介面收集平台。
是以「元件」作為分享的依據,而不是以「網站」為主的平台。
作品品質不一定比其他收集平台好,但對於平台左側的 Filter 篩選功能我覺得非常的棒!
這個 Filter 功能有兩個優點:

  1. 可以將不需要的 UI 排除
  2. 可以從 Filter 的名稱學習元件名稱與知識

 

❿ CSSDesignAwards

https://www.cssdesignawards.com/

2009 年創立,獲獎作品 80% 以上會同步 FWA 、 Awwwards ,算是他們的效仿者。
評選機制比較特別是多了「公眾不記名線上投票」,除此之外與其他評選網站一樣都有「每日網站 WOTD > 本月網站 WOTM > WOTY 年度網站」。

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


總結

上述介紹 10 個網站都是我們每天都會去閱讀的網站也是很棒的參考資訊!
以下統整我們的閱讀順序:

  1. Awwwards:必看,首看。
  2. Muuuuu:必看。
  3. Dribble:找看看有沒有天馬行空的動態、流行的Layout。
  4. S5 Style!:Awwwards 與 Muuuuu 都看不到喜歡的再來這看。
  5. CSSDesignAwards:Awwwards 與 Muuuuu 都看不到喜歡的再來這看。
  6. Collect UI:元件邏輯受阻時、沒有靈感時會來找作法。
  7. iKesai:比較少來看,偶爾會來。
  8. SiteInspire:比較需要資訊平穩網站時來看。
  9. French Design Index:Awwwards 與 Muuuuu 都看不到喜歡的再來這看。
  10. FWA:因為作品技術太高難度,當作藝術品觀看。

創意不是光看別人的作品就可以有的
你想過的大家都想過了,創意是要從日常所見去轉化出來的


相關文章你都去哪裡找網站動態特效設計靈感?(動態特效資源篇)


延伸閱讀

網站趨勢 WebCRACK

網站趨勢 WebCRACK是我們經營的網站趨勢社團, Follow 全世界不論是在『創意、創新、良好體驗』甚至『炫技』等厲害的網站設計做法收集。比較特別的是分享內容都會針對「網站設計細節、動態特效」做文字分析,歡迎加入一起討論哦!

 

Eagle – 圖片收藏及管理必備工具

Eagle是版塊設計公司內部每位設計師的標配工具!對於 Reference 的管理有非常多種方式,包含「標籤管理、多層資料夾、顏色搜尋、註解、截圖方式」等許多功能。另外也有「字體管理」讓查找更加容易,加速了整體工作效率。

post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦