1. Web
IA
bookslope
1

2. 2

3. 3

4. 4

5. IA
5

6. Information Architecture
Information Architect
6

7. IA
7

8. IA
8

9. ?
IA
9

10. IA Summit 2007
http://www.iasummit.org/2007/
10

11. IA One Sheeters
http://www.iaonesheeters.com
11

12. 12

13. IA One Sheeters
http://www.iaonesheeters.com
13

14. IA One Sheeters
http://www.iaonesheeters.com
14

15. IA One-Sheeter
IA
IA
15

16. Web
16

17. CSS
17

18. Blue Dot
http://bluedot.us/
18

19. Yahoo! UI Library
http://developer.yahoo.com/yui/grids/
19

20. Layout Gala
http://blog.html.it/layoutgala/
20

21. Apple Human Interface Guidelines
http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/
21

22. Windows Vista User Experience Guidelines
http://msdn2.microsoft.com/en-us/library/aa511279.aspx
22

23. 23

24. A Pattern Language
http://patternlanguage.com
24

25. WebPatterns.org
http://webpatterns.org
25

26. WebPatterns.org
Web Patterns
Patterns in OOAD
Patterns in HCI/UI
Patterns in Architecture
Patterns in web development
Books on Patterns
26

27. OREILLY
http://www.oreilly.co.jp/books/9784873113166/
27

28. OREILLY
28

29. www.welie.com
http://www.welie.com/patterns/
29

30. www.welie.com
Web Design Patterns
Basic page Type
Article Page Guest Book
Blog Page Input Error Message
Contact Page Processig Page
Printer-friendy Page
Event Calendar
Product Page
Form
Homepage
30

31. www.welie.com
Web Design Patterns
Basic page Type - Article Page
Header, in a large font size and preferable not spanning
more than one line
Publication date, in a small font size
Photograph with caption, half or the column width or the
entire width.
Introduction text, which often serves as sort of a
summary as well
Body text, the real content of the article
Links to related articles, either external or internal articles
31

32. OREILLY
http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html?page=5
32

33. OREILLY
http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html?page=5
33

34. OREILLY
Web2.0 Design Patterns
The Long Tail
Data is the Next Intel Inside
Users Add Value
Network Effects by Default
Some Rights Reserved
The Perpetual Beta
Cooperate, Don't Control
Software Above the Level of a Single Device
34

35. 37signals
http://www.37signals.com/papers/introtopatterns/
35

36. 37signals
http://37signals.com/
36

37. www.welie.com
An Introduction to Using Patterns
in Web Design
List your bits
Figure our which bits relate to each other
Prioritize
Design each chunk
Put the chunks together
Make it real
http://www.37signals.com/papers/introtopatterns/
37

38. CSS Layouts
http://layouts.ironmyers.com/
38

39. ?
39

40. ?
40

41. The Elements of User Experience Jesse James Garrett
jjg@jjg.net
A basic duality: The Web was originally conceived as a hypertextual information space; 30 March 2000
but the development of increasingly sophisticated front- and back-end technologies has
fostered its use as a remote software interface. This dual nature has led to much confusion,
as user experience practitioners have attempted to adapt their terminology to cases beyond
the scope of its original application. The goal of this document is to define some of these
terms within their appropriate contexts, and to clarify the underlying relationships among
these various elements.
Concrete Completion
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,
Visual Design
Visual Design: graphic treatment of interface
graphic page elements and navigational
elements (the quot;lookquot; in quot;look-and-feelquot;)
components
Interface Design: as in traditional HCI: Navigation Design: design of interface
design of interface elements to facilitate elements to facilitate the user's movement
Interface Design Navigation Design
user interaction with functionality through the information architecture
Information Design
Information Design: in the Tuftean sense: Information Design: in the Tuftean sense:
designing the presentation of information designing the presentation of information
to facilitate understanding to facilitate understanding
Interaction Information
Interaction Design: development of
Information Architecture: structural design
time
Design Architecture
application flows to facilitate user tasks,
of the information space to facilitate
defining how the user interacts with
intuitive access to content
site functionality
Functional Content
Functional Specifications: quot;feature setquot;: Content Requirements: definition of
detailed descriptions of functionality the site content elements required in the site
Specifications Requirements
must include in order to meet user needs in order to meet user needs
User Needs: externally derived goals User Needs: externally derived goals
User Needs
for the site; identified through user research, for the site; identified through user research,
ethno/techno/psychographics, etc. ethno/techno/psychographics, etc.
Site Objectives
Site Objectives: business, creative, or other Site Objectives: business, creative, or other
internally derived goals for the site internally derived goals for the site
task-oriented information-oriented
Abstract Conception
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)
that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a
user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
© 2000 Jesse James Garrett http://www.jjg.net/ia/
41

42. Site Strategy Abstract Design Concrete Design
42

43. Layout Patterns
43

44. Layout Patterns
44

45. Layout Patterns
45

46. 46

47. 47

48. 48

49. 49

50. 50

51. :
http://netyear.net
51

52. 52

53. ※
http://www.netyear.net/portfolio/
53

54. 54

55. 55

56. 56

57. 57

58. 58

59. 59

60. PLP
Page-based Layout Patterns
60

61. 61

62. 62

63. 63

64. 64

65. 65

66. 66

67. YYYY/MM/DD
67

68. 68

69. PR
69

70. 70

71. 71

72. 72

73. 73

74. 74

75. 75

76. 76

77. 77

78. 78

79. 79

80. 80

81. 81

82. IA
82

83. 83

84. 84

85. Web - Web
http://www.webken.jp/
85

86. Jakob Nielsen's Alertbox
http://www.useit.com/alertbox/reading_pattern.html
86

87. Jakob Nielsen's Alertbox
F-Shaped Pattern
http://www.useit.com/alertbox/reading_pattern.html
87

88. JR
9%
7%
84%
http://japan.internet.com/research/20060403/1.html
88

89. 2% 1%6%
4%
11%
19% 2%
1%
5%
47%
http://homepage1.nifty.com/hidex/left/enquete.html
89

90. 90

91. 91

92. 92

93. 93

94. PSD
HTML
Word
Excel
94

95. IAwiki: IAwiki
OmniGraffle
MS Visio
Ridual
MS Excel
Denim
MS PowerPoint
ConceptDraw
Adobe Illustrator
Axure RP
Macromedia Fireworks
http://www.iawiki.net/
95

96. IAwiki: IAwiki
OmniGraffle
MS Visio
Ridual
MS Excel
Denim
MS PowerPoint
ConceptDraw
Adobe Illustrator
Axure RP
Adobe Fireworks
http://www.iawiki.net/
96

97. Axure RP
http://www.axure.com/
97

98. Axure RP
http://www.axure.com/
98

99. Axure RP
Wireframes Flow Diagrams
Wireframes Annotations Flow Diagrams
Sitemap Interactions Flow Widgets
Widgets Add Notes Connectors
Masters Reference Pages
HTML Prototypes Specifications
HTML Prototypes Microsoft Word Specifications
Sitemaps Preface and Postcript
Documents
Page Note
Table of Contents
Interactive Interfaces
ConfigureAdd Notes
Annotations
99

100. Axure RP
Axure RP
100

101. Axure RP
http://www.axure.com/
101

102. Axure RP
http://www.axure.com/
102

103. Axure RP
Axure RP MS Visio
103

104. 104

105. IAAJ: Information Architecture Association Japan
http://iaaj.org/tool_and_resource/
105

106. IAAJ: Information Architecture Association Japan
7
106

107. 107

108. 108

109. 109

110. 110

111. PLP
Page-based Layout Patterns
111

112. PLP
Page-based Layout Patterns
112

113. blog | bookslope
http://bookslope.jp/blog/
113

114. Information Architect
114

115. Thank U
115