IMWEB GRAPHIC & UI BUILD

신제품 출시 및 소개
ENERSKIN 리뉴얼

스포츠 테이핑과 컴프레션 웨어의 기술력을 결합한 하이테크 브랜드, 아임웹(imweb) 빌더 기반으로 리뉴얼하고 전체 비주얼 그래픽 디자인부터 실제 웹 사이트 스킨 입히기(빌드업)까지 직접 전담한 디자인 케이스 스터디입니다.

아임웹 기반 UI/UX 디자인
UI/UX
디자인 100%(아임웹 기반)
Photoshop, Illustrator, imweb, Figma,
7일(2021)
PROJECT OVERVIEW

강렬한 퍼포먼스 브랜딩과 아임웹 레이아웃의 결합.

디자인 및 빌드 목적: 아임웹 시스템 안에서 ‘의료기기급 테크니컬 기어’로서의 압도적인 기술 비주얼을 온전히 구현하기 위해, 플랫폼 그리드의 한계를 넘는 과감한 톤앤매너(Deep Black & Volt Yellow)를 확립하고 실물 이미지와 그래픽 요소들을 픽셀 단위로 직접 매칭 및 세팅합니다.

비주얼 타겟팅: 프로 운동선수 및 스포츠 고관여 소비층의 직관적인 구매 동선을 위해, 롱 컴프레션 웨어의 특징을 살린 고해상도 머슬 레이아웃을 아임웹 웹진 및 갤러리 섹션 규격에 맞춰 직접 최적화 슬라이싱하여 배치했습니다.

실무 참여 범위: 브랜드 아이덴티티를 투영한 메인 팝업·배너 비주얼 디자인, 상품 컬렉션 진입을 위한 반응형 상품 그리드 가이드 구성, 스포츠 테이핑 스펙 대조(VS) 화면의 인포그래픽 디자인 자산 제작 및 아임웹 코드/스타일 적용 세팅 완료.

DESIGN DIRECTION

EH 에너스킨 비주얼

ENERSKIN Visual
DESIGN STRATEGY

플랫폼 한계를 돌파하는 비주얼 가이드

IMWEB OPTIMIZATION

아임웹 빌더 시스템 안에서 어색함 없이 구동되도록 웹 전용 타이포그래피 계층 구조와 정밀 그리드 정렬 적용.

HI-TECH GRAPHIC

실리콘 근육 매핑 그래픽의 대비감을 강력하게 가공하여 대형 통 이미지 및 배너 구획을 직접 아임웹 스킨에 이식.

INFOGRAPHIC GRID

일반 테이핑과의 차이점을 보여주는 VS 대조 영역을 복잡한 텍스트 대신 아임웹 가로 분할 섹션을 활용해 인포그래픽으로 안착.

BRAND TRUST FOOTER

미국 FDA 승인 마크와 하단 프로모션 인덱스가 하단 영역과 완벽한 정렬을 이루도록 푸터 및 꼬리말 섹션 픽셀 매칭 마감.

DETAILED VIEW

EH 신제품 출시 및 브랜드 소개 비주얼

Scroll Down
ENERSKIN imweb Tech Page
ENERSKIN imweb Main Commerce
BUILD CORE VALUE

비주얼 디자인과 플랫폼 빌드의 시너지

Responsive Control

모바일 해상도(768px) 및 태블릿(1024px) 브레이크포인트에서 텍스트와 배열이 무너지지 않도록 아임웹 반응형 그리드 수동 최적화.

Identity Continuity

포토샵/피그마로 의도한 그래픽 자산의 채도와 대비가 아임웹 업로드 시 왜곡되지 않도록 웹 표준(sRGB) 프로파일을 준수해 직가공.

Commerce Usability

신규 회원 혜택 배너와 인스타그램 위젯 연동 섹션의 시인성을 높여 브랜드 감성 전달과 매출 전환율 증가의 시각적 명분 구축.