擁有自己的品牌網店後,許多品牌遇到的第一個問題,就是該如何打造一個一眼就讓顧客留下深刻印象的品牌官網。許多精美的網站、符合使用者瀏覽習慣的官網,經常都需要聘請網頁設計師、網頁前端工程師來協助打造,這對初創業的老闆來說,基本上是一筆不可能負擔的成本。

為解決店家的困擾,SHOPLINE 提供一系列由專業設計師設計的套版網站,讓店家只需要套用、選取顏色、做一些簡單的自定義設定,透過一鍵套用以及拖拉功能,就能輕鬆打造出具個人特色的品牌官網。

下面我們精選了 5 個品牌官網的網頁設計,看他們是如何利用視覺設計及套版網站,設計出令人印象深刻的網店,並整理出這些網店的設計小巧思,提供給你更多設計靈感。

一、fyber forma

fyber forma 是 2014 年創立於台灣的包袋設計品牌,運用各式特殊材質,設計出許多結合人、城市元素的設計機能服飾、配件、包款…….等等。品牌理念為「為城市行者而生」,以防水抗潮、輕盈、防撕裂等「都市所需機能」,傳達與打造出探索自我為核心的設計服飾。

fyber forma 品牌官網的網頁設計
圖一、fyber forma 品牌官網的網頁設計

品牌形象

在 fyber forma 的官網中,我們會發現基本上畫面大都是黑、白、灰三色,從首頁的大 Banner 到商品,皆是由這三色貫穿整個網站。fyber forma 利用黑白灰的色塊、大量留白呈現出簡潔俐落的風格,同時也和品牌的「現代設計」形象相呼應,讓網店看上去簡潔卻相當有力。

網站設計亮點

  • 商品資訊清楚,從面料介紹到機能特點都清楚羅列,幫助顧客在網店上也能了解商品特色。
  • 根據節慶活動將每頁商品目錄的大 Banner 換成該檔期的促銷活動資訊,讓顧客一眼就注意到並吸引下單購買。
  • 網站的色系使用、選擇與大部分商品本身的顏色相同,在購物官網、目錄頁能輕鬆打造一致性,創造出簡潔俐落的氛圍。

SHOPLINE 版型功能亮點

  • 使用 SHOPLINE Ultra Chic 版型。
  • 優惠資訊直接顯示於商品名稱的下方,讓顧客一眼就能看見免運條件、限時優惠等資訊,誘使顧客滿足優惠條件而購買更多商品。
  • 商品下方可直接點擊分享到……的按鈕,讓顧客能更簡單的將商品分享給親朋好友。
  • 查看商品資訊時,右上角會自動懸浮加入購物車按鈕,隨時提醒顧客將商品放入購物車。
Ultra Chic 版型示意呈現
圖二、Ultra Chic 版型示意呈現
Ultra Chic 版型示意呈現
圖三、Ultra Chic 版型示意呈現

繼續閱讀文章

二、ZENLET

ZENLET 是結合設計、工程、影像與行銷的台灣新創品牌,透過兼具簡約、輕巧、安全的行動錢包,曾在國際群眾募資平台 Kickstarter 上,創下三十天賣出超過 1 萬個行動錢包的亮眼成績。目前除行動錢包外,也打造出擴香器、口罩夾等多款設計商品,成功打造出兼具智慧生活與個人風格的商品與品牌形象。

ZENLET 品牌官網的網頁設計
圖四、ZENLET 品牌官網的網頁設計

品牌形象

在 ZENLET 的官網中,我們可以看到大部分的視覺皆是商品照片、情境照片,沒有其他過多的裝飾和物件。利用照片呈現設計和編排,能讓重點能聚焦在商品及使用情境上,把注目重點集中在商品的設計與功能本身。

網站設計亮點

  • 側邊留白的照片、圖片,能直接將文字壓在空白的地方上,一張 Banner 就能呈現商品細節與文字,同時兼顧美觀。
  • 在商品說明處放上動圖、影片,能幫助顧客更了解商品的使用方式和特色。
  • 於首頁以圖片 Banner 設計成商品分類入口,大圖的方式能幫助顧客快速找到所需分類,避免過多文字的負擔。

SHOPLINE 版型功能亮點

  • 使用 SHOPLINE Ultra Chic 版型。
  • 顧客評價功能,能讓初次購買的顧客參考其他人的好評與推薦,促使下單。
  • 目錄頁游標移至商品上方時,會自動顯示下一張商品圖片,讓顧客能夠在目錄頁時就看到更多商品示意圖,吸引顧客點擊。
  • 商品描述、送貨付款等資訊可切換顯示,讓顧客能聚焦在單一資訊上。
Ultra Chic 版型示意呈現
圖五、Ultra Chic 版型示意呈現
Ultra Chic 版型示意呈現
圖六、Ultra Chic 版型示意呈現
《品牌網店設計電子書》
網頁設計及瀏覽體驗對一個電商網站來說,是決定品牌第一印象的關鍵,下載此電子書讓你一個下午就能做出好看的網站!

三、小凍室太空蝦

小凍室太空蝦嚴選來自屏東里港的泰國蝦,以 30 年的養殖技術,及不常溫、不加藥養殖、不販售歿蝦的堅持,以瞬間急速真空的方式,提供顧客新鮮、口感絕佳的泰國蝦。除產地直送的新鮮泰國蝦外,小凍室太空蝦也在網站放上食譜、剝蝦小技巧等內容,讓傳統的養殖漁業,也能利用電商創造具有個人特色、新鮮可口的品牌形象。

小凍室太空蝦品牌官網的網頁設計
圖七、小凍室太空蝦品牌官網的網頁設計

品牌形象

小凍室太空蝦利用紅、灰藍兩色作為整體官網的主色,恰好呼應生蝦與熟蝦的顏色,並以活潑、鮮豔的設計風格貫穿整個官網,讓蝦及 30 年在地養殖的岳父作為整體主角,加上以有趣的圖示呈現品牌堅持、養殖技術等特色,讓顧客留下深刻印象。

網站設計亮點

  • 將蝦子、養殖場等實境的照片,與幾何元素、活潑鮮艷的色塊相互融合,打造出活潑有生命力的視覺形象。
  • 以圖示、設計展示 SGS 認證、養殖條件等產品優勢,避免過多文字讓人閱讀困難,幫助顧客理解產品特色。
  • 商品圖片中清楚標記蝦子的特徵,如有卵無卵、尺寸大小,並在圖片中以啤酒瓶做比例尺,幫助顧客想像實際大小。

SHOPLINE 版型功能亮點

  • 使用 SHOPLINE Slate 版型。
  • 售完商品會覆上一層透明灰色塊及售完字樣,幫助顧客了解商品狀況。
  • 顧客登入會員即可使用「貨到通知我」的功能,提醒顧客到貨時回頭下單。
  • 可透過 LINE、Facebook 快速加入會員,降低加入會員需填寫許多資料,導致顧客放棄加入會員的阻力。
Slate 版型示意呈現
圖八、Slate 版型示意呈現
Slate 版型示意呈現
圖九、Slate 版型示意呈現

四、物外設計 ystudio

物外設計為台灣設計、台灣製造的文具品牌,目前已銷往 36 國,在歐洲備受肯定,成為第一個進駐巴黎百年精品百貨 Le Bon Marché 樂蓬馬歇百貨的台灣文具品牌,並得過多項國際大獎。以精緻工藝、優雅細膩的外型,推出鋼筆、鋼珠筆、各式筆類及手帳,用傳承書寫溫度的姿態,打造精緻的藝術品牌。

物外設計品牌官網的網頁設計(圖上可下滑瀏覽)
圖十、物外設計品牌官網的網頁設計(圖上可下滑瀏覽)

品牌形象

物外的官網以黑白灰作為主色調,商品攝影背景則以濃厚的墨綠、深棕等色做背景,塑造出沈穩、大器的品牌形象。商品攝影也以乾淨的背景為主,盡量突出商品的特色和細節,展現商品的工藝氣息。

網站設計亮點

  • 於首頁放上詳細的顧客評價文字,藉由顧客的推薦、喜愛原因強調出品牌的價值與商品的特色,引起其他顧客對品牌好奇。
  • 提供包裝、祝賀卡片、雷射雕刻等客製服務,增加商品的客製性,及提高商品的附加價值。
  • 以人物專訪的形式記述「文字」的故事,透過人物的書寫習慣、生活看法來加深品牌於書寫上的形象,讓訪談對象的成功故事、書寫、物外三者形成強烈連結。

SHOPLINE 版型功能亮點

  • 使用 SHOPLINE Ultra Chic 版型。
  • 商品頁面會列出加購選項,可直接以加購的功能提供更多優惠給顧客選擇
  • 商品頁下方出現更多相關產品,讓更多樣的商品能在顧客眼前曝光
  • 可於首頁頁面下方嵌入 Instagram 的預覽圖,增添頁面豐富度同時吸引顧客按讚官方 Instagram。
Ultra Chic 版型示意呈現
圖十四、Ultra Chic 版型示意呈現
Ultra Chic 版型示意呈現
圖十五、Ultra Chic 版型示意呈現

結語

看完了以上五間風格品牌店家,是否對自己的品牌和官網,有了新的靈感呢?SHOPLINE 也推出「網店設計攻略手冊」,裡面除了有更多店家的版型、亮點介紹外,更有品牌塑造、設計技巧、提高轉單的秘訣等豐富內容,幫助你兼顧時尚與轉單的網店,讓顧客愛上你的品牌,買到停不下來!

👉🏻 帶我去免費下載「網店設計攻略手冊」

你覺得文章有幫助到你嗎?

歡迎給我們評論唷!

5 / 5. 共有 4

可以留下你的評論讓我們知道

延伸閱讀

追蹤電商教室,趨勢新知報你知