책소개

UI는 웹사이트에서 가장 중요한 요소이지만 이 부분을 디자인하기 위한 준수 사항이나 특별한 원칙은 없다. 메뉴를 만들고 배치하는 방법과 전체 사이트와 조화를 이루면서 사용하기 좋은 UI를 만들기 위한 방향과 웹디자이너라면 반드시 기억해야 할 UI디자인의 80가지 원칙을 공개하고 있다.

[인터넷 교보문고 제공]

 

저자소개

노주환

- 앨리어스앤컴퍼니 대표
- kodak areial imaging technical instructor
- 머천트 솔루션 알파카트 개발
- 패션비투비 프로젝트 참여

[엘리트2000 제공]

목차

01 네비게이션
1. 플래시 메뉴 버튼 만들기
2. 마우스를 올리면 반응하는 플래시 버튼 만들기
3. 펜타 브리드 플래시 네비게이션 만들기
4. 클라우드 나인 네비게이션 바 만들기
5. 라인이 있는 오브젝트를 심볼로 만드는 방법
6. 마우스에 반응하는 테이블 만들기
7. CSS를 이용한 메뉴 만들기
8. Show-Hide Layers 네비게이션 만들기
9. 국민은행 로컬 메뉴바 만들기
10. Nexon 사이트 네비게이션 바 만들기
11. 푸르덴셜 네비게이션 바 만들기
12. 세련된 메탈 느낌의 네비게이션 바 만들기
02 개성있는 페이지
13. 개성있는 메인 만들기
14. 미쟝센 레이아웃 만들기
15. 개성있는 웹페이지 만들기
03 Typography
16. Type / Typeface / Font / Typegraphy
17. 가독성을 위한 타이포그래피
18. 직접 만드는 캘리그래피
04 메타태그와 검색엔진
19. 메타태그와 검색엔진
20. Metadata와 Dublin Code
05 UI 디자인을 위한 체크리스트
21. 가능하다면 프레임(Frame)을 사용하지 않는다
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를 위한 웹 디자인 고려사항