A sufficient landing page plays a vital role in a successful web marketing campaign. It presents a specific product or service so that the visitor could find the needed information quickly and without distractions. The effective landing page draws potential customers’ attention to an offer and makes them take certain actions contributing high conversion. To make it work appropriately, it’s important to create a landing page design according to the target audience preferences.
一个充分的登录页面在成功的网页运营中扮演着重要的角色。它能够提供特定的产品或者服务，以至于让访问者能够快速获取所需信息而不被迷失。一个高效的登录页能引起潜在用户对提供内容的关注，并让他们产生能使转化率提高的行为。为了达到这一点，根据目标用户的偏好来设计登录页面至关重要。
Task
Landing page design with custom illustrations for a digital collaboration platform.
任务
数字化协作平台定制插图的登陆页设计。
Process
The client is a British company Collectively Intelligent Limited from London, the curator of a digital collaboration platform called Colony. The platform enables people all over the world to build companies together online. Communities can coalesce around a project and collaborate together, collectively controlling funds, and sharing in the project’s revenue — all without trusting, or even knowing, the people with whom they are collaborating.
The client made a request for a landing page design which would convey the value of their proposition in a simple and approachable way. Colony is a sophisticated, complex product, so the major task was to help people to understand how it works and what benefits they can get from it. After considering all the aspects designer moved to the creative process.
过程
客户是一个来自伦敦的英国公司（Collectively Intelligent Limited），数字化协作平台叫作 Colony。这个平台能够让来自全世界的人们一起在线上成立公司。整个社区能够围绕一个项目来合作，共同管理资金，并且分享项目的收入。所有合作的人之间都彼此不具备信任，甚至互不相识。
客户提出了登录页面的设计需求，需要通过简单可行的方式来传递给用户他们提议的价值。Colony 是一个复杂的产品，所以这里的核心任务是帮助用户理解它是如何工作的并且能够从中获得什么好处。在全方位的考虑之后，设计师开始进入设计阶段。
Landing page design
Some may think: if a landing page includes all the possible details about a product, the customers will be more likely to get interested in it. Nevertheless, the major task of an effective landing page is to concentrate users’ attention on the specific offer. It is usually managed via minimalistic visual presentation which is focused on the several UI elements like CTA buttons and application forms.
To create a landing page design with the appropriate central points, the designer has planned the structure of a layout divided into several sections which would prioritize UI elements. An effective visual hierarchy helps people receive the information gradually.
Custom illustrations are often applied in a landing page design as UI components helping users comprehend the idea of a product and its features. So, when the structure of a landing page was chosen, the next task was to find the style for the theme illustrations seen which would be applied in the hero section. To broaden the number of options, graphic designers, Arthur Avakyan and Denis Boldyriev, were engaged in the brainstorming and creative search. The designers experimented with the theme for illustration to show — the Earth with users who collaborate or the heroes in the space accomplishing the super space missions. Here are the results.
登录页设计
一些人可能会想：如果一个登录页包含了产品所有可能的细节信息，那么用户将会更加对其拥有好感。但是，对于一个高效的登录页，其核心任务应该是让用户的注意力聚焦在特定的内容提供上。这常常通过聚焦于类似于 CTA 按钮和应用样式等部分 UI 元素的极简化视觉呈现来实现。为了用合适的中心点设计登陆页面，设计师规划了布局的结构，将其划分为几个部分，这些部分将优先考虑UI元素。一个有效的视觉层级将会帮助用户逐层获取信息。
定制风格插画常常作为 UI 元素被应用在登录页中，帮助用户理解产品的概念及其功能。因此，当登录页的结构被确定后，下一步的任务就是寻找应用在头部核心区域的主题插画风格样式。为了增加可选择的数量，平面设计师，Arthur Avakyan 和 Denis Boldyriev 参与到了头脑风暴和创造搜索的过程中。设计师们尝试用插画的主题来展示 - 用户们在地球上进行合作，或者英雄们在太空完成超级宇宙任务。这成了最终的设计方向。
The designers showed illustrations in different styles and color schemes so that the user interface design combined friendly, approachable and consumer solutions, also transferring the feel of a thoroughly competent product from a company that only accepts excellence. The illustrations were focused on the objective of showing how Colony helps people around the world to communicate and successfully collaborate.
The client has chosen the direction applying the light background and smooth lines as it looked closer to the business style. Considering the chosen direction, Ludmila created the variants of illustrations which would suit user interface elements of a landing page.
设计师展示了不同风格和配色方案的插图，使用户界面设计同时结合了友好、可接近性和用户的解决方案，同时也传递了一家只接受卓越的公司能够完全胜任的产品的感觉。这些插画聚焦于展示 Colony 是如何让全世界的人们去交流并且成功合作的。
客户选择了浅色背景和细线的设计方向，因为这种样式更加贴近于公司的商业风格。根据客户选择的方向，Ludmila 设计了能够适用于登录页面用户界面元素的插画变体。
When the illustrations were presented to the clients, they asked to combine visual presentation of the fourth variant with the idea of users illustrations as in the third picture shown above.
After all the changes were made, we received the final version. UI elements are combined in a harmony with the theme illustrations which show the Earth with users who collaborate at the significant distance. The color palette includes several bright colors — periwinkle color is used as the major one with the pink, yellow, turquoise and violet accents.
当插图给到客户时，他们要求将第四个变体的视觉呈现与用户插图的想法结合起来，如上图所示的第三张图片。
在所有的改变完成后，我们得到了最终的版本。UI 元素与主题插图和谐结合，这些主题插图向用户展示了地球与在相当距离上合作的使用者。色彩上包含了一些鲜艳的色彩 - 以长春花色为主要色调，配以粉色、黄色、绿松石色和紫色等色调。
Features illustrations
The next task was to create custom illustrations for features presentation. To make a holistic landing page design, the features were illustrated in the same style and color palette. The major aim was to present the features in a simple and clear form so that users could quickly comprehend the essence of this product. Also, the illustrations were planned to be followed by microcopy revealing the basic description of the features within one sentence. That’s why the designer worked on the typography which would have suited the graphics and UI as a whole. Let’s see the results.
功能插画
下一步的任务是创造定制插画的功能呈现。为了设计一个整体性强的登录页面，这些功能插画将用同一种风格样式和颜色来实现。核心目标是用简洁清晰的方式来表达功能，让用户能够快速理解产品的本质。同时，还计划在插图后显示一个短句描述，来展示有关功能的基本解释。这就是为什么设计师从事与印刷图形和 UI 整体相适应的排版工作。我们来看一下最终的设计结果。
As you can see, all illustrations have a lot of white space and the subtle elements reflecting the sophisticated principle of the company. Thanks to the colors used in graphics, the interface looks friendly and appealing. Typography components work in a harmony with the graphics and other UI elements.
To make a consistent interface, the designer also created the illustrations for a product story — a brief description of what it is and why people need it. The story is a good way to catch the attention of the potential customers and the beautiful custom graphics increase the chances of the pleasant impression from it. Here are the illustrations created for this aim.
正如你看到的，所有的插画都有大量的留白和精致的元素来反映公司的复杂原则。归功于图形上的用色，整体界面呈现出了友好性和吸引力。文字内容和图形及其他的 UI 元素和谐整合。
为了设计连贯一致的界面，设计师们同时还制作了产品故事的插画，一个有关于这是什么以及为什么人们需要它的简单描述。这个故事是一个非常好的方式来吸引潜在用户的关注，同时，美丽的定制图形也能够提升人们产生愉快印象的机会。下面展示的是有关于这个目的的插画设计。
Token sale page
Colony is a kind of a unique network with its own rules and money. Every colony has its own token. To distribute the ownership, users earn tokens by doing work. The more tokens they hold, the more of the colony they own. Tokens let staking your ownership on your good judgment when proposing tasks or claiming someone should be paid.
To catch people’s interest and inform them about the beginning of the token sale, the client wanted to create a page showing countdown to the special date. The designer applied the same style and colors as in the landing page design to increase brand recognition. The countdown showed days, hours, minutes and seconds which were presented in colorful circles. Here is the final version of the sale page design.
金币销售页面
Colony 是一种拥有自己规则和金钱的独特网络。每一个 Colony 有它自己的金币。为了分配所有权，使用者可以通过完成工作来赚取金币。越多金币的获得，他们将会拥有越多的 Colony。当提出任务或声称某人应该支付时，金币可以让是使用者将自己的所有权建立在自己良好的判断上。
为了吸引人们的兴趣并告知他们金币销售的开始，客户想要创建一个显示倒计时到特殊日期的页面。设计师应用了和登录页相同的风格样式和颜色，来提升品牌的识别度。倒计时将会通过彩色的圆圈来显示日期以及时、分、秒。以下是销售页面设计的最终版本。
The presentation of a new unique product can become a challenge for designers. It’s important to catch people’s attention and show all the facets of the product. The powerful landing page design helps to gain visibility and gather user base even before the product launch as well as tell the story which would interest potential customers.
对于设计师来说，一个全新的特殊产品的呈现将会是一个挑战。吸引用户的注意力和展现产品的全方面至关重要。一个强大的登陆页面设计有助于在产品推出之前获得关注度并收集用户群体，并告诉潜在客户他们所感兴趣的故事。
...
本文翻译来自 Medium
https://uxplanet.org/ui-design-case-study-colony-landing-page-for-collaboration-platform-1247890b364e
原作者：Tubik Studio
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
