How and why I redesign my portfolio every year

Lessons learned over six iterations of annual portfolio redesign.

我每年重新设计作品集的方式和原因

从6次迭代的作品集中汲取重设计的经验。

I just pushed the sixth iteration of my portfolio, which builds on from last year’s Korea theme. You can check it out here.

我刚刚推出了第六次迭代后的作品集，它是在去年的韩国风的基础上创建的。 你可以在这里查看。

https://designbyroka.com

I made my very first portfolio website in 2013. Since then, I’ve pushed myself to redesign my portfolio every summer, looking back on the lessons, documenting new projects, and applying new skills.

我在2013年创建了我的第一个作品集网站。从那时起，我每年夏天都会强迫自己更新作品集，回顾经验教训，记录新项目和应用新技能。

Yes, it’s a lot of work — I spend an entire summer for each portfolio redesign. But the fruit of the labor is definitely sweet. I can definitely say annual portfolio redesign is one of the major reasons why I grew so much as a designer in the past five years, and I’d highly encourage other designers to give it a try as well. Here are the why, how, and the lessons I’ve learned over the course of my six years of annual portfolio redesign.

无可厚非，这是项大工程 - 我花了整整一个夏天来重新设计每个项目。 但劳动的成果确实是甜蜜的。 我可以肯定地说，每年对作品集进行更新是我在过去五年中作为设计师迅速成长的主要原因之一，我也非常鼓励其他设计师尝试一下。 以下是我在六年的年度作品集重新设计过程中学到的目的，方法和经验教训。

The Why

目的

1. To reflect on what I’ve learned in the past year.

1.反思我过去一年学到的东西。

I learn so many new things each year, from new tech and design skills to even how I approach product design process. I then apply these learnings to my annual portfolio redesign. In the last year’s redesign, for example, I used React.js, which was my biggest learning from the year before. Using React makes it super easy to reuse commonly used components like carousels, keeping the code more modular and maintaining the user experience consistent across the site.

我每年都学到很多新东西，从新的技术和设计技能到产品设的计过程。然后，我将这些知识应用到我的作品集的重新设计中。 例如，在去年的更新中，我使用了React.js，这是我一年前学到的最多东西。 使用React可以非常轻松地重用常用组件（如轮播），使代码更加模块化，并保持整个站点的用户体验一致。

Designing Thumbnail Series component in React makes it super easy to reuse the component across the site.

React里的缩略图系列组件的设计让跨站点重用组件变得超级容易。

2. To update what I’ve been working on.

2.更新我一直在做的事情。

Every year, I keep my portfolio updated with new projects from work, freelance, and side projects. This is important especially because I work at a fast-changing startup, Blitz. Blitz has changed its focus from a mobile news app (2016) and an esports publication (2017) to a desktop gaming insights app (2018). That’s why it’s important to keep my portfolio updated, in order to document my journey at Blitz and create a best representation of where I am at in my career.

每年，我都会通过工作上，兼职和业余项目中的新项目更新我的作品集。 这一点非常重要，特别是在快速变化的创业公司Blitz工作。 Blitz已将其重点从移动新闻应用（2016）和电子竞技出版物（2017）转变为桌面游戏洞察应用（2018）。这就是为什么持续更新作品集非常重要--便于记录我在Blitz的经历，并创造一个我职业生涯中最佳代表作。

Blitz changed many times throughout the years, and so did my case studies.

多年来，Blitz多次改变，我的案例分析也是如此。

3. To get creative without constraints.

3.天马行空

Working on my portfolio redesign is one of the rare opportunities where I can be 100% creative with my work. It’s my website— I am the only stakeholder in this project. As such, I can focus on creating a design that’s unique to myself and try something unconventional without worrying about the opinions of the stakeholders. Sometimes as a product designer, you resort to conventional, safe methodologies as you design interfaces that meet the business and product goals. That’s why you should still dedicate some time to flex your creative muscle, and working on your portfolio is a perfect workout.

通过作品集的重新设计是我在工作中100％发挥创造性的难得机会之一。 这是我的网站 - 我是这个项目的唯一利益相关者。 因此，我可以专注于创建一个独特的设计，并尝试非传统的东西，而不必担心利益相关者的意见。 有时作为产品设计师，在设计满足业务和产品目标的交接点时，你需要墨守成规。 这就是为什么你仍应该花一些时间来发挥你的创造力，并且你的作品集是一个完美的锻炼机会。

The new about page featuring bold typography, Korean calligraphy, and a few insta pics.

新的介绍页面中的大胆的排版，韩国书法和一些 insta 图片。

The How

方式

Evaluation

评估

I kicked off this year’s design by first evaluating what worked and didn’t work in the previous version:

在今年的设计中，我首先评估了在上一个版本中哪些是有效的，哪些是无效的。

The Good

优点

Theme: It was something unique to myself, embracing and conveying my Korean identity by getting inspirations from Korean art.

Depth of case study: Case studies were super thorough and in-depth, documenting the process and rationale behind the design decisions.

React.js: Using react.js made it super easy for me to create reusable, scalable components like carousels and thumbnail series for case studies.

主题：这是我自己独特的东西，通过息息相关的韩国艺术灵感来传达我韩国人的身份。

案例分析深度：案例分析非常全面和深入，记录了设计决策背后的过程和理由。

React.js：使用react.js让我可以非常轻松地创建可重用的扩展组件，如轮播和用于案例分析的缩略图系列。

The Bad

缺点

Navigation didn’t work as intended: I had originally wanted people to click on one of the featured case studies — Blitz and Box — but it turned out the number one most visited page was about page.

导航没有按预期工作：我原本希望人们点击其中一个特色案例研究 - 闪电战和Box - 但事实证明，访问次数最多的页面是关于页面。

I didn’t know people would be that curious about my personal life.

我不知道人们会对我的个人生活充满好奇。

Case studies don’t speak for itself: There was way too much text for case studies. Most people spent less than 2 minutes on each case study, just glancing at the thumbnails.

案例分析并不能说明问题：案例分析的文字太多了。大多数人在每个案例上花了不到2分钟，只是看了一下缩略图。

I spent a lot of time on this, but unfortunately it’s just a wall of text for most visitors.

我在这上面花了很多时间，但不幸的是，对于大多数访问者来说，这只是一堵文字墙。

Visual polish: It turned out the web font for Neue Haas Unica didn’t render properly on the live website, ending up with much larger kerning than intended. The spacing could’ve been more generous as well, since I am designing a portfolio website catered towards design-savvy audience, not a functional app.

视觉上的润色：事实证明Neue Haas Unica的网页字体在网站上没有正确呈现，最终得到了比预期更大的字距。 留白更大可以更好一些，因为我设计的是一个作品集网站，迎合的是精通设计的受众，而不是一个实用的应用。

Approach

方法

From the evaluations, I kept the theme Korea, but redesigned the website from the ground up. The goal for this year was to answer the question “How can I build on from last year’s Korea theme to be as perfect as possible?”

从评估中，我保留了主题韩国，但从头开始重新设计了网站。 今年的目标是回答这个问题：“我如何能够从去年的韩国风格中，尽可能完美？”

Improved Navigation

改进导航

I went for a menu drawer (hamburger) instead of a sticky tab navigation to minimize distraction from the content and deemphasize the about page. I also placed a much stronger emphasis on the featured projects — Blitz, Box, and Witeboard — to get more people to land on those case studies.

我选择了菜单抽屉（汉堡包），而不是悬浮导航，以尽量减少对内容的干扰，并突出介绍页面。 我还更加突出了特色项目 - 闪电战，Box和Witeboard - 让更多人参与这些案例分析。

The new navigation drawer highlights featured projects more than anything else.

新的导航抽屉突出显示了特色项目。

Let the work speak for itself

让作品自己说话

Each case study now has larger thumbnails with captions instead of long blurbs of paragraphs. If the work itself is good, there’s no need to describe the role of each interface element in detail.

每个案例分析现在都有更大的缩略图，并带着标题说明而不是长段落文字。 如果作品本身很好，则无需详细描述每个界面元素的作用。

Case studies now have much larger thumbs and captions instead of long blurbs of paragraphs.

案例分析现在有更大的图标和标题，而不是长段落的段落。

It’s ok to be a little bold.

大胆一点没关系。

There’s now more generous spacing, wider gutter, and more meticulous attention to typography all around. Remember that I’m designing a portfolio site mostly for design-savvy people, not a functional app for people in 50’s. It’s ok to get a little crazy.

现在有更大的空间，更宽的网格，和更细致的排版。请记住，我设计的是一个作品集网站，主要是为懂设计的人设计的，而不是为50年代的人设计的实用应用。疯狂一点也没关系。

A little more “ooh’s and ahh’s” for the transition. Functional? Eh. It’s sick tho.

多一些“ooh‘s”和“ahh's”的效果在转场中，功能呢？呃，他生病了。

You can check out the 6th redesign of my portfolio site here.

你可以在这里查看我第6次重新设计的作品集。

https://designbyroka.com

Tips and Lessons

提示和教训

1. Make it unique to yourself

1.让自己的作品独一无二

Take a moment to think about how you can make your portfolio website unique to yourself. In particular, the header of your home page above the fold is the area where you can be 100% you and land a striking first impression. Don’t be basic and just write “I’m John Smith. Product Designer at Facebook” in Helvetica or Noe Display. Think about what makes you unique — you could use your cultural heritage, or maybe your background, like a physicist that became a designer — as an inspiration for your design direction.

花一点时间思考一下如何让自己的作品集网站独一无二。 特别是，首页顶部是你可以百分之百展现自我并给人留下好印象的第一窗口。 不要放太平凡的信息，只写“我是约翰史密斯。Facebook的产品设计师，在Helvetica或Noe Display工作”。 想想是什么让你与众不同 - 你可以用你的文化传统，或者你的文化背景，就像一个成为设计师的物理学家 - 作为你设计方向的灵感。

You can just tell it’s about Canada. https://designcanada.com/

2. It needs to serve a purpose.

2.服务于一个目标

You should still treat your portfolio just like any other product — you should think about who’s your audience and define the goals of your website. Depending on the audience and the goal, you should think about:

你仍应像对待任何其他产品一样对待你的作品集 - 你应该考虑谁是你的受众并定义网站的目标。 根据受众和目标，你应该考虑：

What do you want to get out of your website? Maybe you want to land a job. Maybe you just want to have some fun. Depending on your goal, you should balance out how much you want to focus on function vs. form.

What’s one page you really want your users to see? Your navigation should optimize for landing the users on that page.

What do you want your users to do after they have explored your site? You should probably have a strong call to action, especially in header and footer.

你想从你的网站上得到什么？ 也许你想找一份工作。或许你只是想要一些乐趣。 根据你的目标，你应该平衡好希望被关注的功能与形式的关系。

你真正希望用户看到的是哪一页？ 你的导航应该进行优化，以便在该页面上的用户使用。

你希望用户在浏览你的网站后做些什么？ 你可能应该采取强有力的行动按钮，尤其是在顶部和页尾中。

Optimized for landing new opportunities: http://b-berger.com/

Optimized for funsies: https://letasobierajski.com/

3. But it’s ok to get crazy.

3.疯狂一点也是没问题的。

At the same time, remember that you are designing a portfolio website, not an app or a promotional site for your company. Your audience will most likely be a bunch of techies who are looking at your work on a giant 27" monitor in 1920x1080 screen res (this is true story from metrics from my portfolio site.) You have room to be generous with spacing, go bold with typography, and try something eccentric. Don’t be afraid to sacrifice just a bit of usability for a touch of delight and personality. This is one of the few cases where you can and should be really yourself when it comes to design.

同时，记住你正在设计一个作品集网站，而不是贵公司的应用程序或促销网站。你的观众很可能是一群技术人员，他们正在用1920x1080分辨率的巨型27英寸显示器上观看你的作品（这是来自我的网站的代表性真实故事。）你有巨大的空间去大胆排版，并尝试古怪的东西。不要害怕牺牲一点可用性来获得愉悦和个性。这是少数情况下你可以而且应该在设计方面真正做到的事情之一。

Spinning circle CTA, two links that does the same thing, and a ton of spacing. But it’s pretty. http://matthewvernon.co/

4. Let your work speak for itself.

让你的作品自己说话

“Show, Don’t tell.” — this is the rule of thumb you should be following when it comes to case studies. You should still describe your design process and the rationale behind your design decisions in detail. But you shouldn’t go so in depth to the point where you are explaining every pixel and end up writing an essay. Keep your writing to a minimum and try to prove your point with your design comps. Make sure your thumbs are large enough (either container width or full screen) and keep it distraction-free. If your work is good, it wouldn’t require an in-depth explanation. It should speak for itself.

“展示而不是空谈。” - 在案例分析中，这是你应该遵循的经验法则。 你仍应详细描述设计过程以及设计决策背后的基本原理。 但是你不应该深入到解释每个像素并最终写一篇文章的地步。 将你的文字保持在最少限度，并尝试用设计作品证明你的观点。确保你的内容足够大（宽的DIV容器或全屏）并确保它免受干扰。 如果你的作品很好，就不需要深入解释。 它应该说明一切。

Ueno has hands down some of the best case studies. https://ueno.co/

5. Be selective about your work.

5.选择你的作品

Make sure you curate your best works, which should be no more than three. Having too many case studies will distract your visitors from exploring your best works. Spend time thinking about how you can optimize your navigation to land your visitors to your best works, and make sure case studies for those best works are thorough enough. It’s also important to show a wide breadth of work from multiple categories (consumer, enterprise, fintech, gaming, etc) and multiple platforms (mobile, desktop, web, marketing website, etc). It might be good to have 1–3 featured projects, which are your best works to date, and 3–4 other projects just to show you have worked on projects from wide range of audiences and platforms.

确保你最好的作品不超过三个。过多的案例分析会分散掉访问者对你最好作品的兴趣。花点时间考虑如何优化导航，让访问者看到你最好的作品，并确保这些最佳作品的案例分析足够全面。从多个类别(消费者、企业、金融科技、游戏等)和多个平台(移动、桌面、网页、营销网站等)展示广泛的工作内容也很重要。最好有1-3个特色项目，是你迄今为止最好的作品，还有3-4个其他的项目，只是为了展示你在不同的类别和平台上做过项目。

3drops does a great job showcasing only the important projects and hides miscellaneous projects. https://3dro.ps/

Last but not least, have fun.

最后但同样重要的是，玩得开心。

When I was a kid, I used to spend days and nights just working on my personal website in HTML because it was fun creating an online presence of myself. Sure, I wouldn’t count them as my “professional portfolio,” but that same passion from childhood is what drives me to work on my portfolio today. It never feels like work. It’s just another hobby of mine like games, and that mindset allows me to get more creative when designing my site.

当我还是个孩子的时候，我曾经花了几天时间在个人网站上捣鼓，因为创建我自己的在线形象很有趣。当然，我不认为它们是我的“专业作品”，但是童年时代的同样激情促使我今天在我的作品集上投入精力。它永远不会像工作。这只是我的另一个爱好，就像打游戏，这种思维方式让我在设计网站时能够获得更多创意。

That’s why I want to end this post with the last piece of tip — have fun. I’ve met so many designers who are stressed over building their portfolios, and that’s a perfect recipe for a designer’s block. This is your chance to be 100% you — unlimited room for creativity and expression. You can take as much time as you want, use whatever tech you want, and design however you want. Seriously, you don’t get opportunities like this often (if ever). Enjoy it.

这就是为什么我想用最后一段提示结束这篇文章 - 玩得开心。我见过很多设计师，他们在构建自己的作品集时都很紧张，而这些对于设计师来说是一个完美的诀窍。这是你100％表达自己的机会 - 在创造和表达上你有无限的空间。你可以花费你想要花费的时间，使用你想要的任何技术，并根据你的需求进行设计。说真的，你经常没有这样的机会（如果有的话）。好好享受。

As I finish this year’s redesign, I’m already excited to think about what directions I want to take for next year’s redesign. I can’t wait to see how much I’d grow as a designer in the next years to come, and share my new portfolio with everyone each year.

在我完成今年的重新设计之后，我很高兴能够考虑明年重新设计的方向。我迫不及待地想看看未来几年我作为一名设计师会有多大成长，并且我会每年与大家分享我的新作品。

小彩蛋：感谢你阅读到文章的最后，获取更多国外优秀设计第一手资讯，请关注微信公众号：包你嗨设计英语学习社区