还在为怎么做作品集发愁?

新的一年即将到来，除了22Fall的同学们正在埋头完善项目外，还有部分同学也已经开始准备作品集，着手23Fall的申请了。

那么，

优秀的作品集都具备哪些特质呢？

我们该如何制作一个出色的作品集呢？

在我们创作过程中，需要遵循哪些原则？

对于刚接触作品集的同学来说，应该从哪一步开始？

今天，我们就来看一看Doist产品设计师 Alex Muench是如何教我们创建作品集的。

Alex Muench

Doist 产品设计师

作为设计师/未来设计师，我们建立专业形象的核心就是自己的作品集。在大多数情况下，作品集都会采用个人网站的形式，其中会包含多个项目和案例研究。

作品集需要突出我们的专业技能，同时更好地展示自己。 一个出挑的作品集不单单只是呈现我们的项目，同时还需要阐述我们是如何形成设计 概念的、是如何执行设计以及如何解决在创作过程出现的一系列问题的。

因此，我们需要遵循5个设计原则，这样才能做出一个不错的作品集，吸引他人的注意。

Art by Rachel Beiser

01

先制定目标，再写，最后设计

在项目启动 之初，当我们想到一个很酷的设计理念时，就会产生兴奋感。我们会迫不及待想要进入设计阶段，然后开始打磨小细节，例如更改调色板或选择字体。但是，在大家第一次制作作品集时，以上这些都不应该是第一步操作。

就像我们试图解决设计问题一样，首先，我们需要写下作品集的核心目的，需要包含哪些信息来实现这一目的，以及我们想要如何在视觉和书面上准确地阐述自己的故事。只有这样，我们才可以开始深入研究设计细节。

除此之外，我们也可以留出一些时间来进行" deep work" 。在手机上使用类似于Notes的简约文本编辑类应用程序，这样就可以防止自己过早进入设计阶段。另外，使用Dropbox Paper或Apple Notes这类预定义文本样式的软件可以为我们的想法添加一点层次结构。

Photo by Dwinnawan

如果我们想要通过作品集传达信息，就需要 快速集思广益 ，然后按优先级对这些想法进行排序：

• 这个作品集的目标是什么
  

• 谁会浏览这个作品集？老师？考官？还是自己？
  

• 我们应该如何介绍自己？对方需要了解我们什么？

• 第一印象很重要。我们想要通过作品集传达什么信息？例如，如果有浏览者查看了我们的作品集网站，那么他们如何可以确认我们的身份？
  

• 我们想在作品集中放进哪些项目？按类型、时间对它们进行排序，或将自己最印象深刻的项目放在首位
  

• 对方在看了作品集后应该如何联系自己？

在我们有了最初的这些想法后，就需要开始将这些信息进行提炼、重新排序并添加结构。我们不难发现，其实最开始的这一步就像一个写作过程：先写，后修改。

Art by Jozsef Deak

02

保持网站简单、可浏览和可访问

在进入设计阶段后，我们应该把 用户的体验放在首位。 在研究过程中，我们可能会看到一些启发灵感的网站以及想要纳入作品集中的设计趋势。因此，这就需要我们适度地执行这一系列操作。

一个好的作品集，首先是组织良好且具有较强的可读性，而不是一味的在视觉上呈现出压倒性趋势。下面是一些比较好的经验法则：

▍确保网站的可浏览性

某些访问者只是单纯地浏览网站。我们要做的就是让他们可以轻松浏览作品，而不要把整个浏览操作过程变得过于复杂。将文本分成多个短段落、添加标题和图像描述，其中可以包括粗略的草图或其他设计过程的视觉效果。

▍页面导航清晰且可访问

在大多数情况下，我们的作品集页面应该包括以下这些内容：

• our work (作品): 包括样品、项目、案例研究等内容
  

• about us (关于我们): 访问者可以在页面上了解更多关于我们的信息、目前在做什么、未来的职业规划，以及任何关于我们的事情
  

• contact (联系方式): 在这里我们需要明确提供联系方式的原因，这在很大程度上取决于该作品集的目标
  

• start page (起始页): 指向初始页面的链接，可以在左上角命名为“主页”或只是使用我们的名字。这是一种帮助浏览者回到起始页面最简单的方式

这些内容一般会被置于页面最顶部

Photo by Gilb

▍保持动画、字体和颜色的简单化

安全起见，我们可以使用基本的排版设置，在作品集中使用的字体应该在任何浏览器上都能很好的呈现。此外，在颜色搭配上也需要符合万维网联盟 (W3C)定义的最低对比度。

基础web排版

图源：https://www.nngroup.com/articles/ux-design-portfolios/

▍考虑移动设备的设计/测试

在创建过程中，我们也需要思考一个问题，那就是：访问者可以从哪些渠道对我们作品集网站进行浏览。

例如， 在移动设备上滚动浏览与在电脑端上的操作体验是不同的。 在移动端上使用自定义滚动动画通常只会分散注意力，并且在使用时会很麻烦；同样，在电脑端上看起来合理的段落在移动端上显示时就可能会非常长且难以阅读。 因此，我们需要针对较小屏幕进行网页设计测试， 甚至是针对移动优先的设计。

较小屏幕页面与较大屏幕页面

Photo by Ben Mingo

▍不需要个人logo

作为产品、用户体验或网页设计师，我们最好专注于在作品集中展示自己的专业技能。在大多数情况下，用统一的字体在标题或介绍文本中写下我们的名字就足够了。但值得注意的是，需要使用与其他文本相同的排版系列进行设计。

作品集主页面

图源：Behance

▍使用无代码作品集编辑器

一旦我们计划和编写了内容，就可以使用无代码作品集网站进行创作。借助WordPress, Webflow, Squarespace, Cargo, Tumblr 或 Dribbble Pro，它们可以帮助我们浏览并使用模板、拖放图像、快速使我们的设计栩栩如生，并且不需要太多的编码知识。

Webflow

03

专注于最喜欢的项目

对于有大量设计项目可供选择的同学来说，建议大家只将最重要的项目包含进去，因为这些项目能够准确展示未来我们想要从事的设计研究方向。

如果是一名新设计师，我们的项目很可能没那么多。但别担心，展示我们的方法和想法比拥有一页又一页的项目示例更重要。我们在大学期间的项目也一样有价值。如果我们觉得这些项目不错的话，也可以放进作品集之中。我们需要知道，即使我们刚刚起步，也并不意味着我们展示的内容就没有价值。

图源：Behance

04

详细记录设计流程

确保我们可以从每个作品集中获得最大收益，尤其当我们缺少项目时。在编写案例研究时，应该遵循一个良好的结构，即：问题、目标、假设、流程、解决方案、结论以及反思。

除此之外最重要的是，我们需要表明自己在项目中的角色身份。作品集往往只是客观地呈现设计工作。我们知道自己设计了哪个像素和图标，但浏览者应该如何判断我们的创作，以及是否影响了某件作品或设计决策呢？因此，我们需要在一开始就明确表示自己的身份，例如问题解决者、领导者、研究人员或其他身份。

05

收集并记录最新项目

在完成项目或发布后， 直接编写案例研究可 以帮助我们回顾整个项目、记录创作过程并进行反思。大家可以参考下面三条建议：

• 总是从写作开始：目标、问题、假设、过程、解决方案、结论和最终收获

• 使用视频/演示/短动画等可视化细节，并保留原始设计文件。在各种设备上对完成的项目进行截图。我们永远都不知道什么时候会需要它在模型或未来的演示中进行展示

• 使用云文件夹来存储书面和可视化文档（文本文档和设计文件/导出的图像）

总之，我们需要把自己的作品集当作活文件一样对待，并在完成一个项目后立即进行记录。

Art by Yannic Gäse r

以上，就是有关作品集创建时需要谨记的5条原则。我们需要牢记，在制作作品集时，要从小处开始，边走边学习边发展。我们投入的越多，就越知道自己想呈现出怎样的作品集。

编辑：YAN

原文链接：

https://dribbble.com/resources/product-designer-portfolio

图文信息源于网络，侵权告知即删