优秀作品集设计

交互设计

交互专业是一个方向很多的专业，如果你偏重界面、视觉、解决方案方向，那么作品集要注重调研、数据分析、数据展示、解决方案等内容。如果你侧重多媒体、交互装置方向，那么作品集要侧重想法、交互性、技术性、视觉效果等等。

今天给大家介绍一份ACG优秀学员的交互设计作品集，大家可以看看学姐在作品集中展现了以上哪些方面，相信大家看完一定会有所收获噢！

学姐的作品集分为以下6个项目，凭借这份作品集学姐拿到了Parsons、NYU等院校的offer。学姐在作品集中表述说：“将美丽和乐趣带入人们的生活是让我探索和设计的动力。”

下面给大家详细介绍作品集中一个项目：AQUA，申请交互设计专业的小伙伴一定不能错过噢！

AQUA

水被认为是一个平静和温柔的事物，它被允许纳入人们的日常生活和自然界。我根据我对水的理解设计了一个女装系列，并将这个系列扩展到了网站设计中。

设计过程：

探索自然界中的水：在我的项目中，我的目标是展现水的身材，形状和质感，代表它们的平静和温柔。

标志设计：

我的品牌标志来自我的名字Meicheng Jia。一开始，我试图变形我的名和姓的第一个字母M和J。然后我想到将两个三角形组合在一起，从上方和下方创建了两个M。

最终的标志来自于将两个三角形组合在一起创建两个M的想法。 该标识将在网站和包装上使用。

网站设计过程：

该网站旨在通过提供每个细节突出我的设计的独特性。网站的灵感来自我的设计本身，浅粉色和蓝色的配色方案突出了女性的女性气质。

包装的灵感也来自我的项目，包装条可以轻松地通过标志打个蝴蝶结。

学姐的这个项目给大家介绍完了，只看这个项目，是不是有点觉得学姐是申服装专业的呢。

正如开头所说，交互设计作品集并不仅仅局限在调研、数据分析、解决问题等方面，还涉及到交互性、视觉效果等，具体侧重点和你申请的学校和偏向的方向还有关。想看学姐其他作品，可继续关注我们“ACG武汉校区”。

网页设计作品集=门面+能力

网页设计作品集对网页设计师而言，既是网页门面，也是个人专业素养的体现。那么在作品集设计上万不能掉以轻心。无论是制作一份简约大方还是极具表现力的精良作品集，设计师们都必须付出十分的努力，参阅大量的设计作品，获得灵感。

学习在线网页设计作品集，激发灵感

好的设计作品不仅能激发读者的设计思路，也能让你对设计者有所了解。以作品说话，也是一个不错的宣传自己的途径。如果你正好也想学习如何设计个人作品网页，这里摹客君给大家精心整理了一些优秀设计师的在线网页作品集案例，一定会对你有所帮助。

8个优秀网页设计作品集案例分享

1. Personal portfolio

设计师：Mike

来源：Dribbble

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

Mike是一个有着丰富的设计经验的平面设计师，擅长于以用户为导向的精美平面设计，并且善于结合标识，图标和插图于一体的网站设计、应用程序、游戏和用户界面设计。

Personal portfolio这个作品集是一个典型的平面设计为主导的网页设计。显眼的底色配以明亮的3D插画，颇具特色。平面设计和3D设计的结合既吸引眼球，又非常富有设计感。

2. Designer Profiles

设计师：Ben Schade

来源：Dribbble

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

Ben Schade是Dribbble上一位高人气的网页界面设计师。他的作品多以简洁干净的平面设计风格为主。清新淡雅的平面风格的配色让人视觉感官非常舒服。

网页设计中的配色技巧、图标、图片搭配简洁朴素。正如左下角的slogan, design less, think more。少即是多的概念，在这个作品集中体现的淋漓尽致。作品集的作用即是让人关注作品本身，而非单纯炫技。

3. Personal Site – JS Interactions

设计师：Drew Endly

来源：Dribbble

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

Drew Endly是一个非常有创造力的设计师，从他的设计作品中看来，他十分注重视觉与交互设计的巧妙运用，包括色彩搭配，动效设计以及交互设计。

JS Interactions是一个交互设计为主的网页作品集。登陆页的设计非常简洁。流畅的动效设计引人入胜。跟随交互动效的跳转，自然而然的引导网页作品的展示。各种弹出、滑动的交互在欣赏设计的同时又增添了一些乐趣。整个作品的展示灵巧而不枯燥。成品的制作不仅需要事先借助Mockplus等原型工具做好网页的交互设计原型，而且需要熟练运用JS的开发技巧。是个值得参考的网页设计作品。

4. Portfolio Exploration

设计师：Adrián Somoza

来源：Dribbble

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

Adrián Somoza是一位高级设计师，设计顾问和导师，服务过的客户包括 Adidas, Google, Nike, Samsung & Netflix等。

这是一个典型的个人作品集网站设计，集合人物设计、个人简介、作品展示、成就展示于一体，是一个单纯以作品和经验说话的经典网页设计案例。即使网页设计本身是15年的作品，但它的设计思路仍旧值得学习。动效的运用，例如，悬浮式的滚动设置，使网页的焦点由人物切换到个人经历和作品展示，以今天的设计观念看来，仍不过时。

以初学者的角度来看，如果想要实现网页内容的悬浮滚动，只要选对了设计工具其实也变得很简单。在交互设计工具Mockplus中，利用其滚动区组件，配合图标或文本组件的使用，巧妙设置，便可以轻松完成悬浮滚动效果的设计。

5. Portfolio

设计师：Dennys Hess

来源：Dribbble

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

这个设计从设计思路来看属于中规中举的作品集网站，但特色在于内容页面的切换方式。类似纸质书面的翻页交互方式，给人一种阅读的真实感。

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

设计师：Reejo George

来源：Themeforest

作品地址：

https://themeforest/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://awwwards/sites/active-theory-v4

Active Theory是位于加州威尼斯的创意数码制作工作室。这个网页设计的特色在于登陆页面的数字加载设计和网站首页的水波纹动效。动态的网站背景画面结合鼠标滑动产生的水波纹动效，使整个网页显得非常别致。渐变的转场动效链接到作品展示，极具现代风格的背景画面和钢琴键侧边栏都显示出该工作室对动画设计在网页上的运用情有独钟。

8. Trons - Clean Portfolio & Agency WordPress Theme

设计师：pego

来源：Themeforest

作品地址：

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

Trons是一个WordPress主题的设计作品集网站。 它为您的创意作品集网站提供了干净简洁响应式的极简风格的WordPress主题。您可以将此网站主题用于：代理机构，个人作品集网站建设，建筑师代理机构，摄影工作室，画家作品集，艺术家作品集，网页设计作品，插画师，自由设计师等的作品集网站设计。响应式设计支持应用于各种设备浏览器。是当下比较流行的设计趋势。

总结：

一份好的网页设计作品的诞生，除了设计师自有的设计天赋，设计工具的选取，也在于其背后付出的努力与自我学习。以上8款网页设计作品集案例各有其优势，值得设计师朋友们学习参考。保持良好的学习能力，不仅使你在设计的道路上越走越光明，也会让你的人生受益无穷。作为一款交互原型设计工具，Mockplus为国内外设计师们助力，无论是移动原型设计，还是各种类型的网页原型设计，如网页作品集设计，网站登录页设计等都能贡献出一份力量。咳咳，扯远了。。。

一，不同的专业对于作品集的侧重点会有所不同，但是对于设计专业留学作品集来说，学校其实对于作品集的期待都是相同，在我们准备作品集时，我们需要明白以下几个问题：

1.为什么学校需要我们提供作品集？

2.作品集中需要体现出哪些东西？

3.在制作作品集时我们需要注重哪些因素？

二，为什么学校需要我们提供作品集？

对于艺术设计专业，作品集就类似有些专业的论文，可以让学校最直观的去了解我们的专业能力和认识。硕士阶段已经很少会有基础的一些诸如：手绘/软件等基础能力的学习（因此各位转专业的小伙伴们需要自己加强这些方面的练习），更多的是一个project一个project的去锻炼，导师在指导的过程中向学生去教授自己的设计理念和研究方法。

很多同学在准备留学作品集时都会陷入一个误区，就是把所有作品都做的很高大上，这是不正确的，作品的阶梯性是很重要的，这也是为什么我们建议小伙伴们在准备作品集时，一般是3个完善的大作品+部分小作品即可。

很多学校明确要求作品集中的每个作品都能够标注出完成的时间，其实也是为了看到本科学习期间学生的进步和设计理念的升华。

三，作品集中需要体现出哪些东西？

基础能力：专业上要求的基础能力，包括但不限于手绘/2D软件/3D软件等；

调研能力：设计前期调研分析能力，包括但不限于目标用户分析/区域地块分析/市场分析等；

分析能力：创意构思分析能力，包括但不限于关键词提取拓展，2D平面图验证等；

模型能力：创意成型模型制作能力，包括但不限于3D模型和场景使用模拟，物理模型等。

四，在制作作品集时我们需要注重哪些因素？

创新性：艺术设计专业有注重创新创意的传统，留学作品集中的作品首先要有创意，别人有的设计你再做，即使算不上抄袭那也是模仿，而无论是抄袭还是模仿，对于国外院校，都是很忌讳的。

差异性：作品与作品之间需要有所区分和不同，比如工业设计专业，第一个大作品是关于PC的产品设计，那么剩下的大作品最好不要都是有关电子产品的设计，通过作品的差异性去综合的体现自己的能力。

完整性：对于留学申请作品或者是一个真正的设计，完整的设计过程是必不可少的，一般来说我们将一个作品分为三个阶段：前期调研分析/中期创意构思/后期效果表达。国外院校很重视作品的完整性，很多小伙伴在制作作品集时，一味追求渲染效果图的酷炫，其实学校更注重的是你设计思考过程的展现。因此无论是大作品还是小作品在展示时，都要有完整的过程。

丰富性：所谓的丰富性就是不要把自己局限于所申请的专业，比如你是申请工业设计专业，那么作品集中是否可以出现其他专业的作品呢？答案是肯定的，你的摄影足够出色，那么你可以放一些摄影作品，你的手工较好，可以适当展示，只需要把握一个度就可以了。

网页设计作品集=门面+能力

网页设计作品集对网页设计师而言，既是网页门面，也是个人专业素养的体现。那么在作品集设计上万不能掉以轻心。无论是制作一份简约大方还是极具表现力的精良作品集，设计师们都必须付出十分的努力，参阅大量的设计作品，获得灵感。

学习在线网页设计作品集，激发灵感

好的设计作品不仅能激发读者的设计思路，也能让你对设计者有所了解。以作品说话，也是一个不错的宣传自己的途径。如果你正好也想学习如何设计个人作品网页，这里摹客君给大家精心整理了一些优秀设计师的在线网页作品集案例，一定会对你有所帮助。

8个优秀网页设计作品集案例分享

1. Personal portfolio

设计师：Mike

来源：Dribbble

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

Mike是一个有着丰富的设计经验的平面设计师，擅长于以用户为导向的精美平面设计，并且善于结合标识，图标和插图于一体的网站设计、应用程序、游戏和用户界面设计。

Personal portfolio这个作品集是一个典型的平面设计为主导的网页设计。显眼的底色配以明亮的3D插画，颇具特色。平面设计和3D设计的结合既吸引眼球，又非常富有设计感。

2. Designer Profiles

设计师：Ben Schade

来源：Dribbble

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

Ben Schade是Dribbble上一位高人气的网页界面设计师。他的作品多以简洁干净的平面设计风格为主。清新淡雅的平面风格的配色让人视觉感官非常舒服。

网页设计中的配色技巧、图标、图片搭配简洁朴素。正如左下角的slogan, design less, think more。少即是多的概念，在这个作品集中体现的淋漓尽致。作品集的作用即是让人关注作品本身，而非单纯炫技。

3. Personal Site – JS Interactions

设计师：Drew Endly

来源：Dribbble

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

Drew Endly是一个非常有创造力的设计师，从他的设计作品中看来，他十分注重视觉与交互设计的巧妙运用，包括色彩搭配，动效设计以及交互设计。

JS Interactions是一个交互设计为主的网页作品集。登陆页的设计非常简洁。流畅的动效设计引人入胜。跟随交互动效的跳转，自然而然的引导网页作品的展示。各种弹出、滑动的交互在欣赏设计的同时又增添了一些乐趣。整个作品的展示灵巧而不枯燥。成品的制作不仅需要事先借助Mockplus等原型工具做好网页的交互设计原型，而且需要熟练运用JS的开发技巧。是个值得参考的网页设计作品。

4. Portfolio Exploration

设计师：Adrián Somoza

来源：Dribbble

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

Adrián Somoza是一位高级设计师，设计顾问和导师，服务过的客户包括 Adidas, Google, Nike, Samsung & Netflix等。

这是一个典型的个人作品集网站设计，集合人物设计、个人简介、作品展示、成就展示于一体，是一个单纯以作品和经验说话的经典网页设计案例。即使网页设计本身是15年的作品，但它的设计思路仍旧值得学习。动效的运用，例如，悬浮式的滚动设置，使网页的焦点由人物切换到个人经历和作品展示，以今天的设计观念看来，仍不过时。

以初学者的角度来看，如果想要实现网页内容的悬浮滚动，只要选对了设计工具其实也变得很简单。在交互设计工具Mockplus中，利用其滚动区组件，配合图标或文本组件的使用，巧妙设置，便可以轻松完成悬浮滚动效果的设计。

5. Portfolio

设计师：Dennys Hess

来源：Dribbble

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

这个设计从设计思路来看属于中规中举的作品集网站，但特色在于内容页面的切换方式。类似纸质书面的翻页交互方式，给人一种阅读的真实感。

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

设计师：Reejo George

来源：Themeforest

作品地址：

https://themeforest/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://awwwards/sites/active-theory-v4

Active Theory是位于加州威尼斯的创意数码制作工作室。这个网页设计的特色在于登陆页面的数字加载设计和网站首页的水波纹动效。动态的网站背景画面结合鼠标滑动产生的水波纹动效，使整个网页显得非常别致。渐变的转场动效链接到作品展示，极具现代风格的背景画面和钢琴键侧边栏都显示出该工作室对动画设计在网页上的运用情有独钟。

8. Trons - Clean Portfolio & Agency WordPress Theme

设计师：pego

来源：Themeforest

作品地址：

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

Trons是一个WordPress主题的设计作品集网站。 它为您的创意作品集网站提供了干净简洁响应式的极简风格的WordPress主题。您可以将此网站主题用于：代理机构，个人作品集网站建设，建筑师代理机构，摄影工作室，画家作品集，艺术家作品集，网页设计作品，插画师，自由设计师等的作品集网站设计。响应式设计支持应用于各种设备浏览器。是当下比较流行的设计趋势。

总结：

一份好的网页设计作品的诞生，除了设计师自有的设计天赋，设计工具的选取，也在于其背后付出的努力与自我学习。以上8款网页设计作品集案例各有其优势，值得设计师朋友们学习参考。保持良好的学习能力，不仅使你在设计的道路上越走越光明，也会让你的人生受益无穷。作为一款交互原型设计工具，Mockplus为国内外设计师们助力，无论是移动原型设计，还是各种类型的网页原型设计，如网页作品集设计，网站登录页设计等都能贡献出一份力量。咳咳，扯远了。。。