國家寶藏-設計日誌

基本資訊

本專案設計產出皆為CC-by授權
Designer :  Moon Chang
👉專案原始檔傳送門
👉trello協作 https://trello.com/b/kJHGheUS/web
👉zeplin協作 https://zpl.io/scene/12LhtA

相關文件:

需求、許願池

  • 主視覺
  • 網站設計
  • App設計
  • 群眾參與平台設計
  • 其他宣傳、應用設計

初步方向、資料分析

視覺參考網站
https://www.fold3.com/ (參考他們的文件呈現UIUX)
  • 較為極簡專業


網站初步架構頁面
  • 首頁
  • 一個形象、入口
  • 貢獻頁
  • 志工招募頁
  • 募款頁
  • 搜尋/展示文件頁
  • 群眾除錯頁 (幫忙替文件OCR除錯的地方)
  • 故事頁 (部落格性質,展示文件故事的地方)

Design journal

2017.03.30-2017.04.06

工作內容:將現有資料與現狀作初步的整理與發想,擬定視覺方針提出草圖

  • 方向與資訊歸納
名稱:國家寶藏
英文:TNT - Taiwan National Treasure

現狀問題:解決一個珍貴的台灣史料深埋在美國檔案局裡無人知曉且難以利用的問題。
使用者/目標觀眾:相關專業領域的專家學者,或是對此領域有興趣之大眾、寶藏探險隊志工

關鍵字:歷史、探險、永續、傳承、遊戲感、藏寶圖、地圖、開拓、神秘、熱血、年輕、拼圖

  • 形象/視覺方針
希望帶給人的想像:不希望太嚴肅,希望有吸引力
「航向世界尋找台灣歷史寶藏的探險家」
「用大海撈針的方式一點一滴的把台灣拼湊回來,還有什麼比這更浪漫的事情呢?」- Lala Yao

  • 圖像風格資料
  • 想要一起pin東西的人可以請我邀請進去
風格關鍵字:裝飾性、復古、簡約、遊戲感

初步概念稿
手稿
  • 主要聚焦在「地圖」、「文件」、「藏寶圖」、「拼圖」等概念的結合,嘗試做復古的形象,融合一點東方感。
  • 如果有看到哪個覺得不錯的請告訴我兒~

  • 標準字草樣(待修
看到蕭A在討論貼的字型很有共鳴https://www.pinterest.com/pin/198228821075712933/
嘗試設計一組具有時代感的字,但不像是參考圖的個性強烈,希望更收斂穩重
mooon: 但目前自己覺得有一點宗教味...XD
Hsin Hsiao : 宗教味頗佳 XDD
  • 標誌logo草樣(待修
mooon: 目前是由手稿中選擇拼圖+捲軸的意象做向量圖嘗試,圖像架構為粗搞待修
mooon: 還在尋覓有沒有其他方向...
  • 問題、回饋
本專案一定是開源的,不過是哪種授權形式??設計這邊常用的是CC授權,這部分是設計者決定嗎?
Hsin Hsiao : 恩 我對於授權形式很沒概念 因為都學人家MIT XD 就設計者決定囉~
mooon: CC-by,補充在上方開頭基本資訊,目前大家的檔案都放在哪個雲端空間?
Hsin Hsiao : 你一般參加開源專案都放哪呢? 需要開一個專案的雲端空間也可以唷
mooon: 恩...設計沒有個公認的空間,g0v目前是放在google drive,我看看我有沒有權限開一個
mooon: 已開好,傳送門補充在上方開頭基本資訊

2017.04.07-2017.04.13

工作內容:將上次大家給的回饋,統整為兩個視覺方向,製作較完整的精稿與配色

新增手稿
  • 不知道為何是倒過來的@@

方向一:拼圖
「用大海撈針的方式一點一滴的把台灣拼湊回來」
  • 結合地圖與拼圖的概念
  • 在底紋加上台灣豐富的瑰寶 - 山與海,帶出海島意象
  • 紋樣比較細,一樣試圖做復古裝飾性模仿
  • 色彩初步規劃,可與後續應用相輔完成

方向二:編織我們的舵

  • 上次討論中有提到的編織,結合航海的舵轉化而成的概念
  • 以更遠的方式來看國家寶藏專案,也許是我們在海島上透過歷史、資料編織出未來的方向


  • 其他
有台灣地圖與其他拼圖的嘗試
  • 除非版面很大,不然台灣的形狀非常曖昧...
  • 另一個則是很科技
  • 回饋
Abraham:不確定之前是不是已經有人提過,但有沒有可能台灣本身就是一個拼圖,可以先畫上7-8成到拼圖可以想像出台灣輪廓但還不完整,然後在台灣島旁邊畫幾片等待被拼湊上去的pieces而不是在寶藏圖卷裡面?
Hsin:所以就沒有捲軸的意思嗎
Abraham:不確定我的想像有沒有表達好。哈哈
Moon:恩...一個是台灣本身的辨識度不高,拼圖沒拼齊的話看起來很破碎
我不知道這樣還會不會很熱血?
Hsin:嗯嗯 好像會有點.... 淡淡的哀傷? XD
Moon:其實還是想問大家很想讓台灣地圖出場的理由,因為每次都有人提XD
但我個人是極力在避免他出現XD
Hsin:感覺得出來 你在避免
我個人覺得拉 大家在國外久了 跟在台灣國內的人 對於台灣的圖案有不同的感情
Hsin:在台灣的人可能覺得很濫情 沒必要
Moon:看過很多用台灣地圖的例子,有些沒做好還真的很像民進黨哈哈
Abraham:我的想法就是台灣寶藏拼圖還未完成,要繼續努力,但這還是破碎的台灣地圖的辨識度還是很高的。
Moon:恩恩這倒是,我們也沒有什麼正規的國旗可以用(可憐
Hsin:是啊,但我同意會有民進黨的fu,尤其又綠色的話 XD
Moon:如果是沒拼齊的可能會好一點
Hsin:可以玩玩看這個意念
Abraham:對,我就是這個意思,不是要拼齊
而且每個piece可以不同顏色

2017.04.14-2017.04.21

回饋意見:收集了一下反應 大家都喜歡第一個選項 (拼圖 + 捲軸) 但都覺得哪裡放一個台灣會更好 (尤其是跟在地台灣長輩推廣時) 也同意第三個在拼圖中的台灣太不起眼,有人建議把台灣藏在後面的菱形。參考看看囉 希望下週末前能把這個定下來~

本次工作項目:
針對結合台灣圖像做各種嘗試


2017.04.21-2017.04.27

網站需要資訊:
首頁
  • 首頁介紹文案
  • 是否需要消息活動頁?
參與頁
  • 挖寶教學文案
  • 各種小隊介紹
  • 挖寶地點介紹
捐款頁
  1. 介紹詞:(ex. 國家寶藏科技+志工很燒錢 blah blah blah 請幫忙 blah)
  1. 目前募款狀況 
  1. 信用卡表
  1. 支票請寄至: 國家寶藏基金會 地址xxxx

寶藏庫
  • 尚未確定資料架構是如何
故事頁
  • 尚未會以什麼方式呈現
寶藏鑑定除錯頁
  • 尚未確定資料架構是如何?
  • 需要教學文案

目前稍微規劃了一下版面,發現有很多東西是需要補內容、資訊架構尚不清楚的
再請大家一起討論補完

網站wireframe

2017.04.28-2017.05.04

主標誌完整版


網站討論
重新整理了目前的架構

各頁wireframe

文案坑需要有人填>>>>>傳送門


首頁
首頁風格嘗試
志工頁面(架構不變等文案)
寶藏庫
這邊這邊目前有兩層分類、各種狀態顯示
點進去之後到個別除錯頁面
分成三階段:
  • 文字化/除錯校對
  • 待翻譯
  • 數位化完成

故事頁
目前很單純,現階段可能還不需要出現

2017-05-06-大松進度

  • 網站的進度是否分階段上線?
  • 整理了之前app的流程
  • 網站文案初步整理


2017.05.11-2017.05.18

Passport to Taiwan活動應用品項

初步攤位規畫構想by Shun-Ping:
用垂吊的線分割出一個半開放的空間, 讓人看不不大清楚理面, 會產生好奇心前來觀看, 然後空間中的小方椅可以給人做也可以放資料, 至於周圍的三面可以利用垂掛的線來掛宣傳資料和讓人模擬翻拍的資料  最後  地面我希望可以鋪個不同顏色的布料,  地面也可以放一些資料或道具, 如果有人想席地而坐也可以

需要道具坑:
  • 上方招牌設計(上方招牌高12inch, 寬60 inch  , 或是42 inch 都可)
  • 介紹主板設計(板子高度 2' 寬度 最多不要超過5
  • 介紹主板文案(請填到下面)
  • 翻拍過最有趣的文件
  • 小方椅的(尺寸 12" x 12"x 12")
  • 讓人帶走的文宣品
  • 聊天喝茶的食物?
  • 筆電\ipad
  • 紙筆
  • 收集Email頁面
  • 紀念貼紙

介紹主板文案
「自己的寶藏自己挖
世界各地許多記載台灣歷史的情蒐資料已經解密開放,但除了熟門路的研究人員外,一般民眾很難一窺究竟。 「台灣國家寶藏」組織的成立目的,是秉持「台灣零時政府 - g0v.tw」的「開放資料」和「全民參與」精神,號招志工一起深入各地的國家檔案局與圖書館,挖出台灣相關史料,翻拍並建立網路開放資料庫,供全民免費使用。」
招牌
Sticker
貼紙我去看了stickermule.com,一種是隨意形狀,一種是正方形。我們的logo是菱形的加上字的形狀會更不規則,價錢也有差。大家可以票選一下


Email UI
介面細節與元件檔案
前端開發傳送門:整包下載之後,打開html即可看到相關細節
設計原始檔案傳送門:多數的圖在ai檔裡面

新增了手機版,也許未來除了活動當天使用之外,可以隨時連上宣傳
網頁字型目前選用較有人文感的Inknut+Antiqua
明信片小卡
正面是主視覺+介紹文案 背後是「加入國家寶藏」CTA 可以留一些lorem ipsum讓我們輸出前填最後 CTA文案嗎

臉書用圖

2017.06.01-2017.06.08

網站首頁的製作,圖像利用之前翻拍的相關文件排版而成
可能的動態:
  • hero台灣裡的圖像變化
  • 隨捲動淡入
頁面往下之後,nav會變成簡單通用style
其他尺寸:

2017.06.09-2017.06.15

工作項目
  • 交付首頁檔案
  • 志工徽章發想

首頁介面細節與元件檔案
前端開發傳送門:整包下載之後,打開html即可看到相關細節
設計原始檔案傳送門:多數的圖在ai檔裡面

志工徽章
「徽章」是要發給有實際去翻拍過的志工 (目前約10人左右)
  1. 做成貼紙發給志工
  1. 在APP上發給志工 可以展示在他profile旁邊
目前可以先做一個 之後參與者越來越多可以多做一兩個 變成 小將 → 騎士 → 大將 的升級概念 XD (意思是徽章設計要預留升級個空間)
徽章目前是希望跟logo同樣是菱形,細節待想

徽章構想:
徽章構想目前想要以台灣特有種的植物、昆蟲、動物或是山川等自然物件作為圖像,我先找一些人們不熟稀的物種,正因為不熟悉也有重新挖掘認識台灣的寶物之意
以下暫用等級1~5作為區隔

玉山薄雪草:積少成多的美(適用等級1~2 )
玉山薄雪草大多生長在森林界限以上的岩壁或岩屑地,未開花時,由於葉面鋪著薄薄的白色綿毛,整體看起來是灰綠色的,毫不起眼,常常讓人忽略它的存在。然而同一個地點,到了六月盛花期,整片岩原上忽然妝點了白雪的盛況,會讓人驚豔讚嘆!這葉面及總苞上的綿毛,是為了抵禦高山岩原環境上的乾旱及冬雪,同時卻也造就了台灣高山六月雪的美景。

珠光鳳蝶:蝴蝶王國是台灣的別稱(適用等級1~3 )
在素有蝴蝶王國稱呼的台灣是最大型的蝴蝶之一,雌蟲展翅更可達15公分長、10公分寬左右,台灣只有蘭嶼可見。

莫氏樹蛙:(適用等級1~3 )
是台灣分布最廣的樹蛙,從北到南;低海拔樹林、果園、開墾地到海拔兩千公尺的高山針葉林都能見到牠們。 

台灣帝雉(適用等級2~4 )
藍腹鷴(適用等級2~4 )
帝雉,又稱台灣帝雉、黑長尾雉、海雉、烏雉,台灣特有的長尾雉屬鳥類。分佈於台灣的中、高海拔山區,最高曾見於3850公尺附近,是台灣的雉科鳥類中棲息於最高海拔者。帝雉被列為世界瀕危鳥類,與台灣藍腹鷴同被列於世界自然保護聯盟瀕危物種紅色名錄書中。帝雉也是所有台灣特有種鳥類中體形最大、羽色最高貴的,被某些人稱為台灣的「國鳥」

台灣百合(適用等級1~3 )
台灣百合(Lilium formosanum W.)以「福爾摩沙」為種名,是台灣的特有種,屬於四種台灣原生百合之一,亦稱高砂百合;另有小葉種的變種(小葉台灣百合,Lilium formosanum W. var. microphyllum),若別出則台灣原生百合為五種。

在台灣分佈極廣,南至屏東,北至東北角,從海岸邊到高山上都可見到它們的蹤跡。通俗別名包括了野百合、喇叭花、山蒜頭、師公鈃、打碗花等等。打碗花的名稱源於客家父母親會恫嚇孩童不要摘採,不然用餐時會打破碗的典故。

較為熟悉的候選人,如果想快速讓人認識,還是這些常見物種較有人氣
石虎:目前受到大量關注的明星(適用等級1~4 )
台灣藍鵲:(適用等級2~4 )
蘭花:台灣也是蘭花王國~!(適用等級1~4 )
櫻花鉤吻鮭:鈔票上有(適用等級3~4 )
台灣獼猴跟台灣黑熊我覺得市面上太多了,個人不希望他們出現XD

山川候選人:雖然很多山都不錯,但我覺得畫出來都長得差不多…
玉山:想直接作為最高等級的徽章(適用等級5 ),玉山級志工
北大武山
南湖大山
大壩尖山

相關參考網站:

2017.06.06-2017.06.22

稍微想了一下可以如下,動植物昆蟲個挑一種出來哩,沒問題的話我可以進行製作~通常看到圖片的參與慾望會多很多XD材質的話就要看製作的成本,當然越高等越精緻
不過也可以都用貼紙推出,然後分第一代徽章跟第二代、第三代去進行蒐集、集點的概念
剛想到也可以推出特殊限定款:nara限定款、暑假限定款、技術貢獻款等等等

不過各個級別的認定標準可能要大家討論一下

  1. 玉山薄雪草級:初級參與志工,不管是拍照\貢獻或是捐款都可以得到,一個入門款,可能需要很多所以可以是貼紙
  1. 珠光鳳蝶級:初中級、貼紙
  1. 莫氏樹蛙級:中級、貼紙
  1. 石虎級:中高級、徽章/繡片
  1. 玉山級:高級、徽章/繡片

繡片範例
金屬徽章範例
關於專案介紹的一些問題
包含網站文案,目前不時會遇到一些講述不清的狀態,我想要蒐集一些可能過去在介紹專案的時候的狀況,看能否有個一目了然的方式讓大家了解?
在passport to Taiwan的現場有沒有一些狀況或是困難?

  • 網站文案任務:說明來龍去脈,是否需要搭配圖?
  • 志工的心得文:可作為宣傳,但有比較多個人的心得、狀況
  • 教學:必須一個個步驟清楚,目前會整理在官網

可能的圖示表現:
在passport to Taiwan的板子上有一個小重點圖
可能完整一點的圖是這樣的過程(草圖),也許可以搭配首頁的文案,或是文案架構的參考

2017.06.23-2017.06.29

  • 網站細部更新
  • 新增元件參考規範
  • 新增志工頁面

首頁介面細節與元件檔案
前端開發傳送門:細節有調整
設計原始檔案傳送門:多數的圖在ai檔裡面
志工頁面與尋寶教學
因為圖片可能會很佔篇幅,所以用點擊展開的方式收納

2017.07.01 大松

期中報告

2017.07.06-2017.07.13

  • 志工頁面RWD版
  • 志工頁面規範匯出
  • 寶藏酷頁面設計
  • footer加上power by g0v

志工頁細節與元件檔案

志工頁
寶藏庫

2017.07.13-2017.07.20

開啟trello協作 https://trello.com/b/kJHGheUS/web
👉開啟zeplin協作 https://zpl.io/scene/12LhtA

調整項目:
  • 參與尋寶頁,各小隊的資訊直接以tag方式顯示在下方
  • 參與尋寶頁的手機版作了瘦身
  • 寶藏庫的標籤改成正方形,新增「待標籤」


參與尋寶頁調整想法→
  • 請鞭 xD

2017.07.21 - 2017.07.27

工作狀態:
  • 確認寶藏庫架構
  • 確認寶藏庫視覺
  • 除錯頁架構討論

App Zeplin 傳送門 https://zpl.io/Z2x3I2S
  • wireframe 流程討論

2017.09.11 獎助金結案報告

2017.09.16 g0v大松

1.玉山薄雪草級
2.珠光鳳蝶級
3.莫氏樹蛙級
4.石虎級
5.玉山級
討論待辦:
  • 協助前端優化,可以用github開票
  • 徽章可以有不同顏色
  • 徽章切成app使用的大小
  • 當季前三名的徽章可以有金框
  • 缺臉書宣傳圖



2017.9.27

舊 iPhone 徵求 - 臉書
Designer - 劉堂萱  Tang-Hsuan Liu (我是新來的大家好! )

V1- 復古字體明亮版 JPG
V2- 吸睛清晰好讀版 JPG
放進臉書的效果 (請忽略文字)
完稿! 
採用好讀版+文案小修改 JPG

哈囉大神們 小弟想在這裡許願 想發一篇感謝 RC文化藝術基金會 贊助國家寶藏
需要搭配一張圖 有RC跟國家寶藏的Logo
搭配文字 「RC文化藝術基金會邀請大家一起來國家寶藏挖礦採寶!」
不知道有沒有人有空幫忙ㄋ ><” @Tang L  @chang w 

assets

紐約哲五Banner 1/6/2018 by @xenia c 

1.17.2018 徵文大賽

又想許願了 XD
「國家寶藏徵文大賽: 看解密文件,說故事,拿獎金!」
詳細文案 → +國家寶藏徵文大賽 
不知道有沒有有空的設計師幫忙呢 ><” @xenia c @Tang L @chang w 



特別感謝各位設計師攜手打造「國家寶藏=好質感」形象: