設計師學會No-Code設計開發工具的六大好處

前No-Code時代

以前No-Code工具還沒出現時,我做平面設計(主要是印刷)已有一段時間,第一次做網站時,那時候還是用Adobe Illustrator跟Sketch做設計的,做完之後交給前端工程師去開發。

當時第一次看到自己一整塊不會動的設計圖,經過前端工程師之手後第一次看到自己的設計圖在瀏覽器下整個動起來,不但滑鼠滑過去按鈕顏色會漸變,點下某一個區塊還會變成另一種狀態,對這整個變化感到非常的神奇,讓我對前端工程師投出仰望的目光…

其實我一直都對寫程式很有興趣,我曾經參加一個為期九週的Ruby on Rail程式碼魔鬼訓練營(coding bootcamp),但是我在 bootcamp 期間,第一次接觸了UX,反而對它比較有興趣,在實作時我會一直注意視覺上的部分,整個職業病牙起來,我會一直糾結在微調間距、字體大小那些細節,一行行密密麻麻的code與邏輯讓我的視覺型腦吃不消,我試過,但是失敗了。

原來設計開發可以一條龍

過了幾年後,No-Code運動開始興起,Webflow問世,我看到一些demo感到很驚艷,原本要用複雜的程式碼才能做的吸晴網站,在Webflow可以不用寫一行程式就做的出來。自從像Webflow這樣的No-Code平台出現之後,對於功能不複雜的網站,例如簡單的著陸頁,我可以開始一條龍掌握設計開發,不用總是倚賴前端設計師去做出我腦海中想要的設計。

而且我也在過程當中學會什麼是盒模型(Box Model),怎麼切版,基礎的CSS、HTML,甚至一點點Javascript的概念。

我覺得所有設計師都應該學會使用No-Code平台去「設計開發」出自己腦海中想像的網頁。

我說的不是Wordpress架站套模板那一套,或者用Elementor Pro去修改排版,雖然它也可以被歸類為No Code,個人使用起來覺得限制比較多、卡卡的、速度慢,而且使用它並不會讓你接觸到開發的本質,自然也不會逼你去學一點CSS HTML,幫你打下Coding的基礎…

假設你今天腦中出現一個有點出格的idea,你想知道它是否太天馬行空不切實際。如果你自己會使用No-Code網站開發工具,你就可以很快地去測試它可不可行。

當然這也不代表從此以後完全跟工程師說掰了,Coding是整個No-Code平台的基礎,遇到比較複雜的專案,還是需要與工程師一起合作才能完成的,所以平時要多認識幾個工程師好朋友。

設計師學會No-Code設計開發的好處

雖然這些工具稱為No-Code(無代碼),其實Low Code(低代碼)比較準確,你越是了解CSS HTML Javascript,或其他程式語言,你就越有優勢。

好處一:獨立實現你腦海中的創意

我們常在Dribbble上面看到一些天馬行空,很容易就可以在Figma排版出來,卻很可能讓前端工程師抓狂的設計圖,如果你自己就能使用無代碼開發工具,你就能不依賴前端工程師,去獨立實現你腦海中的創意,一旦了解到自己的設計圖實在太不切實際了,就能進而修正,這樣的過程能促使自己成為更好的設計師。

好處二:一條龍包辦設計開發

還有一個很實際的好處,如果你接到沒有複雜後端功能的網頁設計案子,可以不用跟前端工程師分攤費用,因為你一人就能包辦設計開發流程。

目前我在台灣觀察到的現象有些是這樣的,案主有網頁設計需求,發給一個不太懂網頁設計的平面設計工作室,平面設計師用做印刷排版那一套去設計網頁,然後交給前端工程師去切版,對像素錙銖必較,對圖對半天,因為他們不懂不能用做平面設計那一套來做網頁。

好處三:降低設計開發人事與溝通成本

假設你是設計工作室老闆,你要額外請兩個人(有些甚至請三個人)去完成其實一人就能完成的專案,如果你交給懂No-Code開發的設計師,你會減少許多設計與開發來回溝通的成本。

好處四:接到國外的案子

由於像Webflow這樣的No-Code網站開發平台在歐美國家比較盛行,如果你英文溝通沒問題,你就能開發國外客戶,到全世界範圍接案。

我們不要管Fiverr接案平台上面那些來自GDP比台灣低好幾倍的國家、低價競爭的Freelancer,目前我在Webflow官方社團觀察到的業內默認收費標準,一個3頁式以上網站至少2000鎂起跳,如果每個月能固定接到一到三個案子在台灣就可以過得還不錯。剛起頭要累積經驗作品集的話可以從500鎂開始,不過學完硬核技能不代表就會自動有客戶找上門,接案的軟核技能還是要會的。

好處五:增加一個可加薪的專業技能

如果你不想接案,多一個這樣的專業技能可以提高你的薪資,而且你再也不會是那種自顧自做出自嗨設計圖,造成前端工程師困擾的設計師了。

好處六:販售自己的網站模板,增加被動收入

你可以設計開發不同主題的網站模板,把它放在相關平台市場上販售,讓這些數位產品為你增加「睡後」被動收入。

推薦兩大No-Code平台

關於No-Code開發工具,我推薦Webflow跟Framer,Webflow學習曲線比較高,入手門檻也高,Framer自從大改版後對設計師非常友善,如果你會Figma,很快就能上手Framer。

0

You might also like