전문서비스(법률,세무,자문,금융)
까사로마
  • #카사로마 홈페이지제작 #고급스러운 #심플 #SVG
CLIENTS.
에이디세라믹
DATE.
2023.07.14
TYPE.
Responsive Web

전문서비스(법률,세무,자문,금융)

까사로마 #카사로마 홈페이지제작 #고급스러운 #심플 #SVG
전문서비스(법률,세무,자문,금융)
까사로마
  • #카사로마 홈페이지제작 #고급스러운 #심플 #SVG
CLIENTS.
에이디세라믹
DATE.
2023.07.14
TYPE.
Responsive Web
Device.

디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 반응형 웹으로 제작되었습니다.

기획의도.

"까사로마"는 고대 건축 기술과 예술적 경이로움을 재해석하여 건축 마감재로 표현하는 에이디세라믹의 타일 브랜드입니다.
1차 기획 때 타일이 가지고 있는 몽환적인 무늬와 패턴, 질감을 시각적으로 표현하여 고객에게 단순 타일을 제작하는 기업이 아닌
타일을 통해 또 하나의 새로운 공간을 탄생시켜주는 기업임을 인지하도록 타일에 있는 문양이 물감처럼 퍼지도록 기획하여 제안하였으나
보다 심플한 룩앤필을 원하셔서 실제 로마 건축물 영상의 한 장면을 일러스트를 직접 그린 후 일러스트가 SVG기법으로 나타나면서
서서히 실제 영상으로 바뀌도록 재기획하여 컨펌된 프로젝트입니다.
기업이 추구하는 이념과 제품 링크만 메인에 간결하게 구성하여 강조하였고, 기업의 아이덴티티가 돋보이도록 타일의 네모난 형태를 디자인 요소로 활용하였습니다.
제품페이지 UX/UI는 사용자 편의성 강조와 더불어 관리자가 등록관리를 쉽게 할 수 있게 프로그래밍하는 것에 중점을 두었습니다.
타일 이미지와 실제 시공 이미지를 유저가 직접 좌우로 드래그하면서 비교해서 볼 수 있도록 재미요소를 가미하여 기획하였고
이미지 영역, 텍스트 영역의 위치와 배열을 디자인으로 고정하여 각 영역을 관리자가 수정 및 노출, 비노출을 설정하도록 설계하여 심미성도 높이고자 하였습니다.
영상 아래 부분은 에디터영역으로 기획하여 부가 설명을 쉽게 업로드할 수 있게 개발하였습니다.

Design Concept.

심플하고 깔끔한 분위기를 유지하고자 흰색 배경의 영역을 크게 잡고
퍼스널 컬러를 활용하여 곳곳에 포인트를 주어
기업의 아이덴티티를 부각시켰습니다.

Colors.
Typo.
Proposal Design.

A타입은 고대 로마의 건축양식인 도리아 양식의 기둥에 실제 제작된 타일 이미지를 조화롭게 합성하여 기업의 아이덴티티를 부각시키고자 하였습니다.
또한 전체적으로 고급스럽고 우아한 느낌을 주고자 안개가 걷히는 인트로와 무게감있는 어두운 톤의 배경색을 선정하였고 배경과 걸맞는 중후한 느낌의 세리프 폰트를 사용하였습니다.
B타입은 A타입에서 배경색과 기둥의 배치를 다르게 한 타입으로 밝은 배경이 주는 깔끔하고 신뢰적인 느낌을 표현하였고
어두운 배경이 아닌 밝은 배경에서도 고급스럽고 세련된 느낌을 줄 수 있다는 것을 표현하고자 하였습니다.
C타입은 기둥의 배열을 사선 안쪽으로 나열하여 마치 신전에 온 듯한 느낌을 주고자 하였습니다.
또한 기둥 표면에 타일의 텍스처를 추상적으로 형상화한 영상을 더해주어 세련되고 고급스러움을 더하였습니다.

  • A Type
  • B Type
  • C Type
Confirm Design.
Sub Design.
Motion.

메인비주얼의 직접 그린 로마 건축물 일러스트를 SVG 기법으로 효과를 주어 사용자의 시선을 사로잡았습니다.
또한, 타일의 제품이 부각되도록 제품 리스트 마우스 오버 시 타일이 분할되도록 독특한 기법으로 구현하였습니다.

관련 프로젝트.