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

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

那么，

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

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

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

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

......

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

Alex Muench

Doist 产品设计师

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

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

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

Art by Rachel Beiser

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

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

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

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

Photo by Dwinnawan

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

这个作品集的目标是什么
谁会浏览这个作品集？老师？考官？还是自己？
我们应该如何介绍自己？对方需要了解我们什么？
第一印象很重要。我们想要通过作品集传达什么信息？例如，如果有浏览者查看了我们的作品集网站，那么他们如何可以确认我们的身份？
我们想在作品集中放进哪些项目？按类型、时间对它们进行排序，或将自己最印象深刻的项目放在首位
对方在看了作品集后应该如何联系自己？

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

Art by Jozsef Deak

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

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

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

▍确保网站的可浏览性

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

▍页面导航清晰且可访问

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

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，它们可以帮助我们浏览并使用模板、拖放图像、快速使我们的设计栩栩如生，并且不需要太多的编码知识。