UI设计案例研究:Colony—协作平台落地页

美观实用的落地页在成功的网络营销活动中发挥着至关重要的作用。它作为一个特殊的产品和服务,能帮助用户快速专注的找到所需的信息。一个高效的落地页能吸引访问者的注意力,使其不断转化成目标用户。为了更好的展开工作,根据目标用户偏好来创建一个落地页非常重要。


任务

设计插画风格的数字协作平台的落地页。

创作过程

该客户是来自伦敦的英国公司Collectively Intelligent Limited,一家名为Colony的数字协作平台的策展人。该平台帮助世界各地的人们在线共同建立公司。尽管社区团体并不认识它的合作对象,更不存在彼此信任的亲密关系,他们仍可以进行项目合作,互动协作,共同管控资金,并分享项目收入。

客户提出了一个落地页的设计需求,以简单和平易近人的方式传达他们的价值理念。Colony是一个繁琐复杂的产品,所以主要任务是帮助人们了解它是如何工作的以及从中获得哪些好处。在考虑了所有要素之后,设计师开始了他的创作。

落地页设计

有些人可能会认为:落地页应该包含关于产品的所有细节,客户才更有可能对其产生兴趣。然而,有效落地页的主要任务是将用户的注意力集中在具体的报价上。可以通过抽象的视觉呈现来把控页面风格,将视觉重点集中在CTA按钮和应用程序表单等几个UI元素上。

为了使落地页能够切合实际的关键点,设计师已经按照UI元素的优先顺序将页面划分成几个部分,并做出了整页的结构规划。有效的视觉层次结构有助于人们逐渐接收信息。

自定义插图通常应用于落地页设计中,作为UI组件帮助用户理解产品和功能。因此,定好落地页的结构之后,接下来的任务就是找到适合注意的插图风格,这些风格将应用于页面的主体部分。为拓宽选择范围,平面设计师Arthur Avakyan和Denis Boldyriev参与了头脑风暴和创意搜索。设计师尝试了2种插图主体:地球与合作用户之间的关系和宇宙英雄完成超级太空任务。结果如下:


插画风格由Ludmila Shevchenko提供


插画风格由亚瑟Avakyan提供


插画风格由Denys Boldyriev提供

设计师展示了不同风格和配色方案的插图,与界面和谐的结合在一起,同时在用户解决方案种传达了该平台只接受卓越的公司进行优秀产品合作的理念。插图着重阐述了Colony能够帮助世界各地的人们进行交流并达成成功合作的理念。

客户选择了应用浅色背景和流畅线条的风格,因为它看起来更接近商业风格。根据客户的选择,Ludmila创建了适合落地页面UI元素的插图延展方案。


全球链接


连接地球


太空任务


普遍连接

当插图呈现给客户时,他们要求将第四个延展方案的视觉呈现与用户插图的想法结合起来,如上图所示的第三张图片。

所有更改完成后,我们得到最终版本。用户界面元素与主题插图相结合,这些主题插图向用户展示了地球与远程合作用户间的关系。配色上选用了几种鲜艳的色彩,长春花色为主色,粉红色,黄色,绿松石和紫色为辅助颜色。


特色插画

接下来要做的是根据功能来创建插图。为了使着陆页有整体性,这些功能会采用相近的样式和颜色来表达。主要目标是以简单明了的形式展示这些功能,以便用户能够快速的理解产品。另外,插图下面将会显示解释说明文案,因此设计师需要将插画与UI整体风格相搭配来完成排版。让我们来看看结果。


正如你所看到的,所有的插图都用很大的留白搭配微妙的元素,来反映公司复杂的构成。整个界面的插画颜色搭配给人以友善、吸引人的感觉。字体组件也起到了很好的配合作用。

为了形成一致的界面,设计师还为产品故事创建了插图 - 简要说明它是什么以及人们为什么需要它。这个故事是吸引潜在客户注意力的好方法,美丽的特色插画给人以愉悦的感觉。以下是为此目的而设计的插图。



金币销售页面

Colony是一个拥有自己的规则和金币的独特的互联网络。每个colony都有自己的标志。为了分配所有权,用户通过工作赚取金币。他们拥有的金币越多,他们拥有的colony就越多。当你发起任务或要求他人支付时,你将根据你良好的判断来决定金币的所有权。

为了吸引人们的兴趣并告知他们金币销售已经开始,客户想要创建一个显示特殊日期倒计时的页面。设计师要用与落地页设计相同的风格和颜色来提高品牌认知度。设计倒计时的时候,要用彩色的圆圈来显示日期以及时、分、秒。下面是销售页面设计的最终版本。


展示一种新颖独特风格的产品可能成为设计师的挑战。重要的是吸引人们的注意力并展示产品的所有特点。强大的落地页设计有助于在产品推出之前获得知名度,收集用户群,并把潜在客户感兴趣的故事讲给他们听。

作者:Tubik Studio

原文链接:https://uxplanet.org/ui-design-case-study-colony-landing-page-for-collaboration-platform-1247890b364e

你可能感兴趣的:(UI设计案例研究:Colony—协作平台落地页)