美觀實用的落地頁在成功的網(wǎng)絡(luò)營銷活動中發(fā)揮著至關(guān)重要的作用。它作為一個特殊的產(chǎn)品和服務(wù),能幫助用戶快速專注的找到所需的信息。一個高效的落地頁能吸引訪問者的注意力,使其不斷轉(zhuǎn)化成目標(biāo)用戶。為了更好的展開工作,根據(jù)目標(biāo)用戶偏好來創(chuàng)建一個落地頁非常重要。
任務(wù)
設(shè)計插畫風(fēng)格的數(shù)字協(xié)作平臺的落地頁。
創(chuàng)作過程
該客戶是來自倫敦的英國公司Collectively Intelligent Limited,一家名為Colony的數(shù)字協(xié)作平臺的策展人。該平臺幫助世界各地的人們在線共同建立公司。盡管社區(qū)團(tuán)體并不認(rèn)識它的合作對象,更不存在彼此信任的親密關(guān)系,他們?nèi)钥梢赃M(jìn)行項目合作,互動協(xié)作,共同管控資金,并分享項目收入。
客戶提出了一個落地頁的設(shè)計需求,以簡單和平易近人的方式傳達(dá)他們的價值理念。Colony是一個繁瑣復(fù)雜的產(chǎn)品,所以主要任務(wù)是幫助人們了解它是如何工作的以及從中獲得哪些好處。在考慮了所有要素之后,設(shè)計師開始了他的創(chuàng)作。
落地頁設(shè)計
有些人可能會認(rèn)為:落地頁應(yīng)該包含關(guān)于產(chǎn)品的所有細(xì)節(jié),客戶才更有可能對其產(chǎn)生興趣。然而,有效落地頁的主要任務(wù)是將用戶的注意力集中在具體的報價上。可以通過抽象的視覺呈現(xiàn)來把控頁面風(fēng)格,將視覺重點集中在CTA按鈕和應(yīng)用程序表單等幾個UI元素上。
為了使落地頁能夠切合實際的關(guān)鍵點,設(shè)計師已經(jīng)按照UI元素的優(yōu)先順序?qū)㈨撁鎰澐殖蓭讉€部分,并做出了整頁的結(jié)構(gòu)規(guī)劃。有效的視覺層次結(jié)構(gòu)有助于人們逐漸接收信息。
自定義插圖通常應(yīng)用于落地頁設(shè)計中,作為UI組件幫助用戶理解產(chǎn)品和功能。因此,定好落地頁的結(jié)構(gòu)之后,接下來的任務(wù)就是找到適合注意的插圖風(fēng)格,這些風(fēng)格將應(yīng)用于頁面的主體部分。為拓寬選擇范圍,平面設(shè)計師Arthur Avakyan和Denis Boldyriev參與了頭腦風(fēng)暴和創(chuàng)意搜索。設(shè)計師嘗試了2種插圖主體:地球與合作用戶之間的關(guān)系和宇宙英雄完成超級太空任務(wù)。結(jié)果如下:
插畫風(fēng)格由Ludmila Shevchenko提供
插畫風(fēng)格由亞瑟Avakyan提供
插畫風(fēng)格由Denys Boldyriev提供
設(shè)計師展示了不同風(fēng)格和配色方案的插圖,與界面和諧的結(jié)合在一起,同時在用戶解決方案種傳達(dá)了該平臺只接受卓越的公司進(jìn)行優(yōu)秀產(chǎn)品合作的理念。插圖著重闡述了Colony能夠幫助世界各地的人們進(jìn)行交流并達(dá)成成功合作的理念。
客戶選擇了應(yīng)用淺色背景和流暢線條的風(fēng)格,因為它看起來更接近商業(yè)風(fēng)格。根據(jù)客戶的選擇,Ludmila創(chuàng)建了適合落地頁面UI元素的插圖延展方案。
全球鏈接
連接地球
太空任務(wù)
普遍連接
當(dāng)插圖呈現(xiàn)給客戶時,他們要求將第四個延展方案的視覺呈現(xiàn)與用戶插圖的想法結(jié)合起來,如上圖所示的第三張圖片。
所有更改完成后,我們得到最終版本。用戶界面元素與主題插圖相結(jié)合,這些主題插圖向用戶展示了地球與遠(yuǎn)程合作用戶間的關(guān)系。配色上選用了幾種鮮艷的色彩,長春花色為主色,粉紅色,黃色,綠松石和紫色為輔助顏色。
特色插畫
接下來要做的是根據(jù)功能來創(chuàng)建插圖。為了使著陸頁有整體性,這些功能會采用相近的樣式和顏色來表達(dá)。主要目標(biāo)是以簡單明了的形式展示這些功能,以便用戶能夠快速的理解產(chǎn)品。另外,插圖下面將會顯示解釋說明文案,因此設(shè)計師需要將插畫與UI整體風(fēng)格相搭配來完成排版。讓我們來看看結(jié)果。
正如你所看到的,所有的插圖都用很大的留白搭配微妙的元素,來反映公司復(fù)雜的構(gòu)成。整個界面的插畫顏色搭配給人以友善、吸引人的感覺。字體組件也起到了很好的配合作用。
為了形成一致的界面,設(shè)計師還為產(chǎn)品故事創(chuàng)建了插圖 - 簡要說明它是什么以及人們?yōu)槭裁葱枰?。這個故事是吸引潛在客戶注意力的好方法,美麗的特色插畫給人以愉悅的感覺。以下是為此目的而設(shè)計的插圖。
金幣銷售頁面
Colony是一個擁有自己的規(guī)則和金幣的獨特的互聯(lián)網(wǎng)絡(luò)。每個colony都有自己的標(biāo)志。為了分配所有權(quán),用戶通過工作賺取金幣。他們擁有的金幣越多,他們擁有的colony就越多。當(dāng)你發(fā)起任務(wù)或要求他人支付時,你將根據(jù)你良好的判斷來決定金幣的所有權(quán)。
為了吸引人們的興趣并告知他們金幣銷售已經(jīng)開始,客戶想要創(chuàng)建一個顯示特殊日期倒計時的頁面。設(shè)計師要用與落地頁設(shè)計相同的風(fēng)格和顏色來提高品牌認(rèn)知度。設(shè)計倒計時的時候,要用彩色的圓圈來顯示日期以及時、分、秒。下面是銷售頁面設(shè)計的最終版本。
展示一種新穎獨特風(fēng)格的產(chǎn)品可能成為設(shè)計師的挑戰(zhàn)。重要的是吸引人們的注意力并展示產(chǎn)品的所有特點。強(qiáng)大的落地頁設(shè)計有助于在產(chǎn)品推出之前獲得知名度,收集用戶群,并把潛在客戶感興趣的故事講給他們聽。