網(wǎng)頁(yè)設(shè)計(jì)作品集=門面+能力

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

學(xué)習(xí)在線網(wǎng)頁(yè)設(shè)計(jì)作品集，激發(fā)靈感

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

8個(gè)優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)作品集案例分享

1. Personal portfolio

設(shè)計(jì)師：Mike

來(lái)源：Dribbble

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

Mike是一個(gè)有著豐富的設(shè)計(jì)經(jīng)驗(yàn)的平面設(shè)計(jì)師，擅長(zhǎng)于以用戶為導(dǎo)向的精美平面設(shè)計(jì)，并且善于結(jié)合標(biāo)識(shí)，圖標(biāo)和插圖于一體的網(wǎng)站設(shè)計(jì)、應(yīng)用程序、游戲和用戶界面設(shè)計(jì)。

Personal portfolio這個(gè)作品集是一個(gè)典型的平面設(shè)計(jì)為主導(dǎo)的網(wǎng)頁(yè)設(shè)計(jì)。顯眼的底色配以明亮的3D插畫，頗具特色。平面設(shè)計(jì)和3D設(shè)計(jì)的結(jié)合既吸引眼球，又非常富有設(shè)計(jì)感。

2. Designer Profiles

設(shè)計(jì)師：Ben Schade

來(lái)源：Dribbble

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

Ben Schade是Dribbble上一位高人氣的網(wǎng)頁(yè)界面設(shè)計(jì)師。他的作品多以簡(jiǎn)潔干凈的平面設(shè)計(jì)風(fēng)格為主。清新淡雅的平面風(fēng)格的配色讓人視覺(jué)感官非常舒服。

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

3. Personal Site – JS Interactions

設(shè)計(jì)師：Drew Endly

來(lái)源：Dribbble

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

Drew Endly是一個(gè)非常有創(chuàng)造力的設(shè)計(jì)師，從他的設(shè)計(jì)作品中看來(lái)，他十分注重視覺(jué)與交互設(shè)計(jì)的巧妙運(yùn)用，包括色彩搭配，動(dòng)效設(shè)計(jì)以及交互設(shè)計(jì)。

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

4. Portfolio Exploration

設(shè)計(jì)師：Adrián Somoza

來(lái)源：Dribbble

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

Adrián Somoza是一位高級(jí)設(shè)計(jì)師，設(shè)計(jì)顧問(wèn)和導(dǎo)師，服務(wù)過(guò)的客戶包括 Adidas, Google, Nike, Samsung & Netflix等。

這是一個(gè)典型的個(gè)人作品集網(wǎng)站設(shè)計(jì)，集合人物設(shè)計(jì)、個(gè)人簡(jiǎn)介、作品展示、成就展示于一體，是一個(gè)單純以作品和經(jīng)驗(yàn)說(shuō)話的經(jīng)典網(wǎng)頁(yè)設(shè)計(jì)案例。即使網(wǎng)頁(yè)設(shè)計(jì)本身是15年的作品，但它的設(shè)計(jì)思路仍舊值得學(xué)習(xí)。動(dòng)效的運(yùn)用，例如，懸浮式的滾動(dòng)設(shè)置，使網(wǎng)頁(yè)的焦點(diǎn)由人物切換到個(gè)人經(jīng)歷和作品展示，以今天的設(shè)計(jì)觀念看來(lái)，仍不過(guò)時(shí)。

以初學(xué)者的角度來(lái)看，如果想要實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的懸浮滾動(dòng)，只要選對(duì)了設(shè)計(jì)工具其實(shí)也變得很簡(jiǎn)單。在交互設(shè)計(jì)工具M(jìn)ockplus中，利用其滾動(dòng)區(qū)組件，配合圖標(biāo)或文本組件的使用，巧妙設(shè)置，便可以輕松完成懸浮滾動(dòng)效果的設(shè)計(jì)。

5. Portfolio

設(shè)計(jì)師：Dennys Hess

來(lái)源：Dribbble

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

這個(gè)設(shè)計(jì)從設(shè)計(jì)思路來(lái)看屬于中規(guī)中舉的作品集網(wǎng)站，但特色在于內(nèi)容頁(yè)面的切換方式。類似紙質(zhì)書(shū)面的翻頁(yè)交互方式，給人一種閱讀的真實(shí)感。

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

設(shè)計(jì)師：Reejo George

來(lái)源：Themeforest

作品地址：

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

Reejo George是一位來(lái)自印度的自由設(shè)計(jì)師，在Themeforest出售自己的網(wǎng)頁(yè)設(shè)計(jì)作品。

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

7. Active Theory Interactive Intro Page

設(shè)計(jì)師：ACTIVE THEORY

來(lái)源：Awwwards

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

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

8. Trons - Clean Portfolio & Agency WordPress Theme

設(shè)計(jì)師：pego

來(lái)源：Themeforest

作品地址：

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

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

總結(jié)：

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

以下就是學(xué)姐推薦的十個(gè)交互設(shè)計(jì)網(wǎng)站

1. Dribbble

https://dribbble/

移除

推薦理由：作為一個(gè)曾經(jīng)需要邀請(qǐng)碼的設(shè)計(jì)網(wǎng)站。一度風(fēng)靡一時(shí)，據(jù)說(shuō)邀請(qǐng)碼賣到1500，許多設(shè)計(jì)師尋找靈感，與設(shè)計(jì)師同行進(jìn)行交流切磋等都會(huì)到這里來(lái)。近幾年覺(jué)得dribbble的展示形式比較單一，導(dǎo)致有些作品純粹為視覺(jué)特效去做。這個(gè)見(jiàn)仁見(jiàn)智吧。

2. The FWA

http://thefwa/

移除

推薦理由：地球人都知道的老牌的全球minisite酷站。展示作品比較重視新技術(shù)運(yùn)用于互動(dòng)中，視覺(jué)重視創(chuàng)意表現(xiàn)，其中很多商業(yè)設(shè)計(jì)值得借鑒。但感覺(jué)近期給人眼前一亮的作品減少。

3. Awwwards

http://awwwards/

推薦理由：算是老牌網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的網(wǎng)站了吧，如果說(shuō)Behance這類的網(wǎng)站是設(shè)計(jì)師靈感的來(lái)源，那AWWARDS就是設(shè)計(jì)師（特別是網(wǎng)頁(yè)設(shè)計(jì)）的知識(shí)儲(chǔ)備庫(kù)。

3. Site Inspire

https://siteinspire/

推薦理由：收錄了2500個(gè)網(wǎng)站設(shè)計(jì)，并且可以按主題、類型以及風(fēng)格來(lái)進(jìn)行搜索。能顯示實(shí)時(shí)的網(wǎng)頁(yè)快照和位置。比較豐富。

4. straightline

http://bm.straightline.jp/

推薦理由：一個(gè)日版的UI、網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)匯總網(wǎng)站，日本的設(shè)計(jì)風(fēng)格屬于超級(jí)耐看型，匯集了很多很棒的設(shè)計(jì)，資源也比較豐富。

5. Little Big Details

http://littlebigdetails/

推薦理由：LitterBigDetail是一個(gè)匯總微設(shè)計(jì)的網(wǎng)站，記錄上萬(wàn)個(gè)體驗(yàn)設(shè)計(jì)和產(chǎn)品細(xì)節(jié)。

6. pttrns

https://pttrns/

推薦理由：emmmm....界面像是交互設(shè)計(jì)版的pintest，網(wǎng)站收集了一千多個(gè)App設(shè)計(jì)模板和產(chǎn)品流程截圖，而且還在不斷更新中。這些模板截圖按照App的功能或者截圖的類型分類。另外，還可以通過(guò)放大鏡，更清晰地看清楚截圖。

7. Html5 Showcase

http://html5-showcase/

推薦理由：各種Html5網(wǎng)頁(yè)交互的優(yōu)秀案例

8. Collect UI

http://collectui/

推薦理由：移動(dòng)端UI設(shè)計(jì)案例居多，收錄的數(shù)量也是非常豐富的，放上來(lái)的原因主要是每天都會(huì)更新高質(zhì)量的UI作品，而且歸類詳盡到多達(dá)100多種，可以從網(wǎng)站左側(cè)快速定位進(jìn)行瀏覽。遇到喜歡的作品，還可以直接追蹤到Dribbble關(guān)注它的作者。

9. MUUUUU.ORG

http://muuuuu.org/

推薦理由：好了，又是日式風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)，有許多優(yōu)質(zhì)的日式風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)的案例，日本設(shè)計(jì)風(fēng)格中的自成一派和許多細(xì)微的人性化交互設(shè)計(jì)非常值得借鑒。

10. UYI

http://useyourinterface/

推薦理由：動(dòng)效設(shè)計(jì)居多，很多有趣不錯(cuò)的動(dòng)效案例。

大家有喜歡的網(wǎng)站也可以給學(xué)姐推薦喔~