在模板滿天飛的今天，開個(gè)博客好像是一件特別簡(jiǎn)單的事情，不是么？平臺(tái)就在那兒擺著，博主只需要去發(fā)文就好了，這有何難？

但是實(shí)際的狀況是，網(wǎng)站和博客成千上萬，想要用戶注意到你，關(guān)注你，并不是一件簡(jiǎn)單的事情。你需要怎樣做才能從大量的同類中脫穎而出呢？

打造一個(gè)漂亮的博客并不要求你從頭搭建整個(gè)布局，你可有充分運(yùn)用現(xiàn)有的模板，為它搭配上一個(gè)足夠漂亮又恰如其分的Banner圖，加上一個(gè)走心有趣的標(biāo)題，這樣一來可以更有效地吸引目標(biāo)讀者和用戶。想想看，當(dāng)用戶打開一個(gè)網(wǎng)站的時(shí)候，最先展現(xiàn)出來的就是網(wǎng)站的頁(yè)頭，用戶是否會(huì)停留很大程度上在這一刻有了決定。設(shè)計(jì)一個(gè)足夠優(yōu)秀的網(wǎng)站頁(yè)頭是非常有必要的。

那么到底要怎么做呢？空口無憑，讓下面50個(gè)設(shè)計(jì)案例為你展示一下效果吧。

1、功能說明

博客The Everywhereist 的博主是一位重度旅游愛好者，她和她丈夫經(jīng)常滿世界溜達(dá)，留下他們的印記，并在博客上直播他們的旅行。護(hù)照、地圖、膠卷都是他們?cè)谌澜缏糜蔚拿髯C，而博客Banner圖上的這些元素也足夠讓你信服。

2、讓標(biāo)題成為為你的標(biāo)志

52 Weeks of UX，單看名字你就知道這是一個(gè)全年無休的用戶體驗(yàn)相關(guān)的博客，它的頁(yè)頭足夠簡(jiǎn)單也足夠鮮明，你很清楚你接下來閱讀的內(nèi)容一定是UX相關(guān)的文章。

3、類型化的設(shè)計(jì)

Trent Walton 的網(wǎng)站就是這么做的，在標(biāo)題的選取上更加類型化，這樣一來，網(wǎng)站上不同文章在標(biāo)題上有明顯的區(qū)分，也更加容易吸引細(xì)分用戶。

4、展現(xiàn)動(dòng)效

動(dòng)效總會(huì)比靜態(tài)的元素更加吸引人，而作為一個(gè)有逼格的網(wǎng)站博客，VOTD 會(huì)在你打開網(wǎng)站的時(shí)候，加在一個(gè)漂亮的LOGO動(dòng)效，充滿質(zhì)感的LOGO在白色的背景上逐步展開，這種動(dòng)效常常會(huì)讓人愛不釋手。

5、使用具有表現(xiàn)力的字體

The Wanderlust Project 的頁(yè)頭就用了一種非常有性格的手寫風(fēng)字體來書寫標(biāo)題，這不僅非常抓眼球，而且當(dāng)字體運(yùn)用到配圖當(dāng)中之后，顯得網(wǎng)站還很有一致性。

6、白底黑字總不錯(cuò)

在網(wǎng)頁(yè)排版中，白底黑字這種經(jīng)典的搭配總歸是不會(huì)錯(cuò)的，不過字體的性格和排版的方式會(huì)決定整個(gè)網(wǎng)站的氣質(zhì)。The Socialite Family 就是一個(gè)典型的時(shí)尚網(wǎng)站，博文以時(shí)尚雅致的室內(nèi)設(shè)計(jì)為主，字體選取也優(yōu)雅得體。

7、讓LOGO足夠醒目

Premium Pixels 的網(wǎng)站中集合了大量的設(shè)計(jì)文章和資源，頁(yè)頭中最醒目的就是網(wǎng)站那個(gè)炫酷的LOGO，當(dāng)鼠標(biāo)懸停在上面的時(shí)候會(huì)變化。網(wǎng)站內(nèi)容很豐富，也許你想要的資源。

8、字體排版和插畫搭配起來

這個(gè)網(wǎng)站的內(nèi)容是關(guān)于如何給孩子們做飯的，網(wǎng)站頁(yè)頭不僅采用了主題相關(guān)的插畫，而且結(jié)合了效果不錯(cuò)的文字排版，結(jié)合獨(dú)特的配色，讓整個(gè)頁(yè)面看起來很好吃。

9、縮小頁(yè)頭字體

The New Minimum 是一個(gè)時(shí)尚數(shù)字雜志，纖細(xì)而現(xiàn)代的頁(yè)頭字體和有限的導(dǎo)航功能讓整個(gè)頁(yè)面看起來非常簡(jiǎn)約。

10、大膽用色

Joy the Baker 在頁(yè)頭文字底部使用了水彩質(zhì)感的襯底，讓整個(gè)頁(yè)頭的吸引力一下子提升了上來。

11、高清大圖頁(yè)頭

一圖勝千言。I Am a Food Blog 作為一個(gè)美食類博客，它的設(shè)計(jì)在同類中并不多見，設(shè)計(jì)師將導(dǎo)航欄縮減到非常小，然后用全屏輪播大圖充塞了整個(gè)界面，內(nèi)容點(diǎn)題，也充滿了視覺沖擊力。

12、加入紋理

Lark and Linen 是一個(gè)室內(nèi)設(shè)計(jì)的博客，設(shè)計(jì)師在頁(yè)頭標(biāo)題中選用了一種手寫字體，并為字體疊加了富有質(zhì)感的紋理，這和博客的主題顯得非常的貼合。

13、文字加插畫

Keiko Lynn 這個(gè)站點(diǎn)同樣采用了靜態(tài)的插畫和文字標(biāo)題來設(shè)計(jì)頁(yè)頭，為了營(yíng)造俏皮可愛的氛圍，配色和字體樣式的選取都更加的鮮艷而花哨。

14、使用夸張的字體尺寸

大自然會(huì)更加醒目。這個(gè)名為 Good Moods 的網(wǎng)站將網(wǎng)站名稱用超大的字體展現(xiàn)在網(wǎng)站首頁(yè)上，簡(jiǎn)直就是一個(gè)直接大膽的“你好”，即使在相對(duì)出位的這類博客設(shè)計(jì)當(dāng)中也是相當(dāng)少見的手法。

15、充滿創(chuàng)意的圖案

The Five O’Clock Cocktail Blog 是一個(gè)關(guān)于雞尾酒的博客，設(shè)計(jì)師在設(shè)計(jì)頁(yè)頭的時(shí)候，將雞尾酒酒杯的元素融入到頁(yè)頭，點(diǎn)題又視覺化。線性圖標(biāo)拼貼式的圖案不僅不會(huì)喧賓奪主，而且極具風(fēng)格化。

16、制造視覺縱深

Friend of Type 的網(wǎng)站中集結(jié)了許多涂鴉風(fēng)格的黑色圖標(biāo)，頁(yè)頭則采用了綠色的涂鴉字體作為區(qū)分，頁(yè)頭和前景的內(nèi)容之間加上淺陰影來營(yíng)造層次感和視覺縱深，讓整個(gè)網(wǎng)站顯得更加層次分明。

17、保持極簡(jiǎn)

Freunde Von Freunden是一個(gè)專注創(chuàng)意工作者專訪的博客，它的名字是德語(yǔ)，意為“朋友的朋友”。網(wǎng)站設(shè)計(jì)風(fēng)格極簡(jiǎn)而有品位，這種貫穿始終的風(fēng)格在頁(yè)頭上體現(xiàn)出來，給人感覺也非常不錯(cuò)。

18、獨(dú)樹一幟的LOGO

如果你的網(wǎng)站擁有一個(gè)設(shè)計(jì)足夠優(yōu)秀的LOGO就讓它展現(xiàn)出來吧，Good Design 就將自家的LOGO置于頁(yè)頭正中央，醒目而到位。

19、漂亮的手寫字體LOGO

許多時(shí)尚類的網(wǎng)站會(huì)采用這樣的頁(yè)頭設(shè)計(jì)，手寫風(fēng)格的LOGO加上簡(jiǎn)約的導(dǎo)航設(shè)計(jì)，將自家品牌的氣質(zhì)借由強(qiáng)烈的對(duì)比和個(gè)性化的設(shè)計(jì)表現(xiàn)出來，配合合理的留白與品牌化的配色，網(wǎng)站會(huì)給人一種雅致而專業(yè)的感覺。

20、設(shè)計(jì)一款獨(dú)特的圖案

現(xiàn)在許多網(wǎng)站的LOGO會(huì)采用抽閑而藝術(shù)化的圖案，優(yōu)雅、獨(dú)特而且充滿了現(xiàn)代風(fēng)，這樣的圖案可以很好地和時(shí)下流行的現(xiàn)代風(fēng)結(jié)合到一起，但是又不會(huì)給人過強(qiáng)的品牌LOGO的感覺。

21、字體搭配

和撞色是一個(gè)道理，兩種不同風(fēng)格的字體在有的場(chǎng)合會(huì)營(yíng)造出強(qiáng)烈的錯(cuò)位感，這種錯(cuò)位感如果拿捏得好會(huì)非常吸引眼球又不會(huì)顯得太出戲。Homey Oh My 這個(gè)網(wǎng)站的頁(yè)頭就是這樣來營(yíng)造視覺重心的。

22、漂亮的輪播圖

簡(jiǎn)約的導(dǎo)航、整飭的標(biāo)題和漂亮的輪播圖是 Harper and Haley 的首頁(yè)的特色，而其中最吸引人的是輪播圖的選取。

23、遠(yuǎn)離中央的標(biāo)題

別出機(jī)杼的標(biāo)題設(shè)計(jì)也是非常吸引人的，就像Lust For Life的頁(yè)頭設(shè)計(jì)一樣，左對(duì)齊的標(biāo)題不僅采用了獨(dú)特的手寫字體，而且是動(dòng)態(tài)的。

24、極簡(jiǎn)化

和保持簡(jiǎn)約的風(fēng)格不同，Lined and Unlined 的網(wǎng)站設(shè)計(jì)更偏向于極簡(jiǎn)化的設(shè)計(jì)，最大限度的簡(jiǎn)化整體設(shè)計(jì)，字體和色彩盡量簡(jiǎn)單，讓真正有趣的內(nèi)容凸顯出來。

25、居中放置LOGO

Lauren Liess 也是一個(gè)經(jīng)典優(yōu)雅的設(shè)計(jì)博客，和同類的時(shí)尚網(wǎng)站不同，占據(jù)兩行的LOGO被放大置于中央，不同的樣式更加能吸引用戶的注意力。如果你的LOGO也類似于此，不妨采用相似的設(shè)計(jì)。

【如何才能成為創(chuàng)造價(jià)值的設(shè)計(jì)師？】

1、數(shù)據(jù)驅(qū)動(dòng)：
《思路最值錢！如何通過設(shè)計(jì)提升高達(dá)12%的注冊(cè)轉(zhuǎn)化率？》

2、轉(zhuǎn)變思維：
《為何說設(shè)計(jì)師是解決問題的人（附思辨提高法）》

3、實(shí)戰(zhàn)解說：
《如何從甲方抽象的概念里提煉LOGO創(chuàng)意》

原文地址：designschool
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量107萬的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com