웹 디자인 & 퍼블리싱 포트폴리오

OVERVIEW

프로젝트 소개

캐어유 기업 홈페이지 구축 프로젝트입니다. 담당한 페이지 중에서 레이아웃이 다양하고 디테일이 풍부한 스마트케어 제품 상세페이지(키오스크, T-pro, Temi 3종)를 중심으로 소개하였습니다.

주요 사항, 와이어프레임, 스타일 가이드, 최종 디자인 링크 순으로 구성하였습니다.
기간 (프로젝트 전체 기준)

2021년 5월 ~ 6월

2023년 5월 홈페이지 개편으로 디자인 및 퍼블리싱 방식이 변경되었습니다.
참여인원 (프로젝트 전체 기준)

웹 디자이너 1명
웹 디자이너 겸 퍼블리셔 1명 (본인)
프론트엔드 개발자 1명
역할 (프로젝트 전체 기준)

스마트케어 제품(3p), 홍보센터(2p), 문의하기, 사이트맵, 푸터 디자인 및 전체 페이지 반응형 디자인 전담(pc에서 모바일 버전으로)

퍼블리싱 전담
사용 언어 및 툴(tool)

웹 디자인 툴:
Adobe XD, Photoshop, Illustrator

퍼블리싱 툴:
Visual Studio Code, Github

사용 언어:
HTML(퍼블리싱 후 PHP로 통합), CSS(SCSS), Javascript(jQuery)

제공된 제품 정보 및 사업 기획서를 파악하여 주요 사항을 정리하고 이를 바탕으로 전체적인 레이아웃을 구성하였습니다.
배너, 제품 기능, 제품 사양, 문의 순으로 콘텐츠의 흐름을 구성하고 페이지의 최상단 및 하단에 링크 버튼을 배치하여 사용자의 문의 행위를 유도하였습니다.
제품 이미지(모델링 이미지, 목업 이미지)를 중점적, 반복적으로 활용하여 사용자에게 제품을 노출 및 각인시켰습니다.
제품의 기능 및 장점을 시각적 요소(아이콘)를 활용하여 직관적으로 전달하였습니다.

현재 사용 중인 기기 또는 브라우저의 가로 폭(px 기준)에 반응하여 와이어프레임이 소개됩니다. (모바일/태블릿/데스크톱)

메인 배너

배경 이미지와 제품 이미지를 과감하게 사용하여 시선을 끌어 주목도를 높였습니다. 내부에 링크 버튼을 배치하여 제품 문의를 유도하였습니다.
제품 기능 (아이콘)

제품 이미지를 중앙에 배치하여 강조하고 제품 기능은 아이콘을 사용하여 직관적으로 안내합니다. 반응형 퍼블리싱을 고려하여 구성 요소들의 배열을 유동적으로 변경할 수 있도록 설계합니다.
제품 기능 (확대)

제품의 정면, 측면 및 확대 이미지를 활용하여 기능을 상세히 설명합니다.
제품 기능 (카드)

제품이 제공하는 서비스를 이미지를 포함한 카드 형식으로 정렬하여 소개합니다.
제품 사양

접근성이 제한적인 테이블(표) 형식을 지양하고 리스트 형식으로 정보를 제공합니다.
푸터

관련 사이트 드롭박스 UI를 제공합니다. 더불어 주소, 연락처 및 SNS 바로가기를 포함합니다.