一頁式網站也能打造獨特的品牌魅力 – 日本網站 Slowmuffi 分享

一頁式網站

一頁式網站 也能打造獨特的品牌魅力 – 日本網站 Slowmuffi 分享 內容綱要:

1.Slowmuffin 單頁式網站規劃

2.Slowmuffin 網站品牌配色規劃

3.Slowmuffin 原料 slider規劃

一頁式網站 也能有品牌力!Slowmuffig是日本的馬芬蛋糕品牌,不論是網站內容、企劃或是設計,都有著自己濃厚的品牌特色!看似簡單的編排方式,卻能讓人留下深刻的印象,到底是如何達成的呢?現在讓我們一起來欣賞網站吧!

Slowmuffi 單頁式網站分享:https://slowmuffin.jp/

單頁網站案例:一頁式網頁設計

• Slowmuffin 單頁式網站規劃

設計網站的時候,究竟想傳達什麼樣的品牌理念給客戶呢?以 Slowmuffi 為例,所販賣的馬芬蛋糕不使用七項過敏原料,以天然、手工的方式製作。因此網站以小孩子為出發點,強調媽媽的放心,小孩子吃得開心,文案與照片的規劃都圍繞在親子主題中,讓人倍感溫馨。

一頁式網站強調的是以最簡單明暸的資訊內容來呈現產品特色與企業價值,但由於空間限制,無法呈現較為豐富的內容,這也是一頁式網站普遍的缺點。但在 Slowmuffi 中一進入網站就以動畫描繪 Logo 與平鋪轉場特效顯示蛋糕食材,以創意性吸引瀏覽者目光,當然,精美的網站素材也是功不可沒。

一頁式網站

Slowmuffin網站品牌配色規劃

除了網站的主打目標明確外,配色上以大地色系為主,並搭配紙質的背景呈現,藉此強調天然的感覺。網站多用馬芬的大照片排版,希望藉由好吃的食物照吸引目光,提高買氣。在畫面滾動時層次分明的區塊展現,給人一種網站活潑具有生命力的感覺,襯托出享用甜點時喜悅的心情,彷彿香濃甜美的蛋糕觸手可及,Slowmuffin 將網站技術與圖片藝術結合的恰到好處,相信對網站顧客停留時間有莫大的影響力。

一頁式網站

 

Slowmuffin原料slider規劃

網頁畫面一進來的主要Banner,以彈跳的動畫呈現,讓網站增添一絲活潑氣息。右側選單下方的馬芬蛋糕讓人可以直接連結商店,導入購買流量。藉由童趣的 Slider 呈現每個馬芬蛋糕的原料,為網站增添趣味性,不再單純的靜態介紹。

而單頁網站為了避免過長的頁面資訊造成使用者視覺疲勞,最常運用的方式就是錨點連結,透過  CSS 語法定位資訊區塊位置,讓使用者可以快速到達指定區域,而 Slowmuffin 特別的是打破多數網站架構設計,以固定屬性方式將設計為菜單樣式的網站主選單放置於右上角,在整體視覺以及瀏覽者操作流程上而言,都具有畫龍點睛的效果。

一頁式網站

結語:

只要能釐清主打的目標客群,清楚傳達品牌理念,規劃好文案及圖片的呈現,一頁式的網站也可以讓人感動。不過並不是每個產品或服務都適合使用一頁式的網站呈現,還是要依據網頁架構及資料來決定喲。

今天的分享到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

架站資源相關教學文章:

簡報免費模板分享 – Glide PPT 多樣性實用簡報版型介紹

什麼是 CC0 圖庫?設計師必備高解析好圖庫推薦 – Unsplash

Google Chrome Labs Squoosh 高品質線上圖片壓縮工具介紹

網域查詢及網址申請教學 流程,快速申請專屬網址名稱,架站必學知識!

免費網頁空間 – 000webhost 免費虛擬主機,WordPress 網站架設教學

網頁配色 分析教學 – 查詢色彩建議配置一次搞定網站配色 !

網站架設知識推薦閱讀:

WordPress版本更新 – 發佈 2019 全新主題及 Gutenberg 編輯器

Google Maps API 開始收費了?解析 Google 地圖費用與規則!

免費網頁空間 架站平台比較 – WordPress,Wix,Weebly,Blogger

分享在 facebook
Facebook
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
分享在 twitter
Twitter
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top