2016年8月2日 星期二

NIPPON COLORS 選出代表日本的 250 種顏色,日本傳統色系配色選色網站推薦




NIPPON COLORS 選出代表日本的 250 種顏色,日本傳統色系配色選色網站推薦

免費資源網路社群介紹過不少配色工具色彩應用,雖然我不是從事設計相關工作,但在編修網頁時偶爾也會需要調整顏色,才能讓讀者獲得更好的瀏覽體驗。因此我傾向尋找能提供色彩靈感的工具,例如 Palettab 在每次開新分頁自動展示配色和字型,或者 BrandColors 收錄世界知名品牌顏色色碼,就連精靈寶可夢都有專屬配色網站 Pokémon Paletters
本文要介紹的 NIPPON COLORS(日本の伝統色)對日本愛好者來說一定很有吸引力,網站以收錄所謂日本傳統色系為主,前前後後共 250 種顏色,這些顏色具代表性,經過歷史文化長時間淬練而來,也是最足以代表日本的色系。

簡單來說,日本傳統色是在日本古典文學裡經常使用的顏色,而這些顏色也常被用於和服或其他日本傳統藝術和手工藝中。無論有沒有去過日本旅行,當你看到這些色彩時,可能當下就會立刻聯想到日本(尤其台灣又受日本文化影響甚鉅…)。
現在,使用者透過 NIPPON COLORS 即可輕鬆索引檢視這些日本傳統配色,包括色彩名稱、色碼(CMYK、RGB、HEX),亦能開啟動態模式,自動隨機切換不同背景色。若你想要在設計上走和風配色,或是日系的素雅風格,請務必到這個網站來找尋靈感。
網站名稱:NIPPON COLORS 日本の伝統色
網站鏈結:http://nipponcolors.com/

使用教學

開啟 NIPPON COLORS 網站後會隨機跳出一種顏色。個人非常喜愛它的網站設計,尤其在字型運用上相當精緻細膩,右側會顯示當前顏色的色彩名稱及色彩值,包括 CMYK 印刷四色分模式和 RGB 三元色光模式色階。
NIPPON COLORS

NIPPON COLORS
NIPPON COLORS
NIPPON COLORS
NIPPON COLORS
將滑鼠游標移動到 RGB 三元色光模式上,右側會自動跳出 HEX 網頁顏色值。
NIPPON COLORS
比較特別的是右側有一個「Munsell」也就是「曼塞爾色彩體系」選項,將它開啟後會變成動態模式,利用色彩裡的明度、色相和採度三個維度來描述顏色,你可以看到相當酷炫的動畫效果,在固定時間後自動隨機切換至其他顏色,也是一個尋找色彩靈感的方法喔!
NIPPON COLORS


by 

ColorDrop 你唯一需要的線上調色盤!收錄各種配色組合,提供設計開發上絕佳色彩來源


如果你對於配色工具有興趣,一定還記得 LOL Colors,由國外開發者獨力完成的免費網頁選色服務,只花了 24 小時時間建置!這項服務最吸引人的地方在於網頁設計相當簡單,提供各種色彩組合,沒有太多額外或複雜難懂的功能,實在深得我心。本文要介紹的 ColorDrop 和 LOL Colors 有點相似,不過配色工具向來不嫌多,若是平常工作會需要找尋色彩靈感的話不妨將它加入書籤以備不時之需。
ColorDrop 介面跟 LOL Colors 類似,都是將四個一組顏色整合在一起,點選色彩後就會跳出對應色彩值(HEX、RGB),讓你能將顏色運用到其他設計開發。
ColorDrop 已經收集一些配色組合,未來會持續更新,亦能將自己喜愛配色加入最愛,以便之後隨時返回網頁檢索。
比較不同的是 ColorDrop 允許使用者更換不同背景顏色,預覽在不同背景配色中套用某種顏色的感覺,讓你在瀏覽網站時有更多不同體驗。雖然是一個簡單的小工具,相信大家一定會喜歡(如果你手邊有其他推薦的配色工具,也歡迎提供給我)。
網站名稱:ColorDrop.io

使用教學

STEP 1

開啟 ColorDrop.io 後,從首頁就能開始瀏覽色彩調色盤,網站收錄不少漂亮的配色組合,五顏六色、多采多姿。從左側切換不同背景色彩,以下是其中四種顏色。




STEP 2

點選其中任一配色組合後,網站右側會跳出這四種顏色及對應的色碼(HEX、RGB),對於要使用顏色來說確實非常方便。如果你想將它暫時收藏起來,之後返回網站時可以快速找到某個顏色的話,點選上方的「星星」就能標記為 Favourites。點選左側「Favourites」開啟所有你加入收藏的配色組合。



STEP 3

除此之外,ColorDrop.io 也收藏一些扁平化設計(Flat Design)常用顏色,從左側的 Flat Colors 可以找到這些顏色和 HEX 色碼。
本文授權轉載自:免費資源網路社群

2016年5月24日 星期二

12 張圖,一目瞭然 AI 與 PS 的不同



illustrator_vs_photoshop_1.jpg?itok=TyPMsHkO
對設計、藝術或視覺等相關領域有興趣的大家,對 ILLUSTRATOR 與 PHOTOSHOP 這兩款軟體一定都不陌生吧!但就第一次接觸這兩類軟體的新手們而言,什麼時候該用哪一個、它們分別有什麼專有的用途與特色等,便有常分不清楚的時刻吧?!

下面這一系列來自於印度設計師 M.A. Kather 針對 AI 與 PS 所繪製的對比圖像,用簡單的畫面簡單的呈現、對映出兩者的差異,輕鬆的讓人一目便了然於它們各自的特色,或許詳細的深入度還不夠,但卻也帶出了一種加以說明它們差異的方式。


illustrator_vs_photoshop_2.jpg?itok=Ezgp_34w
首次面市的年代


illustrator_vs_photoshop_3.jpg?itok=nrOBPPii
第一版的啟動畫面


illustrator_vs_photoshop_4.jpg?itok=ne4FmZNl
最常使用於:向量圖像設計 vs 像素圖像設計


illustrator_vs_photoshop_5.jpg?itok=9tcKmyiX
最常使用的對象:設計師 vs 藝術家


illustrator_vs_photoshop_6.jpg?itok=f89WIspJ
放大後差異:依舊清晰 vs 模糊失焦


illustrator_vs_photoshop_7.jpg?itok=L-zfDPS-
工作區(畫板)設定:可同時設定多種尺寸 vs 一次單一個尺寸(但最新版本 CC 已有所不同)


illustrator_vs_photoshop_8.jpg?itok=NOLSsJGA
剪裁遮色片位置;物件之下 vs 物件之上


illustrator_vs_photoshop_9.jpg?itok=LVQNGzui
選取邏輯:物件 vs 區域


illustrator_vs_photoshop_10.jpg?itok=BDe8Ef9d
圖層:可建立子圖層 vs 圖層之間各自獨立


illustrator_vs_photoshop_11.jpg?itok=UdCQV_ON
Ctrl+Z:可持續復原之前的步驟 vs 回復到上一步動作,除非以 Ctrl+Shift+Z 持續進行復原


illustrator_vs_photoshop_12.jpg?itok=GUB_FltH
工作區域;在工作區之外也可進行作業 vs 僅可在視窗範圍中操作,其餘的將被隱藏


illustrator_vs_photoshop_13.jpg?itok=j6ajCLF7
儲存檔案的時間:快如脫兔 vs 慢如蝸牛

2015年12月1日 星期二

2016年TOP10企業網站設計趨勢: RWD響應式網頁、一頁式網頁、全幅背景…

這幾年因行動裝置盛行,大大改變了整個網頁設計的技術,同時也影響了設計風格。RWD響應式網頁設計、全幅背景、一頁式網頁成了主流設計,來看看有哪些設計趨勢適合用在講求穩定大器的企業網站上。
web-design

1. 響應式網頁設計 RWD, Responsive Web Design
響應式網頁設計(Responsive web design, RWD),又稱為自適應網頁設計。 是一種網頁設計的技術工法,可使網站在多種瀏覽裝置(桌電、筆電、平板電腦、行動電話)上閱讀和瀏覽。RWD網頁可讓同一個網頁畫面隨著螢幕或瀏覽器寬度變化,同一筆圖文資料在桌電為橫式排列,當瀏覽器寬度縮減到手機尺寸時,則顯示為直式排列。當你用桌電看到一個網頁想傳給正在用手機上網的朋友時,不會因裝置尺寸不同而無法正常閱讀。 
ibm
IBM官網 電腦版畫面 http://www.ibm.com/

 ibm-2
IBM官網 RWD行動版畫面 http://www.ibm.com/

2. 大背景(全幅背景) Full-width Background
隨著螢幕尺寸越來越大以及行動裝置盛行,可隨螢幕縮放圖片尺寸的全幅背景網頁設計開始流行起來。全幅背景相較於傳統固定寬度的banner情境圖,更能突顯氣勢磅薄的企業形象。近來在html5影片格式的支援下,還可以採用全幅影片。
stena-bulk

3. 一頁式網頁 One-page Web Design
平板電腦及行動裝置改變了人們瀏覽網頁的方式。過去在使用桌上型電腦常常會希望網頁不要有捲軸,到了平板電腦反而開始習慣手滑螢幕來瀏覽網頁,這個時候一頁式網頁就成了設計主流。「單欄式網頁設計」也是一頁式網頁的呈現特點,單欄式網頁設計近似於瀏覽PPT的概念,讓user一次專注於了解一件事情,不會分心去看左右不相干的文章。過去一個頁面塞滿一堆資訊的網頁設計已經不再流行,在資訊海量的時代,簡單的區塊式設計才能讓客戶專心理解你想傳達的訊息。
qualcomm 

4. 固定式選單 Fixed Menu
固定式的主選單也是近來流行的趨勢之一,尤其是功能性選單,大多會設計成固定式選單。當網頁逐漸趨向一頁式的版型設計後,由於網頁捲到下方後就找不到主選單,這個時候就會將主選單改為固定式的做法。在網頁下方加上「回到頁頂」(Back to top)的固定式按鈕,也是常見的解決方案。
longchamp

5. 扁平化設計 Flat Design
扁平化設計流行一段時間了,最早從微軟Windows8問世開始,後來連Apple iOS7也開始採用扁平化設計,以別過去講求擬真立體感的設計。有趣的是,這次微軟難得站在流行設計的前端。


6. 微動畫 Micro Animation
過去Flash時代常見企業網站充滿了飛天鑽地的動畫,這麼多年大家也看膩了,取而代之的是簡單、不影響閱讀的微動畫,首頁輪播圖(Slider)是常見的做法。另外,用CSS3製作的色彩漸變按鈕、主選單特效,都讓企業網站有畫龍點睛的效果。
apple

7. SVG網頁圖片向量格式
一般桌電、筆電的螢幕解析度為72dpi,手機行動裝置的解析度則是高達96dpi,因此有些jpg或png的icon在電腦看起來很正常,但到了手機版卻是糊的,採用SVG格式的向量圖就可以解決這個問題。由於SVG向量格式可以隨意放大縮小,因此在RWD網頁設計也經常採用SVG圖檔來取代其他圖片格式。

8. 磚牆式設計
磚牆式設計經常用在呈現許多資訊流的頁面,例如用圖片呈現一整個照片牆。磚牆式設計由於可橫排/直排切換,因此也很常見於RWD響應式網頁設計中。
oakley-3

9. 頁尾區塊Big Footer
Big Footer近來出現在政府網站檢核表內,適合用來呈現企業網站架構或相關連結,對於SEO也有很好的幫助。
 adidas

10. 時間軸 Timeline
時間軸的設計概念很適合放在企業歷史沿革或里程碑的網頁設計上。
frontlynk

2015年10月2日 星期五

用網頁程式語法所寫出來的稀有動物們

曾經,和人類一同搭上了諾雅方舟的牠們,如今卻可能因為於環境的變遷、人為的破壞等,逐漸地銷聲匿跡在和我們所一齊生活的地球之上…也許,我們都還未曾知曉卻可能已經僅存不到幾隻的稀有物種們。此刻,就和我們一起藉由 Species In Pieces 認識認識牠們吧!
Species In Pieces 一個由阿姆斯特丹的設計師 Bryan James 利用 HTML+CSS 語言編寫、製作而成的網頁,藉以三角形的幾何色塊分別為 30 種瀕臨於滅絕的物種們所設計的網頁…那在柔和雅緻的色澤中,飄散著猶如玻璃碎片的三角色塊,而那在場景轉換下所聚集、轉換、碎散的色塊們則會一一猶如七巧拼圖一樣的,在幾何狀中加以拼湊出牠們帶有特色的面容,並在專業知識的輔佐下使我們得以更認識牠們。







James 在接受 The Huffington Post 的採訪時曾表示:他深信於唯有當你我看見了,才有機會再深入地明白。因此,他以網頁設計為出發,並藉由三角幾何色塊的結構變化,以富含設計味的視覺美,展現出存在於牠們身上,那些純粹卻隨時都有可能因此而崩離碎化的美好生命們…





感同身受的同理是我們本就擁有的,而 James 藉其富含美學的設計所架構而成的 Species In Pieces 則讓我們得以藉由專業性的知識補充,對牠們有多一些的認識與暸解,再更清楚於牠們所面臨的生存狀況下,也就能更加深切地與牠們有所連結。
這樣一個直接將網站中圖像的版權費捐贈於 Evolutionarily Distinct and Globally
Endangered (EDGE) 的規劃,也是把這帶有藝術美感為切入的設計、期望使更多人看見牠們存在的用心,以及試圖喚醒於我們對環境、同為地球一家人的牠們等,有更廣更深於瞭解的面向等,正是 James 期望於為牠們在虛擬的網路世界中所搭建起的一個溫暖的家 Species In Pieces。


2015年6月1日 星期一

2015 年十大網頁設計趨勢

網頁設計師與作家 Amber Leigh Turner 於 The Next Web 發文,整理了 2015 年網頁設計十大趨勢,幫助你快速進入狀況。


1. 捲動網頁取代點擊

01
單一網頁愈來愈長已是很普遍的做法,尤其是在行動裝置普及的時代,首頁通常不置連結,改將所有內容放在單一頁面,讓低頭族「滑上癮」。因為比起在一堆連結中跳轉,必須不斷重新等待新的頁面載入,資訊通通放在一頁的形式更容易瀏覽。而且不再只是首頁「變長」,其實「about」或描述產品的網頁,都能採取捲到底的方式,比如蘋果 iPhone 6 的呈現,就很符合長網頁的趨勢,把所有規格與功能全部放在單一網頁內,並且增添了一些精緻的動畫元素,抓住網友捲動全程的注意力。

2. 運用敘事與互動製造驚喜

02

精彩的內容是決定網站優劣的關鍵因素,如果善於以說故事的方式呈現內容,更是大加分。西雅圖 Space Needle 網站,運用數位敘事與設計,生動的述說了 Space Needle 的背景故事。同時也運用 2015 的另一個顯著趨勢:互動,帶給網友宛如親臨實境的獨特體驗。在網頁設計中交互使用互動與動畫,而且運用得當,能夠製造驚喜,讓觀者留下深刻印象,瀏覽 Impossible Bureau 時,一邊滑動捲軸、一邊滑過不同元素,會有各種令你驚奇萬分的互動感。
03

3. 背景爭奪戰:大張背景圖 vs. 大型色塊

03
前幾年,一定看過不少大型圖片作為背景、文字浮於其上的設計,這是網友打開網站首先映入眼簾的部分,覺得膩了、想要「非主流」一下嗎?那就逆勢而行。有些新網站就選擇抽除背景圖片,只留下巨大的色塊與文字。抽的好處除了特別突出之外,也有助於改善載入速度。在一片大型背景圖片的網站中,The New Wave 優雅的設計值得參考。

4. 去除非必要的元素,簡化再簡化

04
有個設計理論是這麼說的,所有非必要元素全部都被清除之後,設計才大功告成。2015 年可能會是設計師大舉實踐這個理論的年份。前面所提的 New Wave Company 與 Rareview Digital Agemcy 網站都屬「去除大型背景圖片」的模範。後者更將背景顏色、複雜的版式通通掃光。過度設計、過多影像、過多色彩的網站充斥,極端簡潔的設計反倒顯得特別。

5. 固定寬度置中版型

05
過去幾年大部分網站多把「banding」或寬度(width)設為 100%,影像與區塊隨著瀏覽器視域而變化。在更之前,設計師傾向設定固定寬度,並將圖像置中在頁面。這種固定寬度的趨勢以現代化的面貌,出現復興的跡象,有些網站選擇設定「最大寬度」,讓內容在瀏覽器中置中。Michele Mazzucco的網站就是一個例子,你發現什麼玄機了嗎?縮小瀏覽器時,含有主要內容的色塊占滿螢幕,放大時卻有留白。

6. 專業高品質、獨一無二的攝影

06
為求方便也為減省成本,圖庫影像還是很多設計師的選擇。不過最近竄起的新網站,寧可多花一點錢請專業攝影師拍攝高品質、獨一無二而且完全按照網站目的需求定製的影像,不僅能夠切實展現網站品味,還能避免與其他網站「撞衫」。Grain and Mother 的網站圖片是幾個人坐在餐桌前,彷彿開心地正在談論什麼事情,他們不是什麼臨演,而是 Grain and Mother 的創辦人與員工。如果點進其「about」頁面,美麗且專業的影像肯定會奪走你的注意力,美妙的辦公空間都是真的!
about

7. 手機選單移植回網站

07
08
目前大部分網站還是比較重視桌面版,無法完美過渡到手機與平板裝置。不過響應式設計(RWD)興起,協助設計師順利讓網站順應裝置,無論何種螢幕都能有最佳瀏覽體驗。在這樣的趨勢下,我們開始看到本來在手機上流行的元素,反倒移植回桌電上。比如 24 Ways 與 Rawnet 都有如同 app 與響應式的選單,儘管是在桌電觀看,卻像是在用手機瀏覽。這兩個網站一改傳統水平選單的形式,而是像手機版網頁常見的直式 flyout/sideout 選單。

8. 主選單藏起來!

08
有些網站則把選單藏起來,唯有網友點擊或懸停在某個元素上,才會開啟選單,儘量維持畫面整潔、強調功能性。這個同樣源自手機螢幕特性的設計,或許也將成為 2015 年的趨勢。看看 Brian Hoff Design新網站,右上側置放漢堡圖示,由於使用者已很習慣在手機上看到這種代表選單的象徵,因此並不會無所適從。

9. 超級大的字型(typography)

09
前面所提的示例網站,絕大多數都有個相同的特徵:巨大的文字標題。2015 年這樣的流行將會繼續,而且可能有愈長愈大的現象,就像在地面上看到一架即將降落的飛機,那麼大。Tiny Giant網站超大標題直衝眼簾,要忽略也難。眾聲喧嘩的時代,就是要比別人更大聲,才有被看見的機會,標題字型,在 2015 年會繼續放大。

10. 不受環境優劣影響的瀏覽體驗

本文提到的網頁設計趨勢,多數都出自為網站「瘦身」,加快手機或平板,以及頻寬不足環境的載入速度。網站設計師與開發者愈來愈重視網站「重量」以及使用者與其互動的形式。如何在行動裝置中、不同頻寬環境下營造同樣良好的體驗,也是 2015 年益發重要的問題。相信今年我們會有更多更順暢的網站,不會載到一半就喊咔。
另外數位行銷諮詢網站 Econsultancy 作者 Christopher Ratcliff 根據自己的觀察,並且訪問了 Dan Barker 與 Chris Lake 兩位行銷專家,也統整出 17 項 2015 年網頁趨勢,同樣相當值得參考。以下節選出與 The Next Web 沒有重複的觀點:
1. 視差滾動:Wordpress 等網頁製作平台提供視差捲動的模板,因此我們可以期待未來出現更多高度創新、以敘事為主體的網頁。
2. 卡片設計:前幾年類似 Pinterest 的卡片瀑布流今年可能會捲土重來,這種重視影像的設計非常符合「TL;DR(太長沒讀)」的網路族群,也非常適於呈現在行動裝置與響應式設計。
cola可口可樂 AHH
3. 物質設計(material design):擬真設計與扁平設計的交叉點,Google 去年推出的 material design,今年預計也將大為風行。
InboxInbox
4. 幽靈按鈕(ghost button):按鈕透明化,僅以能夠識別的超細邊框,包裹無襯線字型。一方面減少按鈕與背景的突兀感,一方面依然有清楚的指向。
5. 動態設計(motion design):比如不斷捲動,不會直接出現圖片,而是先有色塊才有圖片開展。或者數據長條圖「動起來」。
SNMcYrW
6. 模組捲動(modular scrolling):一般我們是捲動整個網頁,但捲動個別欄位也是沒問題的。
7. 色彩漸變:選擇一個色彩作為主體,配以許多深淺不同的相同色系。
8. 固定的導航欄:無論你捲動到哪個位置,導航欄永遠固定在最上方,方便使用者在各種頁面中切換,用處較為複雜的大型網站如 Facebook 就會使用這種設計。
9. 行動第一,但非行動唯一:畢竟還是有一大票人工作倚賴桌上型電腦維生,比如正在看本文的網頁設計師們,對吧~