這3個設計趨勢是網頁設計師的最愛

今年所流行的設計趨勢中絕大多數的都和字體排版有著密切的關聯

哪怕到了年底最後一個月,設計師們都愈加傾向於使用漂亮的字體和出彩的排版讓自己的設計脫穎而出。

在最近這段時間新湧現的網頁設計作品當中,高度可讀的、視覺突出的排版設計是它們共通的特點。

當他們想要時髦的視覺設計的時候,依然會選擇可讀性較高的字體進行排版,而真正創造視覺奇觀的,依然得倚靠最新的設計技術本身。

1、只包含文字的全螢幕

雖然很多網站會在全螢幕選擇使用圖片來吸引用戶,但是使用文本內容同樣也是可行的。

不過,想要將文本內容作為全螢幕內容的主體,設計師還要用好留白才行。運用這一趨勢的關鍵點在於,要為用戶提供有意義的文本內容,要讓用戶覺得有價值。

那麼,怎麼做到這一點呢?

  • 從關鍵詞入手。關鍵詞能夠體現內容的目標性和價值主張,能夠告訴用戶你能給他什麼,以及為什麼你的網站內容很重要。
  • 選擇一款簡單的字體,它最好和正文文本的情緒、風格保持一致。
  • 如果文本內容較少,那麼可以試著選取一些有表現力的字體。
  • 用好留白。在下面的每個案例當中,文本週圍都有足夠的留白確保排版的呼吸感。
  • 留白能夠確保用戶在瀏覽的時候,注意力集中到文本內容上。留白能夠很好的平衡文本佈局,如果你不想將文本居中排布的話,就像 Design Ups 這個網站。
  • 使用色彩來提升你的設計的吸引力。明亮的色彩能夠更加吸引用戶參與到設計當中來。
  • 色彩還能更好地營造氛圍,傳遞情緒。

當你在設計一個文本內容較重的網站的的時候,不要強行讓文本填充滿螢幕,因為你是不可能將其填滿的。

借助色彩和色塊來豐富佈局,就像 Less is More 和 Types of Type 這兩個網站一樣。

設計趨勢網頁設計師最愛範例圖

設計趨勢網頁設計師最愛範例圖

設計趨勢網頁設計師最愛範例圖

2、用白色區塊承載文本

必須承認,如今的許多網站在視覺設計上已經做的很突出了,包含元素極為豐富,加上豐富的響應式斷點和大膽的配色,訊息量近乎爆炸。

也正是因此,有設計師開始在大量的元素當中開闢出白底的區塊,用來承載單純的黑色的文本內容。

這種設計讓文本內容有著較強的可讀性,無需擔心複雜的背景色和變化。

聽起來這種技巧挺偷懶的,甚至有點馬虎,但是它設計得當的話,效果其實是非常出彩的。

白色的區塊在尺寸上要設計得足夠合理,以承載一定量的文本,如果頁面還要考慮移動端的情況的話,這個區塊可能需要針對移動端進行合理的定製,比如在移動端設備上打開的時候,文本框內的內容將會在圖片下方的區域單獨顯示,而非和桌面端上那樣混排。

不要試圖在移動端螢幕上呈現這樣的文本框,因為最終很難讓圖片和文本框疊加顯示在同一個區域。

下面的每個案例都合理地使用白色區塊來承載文本內容。

Do Space 這個頁面將白色區域設置在圖片底部,確保圖片絕大多數的部分能夠被用戶清晰地看到。

白色的區域和圖片下方的留白連到一起,視覺上兩者產生的關聯,讓用戶在瀏覽的過程中下意識地想去繼續瀏覽下方的內容。

設計趨勢網頁設計師最愛範例圖

HowIt 這個網站在設計白色的區塊的時候,並沒有採用傳統的矩形,而是將這個區域設計成了一個不規則的圓形。

這種風格的白色區塊和整個背景元素的風格基調是保持一致的,看起來融入感很強,不會顯得突兀。

白色區塊上的文本並沒有採用普通的黑色,而是和背景的手繪插畫採用了相同的展示性字體和紫紅色的文本。

這使得前景和背景的元素產生了關聯。

設計趨勢網頁設計師最愛範例圖

Macaulay Sinclair 擁有比其他網站更多的文本需要白色的區塊來承載。

白色區塊後的背景幾乎沒有傳遞任何有用的訊息。

設計趨勢網頁設計師最愛範例圖

3、字體剪貼蒙版

文本字體中可以填充各種各樣的東西,並沒有規定字體中只能填充單一色彩。

許多設計師開始在文本字體中填充圖片,營造出類似Photoshop 中剪貼蒙版的效果。

這種效果的玩法其實並不少,它可以是靜態的也能動態展示。

少量的視覺訊息透過字母輪廓呈現出來,這些視覺訊息可以圖片,也能是動態的視頻,還可以是在背景固定不動,隨著滾動前景的文字上下移動,等等等等。

這種設計的訣竅在於字體的選取。

所選取的字體必須足夠厚重,才能讓其後的圖片訊息更多地呈現出來。

筆觸太細或者太窄的字體,所能提供的訊息不足,往往顯得侷促而奇怪。

這種設計手法還要注意一點,就是單詞和字母的數量要儘可能少,這種情況下,視覺效果其實是最好的。

字母數儘量控制在10個以內,單詞數不要超過3個,如果是中文實際效果會非常贊。

Danbury 這個網站在前景使用明亮的色彩,文本中透出的圖片則採用了色彩深沉的照片,構成了顯著的對比。

設計趨勢網頁設計師最愛範例圖

Fusion Winery 這個網站沒有使用靜態的背景,而是讓背景視頻透過字體呈現出來。

這種設計的優秀之處在於它營造出了清晰直觀的三個層次:產品圖下是白底,而視頻透過白底呈現出來,有靜有動。

設計趨勢網頁設計師最愛範例圖

而 Kaneko 這個網站的設計則略有不同,它使用了難以分辨細節的背景,透過字母你其實很難分辨其中的細節和內容。

但是,色彩的加入,讓整個設計顯得有趣而活潑,同樣非常吸引人。

設計趨勢網頁設計師最愛範例圖

結語

排版和文本始終是設計當中最關鍵的組成部分,和它們相關的設計趨勢能夠流行起來,是一件很自然的事情。

另外一方面,它們也影響著圖片、視頻等其他元素在設計中所呈現出來的效果,設計和趨勢的連帶作用,其實也是不容忽視的。


【想讓你的網站比其他人優秀嗎?這些設計趨勢一個都不要錯過!】

1.9種讓你的網頁很專業
2.預測2018網頁設計趨勢
3.2018年手機應用UI設計趨勢
4.這9種方法讓你網頁視覺設計深入人心
5.高手進擊懶人包影片-設計師與開發者推薦的精選影片


給你最好的網頁設計Gogoshark


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化