|
觀摩別人的優(yōu)秀作品,，是豐富自己對(duì)版式設(shè)計(jì)理解的重要途徑,。優(yōu)秀的版式設(shè)計(jì),，它的文字,、圖片（圖形）和色彩等視覺(jué)元素都是有目的,、有組織地排列和組合,，也是自己掌控元素的綜合能力體現(xiàn),。今天優(yōu)時(shí)節(jié)為大家推薦66個(gè)人工精選的優(yōu)秀網(wǎng)頁(yè)界面設(shè)計(jì)作品，是值得反復(fù)推敲的上乘之作,，請(qǐng)大家收藏細(xì)細(xì)品味,。 PS：以下網(wǎng)頁(yè)設(shè)計(jì)作品均采集自@dailywebdesign的ins列表，故沒(méi)有對(duì)應(yīng)的作者作品集鏈接,。 所有設(shè)計(jì)師,！不要錯(cuò)過(guò)每一幅網(wǎng)頁(yè)設(shè)計(jì)佳作，欣賞之余用心分析表現(xiàn)思路和手法運(yùn)用,！將設(shè)計(jì)靈感推陳出新,。 圖：星球碰撞概念網(wǎng)站 by @trionndesign 圖：比特幣采礦網(wǎng)站 by Mike creative Minds 圖：白噪音網(wǎng)站 by @mikekus 圖：旅游網(wǎng)站 by Creative Mints 旅游宣傳設(shè)計(jì)有一種根據(jù)圖片空間感穿插文字效果的手法，主圖的文字通過(guò)噪點(diǎn)漸變和透明度蒙版營(yíng)造融入云霧若隱若現(xiàn)的效果,。 圖：by @nrlyco 圖：跑步網(wǎng)站 by @lgndhq 這個(gè)跑步主題網(wǎng)站,，通過(guò)三個(gè)圖形（三角形、圓形,、平行四邊形）構(gòu)成異形排版,。對(duì)于空白區(qū)域可以適當(dāng)采用圖形色塊和大小調(diào)整來(lái)成為主圖的襯托,。異形排版對(duì)于文字,、圖片（圖形）和色彩的運(yùn)用要求較高,，如果把握不好的話,，畫(huà)面整體上會(huì)比較凌亂。 而這幅作品版式上比較簡(jiǎn)約,，但是我們可以看到文字上有清晰的邏輯布局,。主體文案沿著兩個(gè)三角形之間的空白右偏,，因此在左上角和平行四邊形蒙版照片的左邊放置副文案，起到平衡版式的作用,。文字上采用一些技巧來(lái)讓文字不單調(diào),，如輔助圖形的運(yùn)用和文字大小的對(duì)比。 圖：Mooc網(wǎng)站 by @lobanovskiy 版式的副標(biāo)題前面加上一條豎線,，線條顏色與背景圖的主題顏色（青色）一致,，在字號(hào)小的前提下凸顯標(biāo)題。 色塊的用色上,，左右采用黑白色，中間采用青色,，黑白在藝術(shù)上不算顏色,，能夠包容所有顏色的存在，故用中性色襯托中間的青色,。 底部有斷開(kāi)的不完整文字,，提示用戶可以滾動(dòng)頁(yè)面查看更多的內(nèi)容。如果不斷開(kāi)文字的話,，容易讓用戶誤以為當(dāng)前頁(yè)面就是全部?jī)?nèi)容,，從而忽略后面的內(nèi)容。 圖：電商網(wǎng)站 by Sylvain Theyssens 圖：文字穿插風(fēng)格網(wǎng)頁(yè)設(shè)計(jì) by Ali Sayed 高級(jí)的食材做法往往最簡(jiǎn)單,。同理,，一張高精度、表現(xiàn)力強(qiáng)的圖片往往不作過(guò)多的修飾處理,。這里對(duì)章魚(yú)使用文字穿插效果,，利用文字穿插突出章魚(yú)的動(dòng)感姿勢(shì)，增強(qiáng)空間層次感,，迅速抓住受眾眼球,。文字根據(jù)主體的形狀特征作蒙版處理。
圖：by @eskorwerbeagentur
圖：咖啡飲品網(wǎng)站 by @farzanfaruk
圖：果餡餅網(wǎng)站 by @kris_anfalova
圖：馬卡龍網(wǎng)站 by @eskorwerbeagentur 我們有時(shí)會(huì)看到一些創(chuàng)意合成的海報(bào),，被里面的創(chuàng)意所折服,。不知大家有沒(méi)有注意到這種海報(bào)往往是內(nèi)容主體，角落是品牌LOGO和產(chǎn)品圖,，背景色往往是純色或簡(jiǎn)單效果的單一色系,。這樣做是為了不讓其他元素喧賓奪主，確保主要內(nèi)容的凸顯,，直接讓受眾感受主體的表現(xiàn)力,。
圖：事件計(jì)劃網(wǎng)站 by @basit.akhan
圖：交互設(shè)計(jì)服務(wù)網(wǎng)站 by @basita.khan11
圖：旅游網(wǎng)頁(yè)設(shè)計(jì) by @des.saloroman
圖：空間感很強(qiáng)大的房地產(chǎn)網(wǎng)站 by Mike | Creative Mints
圖：設(shè)計(jì)工具類(lèi)網(wǎng)站 by @lobanovskiy
圖：by @walidbeno
圖：天文觀測(cè)類(lèi)網(wǎng)頁(yè)設(shè)計(jì) by Ali Sayed
圖：by @burakuidesigner 設(shè)計(jì)中有一個(gè)技巧是從圖片中選取主色作為設(shè)計(jì)中的強(qiáng)調(diào)色。一般這種取色需要適當(dāng)調(diào)整使得色彩更貼切整體觀感,。這張網(wǎng)頁(yè)設(shè)計(jì),，文字的強(qiáng)調(diào)色通過(guò)駝鳥(niǎo)的體色選取，飽和度偏低，不會(huì)過(guò)于亮眼,。底色和強(qiáng)調(diào)色,，對(duì)比鮮明。
圖：戰(zhàn)爭(zhēng)歷史網(wǎng)頁(yè)設(shè)計(jì) by @unusualpixels
圖：殺毒安全類(lèi)app網(wǎng)頁(yè)設(shè)計(jì) by @denmarux
圖：by @manuelroviradesign
圖：adidas官網(wǎng)設(shè)計(jì) by @_jackduran
圖：by Johan Adam Horn
圖：藝術(shù)品銷(xiāo)售網(wǎng)站 by @konturpasha
圖：影視宣傳類(lèi)網(wǎng)頁(yè)設(shè)計(jì) by Ben Schade
圖：展覽類(lèi)網(wǎng)頁(yè)設(shè)計(jì) by @dogstudio_be
圖：產(chǎn)品宣傳網(wǎng)頁(yè)設(shè)計(jì) by @titusruiz 這張網(wǎng)頁(yè)設(shè)計(jì)如果沒(méi)有底部的斜白條,，視覺(jué)效果上會(huì)平庸些,。底部的白條起到畫(huà)龍點(diǎn)睛的作用，突出燈具的主體特征,。
圖：by @siddris14
圖：產(chǎn)品宣傳類(lèi)網(wǎng)頁(yè)設(shè)計(jì) by strive
圖：商業(yè)輔導(dǎo)類(lèi)網(wǎng)頁(yè)設(shè)計(jì) by @zachinoff
圖：食品類(lèi)網(wǎng)頁(yè)設(shè)計(jì) by @gtamarashvili
圖：電影宣傳網(wǎng)頁(yè)設(shè)計(jì) by @matt.wojtas
圖：Nike官網(wǎng)設(shè)計(jì) by @farzanfaruk
圖：by @capouska
圖：手表宣傳網(wǎng)頁(yè)設(shè)計(jì) by @staromlynski.design
圖：旅游指南網(wǎng)頁(yè)設(shè)計(jì) by @adriengervaix
圖：個(gè)人簡(jiǎn)歷網(wǎng)站 by @bepatrickdavid
圖：攀登運(yùn)動(dòng)類(lèi)網(wǎng)頁(yè)設(shè)計(jì) by @timovaknar
圖：汽車(chē)宣傳網(wǎng)站 by @siddris14
圖：肌理插畫(huà)風(fēng)格網(wǎng)站 by Zak Steele
圖：服裝網(wǎng)站設(shè)計(jì) by Dawid Tomczyk
圖：Nike官網(wǎng)設(shè)計(jì) by Manoj Rajput
圖：沙漠越野賽車(chē)網(wǎng)站 by @designkes
圖：法國(guó)標(biāo)致越野車(chē)網(wǎng)站 by @abaygulov
圖：人物歷史類(lèi)網(wǎng)站 by @taylorperrin_
圖：攀登類(lèi)網(wǎng)頁(yè)設(shè)計(jì) by @abd_bzn
圖：設(shè)計(jì)服務(wù)類(lèi)網(wǎng)頁(yè)設(shè)計(jì) by Ali Sayed
圖：雪糕宣傳網(wǎng)站 by @folticadigital 圖：自行車(chē)產(chǎn)品宣傳網(wǎng)頁(yè)設(shè)計(jì) by @m_strba
圖：種子末日備份網(wǎng)站 by @drawingartmk
圖：健康食品網(wǎng)頁(yè)設(shè)計(jì) by @drawingartmk
圖：交通信息類(lèi)網(wǎng)頁(yè)設(shè)計(jì) by @walidbeno
圖：星際旅行概念類(lèi)網(wǎng)站 by Ruben Sargsyan
圖：摩托車(chē)宣傳網(wǎng)站 by @kreativa.studio
圖：埃及遺跡旅游網(wǎng)頁(yè)設(shè)計(jì) by @achraf.elkaami
圖：品牌網(wǎng)頁(yè)設(shè)計(jì) by @m.r._shamim
圖：燈具宣傳網(wǎng)站 by @m.r._shamim
圖：動(dòng)物圖片網(wǎng)站 by @reisshuss
圖：協(xié)作工具網(wǎng)頁(yè)設(shè)計(jì) by @herdetya
圖：by @marcinjozwiak.pl
圖：意大利旅游網(wǎng)站 by @jess.caddick
圖：食品運(yùn)輸網(wǎng)頁(yè)設(shè)計(jì) by Rwds
圖：面包宣傳網(wǎng)頁(yè)設(shè)計(jì) by @woodscout 以上是今日優(yōu)時(shí)節(jié)的網(wǎng)頁(yè)設(shè)計(jì)分享,，有沒(méi)有g(shù)et到一些排版、配色等創(chuàng)意靈感,？沒(méi)有的話多看幾遍或收藏起來(lái)作靈感之用途 |
|
|
