Star Rocket
Published in

Star Rocket

設計也有技術債?那些年,Star Rocket 所欠的設計債

如何整理設計所累積起來的設計債以及減少債的發生?

設計債的實例:Google Chrome 的 95 道陰影

google chrome

那些年,Star Rocket 所欠的設計債

舉了一個 Google 的實例,那回到 Star Rocket 這樣的小組織,又有什麼樣的設計債?

目前 Star Rocket 旗下雖然沒有太多線上產品,不過在我進來開始使用新技術 Gatsby.js 進行官網的開發與 newsroom 的建置 ,以及半路還跑去當編輯製作《Star Rocket 創業週報》的途中,我發現 Star Rocket 的 logo 就像什麼神奇寶貝的百變怪ㄧ樣,有各種不同樣式的 logo。

圓角的 logomark、logotype 兩排變成一排、粗線條的、細線條的、自己在後面加字的,我其實也不知道我們到底有多少個版本,但這些全部都在 Star Rocket 當初 2015 年所寫的 brand guideline 以外的用法。

misuse brand logo
原本上排為最一剛開始訂定的識別設計規範,爾後開始延伸出下面這些規範以外的 logo,讓後來製作網站的我感覺遇到了 logo 百變怪。
star rocket version control
有各式各樣編號,但卻不是很懂次編號跟主編號變更上的差別
design system
有一陣子非常著迷於閱讀各品牌的 design system 與 brand guideline,看到別人如何細膩的提出什麼樣的原則是符合品牌精神,以及實務做法上會怎麼把品牌的感覺帶進去任何一個設計元素裡面。並且為了加快團隊內的效率,把前端與設計上會重複使用的元素定義成一個元件,方便大家快速使用以及後續的維護。

什麼是設計營運 DesignOps?能吃嗎?

所謂的設計營運(DesignOps),是由 Design 與 Operation 所結合出來的一種新詞。根據 Invision 所推出的電子書《Design Ops Handbook》指出,DesignOps 是擴展設計團隊與增進設計效率的關鍵,隨著公司開始投入更多資源在設計上,會開始需要去優化設計的工作流(Workflow)、跨部門的溝通,好讓設計師能夠專注於設計上面。

這概念其實就跟 DevOps 的其中一種精神有相同類似之處:讓工程師專注於撰寫程式碼上,減少工程師將時間浪費在一些行政作業上面。也因此在工程師的世界中,他們會運用像是 Git 來管理自己的 code 的版本與協作問題、直接寫一隻程式碼或者是利用一個工具來讓原本人工進行 SOP 的部分直接交由程式去執行。

但此外其實他還有包含更多面向,包含:需要編列多少預算來支援團隊進行設計時能夠更加有效率、如何讓設計師們更密切合作、如何讓設計師上手新的設計工具與流程等等。

值得注意的是,雖然 DesignOps 聽起來像是一個職位(確實也有許多公司會把他當一個職位來徵才),但其實我認為算是一種概念。當設計師在做設計的時候,除了設計本身之外,也需要去思考:

靠設計營運思維優化設計流程

對,說這麼多,所以最後我們是怎麼解決目前遇到的問題的?

how to make a brand guideline
用了 Sketch 來整理,可以不用擔心 logo 不一致的問題
sketch symbol function
把特定物件(例如主按鈕)設成 Symbol 後,如果畫面中的主按鈕要調顏色,回到 symbol 調整,所有元畫面中的主按鈕們(很重要,複數!)將會全部一同改變
從此終於解決了設計師們無法共同協作設計的問題(歡呼)
design system documentation

最後還需要理的債

對,我們重新優化了整個製作設計的流程,但是並不是這樣,就結束了 logo 百變怪的出現。在決定好最終幾個版本的 logo 之後,我們開始重新檢查了目前在線上線下使用的有使用到 logo ,陸續清點以及更改成線上的版本。

brand logo
我們在 Trello 上開始陸續盤點哪些部分需要變更,以及在會議上告訴大家未來的 logo 識別會是以哪幾款為主,如果與 guideline 上面不符一定要說出來
開始將主色系應用到目前與 Star Rocket 相關的產品上,包含官網、電子報週報、Newsroom 與插圖
主色調以原本 logo 的顏色將數值做了調整
將一樣共同作用的元素( navigation bar 與 footer)的設計一致化,加強品牌印象

用工程師的思維來做設計

--

--

Star Rocket 三創育成是非營利的創新育成機構, 以「人」為核心,「科技」為養分,致力成為最開放的創新育成空間,透過自辦課程跟活動策展,活絡台灣創新與技術社群,並培育創新創業人才;同時,藉由內容產製跟資料庫的建立,追蹤、記錄創新故事,啟發人們踏入創新航道。

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store