在宾夕法尼亚州工作的最佳地点
设计作品集网站的指南
在本指南中，我将:
- 定义什么是作品集网站
- 确定投资组合网站的主要目的
- 讨论投资组合网站的四个基本部分，也为每个项目分享示例和提示
- 讨论一些你可能也希望拥有的作品集网站的其他流行组件
让我们开始吧！
什么是作品集网站?
让我们首先定义投资组合网站是什么。在其最基本的形式下，投资组合网站提供有关个人或公司的专业信息并提出了一种展示他们的工作。
下面是两个作品集网站的例子。
Justin Mezzell的网站是一个个人作品集网站的例子:
的谷物和砂浆以下网站是设计代理商的投资组合网站的示例：
注意代表个人的投资组合网站之间的相似之处，代表整个公司;两者的基础概念都是如此：
- 提供有关个人或公司的信息的网站访客
- 展示工作
作品集网站的目的
在设计过程中，第一步应该是陈述目的。回答这个问题我们为什么要这么做?应该在开始任何工作之前完成。通过指定设计的目的，该过程变得有意义。
在投资组合网站上，我会谈论的，你会看到相同的主要目的：显示引人注目的内容并提供基本信息以获得更多客户的方式。
作品集网站中引人注目的内容的例子
令人信服的内容使潜在客户讨论雇用投资组合网站所有者。
作品集网站上引人注目的内容的例子如下。
你的工作展示。这可以以多种方式执行——幻灯片、缩略图库、视频演示等等——但目的都是一样的:让网站访问者了解作品集所有者可以做什么。
在邱德华的作品集网站上，设计师的作品展示是通过缩略图库完成的:
经验和证书的总结。通常在“关于”部分中找到。
下图是一个作品集网站的“关于”页面的例子。网页设计师巴勃罗·多明格斯，以这个名字运作tinybigstudio，用三段话描述了他的专业背景，并列出了他工作的地方(以证明他的资历):
推荐书。引人注目的内容还包括由相关人士(比如你现有的客户)撰写的推荐信。
在下面的例子中，您可以看到如何做到这一点理论，一家设计机构，通过展示他们以前合作过的企业主的证明来提供引人注目的内容:
投资组合网站中的基本信息示例
一个组合网站也意味着给网站访问者关于网站所有者的一般信息。基本信息的形式如下:
联系信息。这是你首选的沟通方式的陈述，比如电子邮件、联系方式、电话号码、办公室地址等等。
这是一个例子克里斯托弗米德的投资组合网站：
提供服务。有一份服务清单是个好主意。它可以帮助感兴趣的网站访问者了解你是否可以为他们的问题提供解决方案。以下是状态局的“服务”页面，概述了他们所做的事情:
作品集网站的基本部分
有些组成部分的投资组合网站，您无法生存。如果您的投资组合网站中有这些部分，则您都设置了。
“作品集”部分
“工作组合”部分是您网站上的一个地方，您可以展示您的过去的工作。
例子
以下示例演示了“工作组合”部分的基本设计模式（发现朱利安Renvoye的网站）.第一个屏幕是一个缩略图画廊，让观众可以鸟瞰所有正在展示的作品:
当你点击作品集的缩略图，更多的信息会显示:
我们可以看到相同的“工作组合”设计模式实地考察．该部分有一个缩略图风格的展示公司的作品集:
点击作品集的缩略图将带你到另一个页面的详细信息:
“工作作品集”部分的小贴士
当有疑问时，坚持设计模式。提供一个开箱即用互动体验对于查看“工作组合”的网站用户来说是好的，正常执行。这样做是在您的网站上显示引人注目的内容的另一个机会以及一种展示您技能的方式。
然而，这种经过验证的设计模式——显示缩略图库，然后在点击缩略图时逐步披露更多关于作品集的信息——效果很好，而且是一种熟悉的UI模式。
的BrandClay.作品集网站的特点是熟悉的缩略图图库设计模式。
只展示你最好的作品。选择你最自豪的项目。什么时候整理你的“工作作品集”Section，永远选择质量而不是数量。
“关于”部分
您的“关于”部分应在与您想要合作的客户类型相关和引人注目的上下文中写入。
例子
你的“关于”部分可以像德国设计师一样简单Michael Schmid的“关于”页面-它有一个简洁的声明，关于他做了什么，以及一系列链接，指向人们引人注目的内容(如他的Dribbble页面)和基本信息(如他的电子邮件地址):
Jan Cavan的“关于”页面稍微长一点，但达到了同样的目的:它让读者对网站背后的人有了一个了解:
关于“关于”部分的提示
不要害怕展现你的个性。与读者建立联系会让你的“关于”部分更有可能成为吸引人的内容。
包括一张真实的照片。拥有一张真实的照片使你的网站更加人性化。人们想和别人一起工作。
的照片Kait Bos的“关于”部分双重用作视觉，有助于提请注意她的呼叫行动，看看我的工作：
的谷物和砂浆“关于”页工作人员的大头照:
David Airey Portfolio网站上的“关于”页面有一个大型设计师的爆头：
有一个呼叫动作。我们可以合理地假设，阅读你的“关于”部分的人是考虑雇用你的人。这意味着你有机会让他/她采取行动。
的瑞普艺术的"关于"部分很快是一个呼叫动作，开始与它们的项目，以及在Twitter和Facebook上遵循它们的联系人Web表单和替代辅助操作选项。这保留了用户体验的连续性：
“服务”部分
这是您的技能和服务产品列表。一些选择将此部分放在他们的“关于”部分中。提供此信息让您感兴趣的人知道他们在正确的网站上。
例子
“服务”部分关于Sputnik Creative列出了公司提供的六个主要服务：
的“服务”页面的潮流是一个更详细的东西的一个例子，但它实现了提供有关公司服务信息的相同目的：
您的“服务”部分的提示
请明确点。最好是擅长并专注于一些事情，而不是试图取悦每个人。
说明你的独特的价值主张．随着您的技能列表，提供有关使您与其他服务提供商不同的信息的一个好主意。
例如，价值主张仅限协会的“服务”页面是他们能提供的综合服务。价值主张是方便- 客户不需要处理多个服务提供商以获得各种需求：
“接触”部分
“联系”部分告诉人们如何与你取得联系。
例子
您的“联系人”部分不必详细说明。您可以选择通过刚刚陈述您的电子邮件地址来保持简单，如Tim Boelaars的“联系人”页面：
如果你想让想给你发信息的人更方便的话，你可以使用联系表格。使用网页表单也可以使发送给你的信息有条理。
的contact form at CreativeDash Design Studio举例说明了结构的概念;通过填写完整的网站名称、公司名称和预算范围，设计工作室确保在第一次接触时就能提供相关信息:
“联系”部分的提示
提供多种通信选项。通过提供多种通信渠道，尽可能轻松地联系您。这使用户能够选择她最舒适的联系方式。
例如,在全站式“联系我们”部分您可以看到他们提供了四种通信方式（Web表单，电子邮件，电话，推特）：
最终用户尽可能简单地使此过程变得简单。联系你是一个人在雇佣你之前会采取的第一个行动——这是一个至关重要的过程。你会想尽一切办法使联系过程尽可能简单、无故障。
一个很好的例子是onKarlyn．他们在登陆页面顶部有一个大的呼叫动作按钮，以确保网站访问者立即看到：
如果您联系他们，他们将通过为您提供互补的服务来激励联系过程：
投资组合网站的其他流行组件
许多投资组合网站超出了投资组合网站的四个基本部分。
您应该考虑的其他组件在下面列出。当您决定您网站上的哪些组件时，请记住这两个问题：
- 它会帮助我创造令人信服的内容吗？
- 它提供有关我的基本信息吗？
博客
您经常在投资组合网站中找到一个博客。博客将网站访问者提供更引人注目的内容来消费。博客为人们提供了关于您的知识，专业知识和个性的洞察。博客还可以将新的网站访问者带入投资组合网站。
例子
Megan Fisher网站上的博客是使用博客作为在投资组合网站上添加引人注目的内容的额外方法的一个很好的例子。她的博客允许读者了解她的个性和创造性的品味：
的杰森·圣玛丽亚的作品集网站上的博客是博客如何为在线投资组合添加价值的另一个很好的例子：
“过程”部分
许多在线作品集都会有一个部分概述项目的工作流程。这让潜在客户了解到，如果他们与你合作，他们可以期待什么。
例子
Sputnik Creative有一个连续的幻灯片展示他们的工作过程:
Status Bureau的“过程”页面概述了项目的初始阶段(如发现和研究)，直到项目结束:
实例探究
详细讨论某些项目可以为站点用户提供更吸引人的内容。
例子
该工厂在其网站上提供了一些案例研究，例如MTV日本项目的案例研究。他们说明了项目的独特挑战，解决这些挑战的解决方案，他们使用的技术以及项目具有的功能列表：
在投资组合网站中使用案例研究的另一个典型例子可以在数字机构BKWLD的网站上找到。以下是他们对麦当劳的案例研究:
报价申请表
除了一个简单的联系页面，一些组合网站选择有一个报价请求表单代替。报价请求表单要求用户提供相关信息——例如工作范围/性质、时间框架和项目预算——以便组合网站所有者可以向请求者发送报价。
例子
这是一个报价请求表格示例（在建立的投资组合网站上）：
另一份报价申请表可以在基金会六的“联系方式”页上找到:
结论
构建在线投资组合可以是一个令人生畏的任务。但是，如果您记住了投资组合网站的目的，则终点线的路径是一个明显的引导过程。
我希望你为自己的投资组合网站获得一些有用的提示和想法！
