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

2021-01-14 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為國內外設計師們助力，無論是移動原型設計，還是各種類型的網頁原型設計，如網頁作品集設計，網站登錄頁設計等都能貢獻出一份力量。咳咳，扯遠了。。。

相關焦點

  • 臺灣網站設計案例賞析:怎麼設計美觀網頁
    雖然網站設計的風格千差萬別，但同一文化地區的網站設計有趨同趨勢。但趨同不是完全相同，一些臺灣地區企業網站，其設計風格和大陸略有不同，但也有很多值得參考的地方。下面就從幾個臺灣網站設計案例來給大家分析一下，怎麼做好臺灣網站建設。
  • 用戶體驗設計思維:5個步驟,打造讓人眼前一亮的設計作品集
    「設計師」一詞可以有許多不同含義，同樣，設計師這一角色也擁有諸多可能的技能和職責。用戶體驗設計師的作品集就是在展示自己所擅長的領域、優勢、設計過程和設計風格。你作品集的「用戶」很有可能是招聘經理、獵頭，亦或是用戶體驗專業人士（你未來的同事），因此，你的作品集必須能夠吸引不同人群。思考一下你想要通過作品集展示哪些能力，以及不同人群是如何理解這些信息的。招聘經理幾乎不會花時間一字一句地看完整個作品集——這也是為什麼作品集需要能夠快速瀏覽，而無需包含不必要的細節。在設計作品集之前，首先確定你所要傳達的信息優先級。
  • 乾貨|完整的服裝設計作品集都包括什麼?
    服裝設計作品集是現在的留學生在申請學校申請服裝設計專業之前必然要準備的一項專業報告作品集，但是由於教育體制的不同，在歐洲孩子們的5年高中裡學習細化專業知識的時候，我們的學生還在補習班裡埋頭苦讀，備戰高考。那麼服裝作品集有沒有具體的規律可循呢？
  • 案例|服裝設計作品集完整版賞析
    上面這個「藍字」總是有點兒不一樣兒～服裝設計作品集的內容實質並不複雜，具體涵蓋的內容主要有幾大項目：封面一個不錯的封皮，是作品集見人的第一面。所以要重視，言簡意賅，簡明扼要。靈感版靈感版是一個思維整合過程，讓你的知識形成體系，深度思考與探討一個或者幾個要表達的重點。款式圖與效果圖款式圖需要交代清楚款式與裁剪工藝，效果圖要直觀的表現出設計點。形式與軟體能力都會在效果圖上體現出來，同時關係到最終的成衣展示。立體剪裁立體裁剪的過程展示，重點內容是展示服裝的製作過程。
  • 唐詩三百首29首五絕作品賞析之二,篇篇膾炙人口,值得你收藏轉發
    根據「古詩詞網」收錄的相關作品，本百家號按照五絕、七絕、五律、七律、五古、七古、樂府等類別進行賞析。目前五絕古詩已經全部賞析完畢，且七絕古詩也已經賞析過半。這篇文章作為一個匯總，將整體展現唐詩三百首中的經典五絕詩作，且按照作家作品進行排列。
  • 獎牌&獎盃設計—SWNA工作室
    【一戰成名】2018考研衝刺救命班   【必看】暑假結束你的快題應該畫成這樣   這些仿生設計你一定要看2018 暑假手繪第1天就畫成這樣，就說你怕不怕！  手繪課程2天教學成果  馬克筆原圖教你如何上色   5天你就可以畫成這樣2018   設計手繪課程第6天作品    第2天竟然達到這樣  小版面及優秀馬克筆手繪  暑假結束你的馬克筆應該畫成這樣   第10天手繪效果必看  【必備】騰訊課堂工業設計手繪基礎網課來啦！  【純乾貨】這樣的手繪讓我毫無抗拒！   寒假你的手繪應該畫成這樣！
  • 賞析 | 東京奧林匹克火炬設計大師吉岡德仁與他的設計作品
    △2015年展覽作品「龍捲風」1983 年，吉岡德仁進入東京的桑澤設計學校，學習室內設計和工業設計。畢業後，吉岡德仁開始跟隨倉俁史郎工作、學習。選擇一件材料的原因不是因為它們新或者有趣，而是我希望能讓它們變得有趣；我的目的是全新的設計，從沒有人想到過的概念。這一次吉岡德仁設計的火炬，又一次豐富他的作品集，在未來，期待吉岡德仁能帶來更多令人驚喜的作品。
  • 極簡網站怎麼設計?這20個設計師作品集網站給你靈感
    在網頁設計這個事情上，大的趨勢總會在很長的一個時間尺度上發揮作用，就像極簡的設計風格，似乎還沒有一個其他的設計趨勢或者風格能夠完全地將它替代掉。好在極簡主義這個大的設計風格體系之下，設計師常常能夠合理的加入一些個人的想法和獨特的元素，來營造出讓人難忘的體驗，而這也使得每個月的設計師作品集網站推薦，每次都能夠拿出讓人值得學習借鑑的新東西出來。
  • 提升網頁設計高級感的小技巧
    提升網頁設計高級感的小技巧，有人說ui設計師不單純是所謂的「美工」，而是集藝術性與科學性於一身，不僅需要對軟體的使用熟練，更需要對美術繪畫有一定的基礎了解。網際網路時代的崛起，讓ui設計師越來越受企業的重視，當然，想要成為ui設計大師仍舊是一個需要磨礪的過程，今天優行者小編就來說說提升網頁設計高級感的幾個小技巧。
  • 2018 Sony世界攝影獎參賽作品精選欣賞
    比賽將於2018年1月截止，如果有興趣參加的話，可到官方網站瀏覽︰Sony World Photography Awards《中國攝影網》作品徵集2、個人作品集（每組15-30張，文件格式：JPG，圖片寬度統一為1024像素，不得有水印）包括作品說明3、將以上兩組文件打包壓縮成RAR或ZIP格式發送網站編輯部，萬能郵箱：cnphotos@163.com 4、作品入選刊登的，將直接成為中國攝影網籤約攝影師，其作品也將登記入庫，屆時，將邀請國內外知名專家、學者進行作品評選，編輯出版百名攝影家作品集。
  • 2015年網頁設計背景圖流行趨勢
    @十萬個為什麼 提到設計，運用攝影圖是其中一項基本手段，每件設計都或多或少都會用到。本文要剖析的並非攝影圖本身，而是網頁設計中運用和掌控攝影圖的流行趨勢。作為設計師，要對行業發展方向有清楚的了解，我們為大家收集了2015年的設計趨勢，希望對你會有所幫助。不會排版？看
  • 玩家打造,2018年值得一看的《我的世界》建築作品
    說到沙盒遊戲，就不能不提《我的世界（Minecraft）》，作為自由度極高的遊戲，理論上只要有毅力和時間，去處理各種模組以及材質包，再加上一點想像力和創意，就能帶來讓人驚嘆的作品。博士在2018年給大家分享了很多類似的作品，今天來做個盤點。
  • 看這裡!你的插畫作品集攻略終於安排上
    無論你最終選擇哪一個國家留學，插畫的作品集都會是申請環節最重要的一部分。它展示了你的專業水平，並決定了你是否能得到老師/招生官的青睞，獲得目標院校的offer。 那麼，插畫專業作品集該如何準備呢？今天就讓Joey跟同學們聊一聊插畫作品集的準備過程吧！
  • 設計案例|孟菲斯風格作品
    在現代設計中，孟菲斯風格已經滲透到多個領域，如建築設計、服裝設計、室內設計、工業設計、平面設計等。到底什麼是孟菲斯風格呢？我們來一探究竟吧！孟菲斯集團（Memphis Group）是一個於1981年創立的義大利設計和建築集團。由設計師Ettore Sottsass（埃託雷·索特薩斯）與其他22位義大利設計師和建築師組成。
  • 馬歌攝影作品賞析
    攝影作品《衍水情深》入選2015年第十五屆中國平遙國際攝影大展2、2015年，攝影作品《塔灣塔》獲「雪花純生」中國古建築攝影大賽優秀獎3、2015年，攝影作品《感染》、《欣欣向榮》獲「最美弓長嶺」大賽優秀獎4、2015年，攝影作品《溼地》「美年大健康」杯關注健康攝影大賽優秀獎5、2016年，攝影作品《鑄鋼企業》獲遼寧省總工會「勞動美工會情」大賽三等獎
  • 優秀設計師煉成三部曲之一:多看 童園婷設計作品賞析
    特長平面設計以及字體設計。今天和大家一起看看她參與的設計作品以及她個人的字體設計作品，希望能給大家帶來靈感。 01 來噪 Make Some Noise｜ 崑山科技大學視覺傳達設計系一〇七級畢業製作
  • 鞋設 | adidas訓練鞋設計過程
    往期精選設計稿賞析1、鞋設丨安德瑪設計圖賞析2、鞋設丨Y-3設計稿賞析3、鞋設丨這裡有一份高薪的國際品牌設計師崗位等著你4、鞋設丨從透視看設計師的產品表達能力5、鞋設丨阿迪達斯設計師Henoc Monte作品集（1）6
  • 快看漫畫在線觀看網頁版
    快看漫畫在線觀看網頁版是一款非常好玩的軟體，喜歡此類風格的用戶可以體驗一下哦。快看漫畫在線觀看網頁版版本記錄:這麼好玩快看漫畫在線觀看網頁版，不妨下載體驗一下！
  • 2018年iF設計新秀獎(第一學期)作品徵集
    您可提交產品、應用程式、計畫、傳達或服務概念作品參賽，參賽者可提交個人作品，團隊報名人數以四人為上限。參與2018年iF設計新秀獎_第一學期無須繳交費用。本競賽僅接受線上報名，請於2018年2月5日前完成報名。
  • 淡黃的長裙,蓬鬆的頭髮,想牽著你的手看我最新出爐的作品集!
    張總不光是唱功了得，而且竟然畢業於美國舊金山大學服裝設計專業，難怪如此個性的髮型加上堪稱完美的衣品賺得了一手超好的路人緣！小編也知道，在斯芬克有非常多的小夥伴都希望自己能夠像張總一樣，去海外學習服裝設計～那麼乾貨來了！想要申請世界頂尖藝術院校的服裝設計專業，作品集的主題、調研、排版三個方面要如何去準備呢？Part1「主題該怎樣煥然一「新」？」