The Days of Web Standards "IA" 20070715

Web IA bookslope 1

2

3

4

IA 5

Information Architecture Information Architect 6

IA 7

IA 8

? IA 9

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

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

12

IA One-Sheeter IA IA 15

Web 16

CSS 17

Blue Dot http://bluedot.us/ 18

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

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

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

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

23

A Pattern Language http://patternlanguage.com 24

WebPatterns.org http://webpatterns.org 25

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

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

OREILLY 28

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

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

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

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

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

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

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

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

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

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

? 39

? 40

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 \"look\" in \"look-and-feel\") 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: \"feature set\": 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

Site Strategy Abstract Design Concrete Design 42

Layout Patterns 43

Layout Patterns 44

Layout Patterns 45

46

47

48

49

50

: http://netyear.net 51

52

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

54

55

56

57

58

59

PLP Page-based Layout Patterns 60

61

62

63

64

65

66

YYYY/MM/DD 67

68

PR 69

70

71

72

73

74

75

76

77

78

79

80

81

IA 82

83

84

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

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

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

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

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

90

91

92

93

PSD HTML Word Excel 94

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

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

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

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

Axure RP Axure RP 100

Axure RP Axure RP MS Visio 103

104

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

IAAJ: Information Architecture Association Japan 7 106

107

108

109

110

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

Information Architect 114

Thank U 115

The Days of Web Standards "IA" 20070715

0 comments

Notes on slide 1

4 Favorites