網站設計評論#10:Forefathers Group with RWD

關於網站

Forefathers Group是一間擁有網站、品牌、開發等相關服務的團體(或工作室?),整體網站充滿了獨特的風格,強烈的馬戲團氛圍設計讓人不知不覺的想繼續看完整個網站的內容,很想知道在哪裡還會蹦出其他人物或是有趣的設計,而且選單分類明確,很快就可以獲得所需的資訊,最重要的Forefathers Group還擁有RWD設計,非常符合現今網站要跨平台的趨勢,到底Forefathers Group有多好?跟著文章一起來發掘吧!

初次遇見網站

看到Forefathers Group網站時,我當下的第一反應是Forefathers Group應該是使用Open Source再加上客制化設計所架設出來的網站,仔細一查就會發現原來是使用Drupal這套Open Source去做內容管理,接著我開始縮放瀏覽器視窗,發現Forefathers Group擁有RWD設計,這讓我對Forefathers Group這個網站產生更容厚的興趣,就好像找到另外一個像Ghost Horses一樣精彩的網站,而Forefathers Group也與電影奧茲大帝有著相同的馬戲團主題,帶著濃厚的神秘色彩,不由得想要仔細瀏覽這個網站,這樣營造氛圍的方式常常都是網站成功的原因之一。

網站色系

 #eeeae1  #231313  #72a6a7  #f14546  #ccae39 

Logo這回事

Forefathers Group的Logo裡,你可以感受濃厚的外國氛圍,而F跟S下方捲曲的形狀會聯想到音符或是中世紀時代紳士會流的細長捲曲鬍子,也會讓我聯想到到瘋狂達利。而那樣的紳士形象其實也很容易出現在電影的馬戲團情境中,通常這樣的男子都可能帶著高帽、留著鬍子,可能還帶了單片眼鏡,這樣的男子都會擔任嚮導類的工作,我想這就是為什麼在Logo上會有一個帶著單片眼鏡的眼睛之緣故,不過也有可能我想像力太過豐富了(笑)。不過有一點是確定的,那就是Forefathers Group開始於2011年,至今未滿兩年的組織,卻在網站上使用了一些復古的元素,讓我會有一種這個品牌已經經營許久的錯覺,一個單色系的LOGO居然就可以把我的時空拉到中世紀去,真的有點不可思議!而且logo外圍不規則曲線讓logo凸顯的立體感,但是又不像一般陰影那樣的死板,讓logo增添了趣味性。

選單這回事

Forefathers Group的選單裡,採用簡潔乾淨的排版,由於選項不多,字母也不多,所以很容易會有空洞的感受,在這裡Forefathers Group加上了小字說明選項裡面的東西,除了有點前情提要的作用外,也可以泥補選單過於空洞單調的排版設計。雖然說Forefathers Group在選單上並沒有製作太多的細節,但是也沒有忽略當滑鼠移過去後要有明確的變化這件事,看的出來就算是很簡潔的設計排版,依然沒有忘記最重要的細節。

在首頁主選單下方有一排文字,清楚標示出Forefathers Group的服務項目,把服務項目這個重點放在首頁的主選單下方,這樣的排版方式非常簡潔明瞭,又可以讓網友在第一時間內清楚Forefathers Group有哪些服務,對於想找Forefathers Group服務的網友來說,無疑是最棒的排版方式,省略了翻閱網站尋找服務項目的時間,又很明確地表達出Forefathers Group的服務,至少對於我這個網友來說就是非常貼心的排版設計。

在RWD的處理上,如果遇到螢幕較小,選單就會變成垂直排列,一行一個,這樣的設計方式很容易讓選單占滿了第一屏的畫面,如果今天網友是用手機來瀏覽,那非常可能會忽略首頁下方的內容就到達內頁去了,不過這裡也可以驗證選單下方的說明文字真的在視覺表現上是有尼補選單過於空洞的感受的。

頁面右上角有個藍青色信封icon,傳達著點擊信封icon就會開啟聯絡他們的方法,當網友點擊信封icon後就會重上方展開一個聯絡表單,而信封icon也會變成叉叉圖示,很容易理解點擊一下叉叉就會關閉表單。Forefathers Group的表單是踩橫向排列,一般使用桌機或筆電當然在填寫表單上不會有問題,但是如果遇到螢幕較小的平板甚至手機,那可能就沒這麼好填寫了,而Forefathers Group的聯絡表單欄位也不算多,正當我以為當我縮小視窗會看到表單從橫向轉變成直向排列時,Forefathers Group又給了我一個驚喜!

天啊!原來遇到螢幕較小的時候,聯絡表單就會替換成email連結,網友點擊後就會自動開啟mail app了,完全不需要填寫表單,這種做法還真是一絕。

大話網站主視覺

由於Forefathers Group是一個營造氛圍引人入勝的網站,所以在設計上你會發現許多地方都很像主視覺,但是又好像不是,在Forefathers Group中,主視覺其實並沒有特別突出太多,但是又會發現許多地方都有類似主視覺的設計,像這樣的分散式視覺分布是一種跳脫常見官方網站設計的手法,這樣的設計排版會讓網站不至於太過老套或死板,再加上搭配Forefathers Group網站營造的馬戲團氛圍,你真的會有一種好像有個魔術師在帶你瀏覽整個馬戲團的感受。

在首頁服務項目之後你會看到上圖這樣的區塊,這樣的區塊就像我剛剛說的,好像有個魔術師在帶你導覽這個網站,我們先不思考這個網站,一般官方網站通常要強調的點除了公司本身以外就是公司所有的服務項目或產品,這點在Forefathers Group網站來說也是一樣的,所以一開始的導覽就是從Forefathers Group本身以及服務項目等等開始介紹起,當你點了左邊類似票券形狀的按鈕之後就會到Specialties(專長) 這個頁面來,至於內頁部分我們等一下再來一起看,讓我們繼續在首頁往下看下去。

一般常在拿來當主視覺的輪動式Banner出現了!可是一般輪動式Banner都會下連結,讓滑鼠可以Click,但是奇怪了,為什麼他們家的輪動式Banner都不能Click勒?為什麼不能點擊呢?既然不能點擊就讓我們繼續往下看下去。

咦?男主角出現了嗎?在輪動Banner下方出現的是Forefathers Group的介紹,大大的金色標題寫出現在是他們品質黃金年代,右邊還有放大鏡可以切換瀏覽一些作品的細節,原來輪動式Banner無法點選是因為重點在下面,但是我覺得這裡的動態可以在更多一些,比方說點擊放大鏡左邊的原點時放大鏡會稍微轉一下之類的,對於圖片更換只有淡入淡出的效果來說,我覺得在互動視覺上的衝擊性不太夠,讓我有一種畫面很美麗,但是卻跟我有隔閡的感受,好像在說你想看更多就繼續往下看吧!

噢天啊!這種復古的馬車還真是搶眼,左邊跟右邊的選擇好像西洋版的東西軍,當滑鼠移過去會整個半邊變淡,這裡我個人覺得有點奇怪,因為一般移過去都是變深色比較多,但是為了搶眼所以一開始的顏色就頗重的,如果全部換色好像又有點不搭,所以想來想去好像還是變淡是最好的選擇,我仿佛可以看到設計師當初這既這裡那種煩惱的情境,搭配左右邊的選擇還真是可以把煩惱的氛圍發揮出來阿!下方就是客戶見證之類的東西,只要按了NEXT或BACK就會往上或往下滑動,除了左側Logo是圓形樣式外,其他部分感覺上就有點中規中矩了。

在下方客戶列表的地方,可以看到傳說中的男主角一般雜耍一邊騎單輪車,如果這部分採用動態影格動畫來處理的話,肯定可以提升這個網站的有趣程度,透過這張插圖可以與上方的插圖做呼應,讓氛圍與故事性延伸。但說實在的,我自己都覺得我剛提的動畫處理好像有點多餘,單純只是為了讓視覺上看起來比較好玩一點,對於客戶列表只是排排站的公司名稱外,我覺得Forefathers Group的插圖實力就已經將這區變得有趣了,比起客戶見證的中規中矩來說,客戶列表我覺得處理上有比客戶見證稍微好一些。

沒想到原本只是想談一下主視覺,我卻幾乎把整個首頁的講完了,這麼長的首頁如果換到手機上會是什麼情況?一般來說太長的頁面在手機上並不容易瀏覽,雖然說內容豐富是件好事,但是在螢幕較窄的手機上,太多豐富的內容,尤其是太多字的地方,都變成使用者在瀏覽內容上的困擾,所以對於Forefathers Group這麼籠長的首頁,我當然對於他們在手機上的處理方式很有興趣,沒想到Forefathers Group在這裡又是一絕,直接拿掉文字較多的客戶見證,並隱藏部分插圖,於是用手機Forefathers Group就會發現頁面比大解析度下的少很多,但是由於Forefathers Group的首頁原本就很豐富,所以即使減少內容,在手機上瀏覽也不會有一種被“截斷”或“刪除部分內容”的感受。

比較值得一提的是,當用手機瀏覽Forefathers Group首頁時,會發現輪動視覺banner部分的比例與桌機剛好相反,使得寬度較寬的圖片換到手機瀏覽時會完全看不懂輪動視覺banner要傳達的內容,即使可以透過箭頭來操作banner,也會因為版面設計上的排版緣故,導致這個區塊有遺珠汗,這個問題在RWD網站上算是很常見的問題。

內文排列方式分析

Forefathers Group在美個頻道內頁開頭都會有像上圖一樣的頻道設計,而且每個頻道單元顏色皆不同,下方會有標題說明跟小標題說明文字,以SEO角度來看個很不錯的設計方式,但在RWD下就要小心這些文字過長導致與下方間距過小而產生擁擠感。

大部份的Forefathers Group內文排列都走中規中矩路線,與首頁比起來豐富性是比較少的,但是部分細節上也是有處理的,比方說像上圖中每個頻道內文反白的顏色都使用藍青色,但如果說今天的設計是每個頻道的反白顏色就跟該頻道主色系一致,那這樣的反白的色系設計會更加到位。

Forefathers Group在作品集部分採用滑鼠移過會出現專案名稱與專案類型的互動方式,由於這裡大部份都是矩形方框的排列方式,這樣與滑鼠互動的設計雖然算常見,但是卻讓作品排列增加了幾分趣味。

作品集內頁排版的方式在手機或平板上瀏覽,視覺上感受還算舒暢,但是遇到大螢幕就會產生壓迫感,尤其是遇到網站截圖的部分,由於圖片太大又是完整頁面截圖,很容易會有到了另外一個網站的感受,雖然說這樣的大型截圖可以看見許多細節,但是除了檔案較大在網路頻寬較少的情況下會讀取較慢以外,圖片的壓迫感也會太大,如果說是採用部分截圖,然後踩兩欄式排版(當然螢幕較小的情況下可以恢復成單欄排版)應該可以解決圖片太大造成壓迫感的情況。

Forefathers Group在插圖的運用上可以說是非常不錯,比方說在講述組織的時候就以簡單的數學公式加上插圖來表現,這樣的內文排版非常使得網友不需要仔細閱讀太多文字,光是圖片就可以了解Forefathers Group是由兩個組織合併而成,比起下方個人員的介紹真的簡單很多,而Forefathers Group也非常了解自己的專長在何處,所以在人員介紹的大頭照上也做了一些插圖處理,透過色系調整讓現代人的頭像也帶有融融的復古風,所以也將網站的氛圍延伸至頭像上,可以想像如果這些頭像沒有經過插圖與色系處理,在這個畫面上就會顯得突兀、格格不入。

頁尾設計這回事

在頁尾部分放置了大大的訂閱電子報訂閱表單,在頁尾的比重顯得非常重要,傳達了Forefathers Group強力希望網友輸入mail訂閱的含義,中間的網站選單比重上就較輕。比較可惜的是頁尾左側的Latest Tweet沒有任何資料,不然這裡的社群性就會顯得很高,但是由於內容空空如也,所以也只剩下copyright的Facebook按鈕跟右下角的社群連結。

總體來說Forefathers Group的網站在氛圍表現上非常的不錯,運用大量的插圖把網站變的復古,但是內頁處理上就顯得沒有首頁來的用心,整體表現變得中規中矩了起來,部分細節上還是有處理,但是驚豔程度就沒有首頁來的高,不過光是首頁的佈局與氛圍處理上,個人就覺得還蠻值回票價了,更何況我還沒有買票呢!

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

codeschool與jQuery.com推出免費jQuery教學

codeschool與jQuery.com推出免費jQuery教學

自從上次面試被說jQuery能力不夠強之後我就有點耿耿於懷,雖然我現在會的部分在我自己的專案上是夠用的,但是還是會遇到卡關的時候,要我抱著一本書籍乖乖地念完它,這種事情在我求學的時候只出現在學測大考前一年(高中考大學),其他時間根本沒有出現過,對於抱著書本學習這件事對我來說難度很高,因為就算讀完書我也沒辦法實作出東西來,這也是為什麼我之前會去研究超速習法,希望透過超速習法改善我從念書自學這件事的難度,但畢竟我是屬於那種需要壓力的實作學習型,所以通常有個專案要我做,我就可以把東西學完,並且把專案完成,我不是自學能力差,相反的我自學能力反而還不錯,而是唸完書後要開始實際運用這件事我非常有障礙。

今天無意間看到codeschool與jQuery.com推出免費jQuery教學,透過影片快速導覽教學,然後運用大量的實作測驗來學習jQuery,對我來說基礎功打得很不穩的我還真是一大助力。原以為影片都很短應該很快就可以把全部的課程上完,沒想到還是花了好幾個小時。這個課程我覺得非常值得上,對於剛入門的新手也是非常好的教材,現在網路上很多搜尋到的jQuery教學其實都有年紀了,jQuery改版多次,尤其是這次jQuery1.9還刪了很多東西,如果你只是光看那些有點年紀的教學,又遇到jQuery1.9剛好刪了,那只能用jQuery Migrate來補上那些被刪除的東西,對網站來說多loading一個檔案當然就是多一個負擔,是時候學點新寫法了,而且中間有幾段課程還有提到怎樣撰寫jQuery會讓你的效率高一些,如果你是新手或者跟我一樣基礎功打的不太好,那我建議你跟我一樣好好的看一下這個教學,因為真的不錯,推薦給大家!

教學位置:http://try.jquery.com/

用statcounter來看2013年手機網頁設計趨勢

Statcounter Global Stats

上一篇我們說到用statcounter來看2013年桌機網頁設計趨勢,這一篇我們一樣用Statcounter Global Stats來看看行動手機網頁設計的趨勢,要看的數據部分與一篇其實差不多,還是瀏覽器、OS、解析度大小等等的相關數據。

手機瀏覽器

我們一樣先來看國際行動手機瀏覽器的分布,你可以發現在這一年內最大的變化,就是Opera失去了手機瀏覽器使用率最高的寶座,現在使用率最高的前三名是Android、iPhone、Opera,Android內建的是手機版Chrome Lite,而iPhone則是手機版的Safari,但是由於各平台有自己的商城可以安裝App,所以上述的瀏覽器不會是必定使用的,像我自己就是拿iPhone但是卻用Chrome上網,畢竟Chrome可以整合桌機跟Google帳號,所以相對來說就會比其他瀏覽器還要有優勢,如果Apple的iCloud可以早幾年出現,也許這樣的情況就會有變化了。

台灣部分,一整個就是被Android、iPhone瓜分掉了百分99%左右(有點誇張不過超過95%一定有),而且Android跟iPhone的分佈一整個就是很微妙,雖然iPhone使用率下降,但是由於iPhone5的緣故,所以現在呈現微微上升、Android微微下降的趨勢,不過我相信隨著Android再出新機(尤其是Google自家出的Nexus,我好想買台Wifi版本可是一直缺貨!),這樣的趨勢會在對調的。

手機作業系統

從國際的手機作業系統走勢圖,你可以看到Nokia的Symbian從繁榮落入一般的快速衰退情況,而iOS似乎沒有想像中的那樣熱門,倒是Android一飛沖天,我想這也許跟Android可以給廠商客制化一些設定的緣故,越多的廠商生產,自然新機發佈的時間就比較頻繁,與iPhone一年發表1~2隻的情況比起來,真的是有落差。

而台灣部分,早就被Android跟iOS攻佔許久,而他們兩個的關係也真的是非常非常的微妙,為什麼趨勢看起來都這麼的對稱呢?

手機螢幕解析度

解析度這個問題一直都是個困擾,相較桌機比起來手機的解析度根本就是亂成一團,先來看看下圖國外的手機螢幕解析度趨勢,你發現從不知道是什麼解析度與320x480解析度呈現黃金交叉,這時候我就真的覺得要感謝一下Apple,很難得有這麼規律的解析度存在,不過iphone5出了之後我就知道以後會更亂了。

而台灣的手機螢幕解析度,除了320x480之外下一位就是800x1125了,這個解析度是Android手機,至於是哪一隻我就不太清楚了,畢竟我到現在還是在用iPhone 4s,而且還是我的第一支智慧型手機呢!而且根據走勢圖,320x480與800x1125的黃金交叉快要出現了,日後解析度將會越來越大已經是擋不住的趨勢了,為了避免每次解析度改變就要改版,建議採用響應式網頁設計(Responsive Web Design)的方式來製作手機版網站,甚至可以運用響應式網頁設計(Responsive Web Design)把桌機與手機整合成一個網站,可以減少網站開發的成本。

結論

因為圖片蠻多的,所以篇幅看起來有點長,在這邊跟上一篇一樣來個簡短的手機網頁設計的趨勢整理:

  1. 手機使用的瀏覽器大部份是手機版Chrome Lite,畢竟Android原廠內建,加上Android的品牌多、市佔率高,自然會佔據大部份的手機瀏覽器市場
  2. 手機作業系統目前已Android為大宗,其次才是iOS
  3. 手機解析度現在還是以320x480為大宗,但是隨著iPhone的高淘汰率,想必很快就會到了800x1125的時代
  4. 面對手機螢幕解析度不斷改變的情況下,建議採用響應式網頁設計(Responsive Web Design)來設計網站

最後有一個小小提醒,手機界面設計不比桌機網站,因為手機操控的方式不是用滑鼠,而是用手指,所以在按鈕上的設計就要比較大顆一點才會比較好按,另外在手機上頁面很長也不會是個太大的問題,因為手指一滑就是幾千里(好啦!有點誇張,但是總比滑鼠快吧!),不過由於手機畫面還是比電腦螢幕小很多,所以建議用淺顯易懂的圖片代替大量的文字會是比較好的做法。

如果你想了解整體的網頁設計趨勢,請記得連同“用statcounter來看2013年桌機網頁設計趨勢”這篇文章一起服用喔!

用statcounter來看2013年桌機網頁設計趨勢

Statcounter Global Stats

Statcounter Global Stats是一個知名、具權威等級特性的統計數據公布網站,所統計出來的數據是非常有參考價值的,而且提供將數據存成JPG或下載CSV,你甚至可以直接將圖表嵌入網站中。我自己偶而會用這個網站來看一些統計數據上的變化,並且做一些國內與國際數據的比較,透過這樣的比較可以瞭解台灣的網路生態跟國際上的落差有多少,也可以透過這樣的數據去製作更符合台灣網路生態的網站,那平常我會看哪些數據呢?

瀏覽器

下圖是最近一年來的國際瀏覽器使用變化圖,你可以看到在去年2012年5月的時候全球使用Chrome的人數已經高過IE,到現在差距也越拉越開了,Firefox的使用者則是有流失的現象產生(我自己也是流失的人群之一)。

相較於國際的瀏覽器使用情況,台灣還是IE使用者較為多數,但是仔細看看下圖你就會發現,Chrome的使用趨勢與IE的使用趨勢呈現非常微妙的上下對稱(笑)。

看完各大瀏覽器分佈情況,當然就要關心一下各版本的瀏覽器目前情況如如何,下圖是國際各版本瀏覽器分布圖,你可以看見Chrome的版本數多得有點嚇人,但是你可以發現你看不到IE6跟IE7的出現了,這代表這兩款討厭的瀏覽器使用人數已經少的不用出現在圖表上了!

對於IE6跟IE7的消失讓我覺得值得慶祝的這件事,在台灣還沒有發生,微妙的點在於IE6跟IE7的走勢居然重疊了!IE8雖然是台灣的大宗,但是卻呈現大幅下降的走勢,Chorme版本混亂與國際間差不了多少,讓我訝異的是這張圖居然沒出現Firefox,稍微推敲一下就會覺得Chrome的版本數太過混亂應該是個大問題,但Chrome對網頁標準一向都比IE表現來的好太多了,所以至少可以不用擔心會像IE6、IE7、IE8、IE9那樣各版本都要Hack一下。

作業系統

看完一些桌機瀏覽器當然也要關心一下現在的作業系統大概情勢是怎樣,畢竟作業系統內建的瀏覽器通常都會佔有一定的使用率,有很多地方的電腦還有規定不能升級,只能一直維持原來的版本,再來是不同的OS內建字型都不同,所以瀏覽網站也會有不同的字型,有些設計師覺得沒差,但是其實還差蠻多的,像我用慣Mac OS之後,現在回去看Windows都會覺得字糊糊的或筆畫不好看,而且通常我如果用Mac展示網站給客戶看,打槍機率也比較低(笑)。

下圖是國際作業系統分佈,你可以看到Windows7整個就是大宗XP使用率下降,這裡比較要注意的是XP內建預設字體是新細明體,而Windows7則是預設微軟正黑體。

至於台灣,在2012年9月Windows7跟XP才產生了黃金交叉,到現在距離還沒有說非常遙遠。

看完瀏覽器跟作業系統,接下來要關心另外一個重要的議題,那就是解析度。

解析度

下圖是國外解析度分布,你可以看到1366x768已經超過1024x768快滿一年了,所以現在國外的網站有越做越寬的趨勢也是理所當然的。

而國內依然還是死守著1024x768不放,不過根據1024x768下降的趨勢來看,在未來一年內就會與1366x768產生黃金交叉,所以如果你想要前衛一點,你可以開始朝更寬的視野發展你的設計。

結論

因為圖片蠻多的,所以篇幅看起來有點長,在這邊簡短的整理幾個桌機網頁設計的趨勢

  1. IE瀏覽器使用在台灣還是大宗,其中以IE8最流行
  2. 次要瀏覽器在台灣是Chrome,按照國際趨勢Chrome之後會是最流行的瀏覽器
  3. 作業系統以Windows佔大多數,目前以Windows7為大宗,其次是XP
  4. Windows XP預設字體為新細名體,Window7預設字體為微軟正黑體,在畫面呈現上會有不同的感覺
  5. 目前台灣的解析度還是以1024x768為大宗,但1366x768在未來一年內就會追上了

網站設計評論#9:Ghost Horses in HTML5 and CSS3

關於網站

Ghost Horses這個詞,就會讓我想到幽靈馬車,小時候很紅的黑白郎君殘影就出現在腦海中,所以當我看到這個網站的配色時,我深深開始懷疑是不是真的跟黑白郎君有關。Ghost Horses是位於英國英格蘭曼徹斯特郡,是一個微型的網頁設計公司,他們的目標很簡單,就是創造良好的網站,並且讓網站帶來更大的效益。他們真的可以讓網站提高效益嗎?讓我們繼續看下去。

初次遇見網站

Ghost Horses的網站色系是天空藍、灰、白三種配色,第一眼看到這個網站你會覺得怎麼東西都這麼大一顆,看起來很普通,但是如果你移動了你了滑鼠,你會發現每個區塊都有它意想不到的小細節,那種可以觸動我專心瀏覽這個網站的小細節,讓Ghost Horses這個網站瞬間在我心中的喜愛指數飆高,馬上破口而出“太酷了這個!”,也難怪會得到Site of the day

網站色系

 #5da9f5  #727272  #f7f7f7

Logo這回事

你可以在Logo就看出這個網站的色系搭配,還有主要用色,因為名稱有Horses所以icon設計理所當然的是一匹馬!不知道為什麼會讓我想到很久以前的影集“黑神駒”。在名稱部分有1px沒有模糊過的淡淡陰影,讓簡單的Ghost Horses加上了立體感,而名稱下方也很直接的點出公司的重點“Website Design”,這裡我覺得比較特別的是他不是寫Web design,而是Website,所以會讓我自然而然地想到他們是設計“整體”網站使用經驗,而不是單一Web頁面,會這樣聯想主要原因就是這個網站的細節真的還不少,尤其是互動的部分,很多都是值得學習的部分。

選單這回事

在主選的部分,總共只有四個選項,這間距似乎異常的寬廣,也因為間距寬廣所以按鈕相對起來就要設計較為大顆。先前有提到Ghost Horses的細節非常多,首先看到的就是按鈕,一般按鈕頂多做到滑鼠移過去會變色,但是Ghost Horses的按鈕除了變色以外還加上了3D視覺效果,讓按鈕好像凸了出來,而這個凸起來的效果甚至還像播動畫一般,在1秒內的時間裡凸起,所以你不會有按鈕突然凸起來的突兀感,相較之下反而覺得這樣的設計非常柔和。

在中間網站標題的位置,你可以看到滑鼠移過去之後就會出現一個鐵灰色小房子,這個小房子除了有外光暈還有內陰影,讓整個房子好像皮雕一般的呈現出來,常常細節就在這種微不足道的小地方上,果然魔鬼都藏在細節裡啊!

在這裡我特別想提一下他的搜尋框設計,老實說實在太小了!雖然在主視覺上方,而且也有一隻放大鏡圖示在那邊,但是顯然的看不出來是個按鈕,所以當你滑鼠移過去之後,灰色放大鏡就會用類似拉霸遊戲那種上下捲動的方式換成了藍色放大鏡,這樣的做法可以讓你立即發現放大鏡好像可以點,接下來你點了放大鏡後,輸入框就以動態效果方式展開,游標也在輸入框前端閃爍著,如果我說到這裡你還覺得好像沒什麼,那我只能說你已經中計了!為什麼我會這樣說呢?原因在於剛剛那一連串的動作與反應都是Ghost Horses設計好的使用者行為,你根據了Ghost Horses所設計的使用者行為做了那些已經“預先”設計好的流程在行動。搜尋在Ghost Horses這個網站顯然並不是特別重要,所以一開始的灰色放大鏡當然就不需要在明顯的位置,但是如果你發現了,Ghost Horses也規劃了接下來的一連串使用者行為,看似一個好像不太好的設計,其實卻是根據了功能的重要性去做規劃,而且後續一連串的細節都沒有放過,看到這裡你是不是跟我一樣對Ghost Horses覺得越來越有趣了呢?

當你的頁面往下卷,你會發現上面的灰色bar一直都會存在,差別在於中間有沒有一匹馬,這匹馬看起來好像只是網站Logo在宣誓品牌,但是實際上,當你滑鼠移上那匹馬,你會看到“Bake to top”的字樣,是的沒錯,這匹小馬可以幫助你迅速回到頁面最上方,雖然設計的位置不太順手,但是當你發現後會覺得還蠻貼心的。

大話網站主視覺

光看到Ghost Horses的主視覺所佔領的疆土這麼遼闊,就會知道這東西真的是超級無敵重要,Ghost Horses的主視覺包含兩個部分,第一個部分是最新消息,內容是最新案例,當滑鼠移過去就會出現該專案名稱,點擊後就可以看到詳細介紹,而第二個部分是核心理念與服務項目,這部分可以做左右切換,一開始看到的就是核心理念:創意、聰明、熱愛、汗流浹背,看得出來就是為了專案會認真地擠出一切的團隊,之後的服務項目幾乎就是一般網頁公司會擁有的部分。比較特別的是中間那匹馬,當你滑鼠移過去之後會有好玩的視覺效果,這樣設計巧妙的把上下兩區塊給融合在一起,減少了區塊感,也讓上下兩個主題不一樣的區塊變的更加擁有整體性。

內文排列方式分析

在主視覺下方的排版,看似簡單,卻也藏有很多細節,比方說上圖的手就會一直來回擺動,你就會不自覺的想看向那個地方,而每個區塊上方的頁簽大標題,當你滑鼠移過去就會拉長,標題處會看到文字有白色1px的描邊再加上陰影,讓文章標題更加凸顯,滑鼠移過也會改變文字顏色,而下方一條短線區隔了內文與標題,在內文最後有藍色的”Read More“,讓你可以看更多的文章,當滑鼠移到”Read More“也會有動態效果,讓你聚焦在”Read More“上。大標題、標題、內文三個部分的文字比例也可以看出其重要性,內文行距也有整整一行高,仔細看看這段文字,上面寫著”我們不是網頁設計工廠“,明確點出Ghost Horses與其他網頁設計公司不同的地方,在文案撰寫上也是非常用心。

內頁標題非常明顯,就如同整體網站的大氣設計,內文採用左右兩欄,左邊是小標題右邊是內容,差別在於有加粗或沒有。

About裡面你可以看到一個類似和多繽紛樂的東西,組合出來的東西基本上都是他們對Websites的執著與熱情,這樣的互動的確還蠻有趣的,而且在網站上似乎不常見,讓Ghost Horses這個網站更加有趣了。

同樣的About裡頭有兩欄內容也有三欄內容,所以你看到這兩種排列方式在Ghost Horses是如何處理的,比較特別的是,上圖上半部的三欄標題,那淺淺的icon底圖是有配合各標題去做特殊設計的,所以雖然大致上都長一樣,但是在細節上還是有些微不同的喔。

Portfolio裡你可以看到作品的排列方式,當滑鼠移過去就會有該專案的名稱,這裡的設計與主視覺還蠻類似的,但是呈現方式就沒有向主視覺這麼的凸顯,走清淡路線,這樣的設計是為了怕搶走最上方的藍色彩帶標題,你可以看出這個部分各區塊的權重,這樣的權重設計還蠻容易被設計師忽略的,如果說滑鼠移過去的六角形與彩帶顏色一樣,那這樣的情況下眼睛就會有短暫的不知道重點在哪裡,或者把這六角形的重要性看的以為跟標題一樣重,雖然只有滑鼠移過去才會產生這樣的問題,但是由此就可以看出Ghost Horses對細節的掌握程度有多高。

News裡你看到另外一種兩欄式排列方式,當然右手邊的圖如果滑鼠移上去,你還是會看到六角形出現,但是不同的是,上面是寫Read More,而當你滑鼠移到某篇文章上時,整篇文章會被框起來,讓你聚焦在一篇文章之中,這樣的細節其實不常見,Ghost Horses運用這樣的方式區隔了文章與文章之間,讓原本無趣的條列式排列變的有趣。

表單設計這回事

在表單排列方式還蠻中規中矩的,下拉選單做得跟一般input text的外觀一樣,要點擊後才會出現下拉選項,另外就是有做input focus的部分,這也是常常會被設計師忽略的部分,因為很容易覺得“反正點下去就會出現游標了”就忽略這樣的細節處理,當然如果真的不處理,在這裡我也覺得只有0.5分的差別就是了。

頁尾設計這回事

Ghost Horses的頁尾充滿了許多社群的元素,像是TwitterLast.FM以及設計師社群Dribbble,你可以在其他社群上也找到Ghost Horses。頁尾的配色非常沈穩,而藍色六角形白馬logo扮演著句點的角色,點擊後也會立即回到上方,呼應了最上方的Logo,讓網站更具整體性。很多網站常常拉到Footer會沒辦法辨識出是哪個網站,甚至同一個設計師出品的網站Footer常常都長一樣,這反而讓Footer淪為容易忽略的角落,這是很可惜的一件事。而Ghost Horses就是一個很好的Footer設計範例,簡單的一個Logo擺設就可以做到前後呼應,而且透過這樣的設計排版,讓下方的文字不會跟頁尾的沈重配色有疏離感,這也是我覺得Ghost Horses處理很好的地方。

其他網頁技術(CSS、jQuery等)

Ghost Horses的網站有徹底的製作出響應式設計,針對480px、600px、768px、992px、1200px、1380px甚至Apple的Retina螢幕,都有其對應的CSS。Ghost Horses採用Wordpress作為內容管理後台,並且採用HTML5,整體來說不管是針對手機或是各式瀏覽器都有非常好的相容性,如果對於跨瀏覽器或跨手機瀏覽器有需要參考的網站,Ghost Horses會是不錯的參考網站。

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

[工具]英文、中文亂數假文產生器

不管是在企劃網站或是設計頁面,常常都會需要用到假文,通常這個時候我都會選擇找篇新文來貼,因為新聞有圖、有標題、有內文,所以遇到需要排出感覺得區塊,新聞就可以符合全部的需求,但是新聞也有新聞的壞處,比方說內容一看就會讓人引發聯想,不管是好是壞,都跟網站沒關係,自然也會模糊焦點,所以這時候如果有個內容亂七八糟,但是又可以排出區塊所需的內容,那真的還蠻不錯的,所以今天就介紹三個亂數假文產生器給大家,下次需要假字的時候就不用辛苦找半天囉!

1. Lorem Ipsum

Lorem Ipsum是一個外文文章產生器,它可以產生出38國語言的內文,但是就是沒有中文!所以除了中文以外的語言需求,你可以考慮一下這個網站。

2. 亂數假文產生器

這是一個非常簡單、畫面非常單純的亂數假文產生器,你可以選擇100、200、300到1000等不同的長度,內容不容易出現重複不斷repeat的詞句,算是品質還不錯的亂數假文產生器,我大部份也是使用這個比較多,另外他也有附屬亂數標題產生器,也很不錯用喔!

3. 一用就愛上的假文產生器 Moretext

跟上一個亂數假文產生器做比較會發現Moretext比較容易出現重複的詞句,而且也沒有辦法調整內文長短,不過制作Moretext的是和多股份有限公司,如果你玩過和多繽紛樂或用過Compass.app等等的產品,應該對這間公司的產物會覺得有一定的品質,對吧!

網站設計評論#8:CSSPiffle Pitch Deck in HTML5 and CSS3

 

關於網站

CssPiffle是一個線上CSS編輯工具,透過圖形界面讓你不需看懂CSS也可以編輯出漂亮的頁面。它在網站上點出了Photoshop在哪些地方的細節是網頁上無法層限,點出了Photoshop其實不適合用在網頁設計上,但是直接弄成網頁又要不斷的Code、debug、Code、debug,相較之下就麻煩許多,所以CssPiffle就是直接讓你透過界面化編輯,不用撰寫Html,直接產出Code,讓你不用一直Code、debug、Code、debug的迴圈之中。

初次遇見網站

第一次到CssPiffle就被它的開場loading給嚇到,因為除了白茫茫一片以外只有一個不斷淡入但出的logo,什麼東西都看不到,一直到loading完,出現的畫面居然是這樣的精簡又有創意,整個網站整體來說非常簡單,但是看起來卻非常精美,而且畫面與技術上的搭配可以混合出像CssPiffle這樣的視覺效果,也可以說是非常不容易,不只是技術,還要很清晰的資料脈絡與簡潔設計的能力才能達到這樣的成果,話不多說,就趕快來分析一下CssPiffle這個網站吧!

網站色系

 #149be1  #d51705  #fafdff 

Logo這回事

CssPiffle的LOGO採用3D視覺風格,通常這樣的風格會讓人聯想到跳出框架、創新、不平凡等關鍵字組,也因為這樣的3D視覺容易帶來衝突的感受,再加上CssPiffle在Logo上方採用紅色處理了一個角落,會有突破重圍的或集中施力點的感受,對CssPiffle這樣的創新工具來說的確是蠻符合他們的產品特質,而藍色系通常都會聯想到科技,紅色則是熱情,淺色系通常都會有年輕、新意的涵義,所以在色系上的選擇就會聯想到這是帶有熱情的新科技產品的涵義。

選單這回事

CssPiffle的選單非常的單純,採用純文字平均分配詞距來排列,然後用紅色按鈕形式代表目前所在位置,並且固定於整體頁面上方,不會隨著滾動而消失,會這樣處理主選單主要是因為CssPiffle全部只有一個頁面,這也是為什麼一開始需要loading的原因,由於整體內容都會一次loading進來,所以為了不讓網友過度等待,才做了loading畫面,接著主選單的固定也可以讓網友明確知道目前看到哪裡,後面還有多少內容等等,除了選單功能也有目錄索引的效果。不過如果滑鼠停止移動一陣子,選單就會隱藏,當滑數移動,選單就又會出現。

大話網站主視覺

CssPiffle的主視覺非常的簡單、清楚,中央大大的Logo讓你無法忘記它的品牌,下方的文字加的恰到好處,左右兩邊的手繪風圖案,仔細觀看就會發現很多事瀏覽器、螢幕、曲線、html標籤等等與網站相關的內容,背景模糊的襯底、周圍再加上霧化,帶出了整體的氛圍,並且凸顯了中央的3D視覺風格logo,這樣的視覺設計佈局,你怎麼可能不被它所吸引呢?

內文排列方式分析

一頁式網站設計的要點就是在每個區塊都要可以吸引網友的注目,不管是有有趣的還是吸引人的方式,都要讓網友聚焦在當前的頁面上,所以頁面資訊勢必是精簡在精簡過的東西,而CssPiffle的內文排版除了點出細節以外,文字說明部分接採用手寫效果,在內容精簡又做特殊效果處理的情況下,會讓人不由得想看完每一個字,仔細觀看每個箭頭說得說明到底是什麼涵義,而左方的Photoshop工具列則可以達到吸引目標網友群的功能,畢竟這樣的工具是提供給專業人士,所以帶入專業人士熟悉的畫面勢必會讓專業人士更加注目。

在上訴同樣的區塊中設有左右箭頭可以切換內容,由於網站是採一頁式,所以當區塊內的資訊不是一個畫面就可以說明完的時候,改用橫向左右切換的方式是最佳的選擇,當然在這樣的區塊中你可以看到CSS code,更加可以吸引專業人士的注目,而且這個區塊還做了一些視覺上動態效果處理,下方說明文字也會跟著效果次數而增加,彷彿就好像目前的畫面正在跟你對話一般,唯一比較可惜的事這個網站的高度設定比我目前的解析度(1440X900)還高,我是來回看了幾次才發現這個有趣的設計。

依然在同區塊中,你可以看到畫面上有兩個黑色圓圈,就跟apple目前在介紹Retina的方式一樣,透過局部放大與左右對比可以明顯看出兩邊的差異,而且還可以達到與網友互動的效果,雖然不會回饋給網站,但卻可以在網友心中留下深刻的印象。

在產品介紹的部分採用三欄式排列,明顯讓網友一眼就可以看到操作介面、實際畫面、CSS code的部分,依然保持簡潔、乾淨、清晰的設計。

在案例介紹部分也是一絕,直接連承載的形式也都一同展示出來,背景的霧化效果再次把氛圍營造出來,不管是螢幕、iPhone、iPad展示都有,更妙的是點擊該案例還會跳出模擬實機與內容的demo頁面,利用實際產品的吸睛程度帶出中心的結果畫面,效果就是好上加好。

工作人員名單採用了兩欄式排列,由於是區塊呈現,所以不會與剛剛的三欄式有衝突,而照片圓角框部分也讓這區塊不至於太過嚴肅,顯得活潑了許多。

老實說這個Business的區塊是我最看不懂得部分,但是雖然看不懂卻覺得還蠻酷的,大概可以知道想表達的就是購物籃中可以裝各式各樣在設計中所需的東西。

Market部分更是一絕,將數字圖像化,並且將重點數字加粗或加上顏色,這個部分的效果運用在簡報上也是非常不錯的噢!

直接在網站中放置timeline讓網友清楚看到發展歷程,這招真的很棒!你想不注意都難,但是如果沒有背景的霧化創造氛圍,那這個區塊也會若許多,這就是精簡設計最厲害的地方,多一分太多,少一分太少!

表單設計這回事

CssPiffle的表單非常簡單,只有兩欄,單純的不得了,上方三個圓圈除了mail資訊外還有社群功能,最後用紅色的send按鈕,明顯絕對不會找不到!

其他網頁技術(CSS、jQuery等)

CssPiffle是一個HTML5+CSS3的網站,看似很炫的效果其實不外乎也還是用javascript做製作出來的,在頁面結構上除了Html5的hack項目與modernizr(檢測瀏覽測是否支援HTML5標籤)是放在meta之前匯入以外,其餘的javascript都放在頁尾匯入,通常這樣放置可以讓網站內容讀取更加快速,當然就會延緩javascript的執行時間,當然如果需要大量匯入javascript相關資源,那還是建議放在頁尾會比較好。

CssPiffle本身有用到Google的fonts api,javacript是採用jQuery相關資源,但是幾乎所有的class都是自行開發的,沒看到其他像是直接取用線上資源的部分,比方說區塊的路徑部分就是自行辨別網址#號後面的單詞來判斷應該停留在哪個內容區塊,或是選單在滑鼠不動後多久影藏接著移動又出現等等,透過這些javascript class觀察看來,CssPiffle本身的coding能力應該是非常好的,已經超出我可以介紹的範圍了,如果對運用jQuery開發class或套件有興趣的朋友應該是可以參考到很多內容才對。

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

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

關於網站

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 。

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

網站設計評論#6:Cherry Blossom 蛋糕店 -HTML5網站

關於網站

Cherry Blossom是一間手工蛋糕店,所以提供客制化蛋糕服務,不管是婚禮、生日、畢業、紀念、退休等等,只要是值得慶祝的日子,都一定少不了蛋糕這個焦點,而這家蛋糕店位於紐西蘭皇后鎮,酷吧!我們今天看的是一個紐西蘭的網站!

初次遇見網站

Cherry Blossom這個網站看起來非常一般,但是你絕對想不到這是一個HTML5的網站!最近跟很多朋友聊天,大家似乎都以為HTML5的網站就是很絢麗,會有很多動畫飛來飛去,跑來跑去,很多效果都比Flash好,坦白說,真正的HTML5網站,其實很多地方看起來都跟現在的HTML4或XHTML網站並沒有落差太多,所以我覺得Cherry Blossom就是一個很好的例子,它真的是HTML5,只是我如果沒提,我想很多人也不會發現到這點。

網站色系

 #e38a9e  #4e3226  #ffffff 

Cherry Blossom字面上的翻譯就是櫻花,而這個網站色系也就採用櫻花樹的配色,櫻花花朵的粉紅色與櫻花樹幹的咖啡色,搭配白色,就會不自覺的讓人聯想到日本冬天櫻花盛開的感覺。

Logo這回事

你可以看到Cherry Blossom的圖形部分Logo是已精簡的三個弧線代表三層蛋糕,在上面點綴著櫻花樹枝,下方的字體會讓我想到提姆波頓的地獄新娘,從動畫中衍生出來的字體Corpse Bride Font,不過Corpse Bride Font有著重重的陰沈感,但是Cherry Blossom卻讓人覺得可愛、有趣、又特別!但個人覺得OCCASIONAL CAKES字樣如果可以換個字體可能會比較適合,現在看起來有點突兀,就是有那麼一點無法融入上方的感覺。

選單這回事

Cherry Blossom的選單非常單純,是純文字形式,當前頁會顯示白色,滑鼠移過去其他連結也會從咖啡色選變成白色,看似簡單的調換顏色,很多網站卻會忘了做,最後面的Facebook滑鼠移過去會變成Facebook的藍色,點擊後會跳出新視窗連結到Cherry Blossom的粉絲頁,目前有1,389位粉絲,還算不錯。

內文排列方式分析

Cherry Blossom的內文排列其實還蠻粗魯的,很像把字貼上就搞定了,所以在很多頁面都可以看到需要改進的地方,唯一比較OK的部分大概就是首頁了。

標題處字體明顯變大很多,一點就可以看見標題的訴求,右方的圖片搭配合宜,使用櫻花點綴蛋糕的商品圖片可以讓Cherry Blossom的品牌名稱具體化,並加深在網友的腦海中。標題與內文的間距明顯比內文段落間距大,幾乎是1倍的落差,很多時候常常看到台灣的頁面標題行距與內文一樣大,這樣的排列會讓內文與標題中間有擁擠感,如果行距隨著字體大小一同作調整,那說不出來的奇怪或擁擠感就會消失了。

表單設計這回事

在Contact us這一頁可以看到一個聯絡表單,表單排列靠左對齊,上方兩排表單的寬度與下方的多行textarea一樣寬,所以會達到齊頭齊尾效果,不會尾端突然凹進去或凸出來,唯一比較可惜的就是畫面左下角空白區塊太大,如果可以放張產品圖或是地圖應該都可以更加豐富這一個頁面。

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

網站設計評論#5:大友克洋原畫GENGA展覽

關於網站

大友克洋是日本知名漫畫家與動畫導演,在1988年《阿基拉》這部作品發佈後開始揚名國際,押井守的《攻殼機動隊》也深深受大友克揚洋的《阿基拉》影響,在台灣近期較讓人印象深刻的動畫片莫屬於2004年的《蒸氣男孩》,而今天這個網站就是大友克洋原畫GENGA展覽的官方網站,這次展覽除了展示大友克洋生平與原畫以外,還有將收入部分作為公益鎮災使用,而且展覽採用預約制,沒有預約無法進入觀看展覽,所以現在可以說是動漫迷爭相搶訂預約的狀況噢!

初次遇見網站

剛到大友克洋原畫GENGA展的官方網站,映入眼簾的就是大友克洋的原畫圖稿,那樣的背景很容易會吸引動漫迷注意,所以透過背景的運用就可以抓住目標網友的眼睛,這樣的作法既簡潔又明確,是個很棒的做法,運用原畫把主題很清楚的呈現出來,在那樣黑白灰的畫面加上了代表注意的紅色,就可以把區塊與內容完整呈現出來,所以在整體第一屏的設計是非常優質的,如果在快速的往下捲動,你會發現背景的圖案會有層疊,這與傳統的背景呈現不同,比較不會有圖片突然換圖片的突兀感受,反而增加了一種流動感,而這個流動感又與網站的瀏覽動線是有一致性的,就會讓網友在瀏覽網站的過程更加的順利也更加的順眼!

網站色系

 #d72130  #353535  #ffffff 

灰色與白色主要是原畫謄上螢幕的色彩,而紅色就是整體網站區塊的主色系,但是由於正紅色太過搶眼,所以網站的紅色除了用淡一點的紅色以外,還做了一點透明效果處理,除了讓背景可以透到前面來以外,也可以消除一部分紅色的緊張感。

Logo這回事

雖然這個網站是一個展覽網站,不會有顯眼的特殊Logo設計,但是為了呈現出主題,你可以發現在第一屏就有很顯眼的“大友克洋原畫GENGA展”字樣,還帶有日期、時間與地點,對於一個展覽來說,展覽名稱、展覽日期、展覽時間與展覽地點這四個部分是非常重要,而且缺一不可,另外我們可以看到網站有座一個小小的ico圖示,可以很清晰的看見大友克洋四個字,加上網站Title又重復了一次,這在主題性明確的網站上是很容易發現卻也是很容易忽略的一個小部分。

選單設計這回事

大友克洋原畫GENGA展的選單設計其實非常單純,而且設計比較非常的小,你可以看到選單被小小的放在左上角,原因在於整體網站幾乎都是用直線瀏覽方式,除了消息公佈以外,剩下的內容都在同一個頁面中做流動,所以左上角的主選單反而變成一個導引,當然選單的重要性就沒有這麼高,設計比重上自然就會顯得區塊比較小,但是由於這個區塊是固定在左上角,所以只要一捲動頁面,就會發現選單的存在,更加讓選單友導引的意味存在,在資料量較小的頁面,這樣的選單設計是非常合宜的,並且看起來非常大氣。

內文排列方式分析

內文排版以整齊的靠左對齊為主,直線型排版標題字體大小是內文的三倍大,而標題與內文的行距是內文行距的兩倍大小,這樣的字體大小比例很常在日本網站看到。而左右兩欄式排版,標題部分就僅止於左邊標題加租,可能是因為整體設計上是一個表格巢狀排列的緣故。相較於其它網站,大友克洋原畫GENGA展的官方網站內文排版就相對比較沒有變化。

表單設計這回事

很遺憾的在這個網站翻來翻去就是沒看到表單的部分,但是這個網站有一個特別的部份是,最新消息採用blog方式呈現,由於Blog很容易融合所謂的社群媒體,所以可以看到在每篇文章最上方都會出現社群分享按鈕,總共有twitter、hatena、facebook、google +1、mixi四家社群,可以由此觀察出目前日本較有人氣的社群媒體有哪些,在透過觀察分享按鈕上的數字呈現,可以發現使用Facebook分享的人數較多,再來是twitter。

頁尾設計這回事

一般展覽或活動的頁尾通常都會有很多贊助商或協辦單位的Logo,各家廠商Logo一但放上就會顯得異常繽紛,常常到頁尾反而搶走了整個網站的重點,但是在大友克洋原畫GENGA展的官方網站中卻採用文字連結方式,除了可以詳細交代初每家廠商或單位以外,可避免了頁尾的紛亂情況,讓整體重點依然保留在網站中。

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