- 평가내역
WEB AWARD KOREA evaluation
등록정보
|
| 타이틀 | 브로앤팁스 | |
|---|---|---|
| Bro&tips | ||
| 서브타이틀 | 브로앤팁스 | |
| Bro&tips | ||
| URL | https://brontips.com 사이트보기 | |
| 소개 | 화장품에 무관심한 남성을 타깃으로, 친근한 어투와 B급 감성의 디자인 아이덴티티를 적극 활용한 웹사이트 | |
| 키워드 | 남성화장품,남자화장품,아모레퍼시픽,대충살자,유노윤호,올인원 | |
| 제작년월 | 2019.4 | |
| 등록구분 | 데스크탑웹 | |
| 후보등록분야 | 생활브랜드 부문 > 화장품 등록분야 목록보기 |
|
| 소속사 | 아모레퍼시픽 | |
| 제작사 |
스튜디오 제이티 정보보기 |
|
| 제작사 제작진 |
|
|
| 웹사이트 설명 | 1. 기획 의도
브로앤팁스는 아모레퍼시픽이 20년 만에 선보이는 남성 전용 화장품 브랜드이다. 화장품에 큰 관심이 없는 남성 고객들을 위해 제품을 단순화시켰으며, 제품들은 각각 특징에 맞게 위트있고 재미난 문구와 일러스트로 잘 표현되어 있다. '대충 살자'라는 최근 유행하는 콘셉트와 함께 B급 감성으로 남성 고객들에게 친근감을 주려 노력했고, BRO TIPS 콘텐츠 게시판으로 다양하고 유용한 정보를 제공하도록 설계했다. 2. 특징 1) 디자인 전반적인 디자인 콘셉트는 락커(사물함)를 연상시킨다. 커다란 프레임 안에 좋아하는 포스터나 잡지, 스티커를 큼직큼직 오려 붙이듯 콘텐츠를 표현했으며, 색상과 라인, 잡지를 보는 듯한 굵직굵직한 타이포그래피로 남성스러운 스타일을 구축했다. 또한, 브로앤팁스의 캐릭터들을 활용한 페이지 전환모션, 제품들의 특징을 극대화한 제품 상세 일러스트, 제품 성분을 알기 쉽게 묘사한 아이콘들, 마우스오버 효과와 모션이 들어간 디자인 요소들이 전부 브로앤팁스만의 아이덴티티로 멋지게 표현됐다. 또 브라우저 기본 404페이지는 지루하고 도움이 되지 않는 점에 착안, 브로앤팁스만의 404페이지를 통해 에러 페이지에 대한 방문자의 스트레스와 이탈률을 줄였다. 2) 개발 브로앤팁스 웹사이트는 반응형 웹으로 구축되었고, 콘텐츠 로딩속도를 최적화하기 위한 Lazyload 방식을 도입해 페이지 간의 지연시간을 최소화했다. - 반응형웹으로 개발 - 검색엔진최적화(SEO) - PJAX 사용, 페이지 간의 지연을 줄이고 http 요청 최소화 - Parallax 및 TweenMax를 활용한 등장 모션 구현 - SVG Draw를 활용한 아이콘 모션 구현 - 페이지 전환 모션 - 커스텀 커서 - 파비콘 커스텀 - 커스텀 404페이지 |
|
| 추가이미지 |
  
|
|
| 제작/구축 관련 자료 | ||