2015年10月20日 星期二

網頁分析第3彈---Mr.Children Official Website

本篇介紹的網站是日本搖滾天團Mr.Children的官方網站 連結http://www.mrchildren.jp

Mr.Children成立至今已經26年,是目前居日本史上唱片銷售量第二名的資深樂團,在日本及國際上佔有非常重要的地位。樂團風格清爽動人,幫許多電視劇或大大小小活動創作過歌曲,音樂及歌詞內容有別於許多著重情愛內容的流行歌曲,也抒發各種對社會、家庭、親情等的描寫,是相當有深度及能量的樂團。


進入首頁,上方左邊是樂團名稱Logo,接著是選單列。下方依序有今日消息的跑馬燈、主視覺、活動或訊息連結、最新的幾支影片及Fan Club連結,最下方則是團員們的概念照與footer。
跑馬燈還有主視覺跟影片的部分都有左右切換鍵,也可以從左上方縮圖選擇要瀏覽的目標。




我個人覺得在單頁下拉式的首頁背景顏色沒有統一,會導致頁面看起來一截一截的這點不是很好,但也不是很大的問題。



主視覺在固定時間間隔會自動向右切換,內容大概是近期樂團的相關活動訊息。







切換選單會連結到對應資訊的頁面,如live行程、影片一覽、媒體資訊、樂團紀事、專輯一覽與會員相關資訊連結等。











個人一開始進入這個網站首頁時乍看會覺得有點繁複(不知道是不是先前提到背景色沒有統一的關係),不過實際操作起來簡單的嚇人,就是非常中規中矩的網站,但樂團視覺做得很好這樣。

後面可能還會再介紹一兩個樂團(覺得不介紹不行),抱歉我真的很愛聽音樂呵呵呵。基本上樂團或歌手等音樂相關的網站可能大同小異,資訊不外乎就是一些live行程、專輯啊影音啊等等的,主要就看視覺及版面的編排,和有沒有一些別出心裁的設計。不過我會介紹的樂團都是整體視覺概念相當漂亮、有設計感的,在瀏覽網頁時總是覺得賞心悅目的那種。望大家笑納。

網站分析第三篇到這結束,感恩。




2015年10月13日 星期二

網站分析第2彈---Years & Years Official Website

Years & Years是我最近發現並且很喜歡的一個英國靈魂電子樂團。每年BBC都會從眾多新秀中選出極具潛力的新人,也就是BBC Sound Of .....,例如2008的Adele、2014的Sam Smith,前途一片看好,是非常具指標性,也會快速帶動知名度的頭銜。而BBC sound 2015就是本篇介紹的Years & Years。

來到Years & Years的官方網站,因為最近發了專輯,首先會有一層購買專輯、試聽及分享到社交或音樂網站的連結。瀏覽者可以依自己需求點選不同的通路按鍵。



如果是想要快速查詢他們的live行程或進入官網首頁,點選下方白色的按鈕就可以了。


進入首頁後,網頁整體採單頁下拉式,最上方中間是樂團的Logo,左右兩方則有社群網站的連結。下方的選單按鈕除了Store外,可以快速跳到對應的內容,還是在同一頁。

網站內容包括社群網站上大家對live演出的迴響、live演出的行程以及MV,資訊蠻簡單的。


live date跟video的部分,mouse over會變成桃紅色的。最下方的歌曲試聽連結會固定在視窗的下方。

另外,點選store的選單則會另開視窗進入購物商店,可以在裡面買到樂團的周邊商品。商店裡的選單能幫瀏覽者分類商品,方便快速尋找。左上方有返回官網的連結鈕。



官網與商店都有sign up可以登錄,似乎是能夠成為會員?但我不知道有什麼差別就是了。



這是第二篇的網頁分析,網站蠻簡單的所以內容也蠻簡單的哈哈。將來還會介紹許多我喜歡的樂團的官方網站,分析網站實為私心推薦這樣。
感謝大家 附上連結http://yearsandyearsofficial.com

2015年10月11日 星期日

網站分析第1彈---Type Center

Type Center是日本一個專為字型研究與相關議題、設計師等所架設的網站。除了分享與字型有關的文章消息外,有時也有提供免費或付費的字型可下載,以及字型相關設計師的個人介紹與資訊等等。

網頁整體採單頁下拉式的設計,用補色藍與橘做呈現。個人覺得非常非常好看,也很鮮明活潑 視覺卻不會感到刺眼,恰到好處。
最上方橘色條狀部分是跑馬燈,有日期及今明的活動消息連結。
網站Logo下方有四個選單,分別為:新聞/連載一覽/人物一覽/今日訊息
中間直線部分是時間軸,圓圈內會顯示時間,最上方的藍色圓圈則是推薦的文章。隨著時間久遠的程度,圓圈也會變小,按下最下方的圓圈能回到頂端 。
網頁底端則有搜尋欄及語言切換的功能,目前提供日韓及台灣(繁體中文)可以選擇。




值得一提的是右下方,上面寫著“字”的藍色圓圈
這個按鈕會隨捲軸上下浮動,可以讓瀏覽者依喜好切換整個網站的字型,相當有字型網站的專業感。







目前在字型的選擇上當然還是以日文字型最多樣化。


而整個網站都有做mouse over的差別設計。除了照片外,在游標移動到所有的連結上時,顏色都會切換成補色




網站的選單點擊後都與首頁是同樣的模式,只是沒有跑馬燈,今日訊息的快速連結移到左上方,選單則移到右上方 。
比較特別的人物一覽,是用設計師的代表字母或圖案,以圓圈的形式整齊地排列,視覺上非常簡單清爽






Type Center是我在找字體時無意間發現的網站,一點進去就被整個網站的顏色及視覺設計吸引,非常推薦給設計領域的人,是個很棒能吸收很多東西,也能發現好字體的網站。

現在Type Center也有繁體中文可以給台灣人閱覽,非常貼心。雖然資訊相較日文版來得少 但還是很受用




附上連結http://type.center 推薦給大家 第一篇網頁分析到這邊 謝謝。