:::

Vital UI Kit

Vital UI Kit
Vital UI Kit

概要

一個優雅且容易客製化的前端 UI 框架。


目標

  • 建造設計系統
  • 屬於台灣開源的 UI Kit
  • 建造工程師與設計師之謙的橋樑

角色

  • UX
  • 切版

工具

  • Sketch app
  • Fabricator

過程

觀察

  • jQuery UI
  • Bootstrap
  • Foundation
  • Semantic UI
  • Material UI

學習

  • 什麼是設計系統？
  • 什麼是 UI kit？
  • 有什麼競品？
  • 誰會使用？
  • 為什麼台灣沒有開源 UI Kit？

研究

  • 研究前述各大前端 UI 框架設計稿與切版如何搭配。
  • 研研究 Sketch App 設計稿管理與協作規則制定，例如參數設定等。
  • 研究 CSS 管理與命名規則。
  • 研究融合 設計稿 與 CSS 命名規則，方便一眼便知是哪個元件。
  • 研究以何種方式建立 Document 網站內容。
  • 研究LandingPage 文案、個性朔造。

產出

使用 Fabricator 建立文件
使用 Fabricator 建立文件
Sketch App 檔案 Button 元件示意圖
Sketch App 檔案 Button 元件示意圖

相關連結