Responive Website Project

바이오비옴

바이오비옴은 국제 마이크로비옴 컨소시움 한국대표로 참여하고 있는 서울대연구진들이 차세대 유망 10대 신기술로 선정된 바이오 산업의 핵심 마이크로비옴 기술로 만든 프로바이오틱스 전문 브랜드입니다.

Client

고바이오랩

Developer

Vryus

Project Type

Responsive Web

Process

Html , Css , Js

DESIGN CONCEPT

바이오비옴은 바이오 산업의 핵심 마이크로비옴 기술로 만든 프로바이오틱스 전문 브랜드로서
기업을 대표하는 제품군을 판매하고 관련된 이야기들을 배치하여
이용자들에게 편안하게 정보를 제공할 수 있도록 구축하였습니다.

브랜드의 아이덴티티가 돋보이는

구매자들이 신뢰할 수 있는 웹사이트

기업에서 판매하는 제품군을 상세페이지뿐만 아니라 홈페이지 전체에서도 확인할 수 있도록
이미지와 픽토그램을 적절히 사용하여 표현하고, 사용자들에게 신뢰를 줄 수 있도록 신뢰감있는 색상을 같이 사용하였습니다.

신뢰감과 통일성

제품 판매 홈페이지로 제품에 대한 설명뿐만 아니라 기업에 대한 정보를 메인 페이지에 함께 노출시킴으로서
구매자들에게 신뢰감을 주고 CI의 색상을 포인트 컬러로 사용하여 사이트의 통일성을 주었습니다.

COLOR SYSTEM

TYPOGRAPHY

반듯한 직선으로 모바일에서도 잘 보이는 나눔스퀘어 서체를 사용하여
편리하고 깔끔한 웹사이트를 제공합니다.

이용자를 생각한 페이지 레이아웃

상세페이지에 제품에 관련한 내용을 서술하고 안내사항을 아이콘을 활용하여 이용자들에게 이해도를 높이고
하단에 후기 및 Q&A를 배치하여 제품에 관련된 내용을 다른 페이지로 가지 않아도 볼 수 있도록 이탈율을 줄이고자 하였습니다.

각 페이지 성격에 맞는 레이아웃 설계

데스크탑은 물론 모바일에서 동일한 내용을 접할 수 있도록 레이아웃을 구성하고 제품 리스트 페이지같은 경우 상세 페이지까지 가지 않아도 해당페이지에서 구매할 수 있도록 설계하고,
공지사항 및 홍보관련 페이지는 게시판 형식으로 작업해 제품 페이지와는 차별성을 줄 수 있도록 설계하였습니다.