DIOR Website Renewal

디올 웹사이트 리뉴얼 프로젝트

  • #웹사이트 리뉴얼
  • #반응형 웹디자인
  • 작업기간 2021.02 - 03
  • 기여도 개인작업 100%

Overview

  • 정적인 기존의 디올 웹사이트와 다르게 자유로움과 깔끔함을 적절하게 조합하여 레이아웃을 구성하고,
    명품 브랜드만의 고급스러운 이미지들을 우선적으로 보여줌으로써 아이덴티티를 강조하고자 했습니다.
    또한, 각 카테고리에 어울리는 라인아트를 직접 그려 배치하여 기존과 차별화를 두어서 리뉴얼했습니다.
  • 정적인 기존의 디올 웹사이트와 다르게 자유로움과
    깔끔함을 적절하게 조합하여 레이아웃을 구성하고,
    명품 브랜드만의 고급스러운 이미지들을 우선적으로
    보여줌으로써 아이덴티티를 강조하고자 했습니다.
    또한, 각 카테고리에 어울리는 라인아트를 직접 그려
    배치하여 기존과 차별화를 두어서 리뉴얼했습니다.

Typography

  • Title 영문 서체 _ 고급스러운 느낌 강조
    CorMorant Garamond
  • 영/국문 서체 _ 깔끔하고 높은 가독성

    Roboto

    Noto Sans KR - 다림

Grid system

  • '%'를 단위로, 화면 비율에 반응하여 보여지도록 레이아웃을 구성했습니다.
  • '%'를 단위로, 화면 비율에 반응하여 보여지도록
    레이아웃을 구성했습니다.

WEB _ Main page

  • 시원스러운 느낌의 영상을 full screen으로 배치하고,
    브랜드 스토리를 같은 페이지에 자유롭게 배치하여 스크롤 하면 볼 수 있도록 구성했습니다.
    또한, 메인 페이지에서 메뉴로 넘어갈 수 있도록 버튼을 만들었습니다.
  • 시원스러운 느낌의 영상을 full screen으로 배치하고,
    브랜드 스토리를 같은 페이지에 자유롭게 배치하여
    스크롤 하면 바로 볼 수 있도록 구성했습니다.
    또한, 메인 페이지에서 메뉴로 넘어갈 수 있도록
    버튼을 만들었습니다.

WEB _ Main Menu

  • 기존에는 메뉴를 나타내는 방식이 슬라이드 다운되어 메뉴 전체가 나타나도록 했다면,
    리뉴얼한 메뉴는 크게 여성/남성/향수 등 5개로 나누어 집중적으로 볼 수 있도록 했고,
    각 메뉴를 잘 나타낼 수 있는 목업 이미지에 애니메이션을 주어 디자인했습니다.
  • 기존에는 메뉴를 나타내는 방식이 슬라이드 다운되어
    메뉴 전체가 나타나도록 했다면, 리뉴얼한 메뉴는
    크게 여성/남성/향수 등 5개로 나누어 집중적으로
    볼 수 있도록 했고, 각 메뉴를 잘 나타낼 수 있는 목업
    이미지에 애니메이션을 주어 디자인했습니다.

Menu bar

메뉴를 클릭하면 바로가기 컨텐츠가 나타납니다.

WEB _ Sub page

  • 이미지를 자유롭게 배치하고 상품보다는 카테고리에 해당하는 디올의 고급스러운 이미지를
    우선적으로 배치하여 아이덴티티를 더욱 확실하게 보여줍니다.
  • 이미지를 자유롭게 배치하고 상품보다는 카테고리에
    해당하는 디올의 고급스러운 이미지를 우선적으로
    배치하여 아이덴티티를 더욱 확실하게 보여줍니다.

illustration

각 카테고리의 컨셉을 잘 보여줄 수 있는
일러스트(라인아트)를 함께 배치했습니다.

WEB _ Sub menu

  • 기존에는 여성/남성 등 관련 서브 메뉴를 한 곳에 보여주었다면,
    리뉴얼된 메뉴는 각각 분류하여 깔끔하게 정리했습니다.
  • 기존에는 여성/남성 등 관련 서브 메뉴를 한 곳에
    보여주었다면, 리뉴얼된 메뉴는 각각 분류하여
    깔끔하게 정리했습니다.

Menu button

메뉴바를 hover하면 '+'로 변하도록 애미메이션을 추가했습니다.

메뉴바를 hover하면 '+'로 변하도록
애미메이션을 추가했습니다.

  • Women menu
  • Men menu
  • Perfume menu
  • Make-up menu
  • Skin menu

WEB _ Product list

  • 어떤 상품인지 간단하게 이름 정도만 기입하고 상품 정렬을 간결하게 정리했습니다.
    또한, hover하면 이미지가 확대됨으로써 동적인 느낌을 줍니다.
  • 어떤 상품인지 간단하게 이름 정도만 기입하고
    상품 정렬을 간결하게 정리했습니다.
    또한, hover하면 이미지가 확대됨으로써
    동적인 느낌을 줍니다.

WEB _ Purchase page

  • 상품을 클릭하면 새로운 창으로 넘어가는 것이 아닌, 같은 페이지에서 보여지는 방식으로 하여
    빠르고 간단하되, 상세컷을 보기 쉽게 배치하여 구매를 진행할 수 있도록 유도했습니다.
  • 상품을 클릭하면 새로운 창으로 넘어가는 것이 아닌,
    같은 페이지에서 보여지는 방식으로 하여 빠르고
    간단하되, 상세컷을 보기 쉽게 배치하여 구매를
    진행할 수 있도록 유도했습니다.

WEB _ Detail

Home button

5개 메인 메뉴 -> 메인 index

Top _ DIOR logo button

해당 메뉴 첫페이지

More button

Responsive _ ipad

  • ipad로 보는 ‘DIOR’ 반응형 웹사이트입니다.

Responsive _ Mobile phone

  • iphone X로 보는 ‘DIOR’ 반응형 웹사이트 입니다.

Mobile phone

불필요한 요소는 제거하여 모바일에 최적화된 반응형으로 디자인했습니다.

불필요한 요소는 제거하여
모바일에 최적화된 반응형으로 디자인했습니다.