PORTFOLIO UX·UI Web & App Design

아로마티카

  • Design concept

    • Use Tool

      Adobe Potoshop

    • Color

    • Font

      PretendardVaria

    • contribution

      Design 100%

  • Click 전체보기

    Main

    • 상단 메뉴 배경

      하단으로 스크롤시
      배경색상이 나타나도록 해
      글자의 가독성을 높였습니다.

    • Visual Video

      차분하고깨끗한 컨셉의
      동영상을 활용해 브랜드의 친환경
      이미지를 살리고자 하였습니다.

    • 제품에 대한 집중

      중립적인 색상과 간결한 제품 배치를 통해
      제품의 주요 특징에 집중할 수 있게 디자인
      하였습니다.

    • 색감의 조화와 상호작용

      제품 카테고리별 색감을 맞춰 조화롭게 디자인하였습니다.
      마우스 오버시 각 원형은 사각, 사각은 원형으로 바뀌는
      인터렉티브요소를 추가하여 사용자와의 상호작용을 강화하였습니다.

    • 생동감 부여

      SNS 컨텐츠는 위 → 아래로 계속
      움직이도록 만들고, 브랜드의아이덴티티를
      나타내는 카피는 좌 → 우로 움직이도록 하여
      사이트의생동감을높이고자하였습니다.

  • Sub

    • 제품 비주얼 강조 및 직관적 버튼

      배경에 비주얼적인 배경을 깔고
      선명도를 조절하여 제품이미지가
      돋보이도록 하였습니다.

    • 선택적 정보를 통한 편의성 제공

      사용자 리뷰를 강조하여 신뢰성을 높였으며,
      원하는 정보만 선택적으로 볼 수 있게 하여
      사용자 편의성을 높였습니다.

  • Click 전체보기

    Detail Page

    • 제품의 이미지 강조

      제품의 자연성과 우아함을 강조하며,
      부드러운 색감과 고급스러운 이미지로
      시각적 매력을 제공하고자 하였습니다.

    • 적절한 아이콘 사용

      효과를 설명하는 아이콘과 텍스트를
      조화롭게 배치하여 정보 전달이
      명확하고 쉽게 이해할 수 있도록
      디자인하였습니다.

    • 우아한 특징 설명

      제품 특징을 큰 텍스트로 제시하여
      브랜드 아이덴티티를 강조하였고,
      가늘고 정직한 형태의 폰트로
      우아한 느낌을 전달하고자 하였습니다.

그란데라인

  • Design concept

    • Use Tool

      Adobe Potoshop

    • Color

    • Font

      Gmarket Sans Noto Sans KR

    • contribution

      Design 100% Publishing 100%

  • Click 전체보기

    Main

    • 눈에 띄는 메뉴와 브랜드 아이덴티티

      현대적 스타일링 & 활동적인 이미지를 사용하여
      브랜드 아이덴티티를 명확히 전달하고자 했습니다.

    • 보기 쉽고, 빠른 정보 전달

      여름 시즌에 맞춰 소비자들이
      많이 찾는 상품을 보기 쉽게
      배치하였습니다.

    • 차별적인 콘텐츠

      개별적 프레임에 한 세트의 상품을 배치함으로써
      세트 상품이면서도 각각의 상품 매력을
      잘 드러내고자 하였습니다.

    • 가시적 디자인

      그란데라인의 로고를 형상화하는 모델을
      사용함으로써 브랜드를 표현하고, 배경은
      모델이 착용한 제품과 비슷한 색을 활용하여
      자연스러운 시각적 흐름을 주고자 하였습니다.

    • 제품소개와 리뷰를 한번에

      매력적인 제품 착용샷을 보여주면서
      마우스오버 시 소비자의 솔직한 리뷰까지 보여주어
      제품 구매욕을 늘리고자 하였습니다.

  • Click 전체보기

    Sub

    • 시각적 집중

      대형 배너와 선명한 색상으로 여름 세일을
      강조하였습니다. 폰트는 두껍고 현대적인 느낌을 살려
      시각적 집중을 유도하였습니다.

    • 카테고리 세분화

      카테고리를 세분화하여 사용자 편의성을 높였습니다.
      메인과 서브 카테고리를 구분하기 위해
      색상과 스타일을 다르게 사용하였습니다.

    • 간결함과 포인트

      간결한 레이아웃으로 정보를 명확히 전달하고자
      하였습니다. 가격 및 할인 정보는 선명한 포인트
      색상을 사용하여 눈에 띄게 표시했습니다.

벽산

  • Design concept

    • Use Tool

      Adobe Potoshop Figma

    • Color

    • Font

      Pretendard

    • contribution

      Design 100% Publishing 100%

  • Click 전체보기

    Main

    • 브랜드 아이덴티티 강화

      현대적인 도심의 배경과 자연적인
      숲의 영상 이미지를 사용하여 브랜드
      아이덴티티를 강화하고자 하였습니다.

    • 보기 쉽고, 빠른 정보 전달

      깔끔한 레이아웃으로 최신 정보를
      쉽게 확인할 수 있도록 구성했습니다.

    • 깔끔한 레이아웃

      벽산의 다양한 제품들을 깔끔한 대표 이미지와 함께 소개하고,
      버튼을 통해 추가 정보를 확인할 수 있도록 디자인하였습니다.

    • 알아보기 쉬운 디자인

      비밀글 기능이 제공되며, 이를 알아보기 쉽게
      아이콘을 사용하여 나타냈습니다.

  • Mo

    • 반응형 웹사이트

      크기 변경시 세로로 배치되는
      반응형 웹사이트로 제작하였습니다.

  • Sub

    • 가독성 있는 인삿말

      짧고 강렬한 인사말로
      고객과의 소통을 강조하였고,
      심플한 폰트와 색상으로
      가독성을 높이고자 하였습니다.

도토리숲

  • Design concept

    • Use Tool

      Adobe Potoshop

    • Color

    • Font

      Noto Sans KR 국민연금체 여기어때잘난체2

    • contribution

      Design 100% Publishing 100%

  • Click 전체보기

    Main

    • 귀여운 지붕 Header

      브랜드의 오프라인 매장에서 영감을 받아
      지붕느낌을 내는 일러스트 배경을 만들었습니다.

    • 애니메이션 캐릭터 활용

      사이트를 찾는 사용자의 니즈를 고려하여,
      애니메이션별로 카테고리를 나누었습니다.
      캐릭터를 사용하여 시각적으로 만족으로
      주고, 마우스 오버시 캐릭터가 밖으로
      튀어나오는 모션을 사용해 재미를
      주고자 하였습니다.

    • 분위기와 상품의 조화

      따뜻한 색조의 배경과 상품 이미지를 조화롭게
      배치하였습니다. 가격 및 할인 정보는 눈에 띄게 표시하여
      고객의 구매욕을 자극하고자 했습니다.

  • Click 전체보기

    Detail Page

    • 따뜻한 톤앤매너

      캐릭터 분위기에 맞는 따뜻한
      색감과 일러스트를 사용하여
      친근하고 아기자기한 느낌을
      내고자 하였습니다.

    • 정보전달 초점

      원형 아이콘을 사용
      하여 제품의 특징
      (사이즈, 재질 등)을
      깔끔하게 정리했습니다.

    • 제품을 효과적으로 전달

      이미지와 간단한 설명을 함께
      배치해 제품의 특성을 강조했습니다.

명륜진사갈비

  • Design concept

    • Use Tool

      Adobe Potoshop Adobe illustrator

    • Color

    • Font

      나눔명조 Pretendard Variable

    • contribution

      Design 100% Publishing 100%

  • Click 전체보기

    Main

    • 대한민국 1등 갈비 브랜드

      한식이라는 브랜드 아이덴티티를 상징하기
      위해 한복과 갈비의 조화된 이미지와 함께
      먹 느낌의 효과를 사용하였습니다.

    • 전통적인 무늬 활용

      전통적인 느낌을 내기 위해, 한지
      텍스쳐와 전통 창살 무늬를
      사용하였습니다.

    • 최신소식 요약

      최신 소식과 이벤트 정보를 간결한
      텍스트와 이미지로 조화롭게 제공
      하여 접근성을 높였습니다.

    • 사용자를 위한 정보 전달

      각 메뉴의 대표 이미지와 간단한
      설명이 함께 제공되어, 고객의
      선택에 도움을 주고자 하였습니다.

    • 매력적인 썸네일 배치

      마우스 오버시 영상 제목이 나타나도록 하여
      추가 정보를 전달하고 영상 시청 클릭을
      유도하였습니다.

  • Click 전체보기

    Sub

    • 디자인의 일관성 유지

      디자인을 일관되게 유지하여 브랜드
      정체성을 강화하고자 하였습니다.

주술회전

  • Design concept

    • Use Tool

      Adobe Potoshop

    • Color

    • Font

      빛의계승자체 Gmarket Sans Noto Sans KR

    • contribution

      Design 100% Publishing 100%

  • Click 전체보기

    Main

    • 화려한 마우스오버 효과

      메뉴에 마우스 오버시 게임과 어울리는 효과를
      나타나게 하여 페이지 컨셉을 확고하게 하였습니다.

    • 게임 컨셉에 맞는 디자인 요소

      사전예약과 관련된 다양한 이벤트를
      매력적으로 전달하고, 방문자의 관심을
      유도하고자 게임 컨셉에 어울리는
      요소를 사용하여 디자인하였습니다.

    • 사전예약 유도 및 흥미 유발

      중앙에 사전예약 버튼이 강조되어 있어
      방문자가 쉽게 클릭할 수 있도록 하였습니다.
      영상버튼 클릭 시 게임 영상이 나오도록 하여
      사용자 흥미를 유도하였습니다.

    • 톤앤매너 유지

      톤앤매너와 디자인을 일관되게
      제작하여 게임페이지라는 정체성을
      강화하고자 하였습니다.

    • 심플하지만 매력적으로

      심플한 디자인과 배치로 사용자가 정보에
      쉽게 접근할 수 있도록 하면서도,
      화려한 애니메이션 이미지를 사용해
      매력적으로 보이도록 디자인하였습니다.

서울화봄의원

  • Design concept

    • Use Tool

      Adobe Potoshop Figma

    • Color

    • Font

      돋움체

    • contribution

      Design 100% Publishing 100%

  • Click 전체보기

    Main

    • 신뢰감 형성

      신뢰감을 주는 녹색계열 컬러의 심플한 배경에
      의료진 사진을 배치함으로서 사용자에게
      신뢰감을 주고자 하였습니다.

    • 필요한 정보를 빠르게 전달

      각 과목에 대한 간단한 설명과 관련 이미지를
      제공하여 시각적으로 정보를 더욱 빠르게
      받아들일 수 있도록 하였습니다.

    • 사용자 편의성 고려

      상담 신청 섹션을 직관적으로 배치하여
      사용자가 쉽게 정보를 입력하고 상담을
      요청할 수 있도록 디자인하였습니다.

  • Sub

    • 사용자 관심 유도

      생생한 후기 사진을 크게 배치해
      다른 방문자들이 관심을 가질 수
      있도록 유도하였습니다.

요거벨라

  • Design concept

    • Use Tool

      Adobe Potoshop Figma

    • Color

    • Font

      Gmarket Sans 여기어때잘난체 고딕

    • contribution

      Design 100%

  • Click 전체보기

    Main

    • 제품 정보 요약

      제품의 핵심 정보를
      아이콘으로 정리하여
      쉽고 빠르게 제품에 대해
      알 수 있도록 하였습니다.

    • 긍정적 이미지 강화

      고객들의 후기를 통해
      신뢰성을 높이며, 제품에
      대한 긍정적인 이미지를
      강화하고자 하였습니다.

    • 정보를 시각적으로 표현

      제품의 성분과 효능을
      시각적으로 잘 표현할
      수 있도록 적절한 식품
      이미지와 텍스쳐 이미지,
      아이콘을 사용하였습니다.

    • 식욕을 돋우는 이미지

      식욕을 돋우는 식품 이미지로
      제품을 더욱 매력적으로
      보이게 함으로써 구매를
      유도하고자 하였습니다.

    • 체크 포인트

      체크포인트와 밑줄
      하이라이트로 고객의
      관심을 집중시키고자
      하였습니다.

    • 주의문구는 눈에 띄게

      주의 문구를 잘 보일 수 있게
      눈에 잘띄는 색감의 아이콘을
      같이 배치하였습니다.

오피스링크

  • Design concept

    • Use Tool

      Adobe Potoshop Figma

    • Color

    • Font

      Gmarket Sans Noto Sans KR

    • contribution

      Design 100% Publishing 100%

  • Click 전체보기

    Main

    • 시각적인 자료

      기술의 실제 적용 사례를 쉽게
      설명하기 위해 시각적인 이미지
      자료를 사용하였습니다.

    • 섹션별 분류

      브랜드의 특징을 섹션별로 나누고
      이를 큰 숫자를 통해 표기해 사용자가
      정보를 직관적으로 받아들일 수 있도록 하였습니다.

    • 직관적인 아이콘

      아이콘을 사용하여 정보를
      더욱 직관적으로 받아들이도록
      유도하고, 포인트 색상을 넣어
      단조로움을 피하고자 하였습니다.

아마스빈

  • Design concept

    • Use Tool

      Adobe Potoshop Figma

    • Color

    • Font

      Gmarket Sans Noto Sans KR

    • contribution

      Design 100%

로얄캐닌

  • Design concept

    • Use Tool

      Adobe Potoshop Figma

    • Color

    • Font

      Noto Sans KR

    • contribution

      Design 100%

B a n n e r