水果版 Font Awesome - Jungllle Hackathon #1

Image Roy

Jungllle 隔週五會暫時放下手邊的事情,移師辦公室附近燈光美氣氛佳的咖啡廳進行叢林黑客松。會固定進行這活動的原因是希望保持團隊的創新能量,將工作或生活中遇到的問題動手解決。可能是只有一個功能的網站,也可能只是一頁 Landing page 而已,重點是讓我們的大腦習慣去想像、創造。

這算是第一次進行這活動,一大早就到 Café Junkies 小破爛咖啡館。 帶有一點工業風的環境滿適合做 Brain Storming,位置也夠寬敞舒適。坐在我們旁邊的看似也是工程師,Mac 電腦上貼了滿滿的貼紙,還自備 g0v 環保杯,可惜沒有在 Slack 群組裡相認。

入座後點了一杯很有特色的飲料:橘子咖啡汽水,喝起來有點小怪不過還算順口。一邊吃早餐一邊 review 過去一週的進度及下週目標後就開始這次的 Jungllle Hackathon 了! Imgur(圖片來源:Café Junkies 臉書 )

Imgur

題目發想

這次的題目是星期三在做 Jungllle 官網時原本想在徵人那邊放上一串香蕉(金曲名言!武雄:出得起香蕉,只請得到猴子),結果發現 Font Awesome 那多的 icon 裡面竟然沒有水果!身為 Font Awesome 深度使用者覺得太不可思議了,所以決定自己做一個 水果版 Font Awesome。網站名自就叫 FruitWarehouse 水果倉庫。

開發過程

特別的地方在於每個水果都是一個字體而不是圖片,所以在設計水果的過程中必須要考慮到大的字級時比例不會失衡,縮到很小的字級時辨識度要夠高。也要考慮到雖然每種水果本身複雜度不同,但在設計成字體時要讓它們視覺上的重量均衡。以葡萄和蘋果為例,葡萄需要將線條簡化,而蘋果則要加入更多細節。 imgur 在程式端則是開發一個 Gem,只要安裝好 Gem 就能夠簡單的使用各種水果,詳細使用方法請點入網站:http://jungllle.github.io/FruitWarehouse/

大功告成

經過8個小時,FruitWarehouse 終於完成了。如果你在製作網站有需要用的水果 icon,歡迎使用 FruitWarehouse 來節省你的時間。網站上沒有你要的水果?歡迎來信告訴我們,或者你也可以自己畫一個給我們!
Imgur

Jungllle 持續徵求優秀人才: http://jungllle.com/career
Senior/Junior Rails Developer
Senior/Junior F2E Developer
Marketing Intern

Published at 2015-05-15 17:17
1181