这篇文章是在Portfoliobox的帮助下提供给您的
Portfoliobox是一个网络工具，可以用来创建一个投资组合网站。今天就创建一个免费帐户。阅读Portfoliobox
在本指南中，我将:
- 定义什么是投资组合网站
- 确定投资组合网站的主要目的
- 讨论投资组合网站的四个基本部分，并分享每个部分的例子和技巧
- 讨论一些你可能也希望拥有的投资组合网站的其他流行组件
让我们开始吧!
什么是作品集网站?
让我们从定义什么是投资组合网站开始。投资组合网站提供了最基本的形式个人或公司的专业信息并给出了展示他们的作品。下面是两个投资组合网站的例子。
Justin Mezzell的网站是一个个人投资组合网站的例子:
的粮浆下面的网站是一个设计机构的投资组合网站的例子:
注意代表个人的投资组合网站和代表整个公司的投资组合网站之间的相似之处;两者的基本概念是相同的:
- 向网站访问者提供有关个人或公司的信息
- 展示作品
作品集网站的目的
在设计过程中，第一步应该是目的陈述。回答问题我们为什么要这么做?应该在任何工作开始之前完成。通过指定设计的目的，这个过程变得有意义。
在我将要谈到的投资组合网站中，你会看到相同的主要目的:用于展示引人注目的内容和提供基本信息在某种程度上，这能让我们获得更多的客户。
作品集网站中引人注目的内容的例子
引人注目的内容说服潜在客户雇佣组合网站所有者。投资组合网站上引人注目的内容的例子如下。展示你的作品。
这可以以多种方式执行——幻灯片、缩略图画廊、视频演示等——但所有这些方式的目的都是一样的:让网站访问者了解投资组合所有者可以做什么。在Ed Yau的作品集网站上，设计师的作品展示是用缩略图画廊完成的:
经验和证书的总结。
通常可以在“关于”部分找到。下面展示的是一个作品集网站中的“关于”页面示例。网站设计师巴勃罗·多明格斯(Pablo Dominguez)以这个名字运营Tinybigstudio，其中有三段话描述了他的专业背景，并列出了他的作品曾被介绍过的地方(以证明他的资历):
奖状。
引人注目的内容也以相关人员(如您的现有客户)撰写的推荐信的形式出现。在下面的例子中，您可以看到如何操作理论这家设计公司通过展示他们之前合作过的企业主的推荐信，提供了引人注目的内容:
投资组合网站的基本信息示例
投资组合网站还意味着向网站访问者提供有关网站所有者的一般信息。基本信息的形式如下:联系信息。
这是一份你喜欢的沟通方式的声明，比如电子邮件、联系方式、电话号码、办公室地址等等。这里有一个例子克里斯托弗·米德的投资网站：
提供的服务。有一个服务清单是个好主意。
它可以帮助感兴趣的网站访问者了解您是否可以为他们的问题提供解决方案。以下是状态局的“服务”页面概述了他们所做的事情:
投资组合网站的基本部分
投资组合网站的某些组成部分是你不能没有的。如果你的作品集网站上有这些部分，你就万事俱备了。
“作品集”部分
“作品集”部分是你网站上展示你过去作品的地方。
例子
下面的示例演示了“工作组合”部分的基本设计模式(在Julien Renvoye的网站)．第一个屏幕是一个缩略图画廊，让观众鸟瞰所有正在展示的工作:
当您单击一个投资组合片段的缩略图时，将显示有关它的更多信息:
我们可以看到相同的“工作组合”设计模式实地考察．该板块以缩略图的方式展示了该公司的投资组合:
点击一个投资组合片段的缩略图将带你到另一个页面，其中有关于它的详细信息:
关于“作品集”部分的建议
当有疑问时，坚持一个设计模式。提供一种开箱即用的方式互动体验让网站用户浏览你的“作品集”是可以的，只要执行得当。
这样做是在你的网站上展示引人注目的内容的另一个机会，也是展示你技能的一种方式。然而，经过验证的设计模式是，先显示一个缩略图库，然后在点击缩略图时逐步显示关于作品集的更多信息，这种设计效果很好，是一种熟悉的UI模式。
的Brandclay作品集网站的特点是熟悉的缩略图画廊设计模式。只展示你最好的作品。选择你最引以为豪的项目。
当把你的“工作作品集”放在一起科，永远重质轻量。
“关于”部分
你的“关于”部分应该写在与你想要合作的客户类型相关且有吸引力的上下文中。
例子
你的“关于”部分可以像德国设计师一样简单迈克尔·施密德的“关于”页面-它有一个关于他是做什么的简洁陈述，以及一系列指向引人注目的内容(比如他的Dribbble页面)和基本信息(比如他的电子邮件地址)的链接:
Jan Cavan的“关于”页面有点长，但它达到了同样的目的:它让读者对网站背后的人有一个想法:
关于“个人简介”部分的建议
不要害怕展现你的个性。与读者建立联系可以让你的“关于”部分更有可能成为引人注目的内容。附上一张真实的照片。拥有一张真实的照片会让你的网站更人性化。人们想要和别人一起工作。
这张照片Kait Bos的“关于”部分Dually作为一种视觉效果，有助于吸引人们对她的行动呼吁的注意，看看我的作品：
的Grain & Mortar“关于”页面员工大头照:
David Airey作品集网站上的“关于”页面上有一张设计师的大头照:
有一个行动号召。我们可以合理地假设，阅读你的“关于”部分的人就是考虑雇用你的人。这意味着你有机会让他/她采取行动。的瑞普艺术的“关于”部分很快就会收到与他们一起启动项目的行动呼吁，以及联系网页表单，以及其他次要行动选项，如在Twitter和Facebook上关注他们。
这保证了用户体验的连续性:
“服务”部分
这是你的技能和服务的清单。有些人选择把这个部分放在“关于”部分中。提供这些信息可以让感兴趣的人知道他们在正确的网站上。
例子
Sputnik Creative的“服务”部分列出了该公司提供的六项主要服务:
的福客的“服务”页面是一个更详细的示例，但它达到了提供关于公司服务的信息的相同目的:
关于“服务”部分的建议
要具体。
最好在几件事情上做得更好、更专业，而不是试图取悦所有人。你的状态独特的价值主张．除了你的技能清单外，最好还能提供你与其他服务提供者的不同之处。例如，价值主张上的“仅按关联”的“服务”页面是他们所能提供的综合服务。
它的价值主张是方便客户不需要处理多个服务提供商来满足他们的各种需求:
“接触”部分
“联系”部分告诉人们如何与你取得联系。
例子
你的“联系人”部分不需要精心设计。你可以选择简单一点，只写你的电子邮件地址，就像Tim Boelaars的“联系”页面一样:
如果你想让想给你发消息的人更方便一点，你可以使用联系方式。使用网页表单还可以使发送给你的信息有条理。
的联系形式在CreativeDash设计工作室例证了结构的概念;通过一个要求全名、公司名称和预算范围的网页表单，设计工作室确保在第一次接触时就向他们提供相关信息:
关于你的“联系人”部分的建议
提供多种通信选项。提供多种沟通渠道，让联系你变得尽可能容易。这让用户能够选择她最舒服的联系方式。例如，在句号的“联系我们”部分你可以看到他们提供了四种沟通方式(网页、电子邮件、电话、Twitter):
让这个过程对最终用户来说尽可能简单。联系你是一个人在雇佣你之前要做的第一步——这是一个至关重要的过程。
你要尽你所能使联系过程尽可能简单和无故障。一个很好的例子就是onKarlyn．他们在登陆页面顶部有一个很大的行动呼吁按钮，以确保网站访问者立即看到它:
如果你联系他们，他们会为你提供补充服务，从而激励你与他们联系:
投资组合网站的其他流行组件
许多投资组合网站超出了投资组合网站的四个基本部分。
下面列出了你应该考虑在你的网站上使用的其他组件。当你决定在你的网站上使用哪些组件时，请记住这两个问题:
- 它能帮助我创造出吸引人的内容吗?
- 它能提供我的基本信息吗?
博客
你经常会在作品集网站上找到一个博客。博客为网站访问者提供了更多吸引人的内容。
博客让人们了解你的知识、专长和个性。博客还可以为你的网站带来新的访问者。
例子
Megan Fisher网站上的博客就是一个很好的例子，使用博客作为在投资组合网站上添加引人注目的内容的另一种方式。她的博客可以让读者了解她的个性和创作品味:
的Jason Santa Maria的投资网站上的博客这是另一个很好的例子，说明博客如何为在线投资组合增加价值:
“过程”部分
许多在线作品集将有一个部分概述项目的工作流程。
这可以让潜在客户了解到，如果他们与你合作，他们可以期待什么。
例子
Sputnik Creative有一个连续的幻灯片展示他们的工作过程:
状态局的“过程”页面概述了项目的初始阶段(如发现和研究)，直到项目结束时发生的事情:
案例研究
详细讨论某些项目可以为您的网站用户提供更有吸引力的内容。
例子
该工厂在其网站上提供了一些案例研究，例如他们与MTV日本合作项目的案例研究。他们陈述了项目的独特挑战，他们对这些挑战的解决方案，他们使用的技术，以及项目的特性列表:
在投资组合网站上使用案例研究的另一个典型例子可以在数字机构BKWLD的网站上找到。以下是他们对麦当劳的案例研究:
报价申请表格
除了一个简单的联系页面，一些投资组合网站选择有一个报价请求表单代替。报价请求表单要求用户提供相关信息。
工作范围/性质、时间框架和项目预算——以便组合网站所有者可以向请求者发送报价。
例子
这是一个报价请求表单示例(在build portfolio网站上):
另一个报价请求表单可以在Foundation Six“Contact”页面上找到:
结论
建立在线作品集可能是一项艰巨的任务。但如果你牢记投资组合网站的目的，通往终点线的路径是一个明确的指导过程。我希望你获得了一些有用的技巧和想法，你自己的投资组合网站!
进一步的阅读
WebFX职业
加入我们的使命，为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。
