友愛街 U.I.J Hotel & Hostel

網站設計
友愛街 U.I.J Hotel & Hostel電腦版主視覺 友愛街 U.I.J Hotel & Hostel手機版主視覺

專業背景與分析

U.I.J Hotel & Hostel 友愛街旅館座落於台南老城核心,以旅店、青年旅舍、書店與共享空間串聯旅人的住宿與城市體驗。此次官網改版,著重重新梳理多元房型、公共場域與在地探索資訊,讓原有的空間美學與旅宿精神能在數位端被完整轉譯。透過更清晰的資訊架構與具生活感的視覺敘事,建立從「搜尋住宿」到「感受台南」的完整旅程,強化品牌辨識度與訂房體驗。
友愛街 U.I.J Hotel & Hostel網站設計介面
  • 城旅成景

    以金色、深墨綠、暖米色構成主要視覺基調,襯托 U.I.J 友愛街旅館的紅磚建築、木質家具與老城風景;搭配大量空間攝影與生活情境影像,將實體旅館的材質、光影與人文氣息轉化為數位視覺,建立具有辨識度的旅宿品牌形象。
  • 旅程策展

    不只將網站視為訂房工具,而是重新策劃住宿、閱讀、交流、飲食與城市探索等內容。透過分層資訊與情境式內容編排,引導旅客從房間延伸至公共空間,再走入友愛街與台南街區,讓網站成為旅程開始的入口。
  • 自在漫遊

    以簡潔流動的導覽結構串聯房型、設施、周邊景點與訂房資訊,降低不同旅客在選擇住宿時的資訊負擔。視覺節奏保留適度留白與呼吸感,呼應 U.I.J 友愛街旅館自在、開放的旅宿精神,也讓使用者能更直覺地探索屬於自己的台南生活。

優勢特色

首頁區塊交錯使用大面積色塊,以深色與淺色背景區分不同資訊內容,自然形成視覺層次,同時延續 U.I.J 友愛街旅館沉穩、復古而現代的品牌氣質。
友愛街 U.I.J Hotel & Hostel設計優勢介紹 - 字型-電腦版 友愛街 U.I.J Hotel & Hostel設計優勢介紹 - 字型-手機板
使用品牌識別中有重量並具人文感的英文字型,搭配現代感的黑體,讓旅館介紹等資訊清晰明瞭
友愛街 U.I.J Hotel & Hostel設計優勢介紹 - 首頁區塊-電腦版 友愛街 U.I.J Hotel & Hostel設計優勢介紹 - 首頁區塊-手機板
以細緻的標題、日期、分類與小型文字搭配留白,形成類似翻閱「一本城市旅誌」的瀏覽感受
友愛街 U.I.J Hotel & Hostel設計優勢介紹 - 內頁區塊-電腦版 友愛街 U.I.J Hotel & Hostel設計優勢介紹 - 內頁區塊-手機板
從首頁、房型、設施等頁面,皆維持一致的字體、色彩、線條與影像語言
友愛街 U.I.J Hotel & Hostel設計優勢介紹 - 頁面示意-電腦版 友愛街 U.I.J Hotel & Hostel設計優勢介紹 - 頁面示意-手機板
每個區塊透過背景色、圖片比例與版面結構變化建立節奏,使長頁瀏覽不顯單調,也呼應旅人探索城市時逐步展開的體驗

色彩規劃

  • #17312A
  • #8B6F4C
  • 友愛街 U.I.J Hotel & Hostel首頁介面設計
  • 友愛街 U.I.J Hotel & Hostel最新消息頁介面設計
  • 友愛街 U.I.J Hotel & Hostel住房專案頁介面設計
由源做視覺設計的【友愛街 U.I.J Hotel & Hostel手機版】介面情境圖
由源做視覺設計的【友愛街 U.I.J Hotel & Hostel手機版】介面情境圖

專案資訊

  • 案件客戶

    富寓安泊旅館股份有限公司
  • 服務項目

    品牌形象規劃/網站設計/RWD響應式網站/客製化網站/官網建置/SEO優化/語系切換/舊網站改版
返回
LINE
官方帳號
CONTACT
US
GO TOP