要開始設計網站時,常常需要先找看看相似的網站和風格,激發靈感,或是參考大部分的網站是如何設計流程及排版設計網站。事先構想好網頁設計或是找到可以參考的網站,會讓你比較好跟網頁設計公司溝通視覺及功能的部分。
這邊整理了幾個網頁設計、平面設計等相關的網站,可以從這些網站中的作品尋找適合的網頁設計參考及靈感,屬於實用的網頁設計推薦分享給大家!
網頁設計推薦-Awwwards

Awwwards 是個指摽性的網頁設計網站,有專業人士在評比網站設計,每天都會推薦 Site of the day,裡面的網站設計通常藝術感較高,有一些漂亮的動畫技術可以參考,很多人都會當作自己的靈感資料庫。很多網頁設計公司會報名自家的作品去評比,獲獎了可以提高自家品牌的知名度,在業界有一定的公信力。
Awwwards
網址:https://www.awwwards.com/

裡面的 Collection 有非常詳細的分類,從字體、選單設計、hover效果…都有,當你想找特定功能的視覺設計時,可以在這裡好好瀏覽一番,會有意想不到的發現唷。
我們整理幾個比較有趣的內容,歡迎大家也多多去尋找靈感:
- Menu Inspiration
- Hovers, Cursors and Cute Interactions
- Loading Animations
- Image Galleries and SlideShows
網頁設計推薦-WebDesignClip

此日本網站匯集很多日本網頁設計的優良作品,是個網頁設計推薦網站,目前有 3,393 個網站,是極具創意和時尚的日本網站設計的集合,可用作網頁設計製作的參考。WebDesignClip 立志於推薦許多網頁設計,以跟上激發網頁設計師和開發人員的最新趨勢。
WedDesignClip
網址:https://www.webdesignclip.com/

主要的大分類為 Japan、World、Landing Page、Smart Phone,細項分類則非常精細,主要以產業區分,更可以用關鍵字、行業(類別)、顏色、佈局等來去搜尋,對於苦惱網站配色或是想參考不同產業、不同佈局的人可以說是非常實用。
網頁設計推薦-WebDesignFile

此網站也是匯集許多網頁設計作品,搜集的網站內容以英文為主,可以看到很多網站都利用英文字體做許多不同的設計,但網站數較少,分類比 WebDesignClip 更細,也可以用顏色搜尋,若是想設計比較歐美風格的網站或是想找英文排版的網站內容,可以來這裡瞧瞧,找找靈感。
WebDesignFile
網址:http://www.webdesignfile.com/
網頁設計推薦-Muuuuu.org

Muuuuu.org 不僅分享的網站質感都不錯,而且網站更新的很快,每個禮拜都可以看到最新的設計網站。
Muuuuu.org 精心挑選並發布了具有垂直長正統佈局且設計精良的網站,這些網站易於製作網頁設計時參考。雖然主要分享日本的網站,有時侯會分享歐美的設計網站,可參考範圍蠻廣的,非常實用。
網站內也有非常詳細的分類,從色系、網站類別(形象網站或購物網站…等)、不同產業、風格到特效類型都分得很仔細,可以很快速的找到想參考的資料,是個可以快速尋找特定靈感的地方!
Muuuuu.org
網址:https://muuuuu.org/
網頁設計推薦-Responsive Web Design JP

這個網站是日本優秀的響應式網頁設計網站的集合,加藤俊發現國外有很多RWD網站的作品網站,例如“Media Queri” ,但沒有專門針對日本RWD網站的作品網站,所以他自己做了這個網站。
此網站本身也是俱有RWD 響應式設計的唷。網站預覽會貼出電腦、平板和手機的尺寸截圖,也有簡單的分類,但是更新比較慢一些。
網站右側也有一些加藤俊司推薦的網頁設計相關書籍,可以說是非常實用呢!
Responsive Web Design JP
網址:https://responsive-jp.com/
網頁設計推薦-Pinterest

一進到 Pinterest 的網站,映入眼簾的是圖像瀑布流,有非常多的圖片,是非常多人在使用的設計網站。如何搜尋你想要的東西呢?可以用英文單字串連,例如:movie poster design,越多單字串連越能找到你想要找的核心唷。而 Pinterest 最大的優點是你可以把喜歡、想收藏的圖片「圖釘」起來,可以用自己的方式分門別類。真的非常方便呢!Pinterest 算是非常多人在使用的網站(也有App),趕快去尋找你的靈感吧!
網頁設計推薦-Behance

Behance 是 Adobe 旗下用於展示並發現創意作品的平台,匯集了許多設計好手的作品。現今大多的設計師都使用 Adobe 一系列軟體做設計,例如 Illustrator、Photoshop、Lightroom 等等,因此這個網站可以讓使用者選擇你在做這個創作的時候用到了什麼軟體、工具。網站內的分類也很清楚明瞭:平面設計、攝影、插圖、互動(UI/UX)、動態、建築、產品設計、時尚、廣告、美術、遊戲設計、工藝、音效等等。是個非常適合花時間去探索的網站。
Behence Adobe
網址:https://www.behance.net/
網頁設計推薦-Dribbble

Dribbble 是一個用於展示用戶製作的藝術作品的線上網站,同時也是用於推廣平面設計、網頁設計、插畫、攝影等其他創造性領域的商業社交平台。它是一個讓設計師線上分享作品的龐大平台之一,直接與Adobe旗下的Behance — 最大的設計平台競爭。作品內容較多偏UI、UX、網頁設計等等。在這個網站你也可以找工作或發設計師工作,相關資訊可以親自到網站挖挖寶唷。
Dribbble
網址:https://dribbble.com/
網頁設計推薦網站統整
網頁設計推薦網站 | 內容 | 網址 |
Awwwards | 有專業人士評比網站設計的網站作品 | https://www.awwwards.com/ |
WebDesignClip | 日本網頁設計的優良作品 | https://www.webdesignclip.com/ |
WebDesignFile | 歐美風格的網站或英文排版的網頁設計 | http://www.webdesignfile.com/ |
Muuuuu.org | 具有垂直長正統佈局且設計精良的日本網站,每週更新 | https://muuuuu.org/ |
Responsive Web Design JP | 日本優秀的響應式網頁設計網站 | https://responsive-jp.com/ |
適合尋找靈感的設計網站 | https://www.pinterest.com/ | |
Behance | Adobe 旗下用於展示並發現創意作品的平台 | https://www.behance.net/ |
Dribbble | 展示用戶製作的藝術作品的線上網站及創造性領域的商業社交平台 | https://dribbble.com/ |
延伸閱讀: