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