簡單的網頁設計技巧,以取得良好的效果

已發表: 2020-12-17

有無數種設計網站的方法。 考慮到這一點,也有無限的方法將其弄亂。 有兩種主要方法可以避免進入第二類–學習設計基礎並相應地應用它們。 您還需要足夠的經驗,以了解什麼有效,什麼無效。

所有設計師都採用不同的學習途徑,並且通常處於其旅程的不同階段。 如果您正在閱讀本文,希望您也正在嘗試進一步改進工作並產生更好的設計。

不幸的是,沒有辦法將所有需要的知識放入1500個單詞。 相反,我們僅針對一些技巧,使您重新考慮如何使用UX / UI元素。 理想情況下,這種思維方式也可以應用於設計工作的其他領域。

從對產品/站點的充分了解開始

當您不完全了解內容/網站時,進行設計非常困難。 現在,您不必為了學習醫學網站而學習醫學,這不是目標。 但是,您應該知道用戶將如何訪問他/他可能需要的任何信息。

如果您想設計一個音樂製作應用程序,首先應該抓住一些現有的應用程序,與它們一起玩耍以使他們對它們有一種感覺,了解其背後的理論以及某些元素的功能。

理想情況下,您應該與客戶一起工作,客戶也應該非常參與該項目,並希望幫助您為他們的用戶實現更好的UX。

但是,如果您對網站的內容及其解決的問題缺乏基本的了解,則可能會削弱用戶體驗,或者強迫自己遵循現有的解決方案,然後重新設置外觀(有時可以使用)。

對於網站,您應該將站點地圖放在前面,以便進行正確的導航並確定哪些元素適合某些目標網頁。 如果您進行“巧克力工廠”設計,則可以直觀地展示其製作過程或進行信息轉儲。 這完全取決於站點的目標。

所有這些信息都是您事先需要的,以便獲得更高的成功率。 考慮到這是多麼複雜,如果您是初學者自由設計師,可能會遇到這種情況,因此最好從一開始就提出很多問題。 如果您在團隊中工作,請不要忘記與團隊成員就內容,UX,目的等方面進行協商。

設計特定的技巧和竅門:

現在,讓我們看看可以在下一個設計中使用的一些特定的UI / UX技巧:

1 –對比!

弄亂網站上的對比非常容易。 找出經驗不足的設計師的快速方法是檢查整體對比度。 請參閱以下示例:

設計特定的技巧和竅門

資源

看到文字無處不在嗎? 具有白色文本的綠色按鈕,淺灰色的文本? 讓我們將其與更具對比性的UI進行比較:

設計特定的技巧和竅門對比

資源

字體的很大一部分是黑色(或接近黑色),而不太重要的信息則稍微偏灰。 綠色較暗,現在允許在頂部顯示白色文本。

這裡的提示是–當您處理文本時,請以黑底白字或黑底白字開頭。 當您添加更多元素並且需要按照視覺層次進行分隔時,請嘗試首先加粗或更改字體大小。 只有在那之後,如果它不起作用,就會進行顏色更改,但理想情況下,色差不得超過30-40%(通常將不透明度設置為70%)。

2 –一致的空格

另一個常見的錯誤是元素之間的間距不一致。 實際上,這種情況是如此普遍,以至於大多數設計師經過多年的努力仍在為此苦苦掙扎,這是可以理解的–我們用鼠標移動盒子。 輕鬆滑動一下並將其向側面移動一兩個像素很容易。 否則您可能還沒有很好地訓練自己的眼睛,無法直接發現這種差異。

在下面的示例中,查看不同組件周圍如何具有不同的空白。 有些雜亂無章,有些間隔很大。 它在視覺上看起來不太連貫。

設計技巧空白

相比之下,這是一個示例,其內容/組件類型或多或少地相似,但外觀更加一致:

設計技巧和竅門

資源

有多種方法可以實現此目的,但是在大多數情況下,僅靠測量是不可行的。 當您查看它時,通常是一種“感覺”。 它看起來平衡嗎? 如果您有盒子,可以隨時測量側面的30px,標題下的30px,字幕下的15px等。這是一個好方法! 但是,對於較大的視覺元素(如標題或圖像),您可能需要增加一點以彌補較重的元素。

3 –顏色

好的設計的另一個基本組成部分。 顏色必須配合良好。 訪問網站的一種簡單方法是堅持單一原色,並使其餘單色保持單色。

下面的示例遵循了到目前為止的所有三個建議-良好的對比度,平衡度和顏色的使用:

設計技巧顏色

資源

一種簡單的從顏色開始的方法是遵循https://colorhunt.co/等網站上的一些受歡迎的配色方案,或者從Dribbble獲取靈感以進行組合。 使用色輪有助於確定組合,但是設計師通常需要一點額外的努力來確定最佳組合。 色輪通常無法產生出完美的色彩來應用到設計中。

來自Adobe色輪的示例:

土坯色輪

資源

中間是不錯的綠色,但在左側/右側很難使用結果。

4 –在整個網站上堅持一種風格

建立網站的感覺是設計師的主要工作之一。 儘管“漂亮”的概念很難定義,尤其是因為人們通常對好的和壞的看法不同。 。 不必擔心這一點,而要關註一致性並堅持使用樣式。

這意味著什麼? 好吧,讓我們設計一個按鈕。 我們設置字體大小,字體,顏色,背景,間距等。結果如下:

按鈕設計實例

現在,如果我們要添加圖像和標題,我們可以實現以下目標:

堅持風格

看角落。 所有完美的90度拐角,無圓角。 現在,這意味著我們的設計將主要跟隨尖角。 如果圖像也具有這些完美的角落,則看起來更加一致。 就像我們添加輸入一樣,它們都將具有這些更尖銳的角。 讓我們再添加一個元素:

網站樣式網格框

我們在右上角和左下角添加了一個網格框。 這些本來可以是圓形,但是為了保持鮮明的外觀,我們將它們設置為正方形。 在整個站點上應保持相同的想法。 如果您開始更改元素,則可能會開始失去它的感覺,從而導致設計不一致並削弱品牌。

這是上面相同的設計,但具有圓形外觀:

堅持風格的圓形按鈕

一樣,但是現在感覺卻大不相同。

5 –組件設計

所有現代設計工具(例如Figma和Adobe XD)中都存在組件。 它們存在的理由非常充分-開發人員以盡可能重用它們的方式來實現站點。

如果您創建與上述元素類似的元素,則只需將其“複製”粘貼到另一頁上,它將簡單地起作用。 無需再稍有差異地對其進行編碼。 作為設計師,理想情況下,您希望以類似的方式重用組件。

如果您製作的主頁上連續有3個帖子,也許您可以重複使用主頁上的同一帖子。 這樣可以節省您的時間,節省開發人員的時間,並使設計與用戶保持一致。

組件設計

資源

想像一下,您正在執行部分標題。 如果您需要有8個帶標題的部分,您是否會每次都設計它,還是會復制粘貼? 理想情況下,您想重用它。 但是,如果您必須將其從居中更改為左對齊該怎麼辦? 也許改變一點大小,也許改變顏色? 提示是嘗試而不是這樣做。 盡量保持原樣。 如果您確實需要其他視圖(除了左對齊/居中/右對齊),請嘗試僅進行一種更改。 沒有五個或十個。

本節標題示例

DevriX的示例

綜上所述:

為了獲得良好的結果,您需要深入了解設計基礎,例如顏色,對比度,空白,平衡,視覺層次,順序等。 當您考慮到這一點並專注於可用性,一致性和样式時,即使這不是“哇!” 設計上,它在各個方面都將穩固並發揮良好的作用,從長遠來看,通常可以為品牌帶來更好的效果。