{ 設計筆記 } Spotify : Design&Music !

渡完假回到辦公室的早上,泡一杯咖啡配上 Spotify 的 Bossanova 的歌單,幻想自己還在台東的海邊,一邊寫 code 或是打開 illustrator 感覺就會好過一些。或是跟女朋友在家裡做菜,選擇浪漫的 jazz 專輯,讓感情不想大躍進都很難。 特別是沒...




渡完假回到辦公室的早上,泡一杯咖啡配上 Spotify 的 Bossanova 的歌單,幻想自己還在台東的海邊,一邊寫 code 或是打開 illustrator 感覺就會好過一些。或是跟女朋友在家裡做菜,選擇浪漫的 jazz 專輯,讓感情不想大躍進都很難。
特別是沒有特別想聽的歌、想換換口味時, Spotify 總是能推薦最多元的外文歌單給你。


前幾天在網站上看到 Spotify 跟一些品牌網頁設計的演化史
其實我一直都很喜歡 Spotify 的介面,就小小的研究了一下它的設計,於是決定來分享一下我的 Spotify 小筆記跟簡單又無用的設計小教學。


Spotify 是一個 2006 年創立、2008 年 10 月 7 日在瑞典斯德哥爾摩,正式上市的音樂串流平台。

初登場時長這樣
光看這個介面,實在是很難想像他即將會變成全球最大的付費音樂平台啊!因此每個點子都有無限的可能,如果你有什麼很酷的想法,千萬不要因為別人說「好像不怎麼樣」就隨便放棄!


你,就是下個世紀的主宰。



(突然正面積極個屁)



總之經過幾個版本的演進,大約到了 2009 年時智慧型手機開始流行,開發了 APP 才有了比較大的變化。從畫面中的手機型號可以看到時代的眼淚啊~


中間經歷了很多次改版,我這邊就省略不詳述了,有興趣的朋友可以到 UX Timeline 看更多。


我想特別介紹的是從 2014 年間開始的 Spotify,光是 logo 就在兩年間改版了兩次,
不管是產品還是網站,整個公司都像脫胎換骨一般讓人為之驚艷。

轉捩點就是這個擁有不凡鬍子捲度的男人,Tobias。





設計師 Tobias Van Schneider ,前 Spotify 產品經理兼藝術總監,兼我的新偶像。
Tobias 在加入 Spotify 後,立即大刀闊斧的改造了 Spotify 的視覺設計,把產品推向了新的境界。會發現 Tobias 是某天偶然在網站界的奧斯卡獎 AWWWARDS 的平台看到他的作品(前一篇 一月份精選網站 也有他設計的網站)

點擊到他的網頁跟履歷後大吸一口氣,從電腦前面往後彈了10公尺之遠,實在是太耀眼了不敢直視啊!!!!!

除了獲獎無數之外,合作的對象都是我們想得到的國際知名公司如 Red Bull, Google, BMW, Wacom, Sony, Toyota, Ralph Lauren ...... 等等。但真正吸引人的當然不只是這些履歷名詞,而是他的設計跟態度。

恭恭敬敬的看完一些他在 Awwwards 跟一些報導的專訪,發覺他無論是想法或是行動都是一個非常值得敬佩的人物。在一篇專訪中提到,許多工作多年、成為所謂資深設計總監的設計師,通常在團隊中只做指揮跟給予方針的工作,很少再打開 photoshop 自己做設計。但 Tobias 是一個崇尚不斷用雙手創造的工作者,直到今日他每年都有非常大量且高品質的產出。


非常推薦大家追蹤他的網站及作品集。

Behance 作品集


你無法用任何一個職業定義他,擁有設計師、程式開發者、創業家、演講者、部落客⋯⋯的多重身份,Tobias 在無論什麼時候都充滿熱情,並且仍然在不斷挑戰自己的各種可能。



圖為 Spotify 辦公室。



在一篇訪問中,Tobias 提到在 Spotify 工作兩年多的經歷:
「當時公司內的設計部門,大約有 50 個左右的設計師,包括產品設計師( product designer ) 跟負責社群部分的設計師(community designer),每天的工作就是協調每個設計師的進度,並且跟新創部門不斷的激發新的火花。」
問到他對 Spotify 的想法,
他形容每天的工作都是「非常讓人興奮、驚艷,並且充滿挑戰性的。
Spotify 擁有非常迷人的企業文化,整個公司充滿活力跟創新。」

我想能擁有這樣的工作環境,大概是每個創意工作者的理想吧!


但非常有才華的 Tobias,對人生有非常多目標跟想法,為了使自己不斷前進與成長,其實才任職兩年多就離開 Spotify 了。在他在職的這段期間,Spotify 的使用者從 1,500 萬成長到 7,000 萬,並且協助公司確立成為世界音樂串流的領導品牌。





但在 Apple Music 開始進入市場後, Spotify 會如何應對呢?
很期待他們接下來的發展跟突破。





無用の 設計小教室

常常使用  Spotify 的朋友,對上面這些風格的影像處理一定不陌生吧!
今天就來跟大家分享,如何簡易的用 photoshop 製造出 Spotify 風格的介面吧。


STEP 01
打開一張你喜歡的圖片。
這邊選的是學妹在瞪我的仙人掌的照片,我們即將 Spotify 她。
STEP 02
先去除影像的色彩,選擇影像 > 調整  > 黑白。


STEP 03 
做完上面的動作之後,可以再自行把影像的對比調的更分明一點,調整完像是這樣。




STEP 04

1.開啟一個新的圖層,把整個圖層填滿 Spotify 的顏色(或是你希望的亮部色系),這邊我們選了 logo 的綠色。

2. 把圖層上的混合選項,調整成色彩增值。
STEP 05

接下來要把黑階的部分填上另一個顏色囉!

1.一樣開啟一個新的圖層,把它填滿另一個你喜歡的顏色,這邊我使用的是 Spotify 常用的藍色。

2. 把圖層上的混合選項,調整成 變亮 模式。

感覺已經很相似囉!接著再小小的調整一下圖層的不透明度,讓整個畫面更和諧。



STEP 06

再加上標題跟 Spotify 經常使用的幾何圖型,就大功告成囉!
以下是我加工過的成品~





#Spotify #無用教學 到這邊結束了。
希望有機會能教大家一些比較酷的東西!


See you next time.




Source :

Spotify 年度音樂

Tobias 為設計師創立的網站製作工具 Semplicelabs

You Might Also Like

1 意見

  1. casino.com - DrmCD
    과천 출장안마 gambling › casino.com › gambling › casino.com Casino.com has an EXCLUSIVE casino gambling app, 인천광역 출장안마 which 청주 출장샵 brings you 동해 출장샵 over to a 논산 출장안마 world of casino fun, with up to 30 table games.

    回覆刪除

INSTAGRAM