2019年的20個網頁設計趨勢
作者：約翰摩爾威廉姆斯
設計師有一種......焦慮......與趨勢觀念的關係。一方面，跟隨人群感覺不對 - 畢竟，除了其他人正在做的事情之外，創造力是不是做了什麼？對於這種思路，瞭解什麼是時髦的唯一價值就是知道你在推動什麼。當然，你不能簡單地做出與趨勢相反的事情。但是，瞭解趨勢是什麼使得更容易巧妙地評論和/或批評它們。
另一方面，有一種觀點認為“創造力就是知道如何隱藏你的訊息來源” - 這句話通常歸功於愛因斯坦，雖然更可能是幽默作家CEM Joad創造的。（適當的，沒有？）
無論哪種方式，都不難知道什麼是時髦的。只需將眼睛從智慧手機上抬起，然後環顧四周 - 或者不要！
重要的是瞭解趨勢的出現和採用的方法和原因。因為在一天結束時，趨勢有很多可以告訴我們關於我們的文化時刻：我們喜歡什麼，我們討厭什麼，我們想要走向什麼。我們越接近理解這些東西，我們越接近其他人的頭腦 - 同情他們。而且，真的，要了解自己。
畢竟，當未來的藝術史學家，時尚評論家和網頁設計師回顧我們當前的時代時，他們所看到和評論的將是我們今天最重要的趨勢。當他們討論20年代的美學時，他們 真的 會討論什麼是時髦的 - 以及是什麼逆勢而上。
因此，趨勢正在形成。
考慮到所有這些，讓我們看看未來的歷史學家今天會說些什麼。在一些現代品味製造者的幫助下。
我們的第一個貢獻者是 Zack Onisko ，@ edbbble的 執行長，酷爸爸，吉他noodler。
1.三維圖示
正當你認為未來趨於平淡時，像Pitch和Stripe這樣的品牌正在以一種新舊的插圖形式投入品牌重量：3D。
不滿足於Slack推廣的剪裁插畫風格，設計師們希望為圖形新增深度和逼真度，以模糊數字和物理世界之間的界限。
從某種意義上說，這會增強數字產品與人類之間的對比度，即使它將它們組合到人們可以掌握和操縱數字元素的虛構空間中（如Pitch的英雄部分中的圖形和圖示）。你會情不自禁地想到Facebook的真正破壞是它使我們及其使用者進入產品的方式，並且想知道設計師是否潛意識地推翻這一觀念。
當然，如果是這種情況，這感覺就像是一種漸進的演變。這些設計並沒有給人們帶來他們的人性，因為他們將平面插圖渲染成卡通片。
考慮到這一點，也許Stripe更現實的信用卡動畫提供了未來的一瞥，物理和數字可以這樣呈現。
2.從俏皮的文字標記到嚴肅的標誌 - 也就是品牌標識的Helvetic化
在2018年，我們看到幾個高度可見的品牌從令人愉快的古怪品牌身份變為更多...... 咳咳 ......預期......無襯線。
或者，正如我想說的那樣：所有品牌標識最終都會產生Helvetica版本。
左邊是Old Marketo標誌，右邊是新的。 來源 。
可以說是最合適的品牌重塑：左邊是MailChimp經典，右邊是Mailchimp 2.0。請注意套管的變化！ 來源 。
優步這個我們喜歡在左邊討厭的品牌，優步試圖擺脫它醜陋的過去。 來源 。
當然，我們想到的三個品牌都沒有直接進入舊備用品。其中一個 - Mailchimp - 朝著一個誠實地感覺 更 適合一個品牌的方向發展，這個品牌將獨特的聲音和俏皮的品牌資產作為其營銷的基石。
儘管如此，對於這些公司中的每一家公司而言，品牌重塑都可能讓人感覺有點過於熟悉的演變，即你不能不公平地稱之為沉悶乏味的社團主義。
也就是說，你不得不懷疑這種從可識別的古怪到普遍無聲的轉變是否與認知流暢的概念有關：我們對之前經歷過的這種觀念最為滿意。
世界上最大，最熟悉的品牌都擁有無襯線標識，毫無疑問，朝這個方向邁出的一步被視為公司成熟的標誌。從這個意義上講，這是一種我們希望一次又一次看到的元趨勢，2019年不太可能是例外。
3.概述型別
像任何設計驅動的品牌一樣，我們在Webflow上都是排版的忠實粉絲，所以我們總是在尋找文字中的新趨勢（請在下面查詢更多內容！）。
因此，當Zack在概述型別中撥出新興趨勢時，我們跳了起來，看看字形中的新東西對我們來說是什麼。事實證明 - 它是空的。
有一種難以捉摸的東西，這種半文，一半的文字立即吸引並盯著眼睛，要求你遵循字形到他們的自然結論。這使得它成為一些非常方便的技術，可用於一些令人難忘的品牌。
在一個厚重的無襯線字型主宰品牌的世界裡，視覺上更輕盈的字型肯定會捕捉到傳統的感覺 - 但不同。這最終是任何新品牌所需要的：感覺它既具有革命性 又 值得信賴。
4.野蠻主義的持續上升
未來將是殘酷的。
（太真實了？我知道。抱歉。）
如今，野蠻主義的近臉美學似乎特別具有吸引力。無論是作為一個自然鐘擺擺脫最近主導網路的“乾淨”和“極簡”風格 - 拒絕百萬品牌的聲音和插圖的可愛友善，面對所謂的“中指”同質的網路，“或者是對網路日常超現實的事實和虛構的混合的抵制行為 - 不可否認的是，野蠻主義已經脫離了設計的亞文化，進入了完全烙印的聚光燈。
需要舉例？我們抓到你了：
它超越了內部會議海報和迭代概念。Squarespace最近的重塑品牌通過紐約市的堅韌視覺審美和傲慢的個性來接受野蠻主義：
仍然來自 brand.squarespace.com 。
野蠻主義的持久力表明設計趨勢的出現和採用的一個有趣的方面讓我想起90年代後期的流行朋克現象（這是為了約會自己！）：無論趨勢如何，無論多麼“反叛”或“在你的臉上“看起來乍一看，它可以而且將會被選為熱門市場。從“亞文化”趨勢到主流支柱的增長可以延續多年。
儘管我已成為大膽開拓性野蠻主義試圖推進的粉絲，但我會問設計師一件事：
記住， 請 ，還有人在那裡誰發現充滿了令人目不暇接，零散型和顏色閃爍的狂熱的動畫 非常迷惑 。
設計，像任何其他創造性的追求，並不一定適合每一個人所有的時間-但請記住，如果你選擇在你的設計工作這樣的事情，你 的 決定，你的工作 是不是 為那些誰將會發現它令人目不暇接，令人作嘔，並且勢不可擋。
但這些東西對野蠻人的設計來說並不是必需的。如果您希望建立一個關於野獸派美學的可訪問性，請檢視David Copeland的 野獸派設計指南 ，它提醒我們：
預設情況下，所有螢幕和裝置都可讀取按預期使用HTML且沒有自定義樣式的網站。只有設計行為才能使內容的可讀性降低，儘管它可以使內容更多。
大粉紅箭頭礦。
5.更多樣化，反傳統的插圖風格
在她 對Slack工作的 驚人細節和令人著迷的案例研究中，插畫家Alice Lee提醒我們：
當我們超越我們的直接同行，競爭對手和行業尋求靈感來源時，真的很棒的事情發生了。
雖然很容易看到Alice的工作在SaaS產品公司和其他創業公司之間開啟了一種越來越同質的說明風格，但是除了Alice以外的其他設計師在其他領域挖掘豐富的工作環境並不需要花費 大量 時間。
例如在Medium和Intercom上探索的 photocollage風格 。
Medium的登入頁面向您介紹了他們獨特的編輯插圖風格。
請注意在文字內容中加入野獸派重複。
但我們也看到人們受到造紙工藝物理性的啟發：
三維化採用Alice的大多數扁平剪裁風格：
紙船 通過加SHIR
在豐富多彩的物理/數字景觀中，例如CrowdRise當前主頁中所見：
在所有這些中，不容易看到Alice Lee為Slack工作的回聲 - 她的聲音已經成為現代設計時代精神的一部分。但是他們每個人都以有趣的方式擴充套件自己的聲音，展示了向外看其他人正在做的事情所固有的創造潛力，並且即使試探性地開闢了你自己的蹤跡。
我們甚至看到設計師採用更抽象和超現實的方法來說明不太具體的想法，比如保持鬥志：
賈斯汀特蘭的“ 如何保持鬥志 ”的illo。
或“生命週期營銷”：
作為一個抽象的藝術愛好者，我非常期待看到更多富有表現力的，暗示性的作品在網路上彈出。
6.更具冒險精神和復古風格
雖然標誌設計工作可能會繼續趨於同質化，但我們和Zack 也 看到了一些更古怪的選擇，例如Mailchimp採用了著名的Cooper Black字型（Tootsie Roll成名！）作為其品牌字型：
摘要與Grilli Type的America Mono一起搖晃著厚厚的Vesterbro Black（以及Regular和Heavy）：
在巴勃羅·斯坦利（Pablo Stanley）最近的插相簿（ 充滿 了愛麗絲·李的回聲！）中，令人愉快的胖乎乎的 Recoleta ， Humaaans 。
我們在2018年宣佈 了襯線字型的文藝復興時期 ，但似乎2019年可能會把它更奇怪，更懷舊的腳向前推 - 至少在頭條新聞中。上面的每個復古面都具有完整的重量範圍，使其成為編輯工作所需的靈活性的完美選擇。
謝謝你的趨勢，Zack！
我們的下一個貢獻者是 Sacha Grief ，一位居住在日本京都的設計師，開發人員和企業家。你可能從他精彩的（和最小的） 精選 網站和時事通訊， 補充工具欄 或 Vulcan.js中 認識他。
他非常友好地做了他自己的簡短寫作，所以這是Sacha的趨勢列表，用他自己的話說：
7.包容性設計
關於可訪問性的重要性已經寫了很多行，但是將它重新命名為“ 包容性設計 ”，並且你有一個全新的無人認領的流行詞來撰寫書籍和論文！
除了開玩笑之外， 考慮各種使用者的需求從來都不是壞事 ，如果需要一個時髦的概念來幫助我們做到這一點，我會接受它。
編者注：正如您在上面的螢幕截圖中看到的那樣，包容性設計的倡導者通常會訴諸於 包容性/可訪問性設計 如何幫助品牌實現業務目標。邏輯是合理的，但他們不應該這樣做。
為人們騰出空間並容納他人是一種簡單的人性行為，如果你在設計過程中建立包容性思維，成本只不過是增量，最終可以改善每個人的使用者體驗。
畢竟：我們有時都是殘疾人。
8.設計+程式碼
雖然我們都在為設計師是否應該學習編碼感到痛苦，但我們中的一些人卻默默地做到了這一點 - 並利用我們新發現的知識開發出更好的設計工具。我們正在看到像 Figma 或 Framer X 這樣的新設計工具，通過API和外掛系統實現更緊密的編碼整合。
編者注：更不用說像Webflow這樣的工具，它直接跳過API和外掛來讓你 設計程式碼 。哦，如果你是Figma粉絲，你應該檢視設計師Charli Marie關於將Figma設計轉換為功能性Webflow站點的視訊：
9.大膽的排版
出於某種原因，任何設計趨勢列表都必須包含“大膽的排版”。從1439年開始就像排版一樣，你不會真的出錯。（好吧，除了2013年那個短暫的時期，Apple決定現在應該在Helvetica Neue Ultra Light中設定一切）。
編者按： 罪魁禍首 ，薩莎。更多關於此的資訊。
我們的下一個貢獻者是無與倫比的 巴勃羅·斯坦利 。當Pablo沒有為InVision設計好東西，或者用他富有洞察力的，有特色的插圖讓設計世界驚歎時，他似乎非常喜歡深入研究Webflow。
特別是自從我們推出......
10. CSS網格
聖鼴鼠！我喜歡Grid，夥計！
-Pablo Stanley
對於許多網頁設計師和開發人員來說，flexbox提供了一種聖盃。它回答瞭如何在垂直和水平方向正確定位事物的古老問題。它使以前複雜的佈局相對容易實現。它甚至（非常字面意思）實現了傳說中的“ 聖盃 ”佈局。
問題是，它不能讓你同時控制元素的水平 和 垂直位置。也就是說，它是一個或那個工具。
輸入CSS網格：可以將專案垂直和水平放置在您想要的位置。聽起來很簡單，但現實情況是它解鎖了以前只有印刷才能給我們帶來的表達自由和控制水平。
然而：沒有人使用它。
好吧，幾乎沒有人。特別是當你相對於flexbox看它時。
根據Chrome平臺狀態， 大約83％的網頁瀏覽量包含flexbox 。CSS網格？ 只有1.5％ ，粗略。
你為什麼問？嗯，答案，通常是網頁佈局工具，是不均衡的支援。
或者更具體地說，Internet Explorer（IE）提供的永不停止的支援（由iffy支援），儘管被微軟貶低，仍然被許多企業不成比例地依賴。
儘管如此，IE的使用可能還不足以完全解釋網格採用的缺乏。因此，請考慮上面引用的統計資料側重於 頁面瀏覽 ，而不是 頁面 。這意味著 主要 網站缺乏對網格的採用，這更可能解釋了網格迄今為止表現不佳的表現。
這是有道理的。這些主要平臺可能最近才在flexbox上全押。重新調整吸引數十億使用者的網站佈局並非易事。
值得慶幸的是，在大多數工作中， 您 可能不會遇到同樣的問題。使用Webflow，您甚至不需要花費數小時掌握網格的語法。你可以使用它。今天。直觀。
無需檢視程式碼即可構建複雜的互動和動畫。
對於我們的下一位客座設計思想家，我求助於社交應用Mappen的首席設計師 Los Montoya 和Juxta Labs的創意總監。洛斯用他自己的話來說：
我目前專注於為Mappen的市場營銷和產品設計工作提供領先設計，並且對2019年的產品有了獨到的見解。
11.基於市場地位的相反的色彩方法
在2019年，我希望看到更多的公司跟隨其他知名品牌的領先地位，追求更柔軟，更平易近人的調色盤。
相比之下，我們將繼續看到獨立設計師和製造商的公司用更大膽，更飽和和自以為是的顏色來關注。我們仍然會看到大量使用插圖來努力使技術人性化，更重要的是，人性化品牌。
12.網格中斷網格
我們將看到使用CSS網格為基本框架，打破 了 “網格”的擴散和 CSS電網的可訪問性 技術將幫助設計師和開發人員都瘦成破布局，努力把“老派， “印刷靈感的佈局到網上。
13.移動優先動畫
2018年底的網頁設計向我們展示了一系列基於滾動的動畫，幷包含了“定時動畫”，以幫助引導人們關注營銷頁面。雖然這在桌面斷點上執行良好，但我們將在2019年看到更多移動優先的互動方法。我期待看到設計師和開發人員如何將“桌面網頁設計”帶入移動網頁設計。
14.偉大的寫作年
我相信所有這些都是我們在2018年所看到的自然演變。從某種意義上說，網路和產品的視覺設計已經穩定下來。我們擁有一個堅實的平臺，經過測試和驗證的使用者體驗流程和互動，適用於我們的網路和產品設計。結果是數字產品和網站往往看起來像近親 - 如果不是兄弟姐妹。
這就是為什麼，如果你想創造一個人們喜愛的品牌，你的工作是[插入所需的標題]設計師，你需要加強你作為作家的講故事技巧和功效。從視覺設計的角度來看，很容易培養出美味。你有 很多 漂亮的設計可供學習的例子。您已經證明了營銷漏斗流程和數字產品使用者體驗流程，您可以輕鬆訪問這些流程，因此您可以設計出大多數客戶容易理解的體驗。
有了這個， 2019年將成為偉大的寫作年。 偉大的講故事和敘事的一年。剝離網站上的顏色，動畫，網格和插圖，剩下的就是文字。 詞彙在網站中很重要，而詞彙在產品設計中很重要。 當您通過應用程式瀏覽客戶時，如何以及何時與客戶溝通對於再次給他們回來並再次 僱用您的應用 程式至關重要。
單詞是您與團隊溝通以有效完成工作的方式。
話語就是你如何幫助顧客愛上你的品牌。
你是如何告訴人們為什麼他們應該關心你在做什麼的。
2019年是建立值得愛的東西的一年。
我們的下一個貢獻者是 Mariah Driver ，Webflow自己的內容製作人，punster和可訪問性倡導者：
15.運動太多了
在莎士比亞的“ 你喜歡它”中， 羅莎琳德問：“人們可以想要太多好事嗎？”
現在，你可能想知道我們如何將1599年寫成的牧歌喜劇與2019年的網頁設計趨勢聯絡起來。兩個詞：運動設計。
動畫和互動元素的趨勢不過是新的 - 更重要的是，它不會去任何地方。運動設計在網頁設計中 可能是 一件“好事” - 當它幫助使用者瀏覽網站時。
為了視覺天賦而不是可用性而新增動畫和互動的後果可能遠遠超過簡單地分散使用者的注意力。在某些情況下，它們會使使用者無法導航您的網站，甚至是危險的。
例如，任何閃爍，閃爍或閃爍的顯示都可能觸發患有光敏性癲癇的人。雖然這個設計元素確實使網站難忘，但如果使用不當，它很快就會變得有害。
我們已在下面的網站中展示了可能對某些使用者有害的閃爍顯示型別。 如果您對閃爍或閃爍敏感，請不要點選進入該站點 ：
警告：如果你是光敏的，請給這個人一個錯過。
為了更好地瞭解如何安全地使用閃爍，閃爍和閃爍而不犧牲站點的可訪問性，請檢視關於癲癇發作和閃爍的 Web可訪問性指南 。
這種趨勢的外賣？
避免為您的網站新增動作的誘惑，因為現代網頁設計工具（如Webflow）可以實現這一點。 在新增互動或動畫之前，詢問它是否在頁面上有用。 更重要的是，如果它可以阻止某人瀏覽您的網站。
下一步：小OLE 我 。
16.大量的螢幕主導文字
撰稿人和其他內容專家長期以來一直認為，內容應始終是設計過程中的第一位。畢竟，釋出網路......仍在釋出。無論我們是否最終設法讓世界相信內容的價值，或者設計師剛剛開始對字型形式產生真正的興趣，我們開始看到真正給予文字內容中心舞臺的網站。
見證了可吸菸產品製造商Rolling Flowers的上述鏡頭。作為滾動菸草的替代品，Rolling Flowers允許文字（大部分）在他們（大聲）最小的電子商務網站上進行談話。
然後丟擲一些非常大的 購買 按鈕來啟動。
或者從（現在）超級祕密的內部專案中拍攝：
這使得副本如此之大，你被迫以片段而不是整個短語來處理句子。（因此，理論上集中注意力。）
泰勒弗蘭德分享了她對使用者旅程的一些看法，大膽，大膽。
甚至Huffpost也正在接受大規模的文字詭計：
作為參考，這是我在MacBook Pro上看到的全部內容：
我們也看到這種大規模的文字趨勢出現在創意選單設計中，正如你可以在建築公司Dot to Dot的網站上看到的那樣：
有趣的是，選單已移出螢幕頂部的欄杆的相對貧民窟，成為中心舞臺，因此其尋路系統至少在主頁上變成了網站的“肉”。
17.俏皮的游標設計和動畫
為了堅持使用Dot to Dot，我們還值得一提出一個新興的趨勢，即充分利用人機互動的最重要工具：簡單的游標。
因為它在人類與數字空間互動的動力學中起著如此重要的作用，我們中的許多人都不願意弄亂游標。但不是我們所有人。
例如，在Dot to Dot上，游標做了很多工作：
這裡懸停狀態顯示專案影象。
如果您猶豫了一會兒，它就成了如何與選單互動的提示。
在這裡它揭示了一些使命宣言。（不幸的是將文字渲染為影象。）
在KIKK Festival網站上，您的游標似乎幾乎燃燒著豐富的藍色層，以顯示設計的另一個維度，為您在網站上的時間增添樂趣。
使用Webflow的設計師NiccolòMiranda也將游標投入到更具創造性的工作中，而不是指向並點選他的投資組合網站。在他的主頁上，游標提示您點選並按住，在一天中觸發他努力工作的機智動畫。
我對Niccolò的一個希望是他實際上從早上5點到午夜不工作。
所有人都歡呼新的同質英雄
直到最近，我們都分享了無處不在的網站的願景。看起來有點像這樣：
我們甚至寫 了一篇關於構建這個的教程 ，以防你的客戶吵著要它。
但在2018年，這種設計開始變形。設計師們對美麗照片上的中心標題和按鈕感到厭倦。
他們做了什麼呢？將標題和CTA向左移動。然後縮小影象，將其設定為右側，並且可能使其成為自定義插圖？
Etvoilà！看看新的同質英雄。
Airtable.com
Dropbox.com
Mailchimp.com
Stripe.com
要明確：我個人並不認為這有任何問題。頭條新聞越來越清晰。子標題添加了急需的上下文。您總是知道在哪裡可以找到您的號召性用語。我們對認知流暢性的渴望 - 與熟悉的事物一起工作時獲得的掌握感 - 得以實現。雅各布的法律被考慮在內。
在婚禮邀請之外的任何地方都沒有看到中心文字。
但它確實很新潮。
19.重疊所有事情
基於卡片設計的時代讓我們所有人都進入了具有非常清晰明確分組的離散物件。鑑於格式塔心理學的 共同區域 定律，這是一個明智的選擇。
但是，公共區域不是視覺上鍊接離散元素的唯一方式。還有一個 統一連通性 定律，這就解釋了為什麼在上面的設計中很明顯，“它是一個光”指的是左邊的燈。
因此，在2019年，我們期望看到更多關於建立連通性的方法的探索，例如NBC網站上的新聞通訊模組：
這個可定製的照片和副本拼貼：
在日本創意機構SONICJAM的網站上：
選單開啟以新增效果。（注意那個時髦的游標！）
20.“使用者”反擊的那一年
“手機戀人”，由班克斯
自智慧手機推出以及社交網路的興起以來，我們一直在陶醉於一種全新的聯絡水平。世界的知識觸手可及。我們可以“交朋友”（這是對的，孩子們：已經有了這個動詞）幾乎任何人，任何地方。我們“享受”不斷重新整理“內容”的“饋送”“量身定製”“僅適合我們”。
我們已經厭倦了這一切。我們厭倦了侵略性。誤導和不誠實。面對有關洩密，媒體操縱和（可能？）操縱選舉的新聞，關於連線世界的高調言論。
我們意識到背上有一隻猴子。它住在我們的口袋裡。並且永遠和永遠只對我們意味著最好。
但這種認識讓我們很多“使用者”感到疑惑：入場價格是否值得投資回報？從移動“手機”到袖珍超級計算機的轉變是否比我們帶來的更多？
如果是這樣的話：我們如何糾正這種不平衡？我們可以吃蛋糕嗎？
但是，閱讀本文，你不能僅僅以“使用者”的身份回答這些問題。你也可能是一個製造者。所以在2019年，是時候（過去的時間）問自己：
有什麼可以 我 做把人回到他們的參與，他們的使用情況，控制自己的生活？
——原文連結：https://webflow.com/blog/20-web-design-trends-for-2019