前端工程師,需要懂設計嗎?

設計,只是設計師的事嗎?

ps:其實我合作的設計師都是高手,狀況也是偶然遇到外面的設計師。可見要養成一個專業網頁設計師,可不是那麼簡單。

這不是一個是非題,也不是一個可以下一個很明確的定論,只是有那麼一點小狀況,恨不得要寫出發洩罷了。最近這些年,台灣對前端工程師和界面製作的需求明顯增加,而這幾年也多了些技術和流行例如RWD(Responsive web design ),所以很常接收到一些挑戰就是「怎麼在XX螢幕看的效果不一樣啊?」、「這個等比縮小就可以了」之類的話。

收到一個如抽象畫大師一般的設計圖真的有夠衰,重點是你還沒有辦法和設計師溝通,嚴格來說,就是要學會如何用狗屎來製造巧克力蛋糕,顏色一樣就可以,吃起來味道就可以忽略咯?

沒錯,按照畫面做出來就好,效果和性能,UX和UI對不對不重要嗎?那真的那麼簡單嗎?例如每個input的提示UI都長不一樣,一個網站用了10幾種顏色相近的色碼,有七八個不同「樣子」的選單,四五六種不同「樣子的」的狀態,我姑且不論是不是真的需要這樣做?我倒是很希望知道設計師在想什麼罷了,又或者這是「主管」的決定,大部份設計師和工程師都知道,10個部門主管有8個都是「門外的專業者」,套用我同事的話就是「說的一嘴好程式」,所以有這樣的「東西」出來是一點都不奇怪。

好吧,那麼總好過什麼都沒有,拿到這樣的「海報」就只能硬著頭皮開始做咯,總算按照畫面弄了一個很基本的HTML,那麼其實好好的,但是整個設計圖根本沒有Grid的概念,其實就是隨心所欲的把東西放在PSD上,所以一縮小就整個變得很詭異了,小弟我才疏學淺可能還沒有能力把這樣抽象的東西實現,真的是我的問題。結果我要不容易把一個很奇怪的1920×1000的設計圖做出來,然後在1024×768的瀏覽器爆掉,而這場會議我就當然是完美落地(完整的無言倒地),就在會議中,內心上演高空落地的同時,怎麼都沒有人反省一下,這些東西怎麼塞進這個1024裏面呢?

「直接縮小啊」,門外有個專業的人給了這個建議。

直接縮小連字都看不到了!全版的時候你就把東西塞滿了~而且你這連比例都沒有。縮~屁~哦~

設計,「懂」的意識是什麼?

在古代(沒有那麼久啦,就是以前),設計師和工程師是分開很明確的兩個角色。但是你看現代,出現很多不同的專業和角色,專門處理照片的叫攝影和平面設計師、專門處理使用者界面的還有使用者行為的叫UI/UX設計師、再來就是處理CSS和HTML的結構人員….直接看圖

developer_designer_spectrum

大家有各自喜歡的領域和研究的東西,設計師和工程師不再是兩個分開獨立的崗位,如果沒有配合的好,就如開車的閉眼,旁邊的帶路一樣,不是行不通,只是很危險。

所以默默的前端工程師就變得很重要,除了是和設計師溝通以外也需要和和後端人員溝通,所以一個前端工程師或多或少也是會接觸到設計的,所以你說當一個前端工程師拿到一個很「特別」的設計圖之後,心裏多少就有一些預感了,這東西行不通吧?這個東西是不是應該在按了之後會才出現啊?這放Slider不適合是因為…這個不是背景圖吧,她的身體是在div的前面,而後腳是在div的後面,這只能是一張圖吧~等等…

很多在別的網站看過的東西,就直接照抄又抄的不對就會…畫虎不成哦,就會變成可愛的小狗哦,即便我做出來,也不會像老虎的,因為你給我的時候,他已經就是一只不擇不扣的高山牧羊犬了。

如果是一個平面設計師想專職當個網頁設計師,如果可以的話,先別太有創意,慢慢來,學會基本的,再按照「原理」來發揮你的創意。

設計,直接影響可行性和預測

前端工程師一定要參與設計和討論的,這是我的想法。

這是一個流程,設計和規劃是第一步,這個是很重要的,但是很不幸,在這個就業環境裏,很多決策和規劃都會落在一些比較沒有技術背景的人身上,劉禪教你去打仗,不死才怪。

可能設計是顯性的所以一般人都只會給這方面的建議,但是所謂的建議,是不是真的有建設性呢?還是只是用「一般人的」角度在思考,或許,用「一般人的角度」去思考是對的,因為網站是設計給一般人用的,但是我們也是一般人啊,弄出來的東西就連我們也不會用了,你覺得一般人會用嗎? 不要再說「一般人」,不要給設計師或工程師一個罪名,就說他們都不會替「一般人」思考,所以後來有群人,專門來研究「一般人」的思維,那就是做UX和UI的吧。

這群人,能夠給案子最好的直接建議,來評估案子的可行性和執行力,那是最直接不過的方法,要有效的執行一個案子,直接說你要什麼就好了,其他的東西,交給專業的來做。

如果給錢的就是大爺,做出來的東西壞掉就不要哭泣就是了。

網頁設計並不僅僅是顏色和幾何圖形

網頁設計不是僅僅是一些顏色和幾何圖形,它是一個故事,它有前因後果,它有自己的連帶關係,它有自己的路線。每個按鈕、每個畫面、每個佈局都是有想過可行性、涉及到的東西、可變性、同質性等等,把做海報的經驗拿過來分解成如何做一個網頁,而不是把一個海報弄成很像一個網頁就當作是網頁設計了。

所以如果你是網站策劃者或是一個管理人,應邀要知道。

「不是把一個海報弄成很像一個網頁,就當作是網頁設計了。」

  • Guest
  • tony

    那是你遇到的设计师基础太差的缘故,一般有点操守的设计都会规范好栅格和安全内容范围,这个都是基本的要求吧,再就是,前端审美得过关,可以不懂设计。

    • nickjazz

      哈,真的。
      不過其實我合作的設計師都是高手,狀況也是偶然遇到別的,不過一次兩次就很麻煩了 XD

  • 孜婷 孫

    有時候設計也是被客戶或主管或其他強迫的一方嘛…也不是每一個網站都需要前端認為需要的東西!!例如Grid的概念,至少有時候真的是如此…
    聊聊我理解的1920設計~有時候1920是背景寬,就是小螢幕時看不到也沒關西的背景,主要內容在1024即可(要是超過是該打屁股拉,但時代不同拉~用小螢幕的人都該死快去換大的吧~就是慢慢有越來越多人這樣想=..=),因為畫面滿版很大器看起來很爽!!至少有些遊戲活動網站就是有這樣的需求!!!廣告類的活動網站也是這樣!!滿版的氛圍就是很強阿!!
    總之前端若是不知道設計是為何而作也理解不了,那就去問清楚吧!!去商量!!為更好而改變!!但是要客戶或主管願意給你時間…SO~寫這篇把設計看的為免也太膚淺,我認識很多設計不斷在精進在學習的,因為我們有我們的職責所在!!我們也會為了網站好去做改變結果被打槍!!客戶老是無理要求我就是要每個按鈕都不一樣!!
    可以的話多希望可以和前端一起討論一起去對抗客戶(哈哈)!!
    在台灣很多事情不一定是對的,但大家都那麼做了的話,若有不滿去討論還滿常不被理會,想那麼作一點也不簡單!!
    追根究柢前端自己該站出來請大家重視,在設計做搞之前就先開會討論!!很難嗎?很難阿!!
    海報甚麼的你就以為只是這樣嗎?笑^^
    哀哀不好意思認真了~也為遇到濫設計而吐血的作者感到悲哀~阿悶~~~~XD
    前端要懂設計嗎?我想應該不是懂設計,而是要知道設計師在想甚麼吧?找設計師聊聊吧~~

    • nickjazz

      哈,這不是針對設計師的文章。
      也許他也是被逼的。

      就當作看故事就好,不需要太認真。哈哈 因為我設計師朋友也不少。要是真的我死定了。哈。

      不過在想一個設計的時候,可行性也是很重要。
      畫了一件不知道如何穿的衣服,
      想像了一個不知道如何居住的室內空間。

      也只是針對產業環境的無奈。

  • 羅拉拉

    哈哈哈心有戚戚焉,我本來是設計後來改作前端也三年了,以前當設計被前端嫌,現在作前端也想跟好設計合作。其實我覺得網頁設計跟前端的工作性質意外的相似,但我說出來肯定會被設計瞪XD

    • nickjazz

      哈哈,會被瞪+1
      不過我是很喜歡設計,所謂愛之深、責之切,我個人覺得網頁設計很難,想iDea很難,想一個make sense的Idea更難,要兼顧到很多東西。所以只是希望其他人,重視一下網頁設計,那不是一個很簡單的事。

      • 羅拉拉

        我也很喜歡+1 世人對設計的要求「美」只是基本,然後還有很多附掛要求跟能力。就跟前端理當要搞定所有「前面」的事。有時後觀察這兩邊會覺得很妙。我自己年輕作設計時覺得工作很難很了不起,工程師都不懂不諒解,現在才知道覺得難是因為自己的能力不足,覺得別人工作輕鬆是因為看得不夠多。

  • Pingback: 前端工程師,需要懂設計嗎? | Kimix – 台北網頁設計 - Taipei Front-end Development & Designer | ShareTextOnline()