您好，我是Adobe Portfolio的首席产品设计师和创意总监。 我将和你分享Behance（Adobe）在过去一年里一直在开发的自自己和一个伟大的开发团队。
The Adobe Portfolio marketing site
什么是Adobe Portfolio？
基本上，它是一个产品，允许您快速，简单地创建一个网站展示您的工作，并自定义它，以适应您的风格和需求。这不是一个新的概念，有几十个产品在那里做只是这样。但投资组合有一些主要区别：
它专门为广告素材设计以展示其投资组合。这意味着它做你需要它做，简单和快速。
所有Adobe Creative Cloud计划均免费。
您可以访问Typekit的所有字体库，以在您的网站上使用。
投资组合与Behance同步。
使Portfolio最独特的是它与Behance同步。这个想法是，您使用Portfolio创建一个漂亮的自定义网站，并将您的项目同步到您的Behance配置文件。在这里，您可以在数百万个广告素材所使用的广告素材平台和招募广告素材的人群中获得宝贵的曝光机会！但是你不必使用Behance，如果你不想 - 你可以使用自己的Portfolio，并选择不与Behance同步。这是你的选择。
The photography of Matthias Heiderich — as seen onPortfolioandBehance
响应布局
像任何网站建设者，你需要一个起点。 因此，我们需要设计的许多事情之一是布局专门用于展示创造性工作，作为一个基础，你可以轻松地自定义和填充项目。
布局旨在涵盖各种风格，以适应不同的创意领域。 它们可以用作现成的解决方案，快速填充您的项目和发布网站（几分钟），或使用编辑器功能更改结构和外观以适应您的风格。
下面是我们发布的布局。 初始布局（公开测试版和产品发布版）非常简单，专注于项目封面，画廊和项目。 该产品当然会增长提供更多的功能，如全屏幕封面图像，HTML和CSS编辑，博客集成等。 随着特征的扩展，布局的种类和数量也将作为起点来选择。
我们选择在Behance上的广告素材后命名布局。我们列出了一些广告素材，这些广告素材的工作顺利完成了特定的布局，当然也令人惊叹。
我应该说，这些布局是最后的事情之一（pre-beta），但我领导与他们为本文的缘故，介绍你的产品做什么，或至少，它的'成品'。
编辑
产品（本身）必须使用户能够快速，简单地编辑他们的网站，使用上面的布局之一作为起点。 UI是非常小的 - 它让你的方式，让你专注于你的网站的设计。您所做的所有更改都会在编辑器中生效。
这听起来有点俗气，但在设计品牌，营销网站，尤其是编辑的一切时，我有三个要点：
简单，干净，美观。
它应该授权用户：
轻松编辑他们可以看到的任何内容。
管理和添加内容。
响应地预览其网站。
发布和更新实时网站。
以下是产品（编辑器）的一系列编辑场景：
编辑器中的各种屏幕。 由Chris Burkard摄影和Andrew Couldwell设计
产品设计师的作用。
我自己作为一个设计师的角色在一年中，从概念到推出，变化相当大。 随着数字产品的发展，您作为产品设计师的角色也在发展。 所以回去开始：
ProSite。
投资组合实际上是一个名为ProSite的现有Behance产品（已退休）的演变。 它是5岁，所以有很多，我们可以从该产品学习：什么工作？ 什么没有？
Behance网络。
此外，我们通过设计，策划（和使用）Behance Network，了解创意社区和展示工作，对于了解如何构建像Portfolio这样的产品是非常宝贵的。
了解您的受众群体是一个伟大的起点。
所以我花了很多时间吸收Behance多年来获得的所有这些知识，并且还研究了他们的ProSite的演变的初始设计。 问问题。 做笔记。 草图的想法。
几张手写薄图纸
上面指出的一个有趣的图像是最后一个（右下）。你可以看到我的草图接近我最终设计的。
概念和原型。
所有这些想法和设计都通过概念，原型设计和与团队讨论来告知和发展。通过与其他设计师和开发人员，甚至目标受众的可能的想法聊天是好的。例如：一个特别的想法来自我与SVA的MFA插图学生讨论早期（产品）设计。一个新的视角总是有帮助，特别是对于这种复杂的产品。
我们正在为这个项目工作非常紧张的时间框架。没有时间来构建任何复杂的原型。但我做的是在Photoshop中使用图层组合创建一系列PDF演练，显示鼠标光标在屏幕上移动，演示产品中的每个交互，功能和用户流。这些允许开发人员（和其他利益相关者）批判和/或理解所有功能和用户流程，因此他们知道要构建什么，并且在构建和测试之前识别UI / UX中的任何潜在缺陷。
在设计的细节。
简单地说：为开发者拿出猜测。您的团队需要了解需要构建的内容。这不是他们的工作，填补空白，使其响应，或猜测在任何给定的情况下会发生什么。我不能夸大这么多 - 我经历了这么多设计师设计和考虑20％的产品，而不是通过思考。
除了我之前谈到的演练，用户流程和原型之外，我还想为所有的UI组件，功能和品牌创建详细的规范。我觉得这些都很重要，当你有一个大团队，所以每个人都在同一页，有一个中心点的参考。规范旨在涵盖所有情况，从滚动状态，错误，活动/非活动状态等...，还涵盖px值和维度（我甚至去包括基本的CSS）。
在构建中促进/鼓励像素完美。领先的例子，并设置酒吧高。
您在设计中包含的更多细节，开发人员所能提出的问题越少，管理构建的时间越少。因此，您可以专注于设计，测试和改进产品。
此外，关于花费时间创建这些“UI工具包”的好处是，将来更新产品（设计）更容易。没有必要更新数百个模型，只需更新规格。
以下是这些styleguides和规格的几个例子：
查看产品设计规格的完整案例研究
营销和品牌
几个月来，随着产品（编辑）的设计和建设，我重点关注营销，入职和品牌。这是什么产品？你如何开始使用它？它需要一个声音。身份。
名字
当我第一次加入Behance时，这个项目有点开玩笑地在内部被称为“Prosite 2.0”。 ProSite产品服务时间，但它的后继者已经成长为一个不同的野兽。除了与Behance的联系，他们是非常不同的产品，没有1：1的相关性。这不是一个重新设计/发射。我们从头开始创建一个令人兴奋的新产品，并退休ProSite。这是很重要的传达 - 这从名字开始。
我回到我的写生簿，通过一个单词协会练习，写下这个产品做的一切，以及市场上每个类似的产品使用什么语言。所有这些的自然进展不断回到“投资组合”。所以经过一番想法，我得出结论：“为什么不？” - 它的确恰恰就是它在锡上所说的。它是专为创建投资组合而设计的网站创建者/编辑器。这个名字的简单和大胆的结合了产品的设计和价值。因此我们称之为“投资组合”，它很快成为“Adobe投资组合”，以适应Adobe的产品套件。
品牌
投资组合非常有自己的身份和个性。 投资组合不是一个公司产品（可以这么说）。 它是白色标签。 这是你的，使自己的。 它的友好，简单和平易近人。 在整个（产品）用户体验中的品牌，营销网站，入职，文案和消息传递都试图通过使用的语言，排版，网格，图像和颜色来传达。
响应设计
回到我之前关于设计细节的观点：网页设计，就像产品设计一样，应该同样注重细节。 在这种情况下，当然重要的是营销网站是响应，但不是开发人员的工作，以了解网站如何在不同的屏幕尺寸响应。
如果你为他们采取猜测，你将是开发商的最好的朋友。 相信我 ：）
下面是响应式设计的几个例子，交付给开发人员来构建myportfolio.com
...人们并不总是使用产品，你预期他们会如何？
你学，
你提高，
你迭代的产品，
你继续测试，
并重复此过程。
老实说，有时它感觉有点像这样：
...但产品会更好。
结论是。
如果我要带走任何东西，这将是：
慢一点。
得到启发。了解您的受众群体。做笔记。素描的想法。
概念。
与您的团队合作。探索想法。想想吧。
在设计的细节。
有人（其他）需要构建你设计的。
测试和改进。
它工作吗？如何改进？它总是可以改进。
学习。
总是。每个设计经验都是一个很好的学习经验。
想看更多？
在幕后看，在产品设计，规格和UX。
投资组合编辑器的设计案例研究。
品牌和营销网站的设计案例研究。
设计案例研究的布局。
谢谢阅读。
我希望你喜欢使用Adobe Portfolio，并发现这个洞察设计过程很有用。
本文翻译自（https://medium.com/@andrewcouldwell/designing-adobe-portfolio-ffa1358e4913#.9cu2osnuk）
网友评论