UX/UI 디자인 기초 이론부터 XD를 활용한 프로토타입 제작까지,웹디자이너를 위한 가장 완벽한 레시피!웹디자인에 꼭 필요한 UX/UI 디자인 기초 이론부터 프로토타입 제작 도구인 XD 활용법까지 제대로 배울 수 있다. UX/UI 디자인 기획과 웹디자인 워크플로우를 먼저 이해한 후 XD의 기본&핵심 기능을 익혀 다양한 실무 활용 예제로 프로토타입을 직접 제작해본다. XD 최신 버전에 완벽히 대응하였으며, 기본 기능과 활용법을 완벽하게 마스터할 수 있는 3단계 학습 방법인 [기능 실습] - [한눈에 실습] - [실무 실습]의 구성은 누구나 XD를 제대로 배워 바로 써먹을 수 있도록 도와준다. 『맛있는 디자인 어도비 XD』 한 권이면 예비 웹디자이너가 필요한 것을 모두 학습할 수 있다.
중앙입시교육연구원, 신문사, IT 벤처 회사 등에서 온라인 개발부의 웹디자이너로 일하며 관련 업무를 익혀왔습니다. 유럽의 풍부한 감성적 토양을 내 것으로 만들고자 스위스 남부 루가노에 위치한 USI(Universita della Svizzera Italiana)에 편입하여 Communication Arts를 전공하며 기호학, 미디어, 디지털 문화기획에 대한 지식 습득의 즐거움을 누렸고, 대학원에서는 디자인공예를 전공하며 디자인 소양을 갖추고자 했습니다. 현재는 협회 및 학원 등에서 UX/UI 디자인을 강의하고 있습니다.
PART 01. 기초가 튼튼해지는 XD 기본편CHAPTER 01. UX/UI 디자인을 기획하다LESSON 01. UX/UI 디자인 알아보기 : UX/UI 개념과 프로세스 이해하기UX 개념과 과정 이해하기UI 개념과 설계 지침 이해하기앱과 웹, 반응형 웹 이해하기UX/UI 개발 프로세스 한눈에 살펴보기LESSON 02. 벤치마킹 : 사용자의 요구와 콘텐츠 내용 분석하기벤치마킹 이해하기다양한 벤치마킹 사례 살펴보기LESSON 03. 아이디어 도출 : 주제에 맞는 아이디어 정리하기아이디어 도출 이해하기LESSON 04. 구조 전략 설계 : 콘셉트를 시각화하기콘셉트 시각화 이해하기콘셉트 시각화 한눈에 살펴보기LESSON 05. 기술적 구현 : 스토리보드 작성하기스토리보드 이해하기와이어프레임 작성하기스토리보드 작성하기LESSON 06. 목업 : 개발 전 디자인 결과물 만들어보기목업 이해하기LESSON 07. 비주얼 디자인 프로토타이핑 : 프로토타입 이해하고 만들기프로토타이핑 이해하기프로토타이핑 도구 알아보기CHAPTER 02. UX/UI 디자인을 제작하다LESSON 01. XD, 어떻게 생겼지 : XD 실행 화면 살펴보기XD 워크플로우 이해하기XD 시작/기본 화면 알아보기도구 이름과 기능 살펴보기속성 관리자 살펴보기LESSON 02. XD 기본 도구 다루기 : 아트보드와 레이어 조작하기아트보드 다루기[간단 실습] 아트보드 만들고 이름 변경하기[간단 실습] 아트보드 추가하고 삭제하기[간단 실습] 아트보드 정렬하고 옮기기[간단 실습] 아트보드에 색 적용하기[간단 실습] 아트보드 확대/축소하기[간단 실습] 단축키로 아트보드 보기 설정하기레이어 다루기[간단 실습] 레이어 정렬하고 그룹 만들기[간단 실습] 레이어 이름 변경하기[간단 실습] 레이어 복제하기[간단 실습] 레이어 순서 바꾸기[간단 실습] 레이어 잠그기, 숨기기, 삭제하기[간단 실습] 레이어 내보내기[간단 실습] 포토샵에서 이미지 편집해 XD로 불러오기LESSON 03. XD 기본 오브젝트 다루기 : 도형과 선 그리고 색 적용하기오브젝트 다루기[간단 실습] 사각형 그리고 색 적용하기[간단 실습] 사각형 모서리 수정하기[간단 실습] 사각형 테두리 수정하기[간단 실습] 원, 다각형 그리기[간단 실습] 선 그리고 수정하기펜 도구 다루기[간단 실습] 펜 도구로 그리기[한눈에 실습] 펜 도구로 열린 도형(직선) 그리기[한눈에 실습] 펜 도구로 닫힌 도형(직선) 그리기[간단 실습] 펜 도구로 열린 도형(곡선) 그리기[간단 실습] 펜 도구로 닫힌 도형(곡선) 그리기[한눈에 실습] 베지어 게임 사이트 활용해 패스 그리기[간단 실습] 도형 오브젝트 이동하고 복제하기[한눈에 실습] 오브젝트에 불투명도, 그림자, 배경 흐림 효과 적용하기오브젝트 정렬 알아보기[간단 실습] 오브젝트 상단, 하단 정렬하기[간단 실습] 오브젝트 왼쪽, 오른쪽 정렬하기오브젝트 순서 알아보기[간단 실습] 오브젝트 순서 바꾸기그레이디언트 알아보기[간단 실습] 오브젝트에 그레이디언트 적용하기[간단 실습] 그레이디언트 수정하기[간단 실습] 그레이디언트 추가하고 삭제하기오브젝트 병합 알아보기[간단 실습] 오브젝트 병합하기[한눈에 실습] 오브젝트 병합하여 톱니바퀴 만들기3D 변형 기능 알아보기3D 캔버스 컨트롤 살펴보기[간단 실습] 캔버스 컨트롤로 오브젝트 3D 변형하기[간단 실습] 회전 수치를 입력해 오브젝트 3D 변형하기[한눈에 실습] X축 변형하기[한눈에 실습] Y축 변형하기[한눈에 실습] Z축 변형하기[한눈에 실습] X, Y축 함께 변형하기[간단 실습] 3D 변형 기능으로 오브젝트에 원근감 표현하기LESSON 04. XD 기본 도구 활용하기 : 문자 입력하고 그리드 활용하기문자 도구 다루기[간단 실습] 문자 입력하기[간단 실습] 문자에 다양한 속성 적용하기[간단 실습] 플러그인 설치해 더미 텍스트 입력하기그리드 다루기[간단 실습] 레이아웃 그리드 만들기[간단 실습] 반복 그리드(행) 활용하기[간단 실습] 반복 그리드(오브젝트) 활용하기LESSON 05. XD 이미지 편집하기 : 이미지 삽입하고 마스크 적용하기[간단 실습] 이미지 삽입하기[간단 실습] 영역 지정하여 이미지 삽입하기[간단 실습] 이미지 영역의 모양 변경하고 삽입한 이미지 교체하기[간단 실습] 삽입한 이미지를 포토샵에서 편집하기[간단 실습] 벡터 이미지를 가져와 편집하기이미지 혼합 모드 알아보기[간단 실습] 혼합 모드 실행하기혼합 모드 미리 보기마스크 알아보기[간단 실습] 마스크 적용하여 부채꼴 모양 만들기[간단 실습] 마스크 해제하기[한눈에 실습] 마스크 적용해 도트 패턴 하트 만들기LESSON 06. XD 애니메이션 적용하기 : 프로토타입을 위한 인터랙션 화면 전환 효과 적용하기[간단 실습] 자동 애니메이션 적용하기[간단 실습] 슬라이드 애니메이션 적용하기[한눈에 실습] 대시보드 애니메이션 적용하기LESSON 07. 플러그인 활용하기 : 제플린과 다양한 플러그인 설치하기제플린 알아보기[간단 실습] 제플린 설치하고 연동하기제플린 기본 구성 살펴보기[간단 실습] 제플린 프로젝트 작업하기[간단 실습] 이미지 요소 확인하기[간단 실습] 텍스트 요소 확인하기[간단 실습] 스타일 가이드에 요소 추가하기[간단 실습] 노트 기능으로 팀과 협업하기[간단 실습] 버전 관리 기능으로 협업하기다양한 플러그인 알아보기[간단 실습] 플러그인 설치하기유용한 플러그인 한눈에 살펴보기PART 02. UX/UI 디자인을 위한 XD 활용편CHAPTER 01. 다양한 프로토타입을 만들며 자유자재로 XD 활용하기LESSON 01. 라인 아이콘 세트 제작하기 : 도형 도구와 병합을 활용해 아이콘 만들기디자인 모드에서 기본 아트보드 준비하기홈 아이콘 만들기프로필 아이콘 만들기종 아이콘 만들기아이디 카드 아이콘 만들기LESSON 02. 마우스 오버 버튼 제작하기 : 구성 요소 활용해 마우스 오버 상태 추가하기기본 아트보드 준비하고 아이콘 테두리 만들기ON/OFF 입력해 마스크 적용하기구성 요소 만들기 기능으로 마우스 오버 상태 만들기마우스 오버 상태 동작 확인하기메뉴 아이콘 테두리 만들기MENU 입력해 마스크 적용하기구성 요소 만들기 기능으로 마우스 오버 상태 만들기마우스 오버 상태 동작 확인하기LESSON 03. 마우스 오버 가로 메뉴바 제작하기 : 구성 요소 활용해 마우스 오버 상태 추가하기아이콘에 마스크 적용하기아이콘을 구성 요소로 만들기각 아이콘에 마스크 적용하고 구성 요소로 만들기구성 요소 활용해 마우스 오버 상태 만들기마우스 오버 상태 동작 확인하기LESSON 04. 마우스 오버 세로 메뉴바 제작하기 : 구성 요소 활용해 마우스 오버 상태 추가하기아트보드 만들고 플러그인 설치하기아이콘을 에셋으로 추가하기기본 상태의 세로 메뉴 만들기메뉴의 디테일한 요소 만들기마우스 오버 상태의 긴 메뉴 만들기에셋으로 추가한 아이콘 배치하기마우스 오버 상태의 문자 입력하고 마스크 적용하기구성 요소 활용해 마우스 오버 상태 만들기마우스 오버 상태의 문자 입력하고 마스크 적용하기구성 요소 활용해 마우스 오버 상태 만들기LESSON 05. 뮤직 플레이어 UI 제작하기 : 이미지 드래그 슬라이더 제작하기준비 파일 불러와 호버 버튼 만들기다운로드 리스트 만들기인터랙션 적용할 아트보드 만들기인터랙션으로 드래그 애니메이트 적용하기헤더 영역(타이틀 및 앨범 리스트 영역) 만들기레이아웃에 맞춰 앨범 리스트 만들기인터랙션 적용할 아트보드 복사하기인터랙션으로 드래그 애니메이트 적용하기LESSON 06. 뉴모피즘 스타일의 스마트홈 UI 제작하기 : 다이얼 드래그 제작하기준비 파일 불러와 드래그 오브젝트 만들기드래그 다이얼 버튼 만들기온도 표시 문구 만들기룸 넘버 영역 만들기하단 영역 구분선 만들기아이콘을 배치할 버튼 영역 만들기버튼 영역에 아이콘 배치해 마무리하기인터랙션 적용할 아트보드 복사하기인터랙션으로 드래그 애니메이트 적용하기CHAPTER 02. 모바일 앱 프로토타입으로 실무 UX/UI 디자인 익히기LESSON 01. 날씨 앱 UI 디자인하기 : 모바일용 프로토타입 만들기새 아트보드 만들고 배경 지정하기구성 요소 불러와 메인 페이지 만들기반복 그리드로 세부 요소 배치하기오늘의 날씨 페이지 만들기세계 날씨 페이지 만들기접속 시간에 맞는 개별 페이지 구성하기인터랙션으로 탭 애니메이트 적용하기LESSON 02. 카페 앱 UI 디자인하기 : 모바일용 프로토타입 만들기준비 파일 불러와 메인 페이지 만들기메인 페이지의 터치 버튼 영역 만들기메뉴 선택 페이지 만들기스탬프 적립 페이지 만들기매장 찾기 페이지 만들기게시판 페이지 만들기인터랙션으로 탭 애니메이트 적용하기LESSON 03. 여행 소개 앱 UI 디자인하기 : 모바일용 프로토타입 만들기새 아트보드 만들고 로그인 페이지 만들기아트보드 추가해 메인 페이지 만들기여행지 카테고리 페이지 만들기여행지 사진을 배치할 본문 영역 만들기사각형 영역에 여행지 사진 배치하기여행지 세부 페이지 만들기여행지 세부 스크롤 페이지 만들기인터랙션으로 탭 애니메이트 적용하기
