50個(gè)讓用戶(hù)流連忘返的網(wǎng)站頁(yè)頭設(shè)計(jì)(上)
在模板滿天飛的今天,開(kāi)個(gè)博客好像是一件特別簡(jiǎn)單的事情,不是么?平臺(tái)就在那兒擺著,博主只需要去發(fā)文就好了,這有何難?
但是實(shí)際的狀況是,網(wǎng)站和博客成千上萬(wàn),想要用戶(hù)注意到你,關(guān)注你,并不是一件簡(jiǎn)單的事情。你需要怎樣做才能從大量的同類(lèi)中脫穎而出呢?
打造一個(gè)漂亮的博客并不要求你從頭搭建整個(gè)布局,你可有充分運(yùn)用現(xiàn)有的模板,為它搭配上一個(gè)足夠漂亮又恰如其分的Banner圖,加上一個(gè)走心有趣的標(biāo)題,這樣一來(lái)可以更有效地吸引目標(biāo)讀者和用戶(hù)。想想看,當(dāng)用戶(hù)打開(kāi)一個(gè)網(wǎng)站的時(shí)候,最先展現(xiàn)出來(lái)的就是網(wǎng)站的頁(yè)頭,用戶(hù)是否會(huì)停留很大程度上在這一刻有了決定。設(shè)計(jì)一個(gè)足夠優(yōu)秀的網(wǎng)站頁(yè)頭 是非常有必要的。
那么到底要怎么做呢?空口無(wú)憑,讓下面50個(gè)設(shè)計(jì)案例為你展示一下效果吧。
博客The Everywhereist 的博主是一位重度旅游愛(ài)好者,她和她丈夫經(jīng)常滿世界溜達(dá),留下他們的印記,并在博客上直播他們的旅行。護(hù)照、地圖、膠卷都是他們?cè)谌澜缏糜蔚拿髯C,而博客Banner 圖上的這些元素也足夠讓你信服。
52 Weeks of UX,單看名字你就知道這是一個(gè)全年無(wú)休的用戶(hù)體驗(yàn)相關(guān)的博客,它的頁(yè)頭足夠簡(jiǎn)單也足夠鮮明,你很清楚你接下來(lái)閱讀的內(nèi)容一定是UX相關(guān)的文章。
Trent Walton 的網(wǎng)站就是這么做的,在標(biāo)題的選取上更加類(lèi)型化,這樣一來(lái),網(wǎng)站上不同文章在標(biāo)題上有明顯的區(qū)分,也更加容易吸引細(xì)分用戶(hù)。
動(dòng)效總會(huì)比靜態(tài)的元素更加吸引人,而作為一個(gè)有逼格的網(wǎng)站博客,VOTD 會(huì)在你打開(kāi)網(wǎng)站的時(shí)候,加在一個(gè)漂亮的LOGO動(dòng)效,充滿質(zhì)感的LOGO在白色的背景上逐步展開(kāi),這種動(dòng)效常常會(huì)讓人愛(ài)不釋手。
The Wanderlust Project 的頁(yè)頭就用了一種非常有性格的手寫(xiě)風(fēng)字體來(lái)書(shū)寫(xiě)標(biāo)題,這不僅非常抓眼球,而且當(dāng)字體運(yùn)用到配圖當(dāng)中之后,顯得網(wǎng)站還很有一致性。
在網(wǎng)頁(yè)排版中,白底黑字這種經(jīng)典的搭配總歸是不會(huì)錯(cuò)的,不過(guò)字體的性格和排版的方式會(huì)決定整個(gè)網(wǎng)站的氣質(zhì)。The Socialite Family 就是一個(gè)典型的時(shí)尚網(wǎng)站,博文以時(shí)尚雅致的室內(nèi)設(shè)計(jì)為主,字體選取也優(yōu)雅得體。
Premium Pixels 的網(wǎng)站中集合了大量的設(shè)計(jì)文章和資源,頁(yè)頭中最醒目的就是網(wǎng)站那個(gè)炫酷的LOGO,當(dāng)鼠標(biāo)懸停在上面的時(shí)候會(huì)變化。網(wǎng)站內(nèi)容很豐富,也許你想要的資源。
這個(gè)網(wǎng)站的內(nèi)容是關(guān)于如何給孩子們做飯的,網(wǎng)站頁(yè)頭 不僅采用了主題相關(guān)的插畫(huà),而且結(jié)合了效果不錯(cuò)的文字排版,結(jié)合獨(dú)特的配色,讓整個(gè)頁(yè)面看起來(lái)很好吃。
The New Minimum 是一個(gè)時(shí)尚數(shù)字雜志,纖細(xì)而現(xiàn)代的頁(yè)頭字體和有限的導(dǎo)航功能讓整個(gè)頁(yè)面看起來(lái)非常簡(jiǎn)約。
Joy the Baker 在頁(yè)頭文字底部使用了水彩質(zhì)感的襯底,讓整個(gè)頁(yè)頭的吸引力一下子提升了上來(lái)。
一圖勝千言。I Am a Food Blog 作為一個(gè)美食類(lèi)博客,它的設(shè)計(jì)在同類(lèi)中并不多見(jiàn),設(shè)計(jì)師將導(dǎo)航欄縮減到非常小,然后用全屏輪播大圖充塞了整個(gè)界面,內(nèi)容點(diǎn)題,也充滿了視覺(jué)沖擊力。
Lark and Linen 是一個(gè)室內(nèi)設(shè)計(jì)的博客,設(shè)計(jì)師在頁(yè)頭標(biāo)題中選用了一種手寫(xiě)字體,并為字體疊加了富有質(zhì)感的紋理,這和博客的主題顯得非常的貼合。
Keiko Lynn 這個(gè)站點(diǎn)同樣采用了靜態(tài)的插畫(huà)和文字標(biāo)題來(lái)設(shè)計(jì)頁(yè)頭,為了營(yíng)造俏皮可愛(ài)的氛圍,配色和字體樣式的選取都更加的鮮艷而花哨。
大自然會(huì)更加醒目。這個(gè)名為 Good Moods 的網(wǎng)站將網(wǎng)站名稱(chēng)用超大的字體展現(xiàn)在網(wǎng)站首頁(yè)上,簡(jiǎn)直就是一個(gè)直接大膽的“你好”,即使在相對(duì)出位的這類(lèi)博客設(shè)計(jì)當(dāng)中也是相當(dāng)少見(jiàn)的手法。
The Five O’Clock Cocktail Blog 是一個(gè)關(guān)于雞尾酒的博客,設(shè)計(jì)師在設(shè)計(jì)頁(yè)頭的時(shí)候,將雞尾酒酒杯的元素融入到頁(yè)頭,點(diǎn)題又視覺(jué)化。線性圖標(biāo)拼貼式的圖案不僅不會(huì)喧賓奪主,而且極具風(fēng)格化。
Friend of Type 的網(wǎng)站中集結(jié)了許多涂鴉風(fēng)格的黑色圖標(biāo),頁(yè)頭則采用了綠色的涂鴉字體作為區(qū)分,頁(yè)頭和前景的內(nèi)容之間加上淺陰影來(lái)營(yíng)造層次感和視覺(jué)縱深,讓整個(gè)網(wǎng)站顯得更加層次分明。
Freunde Von Freunden是一個(gè)專(zhuān)注創(chuàng)意工作者專(zhuān)訪的博客,它的名字是德語(yǔ),意為“朋友的朋友”。網(wǎng)站設(shè)計(jì)風(fēng)格極簡(jiǎn)而有品位,這種貫穿始終的風(fēng)格在頁(yè)頭上體現(xiàn)出來(lái),給人感覺(jué)也非常不錯(cuò)。
如果你的網(wǎng)站擁有一個(gè)設(shè)計(jì)足夠優(yōu)秀的LOGO就讓它展現(xiàn)出來(lái)吧,Good Design 就將自家的LOGO置于頁(yè)頭正中央,醒目而到位。
許多時(shí)尚類(lèi)的網(wǎng)站會(huì)采用這樣的頁(yè)頭設(shè)計(jì),手寫(xiě)風(fēng)格的LOGO加上簡(jiǎn)約的導(dǎo)航設(shè)計(jì),將自家品牌的氣質(zhì)借由強(qiáng)烈的對(duì)比和個(gè)性化的設(shè)計(jì)表現(xiàn)出來(lái),配合合理的留白與品牌化的配色,網(wǎng)站會(huì)給人一種雅致而專(zhuān)業(yè)的感覺(jué)。
現(xiàn)在許多網(wǎng)站的LOGO會(huì)采用抽閑而藝術(shù)化的圖案,優(yōu)雅、獨(dú)特而且充滿了現(xiàn)代風(fēng),這樣的圖案可以很好地和時(shí)下流行的現(xiàn)代風(fēng)結(jié)合到一起,但是又不會(huì)給人過(guò)強(qiáng)的品牌LOGO的感覺(jué)。
和撞色是一個(gè)道理,兩種不同風(fēng)格的字體在有的場(chǎng)合會(huì)營(yíng)造出強(qiáng)烈的錯(cuò)位感,這種錯(cuò)位感如果拿捏得好會(huì)非常吸引眼球又不會(huì)顯得太出戲。Homey Oh My 這個(gè)網(wǎng)站的頁(yè)頭就是這樣來(lái)營(yíng)造視覺(jué)重心的。
簡(jiǎn)約的導(dǎo)航、整飭的標(biāo)題和漂亮的輪播圖是 Harper and Haley 的首頁(yè)的特色,而其中最吸引人的是輪播圖的選取。
別出機(jī)杼的標(biāo)題設(shè)計(jì)也是非常吸引人的,就像Lust For Life的頁(yè)頭設(shè)計(jì)一樣,左對(duì)齊的標(biāo)題不僅采用了獨(dú)特的手寫(xiě)字體,而且是動(dòng)態(tài)的。
和保持簡(jiǎn)約的風(fēng)格不同,Lined and Unlined 的網(wǎng)站設(shè)計(jì)更偏向于極簡(jiǎn)化的設(shè)計(jì),最大限度的簡(jiǎn)化整體設(shè)計(jì),字體和色彩盡量簡(jiǎn)單,讓真正有趣的內(nèi)容凸顯出來(lái)。
Lauren Liess 也是一個(gè)經(jīng)典優(yōu)雅的設(shè)計(jì)博客,和同類(lèi)的時(shí)尚網(wǎng)站不同,占據(jù)兩行的LOGO被放大置于中央,不同的樣式更加能吸引用戶(hù)的注意力。如果你的LOGO也類(lèi)似于此,不妨采用相似的設(shè)計(jì)。
本文地址:http://m.likemindfilms.com/tutorial/de3150.html
您可能還喜歡
- 干貨分享!推薦8個(gè)高清無(wú)水印無(wú)版權(quán)可商
- 國(guó)外黃色網(wǎng)站系列欣賞之一
- 7款簡(jiǎn)約線條的免費(fèi)英文字體
- 國(guó)外最好的22個(gè)配色網(wǎng)站
- 10個(gè)高清多邊形的設(shè)計(jì)背景紋理素材下載
- 2015年最優(yōu)秀的20款網(wǎng)站配色方案
- 網(wǎng)易的404公益廣告頁(yè)面
- 簡(jiǎn)潔大氣時(shí)尚網(wǎng)頁(yè)背景匯集(附下載)
- 20套免費(fèi)的純色網(wǎng)頁(yè)小圖標(biāo)
- 30個(gè)“簡(jiǎn)潔大氣國(guó)際化”的網(wǎng)頁(yè)設(shè)計(jì)欣賞
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏