旅遊LOGO、名片、網站設計：機票獵人蓋瑞哥案例分析

前言

品牌的完整性可以加深讀者、消費者的信任，這篇案例是「機票獵人蓋瑞哥」的品牌設計，總共會有三個項目：LOGO 設計、名片設計、網站設計，完整介紹並記錄如何呈現三個項目的品牌視覺，讓更多人知道旅遊 LOGO 設計的過程。

想改品牌 LOGO 的原因？

原先的品牌名稱叫做「蓋瑞知道」，更改的名稱叫「機票獵人蓋瑞哥」，一開始的經營方式是以飯店體驗、旅遊推薦為主要分享內容，然而蓋瑞哥最擅長的是飛機哩程規劃，也有一套很完整的教學，所以希望品牌能凸顯機票相關的調性，可以讓讀者聯想到他是這方面的專家。

如何設計旅遊 LOGO（以機票獵人蓋瑞哥為例）

與大家分享在設計「機票獵人蓋瑞哥」的 LOGO 過程與理念：

• 確認品牌理念及方向
• 設計幾款草圖定方向
• 最後視覺完稿與配色
• LOGO 設計理念解析

確認品牌理念及方向

前面有提到修改品牌目的原因，希望以機票領袖的概念發想。我們從「機票獵人蓋瑞哥」就能辨識出他是一位熱愛旅遊，並且有機票的專業知識。

為了讓更多想出國旅遊的朋友，可以追隨蓋瑞哥，在討論過後，我們歸納幾個關鍵字：「飛機、標靶、獵人」，接下來會以這三個圖示來發想草圖。

設計幾款草圖定方向

草圖是以品牌名來發想，共有兩款分別說明：

• 草圖1：字體是結合機場入口指示箭頭，蓋瑞哥的「哥」上面停了一架飛機，以往右的方向標示飛機即將起飛，象徵著蓋瑞哥帶你玩世界。
• 草圖2：這款的字體是以飛機的機翼造型來修改，形狀是以三角形統一筆畫線條，再以標靶的圓心與「票」結合，象徵出國旅遊找機票獵人蓋瑞哥。

最後視覺完稿與配色

最後是以草圖 2 「票」上的圓圈標靶，改到「獵」字上，希望可以呼應獵人的意象，在設計上把原先的標靶圓圈加上射箭的尾巴，精準的命中紅心。

在配色上的方向，調整原先的綠色，並搭配金色調，讓視覺更沈穩。

所以我利用原先的主色，找出各種漸層色塊當作示意圖，顯示在不同色調上的視覺感受。

LOGO 設計理念解析

這款 LOGO 的元素是結合了：「機翼、飛機、標靶、箭」，再與品牌名稱「蓋瑞哥機票獵人」組合而成。

創辦人是一位熱愛旅遊，也非常擅長找到便宜機票到處旅遊，所以在蓋瑞哥的「哥」字上結合一架飛機，希望看到他就能聯想到出國旅遊。

再來機票獵人的「獵」字上結合了標靶與箭的元素，象徵獵人瞄準狩獵命中紅心，來呈現是一位出國旅遊的專家。

延伸閱讀：LOGO設計教學，你一定要懂的基本觀念

如何設計機票獵人蓋瑞哥的名片

名片設計的視覺會延續 LOGO 色調開始製作，共有三個步驟：

• 延續 LOGO 色調製作草圖
• 選定名片設計的草圖方向
• 挑選印刷材質與設計定稿

延續 LOGO 色調製作草圖

• 草圖1：因為是以出國旅遊為主題的設計，所以我想要呈現活潑趣味性，以正反面延伸背景的方式設計名片，象徵飛機跑道的意涵。
• 草圖2：正面使用簡約的邊框，將四邊打上圓角，讓整體的名片有穩中帶點俏皮的感覺；反面的設計是仿照機票的票根，營造出可以撕掉機票的意象。

選定名片設計的草圖方向

最後是以草圖 1 的正面與草圖 2 的正面做結合，以下是正反面結合後的說明：

• 正面：加上白色的雲朵，讓背景呈現出在雲層上的視野，整體更加活潑。
• 背面：保留原先的邊框，將資訊中間的分格線加上飛機圖示，可以增加一些趣味感。

挑選印刷材質與設計定稿

完成設計稿後，就可以開始來選印刷材質，這一次是實際拿了一些範本給蓋瑞哥挑選，結果太多選擇反而不知道怎麼下決定，不過剛好看到一款我們都滿喜歡的材質：「絲絨材質＋上光＋圓角」。

絲絨材質摸起來的質地，會比一般霧面來得更有質感，不過這個材質只能選一面上光，原先已經設計好雙面的上光效果，只能做取捨，後來選擇保留正面的上光，希望讓雲朵可以有透明亮光的感覺。

延伸閱讀：名片設計教學，6 個步驟帶你設計質感名片

如何設計機票獵人 蓋瑞哥的網站

機票獵人蓋瑞哥網站設計是如何建構，以下由四個步驟來分享過程：

• 討論未來經營方向
• 網站的線條稿定案
• 網站理念視覺規劃
• WordPress網站製作

討論未來經營方向

這次改版有一個主要的目標是：原先的網站規劃是以旅行行程、飯店體驗為主，希望首頁一進來可以以機票教學為主軸，所以在一開始會有一系列的機票週報、機票教學、機票文章等相關的介紹；再來以體驗、教學兩個主題分類，這樣就能明顯歸納出，不只分享好玩的旅遊，也有教學的內容知識。

延伸閱讀：如何規劃網站架構？5分鐘教你畫出心智圖

網站的線條稿定案

在規劃心智圖時提到是以機票相關的教學文章為主，因為有文章、工具、週報、課程，所以在設計線條稿時，花比較多時間在思考使用者動線，分別有三個主要頁面：

• 首頁：順序是以機票週報、課程教學、商務艙教學、文章，其次才是放上主題分類，以及旅遊文章的分享，最後在呈現媒體報導。
• 關於蓋瑞哥的介紹：原先是以文字條例的方式介紹，而我規劃的順序是，創辦人介紹、時間軸歷程規劃、大家好評、合作廠商。
• 機票相關文章分類：順序會有Banner、分類按鈕、文章介紹；可以用按鈕的方式歸類主題，讓讀者一進來清楚知道文章內容。

延伸閱讀：網站線框圖怎麼畫？5步驟帶你設計出想要的頁面

網站理念視覺規劃

規劃好線條稿就可以開始進行設計，以首頁示範並分別說明設計的想法：

• Banne：圖片使用了商務艙的圖片，在下方打上兩個大圓角，圖片的上層疊了綠色調的風格濾鏡，想傳達一進首頁可以想像自己在飛機上的臨場感。
• 機票週報：緊接著是蓋瑞哥的人像打招呼照片，我使用去背的方式，排列在圓角的框框裡，來吸引讀者對於創辦人的印象，而右邊的按鈕是蓋瑞哥希望讓讀者一進來可以點選機票週報的主題文章；整塊的設計是結合了上方的 Banner 圖片，讓整塊有一致的整體性。
• 機票主題：這一大塊的三個主題：課程點選、課程介紹、幾學文章，以乾淨的白色底加上綠色線條背景，主要想要凸顯三大塊的知識內容。
• 主題分類：以簡約兩個大圓，象徵飛機的窗戶，分別設定兩個主題，以小圖示來做簡單的分類。
• 旅遊貼文：背景的設計是以白色的底與淺綠色底做交錯，想要讓畫面有層次感，也能區分不同的主題文章。
• 媒體採訪：在每一篇媒體報導的背景設定圓角，讓視覺看起來很像是觀看小電視的報導。

延伸閱讀：網站視覺設計教學，用 Canva 設計有質感的網站

WordPress 網頁製作

在完成網站的視覺稿後，開始製作在 WordPress 上，蓋瑞哥使用的網站編輯工具是 brizy，將設計編排至編輯器上時，遇上了幾個問題：

• 後台的圖片無法顯示，需要更新以後才能看見圖片的位置是否正確，這部分會來回花比較多的時間在調整。
• 因為是以旅遊為主軸，圖片的數量會比其他領域的還要多，所以需要將圖片壓縮，以免長時間累積下，導致於網站的速度變緩慢。
• 在修改文章分類的樣式時，缺少了文章連結的設定，導致於出現文章無法點選的狀態。

專業設計方案適合給誰預約？

如何判斷自己需不需要找溫研做設計？我會將創作者切分成兩種人：

• 品牌目標明確：品牌經營 1-2 年，在內容上的定位非常明確，但是想要提升視覺的人。
• 轉換品牌路線：經營時與未來的創作內容，品牌調性不符合，需要轉換品牌定位的人。

而這次找我合作的「蓋瑞哥機票獵人」就是因為轉換品牌路線的不同，所以他找我合作的是【專業設計方案】，如果你也是想要讓品牌有一致性的創作者，歡迎點擊下方按鈕找溫研創意預約設計。