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设计社区进行对话。 另外，请务必在评论中分享您自己或喜欢的投资组合！