Wiley Design for Hackers: Reverse Engineering Beauty Datasheet

Add to my manuals
10 Pages

advertisement

Wiley Design for Hackers: Reverse Engineering Beauty Datasheet | Manualzz
D
TE
GH
RI
0
10 010
0 0
10 101 101
1 1 0
01 010 011 010
0 1 1 1
01 010 001 010 101
0 1 0 1 1
01 101 011 100 010 101
0 0 0 1 0 0
10 101 101 101 010 101 101
1 0 0 0 1 0 0
00 100 010 101 101 101 010 010
1 1 1 0 0 0 1 1
10 001 001 010 100 101 101 011 001
1 0 0 1 1 0 0 0 0
01 101 100 010 001 010 101 101 101 101
0 1 1 0 0 1 0 0 0 1
01 100 101 011 101 010 010 010 101 101 010
0 1 0 0 0 0 0 1 0 0 1
01 101 010 101 111 010 100 100 010 100 101 010
0 1 0 0 0 1 1 1 1 1 0 1
01 101 010 101 010 101 101 010 001 001 010 101 010
0 0 1 0 1 0 1 0 0 0 1 0 1
00 010 101 010 110 001 100 101 101 010 010 010 010 010
1 1 0 1 1 0 1 0 1 1 0 0 1 1
10 001 010 100 010 010 101 010 101 011 001 100 100 010 001
1 0 1 1 1 1 1 0 0 1 0 1 1 1 0
11 001 010 001 010 010 010 010 101 010 010 110 010 001 001 101
0 0 0 0 1 1 1 1 0 1 1 1 0 0 0 0
0 10 11 10 01 01 00 01 01 11 00 01 11 10 01 01 10
01
PY
CO
Wh y Desi gn M atters
RI
TE
MA
chapter
AL
1
10
D E S I G N F O R H A C K E R S GIVEN THAT YOU’RE reading this book, you probably don’t need much
convincing that design is, in fact, important. Good design has clearly been
fundamental to the success of many of the world’s largest companies, and
interest in and awareness of design has exploded during the past couple decades.
But exactly what kind of impact can design have? More important, what really
defines the bounds of design?
Skillful use of good design can create experiences that are emotionally moving.
At the same time, good design – through improved communication and clarity
– can make things easier to use. The characteristics of good design can bring
increased credibility to your company and ultimately influence the decisions
of your customers. Skillful use of good design can affect emotions, build
credibility, and earn trust. Finally, good design can actually make things easier
to use. But to really achieve these results, you have to understand design
holistically.
I witnessed firsthand the power of design in one of the world’s oldest
functioning buildings. While I was studying the origins of modern typography
in Rome, my studio was just a few blocks from the Pantheon. I spent hours
sitting inside the building and people-watching. I’m not normally entertained
by watching people, but inside the Pantheon, watching people is a different
experience than it is elsewhere. Why? Because people-watching in the Pantheon
gives you the opportunity to see the reactions of people who are walking into
the building for the very first time.
The reaction of a person walking into the Pantheon for the first time – though
different for everyone – follows a predictable pattern: He walks through the
doors, in a hurry, guidebook in hand and comfortable sneakers on his feet.
Then, once he looks up, everything about his demeanor changes. He begins
walking in slow motion. His head falls back limply on his neck, as if he were a
child seeing fireworks for the first time. His jaw drops, and at some point, a
“wow” and a sigh of amazement manage to escape his mouth. He may lift a
camera to his eyes – in an attempt so feeble as to be entertaining – hoping that
he may later relive the experience at will.
This is why I loved to people-watch in the Pantheon. I had experienced what
they were going through myself, and – although the Pantheon amazes me to
C H A P T E R O N E W H Y D E S I G N M AT T E R S
this day – there’s something magical about seeing what is little more than a pile
of stone, arranged in a certain way, have this affect on grown adults.
What Design Really Is
Steve Jobs once said, “In most people’s vocabularies, design is a veneer. It’s
interior decorating. It’s the fabric of the curtains of the sofa. But to me,
nothing could be further from the meaning of design. Design is the
fundamental soul of a human-made creation that ends up expressing itself in
successive outer layers of the product.” It’s this layering, the interconnectedness
of these different factors, that manifests itself in the impact of the Pantheon.
The emotional reactions that I witnessed over and over in the Pantheon are
exactly as intended. The Pantheon, the current design of which was
commissioned by Emperor Hadrian in 126 ad, was built to be the temple of all
the gods of Ancient Rome. So, it’s fitting that walking into the building would
be an awe-inspiring experience. If it’s good enough for Venus, the goddess of
love and beauty, it’s bound to be pretty amazing to you and me. This intention
behind the design of the building – the impact it was meant to have – is
definitely one of the “layers” that Steve Jobs was referring to.
The way that the interior of the Pantheon achieves this reaction is through
conceptually representing the heavens. Emperor Hadrian wanted those who
entered the Pantheon to be awe-struck. This is the house of the gods, after all.
The interior does this by being in the form of a perfect sphere – it is as tall as it
is wide, taking the form of a semicircular dome on top of a cylinder. At 142 feet,
it remains the tallest unreinforced concrete dome in the world – nearly two
millennia after its creation. At the very top of this dome, a 30-foot wide oculus
(hole) projects a beam of sunlight into the building, lighting the interior. This
is how the Pantheon has such an impact. Upon entering, you’re enveloped by
another world, complete with its very own “sun” (see Figure 1-1).
Part of the impact of the Pantheon comes from the relationship between this
incredible spatial experience and the materials used to create it. To achieve this
form, the Pantheon pushes the limits of the materials from which it is built,
which helps explain why a dome of this height hasn’t been created with the
same technology since. So much reinforcement is needed to keep this dome
11
12
D E S I G N F O R H A C K E R S standing that the walls of the dome are 20 feet thick at the base of the dome
and only 4 feet thick at the edge of the oculus.
FIGURE 1-1
The Pantheon
features the
world’s tallest
unreinforced
concrete dome.
Light (and
sometimes rain)
floods into the
interior through
a hole in the
ceiling.
To better manage the weight of the concrete, hard and durable basalt was
added to the mix for the foundations, with the mix gradually getting lighter,
until pumice rock was used toward the oculus. This way, the base of the dome
has the weight and strength to support the rest of the dome, while the upper
parts of the dome are thin and light, reducing their load upon the base.
To make the dome material even lighter, a series of recessed squares, or coffers,
are formed within the dome. These coffers, which exist by engineering necessity,
contribute to the impact of the interior. They rhythmically radiate from the
oculus, creating visual interest, while contrasting with the smooth concrete that
immediately surrounds the oculus.
In concert with these technical considerations, the designers of the Pantheon
had to make some aesthetic choices as well. Because the floor is too large to be
made with one piece of marble, it’s made up of various pieces. This marble is
laid out in a pattern of basic circular and square forms, which are in geometric
harmony with the rest of the interior.
C H A P T E R O N E W H Y D E S I G N M AT T E R S
The marble used within the Pantheon was in different colors, as well, so care
had to be taken to ensure that there was harmony and beauty in how the
various colors of marble interacted with one another.
All these factors worked together and were considered so masterfully that the
Pantheon is one of the most influential buildings in the history of architecture.
From St. Peter’s (just down the road from the Pantheon, in Vatican City) to
the U.S. Capitol building, the dome of the Pantheon has inspired the design of
buildings all over the world.
This careful marriage of all the “layers” of design are what makes a design
beautiful, timeless, and, ultimately, successful in reaching its goals. The
intentions of a design work together with the limitations of the technology
used to create the design, as well as with harmonies of form, geometry, and
color. All these pieces, all these layers, are inextricably linked with one another,
forming the whole of what truly is design.
What Design Is Not
Like Steve Jobs said, many people think of design as some kind of afterthought –
the upholstery on a couch, the logo on a business card, or the visual look of a
button on a website. In pursuit of understanding design, many are led down
the fruitless path of approaching design with this definition in mind. They may
try to learn how to create a particular visual effect, repeatedly refer to lists of
do’s and don’ts, or try adding visual elements to a design that do little but
create clutter.
To keep yourself creating good design, you need to learn how to understand all
the layers that create great design. To create great design: Don’t draw ponies.
Chances are, when you were in grade school, there was a kid in your class who
everyone thought of as a good artist. His big secret was, he only knew how to
draw one thing. In my third-grade class, there was a girl who could draw
ponies. She drew beautiful ponies. They had big, juicy eyes and long, flowing
manes. They had smooth, powerful muscles, and looked as if they could leap
off the page. The other kids in class would crowd around her as she drew pony
after beautiful pony. Then, one day, someone asked her to draw a portrait.
“Draw a picture of me!” he said. The girl looked scared. “Yeah, draw him,” the
13
14
D E S I G N F O R H A C K E R S other kids cheered. So, reluctantly, she tried to draw the boy. As you can
probably imagine, the resulting drawing looked nothing like the boy at all. His
eyes were lifeless, flattened footballs. His hair was a random mess of scribbles.
“I’m not very good at drawing people,” she said, sheepishly. Everyone seemed
disappointed, but they still wanted to believe that she was a good artist.
I was too young to figure it out then, but eventually I got it. All the ponies the
girl drew were essentially the same. Most of them had the same pose. The heads
were at the same angle. Maybe the front hoof of each of the ponies was pulled
up, as if the pony were ready to begin a gallop. She probably had just learned to
draw a pony from one, maybe two angles – maybe from a picture in a magazine –
and just repeated that over and over again. She was really good at drawing
ponies this way.
But the pony-drawing girl didn’t conceptually understand ponies. She didn’t
understand the “layers” that make up a pony. Hey, she was in third grade, so
that’s okay. But she didn’t understand pony anatomy, where all the muscles
really were, or how they might change shape as the pony changed poses.
The drawing of her classmate didn’t look right because she didn’t know human
anatomy, either. She didn’t understand the way that tear ducts are on the inner
part of the eye, or the way that an eyelid is constructed, or exactly how they
tuck underneath the eyebrow ridge. She didn’t understand how individual
hairs on a person’s head interact with each other and clump together. She
didn’t understand technically how these things worked, she didn’t understand
how a viewer perceives these things, and she didn’t understand how to use a
pencil and paper to bridge the gap between these two worlds.
Of course, she didn’t understand these things – she was in third grade.
Probably, someday, she progressed as an artist, or maybe today she’s the most
famous artist in the pony world.
The point is that to truly be adept at designing something, you have to
understand how it works. You have to understand the nature of what you’re
building, how what you’re building is perceived, and how you can use your
tools to make your vision happen. Otherwise, you aren’t designing. You’re
creating a veneer. You’re drawing ponies. Don’t draw ponies.
C H A P T E R O N E W H Y D E S I G N M AT T E R S
The Layers of Design
It’s important to understand the layers that make up a design, because getting
those layers to work together is the key to creating designs that look good, that
solve problems, and that ultimately influence your users.
On the web, more than anywhere else, using the layers of design appropriately
is critical to success. People are exposed to more information today than ever
before, and there just isn’t enough time or attention for us to process all of it.
So, we use shortcuts to decide what is deserving of our ever-more-precious
attention.
In psychology, these shortcuts are called heuristics. Heuristics help us solve
complex problems and make complex decisions by using “rules” that are either
programmed into us by evolution or learned from our own experiences.
If you see a pair of shoes that you’re considering buying, you’ll immediately
make a judgment on whether this brand of shoes is for you. How does the way
it’s constructed affect the look of the shoes? Do the colors appeal to you? Is it
your style? You use heuristics based upon how similar these shoes are to shoes
that you’ve had past experiences with.
These heuristics are in heavy use as people make decisions on the web. We
make split-second judgments about how much we trust a news site to give
us accurate information, how much we trust an e-commerce site to process
our payments securely, or whether we believe a nonprofit will use our
money wisely.
It turns out, in all these cases, design is the single most important heuristic we
process when deciding whether a site is credible.
The factors that influence design are countless, with fuzzy boundaries. You
could ask a dozen different design experts what factors manifest themselves in a
piece of design, and although you’d get a dozen different sets of answers, they
would all pretty much cover the same things. Here are some of the layers of
design that I’ll talk about in this book.
15
16
D E S I G N F O R H A C K E R S How design affects credibility on the web
In a study done at Stanford University, B. J. Fogg and his colleagues presented participants
with two websites and asked them to rank the sites’ credibility, as well as provide
comments about what they based their rankings upon.
When the results were processed, Fogg found that design had an overwhelming influence in
participants’ ratings of the credibility of the websites in the study. An incredible 46 percent of
all comments about the credibility of the sites were related to design. Participants said
trustworthy sites were “more professional looking,” had a “higher-quality look and feel,” or
“just [looked] more credible.” Some participants even went so far as to specifically mention
the color schemes or choices of fonts in sites that looked credible to them.
Although well-designed sites enjoyed high credibility ratings, sites that were poorly
designed were viewed as less credible. Participants didn’t trust a site if it was “not very
professional looking,” if the “design [was] sloppy,” or if it looked “like it was put together
in five minutes.”
But just as drawing a pretty pony doesn’t make you a good artist, creating a pretty website
doesn’t make you a good designer. Participants were skeptical of sites that looked
inappropriately polished, giving negative comments suggesting that certain sites looked as if
they were “designed by a marketing team.”
The design of a site has to be appropriate, and considering all the layers that make a good
design is critical in creating effective designs.
Aside from the visual look of sites being important to their perceived credibility, the results
of Fogg’s study also suggested that some of the more subtle aspects of design also were
extremely important. Comments about the information design and structure of the sites in
the study were the second most common, comprising over 28 percent of all the
comments processed. Participants praised some sites for being “well organized,” while
criticizing other sites because the “information [was] badly presented.”
So, together, the visual look of a site – along with the way the information was organized –
accounted for nearly 75 percent of all comments about whether participants trusted a site
or not. Moreover, the participants’ comments were sensitive to design that was
inappropriate for the site in question.
Users know when you’re drawing ponies, so to create successful design, you need to
understand how the layers of design interact.
C H A P T E R O N E W H Y D E S I G N M AT T E R S
Purpose
Every piece of design has a purpose or an intention. The Pantheon was built as
a temple of the gods, the iPod was built as a portable device for playing music,
and every website or application you create has its own set of purposes.
The purpose of a design is wrapped up with economic factors as well. The forms
of letters have been influenced throughout time by the need for efficiency in
communicating language (see Chapter 3). As I’ll explain in Chapter 2, and as
demonstrated by the skeptical comments toward inappropriately polished
design in Fogg’s study (see the earlier sidebar), these economic factors help
dictate the quality of design that a particular artifact should have.
The purposes and intentions of a design interact with the characteristics and
needs of a user. In Chapter 2, I’ll explain how you can better account for these
characteristics when developing the structure of your design. In Chapter 9, I’ll
talk about how you can account for cultural color considerations.
Every user needs to be able to access information clearly, and this
communication is the very foundation of design. In Chapter 3, I’ll explain the
differences between various fonts in historical context. In Appendix A, I’ll
explain how these historical considerations affect the mood that a typeface
conveys. In Appendix B, I’ll show you how some of the tiniest typographic
details can have dramatic effects on the information being communicated.
Most important, in Chapter 7, I’ll illustrate how you can attach the appropriate
amount of importance to various pieces of information within your designs.
Medium and technology
Every piece of design is created by a particular set of materials, with certain
methods of construction that influence the design. The limitations of creating a
concrete dome caused the Pantheon to feature recessed coffers throughout the
dome; the latest MacBook Pro is created from a single piece of aluminum, a
production consideration that influences its design; and, as I’ll talk about in
Chapter 4, designs created with HTML and CSS tend to have certain
characteristics that lend themselves to the capabilities and limitations of that
technology.
17
18
D E S I G N F O R H A C K E R S In Chapter 4, I’ll go into more detail on how the technologies behind the
Internet have created design trends, such as the Web 2.0 look. In Chapter 3, I’ll
explain how the limitations of the pixel have made some of the longest-lived
typeface designs incompatible with use on the web. In Chapter 8, you’ll learn
about how the technologies with which we represent colors can influence our
color choices designing across mediums or when choosing colors for information
graphics. In Appendix A, I’ll explain how the various technologies used to create
letters have, over time, led to new styles of typefaces.
Aesthetic decisions
Working in concert with design intentions and characteristics of medium and
technology are the aesthetic considerations of design. When you hear it called
that, it probably brings to mind a lot of what people think of design as – the
veneer of design. But in many ways, the aesthetic decisions of design are invisible.
The geometric relationships between things in a design are not something you
can see, but they make a huge impact on the visual harmony, the sense of
organization of content, and the overall “clean” feeling of a design. I’ll talk
about these hidden geometric relationships in Chapter 5, and I’ll talk about
how these geometric relationships work with other hidden principles of design
in Chapter 6.
The colors we use in designing are, of course, visible. But designers make some
important though invisible decisions when working with colors. After explaining
how we perceive colors with our visual system, and how we represent colors
with various technologies (Chapter 8), I’ll explain how colors can influence our
emotions, I’ll explain how colors interact with one another, and I’ll present
some common formulas for choosing colors that go well together (Chapter 9).
Conclusion
By gaining an understanding of all the various factors that affect design, you
can create designs with emotive power, clarity, and beauty. Throughout the rest
of this book, I’ll break down all these factors, so you can see the world through
new eyes. Let’s get started, shall we?

advertisement

Was this manual useful for you? Yes No
Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Related manuals

Download PDF

advertisement