디자이너와 개발자가 함께 보는 눈길을 사로잡는 스마트폰 앱 UX UI 디자인
도서명:디자이너와 개발자가 함께 보는 눈길을 사로잡는 스마트폰 앱 UX UI 디자인
저자/출판사:김영삼/위키북스
쪽수:528쪽
출판일:2014-03-05
ISBN:9788998139476
목차
▣ 1장: 스마트폰 앱 UX, UI 디자인 환경
[01] UX, UI 디자인
UX란?
- UX
- UX 디자인
- UX 주요 사례
- 스마트폰 앱의 UX 환경 변화
UI와 GUI란?
- UI
- UI 디자인 원칙
- GUI
- UI 디자인의 흐름
UX, UI 디자인
- UX, UI 디자인은 기술과 함께 발전한다
- UX, UI 디자인은 표현과 경험이다
- UX, UI 디자인 프로세스
- UX, UI 디자이너의 자세
- 스마트폰 앱 UX, UI 디자인 특징
UX, UI 디자인 트렌드
- 인터렉션 디자인
- 플랫 디자인
- 인포그래픽스
[02] 스마트폰 앱 디자인 환경
스마트폰 앱 제작 환경
- 스마트폰이란?
- 애플리케이션/앱
- 모바일 앱의 종류
- 스마트폰 앱 마켓, 스토어
- 스마트폰 운영체제
- 피처폰의 특징
- 스마트폰과 피처폰 콘텐츠 디자인의 차이
- 스마트폰 운영체제별 개발 환경
스마트폰 앱 디자인의 특징
- 스마트폰 앱 UI 구성 시 고려 사항
- UI 가이드라인
- 나인 패치 이미지의 활용
- 레이아웃 및 구조
- 색상 패턴
[03] 스마트폰 앱 디자인 가이드
안드로이드 UI 디자인 가이드 및 특징
- 구글(안드로이드)의 10가지 UX 디자인 원칙
- 스마트폰의 화면 크기 및 해상도
- 런처 아이콘(애플리케이션 실행 아이콘)
- 메뉴 아이콘
- 상태 바 아이콘
- 탭 아이콘
- 다이얼로그 아이콘
- 리스트 아이콘
- 위젯 디자인
- 최신 버전의 안드로이드 운영체제의 특징
- 아이폰 UI 디자인 가이드 및 특징
- Less & More
아이폰 UI 디자인 원칙
- 스마트폰 화면 크기 및 레티나 디스플레이
- 아이콘 제작 환경
- 아이콘 제작 순서
- 아이콘 디자인 특징
- iOS7 UI 디자인 특징
▣ 2장: 앱 디자인을 위한 그래픽 활용
[01] 그래픽 디자인의 활용
해상도 및 스마트폰 디스플레이
- 해상도
- 해상도와 스마트폰 디스플레이와의 관계
- 해상도별 제작 순서
이미지 파일 형식 및 색상
- JPG
- GIF
- PNG
- 색상 및 비트의 이해
디자인 프로그램의 활용
- 일러스트레이터의 활용
- 포토샵의 활용
[02] 일러스트레이터의 활용
일러스트레이터의 환경
- 벡터 그래픽 제작 방식
- 벡터 그래픽 제작 방식의 장단점
- 일러스트레이터의 화면 구성
- 오브젝트 표현 및 구성
일러스트레이터의 주요 기능
- 단축키 활용
- 작업(Document) 창 설정
- 선택 도구(Selection Tool)의 활용과 오브젝트 속성
- 오브젝트 그리기
- 펜 도구의 활용
- 선(Stroke)의 속성
- 오브젝트의 잠금(Lock) 및 그룹(Group)
- 반복 실행 및 작업 되돌리기
- 오브젝트 명암 처리 기법
- 오브젝트 크기 조절, 회전, 반전 기법
- 연결 및 라운드 코너(둥근 모서리화)
- 레이어의 활용
- 3D와 오브젝트 확장
- 패턴 제작 및 활용
[03] 포토샵의 활용
포토샵의 환경
- 비트맵 제작 방식
- 비트맵 제작 방식의 장단점
- 안티 알리어스
- 포토샵의 화면
포토샵의 주요기능
- 주요 단축키 활용
- 작업 창(Document) 설정
- 창 편집 및 화면 정보
- New Window의 활용
- 색상 적용 및 색상 견본 팔레트
- 선택 도구의 활용 및 편집
- 레이어의 활용 및 편집
- 그라디언트의 활용
- 레이어 스타일
- 레이어 스타일 수정 및 편집
- 레이어 마스크
- 펜 도구와 패스의 활용
- 도형 도구의 활용
- 패턴의 활용
- 브러시 도구 및 연필 도구의 활용
- 일러스트레이터와의 활용
- 자유 변형 도구(이미지 크기 조절)
- 작업 되돌리기
▣ 3장: 스마트폰 앱 UX, UI 디자인
[01] 아이콘 디자인
아이콘 디자인의 특징
- 아이콘이란?
- 확실한 메타포의 사용
- 픽셀 디자인(도트디자인)
- 평면 아이콘 및 효과
- 투시 기법에 따른 아이콘 표현(3D)
- 빛과 아이콘 디자인
- 빛의 굴절 및 표현
스마트폰 앱 아이콘의 특징
- 스마트폰 UI 아이콘의 구분
- 스마트폰 앱 아이콘의 특징
[02] 스마트폰 앱 UX, UI 디자인
일러스트레이터를 활용한 아이콘 디자인
- 일러스트레이터 오브젝트의 포토샵 활용
- 기본 아이콘 디자인
- 응용 아이콘 디자인
- 스마트폰 UI 아이콘 디자인
스마트폰 앱 활용 버튼
- 아쿠아 버튼
- 그라디언트 버튼
런처 아이콘 디자인
- 런처 아이콘 제작 활용
- 런처 아이콘 디자인
위젯 및 패턴 디자인
- 위젯
- 패턴 디자인
▣ 4장: 스마트폰 앱 프로젝트
[01] 앱 디자인 제작 프로세스
앱 개발자 구분
- 기획자 및 프로젝트 매니저
- 앱 프로그래머 및 제작 과정
- 앱 디자이너의 역할 및 자세
앱 디자인 기획
- 디자인 기획
- 페이퍼 프로토타입 및 목업
- 프로토타입 기획서
[02] 앱 디자인 제작
앱 UI 디자인
- 런처 아이콘 제작
- Android, iOS 대응 제작 프로세스
- 해상도별 이미지 크기 및 레이아웃 설정
- 나인패치 제작
스타일 가이드 및 이미지 저장
- 나인패치 종류
- 이미지 커팅 및 나인패치 활용
- 파일명 표기 및 이미지 저장
- 스타일 가이드
