網頁設計作品集=門面+能力

網頁設計作品集對網頁設計師而言，既是網頁門面，也是個人專業(yè)素養(yǎng)的體現(xiàn)。那么在作品集設計上萬不能掉以輕心。無論是制作一份簡約大方還是極具表現(xiàn)力的精良作品集，設計師們都必須付出十分的努力，參閱大量的設計作品，獲得靈感。

學習在線網頁設計作品集，激發(fā)靈感

好的設計作品不僅能激發(fā)讀者的設計思路，也能讓你對設計者有所了解。以作品說話，也是一個不錯的宣傳自己的途徑。如果你正好也想學習如何設計個人作品網頁，這里摹客君給大家精心整理了一些優(yōu)秀設計師的在線網頁作品集案例，一定會對你有所幫助。

8個優(yōu)秀網頁設計作品集案例分享

1. Personal portfolio

設計師：Mike

來源：Dribbble

作品地址：https://dribbble/shots/4353012-Bryan-Lane-Personal-portfolio

Mike是一個有著豐富的設計經驗的平面設計師，擅長于以用戶為導向的精美平面設計，并且善于結合標識，圖標和插圖于一體的網站設計、應用程序、游戲和用戶界面設計。

Personal portfolio這個作品集是一個典型的平面設計為主導的網頁設計。顯眼的底色配以明亮的3D插畫，頗具特色。平面設計和3D設計的結合既吸引眼球，又非常富有設計感。

2. Designer Profiles

設計師：Ben Schade

來源：Dribbble

作品地址：https://dribbble/shots/3299965-Designer-Profiles-Part-3

Ben Schade是Dribbble上一位高人氣的網頁界面設計師。他的作品多以簡潔干凈的平面設計風格為主。清新淡雅的平面風格的配色讓人視覺感官非常舒服。

網頁設計中的配色技巧、圖標、圖片搭配簡潔樸素。正如左下角的slogan, design less, think more。少即是多的概念，在這個作品集中體現(xiàn)的淋漓盡致。作品集的作用即是讓人關注作品本身，而非單純炫技。

3. Personal Site – JS Interactions

設計師：Drew Endly

來源：Dribbble

作品地址：https://dribbble/shots/3124285-Personal-Site-JS-Interactions

Drew Endly是一個非常有創(chuàng)造力的設計師，從他的設計作品中看來，他十分注重視覺與交互設計的巧妙運用，包括色彩搭配，動效設計以及交互設計。

JS Interactions是一個交互設計為主的網頁作品集。登陸頁的設計非常簡潔。流暢的動效設計引人入勝。跟隨交互動效的跳轉，自然而然的引導網頁作品的展示。各種彈出、滑動的交互在欣賞設計的同時又增添了一些樂趣。整個作品的展示靈巧而不枯燥。成品的制作不僅需要事先借助Mockplus等原型工具做好網頁的交互設計原型，而且需要熟練運用JS的開發(fā)技巧。是個值得參考的網頁設計作品。

4. Portfolio Exploration

設計師：Adrián Somoza

來源：Dribbble

作品地址：https://dribbble/shots/2343357-Portfolio-Exploration-4

Adrián Somoza是一位高級設計師，設計顧問和導師，服務過的客戶包括 Adidas, Google, Nike, Samsung & Netflix等。

這是一個典型的個人作品集網站設計，集合人物設計、個人簡介、作品展示、成就展示于一體，是一個單純以作品和經驗說話的經典網頁設計案例。即使網頁設計本身是15年的作品，但它的設計思路仍舊值得學習。動效的運用，例如，懸浮式的滾動設置，使網頁的焦點由人物切換到個人經歷和作品展示，以今天的設計觀念看來，仍不過時。

以初學者的角度來看，如果想要實現(xiàn)網頁內容的懸浮滾動，只要選對了設計工具其實也變得很簡單。在交互設計工具Mockplus中，利用其滾動區(qū)組件，配合圖標或文本組件的使用，巧妙設置，便可以輕松完成懸浮滾動效果的設計。

5. Portfolio

設計師：Dennys Hess

來源：Dribbble

作品地址：https://dribbble/shots/4527247-Portfolio

這個設計從設計思路來看屬于中規(guī)中舉的作品集網站，但特色在于內容頁面的切換方式。類似紙質書面的翻頁交互方式，給人一種閱讀的真實感。

6. Lank – Creative Design Agency & Personal Portfolio HTML Template

設計師：Reejo George

來源：Themeforest

作品地址：

https://themeforest/item/lank-creative-design-agency-personal-portfolio-html-template/20000858?s_rank=6

Reejo George是一位來自印度的自由設計師，在Themeforest出售自己的網頁設計作品。

這是一個響應式網頁設計，建立在Bootstrap Framework基礎上也易于定制化設計?？梢詫⑺鳛樵O計機構，個人簡歷，或個人網頁設計作品集模板。一頁式布局，現(xiàn)代而干凈的響應式用戶界面設計，100％像素完美設計，跨瀏覽器兼容等等都是現(xiàn)代網頁設計所具備的優(yōu)勢。

7. Active Theory Interactive Intro Page

設計師：ACTIVE THEORY

來源：Awwwards

作品地址：https://awwwards/sites/active-theory-v4

Active Theory是位于加州威尼斯的創(chuàng)意數(shù)碼制作工作室。這個網頁設計的特色在于登陸頁面的數(shù)字加載設計和網站首頁的水波紋動效。動態(tài)的網站背景畫面結合鼠標滑動產生的水波紋動效，使整個網頁顯得非常別致。漸變的轉場動效鏈接到作品展示，極具現(xiàn)代風格的背景畫面和鋼琴鍵側邊欄都顯示出該工作室對動畫設計在網頁上的運用情有獨鐘。

8. Trons - Clean Portfolio & Agency WordPress Theme

設計師：pego

來源：Themeforest

作品地址：

https://themeforest/item/trons-clean-portfolio-agency-wordpress-theme/20268816?s_rank=52

Trons是一個WordPress主題的設計作品集網站。 它為您的創(chuàng)意作品集網站提供了干凈簡潔響應式的極簡風格的WordPress主題。您可以將此網站主題用于：代理機構，個人作品集網站建設，建筑師代理機構，攝影工作室，畫家作品集，藝術家作品集，網頁設計作品，插畫師，自由設計師等的作品集網站設計。響應式設計支持應用于各種設備瀏覽器。是當下比較流行的設計趨勢。

總結：

一份好的網頁設計作品的誕生，除了設計師自有的設計天賦，設計工具的選取，也在于其背后付出的努力與自我學習。以上8款網頁設計作品集案例各有其優(yōu)勢，值得設計師朋友們學習參考。保持良好的學習能力，不僅使你在設計的道路上越走越光明，也會讓你的人生受益無窮。作為一款交互原型設計工具，Mockplus為國內外設計師們助力，無論是移動原型設計，還是各種類型的網頁原型設計，如網頁作品集設計，網站登錄頁設計等都能貢獻出一份力量?？瓤?，扯遠了。。。

一、原始需求分析

第一步就是明確你的目標是什么？有的人有很具體的目標需求，知道自己要做什么。但有的人可能心里知道要做什么，卻不能合理的表達出來，所以之時候就需要多分析幾個競品或者同類型的網站，找出他們的共性，合理自身的需求。

二、域名和服務器

域名就是網站的網址，如果把網站比喻成一棟房子的話，域名相當于房子的門牌。在注冊域名時需要注意：簡單易記、符合企業(yè)形象、后綴常見等幾個注意事項。服務器有不同的類型，空間大小也有不一樣的，所以選擇你需要的，認為合適的即可。

三、產品原型規(guī)劃

在合作共事過程中通常會遇到對文字產生分歧、對圖形的理解會產生誤差。所以可以通過產品原型來了解整個網站的基本概況，減少分歧和誤差。

四、網站頁面設計

頁面設計也就是打造合理的頁面，也既是設計師根據(jù)產品原型進行美術設計，根據(jù)網站的性質進行顏色和布局上的設計。

五、進行網站搭建

搭建網站相當于裝修，也就是把自己的“房子”裝修成你想被人看到的樣子，在這一環(huán)節(jié)抓住用戶的體驗度很重要。

六、網站項目測試

項目測試就是測試網站中的大小問題，測試環(huán)節(jié)非常重要，保證項目上線之前沒有明顯的BUG和致命的硬傷。讓用戶感覺到網站的穩(wěn)定性、安全性等優(yōu)質匹配服務。

七、部署網站上線

源文件部署服務器上線互聯(lián)網，項目從測試環(huán)境切換到真實運行環(huán)境，大概需要一個工作日，在這期間要注意的是數(shù)據(jù)遷移和環(huán)境調試等問題。

網頁設計作品集=門面+能力

網頁設計作品集對網頁設計師而言，既是網頁門面，也是個人專業(yè)素養(yǎng)的體現(xiàn)。那么在作品集設計上萬不能掉以輕心。無論是制作一份簡約大方還是極具表現(xiàn)力的精良作品集，設計師們都必須付出十分的努力，參閱大量的設計作品，獲得靈感。

學習在線網頁設計作品集，激發(fā)靈感

好的設計作品不僅能激發(fā)讀者的設計思路，也能讓你對設計者有所了解。以作品說話，也是一個不錯的宣傳自己的途徑。如果你正好也想學習如何設計個人作品網頁，這里摹客君給大家精心整理了一些優(yōu)秀設計師的在線網頁作品集案例，一定會對你有所幫助。

8個優(yōu)秀網頁設計作品集案例分享

1. Personal portfolio

設計師：Mike

來源：Dribbble

作品地址：https://dribbble/shots/4353012-Bryan-Lane-Personal-portfolio

Mike是一個有著豐富的設計經驗的平面設計師，擅長于以用戶為導向的精美平面設計，并且善于結合標識，圖標和插圖于一體的網站設計、應用程序、游戲和用戶界面設計。

Personal portfolio這個作品集是一個典型的平面設計為主導的網頁設計。顯眼的底色配以明亮的3D插畫，頗具特色。平面設計和3D設計的結合既吸引眼球，又非常富有設計感。

2. Designer Profiles

設計師：Ben Schade

來源：Dribbble

作品地址：https://dribbble/shots/3299965-Designer-Profiles-Part-3

Ben Schade是Dribbble上一位高人氣的網頁界面設計師。他的作品多以簡潔干凈的平面設計風格為主。清新淡雅的平面風格的配色讓人視覺感官非常舒服。

網頁設計中的配色技巧、圖標、圖片搭配簡潔樸素。正如左下角的slogan, design less, think more。少即是多的概念，在這個作品集中體現(xiàn)的淋漓盡致。作品集的作用即是讓人關注作品本身，而非單純炫技。

3. Personal Site – JS Interactions

設計師：Drew Endly

來源：Dribbble

作品地址：https://dribbble/shots/3124285-Personal-Site-JS-Interactions

Drew Endly是一個非常有創(chuàng)造力的設計師，從他的設計作品中看來，他十分注重視覺與交互設計的巧妙運用，包括色彩搭配，動效設計以及交互設計。

JS Interactions是一個交互設計為主的網頁作品集。登陸頁的設計非常簡潔。流暢的動效設計引人入勝。跟隨交互動效的跳轉，自然而然的引導網頁作品的展示。各種彈出、滑動的交互在欣賞設計的同時又增添了一些樂趣。整個作品的展示靈巧而不枯燥。成品的制作不僅需要事先借助Mockplus等原型工具做好網頁的交互設計原型，而且需要熟練運用JS的開發(fā)技巧。是個值得參考的網頁設計作品。

4. Portfolio Exploration

設計師：Adrián Somoza

來源：Dribbble

作品地址：https://dribbble/shots/2343357-Portfolio-Exploration-4

Adrián Somoza是一位高級設計師，設計顧問和導師，服務過的客戶包括 Adidas, Google, Nike, Samsung & Netflix等。

這是一個典型的個人作品集網站設計，集合人物設計、個人簡介、作品展示、成就展示于一體，是一個單純以作品和經驗說話的經典網頁設計案例。即使網頁設計本身是15年的作品，但它的設計思路仍舊值得學習。動效的運用，例如，懸浮式的滾動設置，使網頁的焦點由人物切換到個人經歷和作品展示，以今天的設計觀念看來，仍不過時。

以初學者的角度來看，如果想要實現(xiàn)網頁內容的懸浮滾動，只要選對了設計工具其實也變得很簡單。在交互設計工具Mockplus中，利用其滾動區(qū)組件，配合圖標或文本組件的使用，巧妙設置，便可以輕松完成懸浮滾動效果的設計。

5. Portfolio

設計師：Dennys Hess

來源：Dribbble

作品地址：https://dribbble/shots/4527247-Portfolio

這個設計從設計思路來看屬于中規(guī)中舉的作品集網站，但特色在于內容頁面的切換方式。類似紙質書面的翻頁交互方式，給人一種閱讀的真實感。

6. Lank – Creative Design Agency & Personal Portfolio HTML Template

設計師：Reejo George

來源：Themeforest

作品地址：

https://themeforest/item/lank-creative-design-agency-personal-portfolio-html-template/20000858?s_rank=6

Reejo George是一位來自印度的自由設計師，在Themeforest出售自己的網頁設計作品。

這是一個響應式網頁設計，建立在Bootstrap Framework基礎上也易于定制化設計?？梢詫⑺鳛樵O計機構，個人簡歷，或個人網頁設計作品集模板。一頁式布局，現(xiàn)代而干凈的響應式用戶界面設計，100％像素完美設計，跨瀏覽器兼容等等都是現(xiàn)代網頁設計所具備的優(yōu)勢。

7. Active Theory Interactive Intro Page

設計師：ACTIVE THEORY

來源：Awwwards

作品地址：https://awwwards/sites/active-theory-v4

Active Theory是位于加州威尼斯的創(chuàng)意數(shù)碼制作工作室。這個網頁設計的特色在于登陸頁面的數(shù)字加載設計和網站首頁的水波紋動效。動態(tài)的網站背景畫面結合鼠標滑動產生的水波紋動效，使整個網頁顯得非常別致。漸變的轉場動效鏈接到作品展示，極具現(xiàn)代風格的背景畫面和鋼琴鍵側邊欄都顯示出該工作室對動畫設計在網頁上的運用情有獨鐘。

8. Trons - Clean Portfolio & Agency WordPress Theme

設計師：pego

來源：Themeforest

作品地址：

https://themeforest/item/trons-clean-portfolio-agency-wordpress-theme/20268816?s_rank=52

Trons是一個WordPress主題的設計作品集網站。 它為您的創(chuàng)意作品集網站提供了干凈簡潔響應式的極簡風格的WordPress主題。您可以將此網站主題用于：代理機構，個人作品集網站建設，建筑師代理機構，攝影工作室，畫家作品集，藝術家作品集，網頁設計作品，插畫師，自由設計師等的作品集網站設計。響應式設計支持應用于各種設備瀏覽器。是當下比較流行的設計趨勢。

總結：

一份好的網頁設計作品的誕生，除了設計師自有的設計天賦，設計工具的選取，也在于其背后付出的努力與自我學習。以上8款網頁設計作品集案例各有其優(yōu)勢，值得設計師朋友們學習參考。保持良好的學習能力，不僅使你在設計的道路上越走越光明，也會讓你的人生受益無窮。作為一款交互原型設計工具，Mockplus為國內外設計師們助力，無論是移動原型設計，還是各種類型的網頁原型設計，如網頁作品集設計，網站登錄頁設計等都能貢獻出一份力量?？瓤?，扯遠了。。。

一、原始需求分析

第一步就是明確你的目標是什么？有的人有很具體的目標需求，知道自己要做什么。但有的人可能心里知道要做什么，卻不能合理的表達出來，所以之時候就需要多分析幾個競品或者同類型的網站，找出他們的共性，合理自身的需求。

二、域名和服務器

域名就是網站的網址，如果把網站比喻成一棟房子的話，域名相當于房子的門牌。在注冊域名時需要注意：簡單易記、符合企業(yè)形象、后綴常見等幾個注意事項。服務器有不同的類型，空間大小也有不一樣的，所以選擇你需要的，認為合適的即可。

三、產品原型規(guī)劃

在合作共事過程中通常會遇到對文字產生分歧、對圖形的理解會產生誤差。所以可以通過產品原型來了解整個網站的基本概況，減少分歧和誤差。

四、網站頁面設計

頁面設計也就是打造合理的頁面，也既是設計師根據(jù)產品原型進行美術設計，根據(jù)網站的性質進行顏色和布局上的設計。

五、進行網站搭建

搭建網站相當于裝修，也就是把自己的“房子”裝修成你想被人看到的樣子，在這一環(huán)節(jié)抓住用戶的體驗度很重要。

六、網站項目測試

項目測試就是測試網站中的大小問題，測試環(huán)節(jié)非常重要，保證項目上線之前沒有明顯的BUG和致命的硬傷。讓用戶感覺到網站的穩(wěn)定性、安全性等優(yōu)質匹配服務。

七、部署網站上線

源文件部署服務器上線互聯(lián)網，項目從測試環(huán)境切換到真實運行環(huán)境，大概需要一個工作日，在這期間要注意的是數(shù)據(jù)遷移和環(huán)境調試等問題。