美团脱颖而出的经验
This sponsored article was created by our content partner, BAW Media. Thank you for supporting the partners who make SitePoint possible.
这篇赞助文章是由我们的内容合作伙伴BAW Media创建的。 感谢您支持使SitePoint成为可能的合作伙伴。
It’s not always easy to find and get new clients as a web developer.
以网络开发人员的身份寻找并获得新客户并不总是那么容易。
First, there’s the obstacle of how to translate what you do into a language that clients will understand. If you start talking about things like PHP, APIs, and wireframes, your prospects’ eyes will glaze over. They want to see for their own eyes what you can do.
首先，如何将您的工作翻译成客户可以理解的语言存在障碍。 如果您开始谈论PHP，API和线框之类的内容，那么准客户的眼光就会大打折扣。 他们想亲眼看看您能做什么。
Secondly, how do you stand out from the crowd when most developers use the same tools and programming languages to build websites?
其次，当大多数开发人员使用相同的工具和编程语言来构建网站时，您如何在人群中脱颖而出？
A well-crafted web developer portfolio site will solve both of these problems.
精心设计的Web开发人员投资组合站点将解决这两个问题。
Below, I’m going to show you some web developer portfolios that are true standouts in the space. If you’re interested in building something as attractive and innovative as the sites below, I’ve also suggested some BeTheme pre-built sites you can use to easily create your own.
下面，我将向您展示一些Web开发人员组合，这些组合是该领域中真正的佼佼者。 如果您有兴趣构建与以下站点一样有吸引力和创新的内容，我还建议您使用一些BeTheme预制站点，您可以使用这些站点轻松创建自己的站点 。
Let’s take a look.
让我们来看看。
As a developer, you not only have to distinguish yourself from other web developers, but you have to distinguish yourself from web designers. This is where you have an edge over everyone else.
作为开发人员，您不仅必须与其他Web开发人员区分开，而且还必须与Web设计人员区分开。 在这里，您可以超越其他所有人。
Since you’re responsible for coding the website, you have the skills to create something that feels more alive than just a static image or design. So, why not give prospective clients a taste of that from the very start with an eye-catching banner and animation?
由于您负责对网站进行编码，因此您具有技巧，可以创建比静态图像或设计更生动的东西。 那么，为什么不从一开始就用引人注目的横幅和动画让潜在客户品尝一下呢？
Here’s how developer Jacek Jeznach introduces prospects to his portfolio site as well as each subsequent page:
这是开发人员Jacek Jeznach向其投资组合网站以及每个后续页面介绍潜在客户的方式：
It’s a simply designed website at first glance. However, the way the homepage design eases in sets the tone for something truly original. Each page then carries on that tradition — with simple blocks of text accompanied by eye-catching imagery and animation.
乍一看，这是一个设计简单的网站。 但是，主页设计的轻松方式为真正新颖的东西定下了基调。 然后，每页都沿袭这一传统-带有简单的文字块以及引人注目的图像和动画。
How to use BeCode to make a strong first impression of your own:
如何使用BeCode来给自己留下深刻的第一印象：
There are two things here that make this portfolio site so impressive:
这里有两件事使这个投资组合网站如此引人注目：
The striking color palette 醒目的调色板 The subtle animations 微妙的动画If you want to accomplish something similar, the BeCode 2 pre-built website would be a good place to start:
如果您想完成类似的事情，那么BeCode 2预制网站将是一个不错的起点：
Notice how it employs the same kinds of key differentiators as Jeznach’s site. This is a much subtler example, but it accomplishes the same goal. Prospects won’t be able to take their eyes off of it.
请注意，它如何使用与Jeznach网站相同的关键区别因素。 这是一个非常微妙的示例，但它实现了相同的目标。 前景将不容忽视。
The last thing you want is to design your website to look like a boring corporate website. It would certainly be easier to build, but it wouldn’t help you win any new clients.
您想要做的最后一件事是将您的网站设计为看起来像无聊的公司网站。 构建当然会更容易，但是并不能帮助您赢得任何新客户。
So, think about what it is that makes you as a web developer unique. Your site as a whole should reflect this. It’s the only way you’re actually going to get prospective clients from Point A (your homepage) to Point B (your portfolio).
因此，请考虑一下让您成为Web开发人员的独特之处。 您的整个网站应该反映出这一点。 这是您真正从A点(您的主页)到B点(您的投资组合)吸引潜在客户的唯一方法。
Adham Dannaway, for instance, is a designer/developer:
例如， Adham Dannaway是一名设计师/开发人员：
As such, Dannaway’s website is a literal manifestation of this split personality. When prospects pull the image to the left or right, they expose the two different sides: designer vs. coder.
因此，Dannaway的网站就是这种分裂性格的字面体现。 当潜在客户将图像向左或向右拉时，它们会暴露出两个不同的方面：设计人员与编码人员。
It’s enough to get prospects thinking, “Hmmm… What else am I going to find here?” But there are no bells and whistles. The rest of the portfolio site is minimally designed and surprise-free. This makes getting them to the portfolio samples quite easy.
足以让潜在客户思考：“嗯……我还能在这里找到什么？” 但是没有风吹草动。 投资组合站点的其余部分均经过最小化设计且毫无意外。 这使他们很容易地进入投资组合样本。
How to use BeDesign to infuse your web developer site with real personality:
如何使用BeDesign以真正的个性注入您的Web开发人员网站：
The example above works well because Dannaway has found a unique way to show off the difference between being a designer and a developer. But that’s not necessarily what’s going to work for you.
上面的示例之所以行之有效，是因为Dannaway已经找到了一种独特的方式来彰显设计者与开发者之间的区别。 但这不一定对您有用。
What you want to focus on is how to create something that’s uniquely you. To get you started, consider using the BeDesign 3 pre-built site:
您要重点关注的是如何创建自己独特的东西。 要开始使用，请考虑使用BeDesign 3预制站点：
As you can see, it’s nothing like Dannaway’s site, but it still has a unique feel all its own, playing with light and dark and putting a unique spin on parallax.
如您所见，它与Dannaway的网站完全不同，但它仍然具有独特的感觉，无论在明暗环境中玩耍还是在视差方面都具有独特的旋转感。
Once you find your voice and personality, customize this pre-built site and make it your own.
找到自己的声音和个性后，请自定义此预制站点，并使其成为自己的站点。
Many times, a web developer will build out their portfolio on the homepage and call it a day. But you have to remember something:
很多时候，网络开发人员会在首页上建立他们的投资组合，并称之为一天。 但是您必须记住一些事情：
Clients aren’t just hiring you because your work is impressive. They’re hiring you because they want to work with someone like you.
客户不仅会雇用您，因为您的工作令人印象深刻。 他们之所以雇用您，是因为他们想与像您这样的人一起工作。
So, when building out your portfolio site, give your work a dedicated space and allow prospective clients to get to know you a bit more on the rest of the site.
因此，在构建投资组合网站时，请给您的工作分配专用的空间，并允许潜在客户在该网站的其余部分上对您有更多的了解。
Keep in mind that they want to see more than just a list of client logos, too. They want to know what you built and see how it turned out.
请记住，他们也希望看到的不仅仅是客户徽标列表。 他们想知道您建造的是什么，然后看看结果如何。
Take the portfolio for full-stack developer Matthew Williams:
以全栈开发人员Matthew Williams的投资组合为例：
At first glance, this is what the portfolio looks like. However, prospective clients can roll over each photo and learn more about the work:
乍一看，这就是投资组合的样子。 但是，潜在客户可以将每张照片翻阅并了解有关该作品的更多信息：
They can scroll through images from the sites designed by Williams and, in some cases, can click through to the live website or app to explore it further.
他们可以滚动浏览Williams设计的站点中的图像，在某些情况下，还可以单击以访问实时网站或应用程序以进一步浏览。
How to give your developer portfolio examples space to shine using BeArchitect:
如何使用BeArchitect为您的开发人员投资组合示例提供发光的空间：
What’s nice about BeTheme’s pre-built sites is that there are a ton of elements and layouts that can be utilized across various niches. Take the Projects page for BeArchitect 5, for example.
BeTheme的预建站点的优点在于，可以在各种利基空间中使用大量元素和布局。 以BeArchitect 5的“项目”页面为例。
This masonry grid of projects would work really well for a web developer’s portfolio. Especially if you want yours to have a little flare in terms of layout and design.
这种砖石结构的项目网格非常适合Web开发人员的产品组合。 特别是如果您希望自己的布局和设计有点夸张。
And similar to Williams’s portfolio examples, each of these projects gets its own dedicated page. So, if you want more space to show off your work and explain the unique circumstances of the job, this pre-built site would work really well.
与Williams的投资组合示例类似，每个项目都有自己的专用页面。 因此，如果您希望有更多的空间来展示您的作品并解释这项工作的独特情况，那么这个预先构建的网站将非常有效。
For corporate and ecommerce websites, trust marks come in the form of things like cookie consent notices, SSL certificates, and antivirus and antimalware seals. But for web developers, you have to earn trust a different way.
对于公司和电子商务网站，信任标记以Cookie同意通知，SSL证书以及防病毒和反恶意软件印章之类的形式出现。 但是对于Web开发人员，您必须以其他方式赢得信任。
Clients not only want to see what a good job you did building a website. They also want to know that the client was happy with the work, the process, and the outcomes.
客户不仅希望看到您建立网站的出色工作。 他们还想知道客户对工作，过程和结果感到满意。
So, you’re going to need to provide proof.
因此，您将需要提供证明。
Sara Soueidan‘s website is a good example of how you can do this:
Sara Soueidan的网站是如何做到这一点的一个很好的例子：
This is just below the fold on the homepage. The logos alone are impressive as many of the clients are well-known organizations.
这正好在首页的首屏下方。 由于许多客户都是知名组织，因此仅徽标就令人印象深刻。
However, if a prospect were to visit the Work page on the site, they’d find that these logos each direct to a full-fledged case study along with a client testimonial:
但是，如果潜在客户要访问网站上的“工作”页面，他们会发现这些徽标分别指向完整的案例研究以及客户推荐：
In order to build trust as a developer, you need to be transparent with clients about the process and what they get from you. Unfortunately, you telling them how great of a coder you are isn’t enough. They need to hear it from your former clients, too.
为了建立作为开发人员的信任，您需要与客户保持透明的关系，了解流程以及他们从您那里获得的收益。 不幸的是，您仅仅告诉他们您还算不上出色的编码员。 他们也需要从您以前的客户那里听到它。
How to build trust through design using BeTheme:
如何使用BeTheme通过设计建立信任：
If you want to share your clients’ stories similar to how Soueidan does, the Default BeTheme pre-built site would be useful:
如果您想分享与Soueidan相似的客户故事，则默认的BeTheme预制站点将非常有用：
For one, you’d have different options in terms of how you show off your web developer portfolio or list of clients on the homepage.
一方面，在如何炫耀您的Web开发人员产品组合或主页上的客户列表方面，您有不同的选择。
In the example above, the animated counter would allow you to stress the amount of experience you have. This would be helpful if you don’t have any big-named clients and logos to tout.
在上面的例子中，动画计数器将让你压力，你有经验的量 。 如果您没有大牌客户和标榜的徽标，这将很有帮助。
The site also comes equipped with a Portfolio page template:
该网站还配备了投资组合页面模板：
Each of these portfolio images links out to a dedicated case study page as well, similar to Soueidan’s site:
这些投资组合图片的每一个也都链接到专门的案例研究页面，类似于Soueidan的网站：
The page is yours to customize, so you can add all of the trust-building elements you need. Web page mockups. Process explainers. Client testimonials.
该页面是您自定义的，因此您可以添加所需的所有建立信任的元素。 网页模型。 过程解释器。 客户感言。
The last element you need to create the perfect web developer portfolio for yourself is a no-brainer CTA.
为您自己创建完美的Web开发人员产品组合所需的最后一个要素是毫不费力的CTA。
What does that mean?
那是什么意思？
For one thing, your navigation needs to be simple. Don’t overload it with extraneous information. You’ve already sold yourself through the design of your site and the quality of your portfolio. Keep it simple and lay it out as a natural progression of steps that prospects should take.
一方面，您的导航需要简单。 不要让多余的信息超载它。 您已经通过网站的设计和产品组合的质量卖掉了自己。 保持简单，将其布置为潜在客户应采取的自然步骤。
Jonny MacEachern has a beautiful example of this:
Jonny MacEachern有一个很好的例子：
There are three steps:
分三个步骤：
Learn about my services. 了解我的服务。 Check out my portfolio. 查看我的投资组合。 Get pricing. 获取价格。It should be as simple as that.
它应该就这么简单。
And all of the CTAs need to be as clear and consistent as well, which means deciding which action you want them to take. In MacEachern’s case, prospects have two options.
而且所有CTAs也必须保持清晰和一致，这意味着要确定您希望他们采取的行动。 在MacEachern的情况下，潜在客户有两种选择。
They can request a quote if they’re interested:
如果有兴趣，他们可以要求报价：
Or they can get in touch via the contact form or live chat widget:
或者他们可以通过联系表或实时聊天小部件进行联系：
If you’ve put a lot of time into building a site that clearly demonstrates your skills and has earned the trust of prospects, don’t throw it all away by overcomplicating the call-to-action.
如果您花了很多时间来建立一个网站，以清楚地展示自己的技能并赢得了潜在客户的信任，请不要因为号召性用语过于复杂而放弃所有内容。
How to turn impressed prospects into clients with BeSEO:
如何使用BeSEO将印象深刻的潜在客户变成客户：
To build this out on your own, you’re going to need to figure out what your own goal is.
要自行构建，您需要确定自己的目标是什么。
Do you want prospects to sign up for a discovery call? To fill out a contact form to get a quote? To sign up directly on the site? Once you know your call-to-action, you can design your navigation as well as the key CTA elements.
您是否希望潜在客户注册发现电话？ 要填写联系表格以获取报价？ 要直接在网站上注册？ 了解号召性用语后，就可以设计导航以及关键的CTA元素。
If you’re looking for something that’ll help you do this in a clear and consistent fashion, check out the BeSEO 3 pre-built site:
如果您正在寻找可以帮助您以清晰，一致的方式完成此操作的方法，请访问BeSEO 3预制站点：
It’s very clean and simple in design, which will make customizing it to your needs a breeze.
它非常干净，设计简单，将使您轻松定制它。
Now it’s time to build your own attention-getting web developer portfolio
现在是时候建立自己的吸引人的Web开发人员产品组合了
If you want prospective clients to take notice of your work, then your web developer portfolio site needs to strike a balance between attractiveness and trustworthiness.
如果您希望潜在客户注意您的工作，则您的Web开发人员投资组合网站需要在吸引力和可信赖性之间取得平衡。
That means building a website for yourself that your prospects would be excited to have as their own site while including samples that really knock their socks off. So, as you go about building your portfolio, focus on showing them what you’re truly capable of.
这意味着要为自己建立一个网站，让潜在客户兴奋地拥有自己的网站，同时提供能够真正击败他们的样本。 因此，在建立投资组合时，请专注于向他们展示您真正具备的能力。
翻译自: https://www.sitepoint.com/5-features-to-make-your-web-developer-portfolio-stand-out/
美团脱颖而出的经验
相关资源：jdk-8u281-windows-x64.exe