國際一線化妝品品牌是如何打造自己的官網的?在這個行業里,名牌效應是否也會蔓延至網站的展示上?能不能打動我們的腰包?光看不過癮,最要緊的是從飛屋睿UIdesign的點評中學到知識。來看看有哪些設計師不能錯過的。
潮流和過氣都在這里了。排名不分先后,但好看的我都搶不及要和大家推薦,不好看的只是我個人短見,吸取教訓以備日后設計學習的資糧。


大牌的影響力果然表現得淋漓盡致!黑白灰色調,低調,甚至談不上奢華,背景使用的是灰白的紋理。大量運用視頻,讓用戶身臨其境。時尚大片黑白調處理,精致,充滿想象力,鼠標滑過才會顯示出照片的色調。等待加載界面采用一種電子鐘的展示方式,新穎別致。每件產品展示都采用遮罩層,表達方式簡潔、有力、生動。大牌能做到這樣才算大牌,設計里有小聰明,也有欲言又止的張力。



這是小編個人很喜歡的界面。分層畫面,背景采用化妝品本身的柔美質地,在其上才突出人物和文字形象。整個畫面構成非常和諧,文字稍稍溢出背景,場面被擴寬。首頁采用的是目前很流行的大圖背景滾屏,利用大圖滾屏達到產品傳遞的目的。色彩始終以藍紫色為主。浮動導航于屏幕上方。簡潔優雅。對于大牌做的優秀的案例,我們還可以學學他們對于圖片的處理方式。


好吧,我要說其實DIOR還可以做得更好。畫面足夠簡潔,采用卡片式布局。依然是黑白灰,但和紀梵希相比,少了層次,創意上略遜一籌。彩妝的圖片處理得很精致,但是組合搭配上好像太平淡。總的來說,就有點類似糖水片一樣,好看,但就是好看而已。


網頁設計很簡潔,采用了線條作為裝飾,將其他無用的裝飾一律去掉。白色背景,圖片色彩強烈醒目。文字等其他按鈕使用黑色。強調色采用熒光粉。簡潔而直白。雖然簡單,但也不失平淡,布局結構使人產生一種穩定感。設計師對網站的整體布局把握非常到位,首尾銜接也十分巧妙。例如導航跟隨下拉動作后的變化,箭頭背景跟隨首頁大圖背景的更換而相應變化樣式,盡量保持頁面的干凈利落。動效的加入自然,獨具匠心。

雖然同樣是使用了線條,但明顯倩碧的官網設計不如芭比波朗的。首先說配色,倩碧的配色主色是綠色,而下面的圖片背景采用了大面積的漸變,漸變色有紫色、紅色、藍色甚至還有棕色。這樣就偏離了主色所營造的氛圍,色彩非常凌亂。其次再說線條,由于這里也大量采用了線條,那么線條感就勢必非常重要,但是我們可以看到網站中還出現了矩形實心按鈕,還有紅色的圓形標識。雖然倩碧在努力保持著畫面的簡潔感,但是這種凌亂仍然掩飾不住的暴露無遺。

這類風格的設計已經過時,雖然我們觀者目前還能想象得到到當年網站設計拿出來時被人嘖嘖稱贊的樣子。圖片眼花繚亂,首頁內容豐富,讓人不知從哪里開始看起。網站的每個小細節都長得不錯,但全部加在一起就發現有問題。

和歐萊雅一樣在設計方面已經過時,值得稱道的地方不多,配色上更為用心。沒那么亂,但是離亂也不遠了。

這個網站的配色其實是非常謹慎的,除了圖片以外,整個要件都突出了主色調,暖暖的橘色。但是網站缺乏活力,這種活力并不是從瀏覽量方面來說,而是整體的氛圍和感覺。顯得低調得有點過于保守。沒有出彩的地方,但也沒有錯。也許是布局不夠大氣所致。

看到這個會想到成千上萬默默無聞的企業官網,如果不是圖片上出現了化妝品的圖片,也就默默把它給忽視了。色彩也中規中矩,布局也不逾矩。正兒八經的繞道妖艷、繽紛。也許這是產品本身的品牌氣質。

網站的首頁繼承了從雜志封面設計中借鑒的布局,具足個性化特色,與絕大多數網站布局都不一樣。網站的結構也很合理,整體風格協調。只是在產品展示圖片太小,影響力不夠。背景色采用的黑色,我個人認為太過顯得暗。雖然突出了紅色,但給整個畫面一種刻意的壓抑。

貝玲妃的包裝設計是非常俏皮的,但是網站設計呢?品牌為了統一VI標識,一般而言都會將網站設計與其他印刷品設計統一起來。但是我個人認為貝玲妃的包裝設計特色是沒有必要運用到網站上去的。獨立看網站,會以為來到了幼兒產品網站,或者是兒童天地。很童話,很絢爛,但讓這個產品在格局上下降不止一個檔次,加上網站本身的配圖也不夠精細,色彩凌亂。想把產品包裝氣質運用到網頁,不是一定要靠網頁的基本組件。給它一個粉紅色鑲框,未必讓產品具有跳脫俏皮的性格特點。反而應該讓網站本身保持冷靜簡單,而在用圖上著力渲染。
友情宣傳:網站是一個需要持續輸入營養的具有生命力的東西,如果你也有網站,不妨聯系飛屋(ifeiwu.com)診斷一下現有網站的問題,準備更新換代吧。
情非得已
21個Sketch實用高頻小技巧2019-02-15
25款值得收藏的優秀網站模板免費下載2015-09-16
20套高質量的免費網頁模版PSD素材2013-09-02
20款國外時尚大氣的按鈕開關PSD素材下載2013-07-31
CSS實例教程:十步學會用CSS建站2011-10-05
網頁設計師:淺淡網頁BANNER設計2010-09-27
網頁細節教程:WEB設計精確點滴2010-09-13
網頁設計中的點滴細節把握2010-09-01
總結交互組件創新的四種方式2010-06-28
最全的國外電子商務CSS模板下載2010-06-18
實例解析3種文檔大屏適配方法
相關文章2632020-03-09
詳細解析UI設計中搜索欄設計的技巧
相關文章6092019-03-31
5個網站設計實例解析網頁設計趨勢
相關文章4452018-11-29
詳細解析iPhone 2018全面屏適配詳解
相關文章2572018-09-14
5個作品集網站設計中常見的問題
相關文章3742018-05-10
解析2018年移動端UI設計趨勢預測
相關文章5272018-01-11
詳解個性化網站設計的優點和缺點
相關文章3702018-01-10
深度解析尼爾森十大交互設計原則
相關文章3552018-01-10
