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

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

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

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

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

1. personal portfolio

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

作品地址：https://dribbble.com/shots/4353012-bryan-lane-personal-portfolio

mike是一個(gè)有著豐富的設(shè)計(jì)經(jīng)驗(yàn)的平面設(shè)計(jì)師，擅長于以用戶為導(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)頁設(shè)計(jì)。顯眼的底色配以明亮的3d插畫，頗具特色。平面設(shè)計(jì)和3d設(shè)計(jì)的結(jié)合既吸引眼球，又非常富有設(shè)計(jì)感。

2. designer profiles

設(shè)計(jì)師：ben schade

來源：dribbble

作品地址：https://dribbble.com/shots/3299965-designer-profiles-part-3

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

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

3. personal site – js interactions

設(shè)計(jì)師：drew endly

摹客，定制你的設(shè)計(jì)規(guī)范

設(shè)計(jì)系統(tǒng)

作品地址：https://dribbble.com/shots/3124285-personal-site-j...

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

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

4. portfolio exploration

設(shè)計(jì)師：adrián somoza

作品地址：https://dribbble.com/shots/2343357-portfolio-exploration-4

adrián somoza是一位高級(jí)設(shè)計(jì)師，設(shè)計(jì)顧問和導(dǎo)師，服務(wù)過的客戶包括 adidas, google, nike, samsung & netflix等。

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

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

5. portfolio

設(shè)計(jì)師：dennys hess

作品地址：https://dribbble.com/shots/4527247-portfolio

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

6. lank – creative design agency & personal portfolio html template

設(shè)計(jì)師：reejo george

作品地址：

https://themeforest.net/item/lank-creative-design-...

reejo george是一位來自印度的自由設(shè)計(jì)師，在themeforest出售自己的網(wǎng)頁設(shè)計(jì)作品。

這是一個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)，建立在bootstrap framework基礎(chǔ)上也易于定制化設(shè)計(jì)。可以將它作為設(shè)計(jì)機(jī)構(gòu)，個(gè)人簡歷，或個(gè)人網(wǎng)頁設(shè)計(jì)作品集模板。一頁式布局，現(xiàn)代而干凈的響應(yīng)式用戶界面設(shè)計(jì)，100％像素好設(shè)計(jì)，跨瀏覽器兼容等等都是現(xiàn)代網(wǎng)頁設(shè)計(jì)所具備的優(yōu)勢。

7. active theory interactive intro page

設(shè)計(jì)師：active theory

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

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

8. trons - clean portfolio & agency wordpress theme

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

作品地址：https://themeforest.net/item/trons-clean-portfolio-agency-wordpress-theme/20268816?s_rank=52

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

本文名稱：能給你帶來靈感的網(wǎng)頁設(shè)計(jì)作品集賞析
轉(zhuǎn)載源于：http://www.js-pz168.com/news/106411.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、電子商務(wù)、營銷型網(wǎng)站建設(shè)、App開發(fā)、云服務(wù)器、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)