HELLO

DESIGN WORLD
A V I S UA L W E B D E S I G N
GUIDEBOOK FOR DEVELOPERS
 Preface
This book is for my programmer friends who Each of these are your own little Hello World
are hackers at heart, but want to learn design experiments.
on the side. It is a great place to start if you
Once youre more comfortable, try your
want to be a pro at web design. Or if you just
hand at theexercises at the end of the book.
want to be not horrible at web design, its
How will you know if your experiments get
good for that too : )
compiled correctly? Compare it to work you
The lessons in here are meant to be practical. admire online. But only the parts youre
Too many design books think you need to experimenting with. Thats important. Its
know the history of design before doing it. easy to get overwhelmed if you compare
Fooey, I say. your small typography experiment to a fully
completed site on Dribbble.
I encourage you to approach each chapter
as if you were learning a new programming Additionally if youre struggling with
language. For example, look at the examples something and need some feedback, hit me
in the typography chapter and try to mimic up! Im at [email protected].
the leading (letter-spacing) in the examples.
kind regards, Mason
Pick a style from the style chapter and try
to recreate it. Pick a color palette for your
project based on the principles of color theory
mentioned in the color chapter.

2 Hello Design World http://designbynumbers.io

 Table of Contents

Research.......4

Concept.......11

Brand.......27

Style.......33

Composition.......62

Alignment.......77

Typography.......85

Hierarchy.......95

Color.......105

Proximity.......130

The DxN framework.......141

Exercises.......150

3 Hello Design World http://designbynumbers.io

 CHAPTER 1

RESEARCH

Give me six hours to chop

down a tree and I will spend the
first four sharpening the axe.

Abraham Lincoln
4
 Introduction If youre a developer at a startup or other
non-design focused business, this section still
Doing your design research is like going applies, although the document you receive
backpacking. The more you prepare up front, will be called a project brief or something
the fewer headaches youll encounter later similar. Its important to try to get your hands
on. Beginner designers often want to jump on it. Ive worked in several environments
right into Photoshop when starting a new where the developers and designers sit in
project, however that puts you in a position different parts of the building and dont talk
of having to do research while you design. to one another. So when it comes time for
Thats not ideal because it will pull your brain development, the programmers input has
in opposite directions. less importance because so many decisions
have already been made. For that reason,
You might be tempted to skip the research
Seek out the creative brief when the
step. If you do, it will come back to pester you
designers get it so you can talk it over with
in some way and force you to change course
them. It will take some poking and prodding
likely after youve already poured many hours
of producers and managers but good things
into your design. I once spent an entire day
happen when designers and developers work
on a site design after barely skimming the
together from the start.
creative brief that morning. Only later did I
realize that the brief called for specific fonts I dont know what environment youre
and colors that I hadnt been using. Doh! currently working in. So lets look at the
creative brief at three common types of
Do your research first and save yourself time
companies:
later. In this chapter well discuss:

The creative brief Large agencies & design firms

Competitive analysis Boutiques

Mockup site vs. real site Individual situations

Getting inspired Large agencies &

Wireframes
design firms
The creative brief
A word of caution: if youre a developer at
a big agency, it will be difficult (but not
Reading the creative brief is the first step of impossible!) to start doing design work.
your research. All agencies, design firms, and These places have systems and departments
other creative places use them. The format is in place to keep things organized. You the
a one to two-page document that sums up the programmer are asking to do something
deliverables of the project. outside of that system. Your best bet is to

5 Hello Design World - Research http://designbynumbers.io

 befriend designers youve collaborated with what the site needs to look like. It would be
and try to get involved in that way. great to have a brief written for you like at
the bigger companies, but in my experience,
You can do it! shops of this size dont do this because its
not a task that will make the company money.
Creative briefs at large companies are usually
Smaller places are much more concerned with
created by a producer, brand person, or
efficiency and they prefer to keep people busy
account person. Thats because these people
with revenue-generating tasks. Since you may
have a relationship with the client and
be told the brief verbally, take notes and ask
understand the clients business objectives.
questions.
Often there will be a meeting set up specifically
If youre at a startup, things move so fast that
for the creative team (designers, writers, and
much of what youre told will change based
creative directors) where the account team
on unforseen circumstances. Its annoying.
will go over the creative brief. In the biz this
But try to figure out what key principles
is called getting briefed.
wont change. What does the company stand
Here is what one of these briefs looks like. for? Why does it exist? Try to extract some
Read it closely but dont let it intimidate you. overarching themes for your brief. Your later
The brief is meant to help you understand a design will be based on the brief. So if its
long series of conversations the account team based on certain core tennants of the site, it
has had with the client. will be less susceptible to future changes in
product and strategy.
To summarize: At a big studio, its the
account teams job to define (with a creative
brief) what the problem is that needs to be
Individual briefs
solved. In this setting, its the designers job In this scenario, youre in charge of the brief.
to come up with a creative solution. So many Youll need to get into the client or users head
design ideas start with the brief. So if youre a and figure out what problems shes trying to
programmer trying to learn design in a large solve. If youre working with a client, take
agency setting, try to get into the briefing good notes and summarize back to her the key
meetings or at the very least get your hands things shes trying to accomplish. These will
on the brief afterward. mainly be business goals. If youre working
for a startup, youll need to think about what
Boutique shop briefs the user goals are.

If youre part of a medium-sized team (5-20 Its good to write down these business goals
people), its more likely that youll be given because later on youll come up with some
the brief verbally by a coworker who met wild and creative website ideas - some good,
with the client. Or maybe youre part of a some bad. If you have the sites objectives
startup and the product person is telling you written down, youll be able to see how your

6 Hello Design World - Research http://designbynumbers.io

 ideas measure up. analysis at work. I once had an assignment
where I was tasked with designing a new
website for a custom home builder. During
Competitive the research phase, when I printed out the

analysis
websites and brochures of their competitors,
every one of them used American flags or
Once you have the creative brief, you can some kind of Normal Rockwell imagery.
start researching the competition. If youre
part of a large team, sometimes the strategy Their competitors all looked the same. That
department (if there is one) will likely do informed our decision to push the client into
some of this work. having a more modern looking site. And it
worked! Most of the their key website metrics
Competitive analysis identifies places where improved after the new site launched. If we
the competition is doing something poorly, hadnt done our research first, we wouldnt
or cant compete with your client. In the have had that insight.
late 90s every computer was beige and ugly.
Then Apple came along and made beautiful Look for places where your site design can
multicolored iMacs. differentiate itself in a way that will help it
achieve your clients goals. What does your
Consumers took notice, but competitors client or company do well that thecompetition
didnt copy them because they didnt cant? Maybe they manufacture their blue
understand design. Design was like a foreign jeans in the U.S., unlike their competition.
If they all use photography on their site,
consider doing an illustration styled site.
If they all use American flags on their site,
think about going modern. Research the
competition and write down your findings.
Youll be surprised at how often this research
will help shape the design direction of your
website. Having these tidbits to draw from
will help prevent you from staring at a blank
screen later.

When should I copy the competition?

Design was Apples competitive edge
I wont pretend copying doesnt happen.Im
language to them. But design was one of guilty of it. We once had a fashion client who
Apples core strengths, so they ran with it. loved the online retailer Nasty Gal. So we
implemented a lot of the same features as
Nasty Gal for the clients new site.

Heres another example of competitive But after a while, the good parts of our site

7 Hello Design World - Research http://designbynumbers.io

 that were original lost their importance. We
were measuring ourselves against Nasty Gal
Mockup or real site?
and not thinking for ourselves. Thats a bad This is an important step that often gets
spot to be in. Its difficult to be innovative overlooked. We need to know the nature of
while simultaneously copying others. the site were designing before we can begin.
Is this a mockup or a real site?
Its wrong to copy. But many clients
and startups dont care about the moral The creative brief should give you a sense
arguments against it. Hell, Samsungs entire of this in a section called deliverables or
business model is to copy other companies.A something similarly named. The scope of
better argument is to explain to your client work is written here by the account or product
that copying puts them in the mindset of team. It wont use the words mockup or
being a follower. Thats a dangerous place to real, but it will say things like:
be because consumers will sniff that out and
youll lose their respect. Consumers will also 5-6 web pages needed for clients
pay you less money because your brand will board meeting (a mockup site)
be weaker.
20-30 page website (a real
Or in the case of a product, look at how few site)
features Snapchat copies from other startups.
Its that willingness to stand out and have Three different home page styles
a point of view that endears them to users. to be assessed for look and feel
And when others copy them (like Instagram), (a mockup site)
any short term growth they gain comes at the
expense of user loyalty. Vendor will design and do front-
end development of site (a real
Our Nasty Gal copycat site didnt work out site)
because once we launched, the features that Its important to get clarity on what kind of
we copied from their site had been removed. site youre designing. If its a mockup site,
Either they tried it and it didnt work, or you can use images from anywhere! This can
users grew tired of it. Who knows. dramatically improve the look of your design.

Worse still, we didnt have a hypothesis or

data that suggested we make each feature. So
when it came time to judge if it should stay or Mockup site
go on our site, there was nothing to measure The goal of a mockup site is to give the client
it against because it was simply something a glimpse of what their site could be. The
that we had copied. designer can use imagery from anywhere. It
doesnt matter that youre stealing images
because they wont ever appear on a live site.
These images are called for placement only

8 Hello Design World - Research http://designbynumbers.io

 or F.P.O for short. Theyre meant to give a https://www.behance.net/
sense of what the site would look like if the
client gives approval to make it real. Sometimes this step will heavily inform your
site design and sometimes it wont; Ive had
it go both ways. Dont feel bad if you dont

Real Site feel inspired right away by what youve

gathered.
If you know your website will eventually
go live, then its a good idea to pick images A few years ago, I had to design a new website
that youll be able to buy later. Stocksy. for a mortgage company. I had a brief, and
com is a useful resource, and occasionally the strategy department said they wanted the
gettyimages.com will have good stuff too. If company to move to a more human, customer-
the project has a small budget, keep that in centric approach with its messaging and how
mind while searching for imagery (Stocksy is they did business. So we wanted the site to
cheaper than Getty). reflect that.

Heres more about the difference between My first step was to look for examples of
mockup and real sites, as well as some good design that inspired me, both related and
places to find imagery. unrelated to homes, mortgages, etc. Our
creative team liked the idea of illustrations
because they were friendly and none of the
Getting inspired clients competition were doing it.
This step is meant to inspire you and form
After deciding to go with illustrations, we
a path your design might take. When I see
narrowed our search to five illustrators. We
something I like, Ill drag it to an inspiration
finally decided on Andrew Colin Beck because
folder on my desktop. Heres my inspiration
his work was beautiful, had a friendly vibe, and
folder for this site I did for HCB. Additionally,
here are some places where I look for
inspiration:

http://mindsparklemag.com

http://designspiration.net/

http://ffffound.com/

http://awwwards.com/
An Illustration by Andrew Beck
http://thedsgnblog.com
he used unique shadows that were subtle, but
https://dribbble.com/ gave objects a nice dimensional feel. Heres
a zip file of the final five illustrators we

9 Hello Design World - Research http://designbynumbers.io

 considered if youre curious.
to draw from?

Wireframes

The last step in the research phase is getting

wireframes from the UX team (if there is
one). Sometimes youll get wireframes when
designing a site and sometimes you wont.
Real sites are more likely to have wireframes
than mockup sites. Larger sites are more
likely to have them designed too.

For our purposes, dont worry too much

about wireframes yet. Its a different animal
from visual design and requires a different
type of thinking. I dont want to overwhelm
you. Just know that wireframes are meant
to be a rough guideline about what elements
should be on a page.

Chapter summary
Its important to know all the goals and
background of what youre building. Even
if the site is for personal use, doing your
research is a good habit to get into.

Ask yourself:
Have I read the creative brief?

What does the competition do well?

What do they do poorly?

What is their competitive edge?

Is this a mockup site or a real one?

Have I collected inspirational design images

10 Hello Design World - Research http://designbynumbers.io

 CHAPTER 2

CONCEPT

Practice Safe Design, use a concept.

Petrula Vrontikis
11
 Introduction together to support the idea. The invitations,
the cake, place settings, dresses, food, and
In graphic design, its often useful to use a photography - all map back to the central
concept while designing. A concept is an idea
or style around which you build your website.
Concepts are valuable because they turn your
website into a story. And as you may know,
people love stories. It makes the content on
your site more accessible.

In this chapter: Everything here supports the weddings concept

The Concept Magnet concept. The wedding theme is the magnet
Preserve case study holds it all together. If the concept is vintage,
everything will look old. If the concept is
What determines the concept beach themed, there will be plenty of starfish
and seashells around.
Guess the concept

The concept magnet Preserve case study

A good concept is like a magnet. It commands Preserve is a website that is part editorial,
every element on the page. Typography, part e-commerce. They highlight stories
color, style, and copy theyre all attracted to about woodworkers, tailors, blacksmiths,
the magnet and do what theyre told. This is a and other artisans. Each of these
good thing because it creates order. All of the craftspeople makes their products from
scratch.
elements work together. Think of a themed
Once the sites designer determined the
purpose of the website from the creative
brief, she decided that the concept for the site
design should be handmade. She reasoned
that if all the stories were going to be about
these artisans, the site should reflect that.

From there she made many deliberate design

The magnet attracts everything around it choices, all of which mapped back to that
concept.Look at the final site on the next few
wedding. When a bride chooses a concept, pages. Is the handmade concept evident?
there are dozens of items that need to work

12 Hello Design World - Concept http://designbynumbers.io

 Enlarge

13 Hello Design World - Concept http://designbynumbers.io

 Enlarge

14 Hello Design World - Concept http://designbynumbers.io

 Enlarge

15 Hello Design World - Concept http://designbynumbers.io

 Yes, I think the handmade concept comes concept will be. They are as follows:
through very well. Notice all of these elements
in the design:
The Audience
Textured Typography 1/3 of the concept is shaped by the audience.
If the audience is bankers, your concept will
Wooden drawer to save be conservative. If your audience is kids, your
favorites concept can be playful. Think about who
the audience is and what their goals are as
Typewriter font
a user. Does the concept work within those
Intimate editorial and lifestyle constraints?
photography
Textured recipe cards The sites brand
Products photographed on 1/3 of the concept is determined by the
textured surfaces clients brand. How do they present
themselves and what they stand for? Your
job is to have a site that doesnt stray too
All of these elements support the concept of far from wht the brand stands for and looks
handmade. like. For example, a well-worn and textured
site like Preserve wouldnt work well for a
These design choices were not solely a company like Target because they have a
reflection of the designers ego. If she made clean red and white aesthetic. And none of
the site based only on her whims, it may have the products Target sells are handmade. So
been done in a trendy style like flat design. using textures on a Target website would be
But it would probably be weird seeing images off-brand.
of craftspeople with dirt on their hands on a
clean and minimal website.

The concept led her down this design path. Your inspirational
In a way, this is freeing because many of the
things that determine the concept arent
images
1/3 of the concept is influenced by the images
decided by you.
you collected in the inspiration exercise from
your research. This is where your personal

What determines the preferences come in to play. Look at the

images. What do you like? Are there visual
concept? elements or concepts in those designs that
resonate with you?
There are three things that inform what the

16 Hello Design World - Concept http://designbynumbers.io

 Often a successful site will have just one
concept. One big idea.

Deciding on a concept is one of the more

difficult excersises in this book. I know it
feels like theres a lot riding on it but try not
to sweat it. You can always change it later.

Guess the concept

Lets do some exercises. Look at the examples
on the next few pages and try to figure out
what the concept is before looking at the
answer at the bottom. Btw, these will get
progressively harder as you go.

17 Hello Design World - Concept http://designbynumbers.io

 Tsovet
https://www.tsovet.com

Whats the concept? Answer at the bottom.

Enlarge

A: Travel /Adventure

18 Hello Design World - Concept http://designbynumbers.io

 Si Le Soleil
http://silesoleil.com

Whats the concept? Answer at the bottom.

Enlarge

A: The Ocean

19 Hello Design World - Concept http://designbynumbers.io

 Murksli Skateboards
http://murksli.com

Whats the concept? Answer at the bottom.

Enlarge

A: Craftsmanship

20 Hello Design World - Concept http://designbynumbers.io

 Legwork Studio
http://legworkstudio.com

Visit their site for the full effect. Whats the

concept?

Enlarge

A:The concept is whimsy. Every illustration has a silly

face of some kind. The copy is super playful too.

21 Hello Design World - Concept http://designbynumbers.io

 Kotelett
http://kotelett.info

They make underwear. Whats the concept?

Answer at the bottom.

Enlarge

A: I was on the fence about this one but I think the concept here is sex. The
company makes underwear so in a way they HAVE to show lots of skin in
whatever they do. However some of the videos on the site are weirdly evocative.
Much more so than the stuff in my moms Macys catalog. So yeah, its sex.

22 Hello Design World - Concept http://designbynumbers.io

 The Boat
http://sbs.com.au/theboat/

This one is tricky because its not really

designed- the whole thing is animated. But
it does have a concept. See if you can guess.

Enlarge

A: Theyre using the entire site to tell a story. So Id say the concept is narrative.
If you thought the concept was a boat or the ocean, thats true, but if you zoom
out even further the entire site is a vehicle for the story.

23 Hello Design World - Concept http://designbynumbers.io

 Gitman Bros.
http://gitman.com

This company makes mens shirts and ties.

Whats the concept? Answer at the bottom.

Enlarge

A: The concept here is clean/minimal. The product is high quality, so they wanted that
to be the focus. Now clean/minimal seems like more of a style than a concept right?
Thats true! Since theres no analytical concept, the style becomes the concept.

24 Hello Design World - Concept http://designbynumbers.io

 Virgin Airlines
https://virginamerica.com

This one is tricky. Visit the site and click

around a bit. Whats the concept?

Enlarge

A: If you tried to buy a ticket you probably noticed how simple and intuitive the process
is. Its easier than any plane ticket Ive ever bought. Id say the concept here isease of
use/friendly. The creative team put a lot of thought into optimizing the user experience.
Thats what they optimized for, everything else was beholden to the UX. As for thefriend-
liness, thats evident in the colorful icons used throughout out the site.

25 Hello Design World - Concept http://designbynumbers.io

 Chapter Summary
A concept is usually just one dominant idea.
Any more than that and it wont communicate
as well. Whenever possible, your site design
should revolve around a concept. It will
make your design more cohesive visually and
conceptually.

26 Hello Design World - Concept http://designbynumbers.io

 CHAPTER 3

BRAND

We use brands to project who we

want to be in the world, how we want
to people to perceive us, and how we
want to feel about ourselves.

Debbie Millman
27
 Introduction How to determine your clients
brand
Lets look at two companies, Dell and Apple:
How to define a brand from
Dell was innovative in the 90s because they
cut out the middleman in their supply chain.
scratch
Their website allowed you to customize your Sample target audiences
new computer, click the buy button, and have

Why branding
the computer shipped right to your door.
Since there was no retailer to take a cut, the
machines were cheap. The Dell brand was
price-focused, and they shaped their brand
matters
around that. This tactic worked great until Branding is the way a company talks to you,
other manufacturers figured out how to sell what it looks like, and how it makes you feel.
on the Internet. Once this happened, Dell no Brands exist because marketers want us to
longer had a competitive advantage. Worse have a relationship with their business. They
still, Dells previous customers werent loyal want you to connect emotionally because
to them because all they cared about was emotion-based decisions lead people to spend
price. more money on products. As developers we
often have an innate aversion to this. If the HP
Apple, on the other hand, was one of the most has a faster process, more RAM, and a lower
expensive computers available in 2000. Their price than the Mac, people would be foolish
brand was design-focused. They labored to buy the Apple. The ideal world for the
over how the plastic felt, what color it was, developer is a meritocracy. But unfortunately
and if it was transparent or not. The result the world isnt that rational. The way a Mac
was a drastically different computer than looks and feels is as important as how well it
every beige desktop on the market. These works.
handmade touches made customers smile,
and they became devoted Apple fans. Apple Most human beings are greatly influenced by
could charge more because they created a their emotions. Thats why branding matters.
feeling of delight. That was their brand.
Branding isnt always touchy-feely. Look at
Stripe or Twilio. They have great developers

In this chapter well and their API is pleasant to use. They have a
positive brand amongst developers for their

discuss: engineering chops.

As a developer doing design work, figuring

Why branding matters
out the brands messaging probably wont fall
Examples of personal brands on your shoulders. Unless youre a founding
member of a small startup. Either way, I think

28 Hello Design World - Brand http://designbynumbers.io

 its good to explore the topic so that when a Oprah:
designer talks about something being off-
brand, youll know what shes talking about. Warm. Engaging. Curious. Helpful. Motivated.
Generous. Photos of her helping people or
learning something. Happy.

Examples of personal Possible colors:

brands Warm hues of orange and yellow. Maybe

purple as an accent color.
I think a good way to understand branding is
to first look at notable public figures. While Audrey Hepburn:
attributing personalty traits to companies
Classy. Elegant. Stylish. Gracious. Modest.
may seem silly, recognizing the differences
Photos of her dressed well. New York. Walking
in people comes easier. See if you agree
a dog. Friend to animals.
with the characteristics Ive listed next to
the individuals below. Ive also added some Possible colors:
visuals and colors that come to mind.
Lots of white, yellows, pinks. Or black and
Batman:
white with a bright accent color like pink.
Moody. Lone wolf. Single street light on a dark
Jay-Z:
corner. Bats. Technology. Psychologically
vulnerable. Cropped photos of his face. Iconic. Brooklyn. The street. Marcy Projects.
Photos with his back toward the camera. Strong contrast in photos. Authentic.
Strong but silent.
Successful. Entrepreneurial. Sincere. Wise.
Possible colors:
Possible colors: Blacks, whites, golds.
Dark blue, grays, blacks. Maybe some yellow
All of these people conjure up an image in your
as a highlight color.
mind, right? Their unique accomplishements
The Pope: and personality traits make them easy to
remember. And while I loathe the phrase,
Revered. Holy. Progressive. Portraits by these are things that make up their personal
Renaissance painters. Calm. An overall mood brand.
of quiet and respect. Muted pastels. Textures.
Serif typography. Companies want to be remembered too.
And they want you to have a strong opinion
Possible colors: about them. Coke and RC Cola are the same
product, but only Coke has distinct enough
White, light gray, maroon, pale yellow (like brand attributes that make it memorable.
old weathered paper).

29 Hello Design World - Brand http://designbynumbers.io

 RC Cola has no distinct brand attributes. So
when emotionally-driven consumers see it at
How to determine
the store, they wont pay much money for it.
Its a commodity item.
your clients brand
If your company or client has over 100
Here are characteristics (both good and bad) people, theyll probably have a brand
of some famous brands: guideline, brand book, or both. Brand books
are similar in concept to coding guidelines or
Apple: API documentation, but for designers. The
brand book defines in specific terms how
Designed. Obsessive. Elitist. Focused.
the brand should be portrayed. It describes
Expensive. Minimal. Easy to use. High quality.
things like the typography you should use,
Porsche: colors, and tone of voice. Here are some
sample brand books:
Speed. History. Design. Performance.
Technology. Sophistication.Snobby. Adobe

Starbucks: Nike Football

Comfort. Atmosphere. Personalization. UNICEF

Ritual. Customer service. Consistent.
If youve ever wondered why you had to use a
Yuppies. Tasteless.
certain font on a site, its quite possible that
Google: the decision came from the brand book. Ive
found that in general, the larger the client,
Smart. Innovative. Powerful. Experimental. the more likely it is youll have to adhere to a
Visionary.Big Brother. brand book.

Target:

Value. Clean. Design conscious. Friendly. How to define a

Cheap.
brand from scratch
Notice all of these companies have distinct For small or new companies, you may have
attributes, just like individual personalities to determine what imagery, typography,
we discussed before. It may seem like a bad and copy is appropriate for your client or
thing that some people hate these companies, company. This can be tricky. If they havent
but thats actually a good thing. It means they defined their brand, then all of their past
have a point of view about how the world marketing materials, ads, and sites will likely
should work. If they tried to please everyone, look disjointed and you probably cant use
they would lose the respect of their fans. them as a reference.

30 Hello Design World - Brand http://designbynumbers.io

 I suggest doing two things: the same ideals and aesthetic as you, you can
use it as a placeholder for your own newly-
1) Find the things in their business they do formed brand.
well. Ask their customers why they choose
them over competitors. If theyre a regional
web hosting company, maybe they have
more personal customer service than Go
Here are some more
Daddy. If theyre a wood flooring company, examples of target
audiences:
perhaps they only harvest wood that is
environmentally certified.

All of these things are competitive advantages Senior citizens

and a big part of their brand. Find out what
these things are and communicate them in
Price conscious moms
your design and site copy. College athletes
2) Find out who the target audience is. A New homeowners
person who buys clothing from Luis Vuitton
has a different worldview than someone NASCAR fans
shopping at Ross. Figure out what kinds of
messages the customer responds to and work
Each of these groups has a worldview. Certain
backward from there.
words, colors, and ideas will resonate with
Look at Axe Body Spray. We know the target them. If you understand what the business
audience of young men who are into sex, is good at, and you know who the target
sports, and adventure. So from that, we can customer is, that will go a long way toward
start to define the brand and figure out what defining a brand.
imagery would be appropriate to show them.

One thing I like to do when branding is

to look for companies that have a distinct
Does a website
brand in a similar or complementary field. always need a brand
voice?
Youve probably heard companies say were
the Apple of X. What theyre saying is that
they think their toasters/pens/curling irons No. If youre designing a site for Toyota so
are akin to Apples aesthetics and beliefs. they can better monitor their parts inventory,
Whether that is true is another story, but you dont have to think about branding. In
theyre mapping themselves to Apple which that case, usability is more relevant.
is a helpful exercise.
Branding is important when your audience
If you can find a brand in a similar space, with is the general public. Less so for B to B,

31 Hello Design World - Brand http://designbynumbers.io

 internal facing projects, and government on, but its good to know what the brand is.
websites.
To define the brand, ask yourself:
Branding isnt important in the early days What are some characteristics of the
of a startup. Many designers may disagree, client/company?
but I think you can avoid coming up with a
logo for a long time. Just use Helvetica in Who is the company visually and personality-
all caps with wide tracking (letter-spacing). wise? Do they have a mantra?
Once the startup develops a tone of voice
If the client or company youre designing
and personality, then consider having a logo
a website for was a person, what would
made.
they look like? How would they talk? What
I dont recommend creating a logo for are they known for? Playful, rebellious,
yourself or trying to learn how, for two kind, high-quality, unique, authoritative,
reasons: sophisticated, rugged, helpful, daring,
transparent, etc...
1) How many times in your life will you
need to create a logo? Maybe a couple at If the company is consumer-facing, it will
most? Its probably not worth the time likely need a brand.
investment unless you just want to learn for
fun. Learning to design a nice website, on
the other hand, will reap benefits for years,
because design and development happen
close together.

2) The people who create logos and

wordmarks have been doing it for years.
Whatever you do wont be as good. Find the
best person you can and hire them. Here are
some recomendations:

http://www.brandclay.com
http://jessicahische.is
http://michaelspitz.com
http://www.simonwalkertype.com
http://www.jfletcherdesign.com

Chapter Summary
As a developer you probably wont have to
define the brand for the site youre working

32 Hello Design World - Brand http://designbynumbers.io

 CHAPTER 4

STYLE

An artist should never be a prisoner of

himself, prisoner of style, prisoner of
reputation, prisoner of success, etc.

Henri Matisse
33
 Introduction trendy is shortsighted because its probably
not the best way to communicate your sites
Beginners often think that design and style message.
are the same thing. Its an easy mistake
to make because style is so easy to see and I prefer an approach I like to call style
describe. On the web, theres an overemphasis mapping. Its a relatively simple technique
on style, often at the expense of other design once you get the hang of it.
principles.
Heres how it works. First, ask yourself the
The style of a website helps set the mood of following three questions:
your site, much in the same way color does.
There are just five styles in this section that 1) What is the essence of the brand?
you can use for your projects. I did that
because I dont want you to get overwhelmed If youre doing a project for a large client,
with options. You can accomplish a lot with theyll have a distinct brand. Think of
just these five. Starbucks, Lego, Nike, or Hyundai. Theyre all
very different, so a style thats right for one
In this chapter well discuss: company may not be right for another. For
example, a website for Lego can be illustrated
Style Mapping because the company caters to kids and is
playful. But that style probably wouldnt look
The Five DxN Styles right for Hyundai, a company which needs
Full-Color Photo full-color photos of cars on its site.

Duotones If your client or company has a brand book,

look to see what they allow. Can you use any
Black & White colors you want, or is it limited? Are there pre-
determined fonts you must use? If the clients
Illustration brand always uses the colors blue and yellow,
Collage like IKEA, then a black & white style wont
work. If theyre a large client like McDonalds,

Style Mapping the collage style is probably out because its

too edgy. If they only use photography in
When you sit down to design a website, there their marketing material, then an illustration
are a dozen different visual directions it can style wont be a good fit.
go. Should it be illustrated? Black & white?
Full color? Smaller clients wont have a well-defined
brand. You will be more at the mercy of
Many designers will choose whatever style their tastes. Before starting, ask them for a
is popular at the moment. Currently, that list of five websites that they think are well-
style is flat design. But choosing something designed and ask them what they like about

34 Hello Design World - Style http://designbynumbers.io

 each. That last part is important because its Ask yourself, which images in the inspiration
going to tell you whats important to them. folder would support the brand and purpose
Write it down and keep it in mind while of the site?
designing. Later, when you present your
design, show them how their initial feedback Notice that you havent started designing yet,
influenced your design. It will make them feel youre just comparing other peoples work to
like theyve contributed and its more likely your brand guidelines and concept. After you
youll get approval. find inspiration that works well with both of
those things, youll have a much clearer idea
2) Whats the purpose of the site? of how you might style your site.

The second step in style mapping is to ask

yourself, what is the concept of the site
The five possible design
and what is its purpose? If the concept is styles:
handmade like in the Preserve example from
Now that weve done some research about
concept four, the style should support that
the sites, brand, and purpose, we can start
idea. The style of a site should complement
to consider different design styles. The
its purpose.
Design by Numbers framework contains
For example, an e-commerce site is highly five possible styles you can use for your
functional and wouldnt work well in a loose site: Full-Color Photo, Duotone, Black &
collage-style. An educational website for White, Illustrative, and Collage. There are
kids may not keep them engaged if done in certainly more ways to visualize a website
black & white.If youre having trouble, think than these five, but try to limit yourself
about what the audience would and wouldnt for now. Remember, when youre learning
respond to and work backwards from there. design on the side, you have limited energy
and time, so its best to keep it simple.
3) What do you like?
As a developer, its likely that youll want
Now you can think about what you like. For to use Sketch instead of Photoshop. I get
this step, look at your inspiration folder for it. I just want to advise you not to choose
for sites and design styles you might like to a design style based on whether or not it
mimic. You can add stuff to your inspiration will work well in Sketch. In this book were
folder at any time. optimizing for design. So if the best tool
to achieve your vision is Photoshop, then
Putting it all together
I would suggest you use it. Ok, lets take a
After youve done all three steps, compare closer look at those five styles.
the inspiration images from step three
(inspiration) to the answers you gave on
questions one (brand) and two (purpose).

35 Hello Design World - Style http://designbynumbers.io

 STYLE ONE

FULL-COLOR PHOTO
Many sites use full-color images. One thing to keep in
mind for this style is that whenever possible, you should
choose photos that were shot in the same style. If you
have five images on your homepage and theyre all taken
by different photographers, its going to communicate
five different moods.

* Note: The designers comments on the following pages

are not actual quotes. They were created to illustrate
how style mapping works.

36 Hello Design World - Full-color photo http://designbynumbers.io

 Molino
http://bit.ly/1N8leaP

These photos were all taken under similar site was to promote her business. Some new
lighting conditions, and theyre all food customers had found her on Yelp and she
shots. When viewed together the design wanted to send them to a site where they
feels cohesive through all the photo sets. The could see more.
site may have worked if all the photos were
thumbnails on one page, but it wouldnt have 3) What do I like?
been as striking.
(Browse through the inspiration folder and
1) What is the brand like? look for styles that evoke the senses.)

Customers love to look at and smell the Designers Comments:

freshly baked goods on display. A large part
We wanted to mimic the in-store experience
of the store experience involves delighting
of looking through the glass at all the fresh
the senses.
baked goodies. Of course, theres no smell on the
2) Whats the purpose of the site? internet, so we used rich and colorful photos of
everything they make to delight the eyes.
The business owner stated her goal for the

Enlarge

Full-color photo

37 Hello Design World - Full-color photo http://designbynumbers.io

 Meshable
http://meshablewatches.bigcartel.com

Heres a simple site that sells watches. Very strong light.

minimal. Note the top section is reserved for
branded imagery - its meant to convey what 3) What do I like?
Meshable represents. In this case, luxury
(Browse through the inspiration folder and
with a little bit of quirk.
look for styles that tackle high-end products.)
1) What is the brand like?
Designers Comments:
Elegant but not quite luxurious.
When the client came to us, they had already
2) Whats the purpose of the site? invested in some great photography. We also
knew there would have to be photos of the
To sell watches and portray the brand in a watches so we picked a full-color photo style.

Enlarge

Full-color photo

38 Hello Design World - Full-color photo http://designbynumbers.io

 Jetlag Photos
http://jetlag.photos

The idea behind the Jetlag project is for 2) Whats the purpose of the site?
two photographers to take a photo at the
same time in different parts of the world. To Its part art, part promotion for the
highlight that concept, the screen is simply photographers involved.
divided in half as you navigate through all the
3) What do I like?
photo sets. The site may have worked if all
the photos were thumbnails on one page, but (Browse through the inspiration folder and
it wouldnt have been as striking. look for styles that cover photo essays.)

1) What is the brand like? Designers Comments:

Theres no brand per se, however, we wanted The concept steered us into doing this split
all the photos to have a similar contemplative screen approach and the style of the site was
mood. determined months earlier when we picked
photographers who had personal styles we
thought would be a good match.
Enlarge

Full-color photo

39 Hello Design World - Full-color photo http://designbynumbers.io

 Bonham Hats
http://bit.ly/26ChJ2F

In contrast to the previous site, this design To sell hats.

uses photos sparingly. In the previous design,
the full bleed photos engage the viewer in 3) What do I like?
a loud way, whereas this site chooses to
(Browse through the inspiration folder and
have fewer photos. This makes for a more
look for styles that cover upscale and beach
contemplative mood.
fashion.)
1) What is the brand like?
Designers Comments:
Bonham is an upscale surf brand.
A lot of the competing surf sites in our research
2) Whats the purpose of the site? were loud and over the top. We wanted to convey
a sense of calm. That also served the brand well
because its pricier than competitors.
Enlarge

Full-color photo

40 Hello Design World - Full-color photo http://designbynumbers.io

 ST YLE TWO

DUOTONES
Duotones help make a photo look more graphic, which
in turn makes it quicker for the viewer to internalize
the message. This look can be achieved in two ways:

1) The easiest way is to use the multiply blend mode

in Photoshop.Simply convert your image to black and
white, create a solid color layer on top of it, and then
set the blend mode of the color to multiply, screen, or
overlay. This doesnt work with all images though, so
play around and see what looks best.

2) If you arent getting good results, heres another

method which gives you more control:Duotone Tutorial.

41 Hello Design World - Duotones http://designbynumbers.io

 Saloon
http://www.saloon.li

Heres a great example of the designer

converting multiple disparate images into
3) What do I like?
duotones to make them all connect.
(Browse through the inspiration folder and
1) What is the essence of the brand?
look for websites that tackle multiple topics.)
Saloon does a broad range of creative work
Designers Comments:
from industrial design to illustration to
graphic design. Clients like that they can Having such a wide variety of projects presented
handle any kind of project. a challenge. Each project had its own style so to
feature them all on the same page would make
2) Whats the purpose of the site?
it feel disjointed. So we made all the project
Saloon wanted a new site to show all of their thumbnails duotones and that pulled it all
past work. together successfully.

Enlarge

Duotone

42 Hello Design World - Duotones http://designbynumbers.io

 Sublime
http://sublime.fyi

The rich colors and thoughtful poses make 3) What do I like?

these interviews feel important.
(Browse through the inspiration folder and
1) What is the essence of the brand? look for websites that tackle artsy topics.)

Theres no brand, but they are targeting Designers Comments:

creative types.
This was an internal project for our agency. We
2) Whats the purpose of the site? had a limited budget, so we took high-quality
photos of the speakers from their media kit and
Its a promotional device for Brand + Co, a turned them into compelling duotones.
design agency in Vienna.
Enlarge

Duotone

43 Hello Design World - Duotones http://designbynumbers.io

 Smile Bar
http://bit.ly/1QFV7CF

The bright colors match the happy mood of online.

this dentist office.
3) What do I like?
1) What is the essence of the brand?
(Most websites in the dentist and medical
Smile Bars waiting room is well designed and fields are bad. So look for all kinds of sites.)
friendly. The staff always wear bright scrubs.
Designers Comments:
2) Whats the purpose of the site?
Dr. Bolar didnt trust his creative eye so he was
To promote the business and make it easier happy to let us do what we wanted for the site
for existing customers to book appointments as long as we made it easy for patients to book
appointments. We took inspiration from the
interior of the office space.
Enlarge

Duotone

44 Hello Design World - Duotones http://designbynumbers.io

 Holm Marcher & Co
http://holmmarcher.dk/en/n

The photos here take a back seat to the copy. looking for work.
The photos are a bit generic, so this was
probably a good choice. 3) What do I like?

1) What is the essence of the brand? (Most websites in the headhunter field are
bad. So look for all kinds of sites.)
Holm is one of the better headhunting
services in their niche. Designers Comments:

2) Whats the purpose of the site? This industry is kinda boring to be frank.
To attract the target audience, we felt it was
To attract both employers and employees important to make them stand out visually. Also
they had photos they wanted used that were
Enlarge poor quality, so we converted them to duotones.

Duotone

45 Hello Design World - Duotones http://designbynumbers.io

 STYLE THREE

B&W PHOTO
This style is simple. You either use photos that were
shot in black & white or carefully convert full-color
images to black & white. If the concept of your site is
sophisticated, consider doing it in black & white.

46 Hello Design World - B&w photo http://designbynumbers.io

 St. Jamess Square
http://www.3sjs.london

This site was made to attract tenants to 3) What do I like?

the building. Its located in a posh part of
London which explains why the site feels so (Browse through the inspiration folder for
sophisticated. luxury images.)

1) What is the essence of the brand? Designers Comments:

Its a high-end exclusive commercial building. We wanted to treat the building as if it were
a luxury brand. We wanted people to have a
2) Whats the purpose of the site? similar feeling visiting the website as they did
when they entered the lobby. We decided to
The building owner wanted to attract tenants do the site in black & white because its a style
who appreciated immaculate office spaces. people associate with luxury.

Enlarge

Black & white photos

47 Hello Design World - B&w photo http://designbynumbers.io

 Twofold
http://twofold.com

The designer used just a touch of gold here (Browse through the inspiration folder and
and there as a highlight color. It works well. look for agency sites and other portfolio
sites.)
1) What is the essence of the brand?
Designers Comments:
Twofold is a creative agency.
We did the site in black & white because there
2) Whats the purpose of the site?
were so many projects in different styles in our
To be a portfolio to send to potential clients. portfolio. To have multiple dissimilar full-color
thumbnails on the same page would have made
3) What do I like? it feel disjointed.

Enlarge

Black & white photos

48 Hello Design World - B&w photo http://designbynumbers.io

 Mario Frigerio
http://fotofrigerio.verganiegasco.com/en

Notice the black color isnt black at all. Its a To be a portfolio to send to potential clients.
very dark gray. Often youll find that 100%
black or 100% white is too intense. 3) What do I like?

1) What is the essence of the brand? (Browse through the inspiration folder and
look for portfolios of photographers.)
Marios wedding photography has the feel of
lifestyle photography. Designers Comments:

Mario is more expensive than many wedding

2) Whats the purpose of the site? photographers and he wanted his site to reflect
high quality.
Enlarge

Black & white photos

49 Hello Design World - B&w photo http://designbynumbers.io

 Valentinvezinat
http://valentinvezinat.com

Portfolio for a graphic design firm. When you 3) What do I like?

rollover each project, part of it will become
colored. (Browse through the inspiration folder and
look for agency sites and other portfolios.)
1) What is the essence of the brand?
Designers Comments:
This is a graphic design company with a
penchant for art direction. This was an in-house project. All of the highlight
colors and elements on rollover are part of the
2) Whats the purpose of the site? portfolio piece.

To be a portfolio to send to potential clients.

Enlarge

Black & white photos

50 Hello Design World - B&w photo http://designbynumbers.io

 STYLE FOUR

ILLUSTRATION
I cant draw well, so whenever I do an illustrative site,
I either purchase illustrations somewhere or work with
an illustrator who was specifically hired for the job.
Sometimes beginner designers see an amazing site and
think that one person created it all. Unlikely! More often
its a collaborative process between several people.

Like the other styles, you should aim for consistency

in styles. That means every illustration should look
related.

51 Hello Design World - Illustration http://designbynumbers.io

 Hotel Esencia
http://hotelesencia.com

The hand-drawn illustrations here elicit a 3) What do I like?

feeling of relaxation. Perfect for a resort like
this. The main image almost feels like a New (Browse through the inspiration folder for
Yorker cartoon which might be confusing, hotels and travel destinations.)
but the nondescript scene steers it away from
Designers Comments:
that.
During our research, we noticed that 100% of
1) What is the essence of the brand?
the hotel imagery we found used photos. And
A high-end hotel in Mexico with a rich history. while we liked many of them, it made us realize
this was an opportunity to help the client stand
2) Whats the purpose of the site? out from competitors. In our pitch, we said people
would be immune to yet another hotel site with
The owners wanted to attract foreign tourists
pretty pictures. The client agreed! So we told the
and convey that this wasnt an ordinary hotel.
story of the hotel with illustrations instead.

Enlarge

Illustration

52 Hello Design World - Illustration http://designbynumbers.io

 BeVisionare
http://www.bevisionare.com/

This is a micro-site to promote a goal tracking 3) What do I like?

app. Its likely that an illustrator was hired to
create imagery for this site. (Browse through the inspiration folder for
sites that want to inspire or change people.
1) What is the essence of the brand? Weight loss and therapy sites for example.)

The Visionare app is meant to inspire Designers Comments:

people to create and track goals they set for
themselves. We wanted a destination site for people to visit
when our app was written about in articles and
2) Whats the purpose of the site? blogs. With so much noise in the app store, we
wanted to provide a wonderful web experience,
To provide information and entice people to which would in turn endear users to us when
download the app. they were considering downloading the app.
Enlarge

Illustration

53 Hello Design World - Illustration http://designbynumbers.io

 Sun Valley
http://portfolio.tofslie.com

Sometimes vintage clip art illustrations 3) What do I like?

can be used to create a fun retro vibe. The
designer here used clip art as an homage to (Browse through the inspiration folder for
1950s ski resorts. travel and vacation sites.)

1) What is the essence of the brand? Designers Comments:

Sun Valley is ski resort in Idaho thats known All of the competitor sites used similar looking
for catering to families. Theyve been around photos. You couldnt tell any of them apart. So we
since 1936. pitched the client on these vintage illustrations.
They thought it was a good match for their
2) Whats the purpose of the site? family-friendly resort and gave us the greenlight
to design the rest of the site.
To entice skiers to vacation at the resort.

Enlarge

Illustration

54 Hello Design World - Illustration http://designbynumbers.io

 Beyond This Point
http://beyondthispoint.design

The illustrations here are very basic, but brands and experiences.
combined with the color, its enough to create
a distinct mood. 3) What do I like?

1) What is the essence of the brand? (Browse through the inspiration folder for
sites with a single focus.)
Beyond This Point is a podcast featuring
interviews with artists, business owners, Designers Comments:
and leaders of all types to put a spotlight
The client wanted a place outside of iTunes
on different ways of seeing, thinking, and
where people could go to learn more about
making.
the podcast. When deciding the color and
2) Whats the purpose of the site? illustrations, we just tried to portray the tone of
the show.
To be thought-provoking, and to promote
Civilization, a company that develops

Enlarge

Illustration

55 Hello Design World - Illustration http://designbynumbers.io

 STYLE FIVE

COLLAGE
Collage uses multiple elements to make a cohesive
design. Unlike earlier styles, you have more liberty
to uses photos of a different style, because if enough
elements look different, that can create a kind of
cohesion in itself.

56 Hello Design World - Collage http://designbynumbers.io

 Frank Chimero
http://www.frankchimero.com/writing/

This is a personal site for designer, writer, 3) What do I like?

and illustrator Frank Chimero. He works in
several mediums and the site design reflects (Browse through the inspiration folder and
that. look for websites that tackle multiple topics.)

1) What is the essence of the brand? Designers Comments:

Frank is a playful designer, writer, and Frank is a creative person with many talents.
illustrator. We didnt want to show those talents in a literal
way on the homepage, rather we wanted to
2) Whats the purpose of the site? reference them in an abstract way by using a
variety of clip art and other ephemera. Because
Frank wanted a new site for his projects.
this was his personal website he gave us a lot of
creative license and let us go nuts.
Enlarge

Collage

57 Hello Design World - Collage http://designbynumbers.io

 Rogue Society
http://roguesocietygin.com

This is a website for a gin company. They 3) What do I like?

distill their gin in a hand-beaten, 19th-
century copper pot, which explains some of (Browse through the inspiration folder
the vintage-feeling imagery. for sites with craft-related subjects, like
woodworking.)
1) What is the essence of the brand?
Designers Comments:
Rogue approaches gin making as a fine craft.
This was a new company and the founders were
2) Whats the purpose of the site? having a hard time cold calling and emailing
distributors. No one knew who they were. To
To promote the gin to potential distributors.
combat this, they needed a site that made them
look like a serious operation. They didnt have
a budget for photography or illustrations so we
found old clip art that worked well.
Enlarge

Collage

58 Hello Design World - Collage http://designbynumbers.io

 The Conference
https://2016.theconference.se/

This site mixes illustrations, geometric register for it.

shapes, and photos. The copy conforms to
a grid, but the other elements seem to be 3) What do I like?
strewn about. This helps separate the two
(Most websites for conferences are lousy. So
layers and makes the site readable among the
look for all kinds of sites.)
chaotic elements surrounding it.
Designers Comments:
1) What is the essence of the brand?
The Conference is about connecting the dots
The Conference is a two day event exploring
between different fields. So we put doodles all
the tech world through multidisciplinary
over the page, using them as gestural elements.
perspectives.
This created a mood that matched the content of
2) Whats the purpose of the site? the event.

To promote the event and allow people to

Enlarge

Collage

59 Hello Design World - Collage http://designbynumbers.io

 Curious Space
http://www.curiousspace.com

The photos here seem to float above a site to show people.

everything. And even though it looks like
theres no strict grid keeping them in place, 3) What do I like?
it works because the placement of the photos
(Browse through the inspiration folder for
leads your eye down the page.
portfolio sites.)
1) What is the essence of the brand?
Designers Comments:
Curious Space creates and designs physical
Curious Space does a lot of work with dancers,
spaces for museums, galleries, and public
arists, and other performers. We wanted to
spaces.
reflect the expressiveness of those performers by
2) Whats the purpose of the site? having a loose and playful layout.

The client had a difficult time describing the

various projects theyve done, so they wanted

Enlarge

Collage

60 Hello Design World - Collage http://designbynumbers.io

 Chapter Summary
Use style mapping to figure out what style
to use for your site. Choose one of the five
styles and do the entire site in that one style.
Remember, your style and concept should
work well together

Quick hacks
Heres a tutorial on how to create duotones.

If you have good photos, try a Full-Color

Photo style.

If you have photos that were taken at

different times by different people, try using
a Duotone style.

For a sophisticated look, try a Black & White

style.

For simplicity, or to create a specific mood,

try an Illustrated style.

For something artsy/experimental/personal,

try a Collage style.

61 Hello Design World - Collage http://designbynumbers.io

 CHAPTER 5

COMPOSITION

Design should never say, look at me. It

should always say, look at this.

David Craib
62
 Introduction primary links and navigation elements.
When you look at each example, ask yourself
Composition is the placement of visual if the composition is simple or complex. And
elements on a page. A good composition notice how that influences the way in which
will create visual interest. It will present you digest the page.
information in a way that doesnt overwhelm
the user.

In this chapter
well discuss:
Examples of Good
Compositions

Grids
How wide should my photoshop file be? There
can be multiple answers to that question, but
for our purposes, make it 1200px wide. Here
are a .psd and .ai file with those dimensions
courtesy of 1200px.com.

Examples of
good compositions:
The following pages have some examples
of websites with nice compositions. Notice
how theres never too much information on
the page. Even when a page contains many
elements, theres a logical grid structure to
hold everything in place. Some of the layouts
are simple and some more complex, but they
all have a grid of some kind that supports
the content.

After each screenshot, the gray layouts show

how the page is broken up visually (and
programmatically with DIVs), along with

63 Hello Design World - Composition http://designbynumbers.io

 Si Le Soleil
http://silesoleil.com

This site contains many interactiveelements.

Because there is so much animation, they
decided to use this simple layout.

Enlarge

64 Hello Design World - Composition http://designbynumbers.io

 Si Le Soleil Ctnd.
http://silesoleil.com

Heres how the page is broken up:

Enlarge

65 Hello Design World - Composition http://designbynumbers.io

 Bartaile
http://bartaile.com

This is a fashion site, so the mood they button below the womans feet, the page
convey is important for the brand. On the becomes highly functional.
first screenshot below, the entire page is a
branded image. However when you click the

Enlarge

66 Hello Design World - Composition http://designbynumbers.io

 Bartaile Ctnd.
http://bartaile.com

Heres how the page is broken up:

Enlarge

67 Hello Design World - Composition http://designbynumbers.io

 Bartaile ctnd
http://bartaile.com

Heres the functional bit. Its more complex

than the first image with the single woman,
but the two compositions still feel related.

Enlarge

68 Hello Design World - Composition http://designbynumbers.io

 Bartaile Ctnd.
http://bartaile.com

Heres how the page is broken up:

Enlarge

69 Hello Design World - Composition http://designbynumbers.io

 Warehouse
Kitchenware
http://bit.ly/1roms7V

This composition has sections that are always include a full bleed section immediately after.
split at the 3/4 or 1/4 mark (it flips back and Theres a lot going on here, but the 3/4ths,
forth). This creates a nice variety. And to 1/4th pattern provides structure to make it
ensure its not too repetitive and chaotic, they work.

Enlarge

70 Hello Design World - Composition http://designbynumbers.io

 Warehouse Kitchenware
Ctnd.
http://bit.ly/1roms7V

Heres how the page is broken up:

Enlarge

71 Hello Design World - Composition http://designbynumbers.io

 This is Alaska
http://bit.ly/1OT5FRo

Similar to the previous example, the image

and copy alternate from side to side, midway
down the page. Its a good way to lead the
viewers eye where you want it to go.

Enlarge

72 Hello Design World - Composition http://designbynumbers.io

 This is Alaska Cntd.
http://bit.ly/1OT5FRo

Heres how the page is broken up:

Enlarge

73 Hello Design World - Composition http://designbynumbers.io

 Hermes
http://bit.ly/1UmvC05

This is a more complicated layout than the

others weve seen but notice there is still a
clear grid.

Enlarge

74 Hello Design World - Composition http://designbynumbers.io

 Hermes Cntd.
http://bit.ly/1UmvC05

Heres how the page is broken up:

Enlarge

75 Hello Design World - Composition http://designbynumbers.io

 Composition
Summary
When doing your layout, try to think with
rectangles. Big and small.

Quick hacks
For your first couple sites, try just copying
the layouts from this chapter or from sites
in your inspiration folder. Then as you build
confidence you can work from scratch.

If you design a site where the hero image

always has a 100% width, it can look weird on
a large screen. For that reason, I recommend
defining a max width.

76 Hello Design World - Composition http://designbynumbers.io

 CHAPTER 6

ALIGNMENT

Design is the conscious effort

to impose a meaningful order.

Victor Papanek
77
 Introduction
Alignment is stacking elements on top of one
another, either along the edges or down the
center.

When elements on a page are aligned, it

creates order. If you have several dissimilar
elements on a page, aligning them can
make them feel related. It helps your design
communicate quickly and clearly.

In this chapter well

discuss: When elements are not aligned.

Why alignment matters

Alignment of page elements
Typographic alignment

Why alignment
matters
Think of alignment like a Plinko board. When
your typography or imagery isnt aligned,
your eye bounces around as it moves down
the page. A website that uses alignment
communicates much faster. When type and When elements are aligned.
images are aligned, its like a Plinko board
with the middle pegs removed. Your eye can
move straight down the page quickly.

78 Hello Design World - Alignment http://designbynumbers.io

 Alignment of
Page Elements
Take a look at this product page. What
works and what doesnt? The typography is
pleasant, the product photography is clear,
but something feels off. Can you see it?

79 Hello Design World - Alignment http://designbynumbers.io

 Cntd.
You guessed it, the alignment is off. The
elements arent aligned straight.

80 Hello Design World - Alignment http://designbynumbers.io

 Cntd.
Now look at this one. Isnt it easier on your
eyes?

81 Hello Design World - Alignment http://designbynumbers.io

 Cntd.
When everything is aligned, it reads better.

82 Hello Design World - Alignment http://designbynumbers.io

 Typographic Centered
Alignment Center aligned copy is more common in recent
years due to the rise of responsive sites.
Alignment happens on a smaller scale too,
within individual paragraphs. One thing
to keep in mind is once you decide on how
you want your type to be aligned, the copy
elsewhere on the site should be aligned in the
same way. This creates a consistent viewing
experience. Here are the most common ways
to align type:

Flush left
Copy that is flushed left and ragged right is
the norm for most websites. Justified
This guidebook has justified type. It looks
nice, but avoid developing too many gaps in
your paragraphs called Rivers.

Flush right
You may find that flush right works better in
your design.

83 Hello Design World - Alignment http://designbynumbers.io

 Chapter Summary
Images and copy look better when theyre
aligned. Your eye can move faster down the
page.

Quick hacks
As you go around the Design by Number
items, this one is easy to check for. Either
your elements are aligned in the same way or
theyre not.

84 Hello Design World - Alignment http://designbynumbers.io

 CHAPTER 7

TYPOGRAPHY

Times New Roman is not a font choice so

much as the absence of a font choice, like
the blackness of deep space is not a color.

Matthew Butterick
85
 Introduction you can import the Typekit fonts into your
document.
Good typography is tricky for beginners to
pin down. A great typeface isnt as easily Type foundries liked this solution because
recognizable as a finely crafted suit or a it allowed font usage to be tracked and
beautiful photo. monitored.

You need to be exposed to good and bad type

repeatedly before you start to appreciate what
looks good.These are the basic things about
Google fonts
If you dont want to use a subscription
typography you should know when designing
service, you can host fonts on your own
for the web.
server.Most free fonts are not good, but
you can find some if you search carefully.

In this chapter well Here are the 30 best designed Google fonts
as determined by TypeWolf. TypeWolf is
discuss: a great resource to use for comparing and
selecting fonts.
Using fonts on the web
Personally, I use Typekit 90% of the time. If I
Usage tips want a particular font that I cant find there,
Ill use the fonts own hosting package. For
Leading example, we used Hoefler for a site once and
Tracking that font is only licensed by Typography.
com. They have their own font hosting
Kerning system that works much like TypeKit.

Using fonts on the Usage tips

web As a general rule of thumb, serif fonts are
For many years, web designers could only use often used for body copy, and sans-serif fonts
web safe fonts. Web safe fonts are those that are used for headlines. Thats because serif
are common on popular operating systems, copy is easier to read when theres a lot of it.
like Windows and OS X. And sans-serif fonts are easier to read quickly,
so it makes sense to use it for headlines.
Then around 2010, Typekit was launched and
it opened up a whole new world of fonts. With
Typekit, font libraries are stored on their
server, and if you want to use one, you just
Leading
(Pronounced ledd-ing)
paste some javascript on your site to make it
work. As a bonus, if you have Photoshop CS,

86 Hello Design World - Typography http://designbynumbers.io

 Leading is the space between the baseline of
each line of text. The word itself is a reference
to how they used to separate lines of type -
they would literally insert strips of lead. On
the web, leading is referred to as line-height.

Tracking
Tracking is the space between multiple
letters. On the web, its called letter spacing.

Kerning
While tracking is the space between a group
of letters, kerning is the distance in between
individual letters. For the longest time, it
wasnt possible to kern on the web. Now you
can with tools likekerningjs.com,although
its rarely done.

Kerning is a critical concept in print and other

mediums, so why is it ignored on the web?

I think this is mainly due to established ways

of working. When working with CSS, the
expectation is to define your selector and
then have your changes take effect sitewide.
But changing a single headline with kerning.
js would run contrary to that idea. I think
developers have just gotten comfortable
telling designers, kerning isnt possible on the
web, and I cant say I blame them.

For our purposes, I think its good to know

the concept of kerning, even though you
probably wont use it on the web.

On the following pages, youll see examples

of both good and bad leading and tracking.

87 Hello Design World - Typography http://designbynumbers.io

 Leading Too Tight
If your leading/line-height (the space above go to the next one, its difficult to tell which
and below your copy) is too tight, your eyes line you just read. The leading below is much
will have a hard time separating one line from too tight:
another. When you finish a line of text and

Chaparral Pro, 16pt font, 14pt leading

88 Hello Design World - Typography http://designbynumbers.io

 Loose Leading
Leading that is too loose makes the eye have say a news site. The difference is that the
to jump too far from line to line. While loose artsy site can be more expressive, but the
leading can be pleasant to look at, it must news site needs to be focused on conveying
also be readable. Loose leading often make information. This leading is too loose:
more sense on a fashion or artsy site than

Chaparral Pro, 16pt font, 34pt leading

89 Hello Design World - Typography http://designbynumbers.io

 Proper Leading
The sweet spot is somewhere in the middle. The paragraph below is 16pt, and the leading
Your leading should be at or a little above the is 22pt. I prefer my leading a little more open
size of your type. So if your font is 16pt, then as I feel it helps the design breathe. But if you
your leading should probably be somewhere think 18pt leading looks good with the 16pt
between 16pt and 22pt. Try a few values and font youre using, go for it.
see what looks good.

Chaparral Pro, 16pt font, 22pt leading

90 Hello Design World - Typography http://designbynumbers.io

 Tracking Too Tight
When theres not enough space between
letters (letter-spacing), it can be difficult
to read. And in some instances, it may even
cause words to form that you didnt intend!

Chaparral Pro, 16pt font, -50 tracking

Id rather not, thank you.

91 Hello Design World - Typography http://designbynumbers.io

 Tracking Too Loose
When theres too much space between letters,
it makes words difficult to read.

Chaparral Pro, 16pt font, 200 tracking

92 Hello Design World - Typography http://designbynumbers.io

 Proper Tracking
This has a nice amount of space between
the letters. Its not too cramped and not
too loose.

Chaparral Pro, 16pt font, 25pt tracking

93 Hello Design World - Typography http://designbynumbers.io

 Typography
Summary FF Din(1995)

If you follow the examples on the preceding Avenir(1988)

pages, youll be 80% there. The rest is finding Meta(1985)
a font that fits the concept youre going for.
Univers(1954)
And that just comes with practice and getting
feedback. Trade Gothic(1948)
Futura(1927)

Quick hacks Franklin Gothic(1902)

Akzidenz Grotesk(1896)
Dont use free fonts unless theyve been vetted
by a good designer. Unlike free open source
projects, free fonts are often amateurish.

Here are some great modern and classic serif

fonts:

Source Serif(2014)
FF Tundra(2011)
Sentinel(2009)
Miller(1997)
Mrs. Eaves(1996)
Palatino(1948)
Bodoni(1798)
Baskerville(1757)
Caslon(1722)

Garamond(1530)

And here are some great modern and classic

sans-serif fonts:

Brandon Grotesque(2010)
Proxima Nova(2005)

94 Hello Design World - Typography http://designbynumbers.io

 CHAPTER 8

HIERARCHY

Good design is a lot like

clear thinking made visual.

Edward Tufte
95
 Introduction
Every website will have some elements that
are more important than others.

Often the first element a user sees is large,

and the less important parts are smaller.
Some beginners have a tendency to make
everything big and important. Theyll use lots
of colors, big images, and large typography.
But that doesnt work. As the saying goes, If
everything is important, then nothing is.

As you work through the examples, you may

notice that hierarchy and composition are
closely related. A good composition often has
nice hierarchy.

In this chapter well

discuss:
Good examples of hierarchy

96 Hello Design World - Hierarchy http://designbynumbers.io

 Ikano Wine
http://ikano.ge

Comedians use contrast in their jokes for and small shelf is striking and draws you
greater impact. Contrast can be used in design in. On this page, hierarchy is used to create
in a similar way. In the example below, the visual interest.
difference in scale between the large bottle

Enlarge

97 Hello Design World - Hierarchy http://designbynumbers.io

 Compliments
Furniture
http://compliments.dk

A persons eye moves from top to bottom furniture store recently released their new
when they look at a web page. So if your collection. Its important to them, so they
site has a lot of content, youll want to put feature it at the top.
the most important stuff at the top. This

Enlarge

98 Hello Design World - Hierarchy http://designbynumbers.io

 Hoover-Mason
Trestle
http://hoovermason.com/

This site documents the historic Hoover- the site. The smaller modules on the right
Mason trestle in Pennsylvania. The first are first-hand accounts from workers and a
black and white module is the largest because page that has directions to the trestle. Those
it links to the main interactive experience on sections arent as important, so theyre less
prominent.

Enlarge

99 Hello Design World - Hierarchy http://designbynumbers.io

 Weber Grills
http://bbqcultures.com/en_GB/intro

This is a microsite for Weber Grills. The the journey module is large and at the top -
primary experience is a journey around the its whats most important.
world which explores how different cultures
barbeque. It makes sense that the continue

Enlarge

100 Hello Design World - Hierarchy http://designbynumbers.io

 Weber Grills
http://www.bbqcultures.com/en_GB/intro

Below is an interactive experience within things are most important. Only later in
the Weber Grills site. The grill options the process do you consider details like
here have a nice heirarchy. Notice the temperature and cook time. Those settings
primary options at the top: weight, type are further down the page, as you would
of meat, and type of cooking. If you think expect.
about the barbecuing process, those three

Enlarge

101 Hello Design World - Hierarchy http://designbynumbers.io

 Oribe
http://www.oribe.com

Hierarchy in typography is an important subheadline were the same size, it would flood
thing to master. The headline below (Color the user with too much information.Thats a
ful Secret) is large, and the subheadline below lot of what design is about - giving the user
it is small. This allows the reader to see the just the right amount of information at the
headline and if theyre interested, they can right time. Also, the model is facing the
read more. But if not, they havent invested headline which further emphasizes it.
too much time. If the headline and the

Enlarge

102 Hello Design World - Hierarchy http://designbynumbers.io

 Taasksy
http://www.taasky.com

Even your websites colors can have a

hierarchy. Here the bright colors serve to
highlight things like buttons, whereas the
warm gray is always used in the background.

Enlarge

103 Hello Design World - Hierarchy http://designbynumbers.io

 Hierarchy Summary
Use hierarchy to let your user know what is
important. The largest element on the page
is often the most important.

Quick hacks
Try to find a simple large image that you
like and then fill in the rest with supporting
images.

104 Hello Design World - Hierarchy http://designbynumbers.io

 CHAPTER 9

COLOR

Color does not add a pleasant

quality to design it reinforces it.

Pierre Bonnard
105
 Introduction color red live in different worlds. Your colors
should support your concept. Or at the very
Color is an underrated design tool. When least, not conflict.
used correctly, it can make a website sing.
When I was a beginner designer, I often Brand (Chapter Three):
used too many colors in my designs. This
section will help you avoid that mistake. It Say youre doing a site for the Vietnam
will also help you approach your color choices Veterans Memorial in Washington DC. Thats
methodically. Youll have tangible reasons a very serious subject. The tone of any war
for why you picked that dark purple or that memorial is respectful and serious. So your
candy apple green. Most importantly, all your color choices should reflect that. Bright
colors will work with your websites concept, happy colors would feel out of place, in the
brand, and style to tell a cohesive story. same way that someone selling balloons near
the memorial would seem tacky.

In this chapter well Also, respect the clients brand guidelines. If

youre doing a microsite for IKEA, its likely

discuss: youll have to use their signature blue and

yellow.
What influences your color
There are some instances when the site
choices experience is so far removed from the brand
B&W + One Color that you can use other colors. But before
doing this, make sure you clear it with your
Analogous creative director or the client.

Complementary Style (Chapter Four):

Split Complementary Heres where your personal tastes can have a

voice. What style(s) are you considering from
Triad
the style section? Your color choices should

What influences
support that style. Design trends can be
considered too.

your color choices I would recommend choosing a palette rooted

When thinking about colors, you should keep in color theory. This will help your design
in mind the following three things: have more structure and impact. As you
explore the color options on the following
Concept (Chapter Two): pages, imagine what colors might work well
with the design style youre considering.
If your concept is water-related, using lots of
red probably wont work well. Water & the

106 Hello Design World - Color http://designbynumbers.io

 COLOR ST YLE ONE

B & W Plus
One Color
This first style isnt part of color theory like the rest of
the chapter, but it is a simple and effective approach
that can work well.

POSSIBLE USES:

To make dissimilar images cohesive

To bring attention to conceptually
important colors

107
 Necon
http://www.necon.pl/en/

This is a portfolio site for an ad agency. Necon a full-color screenshot of a project or click
has executed dozens of projects for clients through to view the individual project page.
with various photography and art direction I think the color coral was a stylistic choice
styles in them. This is problematic because rather than a conceptual one, although its
showing multiple projects in full color on their hard to say without knowing the background
site could make it feel disjointed. They solved of the project.
this by using a coral color as an overlay on top
of all the images. It makes the page cohesive.
When every image has coral in it, they have
a common denominator that anchors them.
You can still hover over an image to reveal

Enlarge

Black and White + One Highlight Color

108 Hello Design World - B & w plus one color http://designbynumbers.io

 Giventory
http://www.ginventory.co

This is a promotional page for a gin recipe

app. The yellow color comes from the concept.
Gin is a pale straw color, so its a nod to that.

Enlarge

Black and White + One Highlight Color

109 Hello Design World - B & w plus one color http://designbynumbers.io

 Beoplay/Rapha
Headphones
http://bit.ly/1QwCemQ

This is a cross-promotional product page

that Beoplay made for their Rapha-style
headphones. Rapha is a company that makes
cycling clothing and accessories. Pink is
their signature color, so Beoplay wanted to
highlight it, rather than use their own colors
and photography style.

Enlarge

Black and White + One Highlight Color

110 Hello Design World - B & w plus one color http://designbynumbers.io

 COLOR ST YLE TWO

Analogous
Analogous colors are near each other on the color wheel.
This style works best when three or four colors are used.
Often there will be one dominant color which the other
colors defer to.

POSSIBLE USES:

To convey a harmonious mood

When the content of the site is friendly

111
 Mambo Mambo
http://mambomambo.ca

This is a portfolio site for a creative agency in

Qubec, Canada. I think the tropical aesthetic
here is done ironically because Qubec is
awfully cold! The green and yellow creates a
happy and friendly feeling.

Enlarge

analogous

112 Hello Design World - Analogous http://designbynumbers.io

 Concept Car Site
http://bit.ly/1QwCkuO

This is a homepage mockup designed by

Vivek Venkatraman. The blues and blue
grays create a pleasant and consistent mood.

Enlarge

analogous

113 Hello Design World - Analogous http://designbynumbers.io

 Cereal Magazine
http://readcereal.com

This site uses a lot of grays throughout.

Because these grays are neutral, it allows you
to put just about any style or color of photo
you want over it. The green leaf was one of
several different colors placed on top of this
backdrop.

Enlarge

analogous

114 Hello Design World - Analogous http://designbynumbers.io

 COLOR ST YLE THREE

Complementary
Complementary colors are on opposite sides of the color
wheel. Complementary colors should be approached
with caution on the web because they create a lot of
tension. If you have large areas of the page with these
colors, it can hinder communication. The examples
below are a few complementary colors that work well.

POSSIBLE USES:

When you want the page to pop

To create excitement if the content of the
site is dull

115
 Sonor Design
http://dribbble.com

Sonor Design uses a muted red/orange and a

light blue/green.The design works because
the colors arent too intense.

Enlarge

complementary

116 Hello Design World - Complementary http://designbynumbers.io

 Orange PR &
Marketing
http://bit.ly/22o2V4S

The use of color is leaned upon heavily in this

design, more than any other example shown.
It works well here because the colors arent
fighting other elements for attention.

Enlarge

complementary

117 Hello Design World - Complementary http://designbynumbers.io

 Specialized
http://bit.ly/1OUUqo9

From the designer: The design itself was

largely inspiring by the angular shape of
the frame which is translated through the
cutaways and diamond shapes throughout
the design.

Enlarge

complementary

118 Hello Design World - Complementary http://designbynumbers.io

 Financial Claims
Made Easy
https://financialclaimsmadesimple.co.uk

Notice how they use the heavy purple

sparingly. It allows the lightness of the yellow
to come through.

Enlarge

complementary

119 Hello Design World - Complementary http://designbynumbers.io

 COLOR ST YLE FOUR

Split Complementary
Split complementary colors are nice because they
combine the pleasantness of analogous colors with a bit
of spunk.

POSSIBLE USES:

Almost anywhere

120
 Spina
https://spinanyc.com

Spina is a flower shop in NYC. You could almost

say this color scheme is complementary
because the greens and pinks are so dominant,
but I think theres enough yellow sprinkled
throughout for it to be split complementary.

Enlarge

split-complementary

121 Hello Design World - Split complementary http://designbynumbers.io

 Drug Addiction
PSA
http://www.addiction.mobydigg.de

This site explores what causes drug addiction.

The purple and red are very bold and
impossible to ignore. Notice that the green
has a little blue in it, thats ok! I bet they
started with a more neutral looking green
but then tweaked it to feel more dangerous
anddrug-like.
Enlarge

split-complementary

122 Hello Design World - Split complementary http://designbynumbers.io

 El Burro Mexican
http://elburro.no

This site is for a Mexican restaurant in

Norway. Notice how the colors also appear
in photos of the food. That helps hold the
composition together. And it was possibly the
inspiration for the pink, orange, and green
color scheme.

Enlarge

split-complementary

123 Hello Design World - Split complementary http://designbynumbers.io

 Guess
http://bit.ly/1p3Drf1

Here the designer wanted people to focus

their attention on the spring/summer line, so
she used colors from the actual products and
photo shoots. Notice how muted the colors
are - it makes the contrast between the colors
less intense, thus allowing MORE color to be
used. If the colors were not muted, the page
would likely be too intense.

Enlarge

split-complementary

124 Hello Design World - Split complementary http://designbynumbers.io

 COLOR ST YLE FIVE

Triad
Triads use three colors, all equidistant from one
another. Triads create a more mature variety of color,
as opposed to energetic split-complementary colors. If
split-complementaries are the lively 1963 She Loves
You Beatles, Triads are the more mature 1970 Let it
Be Beatles.

POSSIBLE USES:

To create variety without much drama

To convey a sense of strength

125
 Lorenzo Verzini
http://lorenzoverzini.com

This is the online portfolio of an art director/

designer. Online portfolios can use just about
any color scheme, so perhaps he simply liked
how these colors looked.

Enlarge

triad

126 Hello Design World - Triad http://designbynumbers.io

 Antoine Laoun
http://antoinelaoun.com

Antoine Laoun makes stylish glasses.

Personally, I have mixed feelings about this
design. I like the colors and the layout, but
its unclear why each pair of glasses was
designated that particular color (besides the
blue pair).So in this example, the colors and
concept arent quite working together.
Enlarge

triad

127 Hello Design World - Triad http://designbynumbers.io

 Triplagent
http://www.triplagent.com

Triplagent is a website and travel app. The

rich colors on the page pull you in.

Enlarge

triad

128 Hello Design World - Triad http://designbynumbers.io

 Color Summary
Color can be tricky. Use the color theories
mentioned to keep you on the right path.

Quick hacks
If your site concept is friendly try an
analogous color scheme.

If your site concept is hip or fun try a split-

complement color scheme.

If your site concept is bold, try a

complementary color scheme (but be
careful not to use too much color or it will
overpower everything else on the page).

If your site concept is grounded, try a triad

color scheme.

If you need more help visit http://

colorsupplyyy.com for initial inspiration,
then tweak from there.

129 Hello Design World - Triad http://designbynumbers.io

 C H A P T E R 10

PROXIMITY

A user interface is like a joke. If you

have to explain it, its not that good.

Martin LeBlanc
130
 Introduction
When two or more graphic elements are
close to one another, it implies theres a
relationship between them.

The concept of proximity wasnt created

out of the thin air. It was informed by
the way humans observe and interpret
our surroundings. When we see a herd of
elephants walking across the Savanna, we These two people are strangers.
assume theyre together. If we see a broken
window and a baseball on the ground next
to it, the closeness of the ball to the window
implies it broke it.

In this chapter well

discuss:
Proximity in nature and design
But this is a couple.
Proximity on the web

Proximity in nature
and design
Two scenes with the same elements can
convey different messages if the proximity of
the elements is altered. In the images on the
right, each image tells a different story when
the proximity of the people is changed.

Proximity in design works the same way:

when elements are close to one another, it
implies a relationship.

131 Hello Design World - Proximity http://designbynumbers.io

 Simple Login Form
http://bit.ly/1r3GFiQ

A login, password, and sign in button are all

needed to sign in to the site below. By putting
them close together, the user will (correctly)
assume theyre related.

Enlarge

132 Hello Design World - Proximity http://designbynumbers.io

 E-commerce
Prototype
http://bit.ly/1r3GOTE

In the example below, once the user features with similar functionality near one
understands that many filters are on the left, another like this reduces the users cognitive
they will (correctly) assume that a filter they load.
havent used yet is also located there. Putting

Enlarge

133 Hello Design World - Proximity http://designbynumbers.io

 Lingo
https://www.lingoapp.com

This headline and sub-headline are related headline explains it. Take note that this is
- thats why theyre so close together. The also a good example of hierarchy.
headline catches your attention and the sub-
Enlarge

134 Hello Design World - Proximity http://designbynumbers.io

 Stylish Bags
http://bit.ly/1YWCH6V

Look at this read more button. Its not near field sitting far apart from the beginning of
the paragraph in the middle of the page, but the chapter? Thats what this is out-of-place
it should be because the designer wants the button is like.
user to read that paragraph and then click
read more. Remember that couple in the

Enlarge

135 Hello Design World - Proximity http://designbynumbers.io

 Cntd.
http://bit.ly/1YWCH6V

Now look at it. This position is much better. your intuition tells you theyre related in
We have a headline, subheadline, and a call to some way. Just like the couple sitting near
action (the read more button), all similarly one another in the park.
spaced apart. Its a group. So when you quickly
scan the page and see those three elements,

Enlarge

136 Hello Design World - Proximity http://designbynumbers.io

 Vibrant Composites
http://www.vibrantcomposites.com

Sometimes combining type and image will of the hand is also a good use of imagery - its
make something more striking than if they an indicator that whats to come is related to
were separate. The way the type touches the touch in some way (the page is about haptic
hand here is nice. It draws you in. The photo sensors). The photo supports the concept.

Enlarge

137 Hello Design World - Proximity http://designbynumbers.io

 Glossier
http://www.godynamo.com/project/glossier

Even though this type is loosely placed over

the images, each headline touches an image,
implying a relationship.

Enlarge

138 Hello Design World - Proximity http://designbynumbers.io

 Milk Makeup
https://milkmakeup.com

This one is interesting. Everything weve other plane you see the womans eye with
seen so far has been an example of proximity the makeup applied. Theyre far apart. They
along the x and y-axis. But this one uses it dont have to compete for space so both use
along the z-axis. Its a nice approach because the entire canvas of the page.
on one plane you see the makeup, and on the

Enlarge

139 Hello Design World - Proximity http://designbynumbers.io

 Chapter Summary
When two or more graphic elements are
close to one another, it implies theres a
relationship between them. When you want
to associate two images, put them together.
When you dont, position them far apart.

140 Hello Design World - Proximity http://designbynumbers.io

 C H A P T E R 11

THE DXN FRAMEWORK

Rule books tell people what to do. Frame-

works guide people how to act. Rule books
insist on discipline. Frameworks allow for
creativity.

Simon Sinek
141
 Design by Numbers
No, sorry, this is not a software framework. a diagram of how the framework fits
You got a little excited there, didnt you. together. Research happens once at the
start of a project, thats why its outside the
Design by Numbers is a mental framework circle. Concept is in the middle because it
thats going to help you learn to design influences what everything else will look
a website from scratch. Any site can be like.
designed by adhering to the ten principles
we just covered: Research, concept, brand, But something is still missing. When youre
style, composition, alignment, typography, designing something, you dont go around
hierarchy, color, and proximity. Below is the circle once, you do it repeatedly. Its a

1. Research
3. Brand

10. Proximity 4. Style

9. Color 2. CONCEPT 5. Composition

8. Hierarchy 6. Alignment

7. Typography

142 Hello Design World - The dxn framework http://designbynumbers.io

 process. the center, each time we hit color, our
palette options will get more refined. Thats
So if we want to get picky, its more like a
because when you go around the spiral, the
spiral. And each time you go around, your
choices you make may also affect color! On
design gets tighter and more refined. I call
the first pass our color options are wide
this process the refinement spiral and it
open. But then you read the creative brief
looks like the diagram below. Lets look
which influences the kinds of colors youre
at one item, color. Imagine we printed
considering. Your options narrow. Then a
out the spiral and were working our way
couple passes later your concept changes
around it, making sure to hit each design
slightly. Your color options narrow further.
principle along the way. As we move toward

Research
Brand

Style
Proximity

Color C C
Composition

Hierarchy Alignment

Typography

143 Hello Design World - The dxn framework http://designbynumbers.io

 Eventually you will have narrowed it down to scratch those old notes out and revise them
just a couple palettes. as needed.

Some steps will be repeated more than On the following pages, well explore what
others. Color, typography, hierarchy, and it feels like each time you go around the
proximity will probably be tweaked the refinement spiral.
most, whereas research happens just once.
Your concept wont change much either. If it
does change, you may be better off starting
over, because the concept influences so
many other (already worked on) sections.
But dont get worried about that - if you
have to change your concept it will save you
time in the long run.

The design process is actually quite similar

to how we code. When youre programming,
you dont go line by line until youre
finished, you work on things in sections.
One moment you may be writing a function,
the next minute you scroll down and add a
div to your markup. You make tweaks to this
thing here which affects that other thing
there.

Design is the same way.

Once you understand thats how the process

works, it will get easier. Experienced
designers will have confronted the spiral
many times, so they wont need to go
around it as much as you. Thats ok! As
you go through each step, over and over, I
encourage you to write down the decisions
you make at each step. Have some colors in
mind at the beginning of the project and
write them down. Have a concept in mind?
Write it down.

Then as you go around the spiral you can

144 Hello Design World - The dxn framework http://designbynumbers.io

 Refinement Spiral
1st Pass
This is what the 1st pass around the spiral
looks like.

Research

Read the creative brief

Research what the competition is doing
First pass
What does your site and the competition
have in common?
Color
What can you do thats different from them?
Is this a mockup or real site? Think about the concept, brand, and style,
Start saving visuals to an inspiration folder then pick one of the five color styles from the
color chapter that you think might work with
Brand
it.
Write down in words and phrases what you
Typography
think the clients brand is about. If they dont
have a well-defined brand, find out what they (n/a for this first pass)
do well in their business and who their target
audience is. Write those things down. Composition

Concept Make sure you use a grid to give your design

structure. Use copy from the current site and
Concept = brief + clients brand + inspiration. lay it out on the screen. Is there a composition
Write down some possible website concepts. from chapter four that might work well for
the amount of copy?
Style
Hierarchy
Style is: The essence of the brand + The
purpose of the site + Your personal tastes (n/a for this first pass)

Look at the five styles and pick one that you Proximity
think will work with the three factors above.
(n/a for this first pass)
Full-color photo
Duotone Alignment
B&W photo
Decide how you will align your copy. (Flush
Illustration
left, flush rightetc.)
Collage

145 Hello Design World - The dxn framework http://designbynumbers.io

 Refinement Spiral
2nd Pass
This is what the 2nd pass around the spiral
looks like.

Research
Second pass
Completed during the 1st pass.

Brand Composition

Completed during the 1st pass. Use the compositions from chapter 4 as
an inspiration and start making a grid in
Concept
Photoshop with empty rectangles to represent
Maybe you have three concepts youre where content might go.
considering, but you like one more than
Hierarchy
others. Try using that one.
Start to look at the rectangles from earlier
Style
and consider if some rectangles are more
Lets say you picked the full-color photo important than others (thats a good thing).
style. Start looking on the web for photos
Proximity
you can use.
(n/a)
Color
Alignment
In your 1st pass, you picked split-complement
as your color style. Start trying out individual Make sure the rectangles from the previous
colors now. Do your colors work with the step are aligned.
sites concept, brand, and style?

Typography

Take some copy from the clients existing

website and paste it into your Photoshop
document. Pick one font for your headlines
and one for body copy. Use Typekit or fonts
from this list of 30 quality Google fonts. Pick
fonts that you think support your concept.

146 Hello Design World - The dxn framework http://designbynumbers.io

 Refinement Spiral
3rd Pass
This is what the 3rd pass around the spiral
looks like.

Research

Completed during the 1st pass. Third pass

Brand Insert all of the website copy into the

composition. The more important stuff
Check to see if your design still supports the
should get more real estate on the page.
brand.
Hierarchy
Concept
Some sections should call attention to
Check to see if your design still supports the
themselves more than others.
concept.
Proximity
Style
Are elements that are about the same thing,
Youve picked the full-color photo style, found
near one another? They probably should be.
photos that will work well in your comp, and
youve started adding and removing them to Alignment
see what works well.
Make sure your copy is aligned according to
Color how you decided during the first pass.

You picked some split-complementary colors

you like. It supports the sites concept, brand,
and style.

Typography

Are your headlines larger than your

subheadlines? Good. Is your body copy easy
to read? Good.

Composition

147 Hello Design World - The dxn framework http://designbynumbers.io

 Refinement Spiral
4th Pass
This is what the 4th pass around the spiral
looks like.

Research

Completed during the 1st pass. Completed design

Brand After moving things around a lot, the

hierarchy now makes sense.
Check to see if your design still supports the
brand. Proximity

Concept All related elements are near one another.

Check to see if your design still supports the Alignment

concept. In particular, do the colors and style
work well together? Everything is aligned!

Style

You found photos that work well together

and support everything else on the page.

Color

You tweaked the colors a bit. But it still

supports the sites concept, brand, and style.

Typography

You changed out a font for a new one. Youre

happy with your font choices now.

Composition

Adjust the composition as needed.

Hierarchy

148 Hello Design World - The dxn framework http://designbynumbers.io

 Chapter summary
To prevent yourself from spinning your
wheels, follow the ten steps as you design.
Try to do them in order, at least in the
beginning. As you keep going around
the spiral, your design will get refined.
There will be times youll get frustrated, but
knowing youre following a process should
reduce that feeling.

Lastly, as a beginner, you have less RAM in

your head than a professional designer. So
write down all the design decisions youre
making. Copy and save this outline and jot
down your notes in your preferred note
taking app.

149 Hello Design World - The dxn framework http://designbynumbers.io

 C H A P T E R 12

EXERCISES

Practice puts brains in your muscles.

Sam Snead
150
 How to Approach
these Exercises
As I mentioned in the very beginning of the
book, the best way to get better is to practice.
On the following pages are five creative briefs.
They may seem intimidating, but I encourage
you to try to execute them by using the Design
by Numbers framework.

Good luck!

151 Hello Design World - Exercises http://designbynumbers.io

 Creative Brief One Competitors:
Other films opening thesame weekend.

What do customers believe about the

films?
Some people think the franchise has run its
course and are weary of another movie. It
might be a challenge to make it seem like
this 5th film is new and different.

Deliverables:
One homepage (for now)

Live site or mockup?

The client wants to see a look and feel
execution of the homepage and well go from
there.

Client:
Disney

Background:
The Pirates of the Caribbean franchise
started in 2003.There have been four films
to date and Disney has decided to do a fifth.
It will have the same stars as the other films.
They often have a site for their movies but
theyre putting a little more money into this
one.

Who are weinfluencing?

The target demographic is young people ages
10-34.

The Problem:
The client doesnt think they have a problem
that needs solving, rather the site is part of
a larger budget to promote the movie. We
just need to make the site as compelling as
possible.

152 Hello Design World - Exercises http://designbynumbers.io

 Creative Brief Two developing more sophisticated tastes at an
earlier age. Whereas before their customers
would start with HCB and then move on
to H&M sometime in college, now they are
shifting towardcoolerstores much earlier.
The brand voice is weak and the homepage
doesnt feel cohesive.

Competitors:
Charlotte Rouse, Forever 21, H&M, ASOS.

What do customers believe about HCB?

Older girls think HCB is for young girls and
tweens. They dont like it the way they did
when they were younger.

Client: HCB What would we like them to believe?

That HCB can go toe-to-toe with Forever 21
Background: and H&M. However, they dont want to be
The client is an online fashion boutique. so hip that it makes parents uncomfortable.
It cant be too edgy because their clothes
How they describe themselves:
arent.
H.C.B. is for every girl who loves getting dressed
Deliverables:
in the morning. For the lady who loves to laugh,
One homepage. It is not a responsive site.
to smile, and to feel beautiful, both inside and
The client wants three design options to
out. Its for the woman who surrounds herself
choose from, and this will be one of them.
with wonderful friends, family, and significant
others, and goes through life sharing her Live site or mockup?
experiences with all of them. Shes sometimes The client eventually wants a real site, but
professional, sometimes casual, sometimes this phase is to determine look and feel.
modest, and sometimes likes to look a little sexy That is, they want us to pitch them what
and have a great night out. And this is her closet. the final site might look like, including
May she always love every piece and every photography style, links, content, and
moment she has in it. anything else we think is necessary.

Who are weinfluencing?

Young women ages 15-22.

The Problem:
HCB recently conducted a survey which
found that their primary customer base is

153 Hello Design World - Exercises http://designbynumbers.io

 Creative Brief Three
Competitors:
Patagonia,Eddie Bauer, LL Bean

What do customers believe about REI?

Older people like them, younger people are
indifferent or dont like them.

Deliverables:
A homepage conceptreflecting the new
brand direction.

Live site or mockup?

Mockup.

Client:
REI

Background:
REI is a privately held American retail store
organized as a consumers cooperative,
selling outdoor recreation gear, sporting
goods, and clothing via some 143 retail
stores in 36 states, catalogs, and the
Internet.

Who are weinfluencing?

Millennials. But not at the expense of loyal
Baby Boomers.

The Problem:
REI is doing fine with Baby Boomers.
Theyve grown up with REI and trust
them. However, surveys conducted with
millennials have indicated that REI isnt
for them - its a store that their dads like.
The task is to modernize the brand without
alienating the Baby Boomers. The client
believes Patagonia straddles this line very
well.

154 Hello Design World - Exercises http://designbynumbers.io

 Creative Brief Four sophisticated brand.

Deliverables:
One desktop product page.

Live site or mockup?

Live site. Use real product shots, even
though they will be replaced later with
images on their server.

Client:
Ping

Background:
Ping is an American manufacturer of golf
equipment, based in Phoenix, AZ. Ping was
founded by Karsten Solheim, following a
career as an engineer at the General Electric
company.

Who are weinfluencing?

Golfers of all ages.

The Problem:
Ping has respectable clubs but they dont
have the brand sophistication of competitors
like TaylorMade or Titleist. Theyre updating
their brand and a new website is part of that
update.

Competitors:
TaylorMade, Titleist, Callaway.

What do customers believe about Ping?

They like their clubs and customer service.
Customers dont report a problem per-se but
when surveys are taken, Ping is not seen as a

155 Hello Design World - Exercises http://designbynumbers.io

 Creative Brief Five Few buyers know anything about themwhen
looking for a home.

Deliverables:
One desktop and mobile product page. The
site will be responsive.

Live site or mockup?

Mockup.

Client:
Bellwether Mortgage

Background:
Bellwether Mortgage is the opposite of the
big faceless lender. Most of their lenders
have lived in the areas they service for
decades. A large portion of their revenue
helps housing initiatives for low and
moderate income families in diverse,
thriving communities.

Who are weinfluencing?

New home buyers.

The Problem:
The advantage Bellwether has over everyone
else is their handholding and customer
service. Its what theyre known for.
However, none of this is reflected in their
marketing material or on their site.

Competitors:
Stearns Lending, Caliber Home Loans,
LoanDepot.

What do clients believe about Bellwether?

156 Hello Design World - Exercises http://designbynumbers.io

 Thanks!
I tried the make this guide in a way that was
easier for my developer friends to understand.
If anything is unclear or needs further
explanation, please let me know. There was
a lot to cover in this book, so pat yourself on
the back. And now that youre all done, start
practicing!

best, Mason

157 Hello Design World - Exercises http://designbynumbers.io