리뉴얼페이지 소개

RENEUAL WEBSITE

노랑풍선

풍선처럼 자유롭게 날아오는 여행을 고객에게 제공하는 최우수 여행사 ‘노랑풍선’ 사이트를 리뉴얼한 프로젝트입니다.

  • Contribution 1인 프로젝트(UX 기획, UI 디자인, 퍼블리싱 100%)
  • Date 2024.04-2024.04 (약7일)
  • Tool
    • 일러스트로고
    • 피그마로고
    • html로고
    • css로고
노랑풍선 pc 목업
Free travel
with Yellow balloons

Concept

“ 노랑풍선과 함께 풍선처럼 자유롭게 여행하자! “

노랑풍선 사이트에 방문하면 여행을 가고싶다는 느낌을 받을 수 있도록 디자인하였습니다.
직선을 주로 사용하여 딱딱한 분위기의 기존의 홈페이지를
노랑풍선 메인 컬러와 일러스트 요소를 적극적으로 활용하여 여행의 설렘을 느끼도록 개편하였습니다.

Typography

여행의 경쾌한 에너지를 표현한 서체를 활용하였습니다.
볼드한 타입의 서체를 제목으로 활용하여 주목도를 높였습니다.

  • Korean TourEasy TourEasy 서체 예시
  • English TourEasy TourEasy 서체 예시

Color

메인컬러는 가볍고 자유로 이미지를 상징하는 노랑풍선의 로고 색을 메인컬러로 사용하 여행의 설렘을 상징적으로 표현하였습니다.
보조색으로는 노란색 선명한 대비감을 가지는 색들을 활용하여 경쾌하 밝은 분위기 나타냈습니다.

  • main
    노랑풍선
  • sub
    • 파랑풍선
    • 빨강풍선
    • 민트풍선
    • 검정풍선

main

여행지의 사진과 이벤트 홍보문구와 검색창으로 visual 페이지를 구성하였습니다.
이미지 사이에 검색창을 배치하여 다른 페이지로 이동하지 않고 메인페이지에서 검색을 편하게 할 수 있게 구성하였습니다.

노랑풍선 메인 페이지
Tab 메뉴를 통해 항목별로 검색을 용이하게 구현
  • 노랑풍선 메인 페이지
  • 노랑풍선 메인 페이지
  • 노랑풍선 메인 페이지

Navigation bar

스크롤를 내리면 기존의 검색창, 로그인 등이 위치한 상단의 메뉴는 숨김처리하고 주 메뉴가 고정되어 어느 페이지에서든 메뉴를 사용할 수 있게 접근성을 높였습니다.

노랑풍선 메뉴바

Event

노랑풍선의 메인 이벤트인 옐로팡딜을 첫 콘텐츠로 배치하여 홍보성을 높였습니다.
판매율을 높이기 위해 한정 잔여석을 표시하여 주목성을 이끌었습니다.

노랑풍선 이벤트

Recommendation

달마다 컨셉을 정해 메인 추천 여행지를 배치하였습니다.
누구와 여행갈 것인지 클릭하면 해당 여행객들에게 적합한 여행지 항목을 볼 수 있게 구현하였습니다.

노랑풍선 추천상품

Best

인기 여행지를 좌우로 자동 슬라이드로 구현하여 페이지에 머물기만 해도 인기 여행지와 사진, 대표 여행추천지를 살펴볼 수 있게 배치하였습니다.

노랑풍선 추천상품

Series

tv 프로그램에서 방영된 여행지를 소개하였습니다.
해시태그로 Tab메뉴를 구현하여 클릭하면 해당 프로그램마다 여행지를 살펴볼 수 있습니다.
배경에 섬과 바다의 일러스트를 배치하였고, 내용들은 여행티켓을 활용하여 디자인하여 여행가고 싶은 느낌을 받을 수 있도록 디자인하였습니다.

노랑풍선 프로그램상품
Tab 메뉴를 통해 항목별로 구분하여 구현
  • 노랑풍선 프로그램상품 sub01
  • 노랑풍선 프로그램상품 sub02
  • 노랑풍선 프로그램상품 sub03
  • 노랑풍선 프로그램상품 sub04

Homeshopping

홈쇼핑에서방영될 상품을 소개하였습니다.
위에 콘텐츠에서 일러스트 배경을 연결하여 민트색상을 상단에 배경으로 사용하여 시원한 분위기와 일러스트를 활용하여 디자인하였습니다.

노랑풍선 홈쇼핑상품

Benefit

노랑풍선에서 제공하는 제휴 혜택과 쿠폰을 배치하였습니다.
3D아이콘을 활용하였으며 디자인하였으며, 해당 항목에 마우스를 hover하면 3D아이콘이 위아래로 움직이는 애니메이션을 구현하였습니다.

노랑풍선 혜택

Review

해당 후기의 사진과 말풍선에 내용을 배치하여 디자인하였습니다.
후기의 사진을 클릭하면 배경이 해당 이미지로 변경되도록 구현하였습니다.

3D아이콘을 활용하였으며 디자인하였으며, 해당 항목에 마우스를 hover하면 3D아이콘이 위아래로 움직이는 애니메이션을 구현하였습니다.

노랑풍선 리뷰
Tab 메뉴를 통해 항목별로 구분하여 구현
  • 노랑풍선 리뷰 sub01
  • 노랑풍선 리뷰 sub02
  • 노랑풍선 리뷰 sub03

News / Customer Service

공지사항과 고객센터를 좌우로 배치하여 한눈에 내용이 파악되도록 배치하였습니다.
고객센터에는 아이콘을 사용하여 디자인하여 주목을 이끌었습니다.

노랑풍선 혜택