極簡主義網站設計的案例 - 金沙設計 SUMAART

極簡主義網站設計的案例

By:limo- 2019-10-25 02:39:35

極簡主義網站設計是一門被低估的藝術,我們都聽過“少即是多”的說法,但這是一個說起來容易做起來難的原則。隨著技術的進步為網站設計開闢了新的更多可能性,越來越難以抗拒新增一些花哨的裝飾。


極簡主義的網站設計有利於使用者更快的載入時間和更好的匹配螢幕尺寸之間的相容性。更重要的是,一個簡單的UI設計與移動瀏覽相協調,不會損害桌面或使用者體驗。


極簡主義哲學的核心思想是必須圍繞內容進行網站設計的,在網站術語中,設計人員從粗糙的內容開始,然後構建足夠的使用者介面來確定他們的目標並輕鬆地導航到它。


頂部CSS動畫的例子,以及如何編碼他們


極簡主義美學是這種哲學的視覺表現,極簡主義的設計使用了大量的白色,或者至少是統一的顏色、空間,但不要把簡潔和無趣混為一談。你必須小心選擇你的頁面佈局,否則你有限的調色盤設計元素會給人沉悶而不是優雅的印象。


下面,我們收集了我們非常喜歡的極簡主義網站設計,希望能給你的極簡網站設計帶來靈感。


01、HalloBasis



這個網站只是用一些超大的元素來陳述

(圖片來源:HalloBasis)


杜塞爾多夫設計工作室以能夠很好地代表客戶進行專案溝通而自豪。這個WordPress網站作為工作室的線上投資組合網站,是一個與眾不同的極簡主義網站設計的光輝典範。


由於其超大的美學效果,該網站用很少的元素做出了一個大膽的宣告,這增加了輔助訪問的額外好處。事實上,你可能會認為你選擇的瀏覽器的縮放功能已經達到極限,這是可以理解的,比如標題寬度為770px,字型大小為17.5vw。所以在排版上,它很大,墨西拿Sans字型適合它的粗大和可讀性。真正令人耳目一新的是,這既適用於導航連結,也適用於接受cookie的自定義GDPR提示,使用主螢幕上的按鈕在德語和英語翻譯之間切換也很容易。


02、爵士樂調頻



這個由Anagrama設計的設計使事情變得簡單和引人注目

(圖片來源:Jazz FM羅馬尼亞)


這個位於布加勒斯特的廣播電臺色彩豐富的網站在讓音樂自己說話方面做得很好,乍一看,Anagrama的“爵士調頻羅馬尼亞”(Jazz FM Romania)只是邀請遊客通過一個三角形的播放按鈕觀看現場直播,該按鈕佔據了一半的視區。我們得到了一個標誌和現在播放的軌道顯示,但它是最低限度的引人注目的黑色對黃色的方案。這只是標題,然而,單一,長頁結構繼續與更多的活力看-儘管總是與模仿性的網站設計在腦海中。


最值得注意的是,有大量漂亮的“爵士”SVG插圖,當然,無論您的螢幕大小,這些插圖都具有驚人的清晰度。版式再次走大,感謝節省經濟的文字,主要是標題標籤詳細說明在其他地方爵士樂調頻可以享受。其他有趣的功能包括一個乾淨和明確的七天時間表,滾動調頻調諧器tickertape,甚至一個爵士音樂節指南。


03、超級手語



這個站點提供了一個問題的解決方案,而沒有反覆強調資訊


根據其無障礙的理念,優步建立了一個網站,專門教授客戶基本的手語,這樣他們就可以與聽力受損的司機互動。優步手語是一個有節制的設計大師課程。它通過簡短的視訊向用戶展示如何簽署簡單的常用短語(是、否、左轉等),甚至他們的名字。幾乎沒有抄本,也沒有解釋;內容不言自明,證明你不需要巧妙的詞語來捕捉重要的品牌資訊。


04、Evoulve



精簡的元素和神奇的動畫創造了一種發現的氛圍


Evoulve是一家致力於將新興技術轉化為可行產品的公司,螢幕上的元素非常少:簡單的文字註釋和非常少的導航選項,背景是緩慢旋轉的地球和星空。然而,每一個都是精心製作的,微妙的CSS動畫增強了魔法的感覺,創造了一種發現的心情。


05、修補




這個手錶零售網站的使用者介面被簡化為最基本的


Tinker是一個手錶品牌,它有一個簡單的概念:顧客可以選擇錶盤大小、錶帶顏色和金屬的任何組合。沒有不必要的功能或細節。公司網站的使用者介面明確了這一概念;使用者可以從有限的選項中輕鬆地選擇理想的組合。


06、Leen Heyne



珠寶商把觀眾的目光引向了它的網站


除了珠寶,Leen Heyne的單色logo和公司名稱是主頁上唯一重要的視覺元素,周圍廣闊的空白讓使用者的眼睛很容易被產品吸引。


07、我們不是塑料



對比在這裡產生了興趣


對比是保持極簡設計有趣的另一個有用的視覺策略,德國UX工程師Roland Losslein的網站We Ain't Plastic在中心圖片和上面的文字和圖示之間建立了一個鮮明的對比。


08、Nua Bikes



Nua Bikes平衡其主頁上的元素


Nua Bikes’site是極簡主義的,因為在螢幕上實際上有很多元素。然而,通過壓縮文字和最大化空白,該公司能夠將注意力吸引到其產品——自行車上。


09、Sendamessage.to



這個網站有一個明確的目的


有趣的,如果可能是愚蠢的,傳送資訊。讓人們通過手勢來定製給朋友的資訊,貧瘠的黑色背景為主影象和文字中粗體的白色字母增添了力量。


10、Maaemo



大氣視訊設定場景


米其林三星級的挪威餐廳Maaemo的網站用極簡主義來營造一種階級感,視覺處理對於講故事來說是完美的,正如網站展示的菜餚製作的高清照片。


11、艾娃



與艾娃交談


這個科幻驚悚片《機械姬》的宣傳網站的黑白配色方案和排版的一致性保持了文字的焦點,與電影明星AI機器人Ava的互動對話。


12、Symbolset



色彩變化的背景活躍了這個極簡主義的網站

(圖片來源:symbolset.com)


圖示字型供應商Symbolset通過最小化競爭元素並新增色彩鮮豔、不斷變化的背景,將人們的注意力吸引到網站設計的中間互動區域。