머리말 003
이 책의 구성 미리보기 004
길벗출판사 홈페이지 소개 006
어도비 XD 설치 Q&A 007
Part 0
시작하기 전에
Part 1
어도비 XD CC 시작하기
01 | 어도비 XD는 어떻게 생겼을까?
1 어도비 XD 홈 화면 살펴보기
2 어도비 XD 디자인 모드 화면 살펴보기
3 프로토타입 모드 화면 살펴보기
02 | 아트보드 만들기
1 새 아트보드 만들기
03 | 쉽고 빠르게 여러 가지 도형 그리기
1 둥근 사각형 그리기
2 타원, 다각형 그리기
04 | 선 도구로 다양한 선 그리기
1 직선 그리기
2 다양한 점선 그리기
05 | 펜 도구와 패스 기능 익히기
1 개곡선과 폐곡선 그리기
2 기준점을 편집하여 변경하기
3 호 형태의 닫힌 폐곡선 그리기
06 | 오브젝트 정렬과 재구성하기
1 오브젝트 정렬하기
2 오브젝트 정렬과 배치하기
3 오브젝트를 앞으로 가져오기
4 오브젝트 편집하기
07 | 색상 적용하기
1 오브젝트에 테두리 만들기
2 오브젝트에 불투명도 지정하기
08 | 그레이디언트 적용하기
1 선형 그레이디언트 적용하기
2 방사형 그레이디언트 적용하기
09 | 이미지 편집하기
1 이미지를 확대, 축소하기
2 이미지에 불투명도 조정하기
10 | 마스크 적용하기
1 오브젝트에 이미지 삽입하기
2 모양으로 마스크 기능으로 마스크 만들기
11 | 반복 그리드 익히기
1 이미지 적용 반복 그리드 사용하기
2 텍스트 적용 반복 그리드 사용하기
Part 2
UI 디자인의 기본, 아이콘 만들기
01 | 알림 아이콘 만들기
1 사각형 도구로 알림 아이콘 본체 만들기
2 선과 원형으로 아이콘 완성하기
02 | 설정 아이콘 만들기
1 슬라이더 형태의 선 그리기
2 선 간격 조정하고 원을 그려 완성하기
03 | 다운로드 버튼 만들기
1 둥근 사각형 만들기
2 다운로드 화살표 만들기
04 | 스테퍼 버튼 만들기
1 둥근 사각형 만들기
2 그레
웹과 앱이 함께하는 디자인의 시대
이제 웹디자인과 앱디자인을 별도로 작업하지 않고 동시에 작업해야 하는 UI/UX 디자인의 시대입니다. 모바일 사용자가 늘어나면서 PC 뿐만 아니라 모바일에서도 디자인과 사용자 인터페이스가 동일성을 유지되도록 개발되어야 하기 때문입니다.
어도비 XD(Adobe XD는 UI/UX 디자이너를 위한 와이어프레임(화면을 구성한 디자인 제작 도구입니다. 전체 디자인을 어도비 XD라는 하나의 툴을 통해 와이어프레임, UI 디자인, 앱/웹 디자인을 시뮬레이션한 목업과 인터랙티브한 프로토타입으로 빠르게 제작할 수 있습니다. 사용자에게 앱이나 웹을 어떻게 사용하는지 알려주고, 화면의 연결 상태를 정의할 수 있습니다. 와이어프레임 링크를 통해 디자인에 참여한 디자이너 및 개발자 모두가 동일한 페이지에서 디자인 수정을 원활하게 시작할 수 있습니다.
UI/UX 디자인을 위한 어도비 XD
<어도비 XD CC 2020 무작정 따라하기>는 어도비 XD 프로그램을 통해 UI/UX 디자인을 배우고자 하는 예비 디자이너의 눈높이에 맞게 기본적인 도구를 활용한 아이콘 디자인과 웹&앱 페이지 디자인, UI 디자인, 앱 디자인에 애니메이션과 인터랙션을 적용한 프로토타이핑을 학습합니다. 어도비 XD의 핵심 기능인 반복 그리드 같은 스타일은 디자인 요소를 반복적으로 사용하는 경우가 많은 웹&앱 디자인에서 유용하게 사용할 수 있습니다.
실제 현장에서 어도비 XD를 사용하고 저자가 어도비 XD의 기본 기능과 더불어 디자인 아트워크와 실무에서 빠르게 적용할 수 있는 기능들을 알려줍니다. 효율적인 디자인 작업을 위해 어도비 XD 매뉴얼 기능과 현장에서 필요로 하는 UX 디자인 개념을 소개함으로써 사용자들이 인터렉티브한 결과물을 만들 수 있도록 구성합니다.
이 책을 통하여 독자 여러분의 UI/UX 디자인에 유용한 도움이 되기를 바랍니다.