梳理完頁面版型之後，我們在所有版型當中，挑選了其中最能囊括大部分版型樣式的八個頁面，作為視覺風格提案使用，以便在決定完風格提案之後，以最快速度將版型套用至所有頁面。

透過比較新舊版的首頁就能看出來：新版更為強調頁首區塊的重要性，以大型膠囊狀設計作為風格樣式展現的重點，並在主要 Banner 區塊加強了質感呈現，整體版面也更為簡潔。

我們沿用了卡片式設計，但讓卡片在不同主題區塊中增添一些變化，呈現上較為舒適、美觀，卻又不落於死板僵硬。而在顧及專業感及科技感的同時，也適時在卡片、控制元件、Icon 上面加入一些圓角設計，讓整體顯得更為平易近人。

另外，我們也強化了頁尾區塊的功用性，讓其成為風格展現、網站層級架構、企業資訊呈現的輔助角色。

客製化產品背景色

在硬體產品介紹頁，我們特別提供了深色、淺色及灰色三種背景樣式供選擇，讓不同顏色的產品都可以有最好的呈現。

提供文章類型頁面版型參考

在版型數量最多的文章類型頁面，我們重新制定了版面的文字層級，以數篇現有頁面為基礎進行排版，提供 Vivotek 日後增加內容時的參考。在確保了一致性的前提下，也讓網站整體能夠有發展的彈性。

敏捷式開發奠基於三方的緊密配合

由於本案時間較為緊湊，我們決定採用敏捷式開發方式，也就是設計團隊每完成一個模組，開發團隊就會緊接著開始進行開發作業，這種方式必須全盤顧及每個功能模組的一致性，非常考驗客戶、設計團隊、開發團隊三方的溝通與默契，但也能以更快的節奏與效率完成專案。

針對小螢幕進行樣式調整

等到桌機版頁面都確認完成了，再進行每個頁面手機版的設計，這時會再根據小螢幕的情境做一些頁面樣式的調整，例如原先在桌機版以表格呈現的內容，在手機版就會考慮以卡片形式呈現，以符合易用性。