소장자료검색

책소개

웹디자이너가 항상 기억해야 할 UI 디자인의 80가지 원칙을 공개한다. 잘 만들어진 네비게이션을 소개하고, 사이트에 적용된 실제 사례를 익혀보며 개성있는 페이지를 꾸미기 위한 방법도 알아본다. 많은 사용자를 유도하기 위한 검색엔진 등록 방법과 가독성 높은 웹페이지를 만들기 위한 Typography를 소개하고, UI 디자인을 위한 일반적인 기준을 소개하고 있다. 이 책에서 짚어주는 80가지 UI 디자인의 원칙만 제대로 익힌다면 개성있는 디자인과 사용성을 고루 겸비한 웹사이트를 제작할 수 있다.

[부록 CD] bookmark / extension / program / source

목차

01 네비게이션
1. 플래쉬 메뉴 버튼 만들기
2. 마우스를 대면 반응하는 플래쉬 버튼 만들기
3. 펜타 브리드 플래쉬 메뉴 만들기
4. 클라우드 나인 네비게이션 바 만들기
5. 라인이 있는 오브젝트 심볼로 만드는 방법
6. 마우스에 반응하는 테이블 만들기
7. CSS를 이용한 메뉴 만들기
8. Show Hide Layer 메뉴 만들기
9. 국민은행 로컬 메뉴바 만들기
10. Nexon 사이트 네비게이션 바 만들기
11. 푸르덴셜 네비게이션 바 만들기
12. 메탈 느낌의 네비게이션 바 만들기

02 개성있는 페이지
13. 개성있는 메인 만들기
14. 미쟝센 레이아웃 만들기
15. 개성있는 웹페이지 만들기

03 Typography
16. Type / Typeface / Font / Typography
17. 가독성을 위한 타이포그래피
18. 직접 만드는 캘리그래피

04 메타태그와 검색엔진
19. 메타태그와 검색엔진
20. Metadata와 Dublin Code

05 UI 디자인을 위한 체크리스트
21. 가능한 프레임
22. 개인 서비스를 위한 섹션는 지양하라
23. 컨텐츠가 많으면 검색 기능을 추가하라
24. 같은 페이지내에서 그림자 효과의 방향은 일정하게 유지하라
25. 극적인 표현은 한 번이면 족하다
26. 글로벌 분위기의 이미지 사용을 자제하라
27. 네비게이션 메뉴바 제작시 유의 사항
28. 대소문자의 사용에 유의하라
29. 동적 요소는 가능한 적게 사용하라
30. 디자인 컨셉은 디자이너의 가장 큰 능력이다

31. 레이블링은 알기 쉽게 쉽고 간단히 명명하라
32. 만들어 장식하기 보다는 있는 것부터 정리하라
33. 메뉴와 버튼을 배너처럼 만들지 말라
34. 메뉴의 중요도를 차별화하라
35. 메세지를 전달할 중심 매체를 정하라
36. 메인 메뉴의 개수는 6~7개가 적당하다
37. 메타 태그를 충실하게 작성하라
38. 밝은 색조는 눈을 피로하게 한다
39. 색상 선택이 어려우면 채도를 이용하라
40. 배경 음악은 신중히 사용하라

41. 배경 이미지는 어둡거나 밝아야 한다 그리고 촘촘해야 한다
42. 방문자의 사용환경을 고려하라
43. 버튼 클릭은 자연스럽게 유도하라
44. 사용성이냐 디자인이냐
45. 사용자의 경험이 성공의 열쇠이다
46. 사용자는 컨텐츠를 모두 읽지 않는다는 것을 명심하라
47. 사이트 맵을 소홀히 여기지 마라
48. 사진을 이용한 버튼은 모던한 느낌을 준다
49. 세로선은 깔끔하게 정렬되도록 도와준다
50. 아이콘은 반드시 직접 제작하라

51. 여백으로 구분하라
52. 원을 이용한 레이아웃은 신선하다
53. 웹 에이전시의 웹 사이트는 단지 참고만 하라
54. 웹 페이지의 최적화를 위해 노력하라
55. 웹 페이지 최적화를 위한 방법
56. 의미없는 스플래쉬 페이지는 삼가라
57. 의미없는 전체창은 삼가라
58. 이용할 대상을 분명히 정하라
59. 작은 창 열기는 신중히 결정하라
60. 직접 도메인을 입력해서 방문하는 사용자가

61. 직관적인 인터페이스를 추구하라
62. 직접 찍은 이미지를 사용하라
63. 중요한 컨텐츠는 좌상단에서부터 배치한다
64. 컨텐츠에 집중할 수 있는 레이아웃을 사용하라
65. 큰 이미지는 쪼개어 코딩하라
66. 텍스트 버튼은 간격과 정렬에 유의하라
67. 텍스트 버튼은 한 줄에 표현한다
68. 페이지 스크롤을 두려워하지 말자
69. 페이지의 현재 위치를 알 수 있도록 반드시 레이블링을 한다
70. 폰트는 세 종류만 사용하라

71. 플래쉬의 장단점을 파악하여 사용하라
72. 피자가 아니라 밥이 되어야 한다
73. 이미지에 Alt 태그는 반드시 입력하라
74. Contact Us와 Mail To Us를 구분하라
75. Creative에서 한발 물러서라
76. HTML 텍스트는 저해상도라는 것을 명심하라
77. Identity를 유지하라
78. Identity를 잘 활용한 사이트
79. Target값을 _Blank로 설정하기 전에 그 필요성을 한번 더 생각하라
80. User Interface를 제대로 만들기 위해 고려해야 할 것