본문 바로가기

Design/sketch

[sketch/앱디자인] 그랩 클론앱 2페이지


Grab Clone App

그랩 클론 만들기

프로젝트 시작


스케치의 메인화면 이중 상단 templates를 누르면 디바이스별 템플릿들을 볼 수 있다.


Material Design을 확인한다.


사용할 템플릿을 확인 후 왼쪽 pages에 페이지(포토샵에서는 아트보드와 같은개념)를 추가해준다.


디폴트테마에서 dark theme를 복사한 후 새로만든 페이지로 가져온다.


element들을 삭제한 후


배경을 흰색으로 바꾸어주자

로딩화면


적당한 크기로 로고를 배치해주자.

부제목


아까와 동일한 화면을 하나 더 만들어준 후


다시 안드로이드 메뉴로 돌아가 헴버거 메뉴를 복사해준다.



기존 back icon을 삭제해 준후 햄버거 메뉴를 붙여넣은 후 색상을 흰색으로 바꾸어주자.

색상표:
다크그린: 008d31
메인그린: 00b03e
메인블루: 4490de
실버: aaacb8
블랙: 57606f
크림: e9eef1

헤더


헤더를 메인그린으로 수정 후


최상단 navbar를 detach from symbol을 한다.
그 후 더블클릭을 하면


위처럼 색상을 바꿀 수 있도록 레이어가 생긴다. 다크그린으로 바꾸어주자.


기존 레이어를 바꾼 후 로고를 넣어주자.


그 후



디자인 심볼에 있는 아이콘을 하나 넣어주자.

화면


그 후 최하단 레이어에 맵 이미지를 넣어준다.


오토바이 아이콘을 넣어준 후


크기를 줄인 후 여러곳에 넣어주자.


사각형을 추가해준 후


약간의 radius를 준 후 border제거


배경은 흰색 그리고 약간의 shadow를 준다.



그리고 중간에 라인을 준 후 색상은 #dddddd

라인하나를 더 추가후 메인블루로 색상을 변경

두개를 겉의 붙여 만들어준다.


한세트 더 복사 후 색상을 초록색으로 변경


그 후 텍스트를 하나 추가한다.(팔레트에 있는 회색,폰트10,light)


그 후 아래 텍스트를 또 추가해준다.(팔레트에 있는 짙은검은색,폰트16,regular)


그 후 색상을 옅은 색상으로 변경 후 opacity를 줄여준다.

하단부분


사각형 추가(흰색 보더없음)


그 후 하단 커스텀 아이콘추가


그 후 active를 위한 색상변경과 하단 초록색 rectangle 추가


그 후 상단 사각형을 추가 후


목적지 선택화면추가