正確的網(wǎng)站設(shè)計首頁可以成就一個網(wǎng)站，同時它也可以毀掉一個網(wǎng)站，因為這是你的訪客看到的第一個頁面。如果你做錯了，大多數(shù)人都不會再去瀏覽你的網(wǎng)站設(shè)計了。

網(wǎng)站設(shè)計的首頁應(yīng)該清楚地傳達產(chǎn)品或服務(wù)的獨特賣點（USP），并專注于一個行動呼吁（CTA），例如讓訪問者注冊他們的詳細信息或進行購買。無論目標是什么，都取決于網(wǎng)站設(shè)計的頁面，通過使用空白、對比色或更明確的方向線索來引導用戶。擁有很好的網(wǎng)站設(shè)計工具可以幫助你做到這一點。

清晰、簡潔的標題和子標題以及有力、易于掃描的項目符號是今天的重點。網(wǎng)站設(shè)計的首頁應(yīng)該突出品牌，經(jīng)常加入英雄形象，以傳達產(chǎn)品或服務(wù)一眼，并直切要點，以避免用戶的注意力漂移。

考慮到這些，我們整理了一些特別有效的網(wǎng)站設(shè)計實例。

01.Angle2

（圖片來源：Angle2）

Angle2是一家烏克蘭數(shù)字設(shè)計機構(gòu)，其團隊全心全意地相信品牌的力量。顯然，沒有什么比打造獨特的定制體驗更能讓他們興奮的了，這種體驗"散發(fā)出你品牌的DNA"，同時又能挑戰(zhàn)用戶界面的極限。

這個新的在線服務(wù)網(wǎng)站肯定支持這一說法，它不僅推出了一些出色的作品，還帶來了兩種令人敬畏的效果。打開一些巨大的蒙特塞拉特字體浸泡在#2AF8EB（或?qū)θ祟悂碚f是青綠色）我們得到了一個印刷練習值得品味。這一技巧貫穿始終，并以一種高超的傾斜文本錯覺傳達出"棱角分明"的感覺。

本質(zhì)上，這使用左和右元素在視口的中間形成50/50的比例。從這里開始，一系列包裹在標簽中的傾斜文本行應(yīng)用了translate3d CSS函數(shù)，并在懸停時使用TweenMax進行了動畫處理。通過在每側(cè)施加對比色，可以實現(xiàn)45度折疊的美學效果，從而定義了整體網(wǎng)站設(shè)計。

將明快的藍色調(diào)注入到主要是黑白的調(diào)色板中，也顯示了有品位的執(zhí)行，更多的樂趣留給了笑臉人物肖像的"團隊"部分。在這里，當你在每張照片之間切換時，你會發(fā)現(xiàn)一個令人難以置信的碎片化濾鏡。

02.MADCLEM

克萊門特?舍內(nèi)博（Clement Chenebault）的網(wǎng)站設(shè)計既有趣又流暢

自網(wǎng)站設(shè)計誕生以來，網(wǎng)站開發(fā)人員和網(wǎng)站設(shè)計人員一直在努力探索可能的領(lǐng)域，試圖做一些新的或有趣的事情，并對網(wǎng)站是什么和它是如何工作的抱有著期望。這種自由精神的嘗試是怪異、狂野的網(wǎng)絡(luò)的一個標志。

克萊門特·舍內(nèi)博（Clement Chenebault）的作品集網(wǎng)站MADCLEM延續(xù)了這一富有傳奇色彩的傳統(tǒng)：突破界限，將簡單的彩色方格變成流動的、可塑的液體團塊。整個場地隨著你的每一個動作而彎曲和凸出，當你在凝膠狀的體塊中找到自己的路時，通過擴展和收縮來展示組合作品的一小部分。該網(wǎng)站設(shè)計是一個有趣的，波浪島在一個通常單調(diào)的海洋相同的外觀網(wǎng)站設(shè)計師和開發(fā)人員的投資組合。

03.IBM叢

IBM的Plex的單頁導航被設(shè)計成顯示新字體的最佳效果

IBM最近發(fā)布了自己的定制字體IBM Plex；這是自1956年以來公司字體的第一次更新，所以這是一件大事。為了向世界介紹這種字體，IBM請studio XXIX設(shè)計并建立一個網(wǎng)站來展示它。設(shè)計背后的想法是使用圖像、動畫和攝影來講述Plex的故事，同時以令人興奮的方式展示字體。

很棒的是，很多網(wǎng)站都是用來測試字體和探索多種可用風格的。因此，在您決定在項目中使用它之前，您可以在上下文中真正地了解它。該網(wǎng)站設(shè)計肯定是一個平面設(shè)計師和有點讓人想起投資組合頁面。特別是，盡管顯示了密集的信息，但您可以連續(xù)滾動不同的部分，因為您會看到一些有創(chuàng)意的滾動觸發(fā)動畫。

04.牛仔

騎他們！牛仔網(wǎng)站讓你關(guān)注最重要的東西：自行車

牛仔是針對美國城市居民的新一代電動自行車，因此，它的網(wǎng)站必須是光滑的，以傳達產(chǎn)品的價值，這是一種尋求徹底改變一個以粗笨的自行車沒有吸引力而著稱的市場的產(chǎn)品。

該網(wǎng)站設(shè)計由上野創(chuàng)造，使用了大膽的字體、強烈的色彩、很棒的攝影，而且建得非常好，為用戶提供了一流的體驗。自行車本身占據(jù)了中心舞臺，并立即吸引了用戶的目光。

自行車的過渡和放大功能，因為用戶向下滾動，保持微妙的自行車保持中心。專注于內(nèi)容而不是過度設(shè)計用戶體驗也意味著網(wǎng)站可以在所有設(shè)備上快速加載，響應(yīng)速度也非?？臁Ｗ孕熊噾?yīng)用程序有自己的頁面和功能之間的視差，提供的性能數(shù)據(jù)完美地揭示了產(chǎn)品的連接特性和設(shè)備邊界內(nèi)的視差。

05.接口愛好者

界面愛好者的網(wǎng)站設(shè)計的首頁頁面使事情變得簡單和干凈

為一個專門為"界面愛好者"設(shè)計的網(wǎng)站設(shè)計一個網(wǎng)站設(shè)計的首頁頁面絕非易事，但Facebook的設(shè)計師蒂莫西·阿丘巴卻做到了。該網(wǎng)站旨在激勵人們，提供UI設(shè)計工藝的實用建議，并慶祝不同設(shè)計師的獨特體驗。

設(shè)計將重點放在內(nèi)容上，并使用了一種平衡的布局，靈感來自于Achumba的初戀：打印。他表示："界面愛好者的設(shè)計基于取自報紙版面的一個簡單的三欄網(wǎng)格，既簡單又干凈。"美麗的人像攝影吸引了游客，并強調(diào)了網(wǎng)站對個人故事的興趣。

為了構(gòu)建這個站點，開發(fā)人員Iheanyi Ekechukwu利用了Tachyons，這是一個功能強大的CSS框架，允許對設(shè)計進行細粒度控制。結(jié)果是一個華麗的，最小的設(shè)計，沒有任何花哨的東西。

06.谷歌字體

谷歌直接引導您查看字體，沒有任何麻煩

谷歌字體最初于2010年推出，現(xiàn)在全球每天有超過150億次的瀏覽量，使用超過135種語言。谷歌字體網(wǎng)站是干凈的，完全響應(yīng)，使用材料設(shè)計的網(wǎng)格和造型。

設(shè)計師Yuin Chien在她關(guān)于這個項目的博客文章中解釋說："通過構(gòu)建處理比例、顏色和字體搭配的能力，我們邀請每個人在他們的項目中發(fā)現(xiàn)和無縫使用字體。"她是對的；界面誘人又美觀。它也是直觀和有趣的探索。

至關(guān)重要的是，它不會強迫你為了獲得字體而費盡周折；它們就在網(wǎng)站設(shè)計的首頁頁面的頂部，準備好讓你玩了。您可以直接輸入頁面的文本字段來測試它們。如果你被各種各樣的選擇弄得不知所措，谷歌可以讓你很容易地縮小范圍，為字體類別設(shè)置勾選框，為樣式、厚度、斜度和寬度設(shè)置方便的滑動條。

07.麻省理工學院技術(shù)評論

《麻省理工學院技術(shù)評論》保持簡單

所以很多網(wǎng)站都想盡辦法用一些花哨的技巧來吸引那些頁面瀏覽量，找到一個能讓事情變得簡單的網(wǎng)站是一種解脫。麻省理工學院的《技術(shù)評論》（Technology Review）首次發(fā)表于18世紀末，它有著悠久而令人自豪的傳統(tǒng)，其網(wǎng)站經(jīng)過精心設(shè)計，展示了優(yōu)秀的藝術(shù)作品，讓人樂于閱讀。

網(wǎng)站設(shè)計的首頁頁面讓人賞心悅目，你可以從一個大膽的封面故事、三個次要故事和一份名為"下載"的當天頭條新聞?wù)斜黹_始。這使得訪問者能夠以一種嚴肅的方式快速地了解到什么是重要的。

右上角的大紅色訂閱CTA也會立即吸引你的眼球，將訪問者引導到付費網(wǎng)站選項，而不會妨礙他們享受免費內(nèi)容。

08.Resn

神秘的"降落"打破了傳統(tǒng)網(wǎng)站首頁設(shè)計的大部分規(guī)則

現(xiàn)在，讓我們來看看一個頁面，它忽略了大多數(shù)的網(wǎng)站首頁設(shè)計規(guī)則，但還是成功了。從來沒有人會排隊使用標準的用戶界面模式，設(shè)計機構(gòu)Resn建立了一個以"水滴"為中心的網(wǎng)站首頁，一個神秘的、閃閃發(fā)光的淚滴狀多邊形，作為進入Resn心靈的入口。

點擊并按住鼠標，你就可以得到一個不同的灰度，蘋果主題的萬花筒；一種帶有顯靈板的蝙蝠，用它的x射線激光束剝?nèi)ヅf畫中人物的肉；一個有趣的管；一個迷幻的益力多，分發(fā)奇怪的剪貼畫；天知道還有什么。

Resn打破了創(chuàng)建網(wǎng)站首頁的許多常規(guī)規(guī)則，但其結(jié)果足夠令人信服，如果這類事情讓你感到滿意，你可能會繼續(xù)挖掘，如果不是，你也不會浪費他們的時間。對于吸引公司想要合作的客戶來說，"The Drop"可能是一個完美的過濾器，它確實是一個你可能永遠不會忘記的華麗的網(wǎng)站設(shè)計的首頁頁面。

09.現(xiàn)在和正確的

每一塊面板都是一個誘惑

"現(xiàn)在與正確"網(wǎng)站以其精心布局的精美圖片，觸及了它的核心受眾：迷戀文具的人。

圖形紙的背景，淺灰色的顏色和經(jīng)典的字體通道，一個學校練習本的氛圍和每個面板顯示一個美麗的產(chǎn)品。在頂部的菜單欄中，股票被精心地分成不同的類別，你很容易就會點擊所有的類別，首先是標題有趣的"蜉蝣"部分。

10.單型

與該公司本身一樣，Monotype的網(wǎng)站設(shè)計的首頁頁面也是關(guān)于排版的力量

"我們是type背后的公司，"Monotype的登陸頁上寫道，其低調(diào)而巧妙的設(shè)計與這一自信的聲明相輔相成。整個頁面的左半部分都是該公司的使命宣言，還有一個巧妙的轉(zhuǎn)變：通過下拉菜單，你可以看到各種字體、各種粗細和樣式的文本，從而了解Monotype的功能。

頁面的右側(cè)是指向Monotype庫、企業(yè)許可證和公司新聞的鏈接，其中有不同字體的大"M"圖標，其作用類似于下拉帽。柔和的深褐色調(diào)色板使重點堅定地放在字體上。

11.LS的作品

LS的制作吸引你在與華麗的蘇格蘭地點的行列

LS Productions是一家總部位于蘇格蘭的靜態(tài)和動態(tài)服務(wù)制作公司，它知道自己最大的資產(chǎn)是什么，這也是你訪問它的網(wǎng)站時會看到的內(nèi)容。一個充滿窗口的循環(huán)播放的視頻展示了該公司的一系列工作，全部設(shè)置在美麗的地點。向下滾動，您將了解它的三個主要服務(wù)：運動，靜止和位置。

到目前為止，網(wǎng)站設(shè)計的首頁頁面已經(jīng)完成了它的工作。下面的一切——本周的華麗地點，"與團隊見面"部分——只是裝飾門面。如果你想要雇傭LS的制作人員，那么你已經(jīng)進入了一個主要的服務(wù)頁面，在那里你會發(fā)現(xiàn)大量相關(guān)的、呈現(xiàn)良好的信息，讓你相信這家公司是合適的。

12.奧尼爾

奧尼爾的網(wǎng)頁上滿是照片，賣得很好

美國生活方式品牌奧尼爾主要關(guān)注兩件事：沖浪和滑雪。它在美國的網(wǎng)站通過一個以圖片為導向的網(wǎng)站設(shè)計的首頁頁面，向你展示了它的服裝系列和運動裝備，通過令人驚嘆的巨浪和白雪覆蓋的山脈的照片。

如果你知道自己想要什么，網(wǎng)站設(shè)計的首頁頁面頂部的一組下拉鏈接可以直接把你帶到你想要的地方，但在那下面的網(wǎng)站設(shè)計的首頁頁面會用幾個大的、以圖片為導向的區(qū)域鏈接和Instagram圖庫來引誘你。這一切足以讓你沖到海灘——或最近的山頂——但前提是先準備好奧尼爾的裝備。

13.Hipstamatic

Hipstamatic的網(wǎng)站設(shè)計的首頁頁面顯示了該應(yīng)用程序的功能

對于復古模擬攝影應(yīng)用Hipstamatic來說，最重要的是展示酷炫的功能，以及應(yīng)用的外觀、感覺和直觀的導航，以盡可能吸引用戶的時尚感。

在頁面的頂部，一個滾動的圖片庫展示了現(xiàn)實中的"Hipstamatic美學"，而一個巨大的iPhone展示了最新版本的應(yīng)用程序，帶有老式的經(jīng)典模式和新的推廣，有更多最新的功能。在這之下，一條新的約束帶總結(jié)了Hipstamatic現(xiàn)在的全部內(nèi)容："制作美麗的照片"，一個大的CTA會指引你到應(yīng)用商店。

14.蘋果

蘋果的網(wǎng)站設(shè)計的首頁頁面以精美的產(chǎn)品圖片為中心

毫不奇怪，毫無爭議的工業(yè)設(shè)計大師們可以拼湊出一個像樣的網(wǎng)站，而Apple.com毫不費力的簡單性甚至為它贏得了一支D&AD黑鉛筆。

主頁瀏覽了該公司廣泛的產(chǎn)品系列，并聚焦于當前的一個熱門產(chǎn)品。除了頂部簡單的導航欄，它只是漂亮地拍攝了產(chǎn)品照片、產(chǎn)品名稱和口號。這里甚至沒有一個CTA——蘋果很明智地認為，它的技術(shù)嫻熟的用戶將知道圖像和文本被超鏈接到更多信息。這是一個真正的有節(jié)制的大師班。

15.Pinterest

Pinterest如此出名，它的網(wǎng)站設(shè)計的首頁頁面不需要努力推銷自己

Pinterest知道自己想要什么，也沒有心情拐彎抹角：要么注冊，要么什么都不做。這家廣受歡迎的在線剪貼簿對自己的品牌和迅速增長的聲譽有足夠的信心，不會過于擔心推銷自己，也不會讓用戶有機會瀏覽一些展板，以免誤入歧途。

在注冊卡的背后，Pinterest的一個精彩攝影剪貼簿誘人地向上滾動著，讓人領(lǐng)略到為用戶提供的服務(wù)。這是一個精簡和美化的版本，你實際上得到的-沒有冗長的描述，廣告或repin信息雜亂的這個版本的主頁。

生成CSS（9月26日）是一個倫敦會議，致力于所有的事情CSS -現(xiàn)在預(yù)訂你的機票！使用代碼WEBDESIGNER2獲得10%的折扣