32年啟發您的2020個最佳網站設計

有時,我會偶然遇到一個真正吸引我的網站。因此,我發現其中有32個向您展示。

這些站點突破了網絡上已知的範圍。 無論是網站提供的設計美學,可用性,交互性,聲音設計或價值,每一個都是其各自行業中的傑作,並受到啟發。

毫不奇怪,存在許多組織來突出顯示這些站點及其對網絡的貢獻。 為了展示一些最鼓舞人心的設計,我收集了 32位獲獎者 這些獎項已經通過了多個主要獎項組織-Awwwards,UX獎,Webby獎,SiteInspire,最佳網站畫廊和FWA。

單擊下面的鏈接,跳轉到一組在過去幾年中被壓垮的網站設計:

在此列表下方,我還發現 另外六個網站 其首頁設計非常酷,值得學習。

當您瀏覽列表時,請知道每個站點都以自己的方式出類拔萃,並致力於實現獨特的目的。 雖然一個站點可能是視覺設計的一個很好的例子,但另一個站點可能是交互性的一個很好的例子。 這意味著並非所有這些站點都可能是“轉換機器”或藍圖,您可以輕鬆地將其複製到站點中。

相反,它們是獲取一些網站設計靈感並查看網絡不同角落中發生的前沿營銷的好方法。

最佳網站設計

  1. 維珍美國
  2. ETQ
  3. 小林美也
  4. 氣候變化的歷史
  5. 比格犬
  6. 編織雜誌
  7. JOHO的豆
  8. 瑞士世界
  9. 雨林守護者
  10. 抗議運動服
  11. 教師行會
  12. 修道院路內
  13. 只是巧克力
  14. 新穎性
  15. Citrix:新的移動勞動力
  16. 密碼交易
  17. 西南:旅行之心
  18. 減速器
  19. 溢出
  20. 弗蘭斯·哈爾斯博物館
  21. 最低要求
  22. 章魚:IDEO設計博客
  23. 游牧部落
  24. 電影標記
  25. 紀堯姆·托馬西(Guillaume Tomasi)
  26. 喬漢
  27. 阿曼達·瑪塔基奧建築
  28. 喬漢
  29. 阿曼達·瑪塔基奧建築

美麗獲獎的網站

獎項授予……

2014年至2015年最佳網站設計

1.維珍美國

獎項:2014年UX大獎:最重要的行業發展

在一個眾所周知的航空公司網站上充斥著主要可用性問題的世界中, 維珍美國 擁有推動可用性,可訪問性和響應式設計向前發展的最佳網站之一。 實際上,它已被稱為第一個真正響應迅速的航空公司網站,這是該行業的新先例。

屢獲殊榮的網站Virgin America的主頁UX Awards推薦

2.飼料

獎:每日最佳地點(6/6/2015),Awwwards

不僅如此 這是一個有趣的概念,但它的執行效果令人讚嘆,這挑戰了我們對網絡上可能發生的事情的理解。 通過動畫和視頻的創造性融合,該網站使用戶沉浸在非常引人入勝的體驗中。 作為一個非典型站點,它還包含幾個獨特的可用性元素,其中包括一個導航,它可以兼作滾動進度條。

Feed網站,屢獲殊榮的網站由Awwwards精選

3。 ETQ

獎:每日最佳地點(5/19/2015),Awwwards

ETQ 他們採用精簡的網站,以非常簡約的方式進行電子商務,其產品的視覺效果十分引人注目。 簡單,平坦,基於顏色的背景以及強大的排版有助於使用戶始終專注於用戶到那裡看到的東西:鞋子。

屢獲殊榮的網站ETQ的主頁由Awwwards精選

4.小林未也

獎:每日最佳地點(7/4/2015),Awwwards

三宮 是一位產品設計師,擁有簡約的作品集,可通過出色的攝影和精美的動畫展示他的作品。 他的完整網站最初是用日語創建的,然後翻譯成英語,以幫助展示其設計的國際可擴展性。

屢獲殊榮的網站小林御也的主頁由Awwwards精選

5.氣候變化的歷史

獎:每日最佳地點(6/23/2015),Awwwards

跟隨Luc Jacquet的腳步,Wild-Touch帶領您完成有關 全球氣候變化的歷史。 歷史媒體和獨特動畫的結合有助於講述故事。

屢獲殊榮的網站《氣候變化史》的主頁由Awwwards精選

6。 比格爾

獎項:每日最佳網站(4/19/2015),最佳網站畫廊

比格犬 在以簡單易懂的方式直觀地並逐步地講述其產品的故事方面做得非常出色。 對於許多初創企業而言,這是一個重大挑戰,尤其是當他們將新概念引入現有市場時。 人們想知道,“您的產品是什麼? 它是如何工作的? 我為什麼在乎?” Beagle回答了所有這些問題,同時展示了他們的產品並吸引了用戶購買。 另外,它們是實際正確實施“滾動劫持”的少數幾個站點之一。

獲獎網站Beagle的主頁最佳網站圖庫精選

7.機織雜誌

獎項:每日最佳網站(4/4/2015),最佳網站畫廊

是一個在線展覽,旨在慶祝藝術家,手工藝人和製造者。 對我來說,它們表示出版物可以(並且應該)擁有漂亮且引人入勝的網站,並具有易於閱讀的內容。 該網站完全沒有內容彈出窗口和引人入勝的廣告之類的干擾,它完全涉及內容本身的體驗。

屢獲殊榮的網站Woven Magazine的主頁最佳網站圖庫精選

8. JOHO豆

獎:每日FWA(8年7月2015日),最受歡迎的網站獎

該網站 JOHO的豆 具有令人難以置信的圖像,交互性,講故事,視覺設計,最重要的是聲音工程。 所有這些因素共同構成了一個引人入勝,充滿情感和吸引力的網站,講述了咖啡豆的旅程。

屢獲殊榮的網站JOHO Bean的主頁FWA精選

9.瑞士世界

獎項:2015年Webby Awards最佳用戶界面

另一家航空公司? 怎麼了?! 是的, SWISS 航空公司建立了一個令人難以置信的身臨其境的網站,講述他們的故事並描述與他們一起飛行的感覺-他們幹得太出色了,不容忽視。 強大的視覺效果和動畫將用戶帶到網站的不同部分,這些部分包含的信息超出了當今非常普遍的通常的銷售和營銷範圍。

屢獲殊榮的網站SWISS世界的主頁由韋比獎頒獎

2016年最佳網站設計

10.雨林守護者

獎:最佳行動主義網站,2016年韋比獎

雨林守護者 成為2016年最令人身臨其境的非營利性網站之一。該網站旨在提高人們對森林砍伐的認識,允許用戶“訪問”構成亞馬遜雨林的各個村莊,當地人和水路。 該網站將交互性放在用戶體驗的中心,這是一個明智的選擇,如果您的目標是使人們與您的事業聯繫起來並轉化為志願者。

Rainforest-guardians-best-website-design-2016

由韋比獎頒獎

11.抗議運動服

獎項:年度最佳網站(2016),Awwwards

Awwwards電話 抗議運動服 一本“可購買的外觀書”,而這正是本網站的內容。 作為服裝裝備商,此網站重塑了他們推銷產品的方式:Protest Sportswear並未宣傳服裝,而是宣傳“外觀”。 這使公司的產品成為網站本身最吸引人的部分,它使用樣式拼貼來設計主頁,該主頁隨客戶樣式的變化而變化。

抗議運動服最佳網站設計2016

由Awwwards精選

12.教師行會

獎:最佳協會網站,2016年韋比獎

教師行會 是一個由教育工作者組成的專業社區,其網站發布的內容可應對當今教育領域中最關鍵的挑戰。 該網站屢獲殊榮的原因在於,它如何平衡各種內容類型(程序,解決方案,方法和協作),而不會淹沒訪問者。 不僅其背景視覺效果突出,而且它們還使用空白強調位於中心的書面號召性用語,如下面的屏幕快照所示。

教師協會最佳網站設計2016

由韋比獎頒獎

13.修道院道內

獎:最佳音樂網站,2016年韋比獎

Google通過這種高度互動的方式將其趕出公園 網站,使用戶可以進入Abbey Road Studios。 出色的聲音設計,導航機制和視覺效果以及通常的“ Google風格”,都有助於吸引訪問者進入這個製作精良的網絡媒體資源。

屢獲殊榮的Google的Inside Abbey Road主頁由韋比獎頒獎

2017年最佳網站設計

14.只是巧克力

獎項:年度最佳網站(2017),Awwwards

只要瀏覽此網站,您就會渴望巧克力-從某種意義上講,這就是 只是巧克力的網站按設計運行。

這個令人垂涎的網站是丹麥巧克力製造商Simply Chocolate的網站。 它的網站使用各種顏色(和創意產品名稱)來宣傳每個巧克力棒。 當您從一種產品滾動到另一種產品時,它們的品牌似乎都保持一致。 每個巧克力棒的三維外觀使您感覺可以將其從計算機屏幕上拿下來,而左上角的“添加到框” CTA則是用戶瀏覽時選擇他們想要的產品的理想選擇。

簡單巧克力最佳網站設計-2017

由Awwwards精選

15.新穎性

獎:最佳文化博客/網站,2017年韋比獎

Nowness可能是當今互聯網上最酷的眾包視頻博客。 那是滿口的……這是什麼意思?

新穎性它的“眾包”性質是使其屢獲殊榮的部分原因。 這意味著其大部分內容來自獨立的廣告素材-企業發佈內容的一種越來越流行的方式。 NOWNESS還是視頻博客,這意味著其所有博客內容均為視頻格式。 這些特質共同使Nowness成為了吸引各地品牌努力講述的故事的迷人中心。

獲獎網站NOWNESS的主頁由韋比獎頒獎

16. Citrix:新的移動勞動力

獎項:每日最佳網站(11/23/2017),最佳網站畫廊

這個網站致力於Red Bull與基於雲的軟件公司Citrix的合作夥伴關係,非常出色。

新的移動勞動力Citrix擁有的一個網站使用全景攝影向訪客展示Citrix如何支持Red Bull Racing的新賽車。 即使您不是賽車迷,也很難忽略該網站巧妙的動畫來解釋複雜的汽車技術。

屢獲殊榮的網站Citrix的The New Mobile Workforce主頁最佳網站圖庫精選

2018年最佳網站設計

17. 加密交易

獎:每日最佳地點(4/3/2018),Awwwards

認識您的機器人會計師crypton.trading。

密碼交易 是比特幣等加密貨幣的交易中心,它使用人工智能來預測貨幣價值的變化並確定主要的買賣機會。 該網站的開發和設計被評為很高,因為它隨著訪客的不斷滾動逐步解釋了更多開發商的方法。

這個屢獲殊榮的網站使Crypton的問候語一次出現在首頁上的那一刻,使精通技術的訪問者感到賓至如歸。

屢獲殊榮的網站crypton.trading的主頁由Awwwards精選

18.西南:旅行之心

獎:最佳視覺設計-審美,2018年Webby獎

當西南航空希望證明其客戶“不僅僅是一個美元符號”時,該公司創建了一個網站,該網站的設計是根據客戶飛行路線的形狀進行組裝的。

該網站名為 旅行之心,甚至允許訪問者在他們可能打算進行的旅行中創建自己的藝術品。 這樣,西南航空公司的網站就是他們最忠實的乘客的產物。

屢獲殊榮的網站西南航空旅行之心的主頁由韋比獎頒獎

19. 減速器

獎:最佳幽默網站,2018年韋比獎

讓某人在互聯網上發笑並不難; 因此,我們在網上閱讀和消費的大部分內容都具有娛樂性。 但是,要讓大量受眾始終如一,就很難了。 減速器 是一本諷刺雜誌,其頭條新聞和一般閱讀經驗是幽默部門中的頭等大事-使網站本身成為優質的財產。

獲獎網站Reductionress的主頁由韋比獎頒獎

20.溢出

獎項:每日最佳網站(3/20/2018),最佳網站畫廊

溢出 是一種設計工具,使人們和企業可以為他們的想法創建類似故事的流程圖,以便其他人更容易理解。 除了提供優質的服務外,Overflow網站還實踐了其所講的內容:除了使用鮮豔的紅色號召性用語按鈕下載工具外,該網站還使用流程圖以其所知的最佳方式推廣其產品。

網站以視頻形式提供此流程圖。 而且,儘管將嵌入的視頻放在網站的其他設計元素中間可能看起來有些笨拙,但是Overflow的位置非常完美,完全是您首次登陸該網站時想要看到的內容。

溢出最佳網站設計2018

最佳網站圖庫精選

21.弗朗斯·哈爾斯博物館

獎項:年度最佳網站(2018),Awwwards

對於一個博物館來說,要想將其全部內容整合到一個具有凝聚力的網站上,可能是一件困難的事,因為博物館的品牌以各種各樣令人難以置信的藝術品為基礎。 這就是使網站成為 弗蘭斯·哈爾斯博物館 令人印象深刻

該博物館位於荷蘭,創建了一個網站,該網站結合了數字設計元素和自己的展品。 這種混合物可以幫助遊客了解他們將看到的東西,何時可以看到的東西以及在其他地方可以欣賞到該博物館所提供的東西。 說到後者,該博物館直接在其主頁上推廣其Instagram帳戶-對於希望通過其在線渠道擴大受眾的博物館而言,這是一個絕妙的舉動。

弗蘭斯·哈爾斯博物館最佳網站設計-2018

由Awwwards精選

2019年獲獎設計

22年1917月:在戰ren中

獎項:Awwwards每日最佳網站

此網站,是為了宣傳電影1917而製作的,使您可以走在戰walk中並執行與電影中的角色相同的任務。 您還可以查看他們的地圖或訪問其他工具。

這是一個很好的例子。 不僅具有互動性,還擁有一個利用自身內容和預先編寫的故事情節來推銷其電影的網站。 該網站贏得了“每日最佳網站” 阿瓦德 這使設計師可以投票並提名他們每天都會看到的出色網站。

1917個首頁

23. 章魚:IDEO設計博客

獎項:商業博客/網站2019韋比獎

全球設計公司IDEO憑藉其Octopus博客贏得了Business Blog / Website 2019 Webby獎,這是有充分理由的。 該博客 以光滑的黑白章魚畫作為主頁設計,並在滾動時使用黃色,黑色和白色來創建具有凝聚力的主題。

如果將鼠標懸停在博客文章上,標題將以黃色突出顯示;如果將鼠標懸停在圖像上,則圖像將被拉向您。這兩個小功能在創建獨特且引人入勝的用戶體驗方面大有不同。

章魚網站

24.游牧部落

獎項:年度Awwwards網站提名

該網站被提名為 年度Awwards網站,是我見過的更具吸引力的網站之一。 主頁立即開始播放令人驚嘆的視頻,視頻中一個男人在沙漠中行走,然後是優美的風景和諸如“您有幸稱自己為冒險家嗎?”之類的文字。

全文 網站 玩法有趣,有色彩鮮豔的粉紅色,橙色和黃色,並且首頁設計合理,CTA的承諾級別從“閱讀更多”到“立即觀看”,最後是“下載應用”。 最終,該網站的設計精美,注重細節,並貫穿整個故事。

游牧部落網站

25.戴安娜(Diana Danieli)

獎:韋比2019

這個2019 Webby 獲獎網站 以高對比度或高曝光度展示藝術和建築的圖像。 作為網站訪問者,您可以單擊並拖動鼠標來更改照片和變體。 每張圖片都顯示了突出顯示擁有網站的藝術家的作品。

屢獲殊榮的室內設計網站

26.中島喬治木工

獎:韋比2019

這個 木工網站 強調對木工行業的自然和關懷。 本質上,這是一張展示美麗的林業和農業圖像的幻燈片。 當新圖像出現在屏幕上時,還會出現與木材或樹木相關的新報價。 這給遊客帶來了令人難以置信的放鬆,表明木工們意識到樹木和環境的美麗。 這個網站也 在2019年贏得了Webbie.

屢獲殊榮的木工網站

其他酷網站設計

27.最低要求

最低要求 利用基於網格的網站設計,大字體和全幅高質量圖像,他們對內容的顯示方式採取了非常大膽的方法。 他們的網站是一個很好的例子,說明如何正確執行網格結構,同時又保持良好的外觀。 視覺層次 在設計中。

最低要求首頁,一個很棒的網站設計

28. 電影標記

MovieMark是一家成長型營銷機構, HubSpot合作夥伴,其網站從頭到腳都在其提供的服務中:數字故事講述。 該公司位於哥倫比亞,將視頻作為其品牌的核心關注點,因此非常適合 電影標記的網站遵循此主題。 哦,其網站上的視頻在視覺上是多麼令人愉悅……

電影標誌酷網站設計

29.紀堯姆·托馬西(Guillaume Tomasi)

作為蒙特利爾的攝影師, 紀堯姆·托馬西(Guillaume Tomasi) 建立了一個真正適合容納他獨特而又令人敬畏的攝影作品的作品集。 他的超現實主義照片風格與他簡單,扁平,空虛和簡約的作品集設計並存,使所有焦點都集中在作品本身上。

他獨特的系列導航加上受藝術畫廊啟發的作品介紹以及完美的滾動互動,使人聯想到真實畫廊的體驗。

紀堯姆·托馬西(Guillaume Tomasi)的主頁,這是一個很棒的攝影網站,30.區

該品牌代理機構認真對待自己的形象,並且應該-為客戶處理所有媒體渠道。 學區的網站獨自一人,是您所見過的一些最美麗的藝術品和攝影作品的旅程。

當您瀏覽網站時,這些具有啟發性的圖塊會迅速變化,而且看起來越古怪,您對了解其過去的工作就越感興趣。

The District主頁,一個帶有抽象設計的酷公司網站

31. Tej Chauhan

喬漢 通過這個引人入勝的網站將印象派藝術品轉變為一種商業模式。 該產品開發人員主頁上的每張圖像均會滑動以覆蓋上一張圖像,從而使您現在看到的物體周圍幾乎沒有任何上下文。

但是,缺乏上下文是否正是您想要了解更多的原因? 標語“近期的紀念品”表明這些物品是其產品線的一部分,也是您將這些創新物品帶入生活的機會。

Tej Chauhan的主頁,這是一個帶有抽象攝影的美麗公司網站設計

32.阿曼達·馬丁科基奧建築

一家建築公司可能未專門從事Web開發,但其網站仍應展示其在視覺上令人愉悅的設計的承諾。 阿曼達·馬丁科基奧(Amanda Martocchio)通過這個華麗的網站將這一點銘記於心。

這已經不是什麼秘密, 阿曼達·瑪塔基奧建築 喜歡它的工作-網站首頁上的每張圖片都是該公司設計的房屋的迷人照片。 該網站會在您滾動瀏覽的每棟房屋上標出預期的設計類型,以及與每棟建築的多個角度。

擁有精美攝影作品的公司網站Amanda Martocchio Architecture的主頁

網站設計思路

既然您已經看到了許多設計精美且屢獲殊榮的平台,那麼在創建自己的平台時請牢記這些潛在的想法。

  • 考慮使網站具有交互性的方法,例如1917年的示例。
  • 創建一個強調移動體驗的網站,即使它在台式機上仍然具有良好的用戶體驗。
  • 創建一個網站,以照片,文字或視頻講述您的品牌故事。
  • 如果您不能創建一個高度互動的網站,請考慮使用一個可以呈現照片幻燈片的網站吸引眼球。
  • 確保您的號召性文字易於查看,並鼓勵訪問者繼續瀏覽您的網站
  • 保持導航清潔。 確保您的訪問者始終知道如何返回首頁。
  • 通過社交嵌入按鈕集成您的社交媒體網站,以便網站訪問者可以輕鬆地通過各種社交渠道關注您。
  • 使每個網頁的設計保持一致-包括字體,顏色,圖像和消息傳遞。
  • 使用來測試您網站的可用性 熱圖,這將向您顯示訪問者最有可能在哪些網頁上反彈。
  • 包括實時聊天或聊天機器人,使訪問者可以選擇直接在您的網站上與您互動,如果他們更喜歡實時聊天而不是電話。 實時聊天可以自動執行銷售和服務代表的功能 並為客戶創造更好的交流體驗。
  • 申請 SSL證書 以確保您的網站安全。 SSL是Google搜索排名算法的一部分,因此SSL證書可以幫助您在搜索中排名更高。

想要更多 網站設計實例? 看看這些驚人的 產品頁面 您將要立即復制。

原始文章