最新 New

[公告]草監網路更改網址至gratch.tw

網站設計評論#7:Quarter Rest Studios - HTML5

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ,將於3秒後自動跳轉

關於網站

Quarter Rest Studios是一個位於美國紐約布魯克林區的數位媒體工作室,所以網站裡充滿了他們的影片或音樂作品,是一個簡約清新、主題明確的網站,在許多地方的設計方式上也充滿巧思,雖然簡單,不過這種媒體網站如果無法吸引瀏覽者,那跳出率會非常高,不過這個網站卻會讓人認真的瀏覽喔。

初次遇見網站

一直以來都沒有看過這種數位媒體工作室的網站,像這樣的數位工作者通常都可以運用畫面或聲音帶動觀者的情緒與心理,是非常了解如何掌控氛圍的一個工作類別,所以剛看到這個網站的時候覺得還蠻新鮮的,尤其是線上音樂播放的部分還可以看到波型,播放過還會覆蓋一層淡灰色顯示播放過,就跟一些音樂剪輯軟體一樣,感覺真的非常新鮮,也由於他們的專業就是數位影像跟音樂,所以在整體網站上無形中就加分非常多,也因為他們專長與重點是影像與音樂,所以網站走簡潔風更能讓焦點聚集,可以說這個網站看似一般,但是卻隱藏著無限的潛能喔!

網站色系

 #d5d110   #565656   #ffffff 

Logo這回事



Quarter Rest Studios的Logo非常的妙,一眼就可以看出與音樂有關係,因為他們的Logo就是一個四分休止符,為什麼會是休止符,其實就我個人猜測,應該是希望大家可以暫停一下,專心看看他們的傑作,在音樂中,這樣暫時的寧靜,反而可以讓大家更專心的等待接下來會出現的旋律,簡單,卻引人入勝。

選單這回事



選單的設計很簡潔卻也很大氣,沒有擁擠感反而有排場,與Logo做搭配更是絕妙,我一向很喜歡把Logo放置在版頭中央的網站,因為會比大部分都放在左上角的網站還要吸引我的注意,如果那個Logo百看不厭,那也代表著我會反覆一直看著網站的選單,久久不能忘懷。Quarter Rest Studios的選單分類把他們的專業項目分開來擺放,所以不會看到一個選項叫做“作品”而是會看到“影像”、“音樂”兩個分類,如果我一直反覆看著Logo,那也代表我一直看著他們的專長項目,看似沒有什麼的選單,卻隱藏了深層的涵義。

大話網站主視覺



Quarter Rest Studios的主視覺我覺得很棒,因為每一張都是他們的影片廣告作品,連結都在左下角中,但是如果一開始進入網站就播影片那網站會顯得很慢,而且如果很快點選了主選單,那等於什麼都看不到,除了白搭還會黑一大塊在那邊,在畫面上當然就會被打折扣,但是Quarter Rest Studios卻放上了一張朦朧美的圖片,不知不覺的就會讓人非常想要點擊左下角的播放鍵,讓人想要看清楚內容是什麼,小小一個圖片效果就可以引發瀏覽者的興趣,真的很利害。

內文排列方式分析



在影片類別的排版我只能說厲害,其實運用了跟首頁的主視覺一樣道理的設計排版,只是首頁需要的大圖像來當主視覺,並且營造氛圍,但是內頁顯然就不需要這麼大一個視覺,所以在這裡他們使用“局部”這樣的圖片,一樣可以引起瀏覽者的興趣,就像瞎子摸象那種感覺,你只摸到象腿並不會看到整隻大象,如果想要看到全貌,你勢必需要點擊播放按鈕,就是這樣的運用,讓人很想要一部一部的一直點下去,我只能說他們真的很會運用心理學去做整體的佈局,很多國外的網站其實佈局也都很簡單,但是越是簡單的佈局,就隱藏著更深層的涵義,這是台灣許多網站都看不到的部分,這點真的需要好好的學習學習。


在音樂部分,由於音樂沒有畫面,當然就不可能像影片那樣有個畫面截圖去運用,所以這裡他們很聰明的直接將音樂的波型放上去,除了讓人一看就聯想到音樂以外,還會讓人不自覺的想要播放看看這樣的波型會是什麼樣的音樂,沒想到我一點下去,一聽更是了得,那音樂的優美跟意境會讓我很認真的聽完,而且還會想要一次再一次的聽下去,無形中就有中了他們的“詭計”。


第一次覺得內頁需要整體截圖才可以讓大家明白他們想營造的氛圍,這就表示在這一樣上的佈局是考慮到整體的畫面,所以非得整頁一起講才能讓人明白,主選單下來就是非常精簡的介紹,還有一張所在位置的簡圖,我覺得像這樣類型的工作者,非常明白簡短的文字就非常足夠讓別人了解他們,而下方的照片是一個環境簡介的小相簿,談白說我一開始不知道這裡的照片可以輪播,是當我覺得下面灰色一條底,又這麼厚實,實在與網站不配時,一個不小心滑鼠移到上方,才看到圖片切換的箭頭,才明白原來那裡是文字描述的區域。有的時候一張照片就可以勝過千言萬語,看完這些照片,我真的可以明白為什麼他們的作品這麼吸引人,因為他們的生活真的還蠻讓人嚮往的,就光是那幾張照片,就足夠讓我想到實地去看看實際的情況了。

下方的客戶Logo排排站部分,對於他們把客戶的Logo顏色簡化之後,放置於網站上的確看起來非常整齊,而且不會因為太多顏色顯得雜亂無章,而且每個Logo的排列方式都不一樣,我覺得這樣的處理非常是最適當的,我相信一定有些客戶會反應不能這樣放,畢竟顏色對企業來說也是非常重要的,可見他們與客戶的關係應該是不錯的才對。

表單設計這回事



老實說看到表單欄位這麼大一個,一開始我有點訝異,想說這難道是給老人家填的不成?但是仔細看看右半邊的資訊,我突然覺得也許左邊是為了配合右邊才將表單弄這麼高,整體看起來還蠻清爽的,其實並不會太過突兀,而表單的說明文字在表單上方這樣的排列方式,在國外還蠻常見的,這樣就可以避免文字在右方長短不一的情況,也會讓版面看起來更加清爽。

頁尾設計這回事



通常這樣的頁尾除了可以幫助SEO頁面與頁面的連結性以外,還可以提升瀏覽者在頁面本身上的瀏覽順暢度,當頁面過長時,我不需要在回到上方也可以切換頁面,而這個網站的頁尾也加上了一些社群連結,提升了這個網站在社群部分的運用,讓瀏覽者可以切換到其他社群網站參與其他的事物,老實說看完網站我也不經意的點擊了這些連結,想看更多網站上沒有的資訊,可見我真的很喜歡這個網站。

其他網頁技術

Quarter Rest Studios是採用HTML5技術製作,由於有許多影片與音樂的緣故,又為了支援手機瀏覽,所以採用HTML5是最好的選擇,該網站也有設定viewport是隨設備的寬度做調整,而且在原始碼中我看到了一些wp字樣,似乎該網站是採用wordpress架構所製作的網站,並且運用了ColorBoxSoundcloudisotopeBBQ等jQuery plugin 。

網站設計評論系列文章的目的,是為了提升自我設計與新網站研究,主要的重點在於吸收新知與吸收設計方法,希望透過一連串網站的評比與討論後,可以提出對於網站設計的常見法或設計法則,提供日後相關設計的參考,歡迎網友留言一起討論該網站的設計,不管是視覺面或技術端,都非常歡迎留言提出,感謝您看完冗長的介紹與文章,如果覺得不錯歡迎與朋友分享。

留言