計師如何更新自己的作品集--包你嗨設計英語
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.
我剛剛推出了第六次迭代後的作品集，它是在去年的韓國風的基礎上建立的。 你可以在這裡檢視。
ofollow,noindex" target="_blank">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次重新設計的作品集。
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.
在我完成今年的重新設計之後，我很高興能夠考慮明年重新設計的方向。我迫不及待地想看看未來幾年我作為一名設計師會有多大成長，並且我會每年與大家分享我的新作品。
小彩蛋：感謝你閱讀到文章的最後，獲取更多國外優秀設計第一手資訊，請關注微信公眾號：包你嗨設計英語學習社群
