下一個網站項目的Web設計最佳實踐

是什麼導致某些WordPress開發人員與其他WordPress開發人員收取的費用之間存在巨大差異?要回答這個問題,首先要考慮的是為什麼想要一個網站的原因。

一些開發人員將重點放在字面上的最終產品上:將代碼組合起來可以帶來足夠令人滿意的網站設計。

但是,精通營銷的開發人員不僅要構建看起來不錯的東西,還要關注自己。他們充當尋求通過其網站實現特定目標的客戶的顧問。

只需移至Kinsta,即可將WordPress網站的速度提高200%。
        
          今天免費遷移

網站設計最佳實踐

網頁設計與您的業務目標緊密相連

考慮到這一點,僱用一個似乎對您的最終目標不感興趣/不提出疑問的網站的人是一個危險信號。重要的是要指出這樣一個事實,即使是最精美的網頁設計,在吸引訪問者轉化為客戶方面也可能不是理想的選擇。

就是說,有94%的人根據您網站的設計來判斷您的信譽。

因此,您需要專註於使用設計來提供理想的用戶體驗。您必須通過首先訪問您的網站來使訪問者輕鬆地找到他們想要的信息,同時引導他們進行目標轉換活動。

這些網站設計最佳實踐著重於創建一個漂亮的網站和為您的企業服務的網站之間的交集。

什麼定義了Web設計最佳實踐?

可以肯定的是,每個人和他們的媽媽對於什麼是精心設計的網站都有意見。

Web設計不僅與美學有關。 UX,可訪問性和業務目標都應該聯繫在一起,這是一個更加複雜的世界。查看下一個網站的這些網頁設計最佳實踐! ✍️?

點擊鳴叫

但是,我們請專家來控制大家的意見。

根據Orbit Media的介紹,您可以將Web設計最佳實踐分為以下三個基本類別的標準:

  • 品牌標準:您可能更熟悉將「品牌」,「樣式指南」或「情緒板」這一概念稱為「品牌」。這些標準包括與網站外觀有關的所有內容,並涉及對特定業務特定的顏色,版式和元素的使用。

  • 編碼標準:網站應根據W3C(共同努力制定Web標準的國際社會)所同意的編程標準來構建。

  • 無障礙標準:信息獲取是一項基本人權,已被《聯合國殘疾人權利公約》所承認。除此之外,使您的網站可訪問還具有積極的作用-不僅對銷售有好處,而且對SEO也有好處。 W3C共享設計可訪問網站時需要遵循的基本標準列表。我們將在本文後面詳細介紹更多相關的網頁設計最佳做法。

讓我們看看如何根據以下每個標準開發網頁設計實踐:

品牌標準

缺乏一致品牌的網站可能會與他人互動並造成混亂。因此,約38%的訪問者表示,如果內容或布局沒有吸引力,他們將停止與網站互動就不足為奇了。

請記住,外觀並不代表一切,以下是創建人們要使用的網站時應考慮的一些基本設計原則:

平衡

平衡是設計原則,規定了如何有效分配視覺元素。通常,平衡的設計看起來乾淨自然,並具有良好的對稱性(儘管這不一定是平衡的條件)。

您可以在網頁設計方面平衡頁面布局。

在頁面上居中放置文本或其他元素是一種簡單的方法。通常,網頁是建立在網格系統上的,網格系統會產生一種平衡。您可以使用CSS float屬性定位元素並在整個頁面之間保持平衡。

可以通過3種方式實現平衡:

1.對稱設計

對稱網頁設計

對稱設計示例

在網頁上均勻地排列元素。例如,如果左側有一個重元素,則右側應有一個重元素。如前所述,居中是獲得對稱性的最簡單方法,但有時可能會變得平整或無聊。

為了避免頁面看起來單調,您可以使用其他元素來創建平衡,例如,將大圖像與一段文本平衡。還有一種稱為徑向平衡的對稱平衡,其中物體從中心點輻射出去。

2.不對稱設計

不對稱設計

非對稱設計示例

要做到這一點更具挑戰性,不對稱設計涉及頁面上元素的不均勻分布。例如,您可能在中心有一個較大的元素,而在更遠處有一個較小的元素來平衡。

您可以使用其他設計元素(例如顏色或紋理)來平衡不對稱設計。

3.失衡

失衡設計

失衡設計示例

這些類型的設計會暗示運動和動作,這會使人不舒服。如果您的網站打算讓人們思考,那麼不平衡設計就是您的最佳選擇。

組成

術語組成是指設計元素的放置和組織。

組成

組成

三分法則通常用於創建平衡的構圖,尤其是照片。

間距

元素應均勻分布,以便用戶可以區分部分或塊。

網頁設計中間距的重要性

間距在網頁設計中的作用

您還應該引入負片空間或圖像主體之間和周圍的空間。負空間可以減少視覺噪音,提高可讀性並帶來平衡。

您可以通過在設計元素周圍添加邊距和填充來引入負空間。

焦點

在一個要素上引起注意

在一個要素上引起注意

創建您要引起注意的焦點區域。它應該是頁面上最重要的部分,理想情況下,每一頁應該只集中在一個主要焦點上。

顏色

顏色是品牌塑造的重要設計元素。理想情況下,您在進入網路設計過程時要了解與品牌相關的顏色。

特別是對於網頁設計,它有助於從您的品牌的氛圍板開始。

Kinsta調色板的示例

Kinsta調色板的示例

選擇原色和第二色(第二色可以補充或對比原色),並為每種選擇較淺和較深的色相。限制您對顏色的使用,以免使各種口音變淡。

Adobe Color提供了一個出色的免費工具,用於測試各種顏色組合以創建網站元素的有效調色板。

另外,在決定顏色時,重要的是要考慮色盲的人,這些人佔全球人口的4.5%。

常規設計對色盲用戶的外觀示例

常規設計對色盲用戶的外觀示例

色盲共有三種類型(總色盲,兩種顏色的視覺和不足的色覺),因此請確保考慮到那些可能無法區分顏色的人,您的設計仍然可以使用。

對比

選擇顏色時,重要的是要注意顏色比率和對比度。

顏色對比度是指前景和背景之間的光線差異。使用足夠對比的顏色可以輕鬆區分網站可見性。通常,使用高對比度的顏色選項(例如白色背景上的黑色文本)使您的網站更具可讀性。

對比度差可能會有問題

對比度差可能會有問題

對比度是分配給頁面元素之間對比度差異的數值。

世界內容可訪問性指南(WCAG)2.0建議普通文本的對比度為4.5:1。 WebAIM共享一些適合理想對比度的預定組合,以幫助您形象化此Web設計最佳實踐。

為了幫助您使用此比率進行導航,請確保在設計網站時,您正在設想所有受眾(包括具有可訪問性問題的受眾)。相較於事後計劃解決這些問題,這樣做要容易得多。

考慮人們將要與之交互的網站的所有方面,包括頁眉,頁腳,菜單-所有這些都必須易於查看才能使用。

可用於檢查色彩對比度的一些工具包括:

  • 通過Level Access進行顏色對比檢查。

  • 對比度。

  • WCAG 2.0 AA和AAA顏色對比檢查器工具,它基於WCAG 2.0準則。

版式

網站排版是另一個重要的品牌考慮因素。

儘管有許多不同的來源可以找到要在您的網站上使用的潛在字體,但您將首先要考慮可以始終顯示的選項,無論最終用戶在計算機上安裝了哪種字體。

Google字體提供了多種免費的網路安全字體,無論用戶安裝了什麼字體/程序,都可以依靠它們來正確顯示。確保在情緒板上包含字體,以查看它們是否符合您的顏色美學要求。

如果您在組合時遇到問題,則Google字體可以建議常用的配對。您也可以使用FontPair之類的網站來獲取建議。

嘗試限制您使用的字體權重,因為必須載入太多文件會導致頁面速度變慢。因此,請考慮在本地託管Google字體,以帶來更多的性能優勢。

理想的排版堆棧與較差的排版堆棧

較差的排版與理想的排版

當要根據Web設計最佳實踐選擇印刷元素時,作為一般的經驗法則,請使用sans-serif字體作為標題,使用serif字體作為內容。至少,不要使用裝飾性字體作為正文內容,因為這樣很難閱讀。

另外,不要試圖在您的網站上使用各種不同的字體。一個好的經驗法則是對徽標使用一種字體,對菜單/標題使用另一種字體,對正文內容使用另一種字體。關於這一點,請嘗試配對互補的字體,例如來自相同字體系列的字體。

元素層次結構

層次結構是指顯示相對重要性的設計元素的排列。這是通過操縱諸如視覺對比度,大小和位置來引起注意的元素來實現的。

網站設計最佳實踐

元素層次結構示例

例如,必須將內容分解為邏輯塊,以便用戶可以區分各個部分。

您可以通過使用內容標題來做到這一點,這不僅使用戶可以輕鬆跳到他們想要閱讀的部分,而且還可以將大量文本分解為可讀的塊,以便屏幕閱讀器能夠確定上下文每個部分。

如果您正在尋找有關這些設計概念的有用直觀插圖,以及更多相關信息,Tilda Publishing博客將介紹一些最常見的網頁設計錯誤以及解決方法。

Web最佳設計/格式實踐

根據Orbit Media的研究,在排名前50的營銷網站中觀察到一些常見的網頁設計標準。

網頁設計最佳實踐

網頁設計標準

「標準」是指80%的網站使用類似的設計方法:

  • 徽標在左上角。
  • 每個頁面頂部的主要水平導航。
  • 位於「首屏」上方的主頁上的價值主張很高。請注意,大多數網頁設計師會告訴您,瀏覽器沒有標準的像素高度,技術上也沒有「摺痕」。但是,總的來說,重要的設計元素應該出現在大多數訪問者通常看不見的頁面上,即使沒有滾動也是如此。

以下是一些常見網站元素的網頁設計最佳做法:

圖片

使用圖像的Web設計最佳實踐可能會激發出大量建議,但在本次Web設計最佳實踐討論中,我們將重點放在最低限度上:

  • 添加ALT文本。除非使用ALT文本,否則無法使用屏幕閱讀器處理圖像。添加ALT文本也有助於SEO,但有些人僅使用ALT文本來補充其關鍵字策略。 ALT文本的一種更有用的用法是描述圖像-儘管您當然可以使用正確的方法同時滿足搜索蜘蛛和屏幕閱讀器的需求。

  • 使用具有人臉特徵的圖像往往比其他圖形或動畫更有效。當人們被他們所認為的真正的同理心和情感所吸引時,它使人們更有可能與圖像互動。

  • 使用響應式圖像,該圖像根據瀏覽器的大小而增大或縮小。這有助於網站速度和SEO。

網站導航

用戶希望能夠輕鬆地在網站上找到他們想要的內容。因此,使網站導航簡單明了很重要。

網站導航是一個通用術語,指的是網站的內部鏈接體系結構。不要忘記導航的主要目的是幫助用戶輕鬆找到您網站上的相關內容。

網站的內部鏈接體系結構構成了站點地圖的基礎,可幫助搜索引擎更輕鬆地訪問您的內容。人們發現,擁有一個設計良好的網站(易於查找內容)會對您從搜索引擎獲得的網站訪問量產生積極的影響(以及獲得Google網站鏈接的機會更大)。

菜單導航

網站導航有多個方面,但是您的頂部/主菜單應該是主要重點,因為它將是用戶訪問您的網站時與之互動的第一件事。

網站菜單設計試探法有所不同,但最受歡迎的試探法包括:

導航菜單

理想情況下,它位於網站的正面和中央。如果存在多個類別,則可能涉及使用下拉菜單。但是,不建議使用下拉菜單,尤其是在涉及技術SEO(較難抓取)時。另外,已經發現大多數人不喜歡下拉菜單。

這是因為人眼的工作速度比手快,所以人們在確定要單擊的內容時就會感到煩惱,而其他東西掉下來了,這可能導致訪問頁面的次數減少。

漢堡菜單

漢堡菜單主要用於移動設備優化設計,通常位於頁面的左上方或右側。它顯示為具有三行的正方形,可以單擊以擴展該行。但是,許多設計師不喜歡漢堡包菜單,這激發了Web開發人員考慮使移動網站導航變得有趣且功能強大的新方法。

以下是根據網頁設計最佳做法設計導航的一些技巧:

  • 添加搜索欄以幫助用戶輕鬆查找內容(以下是改進WordPress搜索功能的方法)。這對於內容豐富的網站(例如新聞博客)特別有用。

  • 按照三單擊規則設計您的站點,該規則指出用戶應該能夠通過三下滑鼠單擊就能找到所需的信息。這是因為在可能的情況下,用戶實際上更喜歡瀏覽站點而不是瀏覽搜索結果。
  • 使您的菜單標題具有描述性(牢記關鍵字),這有助於用戶更輕鬆地找到項目,並為SEO做出積極貢獻。

  • 菜單項的位置很重要。將最重要的頁面放在菜單的前面,以便於訪問。

  • 菜單項的最大數量不得超過7個,這不僅是為了保持網站設計整潔,還因為菜單項類別過多可能會影響您對搜索進行排名的能力。 Google可能會將這些看似無關的類別解釋為您的網站尚未確定特定利基市場的標誌。

有關更方便的格式,請參見以下信息圖表:

網站設計最佳實踐

菜單導航的Web設計最佳實踐

編碼標準

在全球創建和使用如此多的網站的情況下,當然需要一套標準化的編碼原則。這些Web標準的某些方面包括:

搜索引擎優化

SEO可用於有機地增加您網站的訪問者數量(無需使用廣告)。由於太複雜了,無法在文章的一小部分中充分介紹SEO,請查看我們的SEO清單和WordPress最佳SEO插件的提示,以熟悉Web設計最佳實踐的這一方面。

請注意,以下編碼標準技巧與SEO緊密結合。

移動響應度

無論使用哪種設備或瀏覽器訪問您的網站,響應式設計都旨在創造出色的用戶體驗。

今天,比以往任何時候都更重要的是,將網站設計為具有響應能力,因為超過60%的互聯網用戶通過手機訪問互聯網,而一半的電子商務交易是通過移動平台完成的。除此之外,Google的新搜索演算法還優先考慮了適合移動設備訪問的網站。

響應式設計

響應式設計示例

擁有響應式網站不僅可以幫助用戶更輕鬆地瀏覽您的網站,而且還可以提高參與度和轉化率。用戶會推薦具有積極的移動響應網站體驗的品牌,反之,不僅會停止從具有不良移動體驗的品牌那裡購買商品,還會積極勸阻其他人這樣做。

但是,儘管需要響應式網站,但估計有91%的小型企業沒有此類網站。他們應該-設計一個響應移動的網站肯定會有所回報。設計移動響應網站後,有62%的公司報告了銷售額的增長。

閱讀Kinsta關於如何使您的網站更適合移動設備的資源,其中包括要下載的最佳WordPress移動插件列表,並確保查看精選的最佳WordPress主題列表,您可以在其中瀏覽大量內容。響應主題。

Google還提供了一些有關如何設計自適應網站的提示。

網站安全

另一個重要的編碼實踐?創建用戶可以信任的敏感個人信息的安全程序和網站。與普遍的看法相反,黑客沒有主動尋找特定的網站進行黑客攻擊,因此,即使是小型網站也容易受到攻擊。

信息

Kinsta為每個計劃提供安全保證,萬一發生不良情況,安全專家將修復您的站點。

總體而言,WordPress通常是安全的,但它有助於採取額外的預防措施來保護您的網站免受攻擊。

以下是一些最佳的網站安全實踐:

  • 獲取SSL證書,這對於處理付款和個人信息的網站尤為重要。 SSL證書對通過網路發送的信息進行加密,因此黑客很難對其進行解碼。除此之外,它是行業標準。當他們訪問的網站沒有SSL證書時,Chrome會提醒訪問者。除此之外,Chrome現在不建議使用舊版TLS,並開始顯示其他警告。
    啟用HTTPS(安裝SSL證書的一部分)也是Google的官方排名因素。

  • 確保您的登錄憑據安全。黑客企圖強行獲取對網站的訪問許可權,導致了幾次攻擊。擁有一個單獨的/隱藏的登錄頁面(使用WP Hide Login插件)並限制登錄嘗試的次數很有幫助。使用Login LockDown插件,該插件會記錄每次失敗的登錄嘗試的IP地址和時間戳,如果在短時間內達到同一IP範圍內的失敗嘗試次數,則鎖定登錄功能。另外,創建一個超過6個字元的安全密碼,該密碼應包含大小寫字母,數字和特殊字元。經常更改密碼。如果您要尋找額外的安全性,也可以使用兩因素身份驗證進行登錄。

  • 保持WordPress核心,插件和主題更新。不要忘記從信譽良好的來源下載插件或主題。一個好兆頭是,如果插件/主題有多個安裝並且最近已更新。您還應該閱讀評論,以自行決定該插件是否值得信賴(請確保檢查此處列出的內容)。關於這一點,請下載WordPress安全插件(例如Wordfence,Sucuri或Defender),因為可以使用免費的自動化工具檢測到73.2%的易受攻擊的最流行WordPress安裝。這是最佳安全插件的更詳細列表。

  • 使用安全的網路主機。對於那些不知道的人來說,您的虛擬主機似乎與站點安全沒有任何關係,但是41%的攻擊是通過託管平台上的安全漏洞發生的。尋找具有以下功能的託管服務提供商:伺服器端防火牆和加密,NGINX或Apache Web伺服器,防病毒和反惡意軟體,現場安全系統以及SSL證書和CDN的可用性。

有關WordPress安全性的更多信息,請查看我們有關如何確保WordPress網站安全的綜合資源。

頁面速度

大約一半的用戶期望網站在2秒或更短的時間內載入完畢,如果載入時間更長,則有40%的人會毫不猶豫地從頁面跳出,(永遠)不會返回。

除訪問網站外,頁面速度也很重要,因為它也會影響轉化率和收入。每增加一秒鐘的頁面載入速度,銷售額將下降多達27%。網站速度的提高可以防止7%的潛在轉換損失。

以下是一些使網頁載入速度更快的方法:

  • 使用內容傳輸網路(CDN),該網路可以獲取靜態文件(例如圖像,CSS和JavaScript),然後將其傳輸到距離用戶實際位置最近的伺服器上。
  • 考慮一下如何使用圖像。每個網站平均使用1.8MB的圖片,佔網站大小的60%。為此,請重新考慮如何布置網頁。如果要保持快速的頁面速度,請嘗試減少設計中使用的大圖像的數量,並確保對其進行優化。

  • 如果您的網站需要使用大量大圖像,請使用包含GZIP壓縮,緩存或圖像優化功能的插件,例如WP Rocket和Imagify。它們可以幫助您減小文件的大小(不影響質量),以便更快地載入它們。
  • 考慮保留在WordPress資料庫上的插件和文件的數量,因為它們也會影響頁面載入速度。清理那些不用的東西。使用時,請將您的PHP,WordPress核心和插件更新為最新版本。

查看我們用於網站速度優化的綜合資源。

無障礙標準

互聯網旨在為所有人服務,而不論他們使用的是哪種特定的硬體,軟體,語言,能力或位置。但是,許多人為了獲得美觀的設計而犧牲了可訪問性。

無障礙標準

可訪問性是每個網站的關鍵

可訪問性是指使每個人都可以使用您的網站的做法。

除了影響訪問的殘障人士之外,W3還說網站可訪問性還有益於:

  • 使用小屏幕,不同輸入模式等設備的用戶
  • 老人
  • 患有「暫時性殘障」的人,包括肢體折斷,失去眼鏡或醫療狀況。
  • 具有「局限性」的用戶,例如那些在明亮的陽光下或無法收聽音頻的環境(例如公共交通)中通過設備訪問Internet的用戶。
  • Internet連接速度慢的個人。

可訪問性應該是每個人都關心的問題,因為我們都會以某種方式受到影響。

使您的網站可訪問的原因

仍然不確定在本網頁設計最佳實踐討論中是否值得花時間在輔助功能上?

考慮以下原因:

  • 這是ADA的要求。 1990年通過了《美國殘疾人法案》(ADA),以保護殘疾人的公民權利不受歧視。它涵蓋了諸如交通,電信,就業甚至建築法規之類的內容。由於這項法律是在互聯網普及程度不高的30年前通過的,因此立法者正在尋求對其進行修改。

  • 它促進包容性。皮尤研究中心(Pew Research Center)的一項調查顯示,殘疾人上網的可能性是非殘疾人的三倍,這是令人遺憾的,因為統計數據表明,大約30%的專業人員患有殘疾,其中62%的殘疾人由於擔心產生負面偏見而「躲在雷達下」。

  • 這將幫助您贏得更多業務。通過更具包容性,您將建立一個殘疾人網路,這表示可支配收入達7萬億美元

  • SEO的好處。搜索引擎獎勵可訪問性兼容的網站,以鼓勵更多的網站可訪問。

如何使您的網站更易於訪問

一種使您的網站更易於訪問的簡單方法是安裝WP Accessibility插件,該插件添加了輔助功能,包括:

  • 一個工具欄,用戶可以在其中調整字體大小並以高對比度和灰度查看您的網站。
  • 比較顏色對比度以檢查其是否符合ADA的標準。
  • 從插入內容的圖像中刪除標題屬性。大多數屏幕閱讀器無法感應到該內容,而是讀取錨文本。
  • 啟用跳過鏈接,這是內部頁面鏈接,允許用戶直接跳至內容,這對於使用屏幕閱讀器的用戶而言非常有用。

需要採取的一些其他步驟:

  • 如果您的站點製作了音頻,有聲讀物,視頻,播客等媒體,請添加字幕或字幕,以使聾啞人以及想要使用您的內容但不能在公共場合使用媒體的人受益,以使聾人/啞人受益。

  • 為行動不便的人創建只能通過鍵盤訪問的鏈接和菜單,這些人只能使用鍵盤(而非滑鼠)瀏覽您的網站。不建議使用下拉菜單,但是可以通過為每個下拉菜單項分配快捷方式來解決此問題(例如:按「 1」表示主頁,按「 2」表示關於頁面,等等)。

  • 最後,測試您的網站的網站可訪問性。 Web Accessibility Initiative不認可任何特定工具,而是提供可用於審核工作的工具列表。

最終想法:下一個網站項目的Web設計最佳實踐

好的網站不應以客觀的良好設計來定義。同樣重要的是網站的可用性,易於導航和可訪問性。擁有這些網站設計最佳實踐,您將擁有創建外觀和功能良好的東西所需的一切。

Web設計不僅與美學有關。 UX,可訪問性和業務目標都應該聯繫在一起,這是一個更加複雜的世界。查看下一個網站的這些網頁設計最佳實踐! ✍️?

點擊鳴叫

請記住,這些是網站設計的最佳做法。根據您網站的性質,您可能無法完全關注每一個網站。但是在您可以違反規則之前,它至少可以幫助您了解它們為什麼存在。

我們錯過了重要的事情嗎?在下面的評論中分享您的網頁設計最佳做法!

0分享

相關文章