原文作者： geunbae-lee
原文链接：https://uxplanet.org/how-to-structure-your-first-ux-design-portfolio-7b51576a04df
如何创建你的第一份UX设计作品集
正在寻找你的第一份交互设计的工作？这篇文章可能会对你有所帮助。
引言
正在准备开始你的用户体验事业吗（ＵＸＤ）？你来对地方了，在这篇文章中你能获得一些创建你交互设计个人作品网页的一些技巧。尽管我本人在这方面也还是个新人。但由于目前为止，已经有很多人邀请我看一看他们的个人网站了。我还是决定分享一些这方面我所了解的。仅仅是想表达一些个人的想法，请不要以苛刻的态度看待这篇文章，希望你花费时间能有所收获。
#1.创建一个网站，而不是一个PDF文档
首先我建议你创建一个个人的网站而不是PDF文档。尽管现在很多公司在招聘时仍然让你发送PDF格式的作品集，但对你和招聘者来说简单的输入一个ＵＲＬ（网页地址）还是要方便的多。而且使用在线（网站）的方式更加深入有互动性。
比如，在线作品网站看见链接到你其他UX相关的社交网站。你还可以链接或插入你产品的介绍视频，放上演示原型，这样查看的人可以在任何时间任何地点尝试你的产品。甚至你还可以加上吸引人的视觉效果以及其他设计相关的能表达你创意的东西，如视频，动效。（如果另外你能一步一步的展示交互的过程，用Behance和Dribble 也可以）
创建网站的另外一个好处是可以添加埋点。添加埋点以后你可以看到谁访问了你的网站，他们停留了多久，他们查看了哪个项目。通过创建网站并埋点获得的这些丰富和有用的信息，你可以更好改进你的网页界面，最终更好地呈现你的项目。
“那么，怎么样开始创建我的个人作品网站呢？”
下面会介绍很多方法。由于本文的重点不是介绍创建网站的过程，我将只呈现出一些有用的信息资源。
现有的一些可供下载的响应式框架：
HTML 5 Bootstrap Templates by Colorlib
•HTML5/CSS3 Templatesby Colorlib
•HTML5/CSS3 Templatesfrom Bradley Nice’s blog post
•Bootstrap Templatesby Bashooka
•Responsive Templatesby Responsive Miracle
你还可以使用其他的框架来创建响应式网站。最近，好像很多人用AngularJS或ReactJS比较快的创建网站，但是说实话，连我自己还在学这些，所以对它们我就不多做说明。如果你有兴趣可以自己去了解下。
其他创建网页的方式（非代码）：
•Wix
分享一个Adam Dannaway关于设计和开发一个作品集网页整个过程的文章--“设计和开发我的个人作品网站的过程”
#2讲一个你是谁的故事
无论你是否在线申请还是通过内部员工推荐，你都会发现还有成百上千和你一样想要得到这份工作的人。所以，你需要思考这个问题，
“如何包装自己才能在众人中脱颖而出？”
就像你写大学申请或求职信，在你把你的所有项目内容加到你的作品网站之前，你需要知道下面几点。
对于用户体验人员来说，作品集是找工作过程中最重要的一部分。如果没有作品集，我很怀疑你是否能找到一份UX设计师的工作。这就是作品集的重要性！所以，你需要问自己一些基本的问题比如，你希望那些不了解你的人认为你是什么样子的。
.我有什么特别之处？
.我的背景是什么？我是如何开始从事UX工作的？
.作为UX设计师，我有哪些相关的有用的技能？
.我和这份工作相关的兴趣和热情是什么？我之前的经验和项目和这份工作有何关系？
.我所欠缺的技能和知识有哪些？-了解自己很关键
在你的网站在“关于我”的部分，你可以更多的介绍你是谁。在这里你也可以很好的介绍你的专业水平，你的热情和兴趣，你希望学习和提高的。最后但也是最重要，可以列出一些个人特征，比如兴趣好爱，音乐品味或者其他可以显示你自己的东西。当然，这只是选填项，不要让它成为关键的部分。
除了“关于我“，创造一个漂亮的网站介绍页也很重要。比如，你可以添加一个视频或图片，或简短有力的描述你是谁，你追求的是什么。在点”关于我“之前，简要又直接的描述你自己，也是一个很不错的方式。只要你的整个网站的设计感一致且平衡（我将在后面讨论视觉设计），你的网站就可能潜在的像你网站的访问者传达你是什么样的设计师。
我个人比较喜欢Ivo Mynttinen的这个作品网站。这个网页仍然存在很多关于个人的信息（虽然主页的名字如果更突出会更好）。简化使用的字体，使用简单的字体，使得这种现代风格的设计（整页面大图）易读性更高，也可以表现出网页设计者对现在网页设计的流行趋势的了解。我并不是说你的个人作品网站也要与这个完全一致，你可以做更多创新。这里我只是想要举个例子说明保持主页风格整体感的重要性。
老实说，可能有一部分人看了之后会不同意“关于我”这个部分，或者认为在个人作品网站中，这个部分没什么用。确实，很多时候人们只是直接去看你的项目，然后从项目经历中做判断。然而，我个人认为，个人作品网页应当被视为是对你个人的反映（作品集网站=自我认同）而不是单纯罗列你项目经历的地方。所以我想说，尝试特别并有创意，让自己脱颖而出吧！
#3.吸引人的视觉
人们都是视觉动物，没有人不喜欢精致的设计。在这个部分中，我想聊聊经常被你所忽视的。如果你注意到这些细节的东西，你会发现，你的网站质量会有很大的提升。正确的处理这些细节可以吸引更多的网站访问者，证明你是一个设计师，你关注UX。
“那么这些小但是重要的细节是什么呢？”
是谁说个人作品网站不需要做的吸引人的？你是否是认为只有你的项目内容才重要？我可不这么想！
是的，视觉部件，如颜色，字体，布局甚至是图片，所有这些一起营造了你网页的感觉。如果你在该建立网页时没有关注这些，我建议你回头仔细的挑选色板，文字，考虑怎样呈现你的作品。
.“你的设计整体一致性高吗？”
.“网站颜色看起来如何？是否有颜色不必要，过多吸引了访问者的注意力？”
.“你是否使用了过多种的字体？”
.“字体大小是否合适易读？”
.“你是否有过多的操作按钮？”
交互设计师也是设计师，所以你需要关注这些小细节！这对于把东西做好没有任何害处。
建议：
尝试以网站访问者的视角思考问题，当他们第一次来到你的网站会如何看待你的网站。你无法抓住所有细节这很正常，你需要用一个新的视角来看。除了完全依赖你自己发现问题，其实你还可以邀请别人看你的网站并且认真地听取他们的意见。
#4.有清晰的导航和链接
导航是你的网站中最重要的部分。当你在海上漂时没有指南针在手，你该往哪里漂？（哈哈）不管怎么样，看网站的人需要知道点击哪里到哪里（如，关于我，作品，联系我等等）。不要将导航隐藏或者让导航难以发现。保证访问者能顺畅的浏览你的网页内容是至关重要的。让导航清晰使得访问者能顺畅的在不同页间切换，也可能能增加他们完整阅读你所呈现内容的机会。
“典型的导航栏上有什么？”
绝大多数情况下（通常），对于一个设计师需要有以下部分：
作品集
关于我
简历（或者是“关于我”部分的一个链接）
联系我
可选择-其他的展示项如Dribble页，如专业工作以外的摄影作品
其他的一些特定操作，应当容易看见和发现。比如下载你简历的链接应当明显又清晰地呈现，因为这是最重要的一个部分。此外，你专业相关内容的链接也应当显眼的呈现，如LinkedIn,Dribble,CodePen或Github。
#5.先呈现最好的项目
有的人喜欢先列出他们最近的项目，有的人喜欢先列出他们最好的项目。我认为，如果你正在找第一份UX的工作，还是首先先列出“最好的”项目（当你更有经验，有更多项目，你可以再重新调整布局）。
“为什么要先列出我最好的项目？”
通常，先列出的项目比其他项目更更多的访问量，在面试的时候会被更多的问到。而且先列出的项目可能最终就是反映你现在UX水平的项目。
（*另外一种方法是可以创建一个独立的部分叫“特定项目”。有时候，这样更好；）
#6.在每个项目板块中呈现什么内容
在UX作品中放什么内容？-说了这么久，这可能是所有当中最重要的了。首先我想说的是在项目中呈现一堆内容，而不解释你的UX设计过程。记住，你是在找交互设计而不是视觉设计的工作。作为一名UX设计师，你应当认真的呈现和解释你的整个设计过程。
看一看那些成功获得工作的优秀的UX设计师，我们可以看到他们作品集内容的一些共同点。我将列出来并做一番解释。
总述
总述部分首先应当呈现总述部分，解释项目的一些基本情况。应当让看的人能够一下抓住产品是什么样的，怎么样起作用的。因为不是每个人都能有时间详细的看你写的项目的所有内容。如果他们对这个项目有兴趣，他们可以继续向下滚动去阅读。
.项目的目的-你为何做这个项目
.目标-你完成和交付了什么
.方法-你如何完成的，采用的步骤
.项目历时-是否是近期项目，历时多久
.项目成员-姓名（或者是链接到他们的LinkdIn主页）
.你的角色-在面试说项目的时候很重要（你对团队的贡献）
.链接-下载APP的，查看宣传海报的，查看原型的，数据源等等
最后的产品展示-图片或视频（概要）
UX过程
这可能是“必须”中的最重要的部分。如果你的项目遵从了UX设计的过程，我建议你完整的解释这个过程，但是得用一个精简的形式。通过看以下的内容，访问者应当可以能够了解你的设计过程：
.研究-资料整理，竞品分析，访谈，背景调查，问卷调查等
.构思-脑暴，思维的发散和聚合，用户认知地图，人物画像等
.线框图-思路，草图，脑暴，可行的和不可行的，测试结果，迭代
.设计-具体的设计，测试/反馈，迭代，最终的设计
.产品原型-用户测试，迭代，开发（如果你有做）
.在这部分当中，你和你团队所遇到的挑战，线框图，用户测试的部分，迭代设计都是非常重要的内容。
.额外的部分（如果你希望）
.可运作的原型Demo-允许用户去试用
.这个项目的文章，所获奖项，会议，奖金等-展示你在这个项目的成就和贡献
.结论-你学到什么以及下一步你会做什么
额外的小贴士：
.用足够大的分辨率高的图片；
.描述从一个状态到另一个的过渡；
.将项目中的阻碍和受到的限制包括进去（或者记在某处）-在面试的时候会很有用。顺利的部分，不顺利的部分，作为个人/团队你是如何克服的；
.避免太多文字-你会有机会去解释的；
.一般人们有两个版本：1简单的，关注图片的版本；2专项研究-这也是展现你关注的很好的方式；
.尝试找灵感-寻找你觉得新奇的专业的UX个人作品网站并通过比较自己的进行学习。
来看一看我的关于如何准备UX面试的文章吧！
#7.创建其他和设计相关的作品集
作为设计师，有时你想你的作品达到像素级完美，UI设计吸引人，有交互，有动效来展示。有时候仅仅在简历中写下这样不足以证明。有些时候，你在项目中承担的内容不足以表现你的特定技能 。就像我之前几次提到的Behance,Dribble,这些都是展示你的创意设计的很好的地方，与你的UX作品网站也相独立。
我的个人Dribble账号 https://dribbble.com/geunbae-lee
就我个人，除了有一个个人作品网站，我在Dribble上也放出了很多UI设计，动图GIF，原型和其他的。个人认为，这些是额外的展示你热情和水平的地方。在我面试的时候，很多人提到他们在Dribble上看到过我的设计。他们大多数告诉我他们很相信我能使用那些工具。此外，他们很欣赏我平时提升技能做的努力，比如Daily UI challenge(每日UI挑战）。
#8.避免不必要的社交媒体链接
最后，我建议去掉你个人网页中的那些社交媒体链接。但是如果你想展示你的个人生活（而不是专业相关的工作），可以放这些链接，但需要注意不要有奇怪的照片或内容可能影响你的形象。这是我个人的建议。
更多我写的文章：
去这里找我：
陆陆续续好几次才翻完的文章，终于翻完了。第一次翻译，有待后续再改善提高翻译能力
