ADOBE XD | 애플이 화장품 시장에 뛰어든다면? 홈페이지의 모습은 어떤 모습일까? 만들어보자!

2020. 6. 23. 02:38ADOBE XD

6월 22일 나는 문득 애플이 화장품 시장에 뛰어들게 된다면 어떻게 될까?라는 상상을 하게 되었다.

그럼 바로 만들러 가보자!


1. 준비물은 언제나 필요한 법

오늘의 준비물은 엄청 많다!

 

(1) 사진

애플 로고, 주의사항 문구, 저작권 문구

(2) 3D 모델링

애플 선크림 프로토타입 버전, 애플 선크림 포장박스

(3) 포토샵

3D 모델링이 완료된 사진을 자르고 배경을 None상태로 바꾸는 과정에서 사용됨(필수!)

-작업에 사용된 모든 파일은 템플릿 형태로 공개 배포됩니다!-

 

2. 3D 모델링을 시작하자!

3D 모델링은 압도적인 시간을 소비한다! (이 프로젝트에서는 6시간이 소요됨)

ADOBE DIMENSION 2020를 사용한다.

 

 

 

1차 프로토타입이다. 박스의 메트 농도와 색상을 다시 선택해야 한다. 또한 바닥의 질감처리를 금속이 아닌 화이트 배경으로 바꾸어야 한다. 내용 진입 전 도입 부분에서 사용할 예정이다.

 

2차 프로토타입이다. 매트 농노를 낮추는 것 대신에 조명의 개수를 늘렸다. 이것을 포토샵으로 자르면 아래와 같은 사진이 된다.

 

이것을 사용하여 선크림의 앞면 부분을 구사했다.

 

3차 프로토타입이다. 파스텔톤에 2가지 색상을 추가하여 선크림의 시원한 느낌을 더하고 다양한 느낌을 주었다.

옵션 선택이나 비교용 사진으로 사용할 예정이다.

 

4차 프로토타입이다. 뒤에 제조판매업자, 사이트 주소, 제조번호, 사용기한, 저작권 표시, 선크림 성능 데칼을 추가했다.

테칼의 사진은 아래와 동일하다.

집에 있는 선크림과 비교하며 만든 데칼이다. 오브젝트에 데칼을 입히면 아까 봤던 사진과 동일해진다.

또한 애플 로고 파일은 아래와 같다.

완전히 하얀 로고를 사용하면 선크림 색상의 특징인 밝고 시원한 느낌이 줄어들어 회색빛 로고를 사용했다.

여기까지가 3D 모델링에 들어간 사진들과 결과물이다.

 

3. 이제는 창의력이 필요한 순간

이제부터는 나만의 상상 속에서 애플의 사이트를 그려나가야 한다. 저번에 애플 사이트를 구현해본 적이 있기 때문에 애플의 느낌을 살릴 수 있었다. 

 

먼저 애플의 로고, 애플 텍스트, 국가를 나타낸다 바는 검은색에서 조금 더 밝은 짙은 회색을 사용했다.

 

애플의 사이트의 단조로움과 심플 한 면을 강조하기 위해 날카로운 삼각형을 사용했다. 정확이 4가지의 색상의 삼각형과 사각형으로 이루어져 있다. 또한 가격을 간단하게 적고 추가 설명 없이 "더 알아보기>"를 넣는 것이 애플의 특징이다.(심플함을 위한 단계라고 생각하자) 또한 "구입하기 >"를 넣어 사용자가 구매하기 쉽게 UI를 넣었다. 장바구니와 검색 표시는 최대한 심플하며 모던하게 삽입하였다.

 

애플 선크림을 작은 공간에 특징과 필수 표기사항을 넣었다. "애플 선크림"이란 물체를 강조하기 위해 글씨 포인트를 높이고 가격은 중요하지만 물체와 대조할 땐 하위 순위이기 때문에 글씨체를 바꾸어 준다. 또한 중요한 4가지 기능은 소비자들을 잘 이끌 수 있기 때문에 큰 글씨체와 큰 글씨 포인트를 사용했다. 그밖에 필수 표기사항들은 퀄리티를 높이기 위한 수단이다. 또한 아까 위에서 쓰던 더 알아보기를 통해 더 자세한 내용을 알 수 있게 표기했다. 사진들은 앞뒤 사진 전부다 삽입하여 소비자에게 강한 인식을 위해 2개의 사진을 넣었다.

 


최종본 구성 사항

프로젝트에 들어간 이미지, 레이어, 텍스트: 48개

3D 모델링 작업시간: 약 6시간

ADOBE XD로 웹사이트 프로토타입을 제작한 시간: 4시간

 


애플 화장품 시장 템플릿

링크

 

Copyright © 이태양 All rights reserved.

'ADOBE XD' 카테고리의 다른 글

ADOBE XD에 입문해보자! 애플공식사이트 따라잡기  (0) 2020.06.21