//china-cms.oss-accelerate.aliyuncs.com/393848049590b32e/網站版面設計.jpg?x-oss-process=image/resize,m_mfit,h_457,w_817/format,webp

12個網站版面設計靈感來源、作品案例 寫網頁更易上手

Jun 30,2021
By FaFa

12個網站版面設計靈感來源、作品案例寫網頁更易上手

愈來愈多人希望擁有一個屬於自己的網站,或是工作上有網站製作的需求,但有時候卻靈感枯竭,感覺無從入手。這時候,全球各地的版面設計網站就能夠成為你的靈感來源!小編在此提供12個全球網頁設計師都常用的免費網頁設計資源給大家參考,寫網頁更易上手。

版面設計網站 (1) - awwwards – 版面設計得獎網站作品案例

awwwards是一個網頁設計得獎作品的線上展示平台。平台裡每個得獎作品網站都有四個評分項目,分為整體設計、易用性、創意度、內容,是由眾多設計師進行評選,實用性十分高。

Link : https://www.awwwards.com/

版面設計網站

圖/graphic design tools

版面設計網站 (2) - Behance - 探索各種網頁設計作品範例

Behance是一款Adobe旗下用於展示並發現創意作品的在線平台,因此與 Adobe CC 系列可以互做非常方便的連結與上傳。

網站使用時,可以直接依關鍵字搜尋你要的設計作品,而且有中文版面。其中內容也分得很細、也比較廣,從 App、網頁設計、插畫等都有。使用上也沒有任何限制,任何人都能註冊、發布作品。

Link : https://www.behance.net/

版面設計網站

圖/google play

版面設計網站 (3) –templated - 發掘各種網頁設計版型作品範例

templated裡有不少網頁版型,同時也提供原始檔供大家下載,而且可以商業使用但需註明版型出處,沒有靈感或想更方便時,可以下載作為自己的參考素材。操作使用上也簡易,找到喜歡的版型後點選縮圖,就會開啟完整的網頁預覽畫面,即可點選右上角的下載按鈕。

Link : https://templated.co/

版面設計網站

圖/夏木樂

版面設計網站 (4) - RWDJP - 日本的RWD響應式網頁設計作品案例

RWD JP是一個以日本網站為主的網站,可以看到在三種不同視窗大小的響應式呈現,可以用關鍵字、分類、顏色等來搜尋你需要的版型類型。

Link : http://responsive-jp.com/

版面設計網站

圖/RWD JP

版面設計網站 (5) -W3 - 免費的RWD網頁設計版型作品案例

W3是一個免費的RWD自適應網頁版型下載平台,此網站裡面提供的版型數量很多,甚至針對版型進行分類,最重點的是,裡面的所有網頁版型都免費,更可作為商業使用,同時網頁不但很有質感也有設計感。

Link : https://w3layouts.com/

版面設計網站

圖/twitter

版面設計網站 (6) -html5xcss3 - 符合HTML5和CSS3的網頁設計作品範例

將近500多種的作品主題,版面簡單操作,符合Html5和Css3響應,適合專業人士參考及使用。

Link : https://www.html5xcss3.com/

版面設計網站

圖/hashnode

版面設計網站 (7) –UI – 中國一站式生態服務平台

UI中國除了是一個網頁設計版面參考網站外,更是一個知識分享互動社區和創意整合營銷平台。此網頁希望藉助互聯網的力量,打造國內用戶體驗設計師一站式生態服務平台,設計師人才數據庫,為設計師做最好的服務提高價值。如果想學習更多新奇有趣的知識,這個網站也不錯。

Link : https://www.ui.cn/

版面設計網站

圖/hksilico

版面設計網站 (8) - Pinterest  - 各種網頁設計範例的靈感來源

Pinterest是一個以圖片分享平台,裡面也有許多網頁設計範例。用家可以利用其平台作為個人創意與專案所需的圖片,也可以用來收集各家網頁設計公司的作品。界面也很簡單方便,若看到喜歡的作品,可以釘選起來或是追蹤這個作者。

Link : https://www.pinterest.co.uk/

版面設計網站

圖/Pinterest

版面設計網站 (9) –Dribbble 神級設計師聚集地

最有人氣的設計靈感網站,許多神級設計師會將自己的作品上傳這個網站分享給大家,是挖寶的好地方。

Link : https://dribbble.com/

版面設計網站

圖/Dribbble

版面設計網站 (10) –OS Templates - 各種免費的網頁設計版型範例

這是一個免費的網頁的素材版型平台,裡面提供HTML的樣版外,還有PSD的網頁版型,同時這些PSD的版型圖層都未合併,方便用家修改與微調。

Link : https://www.os-templates.com/

版面設計網站

圖/twitter

版面設計網站 (11) -設計游牧 Podcast交流

設計遊牧是華語最國際的 UX 設計 Podcast,我們分享各地關於 UX 設計的留學經歷、工作故事、設計新知,準備好與我們一起學習成長!

Link : https://designnomads.co/

版面設計網站

圖/anchor

版面設計網站 (12) – lookup.design 實用性更高

相較於 dribble 或 pinterest 上許多分享太過華麗卻不實用。Lookup.design 是一個收集現實案例的網站,並且是以的UI元件為主,可以快速了解某家公司怎麼設計的,也可以對於產業慣例有比較好的掌握。

Link : http://lookup.design/

版面設計網站

圖/夏木樂