一個前端工程師如何取代兩個人的團隊

用兩種思想思考

過去幾年，網頁設計領域的需求發生了變化：對具有前端技能的設計師和具有設計技能的前端開發人員的需求越來越大。 是的，你可以爭辯說這些工作是完全不同的——也許你直接不喜歡其中一個——但說實話，在我作為自由網絡開發人員的六年和作為設計師的十二年中，我已經了解到，作為一名網頁設計師或前端開發人員，比作為同時了解這兩種角色的前端工程師要難得多。

身兼兩職有很多優勢：僅從專業角度來看，您可以更輕鬆地找到工作並收取更高的費用，因為您帶來了更多收益。

但是，作為混合前端工程師工作也有一些您需要了解的缺點以及如何解決這些缺點。 作為一名創意設計師，您將使用您的“右腦”，即負責視覺、空間和感知信息的一半——換句話說，網頁設計中的所有東西都很漂亮。 作為一名技術前端開發人員，您將使用您的“左腦”，即您瘋狂的右腦藝術家的邏輯和分析夥伴。

而且，因為你只是一個人，這意味著你同時在做兩種完全不同的工作，用同一個大腦——這會讓你的大腦完全混亂。 如果你不能處理它，你就不會產生高質量的工作，也不會充分發揮你的潛力。 而且，如果你是一名自由職業者，試圖實現混合前端工程的工作描述，你可能會與一個由兩人（開發人員和設計師）組成的團隊競爭，所以你必須在同一時間框架內工作，同時保持質量。 （當然，您也可以像兩人一組一樣獲得報酬！）

知道使用大腦的哪個部分以及何時使用它是簡化流程並以零挫折和在截止日期前留出充足時間以產生最佳結果的關鍵。 無論您在哪裡缺乏，在左側或右側，這篇文章都將幫助您了解您需要的技能以及獲得它們的方式。

與您的項目共度一夜

準備好了？ 偉大的！ 假設您被要求為 miniCloud 設計網站，miniCloud 是一家提供定制 VPS 解決方案的新興初創公司。 你從哪裡開始？

在我開始一個項目的任何“真正”工作之前，我喜歡上床睡覺。 這意味著要對客戶的產品、服務、競爭等進行徹底的研究。簡而言之，谷歌就完蛋了。 在那之後，整天想著這個項目：當你完成它時它會是什麼樣子？ 帶它去吃晚飯，帶著你的新性感設計入睡。 在此階段，請隨時準備好鉛筆（或手機），隨時將想法寫下來。 這種思維工作通常有助於定義流程的關鍵方面。

讓您的創意源源不斷：設計過程

現在您已經有了一些構想，是時候開始真正的設計過程了。 這包括三個步驟：1）草圖，2）線框和3）圖形。 這是你讓大腦的藝術部分做它的事情並用鉛筆、紙和 Photoshop 發瘋的部分。

在這個設計階段，讓您的“開發人員”方面對您進行檢查至關重要，這樣您就不會對網站的某些方面發瘋，這些方面幾乎不可能使用 HTML、CSS 和 jQuery 快速重新創建。 如果您嘗試重新發明瀏覽器，您的前端開發人員會因此而討厭您。 你的前端開發人員就是你——還記得嗎？

因此，請以網頁設計的最佳實踐（和一些常識）為指導，因為通過重新設計朋友的婚紗網站，您不太可能開闢新天地。 這並不是說你不應該致力於創造一個奇妙而令人印象深刻的設計。 而是想出一些你知道是可行的東西。 重新發明網絡的項目通常在您的業餘時間完成，沒有最後期限。

1. 草圖：我從一個方形紙質筆記本和幾支鉛筆開始。 方格紙特別好，因為您可以將其用於基於網格的設計。 稍後當您將草圖轉換為線框並最終轉換為基於網格的網站時，您將沒有問題。 對於 miniCloud，我們的草圖可能看起來像這樣：

請注意，草圖上的其他細節，如雪、鳥和雲，是我拖延的產物，在您的設計過程的任何部分都不是強制性的，但它們看起來不錯。

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>

1. 線框：現在我們對網站的外觀有了基本的了解，是時候創建可以向客戶展示的線框了。 有很多方法可以完成這項工作。 在某些情況下，如果您覺得沒有必要，可以完全跳過該步驟。 就個人而言，我使用 Photoshop 來構建我的想法，因為它是我最熟悉的工具。 .EPS 或 .PSD 中有很多免費的線框工具包，可讓您在幾秒鐘內開始，因此您無需從頭開始創建和繪製所有元素。 如果您想避免使用 Photoshop，也有一些在線解決方案，但我更像是離線類型的人。 無論如何，擴展我們的草圖，我們可能會像這樣對我們的網站進行線框：

1. 圖形：這是我最喜歡的部分：將我們的線框變成一個漂亮的網站。 但不是每個人都是我。 如果您主要是一名開發人員，並且在設計、顏色、排版等方面幾乎沒有天賦，我建議您從其他網站開始尋找設計靈感。 它們有很多，而且都充滿了偉大的想法——誰知道呢，也許你心中有一個設計師正等著出來？ 我發現保留一個我覺得特別好看或設計良好的網站的書籤文件夾很有幫助。 畢加索（？）確實說過，“優秀的藝術家抄襲，但偉大的藝術家偷竊”——這並不意味著你拿別人的設計貼上你的貼紙。 取而代之的是，從別人的工作中獲得靈感，並添加自己的想法和方法。

我所有的設計都是在 Photoshop 中完成的。 理想情況下，您的客戶將為您提供可以使用的原材料，例如照片和復製文本，您可以使用它們來代替佔位符。 當您將其發送到修訂版時，它看起來好多了。

 So, for step three, we take our wireframe and bring it to life: 

順便說一句：如果您最終使用 Photoshop，那裡有很多很棒的資源可以讓您的流程更快，例如插件和样式。 我可以單獨寫一篇關於它們的整篇文章，所以我只指出一些我經常使用的。

1. CSS3Ps ：免費的基於雲的 Photoshop 插件，可將您的圖層轉換為 CSS3。
2. Divine Elemente ：直接從您的 PSD 創建 WordPress 主題。 它非常適合快速啟動您的 WordPress 項目。 儘管他們說“不需要 HTML 技能”，但如果您想獲得出色的結果，您實際上需要一些技能。
3. Subtle Patterns ：在您的設計中使用的免費圖案的集合，通常作為背景。 當您試圖將您的設計從優秀變為真棒時，這些細節會產生重大影響。

“切片”：前端流程

在我完成設計階段並收到滿意的客戶的同意後，我準備將我的靜態圖像變成實時網站。 請記住，在這一點上，我們的設計仍然只是：設計。 在它為網絡做好準備之前，我們還有很長的路要走。

在這個階段，是時候使用左腦，更善於分析的一半了。

在網頁設計領域，我們將此過程稱為“切片”。 雖然這個術語在前一段時間更準確，但在 CSS 成為 Web 的主要視覺構建塊之前，您必須將 PSD 或 PNG 的每一小塊切割並放入可怕的小表格中，它仍然存在。

如果你是一名網頁設計師並且你還不知道如何“前端”，那麼你很幸運——因為可以學習編碼（不像天生的設計訣竅）。 我建議您投資一些在線視頻教程，例如 Lynda.com，並複習前端開發基礎知識。 （可以在此處找到更明確的資源列表。）在幾個小時內，您將從零開始閱讀代碼。 幾天之內，您將自己編寫它。 幾個月後，你將成為 HTML 和 CSS 的大師——當涉及到前端工程工作時，你就不會停止。

現在，如果您根據您熟悉的某些網格創建了一些很棒的線框（在前一階段），您將確切地知道您希望如何對您的網站進行編碼。 最快的方法是使用某種前端框架，例如 Bootstrap。

一旦掌握了基於網格的設計，您就會開始將網站的每個部分視為一堆行和列。 當我設置 HTML 結構時，在添加任何實際內容或 CSS 之前，我做的第一件事是先寫入行，然後是列，然後是導航等基本內容，然後是文本和圖像佔位符。 這使您可以先獲取基本結構並從那裡構建。 查看這個線框，我們可以看到六行：

1. 標誌/導航
2. 圖像滑塊
3. 文字簡介
4. 類別圖像
5. 最新消息/優惠
6. 頁腳

在我們將它們放入 Bootstrap 的 HTML 結構後，我們將擁有如下內容：

許多基礎網站使用相同（或相似）的代碼，隨著您從事的項目越來越多，您會發現網站開發在很大程度上是一個迭代過程，每次迭代都編寫相同的代碼是沒有意義的. 這就是為什麼框架很有用！ 無論您是自己創建還是決定使用 Bootstrap 或 Foundation，都沒有關係。 重要的是您可以在以後維護它並在需要時對其進行擴展。

項目所需的幾乎所有東西都已經製作過了，然後又重新製作了幾次。 因此，對於任何主要任務，在你一頭扎進牆之前，四處尋找並詢問其他人是否有建議。 大多數大型框架都有非常活躍的社區，可以創建額外的代碼和插件，讓您的工作更輕鬆。 所以聰明地工作，而不是努力——每天都在學習。 而且，如果您確實需要以前沒有人建造過的東西，那麼，您正在開闢新天地！ 寫下它並與社區分享——它將幫助您成長為一名設計師和開發人員。

選擇 CMS

對於一些前端工程項目，只要您的設計出現在實時網頁上，您就可以完成。 這些通常是較小的站點（例如，針對小型企業、律師、牙醫等）。 但通常，您或您的客戶會希望控製網站的內容。 在這種情況下，您需要一個內容管理系統 (CMS)。 CMS 的目標是讓您編輯內容並將其發佈到網頁，而無需手動編寫每個新細節，甚至根本不需要編寫代碼。

在所有大型 CMS 中，我會稱自己為 WordPress 佈道者：我對其他開發人員，尤其是初學者贊不絕口，因為它的多功能性、易用性、全面的開發文檔、龐大的社區、大量的免費插件、等等等等…

如果有人告訴你 Joomla! 更好，尤其是對於較小的項目——然後他們不知道他們在說什麼。 無論如何，不要只相信我的話：下載 WordPress 和 Joomla！ 入門主題，查看每個文件夾，然後問自己——你希望在新的前端角色中探索哪些？

我需要一整篇文章來寫這個話題，但相信我，就像你相信 Baz Luhrmann 的防曬霜一樣。

如果您的項目特別小，並且您只需要一個無需任何編碼技能即可實現的簡單 CMS，我建議您使用 CouchCMS。 只需幾個 XHTML 標記，您就可以在幾分鐘內啟動並運行它，甚至您的祖母也會知道如何使用它。

維護您的網站

在您交付您的網站並且您有另一個滿意的客戶之後，您要做的就是維護網站。 如果您已經構建了一個沒有新內容的簡單 HTML 站點，那麼您可能已經完成了。

如果您使用過 CMS，則必須確保該技術始終是最新的，以避免任何安全漏洞。 這包括 CMS 本身和您使用的任何插件。 如果您接受了我的建議並使用了 WordPress，您將通過電子郵件收到每個可用更新的通知。

這是我的過程的大致情況。 當然，這並不適用於每個人，當然也不會適用於每個項目。 但我希望這可以幫助您的設計師獲得成為優秀前端工程師所需的技能，反之亦然，這樣我們就可以繼續發展我們作為前端開發人員的才能。

我只能給你看門。 你是那個必須走過它的人。 - 墨菲斯，矩陣

PS：您可以在我的 dribbble 作品集上找到上述模板的 PSD 和其他很酷的設計。