Archive for the 'Design' category

沒有什麼設計叫做「幫我做一個簡單的 Logo 」

七月 13 2016 Published by under Design

平面設計大師 Paul Rand 藉由七個基本要素,來衡量一個 Logo 是否優良。

 

1. 獨特性 / distinctive

能否在千百萬種品牌 Logo 中脫穎而出,不被混淆,作為獨一無二的象徵。

2. 可視性 / visible

一個 Logo 是否容易被注意到或看見,廣告裡,街道上,開車一閃而過,腦海中的幾秒視覺印象。越容易讓人輕易識別的圖形設計,越是一個好的 Logo。

 

3. 適應性 / adaptable

在企業識別系統 (CIS) 裡,Logo  必須應用在很多地方,如:衣服,馬克杯,網站,電視廣告,更甚是現在人手一支智慧型手機 APP 應用,或是大樓建築,戶外招牌,車身廣告,不單單只有一種樣式的呈現,要考慮直式橫式,中式西式,或是全球化的應用,這些都必須考慮進去。

 

4. 容易記憶 / memorable

一個 Logo 的終極目標就是不被遺忘。當別人需要你所提供的服務時,會立刻想到你的 Logo ,讓品牌名詞,變成了圖像動詞,這是所有品牌設計師無不追求的目標。

 

5. 普適性 / universal

當一個具有普適性的 Logo 在不同年齡層,不同環境領域,各類群眾所感受到的形象是一致的,不會讓部分人看了是 A 形象,另一部分人看了卻有 B 的感覺。

 

6. 經典不過時 / timeless

當要開始設計一個 Logo 時,最主要的幾個原則就是不要跟風,不要用目前最#流行的,字體#創新絢麗,風格#前衛耍酷。諸如此類的感覺,流行時尚常常改變,但很多不變的卻是生活中最簡單的事情,藍色的天,白色的雲,一樣溫暖熱烈的太陽。

 

7. 是否簡潔 / simple

Paul Rand 說過,一個 Logo 即是極簡主義的縮影。極簡主義的藝術精髓即是 —— 少即是多。

 

「一個 Logo 若無簡潔和自控力,便毫無存活的可能。」

 

==========================================================

 

以下藉由新計劃的機會,設計了三個 Project Logo:

 

Logo 1. Dining experience

使用 D&X 作為縮寫,並將 “DX-用餐體驗“的概念,讓每一次的體驗都能夠得到很好的使用者回饋,就像一枚側躺著的獎章,把每一次體驗都做到最好,得到越來越多的獎章鼓勵。

PJ-DX

Logo 2. Membership & Merchandise

會員計畫是一個長遠且不斷進化累積的一個服務項目,以 M&M 文字結合無限符號 “∞”,象徵細水長流,不斷循環,無止境的會員回流著使用 EZTABLE 的服務功能。
PJ-MM

Logo 3. Referral & Branding

以人為本,作為專案最直接的目的,R&B 兩個縮寫字母,構成了一個人型,象徵一個接著一個的推薦與親切的人本服務,讓品牌能夠藉由人與人不斷地推薦成長努力下去。

PJ-RB

 

我心中覺得好的設計是能讓每一筆一劃都具有故事與意義,

這也是我一直在努力及追求的目標。

千萬不要再認為做一個 Logo 好像很簡單,

我用了十五年,才換來你們眼前的每一筆每一劃。

 

同場加映-延伸閱讀

永遠不要叫設計師幫你「做一個簡單的 LOGO 」

什麼!BBC 的 Logo 要價超過 5000 萬?

No responses yet

EZTABLE的設計師和一般設計師不一樣

十一月 05 2014 Published by under Design, EZ心情, 創業故事

 IMG_2460

“ 我每天上班的第一件事情就是擦乾淨電腦螢幕,才看得到螢幕上的細節。 ”

Wen 是EZTABLE的設計師,很有想法的射手座大男孩,

也是很有話題性又多愁善感的男子(誤

問他在設計界的偶像是誰,他抬起下巴說:「我沒有所謂偶像耶。」

頓了頓:「但我很喜歡 Jonathan Ive。」

深入了解了一下Jonathan Ive(蘋果首席設計師),2人背景也著實很像,誕生於藝術的家庭,

Ive的爸爸是做工藝品的,Wen的爸爸則是音樂老師,

總是在耳濡目染之下沒有戒心的被啓蒙,純粹也最有滲透性,

Wen現在擦拭螢幕的每天習慣動作,也是因為Ive而來,

註: Ive在大學時期設計投影機,在評鑑的時候沒有將鏡頭擦拭乾淨而獲得很低的分數,

而發現擦拭鏡頭的細節非常重要

 

“設計是用讓人喜歡的視覺,來解決生活周遭的一切問題”

EZTABLE的設計師和一般設計師不一樣,一般的設計師接受命令,呈現客戶想要的樣子,

但是EZTABLE不是單純處理客戶案件需求,而是利用設計的能力來解決公司在產品遇到的問題。

例如,如果網頁/app的界面不好看,不好操作,就要改得讓它好用好看好操作,

這不是為了設計,而是為了用設計的能力讓產品更好,讓使用者更喜歡使用。

Wen 說, EZTABLE的產品不是畫面,而是一個有生命的服務/體驗,

在這裡當設計師也需要有PM的整合能力,有最多的資訊才能有最好的設計,真正解決消費者的問題。

 

“如果EZTABLE是一個人,他應該是李安。”

問Wen對EZTABLE的想法,如果以人來比喻,會怎麼形容EZTABLE?

Wen想了好久好久,好認真的思考過後,

說:「我想應該是李安吧。」然後得意的笑了笑:「怎麼樣?很貼切吧!」

李安從國片開始耕耘,你我熟知的《飲食男女》、《推手》、《喜宴》,

到你我更熟知的《斷背山》、《少年Pi》、歷經各種挑戰還是不放棄的繼續將好電影推到國際

,拍出來的作品也不流俗又兼顧票房。他總是在挑戰別人沒做過的事,

用單純的題材拍出全新的感受。

 

EZTABLE也歷經各種難關,但始終不放棄,

在今年終於拓展到東南亞各地,以世界為目標,

想要做出最不一樣卻又讓大家都喜歡使用的產品。

說到這裡,我實在也是不由地由衷鼓掌叫好起來。

 

Wen來到了這裡。然後發現這裡和其他地方很不一樣:

討論的時間很多,動腦的時間很多,設計力是用來解決問題的,不是用來漂亮的。

EZTABLE最吸引人的地方就在於,永遠不知道明天會發生什麼事情,

但Wen就是喜歡這種挑戰性,他總是很期待迎接那個不知道會發生什麼事情的明天,

每天都是戰鬥!他也期許自己能夠用設計的能力解決EZTABLE的問題,帶領產品融入到世界每個人的生活之中!

 

EZTABLE & 那些人,下回再一起聽聽其他人的想法

No responses yet

整座城市就是藝術品—Vivid Sydney

九月 15 2014 Published by under Design, EZ心情

Vivid-Sydney-helloodesigner 

相信大家只要提到雪梨,第一個會想到的景點就是Sydney Opera House啦!!
但你們有發現…上面那張照片其實就是它本尊嗎?

 

一年一度的Vivid Sydney被評選為澳洲2013年的最佳節日,它是一個由燈光、創意、音樂及科技所組成,將整座雪梨市區妝點成絢爛的奇幻城市。在18天的展出期間,雪梨街頭免费展示各式燈飾及動態燈光裝置,同時舉辦一系列世界級創意產業論壇和大型現代音樂表演,燈光秀由各國藝術家餐與創作,許多雪梨代表性的建築都將在精心設計的燈光投射下閃耀光芒,讓到訪的旅客目眩神迷。

 

就讓親身感受過Vivid Sydney活力、夢幻與現代的筆者推薦你幾個不容錯過的燈光秀據點吧!

 

Sydney Opera House

210352qp5fl2p3mfb333em 

雪梨歌劇院帆船造型的建築設計本來就非常壯麗,覆蓋上3D投影更加凸顯出它的結構美

 

Customs House

Vivid-Sydney-helloodesigner3 

每年最有趣的燈光裝置就屬海關大樓了!除了配合音樂在外牆以3D影像投影,2013年海關大樓的燈光裝置採取互動式的設計,民眾可以在大樓前的廣場跳舞,隨著民眾的舞蹈可以變換投射在大樓的燈光色彩。
而2014年的設計則是用燈光"雕塑"出各種樂器,當你碰觸雕塑前的觸控式螢幕,你就可以把那個樂器的色彩、光線、形狀跟聲音帶到現場中。

 

Darling Harbour

210347vqiww5zq73e4wrg4 (1)

延續2013年的一大亮點"繽紛水舞劇場(The Vivid Aquatique Water Theatre),2014年的Vivid Sydney主辦單位以雙倍壯觀的水舞秀驚豔大家,由法國國際水秀公司(Aquatique Show International)打造四個巨型水幕以及大幅面的投影,加上四個大功率的全彩雷射光束,在每個整點都有5~6分鐘的雷射燈光水舞秀。
個人非常推薦大家鎖定星期六Darling Harbour 晚上8:30的煙火秀,看完還可以等9點的水舞秀,讓你省時又省力!

(水舞燈光秀為6 pm~11 pm的每個整點)

 

Sydney Harbour & Sydney Harbour Bridge

210351fd77vnv0vila4vl0

Vivid Sydney在2014年第一次延伸到雪梨港灣上,搭配壯觀的港灣大橋燈光秀,今年各个遊輪、渡輪以及水上計程車都會披上繽紛的LED燈光,成為燈光秀的一部分,它們的颜色由Intel的電腦控制技術,藉由最新的衛星導航定位,當他們從不同位置進入港灣將會改變船上的燈光顏色。

 

210351r0n7w790wyn04i74

雪梨港灣大橋則採用互動式裝置,從位於靠近Luna Park的海濱步道所設置的互動式觸控螢幕,你可以選擇自己喜愛的顏色和排列順序,近距離觀賞自己的創作。

 

看完以上分享,相信大家一定非常想親臨現場,可惜2014年的已經結束囉~
不過大家可以趕快安排2015年的假期親身去體驗Vivid Sydney噢~

 

2015年的展期為5/22~6/8,別去錯日期唷!

 

reference: 悉尼印象

No responses yet

【Workshop】淺談如何開始設計之專注美感三十年

八月 25 2014 Published by under Design

 【Workshop@140822】

Topic: 淺談如何開始設計之專注美感三十年
Speaker: Wen Ku
slideshare: 淺談如何開始設計之專注美感三十年

 

 

每次看到一些漂亮的東西做出來時,許多人心裡都會冒出一個想法: 我好想學設計! 我也想做出有質感的東西!然而這種話在設計師耳裡聽了太多太多次,但這樣的想法往往最後都不及而終。

今天請到 EZTABLE 的 Wen 哥,談談學設計時,我們到底要先做什麼樣的準備。

 

 

1-IMG_3312

 

 

 

 

淺談如何開始設計之

專注美感三十年

 

 

 

 

 

 

 

 「Wen哥~我想學設計!」

 

 

許多人心中都有想要學設計的渴望,但殊不知學設計以前,真正要學的是「美感」。
美感從何而來? 美感是與生俱來,你天生就會註定你覺得漂亮的事情,在你生出來的時候你的記憶已經決定你對美感的感覺,這即是所謂的天分;但不用感到心灰意冷,因為後天的培養便是「設計」,如何才能擁有設計感? 只有藉由美感的琢磨,與不斷的修練和成長,隨著時代的演變跟進化,去結合設計感。

 

美感結合設計感,才能做出一個好的東西,你如果只有美感,可能只是在腦袋裡面的一個小小的藝術家而已,但真的能把你的美感呈現出來的方式是設計感,設計感即是能把你美感的東西做出來的一種能力,一個動作。

 

 訓練美感,如何開始?
以下便會解說如何構成一個畫面,以及構成畫面需要哪些元素!

 

 

 

 

美感與視覺

無論什麼設計行業,在創作具美感的設計方案時,
都建基於一些共通的美學原則和理念,
而且在同一時代裏的不同設計作品,
我們都不難發覺它們所追求的目標和宣示的理念,
背後都是一脈相承的。
要領會設計中美感的考慮,
首先要了解人的審美過程造型的基本元素

 

 

 

 
wen-01

 

 

只要是運作視象途徑來帶出美感的設計方案,
我們都可以把它看成一些基本的構成元素,
一定的組織規律結合在一起。
無論是平面形狀或是立體的形體,
其構成視覺印象的基本元素都是:

點、角、節
線、脊、輪廓

色彩
質感

 

 

 

wen-02

構成元素當中,點和面本身所能帶出的情感和張力有限,

線條卻大大不同,單一的線條已經可以表達豐富的感情。

(見右四張圖)
上面是有組織、有規律的線條,下面是雜亂無章的,但是相對的雜亂無章也能帶出另外一種層次,而放射狀的線條也能營造出另外一種的空間感。

 

 

 

 

 

 

  

 

3-IMG_3324

 

美妙的句子如果組合不當,可變為劣拙的故事,
但平實簡單的句子,如果組合得宜可成曠世巨著。

平面和立體共通的構成元素,還有顏色和質感,
因此組合構成元素的規律是設計美感的重要部分。

與構成元素不同,組合規律對平面和立體的設計同樣通用,
我們甚至於在其它創作領域,如音樂和寫作等等亦能找到它們。

可供表現組合規律的變量有:
位置、空間、比例、重心、骨格等,
而組合的規律有對比、平衡、節奏。

 

 

 

 

 

 

 

 

規律元素例子

wen-03

  • 這張圖是由矩形的區塊所構成。利用不斷的重複,不斷的用固定大小的圖去結構它的畫面,讓你的視覺感到平衡、舒適,覺得有設計感。

 

 

wen-04

  • 這也是規律元素的例子,不斷的重複一些形體與區塊。

 

 

 

點和面所能表達的情感有限,而線條可以代表許多的意志

 


單一個點的本身因為沒有大小所以沒有能力表達複雜的意義和情感,點在設計美感上的意義,在於群集的一組點所構成的圖案,因此點是作為表現視覺組織規律的工具。


如果點因為其小而失去表達情感的能力,面的問題便出於其大。在人類視覺感知的发展當中,面因為對了解所見事物的作用有限,所以在大腦處理訊息時是常被忽略的,因此以面來表達複雜的意義和情感效果亦有限,因此面在設計美感上是作為點、線、色彩、質感等的載體。

 


因應線的發展方向,可分為直線或弧線。就着繪製線條用不同的力量、方向和速度,令線條有不同的外形,有長、短、濶、窄、輕、重、曲、直、頓、挫、深、淺。而線條的形狀,可帶出情緒的表達,如強勁,柔弱,轉折,跳躍,守靜等。故此,製作視象時,要注意畫面中各種線條的長度、濶度、起點、終點,以至線條兩個末端的形態,因為線條的形態,能營造觀感,而線條的發展走向,能引導視線的活動。
許多設計行業都會利用各種線條來烘托產品特點:時裝設計利用布料特性與剪裁配合而出現的各種輪廓線和陰影線來營造穿衣者的性格;而汽車設計師作汽車外形設計的目標是以線條帶出流動的感覺。

 

 

 

投影片7

  • 線條的呈現

(左上圖) 它是一個透視放射狀,你可以很明顯的發現它有一個方向性,感覺它是立體的,但其實它就只是由線建構出來的。
(中間上圖) 交錯的矩形立體,是利用視覺、視差營造出空間交錯的感覺,但說實在的它只是用幾條線產生出 3D 的效果。
(右上圖) 反白的粗線條和細線條搭配,呈現出底片負片的效果,讓人感到驚悚、緊繃。
(左下圖) 文字配合線條是常見的設計,文字本身就是由線條構成的,文字和線條的搭配可以產生不同的設計感,
(中間下圖) LOGO 上的應用,亦是非常講究的。
(右下圖) 矩線的線條,由粗到細不一樣的捲曲方向,便是另外一種型態的表現。最常見的是模擬一些生物,不同的線條不同的呈現方式會有不同的感覺。

 

 

 

線條例子

投影片8

  • 在 EZTABLE 裡,線條很廣泛的用在畫面上,但其實你不會看到一條真的線畫在那邊,而是運用線條的概念。

例如: 左下圖,把 banner 的圖片壓得很直,配合這個 LOGO、文字,呈現是一個非常順暢的線條。

右上圖,線條在──肉!它是一個扇形的視覺,雖然沒有直接看出線條,但你的腦子裡會感覺到線條,像是扇子打開的感覺,因此你會覺得畫面是舒服的,而方向是一種散射出去的一個視覺情感。

 

 

wen-08

  • 集中的線條,加上簡單的動態會有不同的效果。

 

 

4-IMG_3338

 

 

 

色彩

色彩可作為辨認物體外貌的特徴EZTABLE )

wen-09

如樱桃的紅色、混凝土的灰色、青草的綠色。

色彩能引發對事物的情緒及聯想。例如紅色與緊張,綠色與舒暢,黑色與陰暗,白色與光明,橘色與 EZTABLE。

 

在視象中,色彩的運用,有助建立視象的視線層次,能營造視象的情緒,加強題材的感染力。 

可運用的色彩,包括光譜中各種不同的色相。
亦包括各色相在明暗度,飽和度上,各種不同程度的變化所產生的顏色。
可用的色彩更包括黑、白、灰等中性的顏色。

 

人對顏色的感覺來自多種方面:
1.生理結構:視神經對藍色最不敏感

(每個人對顏色感覺不同,看到藍色覺得舒服,紅色緊張,與第二點自然反應比較有關。)
2.自然反應:黃、黑條紋是有危險性的生物,須遠離。
3.聯想:橙色物體的成份有橙
(例如有橘子口味的水果糖它的包裝是橘色的,不可能用藍色或綠色。)

4.文化沉澱:不同的顏色會帶來不同文化的一些表徵。中國人的紅色、西方人的黑色、聖誕的紅、綠配色等等。

 

生理結構和自然反應的變化少,在設計上的應用有局限,
反之聯想和文化沉澱可供演繹的空間較大,所以較受設計師注意,
例如很多消費品的設計都會小心選用顏色令消費者可以一眼認出產品的種類,
因此引致形成某些產品的類別色盤。
(例如: 在網路界,看到 Facebook 就是藍色,EZTABLE-橘色,雅虎-紫色等。)

 

 

 色彩例子

投影片11

  • 看到紅色標語會覺得危險、禁止,看到紅色食物可能會覺得辣或聯想到蘋果,而文化中紅色可能是中國對聯。
  • 這表示你可以呈現的目的有很多項,你可以用精神的,情緒的,文化的,視覺自然的,目的不一樣,展現出來的成品效果也會不同。

 

 

 

規律,色彩,線條元素,文化沈澱

wen-05

  •  去年做的福袋活動,福袋是一個類似紅包的概念,加入一些中國的元素。用以上提及的呈現方式: 規律,色彩,線條元素,文化沈澱。

 

 

wen-06

  • 以規律,色彩,線條元素,文化沈澱四種方式呈現。

 

 

 

投影片14

  • 規律,色彩。 當初要的是姐妹下午茶,以英式、花樣的風格,運用新潮跟古典的一個對比,不斷規律的重複花樣的色彩。

 

 

投影片15

  • EZTABLE 範例,簡單的線條、色彩組成。

這幾個元素最能代表 EZTABLE 理性、直接,因為我們是科技業,不給人太多的感性,取而代之的是快速與便捷。我們不會有太複雜的內容放在上面,而是藉由顏色與圖片把每次活動的感覺表達出來。

 

 

 

 

wen-10

 

 

 

 

 

 

 

 

設計力要強

國語文能力一定要好?

 

 

 

 

 

 

 

5-IMG_3353

YES! 

接受到不同的設計需求時,你必須要有良好的文字能力和對方溝通。

假設有人想要磅礡的黃河,但你不知道什麼叫磅礡,而黃河是什麼顏色,這將是很難溝通的一件事情。

(btw 右邊是 Wen 的偶像,李白。Wen 的外號是板橋小李白。)

 

 

 

 

wen-07

  • 上窮碧落下黃泉

舉個的例子,當你接受一個企劃時,對方跟你說: 我想要一個上窮碧落下黃泉的感覺。你懂嗎?

 

當然這是比較誇張的例子,但對方可能會說我想要自然的感覺、我想要大器、極簡,我想要質感,尊貴,設計師聽過太多這樣的內容,但大多數的人都無法直接表達他們內心想要的是什麼,只會用一些比較粗淺的文字描述。

 

回到「上窮碧落下黃泉」這句話,碧落,即天界,神仙住的地方;黃泉即地獄,鬼住的地方。意思是說我找遍了天界,找遍了地獄,兩處茫茫皆不見,都找不到你。
這是一個找不到的概念,所以你要想說怎麼呈現這種畫面。

 

因此,你能否將別人的文字需求或是提供的一些想法,藉由設計表現出來,這將會是非常重要的。
而想要表現出來,最前面的理解便是文字。
如果你連別人講的都聽不懂,你要如何做設計?
如果你做出來的設計,都沒有辦法用你的文字去和對方述說你的畫面是什麼,那就算有好的設計也無用!

 

 

 

 

wen-11

 

 

 

 

 

 

想像力

!magination

 

 

 

 

因此,想像力是非常重要的
一句話,十個人聽完後會有十種不同的感覺。
就像剛剛舉例的上窮碧落下黃泉,懂得便能看清楚,
可是 10個設計師可能會呈現 10種不同的樣貌,但是你呈現出來的方向,能不能滿足剛剛對方提出的需求,這就是你的功力。

 

 

 

 

 

 

wen-12

 

 

  • 在舉例一段文字──藍田日暖玉生煙。

出自 李商隱《錦瑟》

藍田山在太陽日照時,在山裡面的玉,冒出的煙,是非常神祕漂亮的。
給人一種雲深不知處,想碰又碰不到,卻又很美麗的感覺。

 

好的國語文能力,有助於在介紹作品,以文字讓使用者更為了解內容,讓原本完美的產品在尚未直接接觸使用前,更讓人心領神會,引人入勝的對產品產生期望感,信任感,也能夠在溝通上有更好的理解力輔助團隊間或以外的會議,用清楚明瞭的文字,了解別人,表述自己。

 

2-IMG_3315

設計不像其他有絕對的定義,一樣的東西在不同的地方可能是對亦可能是錯,所以你必須要藉由理解,藉由想像力滿足各種需求。

有心想要學設計的話,基礎的點線面、色彩、文字先學好,如果對這些真的有興趣的話,再朝設計這個方向前進,把這些基礎東西都學好,我們在談如何學設計!

 

 

 


如果您喜歡這篇文章可以點擊「讚」&「分享」
並歡迎訂閱 EZTABLE IDEAS!  😀

如果你是學習力強,而且經驗值高的人才,
歡迎一起加入我們 EZTABLE!! 

104 人力銀行-Visual Designer 視覺設計師

EZTABLE at Linkedin 

No responses yet

【Workshop】Head First Gird System

八月 24 2014 Published by under Design, Engineering

 【Workshop@140815】

Topic: Head First Gird System
Speaker: Candy Chen
slideshare: Head First Gird System

 

 

以往,在做一個 Event ,有Designer、負責實做的 Developer、以及提出 Event 的人 (SMMMC, Social Media, Marketing, Monetization & Communications),三方在合作時,總會發生許多溝通上的問題,導致 Event 進行時,諸多的不順。

 

而今,如果有一個「共通的語言」,便能輕鬆知道對方腦袋裡在思考些什麼。

今天邀請 Candy 介紹共通的語言──Gird System,讓各位 “think",Designer 做些什麼,Frontend 在切版時做些什麼,和SMMMC 在提供內容時要如何與兩位溝通。

 1-IMG_7214

投影片20-1

  • 在做一個 Event 時, Designer 會與 Developer 和 others(ex: SMMMC) 溝通。

 

 

 

 

 

 

 What is Grid and Grid system?

投影片3 投影片4

  •  如果 GOOGLE Grid & Grid system 會得到以上的圖,可是到底什麼是 Grid & Grid system 呢?

 

 

 

 

 

 

Is this a Gird system?

投影片5-01投影片6-01投影片7-01投影片8-02

  • 先想一想,以上四張圖,哪張是 Grid system ?

 

 

 

 

 

 

Ans: 3、4是 Grid system !

 

 

 

 

 

 

投影片9

  • Grid 提供一個視覺上非常和諧的畫面,把複雜簡化,同時 Grid 還可以重複複製套用在不同的情況。
  • Grid system 中文稱為格線系統,除了格子和線以外,還必須要可以歸納出小小的單位-Units (如圖:紫色區塊)。

 

 

 

 

 

 

 Designer 與 Developer 間的溝通問題

 3-IMG_7220投影片10

  • 右圖: 今年 EZTABLE 最佳錯誤示範: 草食肉食企劃。首先針對 Designer 與 Developer 間的溝通做解說。

 

 

 投影片11  投影片12

  • 一般的 Designer 心理想的 Grid 樣子(上圖左),把螢幕分成兩塊,左邊半塊是綠色、右邊是橘色,然後再將產品放上去,中間畫一條線,設定產品高度。
  • 在兩個產品上很符合,但若把這個 Grid 套在三個產品上,便會 GG! 前面提到,Grid 是可以重複複製的,理論上複製到整個頁面都要能符合才行。

 

 

投影片13  投影片14 

  • 而在 Frontend 眼裡,只有所謂的 Div ,沒有所謂的顏色和左右半邊,對它來說綠色橘色都只是一大塊的背景,它看到的只是把產品放上去這件事情。所以對 Frontend 來說,它的 Grid 是一個產品一塊;但一樣的情況,套用在三個產品裡就 GG 了。

 

 

投影片15  投影片25

  • Magic! 用真正的格狀系統便能解決以上問題,我們將可以依照格狀系統,把產品排好放在裡面!

 

 

2-IMG_7216

 

 

Grid System 中的四大變數

 投影片17

格狀系統中有四大變數:

  • 1. 總 columns 數
  • 2. 一個 column 的寬度
  • 3. column 和 column 間的間距(空隙)
  • 4. 左有兩邊的寬度

 

 

Grid 帶來的價值 

  • 1. 視覺上的和諧: 不會像上面舉例的,套用在另一種情況時,發生 GG 的情況。
  • 2. 解決多個產品放置的問題: 雖然有時兩個、三個對 Designer、Developer 是件很複雜的事情,但有了格狀系統將能幫你解決兩個、三個、四個、甚至更多個時的問題。
  • 3. 四大變數,套用在 Designer、Developer 的工具上,都是一樣的概念。

 

 

 

Grid 工具

投影片18投影片19

  • For Designer-Photoshop GuideGuide: 提供你調整格狀系統中的四大變數。
  • For Frontend-Susy: 它提供你客製化的 function,讓你產生自己定義的 Grid。
  • 基本上會把總 column 數訂為 12,因為 12 是個 magic number,12= 3*4、2*6,可以符合多個狀況。

小結論: 共通語言是用 Grid 考量時,而不再是用以往的幾 pixel 時,便不會出現往左偏 1pixel、或往右偏 1pixel的問題;也因為共通使用這四大變數,因此 Designer 只要提供 Developer 四個變數,便可以 co-work,解決了 Designer 與 Developer 間的溝通!

 

 

 

 

 

 

Designer 與 SMMMC 思維上鴻溝問題

9-IMG_7250

 接下來解決 Designer 與 SMMMC 思惟上鴻溝的問題

 

 

*Mobile First

Mobile First 是什麼? 

回到一開始,在執行一個手機上的 Event(草食肉食)時,似乎把 Mobile First 當做一個口號,往往最後才被考慮進去,因此發現 user 的瀏覽體驗非常差。

 

 

投影片21-01  投影片22-01

 

舉個誇張的例子:

當身處在 PC 時代時,我們會傾向把使用者的螢幕塞滿各式各樣的食物(資訊),非常的豐富看起來很吸引人(上圖);而當使用手機時,把這些食物放在上面,便會像一團廚餘(上圖右)。

 

mobile 和 PC 的瀏覽體驗非常的不同,Mobile First 策略下,提供內容的人必須換個角度思考: mobile 螢幕如此小,要如何提供使用者豐富的資訊,如何把資訊清楚的排列在上面,而不是想要在一個螢幕下塞滿所有資訊,如下圖。

投影片23

 

 

投影片26

Mobile First 有兩種,一是指我們要做 responsive 的狀況下,依照不同螢幕的大小做調整。
而另一種,是提供額外一個 mobile 專屬的頁面(像 EZTABLE mobile web ),這便是直接客製化成 mobile 可以觀看的頁面只有手機瀏覽時才會出現

 

如果是 Event 的話,會要求手機平板電腦可以看,但要如何解決像草食肉食手機的體驗非常差的狀況呢?

希望大家的思維是由小裝置→大裝置,來提供內容! 你必須先限制框架在小小的螢幕上,而不是天馬行空的將它排在10幾20吋的電腦螢幕,這樣才有辦法提供我們的 mobile user 一個最好的瀏覽體驗!

 

 

投影片27 投影片28

 

投影片29

 

例子: shopping,是我們第一個導入 Grid System,也是第一個做得最好的網頁。第一次做時互相溝通了許久,但花的時間是值得的,最後做出的效果很棒,回應的評價很好!

 

 

 

 

 

 

 

投影片30-01

最後總結,SMMMC 以前可能會覺得說我就提供 content 給你便行,可是在你提供 content 時可能會想說,提供的內容越多越清楚越好,或是越豐富越好,但是還需要把 Portability(攜帶性) 考慮進去,這樣最終才能讓 EZTABLE 成為一個 Mobile First 的公司!

 

 5-IMG_7244

 

 


 

如果您喜歡這篇文章可以點擊「讚」&「分享」
並歡迎訂閱 EZTABLE IDEAS!  😀

如果你是學習力強,而且經驗值高的人才,
歡迎一起加入我們 EZTABLE!! 

104 人力銀行-Visual Designer 視覺設計師

EZTABLE at Linkedin 

 

 

No responses yet

【Workshop】EZTABLE Design Library

八月 14 2014 Published by under Design, Engineering

 【Workshop@140808】

Topic: EZTABLE Design Library
Speaker: KC Liu
slideshare: EZTABLE Design Library

 

 

何謂 Design Library?  Design Library 的重要性是什麼?

今天邀請到 Front-end engineer KC,介紹屬於我們 EZTABLE 的 Design Library。

 

 

6-IMG_1969-001

很多人通常都有使用過 Twitter bootstrap 的經驗。透過 bootstrap,不需要寫什麼 CSS ,即可快速建構出有一定設計水準的網站;如果 EZTABLE 自己的網站在開發時,可以有一套類似 bootstrap 的元件庫,那就可以加速網站開發流程。

 

 

 

 

Why need it?

2-IMG_1952-001投影片1_01

有了 EZTABLE Design Library,因為有一個公開的設計元件庫可以參考,所以大家對於 EZTABLE 的設計風格會有一定的共識 ,像是大家對於 Logo 的 style、顏色,button 的種類等等,因此可以減少同事們在許多設計方面的溝通成本 (例如 Front-end engineer 跟 Designer 的溝通或是 PM 跟 Designer 的溝通)。以下列出為何我們要打造 EZTABLE Design Library 的原因:

  • learn from Bootstrap, Semantic UI
  • better communication
    使用共通的語言可以加快團隊溝通速度,甚至到不用溝通的程度。
    當大家對這些 Style 都有共識時,很多細節我們便不用再多花時間做確認和調整。
    例如在和 Designer 一起工作時,常常需要跟對方要說我這 button 的顏色、CSS 的色碼,
    如果有 Design library 的話,Designer 便可直接看到,便不需要再與他們做確認,這將會節省許多時間。
  • consistency  
    設計風格保持一致的水準,不會有很大的變動。
  • reusable components
    通常用來用去不外乎某幾個button、顏色,有了Design Library將可以重複使用,不用重新寫那些 CSS 的詳細項目。
  • boost development 
    加速開發,不用寫到很細的 CSS 的設定,便可以直接拿到需要的樣式。

 

 

 

 

 SASS+KSS

投影片2

 

所以我們要如何設計一個專屬於 EZTZBLE Design Library 呢?

經過調查之後,我們最終決定使用這兩個──SASS+KSS。

 

 

 

投影片3

 

SASS 如果有稍微寫過前端的 code 的人應該都知道,SASS 有一些 CSS 沒有的好處,例如可以設定變數、style 比較精簡,還有很重要一點是 Modular file structure with @import

 

1-投影片4

(↑pic: Demo_01)投影片5

(↑pic: Demo_02)

  • Modular file structure with @import

Design Library 會用到的東西,都可以寫成 SASS 的架構,例如顏色,可以全部寫在 color.sass 的檔案裡,按鈕則寫在 button.sass 的檔案。(pic: Demo_01)

因為 SASS 是一個變數,因此可以對 CSS 色碼做 naming,橘色可叫做 ez-red ,方便在語意的表達上更清楚。

 

顏色(pic: Demo_02)
定義灰色,在 SASS 裡面可用變數直接對每種顏色做定義,
如圖定義出 EZTABLE 的紅色($ez-red:f04e2f),之後在其他 SASS 檔裡便可以直接運用這個變數,我們就不用在背那個色碼,可以用更語意的方式來 coding 。灰色白色藍色亦是如此,只要你有定義的話,之後都可重複使用。

 

所以說 SASS 本身的架構和用法已經很符合我們心目中 EZTABLE Design Library 的樣子。
不輪是顏色、字型等等,我只要定義好一次便可以一直使用! 

但還必須要有一套系統來把 SASS  的內容做視覺化的呈現。

 

 

 投影片6

 

  投影片7

KSS 是一套由 Github 的設計師撰寫的 styleguide 產生工具,支援多種語法,例如 CSS、SASS、SCSS 等,你可以在 SASS 裡面直接寫註解,在註解那邊定義好必須呈現的元件, KSS 就可以自動幫你產生一個網頁式的 styleguide ,KSS 產生出的網頁裡會有你剛剛定義好的那些內容這樣便不用花額外的時間去寫 documentation;因此你可以更視覺化,從一個網頁上看到剛剛放上去變數的樣子。

 

 

 投影片8

  • KSS 本身是用 Ruby 寫的, 但也有人另外改寫出 Node.JS 的版本。

 

 

投影片9_01

  • 這邊示範了註解的撰寫方式

 

 

投影片10

投影片11

  • KSS 產生出來的網頁。 

 

5-IMG_1961 

 

 

3-IMG_1957-001

 

 

總結

  • 1. Design Library 有助於加快團隊溝通速度,甚至到不用溝通的程度,並保持設計風格一致,加速開發。
  • 2. 直接使用 SASS 來打造 Design Library。
  • 3. 除了字型、button 外,還有許多像 table, check box, segmented buttons, alert 等各種元件, 均可以放入 Design Library 。
  • 4. 只要將註解寫成 KSS 的格式,就可以直接由 KSS 產生 Design Library 網頁。
  • 5. 用 KSS 時,只要專心寫你的 SASS 、寫你的註解,寫完之後它會幫你自動產生出來! 同時這樣還有一個好處,這樣的 SASS 可以直接 import 在各個 project 裡面,所以它其實是同步在與你的網站更新的,不會有網站上有寫這個style,可是下面註解卻不見的情況。

 

有了 EZTABLE  Design Library,使我們 EZTABLE 裡的 PM、Designer、 Front-end engineer 的溝通以往更順暢!

並提升我們的開發速度,增進效率,可謂一舉多得!

 

 參考連結

http://sass-lang.com/guide

http://semantic-ui.com/

https://speakerdeck.com/kneath/a-better-future-with-kss

https://github.com/kss-node/kss-node

 4-IMG_1960

 

 


 

如果您喜歡這篇文章可以點擊「讚」&「分享」
並歡迎訂閱 EZTABLE IDEAS!  😀

如果你是學習力強,而且經驗值高的人才,
歡迎一起加入我們 EZTABLE!! 

104 人力銀行-Visual Designer 視覺設計師

EZTABLE at Linkedin 

 

 

No responses yet

Wi-Fi 的樣貌是出乎想像地美啊!

六月 26 2014 Published by under Design

Wi-Fi 每天都在我們左右

也很難想像沒有 Wi-Fi 的日子要怎麼過

但你可能沒想過

和我們如此親近的 Wi-Fi 竟然是如此美麗 🙂

 

hat7029_1_1141_36d806de481c5087b862175b28e4d6c4

 

 

這是英國一位博士生 Luis Hernan 用自製儀器掃描 Wi-Fi 訊號後

再依據訊號強弱給予它不同的顏色配置

然後拍下實際的照片來呈現 Wi-Fi 另一種樣貌

 

看到這些五彩光線在空氣中自由竄動

是不是炫目極了?

做夢也沒想到

本來只是一個科技名詞的 Wi-Fi 會有這種如藝術品的樣貌吧?

 

Luis Hernan 也很有趣地

把他捕捉到的 Wi-Fi 模樣稱之為 GHOST 鬼魂

它飄忽不定、時時在我們身邊流動

我們從未發現,直到有一天把它們拍下來…….是不是很貼切呢?

 

hat7029_1_1141_3b20f00cde6c24da78ae4780600c2536 hat7029_1_1141_5d1121210de0deea82c48c29cd798256 hat7029_1_1141_8ea2130d0c03ddd474a94a3b99bb2af5  hat7029_1_1141_77d18f21992e3a0b029bb629d1157104 hat7029_1_1141_59029db0a765f3f9ca48985c449bbe9a hat7029_1_1141_ade54298535b1677a3d16bf55d206de4 hat7029_1_1141_d61f9b6557fd7bfce4aa2776329737a5 hat7029_1_1141_f836d6b2d305c1e57e5b02b52a111ff1

 

(引用來源:ePrice

 

 

歡迎訂閱 EZTABLE IDEAS,跟著我們一起遇見生命的美好!

by EZTABLE, Alina

No responses yet

Israel, A Startup Nation

四月 03 2014 Published by under Design

I recently had the opportunity to visit my parents in Israel. 

Israel is a nation with interesting stories. During the 6th Century the diaspora(the historical exile and dispersion of the Jews) began. Starting from the the conquest by the Babylonians, followed by the Romans….As the persecution continues, the Jews fled to many different parts of the word including, US, France, Canada, UK, Russia, Argentina, Germany… 

 It was not until 1948, the Israel nation was established. Even after the establishment, many of its neighboring countries were eager to wipe them out from the map. Israel shared its border with Egypt, Jordan, Palestine, Lebanon…Wars between its neighboring countries persisted even until today.

However, even with all the instability, the nation was able to attract many financial capitals into the nations. Israel has formed its own financial center at Tel-Aviv. Today, Israel has a GDP per capita of USD36,200.(Taiwan’s GDP per capita is at 20,706 ). Israel currently has the world second highest startup firms (lagging behind US only), and largest number of NASDAQ-listed companies outside North America. In 2010, according to IMD, Israel ranked 17th among the world’s most economically developed nations. 

According to the World Economy Forum, Israel is …

1st in the world for flexibility and adaptability
1st in the world for scientific research
1st in the world for entrepreneurship
1st in the world for information technology skills
1st in the world for expenditure on R&D (as % of GDP) 2nd in the world for innovative capacity
2nd in the world for venture capital
4th in the world in utility patents per million population 

With all that being said, let me share some of the photos taken during my trip to Israel.

 

 Tel-Aviv : The Financial Heart of Israel and of the World

IMG_2207-1 

The building behind is where my dad works at and is also where the Taipei Economic & Cultural office is located. The building is occupied by many large firms such as IBM, Deloitte, Accenture, BCG….

 

 Language – Hebrew:

IMG_2198-1

The national language is Hebrew. English is not widely used in Israel. It is hard to communicate in English even in Tel-Aviv. The Hebrew language is written from right to left. The above receipt is written in Hebrew, making no sense to me!

 

FOOD! What do they eat

IMG_2141-1

Above is a picture of my family having a meal by the beach. The sunshine is great at Israel, almost too much for most time. As you can see, we have to have our sun glasses on to prevent the brightness of the sun. The amount of rain that Israel gets in a year is about the amount of rain we get in a  day in Taiwan! Well, talking about food, their main source of starch is from bread. They have a bread called Pita, which is a flat bread, usually comes in a round or oval shape. Most of their vegetables come in the form of salads. Its hard to find cooked vegetables in Israel. My mom tries to stir fry the vegetables at home, but it tasted really bad since most of the vegetables sold in Israel are not meant to be cooked. By the way, Israeli really love cucumbers!  You could find cucumbers in most of their dishes.

Overall, their food are very light on the stomach: does not contain much grease and does not contain heavy seasonings. Yes, the cons for such a healthy diet is the sacrifice on the taste. It really doesn’t taste that good 🙁

However due to the heathy diet and passion for exercising, Israelii’s life expectancy is among the world highest: 80 years of age(excluding the ones that sacrified during the war!).

 

Jerusalem: One of the oldest city in the world!

Located on a plateau in the Judean Mountains between the Mediterranean and the Dead Sea. Jerusalem is the most populous city in Israel, with a population of 8 million.

TEMPLE

IMG_2070-1IMG_2033-1 

The picture above is the temple where the coffin top Jesus laid upon is currently located. The coffin top that Jesus laid upon after the crucifixion.

WAILING WALL

IMG_2013-1IMG_2007-1

 The picture above was taken at the wailing wall, also known as the western wall. The western wall is a remnant of the ancient wall that surrounded the Jewish Temple. The walls stands about 8m high and its a site for Jewish prayers and pilgrimage.

The picture on the left is a picture taken during a ritual for a boy’s coming of age. Each Jewish boy would come to the wailing for the coming of age ritual at the age of 14. As you may wonder, the little black box tied to the forehead on some men in the picture is a tiny version of the bible.

The wall is separated into two areas, one side for the men and one side for women. The men and women are not allowed to cross over to the other side. 

If you take a close look at the wall. There are many holes on the walls with papers inside them. These paper are not trash from the visitors, but are messages from each of the believers to god. They believe that placing their messages into the walls is a way for communicating with god.

IMG_1990-1 IMG_1995-1

 More pictures on Jerusalem

 

歡迎訂閱EZTABLE IDEAS,讓我們一起享受人生  : )

By  Daywey, Operations PM

EZTABLE 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

No responses yet

Reflector工具介紹

九月 18 2013 Published by under Design

ReflectorOne

因為從事網頁設計相關工作,在職掌上除了要將視覺畫面處理的漂亮之外,也要注意使用者經驗,所以往往都要將智慧型手機、平版電腦、桌機或筆電等等的3C產品在身旁嚴陣以待做障礙排除。

但這時出現了一個問題,我如何將隨身攜帶的行動裝置,在提報中、在研發中或其它突發的狀態下向群眾做動態發表,並完整地呈現想表達的畫面或功能呢?

在一次偶然的機會下,我知道了 Reflector 這個輔助工具,天啊!就是它,那就簡單介紹給大家玩玩。

 

沒有使用平台問題

只要 iPhone或 iPad 都可使用的狀態下,不論是 Mac 或 PC 都可以哦!但越獄的話就不行了!

 

可在你的電腦上同步顯示 iPhone或iPad

玩遊戲、看電影、使用的應用程式都可以從你的 iPhone 或 iPad 同步反射到電腦螢幕上。

方便你在台下操作,台上投影機裡則顯示你在 iPhone 或 iPad 上的畫面。

在電腦上同步使用行動裝置

 

內建AirPlay的反射裝置

不需額外的裝備,方便讓你和電腦串接,而且使用簡單,連我這個硬體笨蛋都會用。

了解更多AirPlay 

 

mirroring_on

 

還有其它功能包含:可記錄、使用多個設備、密碼保護、全螢幕,它的描述我不多說,有興趣的人可以他們的官網下載試用版或是看更多的內容介紹   Reflector官網

 

希望你們試玩愉快囉~

 

妮可羅賓

 

No responses yet

Metro Design & Flat !!

九月 09 2013 Published by under Design

ios7-vs-ios6

WINDOWS8問世以來,開始的Metro Design,到如今IOS7 ,在使用者介面上,你們感覺到了甚麼?

FLAT !!

甚麼是FLAT?

更平? 更簡單? 還是世俗人們口中的"極簡"?

為什麼現在的領導世界科技大廠,所改變的使用者行為是以FLAT做為UI的基礎?

 

科技始終來自於人類的惰性。

metro-style-interface

其實IOS7的FLAT只是個設計呈現的結果,我更喜歡的是Metro Design這個詞,更便捷的設計。

網路的石器時代一直到web2.0,20世紀網路所流通的資料量,遠不及21世紀到現在13年的天文數字單位,以前的網頁,能夠極盡的花俏,有多少材質,多少底紋,能夠放FLASH的就不會讓他空著,網頁LOADING還要放動畫,進入網頁的INTRO還要塞影片,能漸層就不會放色塊,能貼圖就不會讓設計留白,而如今卻不是這樣了。

p_2 p_1

UI的功能設計被強化的最好一個LINK就讓我找到並使用,部想看到無所謂的設計去影響我在行動裝置的網路速度及視覺障礙,我們要的是更多的功能,更簡單的操作,更快的選項結果,我要的資訊功能就是要快!狠!準!

世俗對於APPLE的形容詞,不外乎設計很簡單,極簡,之類的。 但是一昧的追求那只有外表的風格,卻看不出產品本質的態度,尤其是台灣的各種想追尋其腳步或風格的產業….

 

“我好喜歡蘋果的風格,但可不可以幫我多加一點顏色"

“我就是要極簡,像蘋果一樣,看起來很簡單的那種,可是可以幫我放新聞banner在首頁嗎?要5則輪播喔"

“你知道嗎,我的產品就像APPLE那種STYLE的,網站也要很像,應該不用很貴吧?"

images

Metro Design !

更便捷的設計,目的是為了讓多功的UI介面,更好用,更省效能,更方便UX的體驗。

FLAT !

這是便捷設計下的其中一種表現,windows8 / IOS7 帶領得不是設計的風潮,而是使用者經驗的進化,而他正在持續中…….

 

EZTABLE Wen 2013-09-09

No responses yet

Older posts »