極簡電子商務網站設計,驚現黃金比例柵格

2021-02-17 設計達人

設計達人

www.shejidaren.com

愛設計,愛分享

在這個網絡時代,大件物品也開始在網絡銷售,所以汽車、家具等行業的也開始重視自己品牌的企業網站設計。今天跟大家分享與家具有關電子商務網站,推薦理由:簡約而不簡單,屬於極簡主義風格的網頁設計作品,在研究該網頁的同時,小編還發現了黃金比例柵格,值得學習。

網頁設計作品由創意總監Daniel Tan製作,該客戶的企業網站主要是銷售一些簡約、北歐風格的家飾、家具類產品,比如坐椅、花瓶、燈具、掛鍾、擺設飾品等等。這些產品的設計都是非常簡約與時尚,所以設計師在設計網頁的時候就要選擇簡約的主題風格,重點突出產品,不帶其它花銷的設計。

設計:Daniel Tan
個人主頁:https://www.behance.net/Daniel_20

一、首頁設計

首先我們來看看整個首頁設計,第一眼給用戶的感覺就是簡約、舒適。在瀏覽網頁時用戶很容易就能分辨出這個網站是做什麼的。首頁結構:1. 焦點BANNER廣告圖; 2. 主打分類(圖片格式);3. 流行產品列表;4. 推薦產品集;5. 引導訂閱。

二、新聞頁&信息列表頁設計

新聞列表頁面使用了左右對稱布局設計,為了不讓頁面過於單一,在列表之後加入了「Our Service」內容來填充。

三、產品頁

產品頁通常由產品列表頁和產品詳細頁組成,我們先來看列表頁的設計。

產品列表頁設計:和大部網站的產品列表一樣,喜歡使用宮格式布局,但這具網頁的難點還是留白的運用。其次我們細心的看一下,列表中的產品圖的背景以及產品排列好像是被設計師「刻意修飾」過,所以最終網站出來的效果可能會因為產品圖的原因會打點折扣。

這種「刻意修飾」小編認為非常有用,為了過稿,不要偷懶,就像下圖展示一樣,每行的產品配色、與排序是經過精心布置的。

四、分類目錄頁面

點擊和首頁的「推薦產品集」的布局是基本一致的,這個布局相當好看,所以必須要研究一下它的柵格系統。

五、黃金比例柵格系統

這麼好看的排列方式,到底是怎麼排版出來的呢?通過分析終於可以看出一些規律,設計師使用了兩種比例柵格系統,分別是黃金比例和鉑金比例。使用這些比例來設計總比「憑感覺」去排列好得多,而且也能讓前端人員有規律的寫代碼。

不知道黃金比例怎麼計算?建議使用黃金比計算工具:
http://www.shejidaren.com/examples/tools/golden-ratio/index.html

使用這個工具的好處就是不用自己計算比例啦,集成黃金比、鉑金比、白銀比等等自動換算。

六、網頁配色

這種極簡網站配色通常越少越好,所以整個畫面都是以黑白為主,但單色調會不會在煩燥?不會,因為還有產品圖片、以及圖片的背景色進行點綴。

購物車畫頁面:

表單設計:

總結

像這樣一個極簡的企業網站設計,看似沒什麼東西,但無論從設計、代碼、以及後期資料維護都是非常複雜的,就看圖片質量要求就知道,每個圖片都是高品質,修圖、輸出透明背景PNG圖,好了不說太多……希望大家有所收穫。

如果喜歡這類的靈感文章,請分享和點讚,後期會分享更多高品質作品給大家學習。

////// END //////

設計公眾號不用多

設計達人為您嚴選精品設計好文、好資源、好靈感

記得設為星標公眾號哦~

只知道 Pinterest/Behance/Dribbble 獲取靈感?

↓↓請打開設計導航,看看更廣闊的天空↓↓

http://hao.shejidaren.com

相關焦點

  • 進口乾貨:網頁設計中柵格的應用(中英文)
    什麼是柵格?柵格組成了一個基本結構,這個結構可以被理解成設計的「骨架」。 通過輔助線條來編排和放置設計中的各個設計元素。 這樣做可以使設計稿有體系地聯繫在一起,同時也保持設計的一致性與合理性。黃金分割(神聖比例)?趁著我們在討論設計中「神奇」的事物,讓我對另一個相關的話題也展開一下:長期以來,人們一直認為使用黃金比例(「神聖」比例)會給人眼帶來一些特殊,令人愉悅的感覺。但目前為止,也有了不少的實驗以充分的理由質疑這些現代化之前的假設。
  • 乾貨:網頁設計之柵格系統
    維基百科對其定義為:柵格設計系統(又稱網格設計系統、標準尺寸系統、程序版面設計、瑞士平面設計風格、國際主義平面設計風格),是一種平面設計的方法與風格。網頁柵格系統是有平面柵格系統中發展而來,以規則的網格陣列來指導和規範網頁中的版面布局以及信息分布。
  • 關於極簡主義設計
    上面的Plastic 這個網站就是一個留白使用的典範。2、用柵格來規整元素柵格系統可以讓簡約的設計更加富有條理。柵格本身就是用來構建規則性,賦予信息和元素以條理和有序感的,在此基礎上,能夠讓元素的邏輯更加順暢。
  • 利用柵格系統,構建優秀的響應式設計
    1958年任《新平面設計》(New Graphic Design)主編1966年被任命為 IBM 的歐洲設計顧問。布羅克曼因他的極簡主義設計與簡潔的排版、圖形和色彩而聞名,他的設計對 21 世紀的眾多平面設計師都產生了重大影響。
  • 人工精選系列:66個優秀網頁界面設計
    圖:星球碰撞概念網站 by @trionndesign圖:互動設計服務網站 by @basita.khan11圖:設計工具類網站 by @lobanovskiy圖:服裝網站設計 by Dawid Tomczyk
  • 【藝術與設計】 黃金比例的藝術設計
    他發現鐵匠打鐵節奏很有規律,這個聲音的比例便被畢達哥拉斯用數學的方式表達了出來,它便是黃金比例。黃金分割是指將整體一分為二,較大部分與整體部分的比值等於較小部分與較大部分的比值,其比值約為0.618。這個比例被公認為是最能引起美感的比例,因此被稱為黃金分割。在設計中,黃金比例可以歸結為美學,創造和激發一種通過比例與和諧產生的美感。
  • Cha.ology日式茶館的極簡設計
    Cha.ology是曼切斯特一家日式茶館,品牌設計力求體現傳統風格的同時做到乾淨、精緻並富有現代氣息,以適應西方市場。
  • 3dmax軟體如何設置柵格並對柵格大小進行修改步驟教程詳解
    3dmax如何進行柵格設置? 在3dsMax中,柵格有著可視化空間、比例和間距的輔助工具對象。本文小編將為大家詳解3dmax設置柵格對柵格大小、柵格線顏色進行修改的步驟與教程。3dmax如何進行柵格設置3dmax設置柵格的步驟與教程如下:步驟一、打開3d max軟體,可看到四個視圖窗口,在窗口的頂邊的菜單工具欄下,滑鼠左鍵,單擊【工具】下的【柵格和捕捉】|【顯示柵格】,這樣就可以在窗口上顯示柵格了
  • 手把手教你做規範:布局規範(柵格)
    好多小夥伴對柵格都是迷迷糊糊的,知道柵格的概念卻不知道怎麼用、為什麼用,每次提到都很頭疼。其實柵格沒那麼難,柵格是是為了輔助設計、減少設計工作量、使設計更理性、更規律的一種方法。
  • 最近設計靈感缺乏?先收藏這20個作品集網站試試...
    Bruno Ferdinandhttp://brunoferdinand.com/Bruno Ferdinand 是一位在字體設計上有著突出技巧的設計師,他的作品集網站中不僅能夠體現他在字體排版上的獨特想法,而且還表現出他近乎強迫症的時尚口味傾向。整個網站的設計簡約,美觀,質樸也令人難忘。識別二維碼進入網站:
  • Logo設計中的黃金比例
    凡是著名品牌都會對Logo非常注重,一般隔個幾年還要更新升級一下(詳情可回復「03」了解那些著名Logo的進化史),今天我們來介紹Logo設計中黃金比例的應用
  • 黃金比例為什麼是「黃金」比例?
    Experiment周五:靈感如泉湧,拼貼…下不去手周六:黃金比例為什麼是「黃金」比例?在藝術設計的領域,比例的運用無處不在。而在產品設計中,眾所周知的「黃金分割」、「黃金螺旋」、「對稱與不對稱」、「正負形」等等比例與分割究竟存在著怎樣的「玄學」?本期主講老師▼
  • Apple 最愛的極簡主義網頁,你也可以設計出來
    極簡主義最初流行於 21 世紀初。如今,大多數流行設計趨勢(比如扁平設計、網站首圖、以及隱藏式全局導航等等)都受極簡主義直接影響。Google 常被稱為極簡主義網頁界面的先驅者。自上個世紀 90 年代的測試版開始,極簡主義一直都是其界面設計始終不變的遵循規則。
  • 大自然美麗設計的秘密,黃金比例結構圖形
    「大自然美麗設計的秘密在我眼前展現了出來。我畫的都是手工的。我不用電腦,只有鉛筆,指南針和量角器。」 Rafael Araujo 使用傳統工具精心繪製符合黃金比例的複雜結構,他的《黃金比例著色書》,記錄了他在過去40年中磨練的設計過程。 作品展示
  • 留白之美:UI設計中的極簡主義
    作為目前比較主流的設計風格,極簡主義設計常常被我們津津樂道,而簡約並不是簡單,極簡主義設計的大量留白也並不是空在那裡。Merriam-Webster詞典對於極簡主義設計的解釋是「在音樂、文學和設計領域中以極其平衡簡潔而著稱的一種風格或技術」。而現在,如建築、藝術、攝影、文學、音樂再是UI設計,隨處可見極簡主義設計,可見其應用的廣泛程度。
  • 20個作品集網站,UI設計師拿高薪的秘笈!
    許多設計師在創建自己的作品集網站的時候,會儘量將最新的設計技法和設計趨勢融入進去,在這個逐步炎熱起來的五月份,我們在許多新的設計師作品集當中,看到了一些有趣的趨勢,他們會使用基於柵格的黑色邊框來裝飾頁面,而整體的風格依然極簡。20個作品集希望對你有幫助。
  • 二十九、電子商務服務推薦
    電子商務用戶行為分析綜合案例本案例主要的研究對象是法律網站,它是一家電子商務類的大型法律諮詢網站,致力於為用戶提供豐富的法律信息與專業諮詢服務,並為律師與律師事務所提供卓有成效的網際網路整合營銷解決方案。為了能更好的滿足用戶需求,發現用戶的興趣點,從而引導用戶發現自己的信息需求,將長尾網頁準確地推薦給所需用戶,幫助用戶發現他們感興的信息。
  • 《鏡之邊緣2/3》驚現EA幫助網站
    我們獲悉,DICE酷跑大作《鏡之邊緣》後續版本-《鏡之邊緣2》和《鏡之邊緣3》已經驚現EA官方幫助網站,但是目前EA已經發現並且刪除了相關頁面。根據截圖顯示,EA官方幫助網站的確給出了《鏡之邊緣2》幫助頁面,並且將網址當中的mirror-edge-2改成3,也能看到《鏡之邊緣3》的幫助頁面。
  • 設計師必備|利用網格系統,提高設計品質!
    當我們看到一個設計作品的時候,往往會覺得某些作品特別「高級」,但是又說不出高級在哪。一個作品高級,往往是基於細節的優化。今天就介紹一下網格系統,讓你快速提高設計感。什麼是網格系統?網格系統,系統英文為Grid Systems,也有人翻譯成柵格系統。