品牌和公司官方網站，常常是許多人接觸產品或是服務，或是再回頭探訪加深品牌和公司印象的重要工具。好的網站設計，扮演著品牌整體規劃的重要角色，因為網站就是產品和服務的延伸，是重要的品牌資產。
網站的設計又可以大概區分為前端和後端，兩大部分。前端即是網站的視覺設計，包含文字、圖片、版面構成、配色，以及按鈕和選單圖標等一般使用者會接觸到的地方；後端就是將資料動態地從伺服器取出並與前端視覺結合後呈現給消費者，也就是需要後端工程師建置資料庫的部份。
如此一來，前端設計師所設計出來的版面，才能在從對應的資料庫中取出所需要的內容。定期的維護和運作，更是長保網站的壽命。如同先前所說的，網站是品牌的呈現之一，也是品牌重要的數位資產。有好的視覺設計，也必須要有相呼應的後端技術，才能夠讓使用者有好的體驗。因此，這一次我們邀請到Process普羅品牌的合作夥伴—得寬科技研究員范聖佑來分享，從一個後端工程師角度，告訴大家平常比較少注意到的部分。
聖佑表示：「一般來說，客戶是品牌的擁有者，他們有完整的品牌概念與好的視覺設計，但是他們不知道該如何透過程式來幫自己的網站加分。因此我們根據客戶的需求規劃系統架構、撰寫程式，協助客戶提升網站的使用者體驗。」
根據多年的經驗，他對於好的網站的定義：
1.滿足目標族群：
網站必需滿足目標族群的需求，比方說針對年紀稍長的使用者，字級設定要跟著調整。設計上要現代感一點？精細一點？這些都必需先清楚目標族群的特質。
2.廣適性：
現代網站必需能夠廣泛地適應不同的裝置，也就是說可以在桌上電腦、平板、手機等不同裝置上瀏覽。在顯示與操作上也不是追求一模一樣，而是在不同裝置下有合理的操作方式。
3.最小路徑：
讓使用者可以在最短時間、按最少按鈕就完成預期的操作。
傾聽客戶需求
先前得寬科技和Process普羅品牌曾合作過兩個案子，分別是「宇智顧問」和「益安生醫」，由普羅先和業主進行策劃，定調品牌的視覺。聖佑表示，這兩個品牌的產業同樣益，因此需要同樣不同，以安生醫創建和客戶不同。以益安生醫為例，他們是一個新創的生醫品牌，需要在客戶和股東中建立品牌形象。普羅先完成規劃和建立品牌指南（Guideline），再讓得寬接手。
他分享，當時益安生醫有投資人專區的需求，必須要有股東報表、財務報告的呈現，由於該資料需同步上傳至公開資訊觀測站，而客戶希望能簡化工作流程，「我們為客戶設計了一個自動截程式，讓客戶在維護時，只需要在公開資訊觀測站上登記，就能同步呈現在他們網頁上，不用費時費力地重複更新兩個介面。」
然而宇智顧問是從事整合知識價值鏈中各要素、提供企業營運模式規劃、商業計畫諮詢等服務的公司，需要多一點對外溝通和發送資訊的功能，於是得寬科技為其設計了「電子報」的功能，讓發送電子報變得輕鬆容易，達到他們媒體宣傳、曝光的需求。
1+1>2 品牌聯名顧問手網頁設計
因此在這兩個案子裡，普羅負責做品牌和視覺設計，先和客戶接觸，根據研擬出的品牌策略與設計概念來做延伸，告知得寬科技做成網頁的基調會是如何，給予基本的靜態模板（template）表達設計的理念。聖佑表示：「因為不同的裝置有不同的解析度，得寬科技會對此靜態模板，在品牌規範下進行微調，接著在切版與程式等動態作業程序中，也會根據品牌規範在沒有設計到的部分進行延伸。」兩方彼此就專業的方面，給予回饋。他說：「當我們和客戶討論拿不定主意時，普羅可以給我們一些建議，讓客戶的需求更為清楚地被瞭解。」
關於網站設計，從後端程式工程師的角度而言，聖佑分享了幾個一般視覺設計師在網站設計上比較容易發生的盲點：
1. 許多設計師通常從視覺面出發，而不是使用者的角度來看，因此我們會從架構上來輔助他們做整理。
2. 設計師比較專注在平面或視覺上，對於實作細節，比較不了解。有時在規劃太注重於視覺呈現效果，但並不了解此效果在不同裝置不同層面上能不能完整呈現。
因此有專業網站建置設計團隊的合作是最好的狀況，他說：「你（品牌設計公司）想呈現什麼，我們在技術上支持你，做出期望的視覺效果；或是在不同裝置上可以有怎樣的替代方案，確保良好的呈現模式。」
Questions?
