어바웃 반스
RENEWAL DESIGN
브랜드 아이덴티티를 담아내고 있어야 할 어바웃 페이지가 가독성 떨어지는 글로 구성이 되어 있어 전혀 ‘반스’스럽지 못하다 느꼈고
리뉴얼시 웹의 전체적인 완성도를 높여줄 수 있는 페이지라 생각하여 선택하게 되었습니다.
브랜드의 핵심가치 3가지로 내용을 요약하여 전체 페이지를 구성하여 리디자인 및 코딩을 진행했습니다.
keyword
#COLOR#PATTERN#YOUTH
TARGET
소비자(&잠정적 소비자)
그 브랜드만의 가치, 느낌을 좋아하는 사람은
브랜드에 대한 어느정도의 기대감이 있습니다.
반스의 아이덴티티를 느낄 수 있도록
리디자인 진행
어바웃 반스 기존 PAGE
- 가독성 떨어짐
- 브랜드 이미지 결여
Renewal Direction
스토리 구성과 컬러, 패턴 포인트
리뉴얼전의 글을 읽고 브랜드의 내용을 3가지로 정리하고 페이지에 입장하는 순간부터반스를 직관적으로 느낄 수 있도록 상징적인 색상인 검정을 베이스로 체크보드 패턴과 빨강색을 포인트로반스만의 무드를 만들고, 스포티한 사진과 영상으로 다이나믹하고 젊은 무드를 만들었습니다.
1. 브랜드 스토리 2. 콜라보 3. 커스텀
MAIN SCREEN
반스 슬로건, 체크보드 패턴을 활용하여 직관적으로 반스의 무드를 느낄 수 있도록 메인을 구성했습니다. 소비자가 원하는 정보를 빠르게 습득할 수 있도록 내용을 3개로 요약하여 배너를 만들어 찾기 쉽도록 구성했습니다.
Style Guide
Color Palette
직관적으로 떠오르는 검정색을 베이스로 하고 상징적인 체크보드 패턴에 빨강색을 포인트로 하여 역동적인 반스의 느낌을 살려주고 무채색으로 발런스를 맞추어 자칫 산만해 질 수 있는 디자인의 중심을 잡았습니다. 사용된 이미지들에는 노랑, 주황, 파랑 등의 원색을 더하여 좀 더 다채로운 느낌을 부여했습니다.
Typography
Montserrat
Noto Sans
PUBLISHINGPROBLOEM & SOLUTION
Probloem
보여지는 영상의 사이즈를 원하는 사이즈로 보여주고 싶은데 비율유지하며 사이즈 영역 제어 어려움
푸터 그리드에 맞춰서 정렬이 원활하게 되지 않음
소제목 background color값을 줄때 색상의 가운데에 정렬시키고 싶은데 간격의 차이가 생김
Solution
영상을 감싸는 겉영역을 만들어주어 영상의 비율은 그대로 보여지는 사이즈 제어
css display: flex로 요소 정렬
소제목을 감싸는 영역을 만들어서 배경값을 주고 소제목은 가운데 정렬
WEB PUBLISHING
About Vans
가독성이 떨어지는 현사이트의 브랜드 소개 페이지를 리디자인하여 웹의 전체적인 완성도를 높이고 브랜드 가치를 잘 들어낼 수 있는 방향으로 리디자인을 진행했습니다. 브랜드의 핵심 가치와 시그니처 패턴, 컬러를 포인트로 잡았습니다.
PROJECT개인 프로젝트
작업일정2023.05.11 ~ 2023.05.14
KEYWORD#PATTERN #COLOR #YOUTH
- Skills
- HTML5 / CSS3 / Git & Github
- Editing picture
- Tools
-


