15個首頁頁面的創意網站設計 - 金沙設計 SUMAART

15個首頁頁面的創意網站設計

By:limo- 2019-10-18 07:45:23


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


網站設計的首頁應該清楚地傳達產品或服務的獨特賣點(USP),並專注於一個行動呼籲(CTA),例如讓訪問者註冊他們的詳細資訊或進行購買。無論目標是什麼,都取決於網站設計的頁面,通過使用空白、對比色或更明確的方向線索來引導使用者。擁有很好的網站設計工具可以幫助你做到這一點。


清晰、簡潔的標題和子標題以及有力、易於掃描的專案符號是今天的重點。網站設計的首頁應該突出品牌,經常加入英雄形象,以傳達產品或服務一眼,並直切要點,以避免使用者的注意力漂移。


考慮到這些,我們整理了一些特別有效的網站設計例項。


01.Angle2



(圖片來源:Angle2)


Angle2是一家烏克蘭數字設計機構,其團隊全心全意地相信品牌的力量。顯然,沒有什麼比打造獨特的定製體驗更能讓他們興奮的了,這種體驗“散發出你品牌的DNA”,同時又能挑戰使用者介面的極限。


這個新的線上服務網站肯定支援這一說法,它不僅推出了一些出色的作品,還帶來了兩種令人敬畏的效果。開啟一些巨大的蒙特塞拉特字型浸泡在#2AF8EB(或對人類來說是青綠色)我們得到了一個印刷練習值得品味。這一技巧貫穿始終,並以一種高超的傾斜文字錯覺傳達出“稜角分明”的感覺。


本質上,這使用左和右

元素在視口的中間形成50/50的比例。從這裡開始,一系列包裹在標籤中的傾斜文字行應用了translate3d CSS函式,並在懸停時使用TweenMax進行了動畫處理。通過在每側施加對比色,可以實現45度摺疊的美學效果,從而定義了整體網站設計。


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


02.MADCLEM



克萊門特•舍內博(Clement Chenebault)的網站設計既有趣又流暢


自網站設計誕生以來,網站開發人員和網站設計人員一直在努力探索可能的領域,試圖做一些新的或有趣的事情,並對網站是什麼和它是如何工作的抱有著期望。這種自由精神的嘗試是怪異、狂野的網路的一個標誌。


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


03.IBM叢



IBM的Plex的單頁導航被設計成顯示新字型的最佳效果


IBM最近釋出了自己的定製字型IBM Plex;這是自1956年以來公司字型的第一次更新,所以這是一件大事。為了向世界介紹這種字型,IBM請studio XXIX設計並建立一個網站來展示它。設計背後的想法是使用影象、動畫和攝影來講述Plex的故事,同時以令人興奮的方式展示字型。


很棒的是,很多網站都是用來測試字型和探索多種可用風格的。因此,在您決定在專案中使用它之前,您可以在上下文中真正地瞭解它。該網站設計肯定是一個平面設計師和有點讓人想起投資組合頁面。特別是,儘管顯示了密集的資訊,但您可以連續滾動不同的部分,因為您會看到一些有創意的滾動觸發動畫。


04.牛仔



騎他們!牛仔網站讓你關注最重要的東西:自行車


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


該網站設計由上野創造,使用了大膽的字型、強烈的色彩、很棒的攝影,而且建得非常好,為使用者提供了一流的體驗。自行車本身佔據了中心舞臺,並立即吸引了使用者的目光。


自行車的過渡和放大功能,因為使用者向下滾動,保持微妙的自行車保持中心。專注於內容而不是過度設計使用者體驗也意味著網站可以在所有裝置上快速載入,響應速度也非常快。自行車應用程式有自己的頁面和功能之間的視差,提供的效能資料完美地揭示了產品的連線特性和裝置邊界內的視差。


05.介面愛好者



介面愛好者的網站設計的首頁頁面使事情變得簡單和乾淨


為一個專門為“介面愛好者”設計的網站設計一個網站設計的首頁頁面絕非易事,但Facebook的設計師蒂莫西·阿丘巴卻做到了。該網站旨在激勵人們,提供UI設計工藝的實用建議,並慶祝不同設計師的獨特體驗。


設計將重點放在內容上,並使用了一種平衡的佈局,靈感來自於Achumba的初戀:列印。他表示:“介面愛好者的設計基於取自報紙版面的一個簡單的三欄網格,既簡單又幹淨。”美麗的人像攝影吸引了遊客,並強調了網站對個人故事的興趣。


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


06.谷歌字型



谷歌直接引導您檢視字型,沒有任何麻煩


谷歌字型最初於2010年推出,現在全球每天有超過150億次的瀏覽量,使用超過135種語言。谷歌字型網站是乾淨的,完全響應,使用材料設計的網格和造型。


設計師Yuin Chien在她關於這個專案的部落格文章中解釋說:“通過構建處理比例、顏色和字型搭配的能力,我們邀請每個人在他們的專案中發現和無縫使用字型。”她是對的;介面誘人又美觀。它也是直觀和有趣的探索。


至關重要的是,它不會強迫你為了獲得字型而費盡周折;它們就在網站設計的首頁頁面的頂部,準備好讓你玩了。您可以直接輸入頁面的文字欄位來測試它們。如果你被各種各樣的選擇弄得不知所措,谷歌可以讓你很容易地縮小範圍,為字型類別設定勾選框,為樣式、厚度、斜度和寬度設定方便的滑動條。


07.麻省理工學院技術評論



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


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


網站設計的首頁頁面讓人賞心悅目,你可以從一個大膽的封面故事、三個次要故事和一份名為“下載”的當天頭條新聞摘要列表開始。這使得訪問者能夠以一種嚴肅的方式快速地瞭解到什麼是重要的。


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


08.Resn



神祕的“降落”打破了傳統網站首頁設計的大部分規則


現在,讓我們來看看一個頁面,它忽略了大多數的網站首頁設計規則,但還是成功了。從來沒有人會排隊使用標準的使用者介面模式,設計機構Resn建立了一個以“水滴”為中心的網站首頁,一個神祕的、閃閃發光的淚滴狀多邊形,作為進入Resn心靈的入口。


點選並按住滑鼠,你就可以得到一個不同的灰度,蘋果主題的萬花筒;一種帶有顯靈板的蝙蝠,用它的x射線鐳射束剝去舊畫中人物的肉;一個有趣的管;一個迷幻的益力多,分發奇怪的剪貼畫;天知道還有什麼。


Resn打破了建立網站首頁的許多常規規則,但其結果足夠令人信服,如果這類事情讓你感到滿意,你可能會繼續挖掘,如果不是,你也不會浪費他們的時間。對於吸引公司想要合作的客戶來說,“The Drop”可能是一個完美的過濾器,它確實是一個你可能永遠不會忘記的華麗的網站設計的首頁頁面。


09.現在和正確的



每一塊麵板都是一個誘惑


“現在與正確”網站以其精心佈局的精美圖片,觸及了它的核心受眾:迷戀文具的人。


圖形紙的背景,淺灰色的顏色和經典的字型通道,一個學校練習本的氛圍和每個面板顯示一個美麗的產品。在頂部的選單欄中,股票被精心地分成不同的類別,你很容易就會點選所有的類別,首先是標題有趣的“蜉蝣”部分。


10.單型



與該公司本身一樣,Monotype的網站設計的首頁頁面也是關於排版的力量


“我們是type背後的公司,”Monotype的登陸頁上寫道,其低調而巧妙的設計與這一自信的宣告相輔相成。整個頁面的左半部分都是該公司的使命宣言,還有一個巧妙的轉變:通過下拉選單,你可以看到各種字型、各種粗細和樣式的文字,從而瞭解Monotype的功能。


頁面的右側是指向Monotype庫、企業許可證和公司新聞的連結,其中有不同字型的大“M”圖示,其作用類似於下拉帽。柔和的深褐色調色盤使重點堅定地放在字型上。


11.LS的作品



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


LS Productions是一家總部位於蘇格蘭的靜態和動態服務製作公司,它知道自己最大的資產是什麼,這也是你訪問它的網站時會看到的內容。一個充滿視窗的迴圈播放的視訊展示了該公司的一系列工作,全部設定在美麗的地點。向下滾動,您將瞭解它的三個主要服務:運動,靜止和位置。


到目前為止,網站設計的首頁頁面已經完成了它的工作。下面的一切——本週的華麗地點,“與團隊見面”部分——只是裝飾門面。如果你想要僱傭LS的製作人員,那麼你已經進入了一個主要的服務頁面,在那裡你會發現大量相關的、呈現良好的資訊,讓你相信這家公司是合適的。


12.奧尼爾



奧尼爾的網頁上滿是照片,賣得很好


美國生活方式品牌奧尼爾主要關注兩件事:衝浪和滑雪。它在美國的網站通過一個以圖片為導向的網站設計的首頁頁面,向你展示了它的服裝系列和運動裝備,通過令人驚歎的巨浪和白雪覆蓋的山脈的照片。


如果你知道自己想要什麼,網站設計的首頁頁面頂部的一組下拉鍊接可以直接把你帶到你想要的地方,但在那下面的網站設計的首頁頁面會用幾個大的、以圖片為導向的區域連結和Instagram相簿來引誘你。這一切足以讓你衝到海灘——或最近的山頂——但前提是先準備好奧尼爾的裝備。


13.Hipstamatic



Hipstamatic的網站設計的首頁頁面顯示了該應用程式的功能


對於復古模擬攝影應用Hipstamatic來說,最重要的是展示酷炫的功能,以及應用的外觀、感覺和直觀的導航,以儘可能吸引使用者的時尚感。


在頁面的頂部,一個滾動的圖片庫展示了現實中的“Hipstamatic美學”,而一個巨大的iPhone展示了最新版本的應用程式,帶有老式的經典模式和新的推廣,有更多最新的功能。在這之下,一條新的約束帶總結了Hipstamatic現在的全部內容:“製作美麗的照片”,一個大的CTA會指引你到應用商店。


14.蘋果



蘋果的網站設計的首頁頁面以精美的產品圖片為中心


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


主頁瀏覽了該公司廣泛的產品系列,並聚焦於當前的一個熱門產品。除了頂部簡單的導航欄,它只是漂亮地拍攝了產品照片、產品名稱和口號。這裡甚至沒有一個CTA——蘋果很明智地認為,它的技術嫻熟的使用者將知道影象和文字被超連結到更多資訊。這是一個真正的有節制的大師班。


15.Pinterest



Pinterest如此出名,它的網站設計的首頁頁面不需要努力推銷自己


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


在註冊卡的背後,Pinterest的一個精彩攝影剪貼簿誘人地向上滾動著,讓人領略到為使用者提供的服務。這是一個精簡和美化的版本,你實際上得到的-沒有冗長的描述,廣告或repin資訊雜亂的這個版本的主頁。


生成CSS(9月26日)是一個倫敦會議,致力於所有的事情CSS -現在預訂你的機票!使用程式碼WEBDESIGNER2獲得10%的折扣



(圖片來源:蓋蒂/未來)


相關閱讀