如何更有效地建立網站

我們的首席開發人員分享了他準備有效構建網站並避免項目膨脹的技巧。

與任何項目一樣，準備工作是成功的關鍵。 在這裡，我分享了我們用來確保成功交付項目的一些關鍵流程。

開發啟動

在您直接開始編寫任何新網站之前，最好與開發團隊坐 30 到 60 分鐘來製定計劃。 理想情況下，產品負責人應該在會議上回答您可能提出的任何問題。 他們可能參加過所有的客戶會議，並且對網站在用戶旅程和功能方面應該實現的目標擁有比其他任何人更深入的知識。

希望您事先已經看過這些設計。 使用本次會議來確定您看到的任何問題並與團隊討論您將如何解決這些問題是一個好主意。 例如，如果設計師自上次迭代以來選擇了畫布外飛出菜單，您可以討論如何構建它。 您可能會發現團隊中的某個人之前已經建立了一個，因此他們可以承擔這項工作。

打印設計

這種與開發啟動密切相關，但這個階段應該只真正涉及前端開發團隊。

我認為這是在開始站點構建之前採取的一個很好的步驟，因為可以佈置打印輸出以獲得更清晰的全局視圖。 使用 Sketch、Photoshop 或 Invision 等應用程序無法輕鬆做到這一點。 您要么必須縮小到目前為止才能看到所有設計，或者您可能只能在每個瀏覽器窗口中看到一個頁面模板。

以觸覺形式查看網頁還可以為您提供不同的視角，並幫助您磨練您可能會錯過的元素。 能夠進行註釋也很有幫助。

在 Hallam，我們傾向於對我們的打印輸出進行註釋，然後使用它們來幫助分配工作量並將它們貼在白板上。 然後，我們在整個構建過程的後續會議中參考它們。 模板構建完成並簽字後，它就會從白板上刪除，這使我們可以清楚地了解剩下的構建內容。

顯然，我們都應該盡量減少我們所做的打印量，所以一旦你完成設計，一定要使用回收箱！

識別常見元素

我們在 Hallam 接受的原則之一是，我們創建的每一個設計都不應該由完全定制的模板組成。 相反，它們應該共享通用的設計元素，這些元素可以單獨構建，然後插入到需要它們的模板中。

我並不是說頁面模板上不應包含自定義元素，但僅在必要時才應如此。 例如，具有電台採訪培訓頁面和電視採訪培訓頁面的網站不需要兩個模板，因為它們本質上都是“培訓模板”頁面。

通用元素還可以創造更好的用戶體驗，因為人們不會在每時每刻都被新事物轟炸。

一旦您確定了網站的所有主要元素，您就可以將它們寫在白板上，製作票並將它們分配給各個團隊成員。 然後，當您將頁面放在一起時，您可以將各個部分“插入”到模板中並更快地創建它們。

先構建，還是風格和構建在一起？

這是我們過去嘗試過的，現在我們同時構建和样式化模板。

過去，我們構建所有頁面模板結構和元素時根本不使用任何 css（除了與 Bootstrap 或 Foundation 相關的任何佈局樣式）。 然後，一旦我們構建了整個站點，我們將檢查並設置所有模板和元素的樣式。 從生產線的角度來看，這種方法當然是有意義的。 在將汽車安裝到底盤、插入發動機並安裝所有固定裝置之前，您不會為汽車的車身塗漆。 使用這種方法，您可以將功能與樣式分開。 在初始構建階段，您有興趣在考慮網站外觀之前從功能角度確保網站正常工作。

相反，我們已經切換到“設計和構建”陣營，以便我們可以創建可交付的產品。 換句話說，我們可以在任何階段上線，因為該網站可以正常運行並且看起來不錯。 實際上，使用“設計和構建”方法，您仍然可以在沒有樣式的情況下構建模板，但是一旦完成佈局，您就可以對其進行樣式設置。 您不會將其停在一側並繼續構建下一個模板。

基本廚房水槽

這裡有一些適合“設計和構建”方法的東西。 它涉及設置一些元素的樣式，例如排版、添加站點品牌顏色以及可能將按鈕樣式添加到主 settings.scss 文件中。 令人驚訝的是，這些元素的樣式可以立即對網站產生什麼影響。 您立即擁有一個看起來不再像 Foundation 樣板網站的網站，並且只需花費大約 30 分鐘編寫一些 CSS 規則，您就會真正感受到進步。

框架站點

我個人的偏好是儘早設置頁眉和頁腳的樣式，因為它有助於構建站點並創建畫布以繼續樣式和構建站點。 它使網站看起來更像成品。 然而，一個可交付的網站仍然可以有一個無樣式但有效的導航和頁腳。

結論

關於如何將網站設計從 Photoshop 帶入構建過程，我們都有自己的想法，而以上恰好是我們喜歡做事的方式。

我確實認為至關重要的一件事是在開放開發環境之前製定計劃。 無論您是獨自工作的自由職業者，還是製定計劃的大型開發團隊的一部分，都是提高工作效率和速度的可靠方法。

如果您在 Web 開發方面需要幫助，請隨時與我們聯繫。