2021年網(wǎng)頁設計趨勢
時間：2023-10-06 23:18:01 | 來源：網(wǎng)站運營
時間：2023-10-06 23:18:01 來源：網(wǎng)站運營
2021年網(wǎng)頁設計趨勢：當世界適應新的一年時，設計師也擁抱新的一年。在經(jīng)歷了這么多年的未知數(shù)之后，我們開始看到趨勢，使我們回到舒適的過去，同時強調(diào)面向未來的用戶體驗。
從在線工作到在線購買到在線社交，人們與互聯(lián)網(wǎng)的互動比以往任何時候都多，而且設計師們正在擁抱大膽的設計，以推動我們共同體驗的界限。
以下是2021年我們看到的11種優(yōu)秀的Web設計趨勢：
- 水平滾動的頁面布局
- 自定義光標
- 3D物體
- 出色的電子商務經(jīng)驗
- 粗線粗的可見網(wǎng)格線
- 網(wǎng)站（不僅是應用程序）上的用戶首選項選項
- 從建設網(wǎng)站到建設解決方案的轉變
- 俏皮插圖
- 字體設計，不僅僅是文字
- 幾何形狀作為背景元素
- WordPress作為CMS
1.水平滾動的頁面布局
長滾動網(wǎng)站和視差設計已經(jīng)流行了好幾年了。當我們進入2021年時，我們開始看到設計師使用水平移動來“減少”頁面長度的方向變化。
盡管用戶的物理體驗沒有什么不同（您通常仍會上下滾動鼠標），但視覺體驗卻帶來了意想不到的有趣的事情。它創(chuàng)建了一個遍歷整個網(wǎng)站的旅程，用戶并不完全知道該去哪里，這很罕見，因為我們已經(jīng)為網(wǎng)站開發(fā)了這種正常的模式。
這個網(wǎng)站是自由電影導演喬尼·古杰（Jony Guedj）的網(wǎng)站，網(wǎng)站的主要部分使用水平滾動條來展示她的作品。底部的彩色條與鼠標一起移動，這是確定頁面上“位置”的有用方法。
專注于設計和電子商務解決方案的代理商LinkSture也使用水平滾動條在其首頁上顯示其投資組合。但是，它在頁面的最下方，同時滾動時同時使用了垂直和水平運動。
虛擬現(xiàn)實工作室We Virtually Are使用水平移動來使您感覺自己像在他們網(wǎng)站上的同一位置，而所有內(nèi)容都在變化。這與您對大多數(shù)網(wǎng)站的期望完全不同，這是專門致力于創(chuàng)造新現(xiàn)實的VR公司的合適體驗。
2.自定義光標
我特別喜歡這種趨勢，因為它既熟悉又新穎。向2000年代中期的自定義游標致敬（承認，您在Myspace個人資料上使用了它?。?，自定義游標正悄然卷土重來。
從最小的幾何形狀到完全交互式的網(wǎng)頁體驗，自定義鼠標光標已成為向品牌添加一些重復的一種小方法。許多代理商正在使用它來重復其徽標中的形狀或顏色，或以此為用戶吸引網(wǎng)站的一種方式。
在精品設計機構Rox Studios的此示例中，鼠標是那個黃色圓圈。它會根據(jù)您懸停的背景內(nèi)容而變化，它本身會變成一個CTA按鈕來“查看”項目。
在第一張圖片中看到那個有趣的小臉嗎？登陸Concept Studio網(wǎng)站時的鼠標。您會在整個站點中看到一些類似的生物，并觀察光標在不同部分的變化。
在第二個屏幕截圖中，鼠標變?yōu)橐桓д龋斈奶幰苿訒r，魔杖甚至會掉落一些小顆粒。它從不破壞內(nèi)容，而只是在您體驗其網(wǎng)站時增加了一種奇思妙想和互動性。
看到那個小白圈嗎？這就是位于法國的前端開發(fā)人員Etienne Pharabot的網(wǎng)站上的鼠標。但是，它所具有的不僅僅是眼神。我強烈建議您滾動瀏覽整個網(wǎng)站上的各個句子。（一些表情符號正在等待驚喜?。?br>
創(chuàng)意機構Impero使用一個大的黃色圓圈作為光標，該光標恰好位于您懸停在其上的所有文本的后面。他們還以此為契機，幫助用戶瀏覽站點，例如在水平滾動部分上顯示“拖動”。（結合一些這些趨勢的好方法?。?br>
3. 3d對象
盡管扁平化設計占據(jù)了相當長的一段時間，但我們開始看到網(wǎng)頁設計中的元素發(fā)生了三維變化。這可能是受到虛擬現(xiàn)實和增強現(xiàn)實技術的興起的啟發(fā)，并滲入我們的二維瀏覽體驗。
來自意大利代理商Chip＆Byte的這個生動的例子為他們的網(wǎng)站添加了一個有趣的元素。隨著光標的移動（灰色小圓圈?。?，形狀也隨之移動，從而增加了尺寸感。
一家名為“ Yellow Telescope ”的公司在其首頁上自豪地展示了一個3d的黃色望遠鏡，這才是對的！當您首次登陸該網(wǎng)站時，您會看到它在每一塊都落入適當位置時“自行構建”，這也許是他們?nèi)绾螏椭蛻艚⒖煽繉嵺`的代名詞。
Beans Agency使用3d趨勢使它們的豆子栩栩如生，并在站點中的多個場景中顯示它們。這種趨勢是使角色動起來或通過抽象的平面插圖給人“逼真的”感覺的好方法。
并非完全按照3D趨勢出售？您總是可以采用微妙的方法，例如C-HM Conseil。單色背景上的優(yōu)雅斜面和發(fā)光效果使材料外觀更加優(yōu)美，而又不至于過于霸道。
4.出色的電子商務經(jīng)驗
毫不奇怪，在線零售在過去的一年中急劇增加，這也帶來了更多有意的，更好的購物體驗。畢竟，隨著越來越多的競爭者爭相將他們的網(wǎng)站上線，僅在互聯(lián)網(wǎng)上存在一家商店已不再是可以接受的。它需要進行優(yōu)化并優(yōu)先考慮用戶體驗，以防止購物者反彈。
寵物商店Minsom可以輕松在其主頁上同時購買商品和服務。使用大按鈕和簡單類別，可以輕松導航，因此您可以快速結帳，而不必花費太多時間在站點周圍進行搜索。
莫莉·杜克（Molly Dooker）這家葡萄酒商店不僅是一個美麗而藝術的現(xiàn)場體驗，而且還是一個購物順暢的地方。瀏覽葡萄酒，預覽購物車中的內(nèi)容，然后購買，都非常容易，同時還可以享受令人愉悅的網(wǎng)站設計。
Zoya的Pantry是一家健康的有機食品商店，可為您的購物車添加多個商品，從而優(yōu)化購物體驗。當您單擊“添加到購物袋”時，您的窗口不會更改，因此您可以繼續(xù)瀏覽而不會丟失頁面上的位置。然后，要查看購物車，只需將鼠標懸停在頂部導航中的圖標上（而不是單擊跳出到單獨的頁面）。
您會在The Cool Club網(wǎng)站上注意到2021年的一些設計趨勢。從輕松的電子商務體驗到他們的產(chǎn)品之一的3D顯示（紙牌游戲！），您都可以很容易地看到您要購買的商品，然后將其放入購物車中。（甚至在首頁上的折頁上方！）
5.可見的網(wǎng)格線，粗線粗細
網(wǎng)格在網(wǎng)頁設計中已經(jīng)有用了很長時間了，但是我們開始看到一種趨勢，即為它們提供流行色或粗線寬。設計師沒有使它們最小化，而是傾向于使用它們在頁面上構建的自然形狀，并使網(wǎng)格線突出以實現(xiàn)大膽的幾何外觀。
Eat Sleep Work使用色彩鮮艷的線條來幫助使他們像Windows的桌面栩栩如生。盡管它們不太厚，但是粗體藍色可以使網(wǎng)格脫穎而出并在整個站點上創(chuàng)建有意的結構。
這個軟件開發(fā)工作室OSM以各種有趣的方式在整個站點上使用網(wǎng)格線。正如您從背景中看到的那樣，他們以自己的品牌傾向于粗線粗細和幾何樣式，并以多種不同方式（包括網(wǎng)格布局）重復進行此操作。
不確定粗體網(wǎng)格線是否適合您的網(wǎng)站？您可以嘗試使用“負空間”方法，例如設計師和藝術總監(jiān)馬瑞（Rui Ma）。它比用對比色強調(diào)網(wǎng)格要微妙得多，但是寬的間距仍然可以使幾何感覺閃耀。
6.網(wǎng)站（不僅是應用程序）上的用戶首選項選項
創(chuàng)建獨特的，個性化的體驗正變得越來越流行，而Web設計人員做到這一點的一種方法是在網(wǎng)站設計中加入各種選擇。從諸如亮模式與暗模式之類的首選項到諸如使用哪種語言的可訪問性選項，這種趨勢都在于向用戶提供對其站點體驗的更多控制權。
當您加載Hoang Nguyen的網(wǎng)站時，您會立即看到音頻的選項。默認設置為“關閉”，因此即使站點在您做出選擇之前就已加載，也不會使您大吃一驚（盡管即使將其設置為“打開”，也不會讓您驚嘆；這是非常平靜的音樂！） 。這使您能夠立即自定義您的體驗，并且如果您以后改變主意，則可以在網(wǎng)站頂部的他的徽標旁邊找到聲音選項。
Sofia Papadopoulou的網(wǎng)站類似，它提供音頻設置，但它們固定在右下角（傳統(tǒng)上您可能會在此找到一個粘滯的自上而下的按鈕。）盡管該默認設置再次設置為“ off”，盡管聲音只包含鎮(zhèn)靜器樂（沒什么瘋狂的）。
這個來自法國創(chuàng)意代理商Studio OUAM的示例使您可以輕松地選擇瀏覽網(wǎng)站時要使用的語言。在菜單頂部列出的菜單中，他們提供了法語或英語選項，從而針對兩個主要受眾量身定制了他們的網(wǎng)站。
7.從構建網(wǎng)站到構建解決方案的轉變
盡管網(wǎng)頁設計比以往任何時候都重要（即使在冠狀病毒時代更為重要），但代理機構也開始將重點轉移到全解決方案銷售上，而不是單個可交付的產(chǎn)品上。例如，創(chuàng)意工作室可能不稱自己為Web設計代理商，而是稱自己為“品牌體驗合作伙伴”，或稱其提供的全部價值（不僅僅是有形的部分）。
這就是Soda Studios，這是“創(chuàng)新合作伙伴，設計工作室和實驗室”。他們不是太在乎列出他們所提供的每項單獨服務，而是專注于為客戶提供整體解決方案。
BORN Group是“以人為本的經(jīng)驗驅(qū)動的全球數(shù)字代理商”。他們確實有一個服務頁面，可以詳細了解所提供的服務，但即使如此，它也著眼于更廣闊的前景，提供品牌體驗，服務設計和創(chuàng)新等服務。
Kappow是一家專注于網(wǎng)頁設計的數(shù)字代理商，但您不一定會從他們的主頁上知道它。相反，他們分享了他們的工作真正為客戶提供的價值：業(yè)務增長，成功的產(chǎn)品發(fā)布以及相對于競爭對手的優(yōu)勢。（誰不想要所有這些？?。?
8.俏皮的插圖
插圖的興起已經(jīng)增長了幾年，但我們還沒有看到它的發(fā)展。這是在網(wǎng)站上添加“人為”元素的好方法，尤其是在您無法與優(yōu)秀的攝影師接觸并希望避免使用庫存照片的情況下?；蛘撸绻?您的代理商專門研究插圖，那么這是炫耀您的作品的理想方式！
在RUYA的品牌和數(shù)字代理機構的網(wǎng)站上瀏覽世界真是太好了。他們已經(jīng)為插圖提供了整個頁面的寬度，從而在您加載頁面后就成為了熱門。甚至更好：將鼠標懸停在圖像的各個部分上時，您會發(fā)現(xiàn)它充當導航元素，可幫助您了解有關其代理，服務和工作的更多信息。
這些來自網(wǎng)頁設計機構UPQODE的古怪插圖與動畫相結合，使它們真正栩栩如生。您可以觀看它們的顏色，大小以及相互之間的交互，從而獲得有趣的首頁體驗。
如果完整的插圖不太適合您的品牌，則總是可以選擇使用它們作為重音符號，就像No Clima一樣。您會在整個網(wǎng)站的照片上找到“涂鴉”，從而賦予其手工制作的藝術感。如果您想同時使用插圖和攝影，這也是一種很好的方式！
9.版式不僅是文字，而且是設計
有時言語是實用的，有時言語是藝術。如今的網(wǎng)頁設計師不怕將它們用于第二個目的，因為它更多的是設計元素，而不是段落或正文。
盡管仍然清晰易讀，但反烏托邦廣告素材首頁上的文字卻以引人注目的方式模糊了實際與視覺之間的界線。與段落相比，它更像是背景圖案，并且以有趣的方式與頁面上的其他圖像進行交互。
全方位服務的廣告素材代理商Loop在其首頁上將類型用作背景元素，并在頂部使用了易于閱讀的段落。由于背景字體大小很大（并且?guī)в悬S色的陰影），因此您的眼睛可以閱讀兩組文本，而不會感到困惑。我也喜歡它提示用戶滾動的方式，以回答“為……設計什么？”的問題。
當您在此網(wǎng)站上瀏覽Stone＆Style時，您會看到每個標題都是正常的文本塊，但還會在背景中以大襯線字體回顯，從而使頁面出血。這是一種在不聽起來重復的情況下重復發(fā)送消息的好方法，并且在您嘗試閱讀背景文本所說的內(nèi)容時（在發(fā)現(xiàn)模式之前），為網(wǎng)站增添了優(yōu)雅的神秘感。
10.幾何形狀作為背景元素
當涉及到您的網(wǎng)站設計時，請不要考慮太多。盡管幾何形狀可能感覺太“簡單”，但它們卻是熟悉且不復雜的（兩種品質(zhì)都對用戶體驗有好處?。?。有了如此強大的構建基塊，您可以做很多事情來將代理商的品牌打上烙印，因此它們看起來很簡單。
來自四柱的此示例使用簡單的形狀（基本上只是塊和點！），并根據(jù)用戶的滾動進行了移動配對，以創(chuàng)建動態(tài)的幾何體驗。向下滾動頁面時，您會看到積木逐漸堆積并分解，不斷變化以不斷講述故事。（如果您想休息一下，那兒可能還會有一個“ Pong”游戲的復活節(jié)彩蛋?。?
雖然從技術上講，“快樂大妮”上五顏六色的橢圓形形狀可能不是幾何形狀，但它們確實可以達到相同的趣味效果。搭配她的品牌色彩，它們?yōu)樗挠⑿坌蜗筇峁┝艘粋€很好的框架，并且您會在網(wǎng)站上看到它們以新的方式重復出現(xiàn)。
通訊工作室Blab還在其首頁上使用了幾乎是幾何形狀的形狀。當您停留在頁面上時，這些圓形/橢圓形/卵形的圖案會增長和縮小，然后在開始滾動時會移到一邊。它們使我想起揚聲器發(fā)出的聲音，該聲音與“您的聲音更大”頁面上的副本完美匹配。
這個色彩繽紛的工作室illo在首頁的主要信息后面使用了幾何形狀。當您將鼠標懸停在帶下劃線的短語上時，其中一個形狀將移動以顯示其中的圖像，這是炫耀其第一焦點的巧妙方法-運動設計。
11. WordPress作為CMS
最后但并非最不重要的一點是，這些網(wǎng)站的建設方式。（畢竟，如果后端沒有達到您所需的目的，那么前端的外觀就無關緊要！）
WordPress現(xiàn)在為超過40％的互聯(lián)網(wǎng)提供動力。這幾乎是所有網(wǎng)站（包括非基于CMS的網(wǎng)站）的一半，這很可能是由于CMS多年來真正變得如此靈活的緣故。
不賣了嗎？本綜述中的所有網(wǎng)站均由WordPress提供支持，為您提供了可以使用它構建的一切的絕佳示例！從可以幫助您快速入門的精美主題到可以幫助您擴展功能的55,000多個免費插件，WordPress幾乎可以做任何事情。
您如何看待2021年的這些網(wǎng)頁設計趨勢？您是否同意自定義光標的興起，還是認為3D設計只是一種時尚？在下面的評論中讓我們知道您喜歡的趨勢，或者您認為該列表中缺少哪些趨勢！
在線咨詢