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