網(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ì)你有所幫助。
設(shè)計(jì)師：Mike
來(lái)源：Dribbble
作品地址：https://dribbble.com/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ì)感。
設(shè)計(jì)師：Ben Schade
來(lái)源：Dribbble
作品地址：https://dribbble.com/shots/3299965-Designer-Profiles-Part-3
Ben Schade是Dribbble上一位高人氣的網(wǎng)頁(yè)界面設(shè)計(jì)師。他的作品多以簡(jiǎn)潔干凈的平面設(shè)計(jì)風(fēng)格為主。清新淡雅的平面風(fēng)格的配色讓人視覺感官非常舒服。
網(wǎng)頁(yè)設(shè)計(jì)中的配色技巧、圖標(biāo)、圖片搭配簡(jiǎn)潔樸素。正如左下角的slogan, design less, think more。少即是多的概念，在這個(gè)作品集中體現(xiàn)的淋漓盡致。作品集的作用即是讓人關(guān)注作品本身，而非單純炫技。
設(shè)計(jì)師：Drew Endly
摹客，定制你的設(shè)計(jì)規(guī)范
設(shè)計(jì)系統(tǒng)
來(lái)源：Dribbble
作品地址：https://dribbble.com/shots/3124285-Personal-Site-J...
Drew Endly是一個(gè)非常有創(chuàng)造力的設(shè)計(jì)師，從他的設(shè)計(jì)作品中看來(lái)，他十分注重視覺與交互設(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的開發(fā)技巧。是個(gè)值得參考的網(wǎng)頁(yè)設(shè)計(jì)作品。
設(shè)計(jì)師：Adrián Somoza
來(lái)源：Dribbble
作品地址：https://dribbble.com/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ì)。
QQ客服