設計達人
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