網(wǎng)頁設(shè)計(jì)如何實(shí)現(xiàn)“雜志海報(bào)風(fēng)”
雜志海報(bào)風(fēng)一直是網(wǎng)頁上不太推薦的一種設(shè)計(jì)風(fēng)格。
且不說圖片加載的快慢,很多設(shè)計(jì)表現(xiàn)并不適合網(wǎng)頁這種瀏覽體制。
然而,人是很bitch的。
看慣了千篇一律的板塊布局,就想要嘗嘗口味豐富的海報(bào)風(fēng)。
作者并沒有直接給出很多雜志設(shè)計(jì)風(fēng)的網(wǎng)站
而只是通過分析精品紙媒的設(shè)計(jì)來尋找解決思路,伸手黨表介意哦
---------------------我是譯文分割線--------------------
大家好,還是我,quoitworks的村松。
在設(shè)計(jì)網(wǎng)頁的工作中,有時(shí)會(huì)遇到這樣的客戶:“可不可以設(shè)計(jì)成像雜志海報(bào)那種風(fēng)格”。
大量的網(wǎng)頁設(shè)計(jì)工作中,我們可能時(shí)時(shí)刻刻關(guān)注布局,關(guān)注用戶體驗(yàn),關(guān)注網(wǎng)頁視線的導(dǎo)向,
對(duì)這些的過度關(guān)注很容易忽視一個(gè)網(wǎng)頁或者網(wǎng)站在視覺上的生氣和活力。
從客戶的角度來看,從他們出生開始,畢竟看紙媒印刷品比看網(wǎng)頁的年頭要長(zhǎng)。
比如海報(bào),雜志(網(wǎng)頁上來說,相當(dāng)于專題頁面,商品詳情頁,主視覺頁面等等。不是搜索頁面哦)
所以這一期,我們研究下如果客戶需要在商品詳情頁、特輯頁面或者about頁面上
設(shè)計(jì)成雜志海報(bào)風(fēng)的話該如何巧妙的完成任務(wù)。
我收集了很多紙媒設(shè)計(jì)精品,先從他們?nèi)胧挚茨懿荒苡袔椭?/strong>
一不小心上了很多圖,那就廢話少說來看圖吧,如果因?yàn)閳D太多機(jī)器down掉表打我啊。
把文字稍稍壓在圖片上的手法,最近網(wǎng)頁設(shè)計(jì)上也常有看到。
比如這個(gè)網(wǎng)站:http://kyu-plus.jp/info/shop.html
在圖片顏色較淺的地方
用黑色的字輕輕覆蓋。
像上面第1張海報(bào)那樣,
蓋在圖片上的字
用反色白色效果應(yīng)該也不賴。
如果是網(wǎng)頁文字的話怕是很難實(shí)現(xiàn)。
先看幾個(gè)雜志海報(bào)上的案例
以上都是把淡色或熒光色靈活鋪設(shè)在背景上的印刷制品效果。
用在網(wǎng)站上的話,可以把主廣告詞或者第一標(biāo)題用英語像花紋般大大的鋪上去。
文字字號(hào)已經(jīng)很大了,所以盡量用能融進(jìn)背景的顏色而不是過于搶眼的顏色。
[譯者:其實(shí)就是要有透明度,不能傻傻實(shí)實(shí)的放上去,要的效果就是既醒目又要融于背景]
像X這種符號(hào)壓在背景上效果也不錯(cuò)。
網(wǎng)頁設(shè)計(jì)中還是比較忌諱和害怕豎排文字的。
但是根據(jù)情況的不同,適當(dāng)嘗試一下豎排文字也許會(huì)有不一樣的驚喜?
當(dāng)然也要看情況。比如下邊這個(gè)網(wǎng)站的豎排給人感覺就不錯(cuò)
http://www.rakuten.ne.jp/gold/sparkler/about.html
[譯者]
作為同樣有豎排傳統(tǒng)習(xí)慣的中文,在需要一些傳統(tǒng)風(fēng)的網(wǎng)頁可以嘗試豎排。
但最好是文字量較少的標(biāo)題。
先來看一些海報(bào)栗子
其實(shí)一般在網(wǎng)頁上很少把標(biāo)題放這么大
但是把標(biāo)題按照它表達(dá)的內(nèi)容方向進(jìn)行一番設(shè)計(jì)的話,的確很有雜志海報(bào)風(fēng)。
這是不常用的表現(xiàn)手法,實(shí)現(xiàn)難度也大。但是一旦做出來效果很不錯(cuò)。
眾所周知,對(duì)齊文字是常識(shí)。
但有時(shí),根據(jù)人類視線移動(dòng)的規(guī)律,可以故意不對(duì)齊文字。
比如上邊的栗子,按照人們?cè)谧x取時(shí)視線的順序,從右上到左下,
文字也按照這個(gè)順序排列而非對(duì)齊,也沒有影響瀏覽閱讀。
比對(duì)齊文字更活潑。
特別注意:嘗試這種做法時(shí)一定要好好研究下人們視線移動(dòng)的規(guī)律,亂放一氣只會(huì)被領(lǐng)導(dǎo)罵的,呵呵。
通過控制文字的大小、粗細(xì)來突顯標(biāo)題是比較基本的做法。
像上邊,把文字放在正中央,放大到覆蓋整個(gè)圖片的做法會(huì)更有海報(bào)風(fēng)的效果。
據(jù)說當(dāng)下流行的扁平化設(shè)計(jì)理念是瑞士極簡(jiǎn)風(fēng)的復(fù)活。
所以,如果嘗試扁平化設(shè)計(jì),與其模仿國外不知名的扁平化設(shè)計(jì),
還不如好好參考下極簡(jiǎn)扁平化的鼻祖-瑞士國際極簡(jiǎn)風(fēng)(swissted)。
這是瑞士國際極簡(jiǎn)風(fēng)的朋克搖滾show的海報(bào)網(wǎng)站 http://www.swissted.com/。
[譯者] swissted是一位名叫Mike Joyce的平面設(shè)計(jì)師在上世紀(jì)八十年代嘗試的一種風(fēng)格。他把搖滾秀的海報(bào)用瑞士極簡(jiǎn)風(fēng)進(jìn)行設(shè)計(jì),把兩種怎么看都不搭邊的風(fēng)格元素糅合在一起,在設(shè)計(jì)愛好者和音樂發(fā)燒友里引起極大好評(píng),并由此推廣。很多評(píng)論認(rèn)為,swissted風(fēng)格是當(dāng)下的扁平化設(shè)計(jì)的鼻祖,是對(duì)它的復(fù)活。
1.搖滾重口style
潑墨效果,黑白圖片
把圖片處理成黑白做舊效果,覆蓋上熒光黃色的字讓整體不至于太沉重。
如果是幫朋友的硬核搖滾樂隊(duì)做網(wǎng)站的話,可以嘗試這種。
2.把圖摳出來像鋪花紋一樣
3.把文字沿著某種路徑彎彎曲曲的擺放,比較小清新的一種手法。
總結(jié)一下~
以上都是為了解決手頭的課題而提供的思路。
如果本末倒置,
因?yàn)椤?strong>我想用這種設(shè)計(jì)風(fēng)格”而刻意為了某種風(fēng)格而設(shè)計(jì)就大錯(cuò)特錯(cuò)了!
個(gè)人看法,作為設(shè)計(jì)是這樣一個(gè)流程:
“出現(xiàn)問題→這個(gè)解決思路怎么樣?那個(gè)思路呢?”——try and error
一個(gè)不斷試錯(cuò)的循環(huán)才是找出最合適設(shè)計(jì)的最快方法。
所以,為了鍛煉這種思路習(xí)慣,
平時(shí)看到好的設(shè)計(jì)時(shí),
應(yīng)該多分析他的解決思路。
比如:
這到底是為了什么而設(shè)計(jì)的
這個(gè)設(shè)計(jì)的對(duì)象人群是誰
用了怎樣的設(shè)計(jì)解決思路
圖片用了什么樣子的
最有個(gè)性的點(diǎn)是什么
不流俗的地方是什么
它對(duì)瀏覽者的視線導(dǎo)向如何
用了什么色系
廣告詞用的怎么樣?很難懂嗎?
屬于哪個(gè)行業(yè)領(lǐng)域
用了怎樣的字體?
等等……
[譯者]
看到好的設(shè)計(jì),最大吸取它精華的方式就是:學(xué)會(huì)他的解決思路。
正所謂授之以漁,而不是瘋狂吃魚。
這也是作者最想表達(dá)的一點(diǎn),希望對(duì)大家有幫助。
本文地址:http://m.likemindfilms.com/tutorial/di2717.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏