'UI'에 해당되는 글 2건

  1. 2012.07.04 [책] 웹 스타일 가이드
  2. 2010.06.20 [책] 웹2.0 기획과 디자인
....?2012.07.04 09:29


웹 스타일 가이드

저자
사라 호튼 지음
출판사
인사이트 | 2011-09-06 출간
카테고리
컴퓨터/IT
책소개
웹 스타일 가이드란 무엇인가?짜임새 있는 웹사이트를 만드는 디자...
가격비교

목차

 

감수의 글
추천사
제3판 발간에 붙여

1장 개발 과정
사이트 개발 팀 구성 웹 팀의 역할과 책임
기획에 앞서
웹사이트 형식과 문서 정적 웹 페이지와 동적 웹 페이지
웹 콘텐츠 관리
웹 툴의 진화
거대한 파급력을 지닌 웹 서비스 사이트 개발 과정 사이트 정의 및 기획 정보 설계
사이트 디자인
사이트 구축
사이트 마케팅
트래킹, 평가, 유지
PM 체크리스트 제작 최종 PM 체크리스트 작성 사이트 프로젝트 운영에 대한 일반적인 제언

2장 유니버설 유저빌러티 유니버설 유저빌러티의 기초 접근성
유저빌러티와 사용자 중심 디자인 유니버설 디자인
유니버설 유저빌러티 가이드라인 일반' 사용자 넘어서기 적응성 지원하기
디자인 과정에서 유니버설 유저빌러티 사용자 조사
디자인과 평가

3장 정보 설계
기존 정보 조직하기 웹 콘텐츠 목록
정보 덩이짓기
사이트 구조
사이트 브라우즈 기능 사이트 검색
사이트 구조 테마 요약
정보 설계의 제시 방식 사이트 다이어그램 와이어프레임

4장 인터페이스 설계 내비게이션과 길 찾기 경로: 경로 안내
구역과 경계: 일관성의 역설
접점: 동네 커피숍이 좋을까, 타임스퀘어가 좋을까?
지형지물: '현재 위치' 요약: 웹사이트에서 길찾기의 원칙
브라우즈 대 검색
방향성
웹 검색 사용자 지원 인터페이스 디자인
명확한 내비게이션 지원
막다른 페이지가 없어야 한다
직접 접속
단순성과 일관성
디자인의 완성도와 안정성
피드백과 다이얼로그
통신 속도와 상호작용
인터페이스 디자인 관행 정보 디자인
독립된 웹 페이지
요약: 정보 디자인 가이드라인 기업형 인터페이스 인터페이스의 구성 맥락

5장 사이트 설계
시맨틱 콘텐츠 마크업 HTML 문서 구조
다양한 형식의 브라우저에 유의하라
요약
사이트 파일 구조 숨겨진 사이트 시멘틱
이름 짓기 관습
효과성과 유지 가능성을 높이는 구조
HTML 콘텐츠 콘테이너에 이용된 시멘틱 구조
검색 엔진 최적화 웹 검색의 롱 테일 현상
검색 엔진의 기본 개념
검색을 위한 페이지 최적화

6장 페이지 구축
맥락을 벗어나지 않는 사이트 디자인
월드 와이드 웹
기업 웹 아이덴티티 페이지 구조와 사이트 디자인 페이지 헤더
스캔 칼럼
콘텐츠 영역
페이지 템플릿
내부 페이지 템플릿
2차 하위 페이지 템플릿 메인 페이지

7장 페이지 디자인
문서 디자인
적응적 디자인
문서 순서
선택적 디스플레이
대체 텍스트
매체 이해
시각 디자인
일관성
대비 효과
여백
스타일
간결함
시각 디자인의 게슈탈트(모양) 페이지 프레임워크 고정폭 페이지
유동폭 페이지
페이지 폭과 글줄의 길이 페이지 길이
헤더와 푸터
웹 페이지의 수직적 계층화
웹 페이지를 위한 디자인 그리드

8장 타이포그래피
웹 타이포그래피의 특징 매번 다른 구성
콘텐츠 구조와 시각적 논리 CSS
일관성
가독성
정렬과 여백
정렬 선택
글줄 길이
글자 모양
서체
서체의 선택
서체의 크기
강조
그래픽 요소를 동반한 제목 타이포그래피
제목 타이포그래피 만들기

9장 편집 스타일
글 구성하기
사이트 구성
페이지 구성
온라인 문체
대비와 강조
산문체
기타 문체상의 고려사항
키워드
제목과 소제목
페이지 제목
웹 문서를 위한 텍스트 포맷팅 워드 프로세서의 스타일 시트 특수 문자
링크
설명적인 링크
링크의 밑줄 처리
방문했던 링크와 방문 전의 링크

10장 폼과 애플리케이션 상호작용을 지원하는 기술 Ajax
접근성
웹 애플리케이션 만들기
절제와 단순함
디자인 패턴
표준
상호작용 방법 설명하기
오류에 대한 반응
디자인 과정
와이어프레임
프로토타입

11장 그래픽
웹 그래픽의 역할 콘텐트라는 성질을 지닌 그래픽 일러스트레이션
도형과 계량적 자료
통합적인 시각 표현
웹의 그래픽 의사소통
웹 그래픽의 특징
컬러 디스플레이
화면 해상도
감마
그래픽과 네트워크 속도
그래픽 파일 포맷
GIF 그래픽
JPEG 그래픽
PNG 그래픽
이미지 만들기 전략
인터페이스 요소
GIF로 만들 때
JPEG로 만들 때
다이어그램과 일러스트레이션은 벡터 그래픽으로
웹사이트 그래픽의 보관 요약: 그래픽 파일 포맷
화면에 보이는 이미지
스크린 컬러 아트워크와 인쇄 컬러 아트워크
복잡한 그림이나 사진
컴퓨터 화면을 위한 다이어그램
그래픽 텍스트
큰 이미지로 작업하기
그래픽 숨기기
그래픽 마크업
높이와 너비 태그
대체 텍스트
배경 컬러
배경 그래픽

12장 멀티미디어
멀티미디어 도입을 위한 고려 사항
웹 멀티미디어 전략
멀티미디어 준비하기
처리 과정
전송
디자인과 멀티미디어
사용자에게 고지하라
제어 기능을 제공하라
키보드 인터랙션을 지원하라
선택을 제공하라

축약단어
참고문헌
도판 저작권
인덱스

 

 

웹 사이트가 제작되는 프로세스와 기술들을 토대로

정보설계 및 기술 등을 설명해주고 있다.

 

 

 

저작자 표시 비영리 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 앵~
....?2010.06.20 16:57
웹2.0기획과디자인
카테고리 컴퓨터/IT > 웹사이트 > 웹사이트기획
지은이 노주환 (플루토북, 2007년)
상세보기

목차

들어가기 전에
1. 인포메이션 디자인
2. 인터페이스 디자인
3. 인터랙션 디자인
4. 그래픽 디자인
5. 마케팅 디자인

Part 1. 인포메이션 디자인
1. 에피센터 디자인
2. 빈 서판
3. 마이크로링크
4. 태그 클라우드
5. 계층 구조의 시각화
6. 탄성 리스트
7. 비주얼 서치
8. 검색과 브라우징의 결합
9. 맥락 속의 핵심어
10. 정보 구성기
11. 드릴다운 네비게이션
12. 블로그 타입의 초기화면
13. 대시보드 디자인
14. 썸샷
15. 스크린샷
16. 스크린캐스트
17. 순서 매기기
18. 최근 읽은 사람들 위젯
19. 사이드노트
20. 저작권 없는 푸터

Part 2. 인터페이스 디자인
1. 웨블리케이션
2. 웹의 위젯화
3. 포터블 인터페이스
4. 제약이론TOC
5. 포틀릿 기반의 인터페이스
6. 포스트잇 타입 인터페이스
7. 위키 타입 인터페이스
8. 카토그래피 인터페이스
9. PIP 인터페이스
10. 다중 검색엔진 인터페이스
11. URL 체계를 닮은 검색 인터페이스
12. 탭 패턴
13. 멀티 아이프레임
14. 강력한 그룹핑
15. 보기 옵션
16. 큰 입력 필드
17. 클릭 단서
18. 다이렉트 컨트롤 버튼
19. 원스톱 등록

Part 3. 인터랙션 디자인
1. 단일 컨텍스트 다중 작업
2. YFT
3. 로딩 표시기
4. 자동 완성
5. 빠른 검색
6. 미리보기 팝업
7. 빠른 저장
8. 빠른 편집
9. 제약 기법
10. 인터랙티브 모자이크
11. 피시아이 메뉴
12. 북마크릿과 파비콘

Part 4. 그래픽 디자인
1. 단순함
2. 단순한 레이아웃
3. 단순한 네비게이션
4. 투명한 컨트롤 패널
5. 본문 중심의 레이아웃
6. 분리된 헤더
7. UNB 운용
8. 가운데 정렬
9. 리퀴드 디자인
10. 자연친화적 디자인
11. 강한 색상과 밝은 색상
12. 크고 진한 글자
13. 둥글게 처리된 형태
14. VL아이콘
15. 선명하고 정교한 그래픽 요소
16. 거시 여백과 미시 여백
17. 코멘트 디자인
18. 지도 디자인

Part 5. 마케팅 디자인
1. 사용 계기
2. 서비스 모델 전달하기
3. 버즈 마케팅
4. 숫자 마케팅
5. 디자인 요소로서의 광고 요소
6. 웹 배지
7. 만화 마케팅


웹 서비스에서의 디자인의 의미를 말해주고, 목적과 방법에 따라 총 5가지 유형으로 나누어 설명해주고 있다.
최근 UI 관련해서 벤치마킹을 하던 중, 이전에 살펴보지 못했던 UI 종류들을 파악하는데 좋은 자료가 되었다.
한 가지 아쉬운 점은 총 5가지로 디자인으로 나누어 각각의 의미에 따른 샘플들을 토대로 설명해주고 있는데,
샘플들의 구분 기준이 모호하지 않나? 라는 생각이 자주 들었다.
당시의 트랜드에 대해 잘 설명해주고 있고, 각각의 샘플에서 확인할 수 있는 관련 사이트와 관련이론에 대한
짤막하지만 소중한 정보가 담겨있다. :)



저작자 표시 비영리 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 앵~

티스토리 툴바