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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容