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

02.MADCLEM

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

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

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

03.IBM叢

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

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

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

04.牛仔

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

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

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

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

05.接口愛好者

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

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

設(shè)計(jì)將重點(diǎn)放在內(nèi)容上，并使用了一種平衡的布局，靈感來自于Achumba的初戀：打印。他表示：“界面愛好者的設(shè)計(jì)基于取自報(bào)紙版面的一個(gè)簡單的三欄網(wǎng)格，既簡單又干凈?！泵利惖娜讼駭z影吸引了游客，并強(qiáng)調(diào)了網(wǎng)站對(duì)個(gè)人故事的興趣。

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

06.谷歌字體

谷歌直接引導(dǎo)您查看字體，沒有任何麻煩

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

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

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

07.麻省理工學(xué)院技術(shù)評(píng)論

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

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

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

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

08.Resn

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

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

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

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

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

每一塊面板都是一個(gè)誘惑

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

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

10.單型

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

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

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

11.LS的作品

LS的制作吸引你在與華麗的蘇格蘭地點(diǎn)的行列

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

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

12.奧尼爾

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

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

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

13.Hipstamatic

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

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

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

14.蘋果

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

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

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

15.Pinterest

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

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

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

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