FLOSS UI/UX: 用Inkscape 來作UI Mockup 的教學分享

這是互動設計師Máirín Duffy 的教學與經驗分享，目前她在Red Hat 工作。很有趣的是，他認為自己是一個很怪異的設計師，鄙視Apple 和Adobe。她為自由與開源軟體作設計，也使用100％自由和開放源碼軟體來製作自己的設計。下面列出她從事設計所喜愛的工具：

她在作介面設計的主要使用工具是Inkscape，而Gimp 為輔。而這篇的介面設計分享是以Inkscape 這套軟體工具來進行。她相當強烈的相信，任何人都可以成為設計師。製作Mockup 是UI設計工作流程中重要的一部分，這過程沒有多麼隱密或神秘的煙霧繚繞儀式，你也能夠做到這一點！

這篇教學分為幾個部份：

瀏覽Inkscape 的UI 操作 -學習在Inkscape 中哪一部份的UI操作對於製作Mockup 來說是最有用的。我們也會在本章節中用到重要的鍵盤快捷鍵來進行課程。
矩形和文字工具是你最好的朋友-矩形和文字工具提供了Mockup 的基本框架。學習使用它們的技巧和竅門，這會有助於你的Mockup 製作過程。
按下Ctrl + D 並且移動它-製作Mockup 的過程中，經常使用的眾多快捷鍵之一是Ctrl + D，這一招的優點，有助於製作完美的grid、tab、navigation bar 和其他UI 元素。
把它們群組起來-如何使用Inkscape 中的群組功能，有邏輯的組織你的Mockup。
儲存和分享-現在你已經有了一個很好的Mockup，你打算怎麼儲存它並與其他人共享？本章節將通過開源的工作流程，顯示如何使用Inkscape 中單一SVG 文件存儲多個螢幕Mockup，將它們個別匯出為PNG 檔案，以及如何使用wiki的頁面格式來分享這些Mockup 。

簡報下載：