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

02.MADCLEM

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

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

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

03.IBM叢

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

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

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

04.牛仔

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

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

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

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

05.接口愛(ài)好者

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

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

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

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

06.谷歌字體

谷歌直接引導您查看字體，沒(méi)有任何麻煩

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

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

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

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

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

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

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

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

08.Resn

神秘的“降落”打破了傳統網(wǎng)站首頁(yè)設計的大部分規則

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

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

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

09.現在和正確的

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

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

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

10.單型

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

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

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

11.LS的作品

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

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

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

12.奧尼爾

奧尼爾的網(wǎng)頁(yè)上滿(mǎn)是照片，賣(mài)得很好

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

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

13.Hipstamatic

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

對于復古模擬攝影應用Hipstamatic來(lái)說(shuō)，最重要的是展示酷炫的功能，以及應用的外觀(guān)、感覺(jué)和直觀(guān)的導航，以盡可能吸引用戶(hù)的時(shí)尚感。

在頁(yè)面的頂部，一個(gè)滾動(dòng)的圖片庫展示了現實(shí)中的“Hipstamatic美學(xué)”，而一個(gè)巨大的iPhone展示了最新版本的應用程序，帶有老式的經(jīng)典模式和新的推廣，有更多最新的功能。在這之下，一條新的約束帶總結了Hipstamatic現在的全部?jì)热荩骸爸谱髅利惖恼掌?，一個(gè)大的CTA會(huì )指引你到應用商店。

14.蘋(píng)果

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

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

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

15.Pinterest

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

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

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

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