1. 建立 UI 元件庫
從按鈕到圖示,再到卡片或彈出視窗,建立一個元件庫,這樣設計中所有元素的使用都是一致的。按鈕不應該是一頁上的藍色圓圈,另一頁上的紅色方塊。圖示不應該是一個頁面上是線性圖示的而另一個頁面上是彩色面型圖示 。這種網站元件的不一致性會誤導多使用者以為點選了不同的網站。
一個好的元件庫包括在設計中構建頁面所需的所有元素,這些元素適用於不同裝置的大小和規模,以及 iOS 和 Android 裝置的調整。雖然構建通用元件在前端看起來是一項繁重的工作,但是它可以使建立新頁面變得輕而易舉。
2. 建立獨特的圖片風格
WordPress 網站製作中無論您是使用照片、影片還是插畫,建立和保持影像樣式都很重要。這是一個最強大的視覺資產,多使用者將記住那些印象深刻的優秀網站或品牌。獨特的風格涉及到許多方面,如圖片的風格,過濾器的使用,影片的速度和構圖樣式等。
請看下面來自 Smashmallow 網站(https://smashmallow.com/)的多組圖片。即使分別觀看,它們也包含將影像與品牌聯絡起來的常見元素。 (不是每張圖片上的熱氣球。) 這種獨特且統一的風格形象展現了這家公司是誰,以及他們如何與多使用者進行視覺溝通的。
3. 建立動效、動畫規範
動畫元素也應該遵循一套基本的規則。他們行動快還是慢? 它們是自己移動還是僅以懸停狀態移動? 這些互動效果也有助於建立視覺識別。動畫可以為專案設定基調,使用有特定規範和風格的動畫效果,它們也可以成功傳遞品牌形象。
來自 dribbble 的雞尾酒動畫作品 (dribbble.com/shots/4818487-Mojito),杯中元素有規則地進行圓周運動。想想用同樣的視覺語言製作的其他動畫會是什麼樣子。它們也可能以同樣的迴圈方式以同樣的速度運動。
4. 運用文字加強視覺效果
視覺語言要想有效,還可以與設計中使用的實際文字標題相互配合。如果 WordPress 網站製作的文字和視覺元素不匹配,多使用者可能產生困惑。文字和圖片元素應該一起運作,能建立一個有效強調相同內容的視覺語言畫面。
史蒂芬妮的網站(https://steffany.ua/)用顏色、女性化的標誌和文字展示了她的網站的主要產品業務。這些片段共同創造了一個完整的畫面,不會因為使用了文字、圖片等多種視覺資訊而產生混亂。