iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
0
Modern Web

從前端走到設計,下一步?系列 第 7

Day7-從無到有的設計圖

我還不是什麼設計大師,這邊我只想分享我在做設計圖過程所利用到的資源,幫助對這方面有興趣人可以更快上手。

Adobe XD

前面有提到我用的是 Adobe XD,有免費版,當然你也可以升級用更進階版本,我自己認為免費版已經足夠初學者了。
下載連結:https://www.adobe.com/tw/products/xd.html

打開之後是這樣

我覺得它非常好上手的原因就是左邊的功能列很少,淺顯易懂。老實說我是一個繪圖軟體白癡,不管是 AI、PS ,我都花了很久時間摸索也摸不出什麼頭緒,原因就是因為功能太多
相較之下,Adobe XD 的功能簡單扼要,左邊功能欄依序為:游標、矩形、圓形、三角形、直線、鋼筆工具、文字、新增版面、縮放,雖然看起來很少,但其實非常足夠!如果在做 UI 的過程有圖片想修或裁剪,XD 並沒有這類的功能,畢竟它的定位就在 UI 設計,如果你想修圖應該去他們家其他產品像是 PS(我想可能也是某種商業策略吧哈哈)。

臨摹

如果你打開了軟體,也知道了有什麼功能,但腦袋還是一片空白的時候,那就去找一張你喜歡的 UI 圖來跟著做吧。

我自己拿了 Google 首頁

(圖片擷取自 Google 首頁)

可以用文字框、矩形工具就做出 Google 首頁的 50% 了
找到對應的 icon,就完成 80% 了呢

我自己覺得臨摹是除了初學者在剛開始沒有想法的時候很適合的方式之外,因為我也是第一次接觸這套軟體,所以臨摹可以很確實的知道你現在需要什麼功能。網路上也有很多教學,可以讓你臨摹後的相似度更高。

參考資源

有很多設計平臺,上面會集結著來自各方的設計作品,我不定時會上去看看除了找尋靈感之外,也可以看看最近流行什麼樣的排版或配色樣式。我最愛的網站是 Dribbble,風格非常多元。不只是 UI,上面也會有 icon、電繪之類的作品。

剩下的就是 Google 啦

自學一樣技能的時候,進步最快的一定是 Google 能力。然後英文的資源又一定比中文多,如果願意的話,其實同時也可以訓練英文能力。
我自認資質駑鈍,在這條路上雖然沒有太有成就,但也沒有太多碰壁讓我一蹶不振,相信聰明的大家應該可以走得比我更快,嘻嘻。


上一篇
Day6-100 天過去了,然後呢?
下一篇
Day8-設計三大元素:配色、字體、icon
系列文
從前端走到設計,下一步?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言