ATSAI
VI設計與網站設計

2015 

ATSAI 阿蔡設計是一間擁有10多年經驗的設計公司，專注於食品產業，服務的範圍包含品牌識別設計、行銷規劃、包裝設計和平面文宣等等。多年前，我在這間公司工作，也很榮幸的，我擁有可以用設計這間公司視覺識別和網站規劃的機會。以下的將要介紹這一部分，而我在這個案子中，擔任的是規劃和視覺設計執行的角色。VI（視覺識別）的設計包含視覺識別和事務用品。網站的製作包含了網站規劃、品牌視覺拍攝規劃、視覺規劃和插畫設計。邀請您一起來欣賞吧！

設計理念

ＶＩ設計

該怎麼去表達一個設計公司的VI呢？我從公司的經營方式先去做思考。這間公司的中心思想是：當客戶和市場的橋樑。我當時就想到，如果是橋樑，不就是代表阿蔡設計、客戶和市場成為一個緊密的連結嗎？在此前提下，我將「連結」視為關鍵字，並將他轉化為符號，並將這個符號和阿蔡設計的Ａ結合，就成了目前的LOGO。
另外，為了讓「連結」這個想法可以更完整的表達，我將LOGO設計成可以做出連續圖形的方式。

設計前提

網站簡介

目標與簡介

設計公司的網站，主要是要建立客戶對公司的信賴，近一步可以有合作的機會。因此，網站可說是公司的門面，客戶看到的視覺感受和第一印象，變得十分重要。在我執行網站設計之前，阿蔡設計的網站老舊，使用上比較沒那麼流暢，作品也不齊全，作品的拍照風格也不統一。當我們利用舊網站與客戶提案上，就缺少較大的優勢。因此，新網站的設計的目的是：能提供客戶信賴感為目標，來進行設計規劃。設計的順序從網站的使用流程、作品建檔、作品拍攝風格統一，接著到歸納公司的優質、到建立網站視覺版型與元素。

阿蔡設計是提供平易近人、符合市場的設計服務的公司，因此在視覺風格上和網站規劃上，也會走向比較平穩、生活風格的設計。

我的角色

在這個案子當中，我是擔任UXUI和尋找合作廠商的角色。在ＵＸ的角色中，工作內容包含從了解公司需求、繪製資訊架構、尋找合作網站公司（架設網站）、統整作品項目和尋找合作的攝影師。另一方面也擔任視覺的角色，繪製網站ＵＩ、擔任作品的攝影藝術規劃。這些角色，對當時剛進公司的我，是一個蠻有挑戰性的任務。

設計方向

設計

資訊架構

在資訊架構上，為了讓客戶可以快速找到訊息，所以用扁平的方式去做分類。分為：首頁（歷年作品）、深入產業、合作夥伴、聯絡我們。

方法

因為網站是走比較平穩的方向，因此在使用的方法上，採用比較傳統的方法，以利使用者可以快速的上手。

• 導覽列(navigation bar)：使用置頂的方式，配合直式的文字。
• 麵包屑導航(Breadcrumb)：因為作品的數量較多，因此規劃麵包屑導航，讓使用者不迷路。
• 瀑布流式佈局（Masonry Layouts）：規劃於首頁和作品頁面，讓作品能清楚明顯的被表達。
• ＲＷＤ(Responsive Web Design)：符合各個螢幕尺寸的功能。

佈局、照片和UI

設計理念

首頁＆作品

在規劃於首頁和作品頁面，使用了瀑布流式佈局（Masonry Layouts），目的是讓讓設計的作品能清楚地被看到。而作品的內容呢？就是點選首頁的卡片，就可以進入子頁看到作品。

設計

關於我們

我將阿蔡設計的關於我的介紹，分成了四個單元：思維理念、規劃歷程、服務領域和歷年紀錄。配合這些內容，再加上infographicc、插畫和圖表說明。

關於我們的頁面中，人物介紹的插畫和排版

設計成果

結果

這個網站更新後，提升了公司的形象，得到了不少新客戶的信賴，舊客戶也因此對我們改觀。

這個案子對我而言，算是對於UXUI的啟蒙，從一開始的規劃到最後的完成，提升了我在UXUI的能力，也增加了尋找合作廠商的經驗，以及該怎麼與夥伴共同合作，因此此案對我而言意義非凡。

聯絡我們頁面

合作廠商頁面