产品设计个人作品集-完成 UX 组合设计的 5 个步骤

本文作者结合自身经验和实际案例，系统地与大家分享UX组合的设计思路。 希望对您有帮助，祝您愉快~

早在2017年11月，我的作品集里只有一个项目，当我把它提交给一位愿意帮助指导的招聘人员后，我受到了严厉的批评，所以我非常担心我的作品集。

于是我把我的作品集发布到了Facebook和Slack群组，希望得到一些改进我的项目演示的建议和方法，然后得到了很多我从未见过的设计师的帮助和支持。

我非常感谢他们的帮助，这就是我写这篇关于创建作品集过程的文章的原因。 我也希望这篇文章能够帮助更多的设计师创建一个结构良好且独特的作品集网站。

去年秋天，我很荣幸我的作品集被选为编辑精选。

Medium 上已经有很多关于创建用户体验工作的建议。 我不想重复类似的建议，而是想将创建投资组合的过程作为案例研究，以便我可以准确地了解如何将建议付诸实践。 我将从以下几个方面进行介绍：

我如何从其他人的投资组合中学习？ 为什么我决定自己编写网站代码？ 我如何在设计作品集时考虑到其用户（作品集的用户包括为设计团队招聘的招聘人员和设计师）我如何快速收集反馈并迭代如何在我的作品集中表达​​我的个性并使其站得住脚出（请务必阅读本节！这很有趣！）

您可以选择您最想了解的部分并阅读。 让我们开始吧！

01 向更有经验的设计师学习

就像我设计其他项目时一样，我首先研究现有的最佳设计，看看经验丰富的设计师如何创造它们。

1. 投资组合资源

我不知道用户体验作品集是什么样子，所以我首先查看了美国顶级 HCI 项目的学生网站。 我浏览了很多作品只是为了了解作品集中有哪些内容以及作品中包含哪些项目。

以下是我访问过的一些网站：

Mudium 上还有一些关于如何创建 UX 组合的精彩文章，我从中学到了很多东西：

来自 Geunbae“GB”Lee

来自尼克·巴比奇

2. 优秀的艺术家模仿，伟大的艺术家窃取他人的作品

首先，设计不是艺术。 那么为什么不引用斯蒂芬·乔布斯和毕加索的话呢？ 他们对于如何从他人那里获取灵感有非常独特的想法。

对我来说，看别人的作品并不是抄袭，而是了解他们哪里做得好，他们是如何解决作品集设计中遇到的问题的，为什么他们的解决方案好，甚至是他们哪里做得好。 不做好产品设计个人作品集，这样才能发挥自己的优势，取其精华，去其糟粕，用自己的方式去解决他们没有解决的问题。

我将讨论我在创建我的投资组合时做出的具体决定，并且我将详细介绍我从其他人的投资组合中学到的东西。

02 选择合适的平台

可以帮助设计师创建作品集的工具有很多，比如Squarespace、Wix、Readymag、Adobe Portfolio、Webflow等模板平台，也可以直接使用HTML/CSS/JS语言编写网站等。那么我是如何选择的？

选择正确的工具就像打下坚实的基础：你需要付出什么努力，你的网站可以做什么，你可以选择或创建的样式等等，都取决于你最初选择的工具。

当我处理我的作品集时，我会记下对其他人网站有用的功能（侧边栏导航、可扩展内容等），并添加一些我认为将使我的网站更有用且更具吸引力的功能。

然后我研究了所有可用的工具，以了解它们各自的功能。 因为我清楚地知道我的作品集需要什么，并且我想通过独特的交互赋予作品集强烈的个性，所以我最终决定自己编写代码来构建网站。

换句话说，自己写代码意味着所有细节都需要我自己考虑，比如保持风格一致性表情包设计，让网页响应式，能够很好地适应手机、平板以及所有主流桌面屏幕分辨率。 速度。

当我开始构建网站时，我花了很多时间担心技术细节，但我应该花时间完善项目。 我可以想象完全重建一个作品集网站是很困难的。 Squarespace 等工具可以为您处理这些事情，因此您可以专注于显示您的内容。

我很难选择，但我真的希望我的网站有自己的特色，所以我还是愿意花时间和精力写代码。 有时间的话我也会访问下面的Webflow，它也提供了一些高度定制化的交互方式。

以下是我的主要收获：创建投资组合时，请考虑什么对您和您的目标受众更重要，然后选择正确的工具来帮助您实现该目标。

03 考虑用户需求

设计师应该以用户为中心。 如果您申请了用户体验/产品设计师的工作，但您的作品集网站很难使用，那就太讽刺了。

但当我浏览别人的作品集网站时，我还是发现很多网站并不好用。 有些人会在自己的主页上放一些漂亮的图片和设计作品的创意名称，但这些信息并不能告诉我们作品本身是什么，或者它解决了什么问题。

有的会把非常详细的设计过程放在案例描述中，这是我比较喜欢的； 但如果页面上没有大纲或导航，我很快就会不知道我在看哪里，然后我就不会继续。 看。 有些有很酷的动画和视觉效果，但它太令人困惑了，我无法快速找到我需要的信息，尤其是当我时间紧迫的时候。

如果我们设身处地为目标用户（忙于工作的招聘人员和设计师）着想，并在设计时考虑到他们的需求，许多类似的问题就可以避免。

作品集网站中特意放置了一些功能，方便目标用户浏览。 其中一些是受到其他设计师优秀设计的启发，一些是我自己想出来的，还有一些是我从评论中得到的反馈。

我不会分享这些具体的评论，因为我觉得这只是创建作品集网站的方法，但它们确实很有帮助，而且我在该网站上得到了很多积极的反馈。

1. 简洁、内容丰富的作品列表

招聘人员和设计师会浏览我们的作品集、我们的项目和经验，以了解我们做过什么类型的设计、我们是什么样的设计师，以及我们是否符合他们的要求。 这个人很匹配。

我从与不同的招聘人员和设计师交谈中学到的第一件事是，他们经常查看我们的项目清单，因为我们的工作展示了我们的能力。

因此，为他们提供更多有关项目的信息非常重要，这可以帮助他们快速决定他们想要更多了解哪个项目。 以下是我在每件作品的描述中的内容：

我提供的信息不仅仅是项目的图片和名称。

再说一次，我并不是说这是唯一的解决方案，但这是我的想法。 许多人会默认点击列表中的第一项，如果没有看到他们想看到的内容，就会离开页面。 当然，在大多数情况下，我们的第一个项目应该是我们最自豪的。

但如果他正在寻找一个与信息可视化相关的项目，而这个项目排在第三位呢？ 如果他们还没有放弃的话，我们是否应该让他们一项一项地看项目，直到找到他们想看的项目为止？ 或者我们应该在项目中添加相关信息？

我认为这些页面的目标是吸引合适的人来查看他们感兴趣的项目，从而最大限度地提高您成为潜在合适人选的机会。 所以我尝试做这些事情，以便他们能够立即看到他们想看到的东西。

二、项目概况

对于我们做过的项目，我们总是想深入挖掘，然后将我们考虑到的所有细节展现出来，从而展示我们的设计功力和思维能力。

然而，对于那些不熟悉项目背景、没有太多时间查看所有项目的人来说，他们只是想快速了解该项目是什么以及是否值得点击浏览。

提供此信息的一种快速方法是提供项目概述，其中包括以下内容：

我发现最后一点非常有帮助 – 我放入投资组合中的每个项目，我都会尝试展示其关键功能和价值主张，并尝试对其进行营销，就好像我真的在吸引客户一样。

这种方法促使我更深入地思考设计的附加价值； 它还可以帮助我的读者快速了解我的设计是什么以及为什么他们需要关注它。

在本节的最后，如果用户想跳过设计过程并直接体验产品，我仍然为用户提供了直接跳转到最终原型页面的选项。 根据他们的时间和兴趣，他们可以快速看到我完成的设计，或者他们可以详细阅读设计过程的文档。

项目概述示例

3. 侧边导航

我第一次在 Geunbae Lee 的作品集中看到侧边导航表单，并认为它很有用。 因为侧边导航对于我的网站来说非常重要，但是在很多网站模板工具中却无法实现，所以这也成为我自己编写代码构建作品集网站的原因之一。

侧边导航的最终版本

侧边栏对我来说很重要的原因有很多。 首先，我的设计过程通常是复杂而灵活的，反映了我在设计过程中学到了什么，遇到了什么问题，下一步应该做什么等等。

我想完整记录我的设计过程和想法，因为我认为这是我的优势之一。 但我知道不同的人访问我的网站会看到不同的东西，并且可能会选择查找他们最需要的信息。 所以拥有侧边栏意味着我可以为所有内容提供一个大纲，他们可以选择重要的内容来阅读。 这给了我的读者一种掌控感。

说到大纲，侧边栏还有助于为读者说明整个案例研究的信息架构。 您现在可能已经忘记您正在阅读“考虑用户需求”的“侧面导航”部分。

虽然知道这在某些情况下并不重要，但让读者了解他们在文章中的位置并让他们对接下来要阅读的内容产生预期肯定会有助于创造更好的阅读体验，尤其是当他们的时间较少时。

4.可扩展的内容

另一个可以帮助其他人快速浏览其作品示例的功能是可扩展内容，我第一次在 Phil Kimura-Thollander 的作品集中看到这一点。

通过与许多设计师和招聘人员的交谈，我了解到他们在设计过程中最希望看到的是：

所以我决定把这些信息直接放在页面的第一层，让大家都能看到。

但谈话中有些人还是对细节很感兴趣产品设计个人作品集，比如我的研究是如何进行的，详细的结果是什么，我如何解读这些结果，为什么我只选择特定的平台进行设计等等。

对于这些信息，我决定将其隐藏在主流程中，只让有兴趣的人去探索。 从某种意义上说卡通形象，这就像为普通用户和需要更多控制和信息的专家用户进行设计。

在信息可视化方面，整个网站/案例研究过程类似于施奈德曼的口头禅：首先显示概述，然后细化和过滤，然后根据需要显示更多细节。 可扩展的内容是更详细的信息。

展开内容

5. 滚动时突出显示关键点

另一个帮助其他人快速浏览工作案例的功能是添加亮点。 我首先将设计故事的核心句子加粗，以便其他人能够理解我的故事或论点的中心思想。

然后我受到黄婉婷作品集的启发，决定在用户​​滚动页面时突出显示关键内容，以便更好地吸引他们的注意力，提供更令人惊叹的阅读体验。

滑动时突出显示重要内容

通过我收集的反馈，我发现用户非常喜欢突出显示的格式，因为它可以让他们更快地找到重要信息。 也有人问我这个功能是如何实现的，我也看到其他人在自己的作品集里使用类似的功能。

04 快速试错&迭代

当我们谈论设计师的优秀品质时，接受建设性批评的能力、允许自己受伤但仍然快速失败以及不断迭代的能力一直是其中之一。

当我创建我的作品集时，我还确保从不同的人那里收集反馈。 在佐治亚理工学院，当来自不同公司的校友或招聘人员来访时，有很多机会进行作品集审查。 我利用一切机会收集有关我的投资组合的反馈。

我通常通过两种方式收集反馈。 有时，我会要求作品集审阅者进行浏览，就像他们在网上数百或数千个其他作品集中寻找感兴趣的特定作品集一样。 我问他们在寻找什么，然后观察他们的习惯，以便我的作品集能够满足他们在这种情况下的要求。

另一种方式是我会在作品集面前向他们解释一个案例，就像我参加面试一样。 我会记下我跳过的地方，一些难以解释的想法及其问题，然后我可以优化流程和内容。

我还使用过其他资源。 例如，Slack 和 Facebook 上有一些小组可以在作品集上互相帮助。 他们给了我各种各样的见解。 然而，我也会有选择性地接受建议，因为每个人都会从自己的角度来批评这个作品集。 最终，由我来确定优先事项并做出最终决定。

我目前的作品集是我的第二个主要版本，但它已经经历了数百次迭代。 我仍然很高兴继续改进我的作品集，并且欢迎您的反馈。

05 个性化您的投资组合

招聘人员希望招聘对工作充满热情、能为团队做出贡献、并且将来会成为好同事的人。

我曾建议申请美国大学的学生如何撰写个人陈述。 我通常对他们说的是，你的个人陈述是面试前唯一可以让招生官听到你的声音并向招生官展示你自己的地方。 我认为投资组合也是如此。

如果你的简历是你经历的客观总结，那么你的作品集就是一个真正的个人空间，通过你所从事的项目展示你是谁，你描述你的过程的方式，以及你设计整个作品集的方式。 您热衷于什么以及您如何看待它。

下面这些投资组合中的内容非常受欢迎。

1.有趣的个性化加载

这确实是我的投资组合中最值得骄傲的部分。 尽管这不是一个重要的部分，但很多面试官都喜欢它，因为他们认为动画展示了我的个性和对细节的关注。

包含图像、动画和视频的案例研究通常需要一些时间才能加载，并且可能会降低浏览体验。 这就是为什么许多人更喜欢使用预加载器作为临时占位符，并且仅在加载所有内容后才显示网页内容。

但预加载过程也可能是重复且无聊的，尤其是当页面加载时间超过十秒时。 我们可以为这些等待时间添加什么乐趣，以便用户不必一遍又一遍地盯着相同的加载占位符？

我最初的灵感来自 Google Chrome。 当网络连接中断时，Chrome 会优雅地提供一个简单的恐龙游戏。 这让等待变得有趣，并消除了人们可能经历的任何挫败感。

恐龙游戏

但我不只是想给用户一个有趣的等待体验； 我希望我的加载动画能够显示我是谁，这样每次用户打开一个新页面时，他都会更多地了解我，即使他还没有看到我的页面工作。

经过大量探索后，我决定呈现一些关于我自己的有趣轶事，这些轶事永远不会写在我的作品中。 我整理了20个关于我的兴趣、过去的经历、写作、思考等的项目，并让它们在加载过程中随机出现。

这些有趣的轶事在 5 秒内完成，每次人们刷新页面时都会更新，这有助于他们更好地将我想象为他们的同事/朋友，但这不是必需的，所以如果人们错过它，我也没有什么损失，因为这意味着页面加载速度比预期快。

关于预加载过程的一个有趣的轶事

很多看过我的作品集的人都会在 gif 中向我提到这个细节，有些人甚至会尝试多次刷新它，只是为了看看我所有有趣的轶事。 我在设计的时候也觉得这个小交互很有趣。 我很高兴用我的设计和编程技能来完成它。 我还建议大家发挥自己的优势，让自己的作品集独一无二、令人惊叹。

2.展示你的优势

您的投资组合中的项目以及展示它们的方式应该反映您的优势，这可以帮助您定义整个投资组合网站的风格和感觉。

如果您查看成功的作品集网站，您会发现它们因不同的原因而表现出色。 有的是由于优质项目的种类繁多，有的是由于详细的设计流程和深入的思考，还有的是由于使用精美的插图简洁地传达了用户需求和设计方案。

这些设计师的优势和个人风格也自觉不自觉地体现在他们的作品中。 正如观众可以从昆汀·塔伦蒂诺或克里斯托弗·诺兰的电影中判断他们的风格一样，您作品集的访问者也应该能够从您的电影中判断他们的风格。 项目和记录项目的方式很大程度上说明了您是哪种类型的设计师。

对我来说，我很早就发现我不太擅长绘画（我只能画盒子/界面！）。 虽然我也学会了使用视觉方法来更好地表达我的想法，但我可能比没有更好。 献给那些已经画了十多年的人。

在过去的两年里，我也只完成了几个项目，这就是为什么我专注于自己的优势，记录高度详细的流程、深思熟虑的结构和对我的项目的深刻反思。

当每个喜欢我的作品集的人都对我的设计过程、我对细节的关注以及我的工作质量感到惊讶时，我就知道我已经成功了。 然而，详细的设计过程也意味着我的案例研究会很长。 这就是为什么我使第 3 部分中提到的一些设计决策更容易跳过和浏览。

3.表现出你的兴趣

用户体验/产品设计师通常来自不同的背景并具有独特的兴趣。 我有计算机科学和心理学背景，所以我对人工智能和VR/AR/VUI等新兴技术的设计特别感兴趣，这样我们就可以利用它们的优势让人们的生活更加便利。

因此，我选择了与这些技术相关的学校项目和副项目，让自己更多地思考这些新兴领域的设计原理。 我把这些内容放进我的作品集中展示我喜欢设计的东西，也写下了我对声音和语音设计以及AI设计的想法。

您的项目应该展示您的能力和兴趣。 确保您选择的项目能够反映它们，然后准备好表达您对投资组合中每个项目的热情。

4、个人品牌

虽然我不是品牌设计师，但我对创造品牌形象很着迷。 这类似于展示作品集的优势和兴趣，但创建个人品牌需要更进一步：您本质上是在尝试为读者建立自己的形象，并将自己与一些形容词/技能联系起来。

由于我没有视觉设计背景，所以我无法创建一个代表我自己的标志（如果有人感兴趣，我很乐意提供帮助！）相反，通过思考我的经验和优势，我集思广益制作别人标志的方法。 记住账号。

最终，我决定对我的名字进行一些改动——托尼，作为一名“技术爱好者、思想家和T型设计师”，全部以T开头，反映了我的技能/兴趣/个性。

这就像一种营销努力。 我在我的作品集、简历、LinkedIn 个人资料和 Medium 个人资料中标记了自己。 当我在采访中自我介绍或现场演讲时，我也会提到这一点。 通过这种方式，我确保我的作品集和所有其他材料传达了我想要表达的信息，共同向我的目标用户呈现一致的品牌形象。

我认为这样做很有趣，而且我仍在探索更多个人品牌是什么。

你终于读完了！ 你感觉如何？ 继续寻找自己的优势和风格，并尝试在你的作品集中展示它们。

作者：托尼·金

原文链接：

译者：伊芙琳; 审稿人：梅西； 翻译团队公众号：口译办公室

本文由@交译典翻译发布于《人人都是产品经理》，未经许可禁止转载

题图来自Unsplash，基于CC0协议

收藏 收藏 {{ postmeta.bookmark }} 喜欢 喜欢 {{ postmeta.postlike }}