設計師編碼——我們應該知道多少?

已發表: 2022-03-11

拿一些你擅長的東西,然後把自己推得更遠。

設計界的很大一部分人都在爭論設計師是否應該編碼。 一些人喜歡尋找可以兩者兼得的獨角獸,而另一些人則聲稱它們不存在,或者只是礙事。

許多設計師認為設計師和開發人員需要合作,但每個學科都應該堅持他們所知道的。 其他人認為專業人士戴多個帽子沒有問題。 許多開發人員認為設計師編寫威脅代碼,而其他人則將他們視為已經學會說他們的語言的受歡迎的合作者。

所謂的“共同理解”的甜蜜點可能在中間的某個地方。 懂一點代碼並不意味著設計師必須成為專家級編碼員,而只是了解開發人員的觀點。

UI 或“表示層”是設計師的遊樂場,但僅關注這一點類似於只考慮建築物的立面。 偉大的設計師明白,熟悉交付設計的技術基礎不僅會讓設計師更令人印象深刻,而且還能顯著提升他們的職業前景。

正如 InVision 設計教育副總裁 Aaron Walter 在 Toptal Design Talks 文章中所說:“如果他們知道一點如何編寫一些 HTML 和 CSS,也許是一點 JavaScript,這不會殺死一個設計師。”

編碼的設計師是更好的合作者。
會編碼的設計師,即使是一點點,也可以讓自己成為任何多學科團隊的重要資產。

整個“設計師應該學習編碼”這個話題引起了激烈的爭論。 儘管一些偉大的設計師也擅長編碼,但許多人認為全神貫注於特定技能將使專業人士更強大。 許多人還認為,今天,成為一名多技能的設計師是一大優勢,並且不應妨礙設計師擁有另一種有用的技能,例如編碼。

問題是,設計師應該知道多少編碼? 設計師會浪費他們的時間,還是跨界進入開發商的領域並可能踩到腳趾?

了解基本 HTML 和 CSS 的好處

設計師將從獲得由HTML (超文本標記語言)和CSS (層疊樣式表,一種描述 HTML 文檔中的組件樣式的語言)驅動的所謂“前端”(表示層)的一些基礎知識中受益匪淺。 ,並且可能會驚訝於學習基礎知識是多麼容易。

HTML 和 CSS 不涉及編程邏輯。 HTML 中的字母M代表“標記”,一種描述頁面元素編碼結構的方式,這些元素是頁面的構建塊。 HTML 與 CSS 和 JavaScript 構成了萬維網的三大基礎技術。

設計師可以融合編程和設計的知識。

通俗地說,HTML 是一個架構圖,它告訴瀏覽器要顯示什麼,而 CSS 或級聯樣式表是告訴瀏覽器如何顯示事物的代碼。

打個比方,如果 HTML 是頁面的骨架,CSS 將描述高度、體型、皮膚、眼睛顏色、頭髮顏色等。該語言具有非常簡單的代碼結構,它決定了排版、顏色、位置和尺寸.

理解代碼和如何編碼就是理解像素

學習如何編寫前端 UI 並進行預覽,讓設計人員有機會立即了解在各種設備上查看時事物的顯示方式。 如果設計師使用 HTML 和 CSS,他們會注意到一切都以像素為單位(還有其他度量單位,例如“ems”和最終將轉換為像素的百分比)。

了解度量和代碼結構,即頁面如何顯示,將提供對前端開發過程的更深入了解。 這反過來又會促使設計師更深入地思考他們的設計,以及如何讓他們在這個過程中更有效率。 他們會知道什麼是容易實現的,什麼是更具挑戰性的。

對設計師而言,編碼是一筆巨大的財富。

前端 JavaScript 和 Ajax 專業知識使設計師成為獨特的資產

這是事情開始變得複雜的地方,但它也是很多樂趣發生的地方。 如果設計師是分析型思考者,或者非常有動力,他們將從學習 JavaScript 和 Ajax(異步 JavaScript 和 XML)中獲得很多。 為什麼?

展示前端 UI 技術知識並熟悉 Ajax 將大大有助於贏得開發人員的尊重。 能夠參考 JavaScript 和 Ajax 以及如何使用它們將提高設計人員向開發人員闡明特別複雜的設計理念的能力,例如,在 UI 中設計特定功能。

如果設計師能夠準確地了解技術可以帶他們走多遠,以及他們可以推動技術創新多遠,他們的視野就會拓寬。 沒有必要深入研究編碼和各種技術——如果設計人員了解 HTML、CSS 和 JavaScript 的基礎知識,以及少量的 Ajax,他們就已經在競爭中遙遙領先。 它們將成為任何公司和產品團隊的獨特資產。

關於編程和設計
InVision 設計教育副總裁 Aaron Walter 在 Toptal Design Talks 文章中概述了設計師和開發人員如何更好地協作。

設計師可以通過 JavaScript 基礎知識將其提升到一個新的水平

儘管設計人員可以在這裡停下來,讓開發人員實現後端(數據訪問層),但他們可以通過添加一些腳本來使設計更加動態。 輸入 JavaScript(一種腳本語言),它是一種用於 Web 的編程語言。

在 2000 年代初期,當 Web 仍在發展時,Fantasy 和 Firstborn 等機構以不同尋常、創新和創造性的方式利用 JavaScript,給 Web 設計社區留下了深刻印象。

JavaScript 可以更新和更改 HTML 和 CSS,並且可以計算、操作和驗證數據。 它可用於顯示動態交互、動畫元素、創建與後端或服務器的響應式通信等等。

在前端開發中使用 JavaScript 可以完成的事情沒有限制。 它是一種編程語言:函數、對象、邏輯、條件、數學、數學和更多數學——這對某些人來說可能有點挑戰。 但這並不難學,尤其是考慮到大多數客戶的需求。

為什麼 JavaScript 對設計師很重要?
像這樣的動畫時間線可以單獨使用 JavaScript 創建。 (歷史學.io)

學習編碼將改善與開發人員的協作

如果男人和女人能讀懂對方的想法,戀愛關係會不會更容易? 有些人是這樣認為的。 同樣的事情也適用於設計師和開發人員。

了解開發人員的想法,以及他們需要什麼才能完成他們的工作,將使設計師成為任何多學科團隊的重要資產。 這種方法對於內部溝通和想法推銷很有用,因為他們將對團隊其他成員的期望有更多的了解。 如果設計師能夠做到這一點,他們將能夠更好地向客戶提出更強大的解決方案。

編碼的設計師將看到更多的工作機會

在每一個設計工作機會中,知道如何編碼可以對篩選過程以及日常工作產生重大影響。 在 Toptal,我們為具有這種混合配置的專業人士看到了很多機會,並且那裡的初創公司渴望找到可以接管其早期應用程序的設計和前端的人。

設計師的編碼是一個優勢。
學習如何編碼可能會帶來一些意想不到的機會。

儘管如此,還是有一些設計師和程序員不喜歡互相窺探對方的業務。 有些人可能會受到威脅,有些人可能會受到挑戰,有些人可能懶得學習新東西。 但事實是,每個人都應該分析他們的選擇,並專注於什麼會增加他們成功的機會。

設計師可能沒有足夠的時間來學習所有東西,但是了解普通的 HTML 和 CSS 應該足以在蓬勃發展的職業和死胡同之間增加顯著的區別。 對於設計師來說,邁出第一步應該是一個快速而簡單的過程。 他們知道的越多,就越能在工作機會方面擴大視野。

設計師應該學習編碼嗎?

與其他團隊合作的適應性和靈活性、處理各種項目的能力以及承擔各種職責的廣泛技能總是很受歡迎。 在令人興奮的初創公司或大型成熟的科技公司從事令人垂涎的工作時,是否有任何地方的設計師不希望比其他人更有優勢?

設計師有他們的方法、流程、設計工具庫和可交付成果,但這只是方程式的一部分。 探索並了解如何使用各種數字技術交付 UI 設計,可以將設計師提升到一個新的水平,並提高他們交付出色設計的能力。

越來越多的設計領域的工作機會包括“必備”,例如基本的 Web 開發和使用 HTML、CSS 和 JavaScript 的原型製作技能。 由每個設計師決定承擔多少; 顯然,需求就在那裡。

編碼的設計師看到了更多的工作機會。

人工智能會淘汰前端開發人員嗎?

但是仍然存在一個問題:設計師的編碼是否會在較長時期內保持相關性? 設計師之間有一種暗示,借助人工智能和機器學習,設計師很快就能夠在沒有代碼的情況下進行設計。 只需在屏幕上拖放和移動東西,然後按下一個按鈕,人工智能就會對整個東西進行編碼。 換句話說,這類前端開發人員的工作將很快消失。

就設計師而言,答案可能在於考慮短期與長期。 在不久的將來,AI 不會接管,可能仍然對編碼的設計師有很高的需求。 在短期內,想要脫穎而出的設計師應該在他們的武器庫中保留一些基本的編碼技能,例如 JavaScript 和 Ajax。

設計師掌握編碼將促進職業發展

渴望發展和提陞技能的 UI 設計師有一些選擇。 他們可以學習各種設計技能,並進入其他角​​色,如視覺設計、用戶體驗,甚至用戶體驗研究。 他們還可以逐步爬升到更高級、負責人、領導、經理和董事級別的角色。

然而,為了真正提升他們的職業生涯,設計師可能想要更多地研究開發。 深入了解推動當今數字產品的各種技術將為他們提供一套非常理想的技能。 這反過來將為大大小小的公司打開更多的就業機會之門。

設計師應該編碼嗎? 也許,也許不是。 但是,編碼或至少展示對各種技術的深入了解的設計師將成為任何多學科團隊的重要資產,並且從長遠來看肯定會有所回報。

• • •

進一步閱讀 Toptal 設計博客:

  • 移動用戶體驗設計原則和最佳實踐
  • 移動用戶體驗設計——最佳實踐、約束和與開發人員合作
  • 跨文化設計和用戶體驗的作用
  • 設計原則及其重要性
  • 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例