現代網站設計的特點是什么？ 這是一個很常見的問題。

從客戶在項目開始前提出需求，到設計師試圖弄清楚如何結合最新和流行的元素，弄清現代網站設計的外觀是我們在工作中所面臨的最大的挑戰之一。

實際情況是，你可能很容易說出現代網頁設計不應該是什么樣子的，當你看到某個過時的設計時，便會知道。 在這里，我們收集了20個典型的最新示例，以幫助你探索如何制作現代的網站設計。



1.極簡主義（Minimalism）



當然，你不必像Whiteboard那樣精簡，但是你必須承認極簡風格的設計引人注目，并且幾乎能夠迫使你閱讀屏幕上的每個單詞。

極簡主義是有效傳達信息的絕佳工具。 這種風格為你要交流的內容提供了明顯的重點。 技巧是確保元素具有足夠的吸引力，在上面的這個例子中，使用的技巧就是一個有趣的加粗加大的字體。



2.大膽的顏色（Bold Color）



過去較為流行的中性色網站和灰色網站已經一去不復返了。 現代網站的特征是明亮，大膽的顏色。 從檸檬黃（上圖示例）到紫色，綠色和粉紅色，你所使用的調色板幾乎沒有禁忌。

技巧？ 選擇一種顏色并很好地使用它，從整體項目中汲取靈感。



3.大膽的版式（Daring Typography）



2020年很有可能將是網站設計排版樣式最為突破的一年。 你已經可以看到似乎已經打破了常規的設計，但看起來仍然很棒。

Online Women Biz是這些設計之一。 從巨大的W（我的意思是巨大的W）開始，W占據了整個屏幕的大部分。 徽標使用帶有顛倒字母的時髦字體。 滾動圖標放置在添加動效的文本環中，并且使用了多種字體和樣式。

所有這些違反常規的方法，看起來都很棒，易于理解，并且具有可以正常使用的功能。



4.讓人印象深刻的圖像（Incredible Images）



使用精心策劃和制作的圖片的網站與沒有該元素的網站之間存在明顯的區別。

前者更多的北使用于采用現代網頁設計。 如上，請注意Squarespace的Dreamers頁面設計中的每種顏色如何匹配（從主題的衣服到背景再到陰影）。 它強調了文本顏色，為圖像中的文本元素創建空間。

所有這些都創造出令人驚嘆的視覺效果。



5.簡化導航（Streamlined Navigation）



簡化的導航提供了網站設計最重要內容的入口以及概覽。 它應包含關鍵頁面或訪問量最大的頁面，它不應該包括網站上的每個頁面。

沒有什么比大型下拉菜單更能說明這是一個“過時”的設計了。



6.多個入口點（Multiple Entry Points）



盡管通常最好的做法是為用戶提供內容選擇，但對于某些內容類型，多個入口點可能更加有效的。 我們已經在分屏設計中看到了很多成功的案例，例如Tempo的設計（如上）。

注意主頁上的按鈕數。 用戶可以從一開始就選擇自己的旅程，每個入口點都是為不同的人設計的。 這是在單個頁面上處理多個目標的好方法。



7.用戶參與體驗（User Engagement）



《The Bear and His Scarf》是一本在線故事書。 “頁面”的設計類似于具有大量插圖和少量單詞的傳統書籍頁面，但還包含動畫和交互式元素，以保持其趣味性。



8.有目的的空白（Purposeful White Space）



空白應在設計中發揮作用。 Lars Franzen使用非常有目的的空白來引導用戶瀏覽其作品集中的圖像。

空白有助于構圖并在屏幕上增加圖像的吸引力。 在這里也有另一個目的——它是一種導航工具，可鼓勵左右滾動。



9.有效的微文本（Actionable Microcopy）



微文本應該告訴用戶接下來會發生什么，并且無需太復雜。

使用提供明確說明的可操作短語，例如Gracie Mansion的按鈕（上方）：預訂旅程。 它是直接的，并提供清晰的說明。



10.大尺寸的英雄圖像（Huge Heroes）



在現代網站設計方案中，越大越好。 比常規英雄圖像區域大，可以與用戶建立聯系，并將其吸引到內容中。

這點，“Owl Design”使用了令人驚嘆的圖像以及一些意外的動畫來吸引你（這是你可以凝視數小時的圖像設計之一）。