'

Interface Design Fundamentals

Понравилась презентация – покажи это...





Слайд 0

@cwodtke Interface Design Fundamentals


Слайд 1

“Like putting an Armani suit on Attila the Hun, interface design only tells how to dress up an existing behavior.” – Alan Cooper


Слайд 2

A framework is the way elements will be organized on a page for use and understanding


Слайд 3

From last week’s homework 5min


Слайд 4

A task analysis From Information Architecture: Blueprints for the Web, this is a task analysis for a website for Sundance film festival, featuring a schedule planner


Слайд 5


Слайд 6

Each task could have a page


Слайд 7

First Yahoo 1994 1995: first graphic logo Remind you of something?


Слайд 8

Including the schedule creator tool…


Слайд 9

Wizards: Many boxes, many pages


Слайд 10

When to Use Wizards Multi step process Must be completed in order The audience is not technically savvy Bandwidth is low


Слайд 11


Слайд 12

What if we put the tasks with the thing they were modifying?


Слайд 13

It’s a toolbar Tools here Item affected here


Слайд 14

Toolbars Tools here Item affected here And here And here Photoshop: toolbars on steroids


Слайд 15

The web uses toolbars more sparingly


Слайд 16

Toolbars Tools here Item affected here A simpler design is better for infrequent use.


Слайд 17


Слайд 18


Слайд 19


Слайд 20


Слайд 21


Слайд 22

What other ways can we organize elements? Control Panels? Carousels? Thumbnail<-> Full Size?


Слайд 23


Слайд 24

Two videos sites. The “meal” is the video, and the tools to consume (or play with) it are arrayed around the main meal. (P.S. There are toolbars too)


Слайд 25

Which pair of pants are now 39.99?


Слайд 26

Which car is 49.99?


Слайд 27

Why is the response so far from the invitation?


Слайд 28


Слайд 29

When designing the page, group items by similarity and similarity of task (navigation items together, editing items together) Give them visual importance based on user number, usage frequency and importance to business.


Слайд 30

Create “zones” for functionality groups. You can group them by putting white space around them, or use lines Remember to keep tools close to the thing your working on


Слайд 31

If you are putting boxes around things to make it clear, you probably should start over


Слайд 32

5 Minutes


Слайд 33

5 Minutes


Слайд 34

10 Minutes


Слайд 35


Слайд 36


Слайд 37


Слайд 38

Buttons have meaning


Слайд 39


Слайд 40

links have meaning


Слайд 41


Слайд 42

Subtlety will send you to the poor house. Tell your users what to do. Clarity is relaxing, not annoying.


Слайд 43


Слайд 44


Слайд 45


Слайд 46


Слайд 47


Слайд 48

10 Minutes


Слайд 49


Слайд 50


Слайд 51


Слайд 52


Слайд 53


Слайд 54

On the product page (apples!) For the company to succeed 2 minutes


Слайд 55

5 minutes


Слайд 56


Слайд 57

painting


Слайд 58

painting


Слайд 59


Слайд 60


Слайд 61

Comics are read in the west left to right, like a page. However, good artists add visual elements to help you flow. http://samkieth.blogspot.com/


Слайд 62


Слайд 63


Слайд 64


Слайд 65


Слайд 66

I am Times New Roman Hey, I’m Arial


Слайд 67

I am Comic Sans I am the devil


Слайд 68

I am Impact LOL


Слайд 69


Слайд 70

Georgia is always welcome


Слайд 71

A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to-morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood.


Слайд 72

To be great is to be misunderstood.


Слайд 73

A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to-morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood.


Слайд 74

To be great is to be misunderstood.


Слайд 75

A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to-morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood.


Слайд 76

To be great is to be misunderstood.


Слайд 77


Слайд 78


Слайд 79


Слайд 80


Слайд 81

nature


Слайд 82


Слайд 83


Слайд 84


Слайд 85


Слайд 86


Слайд 87


Слайд 88


Слайд 89


Слайд 90

What do you think about when you think of a painting program?


Слайд 91

92 Poetics: Control, power, precision


Слайд 92

93 Values: Lightweight, easy, sketchy, imprecise


Слайд 93


Слайд 94

What do you think of when you think of writing?


Слайд 95

96 Power, control, precision,


Слайд 96

97 OmmWriter Beauty, peace, zen


Слайд 97

98


Слайд 98

What do you think of when you think of Social?


Слайд 99


Слайд 100


Слайд 101


Слайд 102


Слайд 103


Слайд 104


Слайд 105

Graphic design hacks


Слайд 106

Minimalist Design Only use one font. Preferably Helvetica. Only use three, all very different. Perhaps a fourth for footer text. Only use one color, with variations, and one “accent” color. Turn on the grid (if you are using Photoshop, etc) Never align center. Don’t use stock photography, unless you have awesome taste. It has no soul. Have a hierarchy


Слайд 107

Cheats Design Patterns Libraries Odesk Conference proceedings You can’t buy taste


Слайд 108

Q&A "In an architecture of content, the information becomes the interface." -- Edward Tufte


×

HTML:





Ссылка: