2021.（加個“1”感覺不好嗎？！”）

在世界適應新的一年的同時，設計師也在迎接新的一年的設計。 在經歷了這麼多未知的一年之後，我們開始看到一些趨勢，這些趨勢將我們帶回到舒適的過去，同時強調著眼於未來的用戶體驗。

從在線工作到在線購物再到在線社交，人們與互聯網的互動比以往任何時候都多，設計師們正在採用大膽的設計來突破我們共同體驗的界限。

雖然這絕不是詳盡無遺的，但以下是我們在 2021 年看到的 11 個頂級網頁設計趨勢：

1. 具有水平滾動的頁面佈局
2. 自定義光標
3. 3d 對象
4. 出色的電子商務體驗
5. 具有粗線寬的可見網格線
6. 網站上的用戶偏好選項（不僅僅是應用程序）
7. 從構建網站到構建解決方案的轉變
8. 有趣的插圖
9. 排版作為設計，而不僅僅是文字
10. 作為背景元素的幾何形狀
11. WordPress 作為 CMS

1. 水平滾動的頁面佈局

長滾動網站和視差設計已經流行了好幾年了。 隨著我們進入 2021 年，我們開始看到設計師使用水平移動來“減少”頁面長度的方向轉變。

雖然用戶的物理體驗沒有什麼不同（您通常仍然上下滾動鼠標），但視覺體驗提供了一些意想不到的有趣的東西。 它創建了一個跨網站的旅程，其中用戶並不完全知道它將把他們帶到哪裡，現在我們已經為網站開發了這樣的正常模式，這種情況很少見。

該網站是為自由電影導演 Jony Guedj 設計的，她在網站的主要部分使用水平滾動條來展示她的作品。 底部的彩色條會隨著您的鼠標移動，這是一種確定您在頁面上“位置”的有用方式。

LinkSture 是一家專注於設計和電子商務解決方案的機構，它也使用水平滾動在其主頁上顯示其產品組合。 但是，它在頁面的下方，在滾動時使用垂直和水平運動的組合。

We Virtually Are 是一家虛擬現實工作室，它使用水平移動來讓你感覺自己在他們網站上的同一個地方，而所有內容都在變化。 這與您對大多數網站的期望完全不同，這對於一家專注於創造新現實的 VR 公司來說是一種合適的體驗。

2.自定義光標

我特別喜歡這種趨勢，因為它感覺既熟悉又新鮮。 向 2000 年代中期的自定義光標致敬（承認吧，您在 Myspace 個人資料中使用過一個！），自定義光標正在優雅地捲土重來。

從最小的幾何形狀到完全交互式的網頁體驗，自定義鼠標光標正在成為一種為您的品牌添加一些重複的小方法。 許多代理機構正在使用它來重複其徽標中的形狀或顏色，或者作為吸引用戶訪問網站的一種方式。

在精品設計機構 Rox Studios 的這個例子中，鼠標就是那個黃色的圓圈。 它會根據您懸停的背景內容而變化，變成一個 CTA 按鈕本身來“查看”項目。

看到第一張照片中那張有趣的小臉了嗎？ 當您登陸概念工作室的網站時，您的鼠標。 您會在整個站點中看到一些類似的生物，並且還會觀察不同部分的光標變化。

在第二個屏幕截圖中，鼠標變成了一根魔杖，當你四處移動時甚至會掉落一些小顆粒。 它從不破壞內容，而是在您體驗他們的網站時添加一些奇思妙想和互動的元素。

看到那個小白圈了嗎？ 這是您在 Etienne Pharabot 網站上的鼠標，該網站是位於法國的前端開發人員。 然而，它的意義遠不止眼前所見。 我強烈建議滾動瀏覽整個網站的各種句子。 （一些表情符號驚喜等待著！）

Impero 是一家創意機構，它使用一個黃色的大圓圈作為光標，很好地落在您懸停的任何文本後面。 他們還利用它作為幫助用戶瀏覽網站的機會，例如在水平滾動部分上顯示“拖動”。 （結合其中一些趨勢的好方法！）

3. 3d 物體

雖然扁平化設計統治了很長一段時間，但我們開始看到網頁設計元素的三維變化。 這可能是受到虛擬和增強現實興起的啟發，它們滲透到我們的二維瀏覽體驗中。

這個來自意大利代理公司 Chip&Byte 的色彩繽紛的例子為他們的網站增添了有趣的元素。 當您移動光標（小灰色圓圈！）時，形狀也會移動，增加維度感。

一家名為“Yellow Telescope”的公司在他們的主頁上自豪地展示了一台 3d、黃色的望遠鏡，這感覺很對！ 當您第一次登陸該網站時，您會看到它“自行構建”，因為每個部分都已到位，這可能是他們如何幫助客戶建立可靠實踐的同義詞。

Beans Agency 使用 3d 趨勢使他們的豆子栩栩如生，並在整個網站的多個場景中展示它們。 這種趨勢是一種給角色帶來動感的好方法，或者在抽象的平面插圖上給人一種“現實”的感覺。

沒有完全按照 3d 趨勢出售？ 你總是可以採取一種微妙的方法，比如 C-HM Conseil。 單色背景上的優雅斜面和發光傾向於材料外觀而不是霸道。

4. 出色的電子商務體驗

毫不奇怪，在線零售在過去一年中急劇增長，這也帶來了更多有意、更好的購物體驗。 畢竟，隨著越來越多的競爭對手爭相上網，商店不能僅僅存在於互聯網上。 它需要優化並優先考慮用戶體驗，以防止購物者反彈。

Minsom 是一家寵物商店，可以輕鬆地直接從其主頁購買物品和服務。 使用大按鈕和簡單的類別，導航很容易，因此您可以快速結帳，而不是花太多時間在網站上搜索。

這家名為 Molly Dooker 的葡萄酒商店不僅是一次美麗而富有藝術氣息的現場體驗，而且是一次順暢的購物體驗。 您可以輕鬆瀏覽葡萄酒、預覽購物車中的商品，然後進行購買——同時享受令人愉悅的網站設計。

Zoya's Pantry 是一家健康有機食品店，可優化購物體驗，以便將多個商品添加到您的購物車中。 當您單擊“添加到包”時，您的窗口不會改變，因此您可以繼續瀏覽而不會丟失您在頁面上的位置。 然後要查看您的購物車，您只需將鼠標懸停在頂部導航中的圖標上（而不是點擊到單獨的頁面）。

您會在 The Cool Club 網站上註意到 2021 年的一些設計趨勢。 從輕鬆的電子商務體驗到他們產品之一的 3D 展示（紙牌遊戲！），您可以輕鬆查看您購買的商品，然後將其放入購物車。 （甚至就在首頁的首屏！）

5.粗線寬的可見網格線

長期以來，網格在網頁設計中一直很有用，但我們開始看到一種趨勢，即賦予它們一種流行的顏色或粗線條。 設計師並沒有將它們保持最小化，而是傾向於他們在頁面上構建的自然形狀，並使他們的網格線脫穎而出，以實現大膽的幾何外觀。

Eat Sleep Work 使用彩色線條來幫助他們的 Windows 式桌面栩栩如生。 雖然它們不太厚，但大膽的藍色可以使網格脫穎而出並在整個網站上創建有意的結構。

這個軟件開發工作室 OSM 在整個站點中以一些有趣的方式使用網格線。 正如你從背景中看到的那樣，他們的品牌傾向於粗線條和幾何風格，並以多種不同的方式重複這一點，包括網格佈局。

不確定粗體網格線是否適合您的網站？ 你可以嘗試像設計師和藝術總監馬睿那樣的“負空間”方法。 它比用對比色強調網格更微妙，但寬間距仍然允許幾何感覺閃耀。

6. 網站上的用戶偏好選項（不僅僅是應用程序）

創建獨特的、個性化的體驗變得越來越流行，而網頁設計師這樣做的一種方式是在網站設計中構建選項。 從淺色模式與深色模式之類的偏好到使用哪種語言之類的可訪問性選項，這種趨勢都是為了讓用戶更好地控制他們的網站體驗。

當您加載 Hoang Nguyen 的網站時，您會立即看到音頻選項。 默認設置為“關閉”，因此即使網站在您做出選擇之前加載，它也不會嚇到您（儘管設置為“開啟”也不會；這是非常平靜的音樂！） . 這使您能夠立即自定義您的體驗，如果您稍後改變主意，則在網站頂部的徽標旁邊有一個聲音選項。

Sofia Papadopoulou 的網站與此類似，它提供音頻設置，但它們被固定在右下角（傳統上您可能會在此處找到一個粘性返回頂部按鈕。）默認設置再次設置為“關閉”，儘管僅包含平靜器樂的聲音（沒有瘋狂）。

這個來自法國創意機構 Studio OUAM 的示例可以讓您在瀏覽他們的網站時輕鬆選擇要使用的語言。 列在菜單頂部，他們提供法語或英語選項，為他們的兩個主要受眾量身定制他們的網站。

7. 從構建網站到構建解決方案的轉變

儘管網頁設計與以往一樣重要（即使在冠狀病毒時代甚至更加重要），但代理商開始將重點轉移到完整解決方案的銷售上，而不是單獨的可交付成果。 例如，創意工作室可能不會稱自己為網頁設計機構，而是將自己稱為“品牌體驗合作夥伴”，或者其他指代他們所提供產品的全部價值（不僅僅是有形部分）的東西。

這是 Soda Studios，一個“創新合作夥伴、設計工作室和實驗室”。 他們不太關心列出他們提供的每一項單獨服務，而是專注於為客戶提供整體解決方案。

BORN Group 是一家“以人為本的體驗驅動的全球數字機構”。 他們確實有一個服務頁面，可以詳細了解他們所提供的服務，但即便如此，它也側重於品牌體驗、服務設計和創新等服務的大局。

Kappow 是一家專注於網頁設計的數字機構，但您不一定從他們的主頁上知道它。 相反，他們分享他們的工作真正為客戶提供的價值：業務增長、成功的產品發布以及相對於競爭對手的優勢。 （誰不想要這一切？！）

8. 有趣的插圖

插圖的興起幾年來一直在增加，我們還沒有看到它會在任何地方發展。 這是向您的網站添加“人”元素的好方法，特別是如果您無法接觸到優秀的攝影師並且想要避免庫存照片。 或者，如果您/您的代理機構專注於插圖，這是展示您作品的完美方式！

在品牌和數字機構 RUYA 的網站上瀏覽真是一個美妙的世界。 他們已經為他們的插圖提供了他們主頁的全寬，一旦你加載頁面，它就會非常引人注目。 更好的是：當您將鼠標懸停在圖像的某些部分上時，您會發現它用作導航元素，幫助您了解更多關於他們的代理、服務和工作的信息。

這些來自網頁設計機構 UPQODE 的古怪插圖與動畫相結合，讓它們真正栩栩如生。 您可以看到它們改變顏色、大小並相互交互，從而獲得有趣的主頁體驗。

如果完整的插圖不太適合您的品牌，則始終可以選擇將它們用作口音，就像 No Clima 一樣。 您會在整個網站的照片上找到“塗鴉”，賦予其手工製作的藝術感。 如果您對兩者都感興趣，這也是結合插圖和攝影的好方法！

9. 排版作為設計，而不僅僅是文字

有時文字意味著實用，有時它們意味著藝術。 而今天的網頁設計師並不害怕將它們用於第二個目的，更多的是作為設計元素而不是段落或正文。

雖然它仍然清晰易讀，但 Dystopian Creatives 主頁上的文字以引人注目的方式模糊了實用和視覺之間的界限。 它感覺更像是一個背景圖案而不是一個段落，並以有趣的方式與頁面上的其他圖像交互。

Loop 是一家提供全方位服務的創意機構，在其主頁上使用字體作為背景元素，並在頂部使用更易於閱讀的段落。 因為背景字體太大（以及漂亮的黃色陰影），您的眼睛可以閱讀兩組文本而不會感到困惑。 我也喜歡它提示用戶滾動來回答問題的方式，“為……設計什麼？”

當您向下滾動此站點以查看 Stone & Style 時，您會看到每個標題都是正常的文本塊，但也會在背景中以大襯線字體回顯，從頁面流血。 這是一種重複信息而不聽起來重複的好方法，並在您嘗試閱讀背景文本所說的內容時（在您發現模式之前）為網站增添一絲優雅的神秘感。

10. 幾何形狀作為背景元素

當涉及到您的網站設計時，不要想太多。 雖然幾何形狀可能感覺過於“簡單”，但它們既熟悉又不復雜（這兩種品質都有利於用戶體驗！）。 有瞭如此強大的構建模塊，您可以做很多事情來將您的代理機構的品牌放在他們身上，所以他們感覺起來一點也不簡單。

這個來自fourpillars 的示例使用簡單的形狀（基本上只是塊和點！）與基於用戶滾動的運動配對，以創建動態的幾何體驗。 當您向下滾動頁面時，您會看到積木自行構建和分解，不斷變化以繼續講述故事。 （如果你想休息一下，那裡可能還有一個“乒乓”遊戲復活節彩蛋！）

雖然 Oh Happy Dani 上五顏六色的橢圓形形狀在技術上可能不是幾何形狀，但它們確實達到了同樣的俏皮效果。 搭配她的品牌顏色，它們在她的英雄形象背後構成了一個很好的框架，你會看到它們以新的方式在整個網站上重複出現。

通信工作室 Blab 在其主頁上也使用了幾乎幾何的形狀。 當您停留在頁面上時，這些圓形/橢圓形/蛋形圖案會增大和縮小，然後在您開始滾動時移到一邊。 它們讓我想起了揚聲器發出的聲音，這與“你的聲音更響亮”頁面上的副本完美搭配。

這個色彩繽紛的工作室 illo 在主頁上的主要信息後面使用幾何形狀。 當您將鼠標懸停在帶下劃線的短語上時，其中一個形狀將移動以顯示其中的圖像，這是展示其第一個焦點 - 運動設計的巧妙方式。

11. WordPress 作為 CMS

最後但同樣重要的是，這些網站是如何構建的。 （畢竟，如果後端不能滿足您的需要，那麼前端看起來有多棒都沒有關係！）

WordPress 現在為超過 40% 的互聯網提供支持。 這幾乎是所有網站的一半（包括那些不是建立在 CMS 上的網站），這可能是由於 CMS 多年來真正變得非常靈活。

不賣嗎？ 本綜述中的所有網站均由 WordPress 提供支持，為您提供一個很好的示例，說明您可以使用它構建的所有內容！ 從幫助您快速入門的精美主題到幫助您擴展功能的 55,000 多個免費插件，WordPress 幾乎可以做任何事情。

您如何看待 2021 年的這些網頁設計趨勢？ 您是否同意自定義光標的興起，或者認為 3d 設計只是一種時尚？ 在下面的評論中讓我們知道您喜歡哪些趨勢，或者您認為此列表中缺少哪些趨勢！