為什麼提前思考在網頁設計中至關重要

建立一個偉大的網站和一個平庸的網站之間的區別通常是很早就確定的。 這通常是網頁設計師將他們的項目繪製成虛擬“角落”的問題。 這就是設計變得不靈活並且無法適應各種用例的地方。

這往往發生在原型設計階段。 我們在一個看起來很棒的想法上花費了大量的時間和創造力。 我們的客戶可能和我們一樣喜歡它。 但只有當我們真正開始構建它時，我們才會開始充分理解其後果。

設計模型作為我們網站項目的指南針。 如果我們未能提前考慮某些要素的要求，則可能意味著陷入糟糕的境地。 最終結果是一個網站必須做出一些嚴重的妥協才能在不同的設備和瀏覽器上工作。 這會對可訪問性、性能和對最佳實踐的遵守產生負面影響。

值得慶幸的是，一些計劃將幫助您避免混亂的構建過程。 在與客戶分享您的想法之前，讓我們先看看需要考慮的幾個關鍵事項。

元素如何適應不同的屏幕

有這麼多談論“移動優先”的網頁設計方法是有原因的。 從本質上講，這使我們可以從網站的基本要素開始。 從那裡，隨著視口變大，我們可以添加和增強。

儘管如此，我們每個人對構建原型都有自己的偏好。 對於那些仍在使用基於桌面的方法的人來說，重要的是要考慮所有這些精美的設計元素將如何在手機上運行。

如果您計劃實施 CSS Grid 或 Flexbox，它們將在充分利用可用屏幕空間方面提供很大幫助。 但其他元素可能需要更多的努力才能發揮作用。

例如，大滑塊在小屏幕上可能會變得非常難以使用。 複雜的圖像可能沒有那麼有影響力，文本可能會超出界限。 性能也可能滯後。

在這種情況下，您可能必須決定滑塊是否值得在移動設備上顯示。 或者也許可以對其進行重構以更好地適應所有情況下的工作。

可訪問性影響

設計從選擇合適的字體和顏色開始。 它們都與品牌和可訪問性密切相關。

字體應該清晰且大小清晰易讀。 雖然花哨的腳本和裝飾字體看起來很漂亮，但它需要足夠大才能閱讀並限制在標題中使用。 如果不能合理地滿足這些要求，最好將它們從您的項目中完全刪除。

此外，顏色對比度也應該是一個主要問題。 背景和前景顏色必須達到可接受的對比度才能被認為是可訪問的。 另外，這只是一個好習慣。

如果您不確定您的調色板，請使用在線工具來確定其適用性。 有時，只需稍作調整即可通過 WCAG AA 標準。

除了這兩項之外，最好制定一個計劃來顯示圖標等元素。 他們直覺嗎？ 它們會附有文字嗎？

向後兼容性

並非每個網站都必須與 Internet Explorer 9 等完全兼容。舊版瀏覽器不一定會阻止我們使用最新的 CSS 或 JavaScript。 但是應該考慮一些向後兼容性。

特別值得關注的是設計元素會使網站在舊軟件中完全無法使用。 即使某個特定的瀏覽器只佔您網站訪問者的一小部分，這仍然會留下一些潛在的轉化。

值得考慮的是設計決策將對這些用戶產生什麼影響。 給定技術的可用後備可能足以使事物看起來不錯且可用。 更好的是，它們可以相當簡單地實現。

過去，設計師被期望確保元素在所有瀏覽器中的外觀和功能完全相同。 這些天來，這可能是一個太多的要求。 只要用戶可以在一些更古老的軟件上導航和消費內容，這可能就足夠了。

尚未發生的情景

即使是最小的網站也需要隨著時間的推移而發展。 隨著新類型內容的添加，它們需要在設計中加以考慮。 如果您沒有準備好，實施這些項目可能會與現有項目發生衝突。

例如，考慮添加一系列視頻。 雖然添加該內容的過程可能很簡單——它如何適應您已經建立的外觀？ 您會使用默認瀏覽器 UI 還是製作一些與您的品牌相匹配的東西？

雖然您不能總是預測未來，但您可以計劃各種可能性。 這是設計系統允許您完成的一部分。 通過從一開始就設置一些默認指南，您將更輕鬆地處理未來的添加。

現實情況是，我們今天的設計可能會在未來發生變化。 因此，為這種可能性做好準備是值得的。

第一次正確構建

製作第一個模型不僅僅是讓事情看起來不錯。 它甚至超越了給您的客戶留下深刻印象。 確實，這是一項迫使我們將項目視為一個整體的練習。

美學必須令人賞心悅目。 但設計還必須易於訪問並能夠適應各種屏幕。 此外，隨著事情的發展，它可能必須適應不同類型的內容。

如果這聽起來勢不可擋——深呼吸。 這就是您的經驗和專業知識可以派上用場的地方。 合適的工具也可以參與進來。

想想在你過去的項目中什麼有效（什麼無效）。 尋找實現彈性功能的方法。 這樣做，您將走向成功的項目！