더마펌 공식 온라인몰, 브랜드 웹사이트 UX/UI 디자인 리뉴얼

이전 더마펌 웹사이트 리뉴얼 작업입니다.

아래 보이는 것이 2021년도 더마펌 웹사이트 화면입니다.

2021년 더마펌 브랜드 사이트

 

 

 

위에 보이는 이미지가 2021년 더마펌 공식 온라인몰

 

 

더마펌 웹사이트는 브랜드와 공식 온라인몰 메인 화면을 새롭게 디자인해 달라는 요청이 왔었습니다.

고객은 브랜드 웹사이트에 경우 시차 스크롤 형식으로 섹션 별로 테마를 잡아서 보여주고

온라인몰은 기존 웹사이트를 참고해서 깔끔하게 디자인을 잡아달라고 하셨습니다.

 

온라인몰에 경우 기존에 웹사이트도 깔끔하고 웹아이덴티티를 잘 반영하고 있어서

기존 웹사이트를 참고하고 웹아이덴티티를 좀 더 보강하는 선에서 디자인 작업을 진행했습니다.

새로운 더마펌 브랜드 웹사이트의 디자인 및 디자인 콘셉트

 

 

‘디자인 및 UX/UI’

전략적으로 브랜드와 온라인몰을 탭 버튼으로 구성하여 직관적으로 보이게 하며 바로 이동이 가능하도록 배려하였다.

불필요한 요소를 최소화해 콘텐츠의 집중도를 높이고 주력 콘텐츠를 노출해 홍보 및 접근성을 강화하고 제품별 접근 및 편의성을 높여 사용자 중심의 사용성을 확보.

 

‘시각적 효과’

쇼핑몰과 브랜드 소개를 제공하는 사이트로서 디자인 트렌드 접목과 이미지를 매력적으로 어필할 수 있는데 주력.               

 

‘색상’

Light grayish cyan (주제 색상)

Dark grayish cyan (보조 색상)

white (배경 색상)

Slightly desaturated blue (포인트 색상)

 

‘그리드’

세로 그리드, 1600px에 최적화되었다.

추후 확장성을 고려해서 모든 디바이스에 적용될 수 있도록 반응형으로 제작.

 

 

 

더마펌 브랜드 웹사이트의 전체적인 디자인 화면입니다. 원페이지로 이루어져 있고

시차 스크롤 형식으로 마우스 스크롤 이동 시 하나의 섹션으로 이루어진 것이 특징입니다.

 

이 방식은 고객사가 요청한 사항이며 그 외 특별하게 요구한 사항은 없었습니다.

의외로 고객사의 요청사항이 적었으면서 까다롭지 않아서 당황한 사례입니다.

개인적인 생각으로는 코스메틱 계열은 까다롭다고 들었는데..

의외의 요구사항에 당황했던 기억이 있습니다.

 

 

모바일 디자인 화면입니다.

 

 

반응형으로 섹션 별로 편집에 신경 썼을 뿐 특별하게 어려운 부분은 없었습니다.

메인의 디자인 콘셉트를 생각하면서 편집에만 신경을 썼습니다.

 

 

새로운 더마펌 공식 온라인몰 웹사이트의 디자인 및 디자인 콘셉트

 

 

‘디자인 및 UX/UI’

브랜드와 공식 온라인몰을 탭 버튼으로 구성하여 직관적으로 보이게 하며 바로 이동이 가능하도록 배려하였으며 불필요한 요소를 최소화해 콘텐츠의 집중도를 높이고 주력 콘텐츠를 노출해 홍보 및 접근성을 강화하고 제품별 접근 및 편의성을 높여 사용자 중심의 사용성을 확보.

 

‘시각적 효과’

제품을 제공하는 사이트로서 디자인 트렌드 접목과 이미지를 매력적으로 어필할 수 있는데 주력. 

 

‘색상’

Light grayish cyan (주제 색상)

Dark grayish cyan (보조 색상)

white (배경 색상)

Slightly desaturated blue (포인트 색상)

 

‘그리드’

세로 그리드, 1600px에 최적화되었다.

확장성을 고려해서 모든 디바이스에 적용될 수 있도록 반응형으로 제작.

새로운 더마펌 공식 온라인몰 웹사이트 메인 화면 디자인

 

 

이 사이트는 제품을 부각하기 위한 최대한의 색상과 텍스트를 배재하고 제품에만 집중하고자 노력했습니다.

고객의 요청사항도 특이한 부분이 없어서 제품을 위주의 심플한 레이아웃을 구성하였습니다.

공식 온라인몰 모바일 화면입니다.

역시 반응형으로 최대한 메인 화면의 느낌을 살리고자 노력했습니다.

큰화면에서 작은 화면으로 옮겨가는 거라 웹아이덴티티를 유지하는데 신경을 많이 썼습니다.

 

 

감사합니다.