網站首頁第一屏的排版非常重要，很多時候能決定用戶的去與留，特別是目前的扁平化網站，對圖文排版要求較高，因為沒有花哨的質感特效，重點以展示內容為主。今天為大家分享一系列圖文排版不錯的國外設計網站，也許會給你帶來不同的排版靈感。

對于下面這些例子，除了排版不錯外，重點可以看看字體風格的選用，同樣是值得我們思考學習的。

Bigdropinc

下面的圖文的排版十分常用，用法簡單，效果好。因為有了圖像，文字色彩不能太多，布局以大標題文字 + 一段小字體 + 按鈕方式，并居中展現。

還有個小 Tips：字體與背景要夠「靚」哦。沒靈感的或趕時間的話，就選用這樣的布局吧：）

Oribe

看這張排版，人物與文字的凸凹感是有關系的，你看到了嗎？

LE28 LILLE

le28網站背景是視頻來的，當然也可以用圖片代替，這里的文字在屏幕左下角的方式呈現，點線面都做得不錯。

Truedigital

和第一張圖的用法類似，居中形式，但這個文字比較大，占滿一個屏幕。

Aaa

一個個人網站，文字設計先贊一個。鼠標移動到導航菜單會顯示不同的背景，又一個靈感可以模仿（抄）了。

Activetheory

如果你的文字很短，那么試試像 Activetheory 網站一樣把字體的間距、行距適當拉寬。

Sehsucht

很簡約的網站設計，連英文字體也被精簡了。

Finnlough

使用了手寫字體風格，設計師不要只管看首頁，試試「使用」這個網站，你會發現很多體驗不錯的小細節。

Oursroux

Gelateriadelbiondo

粗字體與細字體排版。

Kret

Cultureexperiencedays

排版有點藝術感，有木有？此網頁是橫向滾動的，所以此網站的排版也是以橫向設計為主。

Codetasty

Loppist

Quiver

Natan

當重點是展示人物的時候，你的文字不應該太搶眼。

「看網站學設計系列」

插畫網站合集：
《靈感大餐！8個有趣有特色的國外插畫師官網》

交互優秀的網站：
《身臨其境！那些給人逼真交互體驗的優秀網頁設計》

卡片式網站案例：
《高手才能這么玩！一組創意+色彩都超贊的「卡片式設計」網站》

原文地址：shejidaren

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量104萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com