안녕하세요~!
20년 노하우, 국내 최다 홈페이지 제작 매스티지입니다!
오늘은 줄기세포치료제와 비임상시험 연구사업을 중심으로 하는 바이오 기업,
코아스템켐온(주) 반응형 홈페이지 리뉴얼 사례를 소개해드리겠습니다.
기업 소개
코아스템켐온은 줄기세포를 기반으로 하는 신규약물을 개발하고
비임상CRO 독성시험, 유효성시험 등의 평가 서비스를 제공하는 바이오기업입니다.
고객을 먼저 생각 하고 사회에 필요한 기업으로 거듭나기 위해 지속적인 연구개발과 가치투자를 하는 기업입니다.
메인 페이지
줄기세포 치료제 사업을 하는 코아스템과 비임상 CRO 시장을 주도하는 켐온 두 회사가 합쳐진 기업이기 때문에
각각의 사업분야와 많은 콘텐츠들이 명확히 구분되고 정돈된 화면으로 보여질 수 있도록 인트로 화면을 제작했습니다.
원하는 홈페이지를 유저가 직접 선택해서 살펴볼 수 있습니다.
홈페이지 메인
원스크롤링 구조의 스크립트를 사용해 풀페이지 형태의 레이아웃으로 화면을 구성해 제작했습니다.
원스크롤링 기능으로 마우스 스크롤을 통해 콘텐츠 섹션 이동이 용이해지며 구분이 명확하게 되기 때문에
홈페이지를 이용하는 유저의 편의성을 높여 쾌적한 화면과 UI/UX를 경험할 수 있습니다.
기업이 하는 비즈니스, 사업분야의 내용을 메인 콘텐츠로 구성하고
그와 어울리는 이미지와 아이콘으로 레이아웃을 제작해 기업의 브랜드아이덴티티를 강조하면서
전문성이 잘 들어나도록 만들었습니다.
컬러 사용
전체적인 컬러 사용은 기업의 CI를 활용, 네이비, 오렌지 컬러를 포인트 컬러로 사용하여
마우스 오버, 아이콘, 텍스트 강조 등 디자인 요소를 제작했습니다.
메인 비주얼 영상
슬라이드 스크립트를 활용해 레이아웃을 만들었고
실험, 수술, 연구 과정을 편집한 영상과 바이오 관련 이미지, 총 3Page로 구성했습니다.
웹접근성을 준수하고 유저에게 편의성을 높이기 위해
비주얼 좌측에 좌우 화살표 버튼과 재생, 정지 버튼을 만들었습니다.
각 버튼을 클릭해 수동으로 비주얼 페이지를 변경이 가능합니다.
우측 원스크롤링 탭버튼을 만들어 빠른 페이지 이동이 가능하며
버튼 오버효과를 통해 유저의 페이지 인지성을 높였습니다.
상단 GNB 영역
좌측부터 로고, 내비게이션 메뉴, 다국어 홈페이지, 비임상시험의뢰 페이지 안내로 구성했습니다.
GNB가 마우스 스크롤, 페이지 이동에 상관없이 상단에 상시 고정되어 신속한 페이지 이동이 가능합니다.
내비게이션 메뉴에 마우스를 올리면 홈페이지 전체메뉴가 드롭다운되어 펼쳐지고
각 메뉴에 마우스를 올리면 포인트 컬러로 베리에이션됩니다.
우측 KOR/ENG 버튼을 클릭해 국문/영문 홈페이지 변경이 가능하며
비임상시험의뢰 아이콘을 클릭해 비임상CRO 홈페이지로 이동할 수 있습니다.
기업 소개 섹션
바이오사업과 비임상CRO 사업을 하는 기업을 소개하는 콘텐츠로 2개의 레이아웃으로 나누어 만들었습니다.
각 요소를 클릭해 사업분야의 자세한 내용을 확인할 수 있는 상세페이지로 이동이 가능합니다.
하단에 기업의 비즈니스 사업내용을 이미지와 텍스트를 활용해 만들었습니다.
기업의 비전, 가치를 소개하는 섹션입니다.
가족이 손잡고 잔디를 걷는 사진을 백그라운드 이미지로 활용하여
믿을 수 있고 따뜻한 느낌의 기업 이미지를 강조하고 부각되도록 만들었습니다.
사업 현황 섹션
연구개발 현황, 논문, 협력사로 세부적인 콘텐츠를 구성했고 각 영역에 마우스를 올리면
포인트 컬러로 레이아웃이 변형되면서 간단한 설명이 노출됩니다.
클릭하면 상세페이지로 이동합니다.
서브 페이지
상단에 페이지명과 어울리는 백그라운드 이미지를 활용해 서브 비주얼을 제작했으며
하단에 하위메뉴 탭을 만들어 페이지내 이동을 손쉽게 만들었습니다.
포인트 컬러를 활용해 기업의 인재경영 철학을 소개하는 페이지로 CI와 아이콘, 도형을 활용해 만들었으며
서로 이어지는듯한 모양으로 레이아웃을 구성해 기업의 대가족주의 인재경영을 강조시켰습니다.
신규 개발 사업 페이지
기업이 하는 신규사업을 소개하는 콘텐츠로 심플하고 간결한 레이아웃을 사용해
유저들이 정보를 쉽게 이해할 수 있도록 만들었습니다.
반응형 리뉴얼
코아스템켐온 홈페이지를 모바일에 최적화된 반응형웹으로 제작되어
언제 어디서든 홈페이지에 접속하여 원활한 화면으로 이용할 수 있습니다.
데스크톱뿐만 아니라 노트북, 태블릿, 스마트폰 등 다양한 디바이스 해상도 화면에서
가독성 높은 쾌적한 화면 경험이 가능하며 고객의 니즈에 맞춰 디자인 개발되어
만족도 높은 고퀄리티 반응형 홈페이지로 만들었습니다.
매스티지의 20여년의 노하우는 홈페이지제작에 어려움을 두고있는 고객에게
쉽고, 즐겁게 커뮤니케이션 하며 진행할 수 있도록 도와드립니다.
매스티지와 함께 특별한 웹사이트를 구축하고 싶으시다면 언제든지 연락 주시기 바랍니다^^
개별 상담을 통해 보다 자세한 제안을 드리겠습니다. 감사합니다!
'포트폴리오[기업]' 카테고리의 다른 글
| [(주)주성비앤비] 홈페이지제작 매스티지의 성공적인 반응형기업홈페이지 리뉴얼 분석 (0) | 2024.07.19 |
|---|---|
| [(주)태양당인쇄] 홈페이지제작 매스티지의 반응형 웹사이트 구축! 리뉴얼 사례 분석 (0) | 2024.07.18 |
| [(주)이레자동차공업사] 반응형 홈페이지 리뉴얼이 필요한 이유를 매스티지의 성공 사례로 확인해보세요! (1) | 2024.07.17 |
| [마루특허법률사무소] 반응형 웹으로 달라지는 사용자경험, 매스티지의 법인 홈페이지제작 리뉴얼 사례 분석 (0) | 2024.07.17 |
| [유일한박사기념연구재단] 모든 화면에서 완벽하게 구현되는 재단 반응형 홈페이지제작 매스티지! (0) | 2024.07.16 |
