設計實戰!專業的設計師是怎樣進行著陸頁設計的?

2022-09-21 19:30:10 字數 1824 閱讀 5155

對於著陸頁而言,有趣而吸引人和清晰直觀是同樣重要的屬性。今天的設計實戰,將會為你展現的不僅僅是著陸頁本身的設計,還有專業的著陸頁的設計流程,來自

tubik 的設計師 ludmila shevchenko 將會為你展現著陸頁設計各個階段的具體操作,以及實用的技巧,希望你會喜歡。

專案說明為不同的服務設計著陸頁頁面。

預處理過程客戶對於著陸頁的要求很明確,要求設計獨特,能夠傳達出全新的服務和願景。希望整個著陸頁的設計能夠讓**在同類產品中脫穎而出,對於使用者而言,有著顯著的差別。受此啟發,設計師針對使用者和市場進行了研究和探索,設計師決定巧用色彩和形狀作為設計的突破口,通過尋求不同的組合方式,來完成整個設計。

草稿和線框圖整個工作的起點是

ux線框圖。最開始,設計師構建了幾個簡單的布局,每種布局都有著不同的側重點和優勢。我們將不同的構思和不同的部分構建成為獨立的頁面,通過分析和研究使用者的注意力會集中在哪些資訊上。ludmila

提到,由於整體結構並不包含很多元素,繪製草圖也不會太麻煩。將腦中構思藉由手繪的方法來呈現,可以幫助設計師更好地琢磨和探索整個設計。

在紙上繪製草稿是乙個不斷繪製不斷思考又不斷修改和探索的過程,最終成型的設計方案會使用 sketch 繪製成 ux線框圖。基於任務需求,無論是手繪草稿的探索過程,還是基於不同需求而繪製的線框圖,都可以向客戶展示。

ui設計接下來是比較關鍵的

ui設計的過程了。由於頁面的第一部分,也就是首屏,只包含有公司的名稱、slogan

和引導使用者向下滾動瀏覽的箭頭,所以我們認為這個部分需要創造出乙個色彩明亮、引人矚目的背景。設計師開始試圖將不同的抽象元素排列組合起來,並且做好讓這些元素動畫化的準備。第乙個變體是程式設計客棧基於菱形元素和矩形元素來構建,這些幾何圖形邊緣等距,加入漸變色彩,營造出豐富的層次感。不過,在探索過程中,設計師發現可能柔和的曲線元素會更加友好,一方面是視覺上得以友好度更高,另一方面是它的寓意會更貼合產品。加入動效之後,整個頁面會顯得更加生動。

色彩的選取一直都是整個設計中最有趣的部分。由於是要創造出生動而又具有視覺吸引力的設計,設計師開始尋找漸變色的配色方案。想要專門強調特定的色彩並不容易,因為漸變色通常是多種色程式設計客棧彩共同構成的,在具體的順序和搭配上有著多種變化,需要持續地嘗試和探索。總體上而言,設計師是通過品牌和需求而確定了基礎的四種不同配色方案,再在其中挑選出對比度和協調度都比較高的組合。最終,她所選取出變化比較平穩的漸變配色,將公司的名稱和

slogan 置於漸變色塊的中間位置,控制對比度確保可讀性。

通過之前的探索,確定使用曲線波紋來構建背景圖形。在這樣的專案當中,通過色彩來主導設計是一件很有趣的事情,同樣也是極具挑戰性的任務。至於這個流程,按照

ludmila

的說法,她是在單獨的頁面上進行漸變色彩的組合,仔細調整漸變色的過渡。她將注意力集中在色彩本身的選取上,確保整體的配色是乾淨且富有活力的。

隨後,將這些曲線波紋應用到每一屏,盡量確保一致性和完整性。之後,為每一屏新增必須的 ui 元素。其中,cta按鈕的色彩需要契合漸變色的位置和特點,背景元素則不用完全展示,借助半透明漸變陰影來營造過渡效果,凸顯 cta按鈕。

最後,新增icbhhwu動畫效果,讓各種元素之間的互動和聯絡更加自然。這個環節需要團隊中其他的設計師加入進來,並且協同合作,完成整個設計。

在背景圖形上,設計師嘗試了許多不同的色彩搭配方式,在這個階段,她嘗試了調整色彩、漸變的程度以及不透明度。在這個過程中,控制布局中的對比度是至關重要的任務。

在建立背景的曲線的時候,建議盡量少地使用定位點,同時控制好曲線的平滑度。

至於在控制漸變色彩的時候,設計師特別注意到了冷熱色調的結合,從最終的結果來看,整體上保持了暖色調,營造出明亮和輕快的氛圍,漸變的色彩主要採用了紅橙黃、紫紅粉和青藍漸變。此外,在每一塊色彩的邊緣都需要專門注意,避免過於強烈的對比,保持整體的微妙感。

專業設計師有哪些必知的設計流程

一 設計師如何參與乙個具體的專案 使用者體驗設計首先是要解決使用者的某個實際問題,其次是讓問題變得更容易解決,最後是給使用者留下深刻的印象,讓他在整個過程中產生美好的體驗。因此,使用者體驗設計的目標可以歸納為 解決使用者需求 減少使用者理解和操作的成本 給使用者留下美好而深刻的印象 在具體工作中,為...

什麼是UX設計師,UX設計師面試的6個技巧

面試是乙個過程,可以幫助招聘人員找到合適的人,可以以理想的方式滿足他們的要求。它包括一系列問題和答案,以使對方了解他 她的技能,興趣和態度。有多種方法可以在面試中表現出色,下面列出了一些可以幫助您下次面試的有用提示。什麼是ux設計師,ux設計師面試的6個技巧 1.做好準備 在面試之前,您要做的第一件...

ui設計師技能, 熟練的ui設計師

ui設計師技能,熟練的ui設計師。作為乙個ui設計師,到底應該具備什麼技能,是不是只要可以熟練的應用軟體或者只要具備一定的思維就可以成為乙個優秀的ui設計師呢?很顯然不是,那麼ui設計師應該具備怎麼樣的技能呢,今天就跟我一起來了解了解吧!1 軟體工具的熟練 首先是ps軟體,不管我們是做ui介面還是運...