reddit_我在3天內瘋狂地審查了Reddit上的50個投資組合，從中學到了什么。

I’ve always enjoyed critiquing applicants’ portfolios at the design studio where I work. And I also often ask for feedback on my own designs on Reddit’s webdev subreddit.

我一直都很喜歡在我工作的設計工作室里評估申請人的作品集。我也經常在Reddit的webdev subreddit上征求有關我自己設計的反饋。

So one day, I thought it’d be fun to unofficially review the portfolios of anyone who requested a critique. I had no idea what I was getting myself into.

因此，有一天，我認為非正式地審查要求批評的任何人的作品集會很有趣。我不知道自己在干什么。

I kicked things off by extending my services for free to the 120,000 people who read the subreddit.

我通過將服務免費擴展到12萬閱讀subreddit的人而開始。

Things started out quiet. I would play a round of Rocket League, and then there would be one or two portfolios to review. Then I went to sleep.

事情開始安靜了。我將參加一輪火箭聯賽，然后將要審查一兩個投資組合。然后我去睡覺。

When I woke up, I had twenty requests. And these kept coming for three days straight.

醒來時，我有二十個要求。這些連續三天來了。

In the end, I was able to recognize some common patterns and high/low points across the board. Let’s highlight these.

最后，我能夠識別出一些普遍的模式以及全面的高/低點。讓我們突出這些。

Note that this post is specifically talking about front end developers who want to join a design studio. If you have a different goal or audience for your work, this article may not be applicable.

請注意，本文是專門討論想要加入設計工作室的前端開發人員。如果您的工作目標或受眾不同，則本文可能不適用。

我看到的最糟糕的事情是什么？ (What were the worst things I saw?)

Truth be told, the r/webdev community did a lot better than my studio’s overall applicant pool. I think that speaks to how dedicated the community members are to their craft.

說實話， r / webdev社區的表現要比我工作室的整體申請人池要好得多。我認為這可以說明社區成員對自己的技能的投入。

This doesn’t mean everyone’s portfolio was perfect, though. There were some common mistakes that were absolute no-no’s.

不過，這并不意味著每個人的投資組合都是完美的。有一些常見的錯誤是絕對不可以的。

永遠記住鍵盤和對比度的可訪問性。 (Always remember keyboard and contrast accessibility.)

Accessibility was the biggest mistake made throughout the review. One of the first things I physically do with a portfolio is to try to navigate it without using my mouse. If that’s not possible, I know that the applicant doesn’t have accessibility on their mind.

可訪問性是整個審查中犯下的最大錯誤。我對投資組合進行的第一件事之一就是嘗試在不使用鼠標的情況下進行瀏覽。如果那是不可能的，我知道申請人沒有可訪問性。

Color contrast for text is also a big factor. I used to love putting white text on yellow backgrounds. I thought I was being hip!

文本的顏色對比度也是一個很大的因素。我曾經喜歡在黃色背景上放置白色文字。我以為我在嬉戲！

But I quickly learned in the industry that users with low vision struggle to read text with poor color choices. If your eyes are not trained to watch out for low contrast yet, refer to the Center for Persons with Disabilities’ Color Contrast Checker.

但是我很快在業內了解到，弱視用戶很難閱讀顏色選擇較差的文本。如果尚未訓練您的眼睛注意低對比度，請參閱殘疾人中心的顏色對比檢查器。

Tip# 1: Some members of your target audience will have disabilities. Before writing any styling, make sure your HTML is accessible.

提示1：您的目標受眾中的某些成員會出現殘疾。在編寫任何樣式之前，請確保您HTML是可訪問的。

停止嘗試評估自己的技能。 (Stop trying to rate your own skills.)

One trend that has plagued portfolio sites for years has been skill progress bars. You say you are 85% proficient at Angular? What does that mean? How does that compare to your 80% skill at Node? Most reviewers are only going to understand three skill levels:

困擾投資組合網站多年的一種趨勢是技能進度條。您說您精通Angular 85％？那是什么意思？這與您在Node上的80％技能相比如何？大多數評論者只會了解三個技能級別：

You don’t know the skill at all
你一點都不懂
You’re still learning the skill
您還在學習技能
You feel confident in the skill
您對技能充滿信心

Don’t worry about the first one. Just quickly tell me what you’re learning and what you feel confident in. All of this will be proven in your projects, anyway.

不用擔心第一個。請快速告訴我您正在學習什么以及對自己有什么信心。無論如何，所有這些都將在您的項目中得到證明。

移動或回家。 (Go mobile or go home.)

Want to know what many reviewers’ favorite thing to do with your portfolio is? We love opening your website and then immediately adjusting the browser window width back and forth. This tells us whether you give consideration to the plethora of devices your site could be browsed on.

想知道許多評論家最喜歡與您的投資組合做些什么嗎？我們喜歡打開您的網站，然后立即來回調整瀏覽器窗口寬度。這告訴我們是否考慮了可以瀏覽站點的過多設備。

Want to go beyond that minimum threshold? Then have your CSS written mobile-first. Writing mobile-first styling tells us that you like writing the smallest amount of code needed. When you stop at merely having media queries with a max-width property, it tells us that mobile devices were an afterthought in your design.

是否想超過最低門檻？然后將您CSS編寫為mobile-first 。編寫移動優先樣式告訴我們，您喜歡編寫最少數量的代碼。當您停止僅使用具有max-width屬性的媒體查詢時，它告訴我們移動設備是設計中的事后考慮。

人們需要證明什么？ (What did people need to prove?)

Actual projects are the real meat of a portfolio website. They prove to me that you have the relevant work experience.

實際項目是投資組合網站的真實內容。他們向我證明您具有相關的工作經驗。

A resume or list of previous jobs is a nice timeline. But as a maker, your creation is the ultimate validation.

簡歷或以前的工作清單是一個很好的時間表。但是作為制造商，您的創作才是最終的驗證。

Here are parts of peoples’ project sections that made my life easier as a reviewer.

這是人們項目部分的一部分，這些部分使我作為審閱者的生活更加輕松。

給我看代碼和現場。 (Show me the code and the live site.)

You have a project description, process write-up, and talk about the technology used. That’s great, but where’s the code?

您將擁有一個項目描述，過程編寫并談論所使用的技術。很好，但是代碼在哪里？

It’s common for industry hires to get caught up in private work projects. But without any opportunity to inspect your code, you’re making the reviewer’s job tougher. We’ll struggle to know whether it’s worth our time to move you on to the next step in a recruiting process.

行業雇用人員陷入私人工作項目是很常見的。但是沒有任何機會檢查您的代碼，您正在使審核者的工作更加艱巨。我們將很難知道是否值得我們花時間將您推進到招聘流程的下一步。

If the code is proprietary, where’s the live site? If I can see your code, why would you not have a live version running?

如果代碼是專有的，那么實時站點在哪里？如果我能看到您的代碼，為什么不運行實時版本？

Tip #2: Work on side and personal projects related to the same tech you use at work. Not only does it help you train for your current role, it also allows a portfolio reviewer to know where your skills are.

提示2：從事與您在工作中使用的相同技術有關的附帶項目和個人項目。它不僅可以幫助您培訓當前的職位，還可以使投資組合審閱者知道您的技能在哪里。

告訴我您實際貢獻了什么。 (Tell me what you’ve actually contributed to.)

Group projects are great to show how well you collaborate. Most projects will require teamwork skills.

小組項目很好地展示了您的協作水平。大多數項目將需要團隊合作技能。

With portfolios though, you need to be clear about what work you yourself have contributed. Github repos can provide a clear history for me to review your work and understand this group dynamic.

但是，對于投資組合，您需要清楚自己所做的工作。 Github倉庫可以為我提供清晰的歷史記錄，以供您回顧您的工作并了解這個小組的動態。

Honesty in your project write-ups is always appreciated. Don’t exaggerate your role within a project, because the people reviewing your portfolio will dive into a project’s Git history to double check ourselves.

始終對您在項目撰寫中的誠實表示贊賞。不要夸大您在項目中的角色，因為審查您的投資組合的人將深入研究項目的Git歷史，以仔細檢查自己。

證明您不需要Bootstrap或jQuery。 (Prove you don’t need Bootstrap or jQuery.)

It’s understandable if you started learning CSS with Bootstrap or JavaScript with jQuery. The problem comes when all of your projects contain Bootstrap and jQuery.

如果您開始使用Bootstrap學習CSS或使用jQuery學習JavaScript，這是可以理解的。當所有項目都包含Bootstrap和jQuery時，就會出現問題。

Even though Bootstrap is convenient, I need to know that you have a clear understanding of CSS. I also need to know whether you have a solid foundation in plain JavaScript. This ensures that I’ll be able to onboard you onto a project with any combination of front-end tools already being used.

盡管Bootstrap很方便，但我需要知道您對CSS有清楚的了解。我還需要知道您是否在純JavaScript方面有扎實的基礎。這樣可以確保我能夠使用已經使用的前端工具的任意組合將您加入項目。

In fact, we don’t allow Bootstrap or jQuery at all during our interviewing process. So you’ll be more prepared for the future interviews and challenges if you have the appropriate CSS and JavaScript skills.

實際上，在面試過程中我們根本不允許Bootstrap或jQuery。因此，如果您具有適當CSS和JavaScript技能，那么您將為以后的面試和挑戰做更多的準備。

最突出的是什么？ (What stood out the most?)

So we’ve gone over the things your portfolio needs and the ways portfolios can go wrong. What about the stuff that gets a reviewer excited about an applicant?

因此，我們已經解決了您的投資組合所需的事項以及投資組合可能出錯的方式。那讓審核者對申請人感到興奮的東西呢？

The following advice might seem a less concrete than my previous suggestions, but take it to heart.

以下建議似乎比我以前的建議要具體，但請切記。

脫離規范。 (Step away from the norm.)

Almost everyone had the standard Intro > Skills > Projects > Contact flow to their site. Almost everyone had the exact same hamburger menu for navigation.

幾乎每個人的網站都有標準的簡介>技能>項目>聯系流程。幾乎每個人都有同樣的漢堡菜單進行導航。

Do you want to get your reviewers’ attention? Get experimental and make small changes that do not harm the design.

您想引起評論者的注意嗎？進行實驗，并做一些不損害設計的更改。

One of the slightest differentiators had placed their navigation on the right side instead of the left. I knew it was time to focus more because the navigation was not on the cookie-cutter left or top of the layout. Simple, but effective.

絲毫區分符之一將其導航放在右側而不是左側。我知道是時候該集中精力了，因為導航不在布局的左側或頂部。簡單但有效。

為您的理想工作說話。 (Speak towards your dream job.)

Have you seen that one position that you absolutely want? Build your portfolio around that job’s requirements and responsibilities.

您看到您絕對想要的一個職位嗎？圍繞該工作的要求和職責來建立您的投資組合。

It’s tough for me to understand why you want a job at our studio when your portfolio is full of WordPress themes. It’s also hard to think of you as a good fit for the role if your main focus seems to be a whole different industry.

當您的作品集充滿WordPress主題時，我很難理解為什么要在我們的工作室工作。如果您的主要工作似乎是一個完全不同的行業，那么也很難認為您是這個職位的合適人選。

We love generalists, but it’s a great plus to show that your speciality is also what the role prescribes.

我們喜歡通才，但是這很能證明您的專業也是職位要求。

Tip #3: A lot of portfolios are used both for job applications and freelance clients. Don’t do this. The best practice is for a professional to design separate portfolios for each of those audiences.

提示3：很多投資組合都用于求職和自由職業者。不要這樣最佳實踐是專業人士為每個受眾設計單獨的作品集。

每個細節都很重要。 (Every little detail matters.)

Here is the toughest point for a lot of people: you can’t control what your reviewer sees on your portfolio.

這是很多人最難的一點：您無法控制審閱者在投資組合中看到的內容。

We’re constantly scanning the website instead of reading it top-to-bottom. So make sure you have your layout styling perfected, each sentence proofread, and no broken links.

我們一直在掃描網站，而不是從上至下閱讀。因此，請確保您擁有完善的版式樣式，每個句子都經過校對，并且沒有斷開的鏈接。

There’s no telling what part of your site the reviewer will actually take the time to look at.

沒有告訴評論者實際上將花費時間在網站的哪一部分。

你有這個 (You’ve got this.)

I was proud of all the great portfolios I was able to provide feedback on, and the discussions that followed.

我為能夠提供反饋的所有出色作品集以及隨后的討論而感到自豪。

The most encouraging part was when front end developers were not yet up-to-par for our role, and I was able to give them feedback. These aspiring professionals took the critique seriously and positively.

最令人鼓舞的是，前端開發人員還沒有達到我們的標準，我能夠給他們反饋。這些有抱負的專業人士認真，積極地對待了批評。

That is exactly the kind of attitude I look for later in the process when I interview applicants.

這正是我稍后在面試申請人時所尋求的態度。

My hope is that these people will improve, and I’ll have a chance to review their work again in the future.

我希望這些人會有所進步，將來我將有機會再次審查他們的工作。

P.S. I’m still getting back to late requests for portfolio reviews. Also, all of the portfolios in my opening image asked for the review publicly, and scored highly!

附言：我仍在重新提出對項目組合進行審查的要求。另外，我的開場圖片中的所有投資組合都公開征求評論，并獲得高分！

For further information: Feel free to contact me by the comments, email, or @seejamescode. I work in ATX for IBM Design and always love conversation with the web design community. Also be sure to share your own or favorite portfolio in the comments!

有關更多信息：請通過評論，電子郵件或@seejamescode與我聯系。 我在ATX for IBM Design工作，并且一直喜歡與Web設計社區進行對話。 另外，請務必在評論中分享您自己或喜歡的投資組合！