乾貨!2018年你值得一看的網頁設計作品集賞析

2020-12-11 Mockplus摹客

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

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

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

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

8個優秀網頁設計作品集案例分享

1. Personal portfolio

設計師：Mike

來源：Dribbble

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

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

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

2. Designer Profiles

設計師：Ben Schade

來源：Dribbble

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

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

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

3. Personal Site – JS Interactions

設計師：Drew Endly

來源：Dribbble

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

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

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

4. Portfolio Exploration

設計師：Adrián Somoza

來源：Dribbble

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

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

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

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

5. Portfolio

設計師：Dennys Hess

來源：Dribbble

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

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

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

設計師：Reejo George

來源：Themeforest

作品地址：

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

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

這是一個響應式網頁設計，建立在Bootstrap Framework基礎上也易於定製化設計。可以將它作為設計機構，個人簡歷，或個人網頁設計作品集模板。一頁式布局，現代而乾淨的響應式用戶界面設計，100％像素完美設計，跨瀏覽器兼容等等都是現代網頁設計所具備的優勢。

7. Active Theory Interactive Intro Page

設計師：ACTIVE THEORY

來源：Awwwards

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

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

8. Trons - Clean Portfolio & Agency WordPress Theme

設計師：pego

來源：Themeforest

作品地址：

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

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

總結：

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

相關焦點

  • 靈感專題—2019年優秀網頁設計作品賞析 5月
    靈感專題—2019年優秀APP界面設計作品賞析 5月。今天，我們將繼續為大家整理5月份以來Dribbble和Awwwards上面的優秀作品。Tubik提供的這個網頁設計的主題是提供新時代可持續能源生產、消費，甚至分配社區需求的服務。網頁中插畫風格、卡片設計和畫面切換動效的創意結合產生了非常奇妙的效果。2.
  • 掌握網頁設計新趨勢,讓你的交互作品集不減分
    談到互動設計作品集，網頁設計絕對是出現頻率超高的一個項目主題。但當同學們搜索網頁設計時，會發現在各大設計網站一抓一大把，甚至會被好幾年前流行的網頁風格所局限，沒有亮點。最終導致很難從全球大量相似的「競品」中脫穎而出，甚至影響整個作品集的質量。
  • UI設計學生作品圖標集《點線面》
    絕大多數所謂資深講師，名牌設計總監都不能拿出自己像樣的作品集，試問這樣如何教好學生？所以我想了好幾個晚上，我覺得我就來試試吧。首先我不能只圖賺錢，無限制的招人。而且我精力也有限，就小班化教學吧，限制一定的人數。第二天憋了一篇文章發在我的個人公眾號上，沒想到公眾號一推送，幾個小時就被秒完。我沒想到這麼快，當然也感到責任重大。能不能教好這些學生。全是我的責任了。
  • 作品集&排版設計入門課 03期報名
    如果不會排版，沒有添加進作品集，可大大損失了他們的價值！ 酒香也怕巷子深，一份優秀的作品集，就是給自己重金打造的廣告。 作品集&排版設計入門課，帶你從建立邏輯思維，熟悉軟體，清晰方向，信息整合，連貫風格，再到最終的製作完成。
  • 20個色彩明亮的超炫網頁設計
    隨著夏天腳步的到來，在網頁設計中大量使用明亮的色彩會讓讀者眼前一亮，增加對網頁的好感和好奇心。這期佳作賞析帶來的20個網站，或用明亮的色彩強調自身產品的質感，或用明亮色系的妝容突出模特的俊秀臉龐，或用絢麗的色彩營造令人愉悅的瀏覽氛圍。原本略顯死板的平面網頁在明亮色彩的潤澤下仿佛都跳躍了起來！
  • 【VCE特輯·獨家乾貨】設計專業作品集攻略(RMIT)
    Folio這一問題，特意向RMIT設計專業的老師取經。以下是同學們必須學會的四大招：愛德留學移民 微信號：Aidewechat一、IDEA 最重要如果你認為單憑一手好畫就可以過關斬將那你就錯了。創意概念比創意執行更重要！設計過程比最終作品要更重要。審核老師想要看到的不是「成熟」的作品，而是你的潛能。這實際上為技藝還不精湛但有創意思維的同學提供了更多的機會。
  • 作品集網頁界面設計&搭建技術教學 ▏UXD基礎教學
    設計線上課程是UXD日常教學中重要的組成模塊，交互/服務設計基礎課旨在教授完整的設計方法
  • 零基礎做平面設計作品集的tips \\ 作品集
    今天就給大家分享下我總結的零基礎做平面設計作品集的一些實用tips，滿滿乾貨，建議收藏哦！還有人盡皆知家喻戶曉的設計網站和app上的作品，不論是設計作品還是插畫作品，相信都會薰陶到你的審美的～如果你想儘快提升，就拿著去給別人講講，研究研究大佬的東西，分析下創作的思路和你喜歡不喜歡的點～當然你說你不能翻qiang，微博去關注各種藝術家和設計師就好啦，不管大眾的小眾的，（悄悄推薦一下「藝術作品集情報局」
  • 看過500份作品集,為你總結出最強作品集排版乾貨!
    而對象就是藝術院校的作品集審查老師，切記不要和什麼雜誌、書籍排版混淆。對於申請國外院校的中國學生來說，由於語言溝通障礙，面試官可能很難完全了解你，那麼你的作品集就是你最好展現自己的舞臺。所以一定要保證老師能看懂你的作品和簡單的文字說明，其次追求獨特的創作風格，讓審查老師有眼前一亮的感覺。
  • 2018臺北設計獎——工業類獲獎作品賞析
    2018臺北設計獎2018 Taipei International Design Award 這個設計更好地幫助他們解決了線難穿與切斷線麻煩的問題，只需把線穿過針壁的斜口即可，簡單明了。另外，在我們用針線縫好衣服後，通常都是用剪刀或牙齒來咬斷線。在針眼底部加入了一個鋒利的刀片，縫製時將線拉到針眼頂部，縫好了需要切斷線的時候，將線往底部輕輕一刮，線就斷了。
  • 不費吹灰之力搭建個人作品集網站丨交互乾貨免費系列公開課
    報名方式在文末哦~在申請國外學校或找工作的的過程中，作品集是必不可少的，展示方式一般有pdf、網頁兩種
  • 經典網頁設計:20個值得關注的創意作品集網站示例
    作品是展示個人才能的最佳方式，像設計，攝影這些創造性的職業特別需要有個人作品集網站，讓你以個性方式展示自我並呈現你的作品給讀者和潛在的客戶。同時，這些網站中匯集的優秀設計作品和教程也是其它人獲取靈感的很好的來源。今天，本文與大家分享20個製作精美的作品集網站案例，希望能帶給你靈感。
  • 零基礎做平面設計作品集的tips\\作品集
    今天就給大家分享下我總結的零基礎做平面設計作品集的一些實用tips，滿滿乾貨，建議收藏哦！ 1 如何快速入門？ 還有人盡皆知家喻戶曉的設計網站和app上的作品，不論是設計作品還是插畫作品，相信都會薰陶到你的審美的～如果你想儘快提升，就拿著去給別人講講，研究研究大佬的東西，分析下創作的思路和你喜歡不喜歡的點～ 當然你說你不能翻qiang，微博去關注各種藝術家和設計師就好啦，不管大眾的小眾的，（
  • 用戶體驗設計思維:5個步驟,打造讓人眼前一亮的設計作品集
    關於設計作品集最常見的迷思（誤解）是：僅靠UI設計最終稿和屏幕截圖就可以拼湊出作品集。本文將指導你如何通過五個步驟製作一份涵蓋整個用戶體驗過程的作品集，而不流於表面。「設計師」一詞可以有許多不同含義，同樣，設計師這一角色也擁有諸多可能的技能和職責。
  • 網頁設計作品
    >舉報 雲南新華電腦學院學生網頁設計作品
  • 乾貨 | 工業設計如何準備複試作品集?
    道哥尤其記得，在我遠古時期的研究生複試面試的時候，小道正排著隊（忘記了我不用排隊，我站第一個，嘿嘿嘿嘿嘿），看到隔壁面試組的一個小朋友拿著一打用別針夾起來的A4紙來面試，上面都是密密麻麻的文字，而我這邊的小夥伴們都拿著金裝銅版紙列印的作品集。然後研一開學的時候我再也沒有看到過那位小朋友。所以在這裡小道要認真的指導下你們如何去做一本合格的作品集。
  • 臺灣網站設計案例賞析:怎麼設計美觀網頁
    雖然網站設計的風格千差萬別，但同一文化地區的網站設計有趨同趨勢。但趨同不是完全相同，一些臺灣地區企業網站，其設計風格和大陸略有不同，但也有很多值得參考的地方。下面就從幾個臺灣網站設計案例來給大家分析一下，怎麼做好臺灣網站建設。
  • 案例|服裝設計作品集完整版賞析
    上面這個「藍字」總是有點兒不一樣兒～服裝設計作品集的內容實質並不複雜，具體涵蓋的內容主要有幾大項目：封面一個不錯的封皮，是作品集見人的第一面。所以要重視，言簡意賅，簡明扼要。靈感版靈感版是一個思維整合過程，讓你的知識形成體系，深度思考與探討一個或者幾個要表達的重點。款式圖與效果圖款式圖需要交代清楚款式與裁剪工藝，效果圖要直觀的表現出設計點。形式與軟體能力都會在效果圖上體現出來，同時關係到最終的成衣展示。
  • 乾貨|完整的服裝設計作品集都包括什麼?
    服裝設計作品集是現在的留學生在申請學校申請服裝設計專業之前必然要準備的一項專業報告作品集，但是由於教育體制的不同，在歐洲孩子們的5年高中裡學習細化專業知識的時候，我們的學生還在補習班裡埋頭苦讀，備戰高考。
  • 服裝設計作品集素材你真的用對了嗎?
    今天局長就大氣的說一句， 你的作品集被情報局承包了！一個完整的project由以上十個製作步驟組成，而一本完整的服裝設計作品集則是由3-4個項目組成(project的數量只能多不能少)。