詳細解析暗黑系以及情感化設計趨勢
作為設計師,一個視覺感恰到好處的設計往往能讓你一整天保持心情愉快。今天,我們已經收集了一些「暗黑系」和情感化的網站設計,希望將有助於激發你創造一個獨特的氣氛,為你的設計工作。
雖然大多數偏向黑暗主題的設計都有一點「壓抑」的氛圍,但並非所有這些類型的設計都有這種感覺(儘管顏色和你看著它們時的感覺有很大關係)。今天的這個列表不僅僅只是一個趨勢觀點,我們希望它能夠啟發你創造一個屬於你自己的黑暗主題的,富有情感的設計。
1.暗色系
暗色主題的調色板可以立即為設計設定一定的色調。重要的是,你需要明白「黑暗」並不總是意味著黑色,通常是其他的色調(添加黑色)或陰影(添加灰色)。
你可以看看上面的網站設計案例——Hooligan,整體情緒有點陰沉基於偏向黑色的背景,但請注意它真正的主色——深黃偏向於金色的主色經過調整,以適應背景視頻的主題。整體看起來是嚴肅的,但視覺上引人入勝。
2.陰影
陰影可以散發出神秘的色彩。這是設計師使用黑暗主題以及表現情感設計的模式關鍵原因之一,他們希望用戶可以產生興趣和好奇心。
在上面Clear Motion的網站設計上,你肯定會注意到汽車周圍的陰影,幾乎迫使你閱讀在上面的文本信息。為什麼汽車看起來像這樣?什麼是重要的?黑暗的氛圍有助於用戶在觀看的過程中產生好奇心並關注主要的信息。
3.黑色疊加層
黑色疊加層是最常見的創建黑暗情緒的方法之一。但是你選擇的那種黑色事實上可以賦予它更多的意義。顏色需要更深還是更透明?用戶可以通過覆蓋層看到多少圖像或背景上的內容?
較暗同時設置較少透明度的疊加層幾乎可以掩蓋背景中的內容,因此它不是設計的中心部分。更透明的黑色疊加層允許視覺通過主要內容,並獲取背景中的一部分內容,同時提供與諸如文本或行動的調用等主要元素的對比。
以上FHOKE的案例中,就將這項技術運用的很好。你可以看到背景視頻中的動作,但是真正的焦點是標題和滾動動作。
4.「裸」元素
這是一個將元素完全不加修飾的呈現在視覺上的一項技巧,以一種更鮮明的設計創造了一種虛無感,幾乎迫使用戶更深入地了解它。再一次,黑暗主題以一種新的方式創造了一個用戶想要解決的謎。
Dubois雖然在背景的設計上並沒有過於鮮明,但卻創造了這種奇妙的感覺。點的模式實際上有助於創建設計的神秘感。仔細看看,其中一些點的設置微妙的形成了一種視覺提示。
但是,設計的目的是迫使眼睛注意到文本信息,大多數用戶在屏幕上不熟悉的位置。品牌信息和主要的標題一般都是在第一個滾動接近底部的位置,而不是在設計的上半部分。
5.排版選擇
上面的網站設計案例Punk is Not Dead可能會讓你立刻感覺到一些東西。高度視覺化,並在站點中提供了音頻元素,會讓你感覺到你以某種方式和「朋克」間接的存在聯繫,這會讓你興奮嗎?
黑暗的背景和明亮的強調色提供了很大的幫助,但真正的情緒其實設置在排版的選擇上。字體銳利、粗糙的邊緣和幾乎令人討厭的可讀性會影響你在觀看它時的感受。
結果很有趣,儘管在閱讀上存在一定的困難,但在整體的感覺上很好的突出了主題和情感。
6.黑與白
當一個設計完全缺乏色彩時,你會有什麼感覺?如果它主要是黑色和白色的色調,但是其中又混有一些其他額顏色呢?
儘管黑白風格的設計不能很好的給人一種戲劇性的感覺,但是作為黑暗的設計,它可以很有趣。通過不同的顏色和區域的對比,他在視覺上可以很強烈。
它可以使用戶的注意力集中在設計上,並不干擾用戶移動到不同的元素上。注意力將會先在最大的黑白圖像上停留,然後再過渡到所有其他雜誌風格的塊,這裡沒有實際上可以讓你停留很長時間的塊,所以你需要決定。
儘管這種感覺會給人有點信息過載的體驗。
7.形象
Jimmy Chin在其「關於我們」的網頁設計中通過一個精雕細琢的男性肖像的刻畫,給人一個初步的印象。這就是黑暗、黑白圖像應該做的。
你選擇的顏色,燈光和照片的使用將有助於整體設計的情感表達。在這個案例中,結果是黑暗和強大的,想像一下,如果他穿著柔軟的黃色襯衫和石灰綠褲子,用戶在觀看的時候在感情上會大不一樣。
該圖像是設計者有意設計的,並以此與用戶建立了鮮明的情感聯繫。
8.黑暗中帶著「明亮」的心情
雖然我們在這裡看過很多有關情感化的設計,但黑暗並不一定等同於黑色的情緒。黑暗的審美實際上會產生一種輕鬆而充滿活力的感覺,這都需要根據你設計的元素來統一建立起來的。
Atom在其網站設計中使用了較暗的背景,但亮點在於它通過卡通風格的人物來設置一個視覺上既有趣又黑暗,但情緒輕鬆的環境。明暗並置創造了一種獨特的視覺奇觀,但並不會使用戶感到不舒服。
設計和用戶之間較輕的整體情感連接在感覺上更值得信賴,更不引人注目,這可能會讓你感覺更舒適。
總結
你喜歡帶有鮮明情感的設計嗎?
這種技術可以適用於某些特定類型的項目,但對其他類型來說可能會是糟糕的體驗——請注意,在這個集合中沒有電子商務類型的網站。更黑暗、更陰暗的主題是神秘而有趣的,但它們並不總能向用戶傳達可信度和信任。
它可以是一個微妙的平衡,這就是為什麼你經常看到黑暗的主題更經常與作品類型或信息展示類網站設計相互配合的原因。
圖文來自:design shack
由深圳網站建設公司-Clh翻譯編輯整理
※Pete Majarich簡約風電影海報設計
※Photoshop鼠繪時尚逼真的美女頭像
TAG:學習PS |