Uxpin Web Design Book of Trends 2015 2016

Copyright 2015 by UXPin Inc.
All rights reserved. No part of this publication text may be uploaded

or posted online without the prior written permission of the publisher.
For permission requests, write to the publisher, addressed Attention:

Permissions Request, to [email protected].
Index
Flat Design Evolved
The New Flat Design
5 Characteristic Components of Flat Design
12
Advantages and Disadvantages
16
Prevailing Trends in Flat Design
17
Flat Design and Material Design
22
Thinking Beyond the Present
23
10 Free Resources and Tools
26
Functional Minimalism
28
Only the Essentials
29
Combining Minimalism with Other Styles
31
Negative Space
35
Visual Harmony and Symmetry
36
Contrast39
Is Minimalism Right for Your Site?
40
Minimalism Best Practices
41
44
46
Card UI Patterns
48
Container-style Design
49
Cards in Mobile and Responsive Design
52
53
Best Practices
55
Cards in Action
56
Cards and Material Design
58
59
62
Immersive Interactions
64
The Power of Interactivity
65
5 Pillars of Interaction Design
66
The Evolution of Interaction
68
Webgraphics69
Microinteractions71
Interaction Design Examples
73
Thinking Beyond 2015
75
78
Beautiful Animations
80
Pre-Internet Roots
81
Attributes of Web Animation
83
8 Popular Web Animation Techniques
85
95
98
Dramatic Typography
100
Defining Dramatic Typography
101
Typography Basics
102
Font Availability
104
Extreme Sizes
106
Superimposed Over Images
112
Creative Use of Simple Typefaces
113
Custom Typeface
114
Artistic Fonts
116
Combining Techniques
117
118
120
Vibrant Colors
122
Influences from Fashion and Interior Design
122
Why Now?
124
Monochromatic Schemes
125
Accents
126
Blocking and Hovering
127
Color and Texture
129
Best Practices
130
135
137
Captivating Photography
139
Trends in Modern Web Photography
141
Web Photography Options
145
Custom Photography
146
Stock Photography
148
Combining Custom and Stock
150
153
Long Scrolls
155
A Short History of Long Scrolling
156
Impact of Screen Size
158
Storytelling159
Scrolling Options
161
Best Practices
164
166
168
HD Backgrounds
170
Some Background on HD Backgrounds
171
3 Trends in HD Backgrounds
174
180
184
Jerry Cao is a content strategist at UXPin where he gets to put

his overly active imagination to paper every day. In a past life, he
developed content strategies for clients at Brafton and worked in
traditional advertising at DDB San Francisco. In his spare time he
enjoys playing electric guitar, watching foreign horror films, and
expanding his knowledge of random facts.
Follow me on Twitter
Carrie Cousins has more than 10 years experience in the media

industry, including design, editing, and writing for print and online publications. Carrie is also a sports fanatic and spends way
too much time planning football and basketball trips and obsessing over stats.
Follow me on Twitter
Co-founder and head of product, Kamil previously worked as a

UX/UI Designer at Grupa Nokaut. He studied software engineering in university, but design and psychology have always been
his greatest passions.
Follow me on Twitter @ziebak
Flat Design Evolved
The iconic design style of the 2010s isnt going anywhere... but it is
evolving.
The flat design revolution has been gaining momentum with surprising
speed over the last few years. Considering its inherent simplicity, its
not hard to see why: it makes any interface feel a little more intuitive,
it works well with responsive design and modern framework, and,
or course, it looks amazing (when done right).
But the flat design style wont stay stagnant, even if it does stay popular.
In the next year or so we can expect it to adapt to shifting needs and
new creative insights. How exactly will it change? Lets take a look.
The New Flat Design

Starting as a rebellion against the dominating skeumorphic style,
flat design has since come into its own and is not more than just the
option B that it used to be. Today, and in the near future, the style
Flat Design Evolved
10
is expanding and maturing into what Ryan Allen calls Flat 2.0.
Flat 2.0 is an evolution, not a revolution, Allen wrote. Where flat
design was a radical departure from the rampant skeuomorphism of
days gone by, flat 2.0 is a playful branch off the flat tree. Flat design
is the Christmas tree, Flat 2.0 is the ornaments and candy canes. And
presents. No tinsel though, that stuff is a mess to clean up.
Photo credits: Left image- iPhone iOS 6. Manesh Mohan. Creative Commons. Rotated and cropped
from original. Photo credits: Right image- iPhone 6 Apps. Microservios Geek Crew. Creative Commons. Rotated and cropped from original.
Originally flat design was rigorously flat, with little accentuation and
a heavy emphasis on minimalism. The new flat, however, is enjoying
some more playful flourishes that make it almost flat. Lately, we
see more eye-catching elements, like hints of shadows and coloration,
that flat purists would refute, but the design community embraces
for its cohesiveness with other popular design patterns.
You can virtually see the flat design style evolve in the three examples below:
Flat Design Evolved
11
Photo credits: http://hlkagency.com/
The HLK Agency is strictly flat to further its minimalist atmosphere.

No flourishes, not distracting visuals no nonsense.
Photo credits: http://agencysurvivalkit.com/
Flat Design Evolved
12
The Agency Survival kit, on the other hand, takes a few liberties like
shading and texture, while still remaining predominantly flat.
Photo credits: http://www.forestapp.cc/
Last, the Forest App site is more like a flat hybrid, combining the
simplistic elements of flat design with photo realism.
5 Characteristic Components of Flat Design

Influenced by Swiss/international design and artistic minimalism,
flat design utilizes techniques from various mediums and eras and
draws them together in something all its own. Here are the five most
recognizable techniques the new flat design uses to set itself apart
from competing styles, including its origins.
1. Long shadows
Part of Flat 2.0, long shadows add a depth and complexity without sacrificing the minimalistic elements that make flat design
appealing.
Flat Design Evolved
13
Source: Duffy & Partners
While last year saw the trend of longer, more noir-ish shadows,
lately the trend has been moving towards subtlety. In the above
example from Duffy & Partners, the products shadow (and reflection) are slight and unobtrusive, but still add a little extra visual
interest.
2. Dynamic Colors
To make up for the sparse visual effects, flat design implements
a dynamic usage of color, especially bright hues. The energizing
colors contrasted with one another keep a page of few elements
from appearing dull.
Source: Helbak
Flat Design Evolved
14
Because color usage is so crucial in flat design, the site Flat UI Colors
collected some of the most effective of these patterns.
3. Simple Typography
True to form, the typography in flat design stays simple and easy
to read which usually equates to sans serif and a uniform stroke
width.
Source: Intercom
With its emphasis on readability, the popularization of flat typography is even infiltrating other, less minimalist styles of design.
4. Ghost Buttons
One of the trendiest elements in web design lately, the ghost button fits in equally well with the photo hero backgrounds as it does
Flat Design Evolved
15
with flat design, and for the same reason: it doesnt draw too much
attention to itself, but it is still recognizable as a button.
Source: Vaughn Shave
Source: IndieGogo
The simple typography within the buttons furthers the effects of deflecting too much attention.
Flat Design Evolved
16
5. Minimalism
Flat design and minimalism go hand-in-hand, sharing many of the
same principles like simplicity and content-focused design.
Source: Uber
While it may seem like the easy way out, minimalism is actually harder to do well. Fewer elements mean you have to use the
available ones with more care. Well discuss minimalism in more
detail in the next chapter.

No matter how great flat design is, what matters most is if it will
work with your site. Take a look at the advantages and disadvantages
below and see how it can mesh with your site.
Flat Design Evolved
17
Advantages
Conducive to responsive design
Easy for users to learn the system and navigate
Structured layout and blunt visuals present a logical atmosphere
Speedy loading times
Simple typography promotes readability
Disadvantages
Deceptively difficult to do well
Simplistic style weakens the signifiers
High risk of appearing boring
Lack of individuality due to its popularity
No distinct visual hierarchy
Flat design is inherently simple and minimalistic, so its more difficult
for conveying visually complex messages. Think carefully about what
your site needs to communicate before diving in head-first.
Prevailing Trends in Flat Design

In the evolution of flat design, were starting to pinpoint the characteristics that are gaining strength in the near future. For the rest of
2015 and 2016, expect to see a prevalence of these features:
1. Creative Iconography
With only the essential elements on the screen, icons need more
detail and flair to keep things interesting.
Flat Design Evolved
18
Photo credits: Munchery
Photo credits: Mixpanel
Icons are growing in size to incorporate more detail, and as such

as becoming more of a mainstay artistic element for a sites expression.
2. Dramatic Typography
While we discuss the future of typography in our free Typography
Trends Present & Future, here well mention the increasing usage
of pleasing typography, custom typefaces, purposeful lettering.
Flat Design Evolved
19
Photo credit: Beoplay
The typography popularized by flat design is now being employed

by other trends like hero headers, oversized typography or type-only websites.
3. Accented Colors
The characteristic bright color palettes of flat design will never
fully go out of style. However, the trend seems to be shifting to
more stand color palettes with bright colors used only as accents.
Photo credits: Infographic Arte
Flat Design Evolved
20
Photo credits: Rdio
Contrasting the bright colors against dryer backgrounds and surrounding elements gives the designer more control over whats
seen and whats not.
4. One Design, One Font

With the exception of logos for brand identity, most text in flat
design shares the same or similar font.
Photo credits: Dropbox Guide
Flat Design Evolved
21
And because these fonts are typically simple and unassuming,

using the same one throughout ensures the focus remains on the
content and not the look of the letters.
5. Minimalism
Minimalism may be trending right now, but for good reason. Its
simplicity is both easy-on-the-eyes as well as functional, making
it a popular choice for landing pages.
Photo credits: http://www.micelistudios.com/
The benefits of minimalism on responsive design, too, are obvious,

as the lightweight designs translate much easier across different
screen sizes.
Flat Design Evolved
22
Flat Design and Material Design

Flat & Material are more compatible than you might think.
Googles Material Design follows three core principles:
Realistic visual cues
Design theory fundamentals
Motion that conveys meaning
These greatly coincide with the ideals of flat design, but with some
major differences: material design places a greater emphasis on
motion, animation, and layering of design elements. Aesthetically,
material design is a more paper-like version of flat design with subtle
textures and full use of the Z-axis.
Photo credit: Google Material Design Principles
The one constant is the uniformity of visuals: colors, shapes, and

overall structure tend to be simplistic and oriented with the fun
Flat Design Evolved
23
atmosphere we discussed above. Even material designs layering

effects a seeming opposite of flat designs single layer displays a
simplicity thats easy to confuse with flat design.
Considering the bold images, crisp edges, and vibrant look, you can
see how the older flat design has influenced the up-and-coming material design.
If anything, material design is favoring practicality over simplicity.
Its layering effect allows more leeway in visual hierarchy and incorporating more elements by readily differentiating each. At the same
time, its lax visual rules allow for more skeuomorphic signifiers and
all the practical benefits of animation.

Flat design has already had a profound influence of design culture,
and its current widespread use is deepening that impact.
In the near future, expect flat design elements to merge with and be
incorporated into other styles. For instance, the light visual load and
fun ambience make it a nice fit for parallax scrolling.
Canal TP combines flats simple visuals and typography with more
complex animation and parallax scrolling to create something thats
a happy medium.
Flat Design Evolved
24
http://www.canaltp.fr/
Flat design continues to integrate animation and other interactive

elements. While this may detract from the simplicity, these advancements will be done in such a style to maintain the minimalist aesthetic.
http://www.papertelevision.com/
Papertelevision seems like a simple enough site, but the flashy animations on certain actions give it a competitively modern feel.
Flat Design Evolved
25
The heart of flat design is stupidly simple usability. The obvious

visuals improve learnability since users intuitively know how the
site works. We predict that flat design bold icons and elegant button
styles will seep into other design philosophies.
http://www.emilianobarri.com/
Another growing trend is the prominence of imagery, and well likely

see this and flat design start to intertwine. While early flat sites didnt
use much photography, todays (and tomorrows) evolved flat design
is doing wonderfully creative things with realistic imagery.
Emiliano Barri (above) combines easy-to-use flat elements for the
navigation and minimal aesthetic, but uses a highly stylized and stimulating image as its centerpiece. The result of this hybrid is something
that takes advantage of the best of both styles.
Flat Design Evolved
26
Even though flat design grew out of an opposition to skeuomorphism,

today theres no reason the two cant coexist. As long as flat design can
bend slightly on the rigidity of its flatness, it can and will freely
incorporate more intricate and realistic elements of skeuomorphism.
Create Flat Design projects with UXPin!

1. Flat UI Colors: Detailed color and hue information for implementing the traditional flat design color palette.
2. The Ultimate Guide to Flat Design: WebdesignerDepots collection of flat UI kits, icons, tools, fonts, and WordPress themes.
3. Flat Design 2.0: A site analyzing the differences between modern and traditional flat design.
4. Flat Design Website Inspiration from Awwwards: A gallery of
the best flat design websites, updated regularly.
5. Flat UI Typography: A tool that allows you to preview typography against a flat design screen before you implement it.
6. Google Material Design Guide: Googles living document outlines the concepts and themes the Internet king is using.
7. The History of Flat Design: How Efficiency and Minimalism
Flat Design Evolved
27
Turned the Digital World Flat: An article from The Next Web
that brings to light the history of flat design and its surprisingly
deep roots.
8. Create a Long Shadow Tutorial: An instructional guide on how
to create a long shadow without use of a tool kit.
9. 50 Flat Icon Sets: Digital Synopsiss roundup of 50 flat icon sets
that are free to use or peruse.
10. 25 Flat Device Mockups: Templates for creating flat design
mockups on a variety of devices.
Rooted in the post-World War II artistic movement, minimalism has

re-emerged as a powerful technique in modern web design. Embodying
the concept of less is more, minimalist sites center around negative
space, unadorned typography, and sparse elements. Together with
flat design, minimalist sites offer a collection of practical benefits,
along with a pleasingly elegant appearance.
Source: Untitled. Lauryn. Creative Commons.
In this piece, well discuss the application of minimalism in web UI

design, and how to navigate that thin line between simplistic and
boring.
29
Only the Essentials

The core philosophy of minimalism is that, the less elements on a
screen, the more potent the remaining ones becomes. That means if
you have only four central elements...
Source: Huncwot
... each one of them attracts more attention than if you had much
more...
Source: Overstock
By that logic, if you had only a single element on the screen, you could
be positive your message was communicated to the user.
30
Source: Edgar Schmitz
Minimalism is not merely emptiness or scarcity. It is the intentional

stripping away of everything that distracts users from content. Design
around the content, and leave just enough secondary elements (like
navigation, for example) so that users dont get confused.
31
Combining Minimalism with Other Styles

Part of the beauty of minimalism is how well it complements other
styles.
Especially with todays prevalence of mobile devices and heavy-loading
animations, minimalism offers a way to reduce a sites maintenance
without reducing its quality. For this reason and others, minimalism
is often used in conjunction with the techniques below.
1. Flat Design
Source: Quotes Magazine
Minimalism and flat design go exceptionally well together, given

their emphasis on simplicity. Both forego design tricks to draw
attention to content, and the basic visual style of flat design is
inherently minimalistic.
32
2. Hero Headers and Images
Source: Apple
Source: Beats
Large HD images are rising in popularity since they add a touch of

realism to flat design interfaces without straying into skeuomorphism. Considering that these images take center stage in most
layouts, a minimalist approach helps bring out the visual richness
while still making core site elements (like buttons and navigation)
highly visible.
33
3. Simple Navigation
Source: ETQ
Simple navigation may be represented by icons, a set of simple

text labels, or the controversial hamburger menu.
The hamburger menu UI pattern reduces all navigational elements
into a single, simplified icon. While the strategy is the fastest way
to go full-throttle minimalistic, its not recommended for every
site such oversimplification reduces the discoverability of navigation items, so you need to proceed cautiously.
As Adobe UX Designer Sandyha Talwalker suggests, make sure you
understand the primary, secondary, and tertiary functions behind
the navigation design.
Remember that hamburger menus also result in less discoverability
of navigation items, and they can be less clear to people over 44
years old (as Linn Vizard of Usability Matters points out). Know
your users and the context, then decide if the hamburger menu
makes sense.
34
4. Dramatic Typography
Source: The Outpost
Typography takes on a whole new importance in minimalist sites

that dont use visuals. In that case, it becomes one of the few ways
left for a minimalist site to depict its personality and create atmosphere.
For sites that do feature visuals, typography is still a powerful site
element.
Because minimalism forces us to reduce the number of elements,
you must treat each element as its own canvas. Visual styles matter
even more when nothing distracts from the subtleties. Like we
described in Interaction Design Best Practices, words are the foundation of all interactions. Invest your time accordingly, since in a
minimalist layout, your copy and typography speaks even louder.
35
Negative Space
It should be no surprise that the most common element in minimalism
is no element at all. Negative space also known as white space is
the most important feature of minimalism, and what gives it much
of its power.
As described in Web Design for the Human Eye, the more negative
space around an object, the more the eye is drawn to it.
For example, in the Leen Heyne example below, the monochrome
logo and company tag competes with the gold and sparkling gems of
the jewelry. Both are surrounding by an expanse of negative space,
making it a safe bet the users eyes will go back-and-forth between
the two.
Source: Leen Heyne
Additionally, negative space adds an air of elegance, making minimalism the prefered style of high-end brands and other companies
looking to appear exclusive. Negative space adds confidence to your
36
site, telling users that you dont need to cram it full of content (or UI
elements) to convey the value.
To learn more about negative space techniques for web design, check
out the free e-book The Zen of White Space.
Visual Harmony and Symmetry

In order for a minimal design to be effective, it must be structured
effectively. This means a strong grid, visual balance, and carefully
constructed alignment.
The standard go-to solution in minimalism is to center the content (a
successful and safe strategy, but certainly not the only one). Sometimes the text is then aligned off-center for a more dynamic look,
but the most effective way to stay out is to avoid the center crutch
altogether.
This requires an understanding of the different forms of symmetry,
and how to balance the large and small elements on a screen. We
can categorize symmetry into four forms:
37
1. Halved symmetry The halves of the screen have compositions,

mostly horizontally, but occasionally vertically.
Source: Velvet Hammer
2. Approximate symmetry While the composition may be the

same, the visual weight is equal on both sides of the screen. For
example, one large element balanced by several smaller elements. As you can see below, the large visual on the left is somewhat balanced by the copy and CTA button on the right.
Source: Squarespace
38
3. Radial Symmetry Starting at the center point, the elements

exist symmetrically in a near-circular pattern.
Source: Carlo Barberis
4. Asymmetry Organized chaos, so to speak. This risky and difficult-to-apply layout, will give your site a different feel compared to others, which might just be what youre going for.
Asymmetry adds liveliness to the interface, making the user
enjoy the view as they move towards their destination. In our
experience, asymmetry requires the most skill to pull off since
youre just as likely to create a lopsided layout.
Source: Julie Flogeac
39
Contrast
Because you must design with fewer elements, you need to get creative when it comes to creating a visual hierarchy.
You can create contrast with color, size, shape, and location.
Source: We Aint Plastic
In the We Aint Plastic example above, you see the staple of minimalism, the white (or white offshoot) background contrasted with the
black gemstone. Furthermore, notice the use of scale for the text: the
brand name is larger than the Hire Me in the corner, though both
seem small in relation to the image.
The portfolio site uses contrast to first draw your attention to the
gemstone, which certainly leaves a strong impression. As you wonder
what it might represent, you scroll downward and see the designer
cleverly lists his skills as gems, which completes the visual metaphor.
40
When it comes to single-page sites, a minimalistic layout works well

because it helps chunk up content into bite-sized pieces. The right
level of contrast then creates clear visual hierarchies for each section,
making the scroll-based experience efficient and pleasant.
Is Minimalism Right for Your Site?

Demanding a strong command of design subtlety, minimalism is not
for every site.
Photo credit: Hasselblad
Lets look at some common problems sites run into when applying
minimalism.
Too much content Ecommercie sites like Ebay or Amazon carry a diverse range of products, so their site design must support
complex information architecture. However, even these sites ap-
41
ply some of the principles of minimalism, such as hiding content

until needed, and keeping an unobtrusive layout.
Too many ads In general, external ads and minimalism do not
go well together. Minimalism is precise and meticulous, so if you
cant control whats comes from the ad server, your entire design
could be upset by something trivial like the ads color. Even if the
ad is preset, its still one more element in a scheme designed for
as few elements as possible.
Children and young adult sites The short attention spans of
younger audiences make minimalism come across as boring; theyd
prefer sites with more visual stimulation.
Remember that the minimalist philosophy of content-driven design
applies to every site, but the minimalist aesthetic (e.g. tons of white
space, sparse elements) might not always be appropriate.
Minimalism Best Practices

Minimalism is not as easy as it may seem, so lets review some guidelines.
1. Minimalist landing page only The lack of elements can be
harmful to certain content-rich sites. In these cases, a better option might be in creating a minimalist landing page that leads to
a more intricate site.
42
2. Crisp copy While omitting needless words is great writing

advice in general, in minimalism its even more useful. Channel
Hemingway when writing your copy.
3. Top-heavy In accordance to user browsing habits, place high-level content with ample negative space at the top of the screen,
then increase the content density as the scroll deepens.
Photo credit: Squarespace
4. Keep it interesting Boring users is a constant threat with minimalism, so change up your layouts just to further engage them.
Alternating layouts along the Z-shaped reading pattern can help.
43
Photo credit: Wunderlist
5. One concept per page In the spirit of simplicity, each page/

screen should focus on only one concept, centered around a single visual.
6. Start simple A helpful way to design is to start with a black
and white wireframe, then add flourishes like color later. This
helps focus your decisions on content first (which is what your
users care most about).
If youre new to applying minimalism, its tough to decide what to
keep and what to toss.
Below weve made a quick list for beginners:
Essentials logo, navigation options, body content, contact information
Throw-aways social media links/icons, footers, widgets (especially lists, i.e., Top Posts)
44
On the bright side, the more you work in minimalism, the more you
develop your instincts about what can be cut.

Just like flat design evolving to suit the new needs, so too will minimalism. Like how flat design is evolving into almost-flat design, well
likely see a similar evolution in minimalist sites.
The style will enjoy more diversity and detail, while retaining its
core of simplicity and scarcity. On the horizon, pay attention to these
changing elements.
1. Texture Backgrounds will be free to include more texture
while retaining the ample negative space that shifts focus onto
the main content.
Source: Eleonora Zorzi
45
2. Colors Designers will embrace colors beyond the traditional

black and white backgrounds as they experiment with more unconventional color palettes.
Source: Mixd
3. Animation Animated effects in general are on the rise, so minimalist sites risk falling behind if they dont implement them.
However, these new effects will likewise follow the minimalist
spirit: simple, and with only what is essential.
Source: Words Can Save
4. Improved Usability In theory, minimalism excels in usability,

but its only a small step from a minimal design and an interface
thats missing some essentials. Now were starting to see smaller
46
additions for the sake of usability, such as clickable elements,

calls-to-action, scrolling, and more obvious icons.
Photo credit: Keecker
Minimalism as a design philosophy is an enduring and timeless concept.

Content-focused design always applies, even if the techniques ebb
and flow with whats popularly/practical at any given time. If you can
isolate this aspect of minimalism and apply it to your design, youll
never have to worry about falling out of vogue.
Start creating quick Wireframes in UXPin for free

1. Color Contrast Checker Enter your background and foreground colors to calculate the ratio of contrast to create the most
dynamic site.
47
2. Design Principles: Connecting and Separating Elements

Through Contrast and Similarity Smashing Magazines piece
on the strategies behind the minimalist foundations of contrast
and space.
3. 25 Sets of Icons for Minimal Web Design Icon resources for
maintaining the simple and non-distracting aesthetic.
4. Responsive Grid System Tool for creating a grid system for
between two and 12 columns.
5. Get inspired: 50 Awesome Examples of Minimal Typography A gallery from 1st Web Designer showcasing excellent
examples of minimal typography.
6. Create a Minimal Portfolio Website Design Tutorial A beginners guide to designing a minimal site in Adobe Photoshop.
7. Gallery of Minimal One-Page Websites A site dedicated to
featuring the best one-page websites.
8. Siiimple A gallery of CSS code for minimalist sites.
9. Best Minimalist WordPress Themes A nice launchpad for
minimalist templates, though not all are free.
10. Minimalist Color Palettes Some common minimalist color
schemes deviating from the standard black-on-white.
Card UI Patterns
So far in this ebook, the trends weve talked about have become
popular not just for their appealing visual styles, but because of their
practicality in mobile design. The success of flat design and minimalism has as much to do with their simplicity facilitating responsive
design as it does their aesthetic.
Source: UXPin
Card UI Patterns
49
This timing is no coincidence, as 2014 marked the first time mobile

internet usage exceeded desktop.
The card UI pattern is in the similar vein, though its usefulness extends beyond faster loading times and responsive adaptability. Nurtured by Pinterest and then popularized by social media sites like
Facebook and Twitter, card UIs are now one of the fastest growing
layouts today, and for good reason.
As well explain in this chapter, organizing content into bite-sized,
independant containers has benefits for any platform you choose.
Container-style Design
To understand this pattern, you must first understand the card itself.
Cards are, in essence, self-sufficient containers of information, with
each card representing its own singular thought. A card can contain
a variety of data images, text, buttons, links, comments, etc. but
all relate to the same concept.
Displaying information in this way creates a cleaner, more comprehensive interface (plus lends itself to gesture controls, as well explain
below). Lets explore some of the most popular card styles:
1. Pins The most recognizable layout for cards, based on Pinterest. Emulators of this style became so prevalent, Wordpress even
Card UI Patterns
50
collected several 26 of the best pin-style themes. Unfortunately,

the style became too popular, and lately these sites appear unoriginal.
Photo credit: http://ugsmag.com/
2. Masonry (Grid) The masonry-style framework features cards

structured logically with grids of equal spacing. This makes the
content both easy to understand and easy to browse.
Source: Erik Johansson
Card UI Patterns
51
3. Magazine Style Originating for news and magazine websites,

this style is now spilling over to other content-heavy sites like
blogs or portfolios. The characteristic of this layout is a teaser
image or text tag, linking out to the full article elsewhere.
Source: Relevant Magazine
In all cases, the container style of design works well as a way to

showcase a lot of content without overwhelming the user.
Card UI Patterns
52
Cards in Mobile and Responsive Design

As mentioned above, cards offer excellent compatibility with responsive frameworks. In frameworks that expand and contract, card grids
can restructure themselves to fit any breakpoint or screen size.
Source: The Verge
Designers have a lot of flexibility regarding the aspect ratio of the

card itself (plus how groups of cards fit together). A common strategy
is to maintain a fixed-width with a variable height, with consistent
spacing between cards.
Cards also allow for a consistent experience across devices a card
always functions the same way, no matter if its on a phone, tablet,
or desktop. Just think of Apples AirDrop function, which helps to
consolidate a users information across multiple Apple devices. When
theres incoming data, a notification card appears with the options
to either Accept or Decline. This card appears on all the devices and
functions in the same manner, so theres no confusion about what
to do whenever it appears.
Card UI Patterns
53
Another application is how the card-style fits in with gesture controls.

On touch screens, the cards instantaneously become buttons with no
extra effort. Clearing spaced and with obvious functionality (touch
the relevant card to interact with its central idea), cards transfer usability to mobile devices rather than lose it.

Cards may serve a broad range of industries, but that doesnt mean
they work for every site. Take a look at the advantages and disadvantages below.
Photo credit: dribbble.com
1. Advantages:
Intuitive understanding of how to use them
Ideal for aggregated content (a single website featuring content
from multiple external sites)
Easy to browse
Card UI Patterns
54
Shareable design cards are like the digital equivalent of a business card (which explains their popularity with social media)
Versatile cards can be adapted to almost any style, from minimalist to complex interfaces
2. Disadvantages
A bit played out, especially for clones of Pinterest or Facebook
Require heavy creative UX design, as interaction is a key component of their success
Risk of producing a cluttered feel
Require even more attention to visual design since each card can
only display a few types of information
Cards are easy to add to a design, but difficult to master. Since
they are so common nowadays, it takes real finesse to make the
pattern feel original without sacrificing its inherent usability.
Card UI Patterns
55
Best Practices
In her article, The Complete Guide to an Effective Card-Style Interface
Design, Carrie Cousins outlines the seven essential practices for designing with cards.
1. Negative space Use sufficient borders and padding to avoid
clutter.
2. One card, one concept The nature of cards is in how they simplify your sites structure. Dont undercut that by making each
card too complex.
3. Suitable images Because card images tend to be small, make
sure you use clear pictures and crop them in relation to where
theyll be used.
4. Simple typography Like images, text tends to be small, so simple typography is more legible. Choose simple and elegant typefaces. Avoid decorative typefaces.
5. Get creative Since this is such a popular style, make an extra
effort to stand out, whether an animated effect, video, round
frame, or new color scheme.
6. Use an open grid A standard grid helps maintain the same
spacing while respecting various sizes and breakpoints.
Card UI Patterns
56
7. Implement Fittss Law As we described in Interaction Design

Best Practices, Fitts Law, as applied to cards, suggests that the entire card be clickable, not just the text or the image. This makes
it easier for the user to interact.
WIth cards, you have only a small area to accomplish all that cards
goals. That means youll have to properly apply all the design fundamentals to get your point across.
Cards in Action
You cant really say that cards are a strictly visual style, nor can
you say they are strictly an interface element. Rather, cards form a
balanced union between the two usability principles applied and
manifested visually.
Below, well explore two sites that exemplify the pattern.
Photo credit: https://trello.com/
Card UI Patterns
57
The task management app Trello puts the power of cards into the
hands of the user.
Anyone can create to-do cards and organize them into card stacks
against a customized background. Not only does this illustrate the
cards utility in web and app design, it also demonstrates how useful
they are as an organizational tool in general. Users can fit pictures,
links, colored tags, and prioritization to each task represented by
a card. The reason Trello is a success is because their card format
outperforms tradition list-style task managers.
Photo credit: https://carriecousins.contently.com/
Contently, a platform for publishing portfolios, organizes what would

otherwise be an unruly jumble of links. Each card represents an
article and contains the necessary preview information like images
and descriptions, plus a link. Moreover, if features bits of micro-information Shares, Tweets, Likes within the card.
Card UI Patterns
58
Contently demonstrates how to compact the right amount of information into each card container. Considering that freelance employers are a good part of their audience, Contently chose the perfect UI
pattern to help people make quicker hiring decisions.
Cards and Material Design

Material Design relies heavily on cards, and their thorough analysis
of the technique holds a lot of weight. Their entry for cards in the
material design guide is worth checking up if youre looking for a
meticulous deconstruction.
Photo credit: http://www.google.com/design/spec/components/cards.html
Googles documentation for Material Design offers an elaborate explanation of the topic of cards, defining them as a piece of paper with
unique related data that serves as an entry point to more detailed
information. For example, a card could contain a photo, text, and a
link about a single subject.
Card UI Patterns
59
Their entry on cards further explains rules on usage, content, and

even suggestions on the layout itself. The principles certainly apply
beyond just Googles own design philosophy.

While card UI is constantly reshaping itself to fit new challenges, for
now well likely see most of the changes take place with responsive
and app design. This is at least somewhat related to the paper-like
influence Material Design is having over Android apps.
1. Technological Improvements
Cards in their current state will only remain as long as the technology permits. As the internet becomes more advanced, so too
will card design. This means, amongst other things, more intricate
elements. Videos replacing images, an idea that some designers
have been flirting with for years, might start to become more of
the norm. In a similar vein, the next iteration of cards might also
start featuring auto-updating content.
2. Deeper Interaction
In the near future, cards may also expand beyond their role of
simply linking to other areas. As we see with Material Design,
cards can display information as individual interactions occur,
whether thats automatic sorting or real-time updates (i.e., weather
forecasts).
Card UI Patterns
60
Photo credit: https://www.google.com/landing/now/#cards
These automatic features have already been implemented by Windows

Phone, but have the potential to infiltrate the larger Android base.
3. Size
Side-by-side with the trend of hero images, cards, too, are adopting
a bigger is better policy. Big cards allow for more detail and intricate typography, which means more opportunity for delightful
design instead of the bare-bones necessities. When combined with
smaller cards, bigger cards also allow more freedom for designers
to establish a visual hierarchy.
Photo credit: http://www.howarkitekter.se/
Card UI Patterns
61
HOW arkitekter (above) mixes large- and medium-sized cards

to influence how users navigate the site. Some cards act as links,
while other give direct information. The large size of the cards is
complemented by the wide gutters, which give the site a slightly
minimalist feel, and functionally provide breathing room so as
not to overcrowd the screen.
4. Wearables
Thanks to Google Glass, we now see how cards can serve as the UI
foundation for wearables.
Photo credit: https://developers.google.com/glass/design/style
While critics may consider Google Glass a commercial flop, others

think it has a change in the professional market. Regardless, the
idea of wearables is not going away, and from our viewpoint in
the present future iterations will also be dependant on cards for
their UI. Even to a further degree than mobile devices, wearables
must make efficient use of space. Cards, then, are the most practical choice.
Card UI Patterns
62
Across all mediums and devices, cards will continue to evolve as far
as technology will allow. After all, these digitized squares are hardly the first form. Dont forget that, not too long ago, cards were just
small pieces of paper that served the same purpose containing bits
of information for fast browsing.
Start a free trial and use Cards & Tiles in UXPin

1. How to Build a Card Interface with Sketch App 3 A tutorial
on how to make simple cards using Sketch (an up-and-coming
design app).
2. Implementing the Card Ui Pattern in Phone/HTML5 Applications DZones instructional on coding for cards.
3. Getting Started with jQuery Masonry CreativeBloq explains
how to use jQuery plugin for seamlessly creating card- and gridbased layouts.
4. CardStack An open-source runtime of embeddable HTML5/
CSS/JS cards.
5. 10 Material Design Cards for Web in CSS and HTML A resource for designing cards for Googles Material Design.
Card UI Patterns
63
6. Polymer Downloadable Web Component builder.

7. Masonry A JS grid layout library that, after you select a theme,
will optimize the position of your elements based on vertical space.
8. Patterns of Card UI Design A Speaker Deck presentation on
the why and how of card-based user interfaces, by Chris Tse.
9. Bootcards A card-based UI built on top of Bootstrap for both
mobile and desktop capability.
10. Why Cards Are the Future of Ads 00 And the Web Dan Uckos
article on the advantages of card layouts with paid content.
Good interaction design is about attending to every moment between

a person and the device (or system, or service) with which he or she is
interacting. These moments can be explicit, as with gestures, taps, a
button-click, or the completion of a form field. Or, these moments may
be more elusive, such as a pause while you try and understand what is
being asked of you or how to answer. Its these internal conversations
that users have at any given moment that often get overlooked.
Stephen P. Anderson
Photo credit: Dunckelfeld
65
Interaction design is mostly abstract: UX and UI professionals deal

with the intangible connection between the interface and the users
mind.
This chapter brings to light the design techniques that help create the
passive magic of unforgettable experiences. In addition to web design knowledge, IxD requires a bit of psychology, storytelling, visual
artistry, and a good amount of delightful surprises.
The Power of Interactivity

Interactivity is the best way to reach to your user. Thats no longer
speculation: researchers at Penn State proved that users are more
influenced by messages on highly interactive sites. As Jeeyun Oh
explains:
Photo credit: BBQ Cultures
66
"Interactivity persuades people because they are having more fun

browsing the website, which absorbs them, and creates more positive
attitudes toward the message as well."
While a few years ago web interaction was limited, the expansion of
HTML5, CSS, Javascript, and jQuery allows for greater creativity with
less strain on implementation. In fact, many of the techniques outlined in this book are part of the greater shift towards interactivity:
Long scroll and parallax scrolling
Card UI
Video and animation
Swiping and clicking
Microinteractions
Push notifications
Personalization and location tools (for building a contextual UX)
Control over hiding/revealing content
Transitions and loop functions
5 Pillars of Interaction Design

To better understand how interaction leads to a better UX, lets examine the 5 pillars described in Interaction Design Best Practices:
1. Goal-driven design Site interactions must help users progress towards accomplishing their goals. Get to know your users
through personas, user scenarios, and experience maps.
67
2. Usability A feature must first function reliably before it can

satisfy users emotionally.
3. Signifiers Visual cues like a mailbox icon or navigation pattern intuitively suggest function, making them useful as usability shortcuts.
4. Learnability Consistent interfaces are more predictable, which
are naturally more learnable. As learnability improves, overall
usability increases since users dont need to think as much.
5. Feedback and response time Feedback represents your role
in the conversation, so it must feel responsive, human, and humane.
To see these points in practice, lets examine Net+s MixPlus. Basically,
the site allows users to create online playlists with classic mixtape
themes.
Photo credit: http://mixpl.us/withoutyou
68
For starters, users can successfully create online playlists, which

satisfies the goal-driven design and usability.
The arrow at the bottom and the half-image on the right border of
the screen are both signifiers that show the user can either scroll
down or click right. Because they show function instantly, the sites
learnability is improved. Last, in scrolling down, the fun animations
(which include headphones and a tape sliding into an old-fashioned
walkman) provide enjoyable feedback that encourages further engagement.
The Evolution of Interaction

Not too long ago, the design community, the rule of above the scroll
was indisputable. Designers focused most of their attention on that,
all-encompassing screen on top of a page.
Luckily, we now know thats not true. In fact, 66% of attention on a
normal media page is spent below the fold.
Photo credit: http://vaalentin.github.io/2015/
69
Today, designing above the scroll is archaic. Many sites like Valentin
Marmoniers project above actually limit the information above
the scroll, enticing the user to deepen their investment by scrolling
to see more.
The shift of focus from above the scroll to below is just one example
of how interactivity is evolving. Mobile design, still new in the grand
scheme of things, is at the forefront of new interaction design patterns. Originally, mobile sites tried to mimic the mouse-click style of
desktop navigation. But now that designers have caught on to the
full potency of gesture controls, its desktop sites that are trying to
mimic the ease of mobile interactions like swiping.
The difficulty lies in adapting the same interactions across different
devices. What works on one device may not translate to another. This
incongruity lead to the methodology of designing a device-agnostic
experience.
Webgraphics
Webgraphics, a term coined by VentureBeat, are essentially interactive
infographics. Using tools like HTML5, CSS3 and jQuery, webgraphics
deliver the same information as infographics, but in a more stimulating manner. Typically webgraphics require some action from the
user to reveal more information.
70
Photo credit: http://www.irwinmitchell.com/safety-on-the-slopes.html
Safety on the Slopes (above) creates a site within a site experience

as an interactive webgraphic. This engagement also better serves
its initial purpose of conveying information the interactive format
makes the information seem less like a boring lecture.
Even if you have no facts or figures to display, you can take a lesson
from webgraphics and apply the same interactive techniques to make
any site more engaging.
Photo Credit: http://houseofborel.com/#/secret
71
For example, the luxury fashion brand House of Borel foregoes convention and creates an interactive story with their site.
They implement several interactive elements, such as videos triggered by scroll, to create a narrative that expresses the culture of
their brand on a far more emotional level than your average About
Us page. The treatment certainly makes sense for an elegant brand
that wants you to feel the lifestyle first before revealing its products.
Microinteractions
Much like music notes within a song, microinteractions are the momentary events that all add up to create the final experience. These
can be either active (entering a password or clicking the Like button)
or passive (a ding sound for a new message).
Photo credit: Google
72
While these may seem inconsequential, some consider them the

future of design. Think about all the trivial, minor annoyances that
cause you and users like you to leave a website never to return.
As the building blocks of UX, microinteractions are fitted to serving
a variety of purposes:
Accomplishing a task each menial step in logging in, posting a
status update, or sending an email
Connecting elements synchronization between two devices,
websites, or apps
Adjusting settings changes to the initial settings, such as volume
adjustments, and the corresponding feedback
Changing in state entering and exiting a site or app, or putting
one into sleep mode
Data feedback real-time data in response to a request (such as
checking a weather app)
What all these have in common is that theyre all initiated by user
actions. Microinteractions are integral to any designer, so we recommend visiting the site of Dan Saffer, who coined the term.
73
Interaction Design Examples

No one IxD technique on its own will be enough to accomplish your
goals as a designer. You must weave together different techniques
to build the UX you desire and therein lies the challenge.
Lets take a look at three sites that integrate multiple methods to
create a singular experience:
1. AIGA 100 Years of Design Animations and visual signifiers
(arrows, hamburger menu) support the scroll-heavy navigation
of this site.
Photo credit: http://celebratedesign.org/
2. Eventbrite Seat Designer By using an easy-to-understand flat

design interface, simple menus, and smooth-loading transitions,
this tool allows users to make custom seating charts for specific
venues something once exclusive only to large venues.
74
Photo credit: https://www.eventbrite.com/l/reserved-seating/
3. Sonorans Valley The site creates a game-like experience by

combining user input with phenomenal animation and video effects, all the while using a standard hamburger style navigation.
Photo credit: http://sonorans-valley.com/
75
Thinking Beyond 2015

The future of IxD relies on the future of technology. After all, most of
the interaction designers duty lies in making the unfamiliar seem
familiar.
Photo credit: http://project360.mammut.ch/#home
Wearables such as the Apple Watch may be the new smartphones in

terms of influential technology of the future. Like the gesture controls
introduced by smartphones, the new interactions between humans
and their wearables will bleed over into all devices, changing design
across the board.
In the case with wearables, the microinteractions will becomes even
more subtle, with less reliance on visuals. We may see increased
interest in how a device feels on the skin, which could conceivable
have an impact on all mobile devices. (This brings to mind the Fitbit
recall caused by skin irritation.) Another potential shift might be an
76
increase in audio or even vibration notifications, since wearables

have minimal screen space.
No matter the device, the concept of interactive storytelling is gaining
steam. This is when user actions and decision propel a somewhat
linear journey through the site. While this tactic would be counterproductive for sites like ecommerce or banking, they definitely draw
the user in more than the orthodox page-by-page layout.
Photo credit: http://cinderellapastmidnight.tumblr.com/
For example, take the Cinderella: Past Midnight site above. This
loosely retells the all-to-familiar plot of Cinderella (featuring images
from the latest movie) through user scrolling, with prominent callsto-action for posting specific content related to the movie on their
Tumblr page. Fun for the user, and promotional for the movie.
Personalization will deepen its role in IxD the more technology affords
it. Just look at how geolocation technology is being implemented more
and more, where at one point it was useful only for map-related sites.
77
The fact remains that users simply love that personal feel. Look at
the success of sites like Blossom Type (below), which generates a
personalized movie from user input.
Photo credit: http://blossomtype.com/#
Immersive interactions are one of the most human of all design elements. IxD shares with humans the great potential for emotional
connections but also the instability. The future IxD will twist and
turn right alongside the tastes of the greater population, and the only
thing we can predict with certainty is that these tastes wont stay the
same for long.
Start building Interactive Prototypes in UXPin for free
78

1. Interaction Design Basics A nice beginners guide to interaction design by for aspiring UI/UX professionals, presented by
Usability.gov.
2. "How Do You Design Interaction?" A how-to guide that looks
at IxD as a conversation between the system and user.
3. Smart Transitions in User Experience Design Smashing
Magazines analysis of how to use animation to smooth transitions.
4. Interaction Design Best Practices: Mastering Words, Visuals,
and Space Our free, 115-page guide compiling the most useful
theory and advice on language/text, images, and space in IxD.
5. Interaction Design Best Practices: Mastering Time, Responsiveness, and Behavior This 106-page companion piece to
the above covers timing, animation, and user behavior and decision-making.
6. Origins of Famous Microinteractions A history lesson in
the most popular microinteractions, from the Facebook Like to
Youve got mail.
7. Interaction Design Experiments A free tool that allows you to
build and experiment with different interaction options to pick
the best one for your project.
79
8. Making and Breaking UX Best Practices UX Booths guidelines on the roots of UX design and the ideas behind the practices.
9. iOS Human Interface Guidelines Apples own advice for how
to apply IxD specifically for mobile.
10. 2016 IxD Awards Interaction Awardss best picks for IxD, a
good resource for inspiration and new ideas.
Web animation was once thought of as frivolous ornamentation, but

as technology advances and internet connections accelerate, almost
all designers are coming to understand the practical benefits. Those
that ignore animation altogether will soon be left behind.
Photo credit: Diesel Black Gold
Useful and delightful, animation is becoming more and more of a web

staple every day. In the near future, it will no longer be optional, so
the sooner you recognize its full potency, the more ready you will be.
81
Photo credit: Riot Games
Pre-Internet Roots
Like cards and minimalism, animation has a rich history reaching
far back before the Internet was invented.
Photo credit: AT&T
Two Disney animators, Frank Thomas and Ollie Johnston, published

one of the best go-to books on the subject, Illusion of Life: Disney Animation. The 12 principles outlined in this book still hold true today,
and with slight modifications apply just as well to animation for
the web as for film.
82
Photo credit: Volkswagen
While we explore each of these 12 principles in greater detail in Interaction Design Best Practices: Mastering the Intangibles, for now well
just list the points:
1. Squash and stretch
2. Anticipation
3. Staging
4. Straight Ahead Action and Pose to Pose
5. Follow Through and Overlapping Action
6. Slow In and Slow Out
7. Arc
8. Secondary Action
9. Timing
10. Exaggeration
11. Solid Drawing
12. Appeal
To see these principles in action, animator Cento Lodigiani recreated
each one as a GIF using simple shapes.
83
Attributes of Web Animation

Animation is not a UI pattern. Its not something you can just stick
in your site anywhere. In application, animation is closer to color: it
can exist everywhere and its effects permeate through the entire site.
Photo credit: Tannbach
Photo credit: BMW
84
For starters, we can break web animation up into two groups, depending on the size of its role:
In a tiny format, animations like spinners, loading bars, counters,
or hover tools require little to no user input.
Animations as a primary interaction tool, such as parallax scrolling and popup notifications, take a more central role, and their
impact is more directly noticeable to users.
What both groups have in common is the entertainment value they
bring to an interface (well explain the practical value in a moment).
The storytelling potential of animations, whether blatant or subtle,
can add an emotional connection to an otherwise dull interface.
For example, Humaan uses animated backgrounds, scroll-activated
motion, and hover-revealed text (in conjunction with the content) to
add personality and humanity to what would otherwise be another
dull About Us page.
Photo credit: http://humaan.com/about/
85
One key component to all animation is timing. For animations triggered by the user, you generally want the effect to occur within 0.1
seconds of activation to make the interface feel responsive. We follow
this rule ourselves, as you can see in this preview of a UXPin project.
Photo credit: UXPin
After scrolling to the next screen, the signup form appears within
300 ms. We didnt set a delay on the scroll itself since thats directly
triggered by the user action, but we added additional time to the
subsequent transition animation to prevent a jarring effect.
8 Popular Web Animation Techniques

For the purposes of this book, well break up the areas of web animation into eight fields, and explain the best practices for each.
1. Loading Animations
One of the oldest uses of animation for the web is to distract the
user from loading times. As we said in Interaction Design Best
Practices: Book 2:
86
Best case scenario, the animation influences your users perception of your products technology, making it seem better than it
actually is. Worst case scenario, your users have something fun
to watch while they wait, improving the overall experience.
Even if the loading time is short, such animations still add a little
sophistication or at least entertainment during waiting periods. For
this, loading animations are popular for flat design, minimalism,
portfolios, and one-page sites all of which are inherently simple
and could use a boost in stimulation.
Photo credit: http://tomcolearchitect.com/
Visiting the Tom Cole Architecture site, the user lands on a black
screen and in a moment multiple white lines start to move and
write the logo and brand name. After another moment, the background photo comes into view and the user is free to navigate. The
site itself is simple and doesnt necessitate a loading animation;
87
however, this quick moment aesthetically pleases the user as a

first impression and entices them to use the site.
Remember that loading animation are best when simple. Extraneous effects like sound or arent necessary. Animations should
match the personality of the site itself, whether minimal, colorful,
elegant, etc.
2. Navigation and Menus (Nonscrolling)

In order to save screen space, a recent trend is hidden navigation
menus that reveal themselves upon clicking on buttons like the
hamburger icon. For these, animation is essential in establishing
a connection between the two, and preventing a jarring transition.
Click on the circular arrow button on Brian Hoff Design and an
oversized menu box pops out from the right. The pop out animation makes the menu appear as if it slides in from offscreen
and makes the whole interaction run smoothly.
Photo credits: http://www.brianhoffdesign.com/
88
Photo credits: http://www.brianhoffdesign.com/
Hamburger animations arent the only option, though creative

designers are applying navigational elements like sliders and
sticky bars to set themselves apart.
Animations can indicate change as well. As described in Web UI
Patterns, the hover state is actually one of the most popular subtle
animation patterns to show change in an interface object.
A button or image may appear one way when the website loads,
but will look another way when the user interacts with it, such
as sliding the mouse over the element. This subtle change helps
users better understand how to use a website by revealing related
actions without needing to occupy additional space.
3. Hover
As a means to show an element is interactive, hover effects are
one of the most pragmatic uses of animation. In most cases, this
is the only sign a button or piece of text is clickable. When a user
89
is in doubt over a features function, they tend to move the mouse

over it anyway, giving hover animations an intuitive appeal.
Photo credit: http://www.alectia.com/en/
Hovering over any card on the Alectia site above triggers an animation within that card. The animation is small the title text
slides out and identical text slides in to replace it (and the same
happens with the read more arrow) however it is enough to
show the cards function.
Source: UXPin
90
We use this ourselves for our Free eBook Library, where a hover
triggers the download image falling from the top and the get it
for free text rising from the bottom. This serves several functions
it shows you only need to click the card to initiate the download
process, it acts as an attention-grabbing call-to-action, and it has
a nice aesthetic feel that makes the make fun to interact with.
4. Galleries and Slideshows

The slideshow and/or animated gallery pattern is one of the most
common uses of web animation, but is nonetheless effective at
showcasing multiple images of content without overburdening
the user.
Photo credit: http://www.bigactive.com/
How fast and how many images cycle are up to the designer, but
these decisions should not be taken lightly even slightly hastening
the rate at which images change could give the site an unwanted
rushed feel.
91
Another consideration is how much to implement skeuomorphism.

This pattern inherently imitates browsing of pages in a photo album
the question is how much do you want to draw attention to that.
5. Attracting Attention
Any biologist will tell you that the human eye is attracted to motion.
This makes animation the perfect tool for drawing attention and
controlling your visual hierarchy, especially against a site only
static images.
Animations are a great way to add intrigue to forms, calls-to-action,
or even menu items. To see its potential, look at John Iacoviellos
MY/STATIC/SELF:
Photo credit: http://mystaticself.com/
The cube in the center softly bounces and flickers, clearly the most
interesting item on the grayscale screen. Each of the layers of the
centerpiece represent a link to the different pages the same
pages clearly and blandly displayed in the top navigation menu.
Which set of navigation links do you think users prefer to use?
92
6. Scrolling
While well discuss scrolling in greater detail in a later chapter, its
worth mentioning here its reliance on animation. Smooth scrolling simply cannot exist without it. One of the main advantages of
scrolling is the control it gives to the user, and for that, animation
determines the pace they can go.
Photo credit: http://forbetter.coffee/
The webgraphic For Better Coffee uses parallax scrolling to list out
advice for making better coffee while simultaneously entertaining
the user with an interactive visual journey of a bean made into
coffee (in a pleasing flat design style).
The best part about the site isnt the coffee advice, its watching
the animations that bring the bean from one stage to another. As
the user who controls the scroll, you feel completely immersed in
the storytelling experience.
93
7. Page Motion
From AJAX loading options to simple shakes or cartoons, full-page
motion is certainly a captivating effect. Page motion is a bit trickier
to implement, but works well for making static content feel a bit
more dynamic.
Photo credit: http://www.hungercrunch.com/
On the site for Hunger Crunch, each tiny movement of the mouse
shifts the background image, and when combined with the separation of layers, creates a fun effect that makes sense for a game site.
When applying this tactic, be careful of using too many loading
items they may cause the site to render slowly.
94
8. Background Animations
While distracting if excessive, a modest animated background can
add a certain vitality to a website. The key though is moderation
individual sections at a time, or perhaps a gentle movement of
the entire image.
Lets take a look at Terna. Choosing an animated background to
showcase the urban bustle thats their business, sections throughout the image move at different intervals. This creates that busy
atmosphere, without overstimulating the user.
Photo credit: http://trasmissione-energia.terna.it/
As with other areas of animation, simplicity is advised. Remember

that every motion on the screen will attract attention, so too much
animation at the same time creates chaos.
95

As we mentioned at the start, soon animation will no longer be optional. While clever animation is the bread-and-butter for web designer
portfolios a means to demonstrate their talent in the near future
we will see animation implemented in more traditional businesses
as well.
Animation is no longer synonymous with cartoons, so more professional industries like financial or medical institutions are using a
more refined style.
Photo credit: http://avenirclinic.com/
Dentistry is historically an industry that takes itself seriously, so

LAvenir Dental Clinic uses conservative animated effects: scrolling
activates new windows to slide open. No need for bouncy icons or
whimsical moving text.
96
Ecommerce, too, can take advantage of animation for practical purposes namely the 360-degree rotation of products pictures. This
gives the user more of a showroom experience when shopping online,
one less advantage in-person shopping has left.
Photo credit: https://www.fleetfeetsports.com/
Ecommerce sites can also take advantage of conventional web animation. When you buy a product at Fleet Feet Sports, a fun animation
shrinks the product photo and moves it into your shopping cart. This
makes the interface feel responsive, and also adds to the shoppers
gratification of having selected a product.
Photo credit: http://www.google.com/design/spec/material-design/introduction.html#
97
As more designers embrace Googles Material Design philosophy, their

take on the technique will become more prominent. Their documentation describes animation in this way:
Just as the shape of an object indicates how it might behave,
watching an object move demonstrates whether its light or heavy,
flexible or rigid, small or large. In the world of material design,
motion describes spatial relationships, functionality, and intention with beauty and fluidity.
Not only is animation expanding its range of industries, its also evolving in its application. As a means to combine animation with realism,
animated photography is emerging as an up-and-coming trend.
Photo credit: http://lookbook.bolia.com/chilling/
Bolia blends real photography and scrolling animation to immerse

their users in their online experience. This blurring of the lines of reality is only going to become more popularity as technology allows it.
98
By now, animation has proved its staying power in mediums far older
than web design. Due to its permanence, it will continue to ingrain
itself into the design industry the only difference is what new technologies will allow it to do.
Use Advanced Animations in your design with UXPin

1. 12 Principles of Animation Video A video by animator Cento
Lodigiani illustrating the 12 principles from Illusion of Life: Disney Animation.
2. CSS3 Animation Cheat Sheet This useful collection of readymade, plug-and-play animations lets you apply premade CSS
classes to any element you wish.
3. Web Animation A frequently updated guide to synchronization and timing for animation in web pages and APIs.
4. Mythbusting: CSS Animations vs. JavaScript CSS Tricks
discussion over the best method for web animation.
5. Web Animation at Work An article from A List Apart explaining how animation is theoretically a further extension of
other design techniques.
99
6. 15 Animation Tutorials A guide on web animation by UltraLinx aimed at beginners.

7. Elastic SVG Elements A helpful instructional for creating SVG
shape animations.
8. Top Tools to Create Animations With A list and analysis of 15
popular animation tools.
9. Transit A downloadable jQuery plugin for improving CSS transitions and transformations.
10. Material Design Animation Examples Gallery A gallery of
worthwhile animations in material design for some possible inspiration.
Dramatic Typography
Photo credit: Adidas via awwwards
Dramatic typography fonts, sizes, and effects that act as a stylistic

element on their own is quickly becoming a staple of web interfaces.
Typography is being used for more than just legibility. Whether simple
or elaborate, big or small, the words on todays sites are being read
Vibrant Colors
101
in a whole new light. In this chapter, well explore how to design

typography effectively, whats popular and why, and what to avoid
when choosing the look of your words.
Photo credit: Noveske
Defining Dramatic Typography

For starters, lets make clear that dramatic typography and simple
typography are not mutually exclusive. In fact, simplified typography
is one of the most popular forms of dramatic typography at moment.
To define dramatic typography, well just say its typography that
stands out for whatever reason.
As a trend, we can narrow down the current elements most currently
reflected in dramatic typography:
Extreme size (large and small)
Superimposed on images
Vibrant Colors 102
Creative use of simple typefaces

Custom typeface
Artistic fonts
Photo credit: Vimeo
Note that these styles are usually combined with each other for a
nearly endless visual palette.
Typography Basics
Typography is about how its used just as much as how it looks. This
should explain why were recently seeing simple and seemingly boring typefaces do well in capturing our attention.
The best place to start is with the basics: first, become acquainted
with terms like type categories, type families, and letterform strokes.
Vibrant Colors 103
Photo credit: White Frontier Brewery via awwwards
Type categories are divided by mood, structure and the impact of the
lettering. The greatest divide is between serif or sans serif, with sans
serif being the current favorite with the trend of simplicity. Serifs are
those extra embellishes on the edge of certain letter lines, and sans
means without.
Source: I shot the serif. Tom Gabor. Creative Commons.
Vibrant Colors 104
A type family is simply all variations of the chosen font. The different
forms include regular, bold italics, condensed, black, and sometimes
others.
In the context of typography, the stroke refers to the width of each
line. Sharing a uniform stroke within the same family seems to be the
trend recently, as uniform strokes are more legible across different
settings and contrast.
For more advice on applying the basics of typography, including some
expert rules and guidelines, download the free Web Design for the
Human Eye, Book 2.
Font Availability
The driving force behind dramatic typography is the increased availability of typefaces for mass use.
Photo credit http://packdog.com/
Vibrant Colors 105
More fonts are available for less money or no money through Google Fonts. In all of Adobes Creative Cloud plans, they include their
Typekit service.
Photo credit: Spotify
This availability also allows for theme-based design as WordPress

users can access the same amount of options as home-grown websites. As for font rendering, the advancements of modern browsers
and interfaces are making that a thing of the past.
While using a box or web-safe typeface from a kit is a fine option,
you dont always need to choose the most mainstream typefaces. So
far, the most common fonts include:
Sans serif fonts:
Proxima Nova
Futura
Vibrant Colors 106
Avenir
Open Sans
Helvetica Neue
Serif fonts:
Caslon
Garamond
Freight Text
Minion
FF Meta Serif
For more advice on how to focus your efforts in selecting a preexisting font, read Smashing Magazines How to Choose a Typeface by
Douglas Bonneville.
With the basics out of the way, lets look at the ways in which typography is currently making its mark.
Extreme Sizes
Once you select a type family to work with, size is the first consideration. The trend lately is going to extremes, both large and small.
1. Large Typography
Large typefaces send a powerful and assertive message when
coupled with large hero images.
Vibrant Colors
107
Photo credit http://www.getzeroapp.com/
This style typically follows the same guidelines:

A larger proportion and weight compared to the other screen
elements
Characters larger than 85 points.
Caps or extremely thick strokes
Were also noticing some trends within this trend.
Often, the words are expanded to fill the entire screen. The color
of the words is usually white which contrasts well against an image or brightly colored background. Additionally, sometimes thin
serifs are added to create a dynamic contrast to the thick strokes.
We also see words alternatinating in size, though always big.
Vibrant Colors 108
Photo credit http://junduffy.co.nz/
Photo credit: gogoro
Vibrant Colors 109
Photo credit: Adventure via awwwards
Because this trend is so popular, dont be afraid to get a little creative. Try using different alignments, such as to the right or left,
to avoid the centered crutch. At this size, your message will surely
be bold, so caps arent necessarily required. Last, a customized
use of colors can give your site a unique personality.
One technique we found useful for designing with oversized type
begin with uncomfortably large, then continue scaling it back
until you find the size that works. By starting big and working
backwards, you may find yourself choosing a size bigger than you
would have guessed.
2. Small Typography
For a softer voice that speaks just as loudly, some designers are
turning to extremely small typography. As long as the other elements on the screens dont overshadow it, small words can stand
out just as much as large ones.
Vibrant Colors 110
Photo credit: http://www.mikiyakobayashi.com/
Photo credit: Revelator
The strategies behind large and small type are a little different.
Small type if often in black, and is used in conjunction with excessive negative space. Both, however, typically use thick strokes.
Small typography works well over a hero-style image, as the
contrast creates intrigue, and the minimal space taken up by text
allows better appreciation of the images content.
Vibrant Colors
111
Photo credit: Under Armor
Photo credit: http://www.wearetopsecret.com/
Sometimes small type needs a little extra embellishment to be noticed.

A flourish like contrasting color or a simple animation (like Under
Armors storytelling site)can ensure that its seen. Surrounding the
text with negative space also works quite well.
Vibrant Colors 112
Superimposed Over Images

The days of images and text being two separate entities are over. Today, superimposing text over images can make both more powerful.
Photo credit: http://aiaiai.dk/
The two major considerations with this style are contrast and legibility. Where on the image the text appears will impact both, and
a designer must be sensitive about breakpoints on various devices.
Test out locations to determine where the text is most visible without
obscuring the most important parts of the image, like faces or product
/ brand placement.
Photo credit: Reebok via awwwards
Vibrant Colors 113
Another concern is that the two together dont confuse the meaning.
If a sports photographer superimposes his name over his best photo
a picture of Tom Brady you can understand the confusion.
Creative Use of Simple Typefaces

As with other design elements, experimenting with text and typography
can yield some great benefits if youre up for the risk. For example,
we just talked about text in images, but what about images in text:
Photo credit: http://anjarubik.mohito.com/en/
You dont have to follow the trends to use typography in a memorable

way. In fact, inventing your own creative usage is the best way to
ensure standing out, as long as your idea is sound and you test the
usability with users. Just remember that readability is the ultimate
goal, so dont do anything to jeopardize the words meaning coming
across.
Vibrant Colors 114
Photo credit: http://hotelmoscow.info/
Creative typography is, by nature, interesting on its own. Thats why

its best to combine it with a simple and unobtrusive background, such
as a single-color blanket as in the examples above. You dont want
to clutter your screen with too many catchy elements competing for
your users attention.
Custom Typeface
A custom typeface can have the same effect as creatively using simple
type better, even, considering the potential for furthering brand
identity and character. Designing your own font system is one failsafe
way to ensure that you set yourself apart.
However, youll find implementing your own typeface is harder than
it may seem.
Vibrant Colors 115
Photo credit: http://studiokraftwerk.com/
For starters, theres the actual look of your font: it must match the
personality of your brand and the atmosphere of the site otherwise,
whats the point? Next, it should only be used sparingly. To overuse
a custom font is to dilute it: trying limiting it to titles, value propositions, slogans, etc., and avoid heavy blocks of text. Last, keep in
mind compatibility: a custom typeface must work across different
browsers and devices.
Photo credit: Maaemo via awwwards
Vibrant Colors 116
Artistic Fonts
Some fonts are designed solely for looks. Blocks of text written in
such fonts act more as graphic elements in a web layout than they do
as text. For some sites, though, this could be exactly whats needed.
Photo credit: http://rsq.com/
This strategy is a classic one for typography, one thats been used in
advertising posters for decades. The cost for such a look is legibility
and the deemphasis of the message of the words. However, for aesthetic gains, this embellishment could be worth the price.
Photo credit: Vimeo
Vibrant Colors
117
As a nice compromise, you could use a typeface that is equally legible,

readable, and decorative (like how Vimeo treats the words Cameo).
Try to avoid the commonly used artistic fonts, such as word clouds
or the word etched in the shape of what it means. These clichs will
undercut what youre trying to accomplish, and because artistic fonts
have their drawbacks, you must do everything to ensure that their
usage is worth it.
Combining Techniques
The techniques we listed above arent mutually exclusive. If you
know how to properly combine certain techniques, you can pile up
the advantages of each or use ones strengths to mitigate anothers
weakness.
Photo credit: http://www.vintagehope.co.uk/
A lot of combining techniques falls on common sense. For example,

if youre placing an image inside your text, try some high-contrast
text (or else the image might drown out the text).
Vibrant Colors 118
Likewise, think about which techniques would not go well together.

For example, artistic fonts, are inherently flamboyant, so theyre best
used in a straightforward way. Dont try to use images in decorative
typefaces. Imagine the difficulty of reading the headline for Anja
Rubiks site if the main headline was in cursive and filled with the
same image of a model.
Photo credit: http://sendamessage.to/
Send a Message (above) combines techniques in a practical way. It

starts with small, simple text to draw attention away from itself and
onto the image. After interacting with the site, though, the text message that is the point of the site appears. This is written in a large
typeface, and superimposed over the image two strategies for grabbing attention back from the image.

Dramatic typography is less of a trend, and more of a strategy that
reinvents itself every few years. The techniques described above
are simply the current iteration of how many designers are using
typography.
Vibrant Colors 119
Photo credit: Orangina
In general, good typography will always fulfill these goals:

Communicates message of the text
Works in conjunction with other design tactics
Suits technological requirements (i.e., browser compatibility and
responsive design)
Creates a memorable impression
Todays typography trends accomplish these goals, but how will they
adapt to suit the next era of design?
Photo credit: http://floatpasadena.com/
Vibrant Colors 120
It is almost certain that designers will continue to use high-drama

text. They may, however, dial back parts of the trend that are starting
to feel overdone.
For example, we may begin to see more color and less white type.
More designers may opt for transparencies or 3D effects in the creation of dramatic letterforms. A shift from uber-thin to thicker stroke
widths in letterforms could take place. Letterforms may also include
more basic or simple animations or work as part of a larger scheme
of scrolling or other user interface elements.
Start your free trial now (730 days)

1. WhatFont A online tool that tells you which font a chosen site
uses.
2. Choosing Web Fonts 15 Expert Tips Creative Bloqs advice
on selecting the best font for your site.
3. Typewolf A site dedicated to web fonts, with featured sites,
analysis, and articles from experts.
4. Eight Tips for Type on the Web Tips on selecting your sites
font from Font.com.
Vibrant Colors
121
5. FFFFallback A useful tool that tests the compatibility of your

chosen fonts and even suggests alternatives.
6. Going Bigger with Typography A guide from DesignModo
specifically on using oversized typography, with examples.
7. Awwwards Typography in Web Design Gallery Awwward-winning sites selected for their typography updated regularly.
8. 25 Awesome Typography Tutorials A collection of tutorials
from Top Design Mag to show you how to recreate your trickier
font selections.
9. Beautiful Web Type A list of live examples of stellar typography from Google Fonts.
10. 41 Best Free Web Fonts of 2015 Instead of browsing through
thousands of options, Elegant Themes list hand-picks the best
from this year.
Vibrant Colors
You cant design without color even a black-and-white site might

use different hues, contrasts, and balances.
With the lingering presence of flat design 2.0, color holds even more
prominence in web design today. Rainbows of bright colors span the
Internet, whether its minimalist sites or intricate web interfaces.
Were seeing a lot more of these brighter, happier tones, making
vibrant colors one of the most noticeable trends in recent months.
Influences from Fashion and Interior Design

These bright colors arent just a trend online; they seem to be universal across all industries especially fashion and interior design,
two visually dominant fields that have more than a little in common
with web design.
Vibrant Colors 123
Photo credit: Versace
Photo credit: Cropp
The takeaway is that, by keeping tabs on the happenings in these

industries, youll have a better understanding of whats going on in
web design. The same colors people want to wear on themselves or
see in their homes are oftentimes similar to the colors theyll enjoy
when browsing the web.
Vibrant Colors 124
After all, the end result of using color is the same across all industries: connecting with the user. Color has the ability to create a sturdy
emotional link with people, whether on a handbag or a home page.
Why Now?
Its no coincidence that vibrant colors are becoming popular today. In
fact, we can trace the trends popularity to two major developments:
high definition and flat design.
Photo credit: G-Star
The more pixels per inch on high definition displays allows for more
distinct colors. While in the past designers could use only 216 web
safe colors, todays technology allows millions, and over 98% of users
have personal access to such technology (according to a W3Schools
study).
As Retina and other high definition displays were becoming more
readily available, flat design was also growing in popularity. This
Vibrant Colors 125
was no coincidence either. Flat design, too, is a product of newer

technological options, but it also resulted as a backlash against the
skeuomorphism that dominated the web design scene prior.
However, the roots of the current vibrant color trends by no means
makes it stagnant. Lets take a look at the different ways color is being
used in web design today.
Monochromatic Schemes
In fitting with minimalist sensibilities, monochromatic schemes
sites that uses varying shades of the same color are now common.
These schemes suit the vibrant color, as they provide less distraction
and contrast among colors, allowing the designer to make more bold
and experimental color choices.
Photo credit: http://www.linequality.com/
The Line Equality example above demonstrates this, as lime green is a

color that typically does not play well with others. This pages accents
Vibrant Colors 126
not competes with the color of the main subject (a familiar Muppet).
In conjunction with other minimalist styles like bold, white lettering
and ghost buttons, the monochromatic scheme controls the visual
dominance of the page and makes it usable and aesthetically pleasing.
Vibrant colors, by nature, are flashy and eye-catching, which means
too many together will create a chaotic or busy screen. The monochromatic scheme solves this problem before it starts.
Accents
One of the most effective uses of color is in emphasizing or de-emphasizing elements through accents. Bright colors stand out more against
backgrounds with more dull colors, and a designer who knows how
to use this can establish their own visual hierarchy with only color
choices. Even as an aesthetic choice alone, accents keeps a screen
from appearing stale a constant concern with minimalist designs.
Photo credit: http://hega.tv/#/home
Vibrant Colors
127
As seen in the Hega example above, the red call-to-action grabs attention amidst the black and white throughout the rest of the site.
The only splash of color is the most attractive element on the screen,
thus the one with the most urgency to interact with.
Photo credit: http://www.beoplay.com/products/h6-rapha-edition
Accenting can be done in several areas, as Beoplay clearly demonstrates. The repetition of pink in letters and the images strengthens
it, especially against the otherwise overpowering black background.
Blocking and Hovering

Especially with card-style interfaces, the trends of blocking and hovering and popular if not for their appearance, then for their usability.
Blocking refers to a grid-based layout in which the blocks and cards
are differentiated with dramatic colors. Hovering refers to an element
Vibrant Colors 128
particularly cards that change color when hovered over. While

blocking and hovering can be used on their own, they are often used
together because they work so well with one another.
Photo credit: http://madebypfd.com/
PFD (above) shows how both trends are used together. The bright
colors of some cards stand out against the white backgrounds of others. On hovering, the card becomes tinted (as the upper-left card in
the example) and displays the number of hearts. This functions as a
shortcut to explaining usability, since a change on hovering is a cue
that the object is clickable.
This makes blocking and hovering a practical choice as well as a stylish one. The colorful blocks create a layout that entices interaction,
then the hovering displays support this by making interaction fun.
Vibrant Colors 129
Color and Texture

While texture is most common in neutral backgrounds, under the
right circumstances it can be combined with bright colors for exceptional results. To simplify this, lets divide vibrant colors and texture
into two main groups:
1. A background or image as a whole
2. An accent to a background or image
Photo credit: http://www.tacospillet.no/?lang=en
The site Tacospillet uses the first type, with full background and foreground images with texture. The softens the bright colors slightly,
calming the site and keeping it from overwhelming. The texture also
gives the graphics a unique appearance, setting it apart from other
sites.
Vibrant Colors 130
Photo credit: http://joyridetacohouse.com/
Ironically, another taco site Joyride Taco House shows us the second
type with its textured accents. The slight shadow under the main
header adds a bit of separation with some depth, while the bluegreen lines in the logo draw most of the initial attention. The use of
texturing is light and fun, which presumably reflects the atmosphere
of the restaurant itself.
Best Practices
The appeal of the vibrant color trend is because it can be applied in
many different ways and styles to many different elements. With their
diversity and versatility, todays bright color patterns are burying
the template look of the plug-and-play site themes that had been
popular before.
Vibrant Colors
131
What started as a trend for only creative sites like artist portfolios
and/or designers is being implemented in more mainstream and traditional industries like news and weather sites. Its even seeping into
ecommerce, an industry thats historically known for being visually
conservative. The implication of this is bright colors are losing their
stigma of silliness and are started to be accepted more as professional.
Photo credit: http://www.masterdynamic.com/
Photo credit: http://airism.graphitedigital.com/#home
Vibrant Colors 132
Lets look at the best practices for taking advantage of vibrant colors
in three different fields:
1. Highlighting Certain Text

The attention-grabbing qualities of bright colors make them useful
in highlighting certain words within a block of text especially
against a dark background. This adds a natural emphasis and
affects how the message comes across.
Photo credit: https://fortheloveof.org.au/#/
For the Love of the Reef, above, accents only the word love, and
only in its second appearance. This not only strengthens the impact
of the word and its meaning, but it also helps with brand identify,
as love is a key word in the company name.
2. Buttons/UI Elements
Just like with words, bright colors can emphasis buttons or other
UI features, whether to draw attention or to ease usability.
Vibrant Colors 133
Photo credit: http://essentials.mijlo.com/
The bright orange call-to-action on the Mijlo site above stands out
against the plain background and equally plain product image.
The combination of muted colors in the background and product
work together to make the bright call-to-action that much more
appealing.
3. Navigation
Colors organizational power has been known for a long time, and
can be seen in the colored tabs of books and filing cabinets. Its
application to web navigation seems like the logical progression,
as the different colors easily separate the different sections. This
becomes especially useful for content-heavy sites, where every
effort must be made to simplify navigation.
For example, Colored Lines above uses the rainbow spectrum to
partition the eight separate pages of their site. Not only does this
simplify an otherwise bulky navigation system, it also promotes
brand identity, considering the companys name.
Vibrant Colors 134
Photo credit: http://colouredlines.com.au/
Photo credit: Frame Collections
In parallax-scrolling effects, too, colors play an important role in

navigation. Because page/screen distinctions arent so clear in
long-scrolling single pages, colors are the easiest way to separate
Vibrant Colors 135
sections. This creates more structure in a very open-ended format,

which helps the story-telling aspects and allows for variations on
different calls-to-action.
Photo credit: Vimeo

Color will always be married to web design practices, however the
popularity of vibrant colors specifically will ebb and flow as trends
change. As such techniques are cyclical, well likely see a return of
some older techniques that have been reinvented. For example, perhaps gradients will make a comeback and breathe new life into the
bright color trend.
With only bright blues, Zample+me uses a gradient effect on its
background without falling into darker shades. This easy style fits
comfortably with the minimalist layout of the site, and the flat design
attributes of the interactive icons. On this site, we can see the trend
evolving, not fading away.
Vibrant Colors 136
Photo credit: http://zample.me/do-you-floss-every-day
Photo credit: http://www.piccsy.com/everything-design/
Bold color combines well with the dramatic typography we discussed

in the last chapter. As you can see in the Piccsy Playground example above, the two intensify each other to send a powerful message,
whatever that may be. This look is so intense, though, one must be
careful not to detract from the single message with other competing
elements.
Another trend were starting to see more and more of is color overlays filtering an image through a colored lens. This allows you
to inject any image with the emotional attributes of any color. For
example, an otherwise sad photography can be made happy by using
a yellow-tinted filter.
Vibrant Colors
137
Photo credit: http://focuslabllc.com/
Photo credit: http://creationsnamale.com/
For a more thorough analysis of color theory in web design including every colors emotional and psychological attributes, the most
popular options for color schemes, and examples of color use from
top companies download our free Color Theory in Web UI Design.
Build High Fidelity prototypes in UXPin

1. Color Wheel Primer A primer designer for interior design
thats a good gateway into color theory.
Vibrant Colors 138
2. ColourLovers A global community showcasing their own clever palettes and discussing color theory across all mediums.
3. How to Use CSS Hover Effect in Color A tutorial for creating
a hover state color change.
4. Adobe Color CC A great tool for experimenting with different
shades with different schemes. Simply modify one color, and
the tool will show the other relevant colors or hues.
5. An Introduction to Color Theory for Web Designers The
Tuts+ guide to color theory, covering everything from the significance of hues to compatible colors.
6. Tint UI A color picker for copying hexadecimal codes. Allows
for browsing by platform (Material Design, iOS, etc.), brands
(Twitter, Firefox, etc.), or current trends.
7. Text on Background A simple but useful tool for previewing
how certain colored text looks on certain colored backgrounds.
8. Pantone Color of the Year The color authority for any industry suggest and analyzes their selection for best color every year.
9. How to Add a Hue Filter in Photoshop Adobes own tutorial
on creating a color overlay for images.
10. Color Website Design Gallery from Awwwards The best Awwward-winning sites for their use of color.
As stunning photography continues as a timeless technique, especially as browsers improve rendering capabilities and HD monitors
become more affordable. In this chapter, well take a look at web
photography as a trend, the different options available, and which
one will work best for you.
Photo credit: Jawbone
Captivating Photography 140
Photo credit: http://nuabikes.com/#/home
Photo credit: Blackhouse
141
Trends in Modern Web Photography

Not only does the art of photography itself go through trends every
few years, how its applied to web design also changes with tastes.
For example, those stock images with smiling models looking directly
at the camera were used frequently in the 1990s, but now they look
cheesy and outdated.
Lets examine four trends in web photography with real staying power.
1. Hero Images
Full-screen images, usually with a hero header, are a big trend,
and they dont appear to be leaving anytime soon. Their value
lies in creating an immersive experience right away, drawing the
user in with a photo that claims all attention before leading their
sightline to a hero header and/or call-to-action.
Photo credit: http://www.cookiesound.com/
Above, Cookiesound, speaks volumes with a single photo. Rustic

nature, no hustle-and-bustle, and of course the long open road:
these are all images and feelings a travel blog would want to
associate with itself. The size of the picture simply maximizes the
effects, as anything small would weaken them.
2. Objects in a Natural Environment

Showing objects in context is not a bad sales strategy, considering
that such photos have proven to boost conversion rates. Theyve
always been a popular strategy for ecommerce sites, but the ones
who do it best give the image an artistic twist (like an extreme
closeup or alternative angle head on seems too contrived). As
this is a popular trend, avoid the desk-and-computer photos, since
theyre overused at this point.
Photo credit: https://edwin-europe.com/
Clothing brand Edwin avoids the clich of smiling children modeling

close and goes for a more realistic and artistic photo to showcase
their products in action. The hero background shows the shirt in
a situation it might be used a children playing baseball. With

the shirt large in the foreground and no head to distract from it,
the product is displayed creatively and efficiently.
3. Black and White

Black-and-white photographs are the shortcut to professionalism
and sophistication. If thats what your site is going for, there are
few better options. To see what we mean, check out designer Chris
Spooners gallery of 20 black-and-white sites.
Photo credit: http://goltzgroup.com/
The site for Goltz Group combine the above two strategies with
black and white to add an air of refinement. As youll remember
from the last chapter on color, a black-and-white photo background
amplifies colorful accents, as you can see above.
4. Color Overlays
Color overlays can modify images to suit more specific goals such
as brand identity (using the brands characteristic color) or emotional response (for instance, a red overlay might give an otherwise
calm photo a sense of urgency).
In a way similar to black-and-white backgrounds, color overlays
can also intensify the power of colorful accents. However, this
only works well if the colors are chosen correctly, i.e., the right
contrasting pairs.
If youre interested, here are tutorials for creating them in CSS or
in Photoshop.
Photo credit: http://www.knucklesindustries.com/
The tinted background of the site for Knuckles Industries creates

a unique visual hierarchy that highlights the heading text and top
navigational menu, despite the attention-grabbing image.
On a more intangible level, the color overlay creates a raw yet refined feel appropriate for the metal fabrication shop. The vintage
treatment makes a lot of sense since it immerses the user in old-world

craftsmanship and industrial muscle.
Web Photography Options

As far as where your web photography comes from, there are four
main options:
Custom Photography Photography taken specifically for your
site, whether by you, someone on your team, or someone you hire.
These are tailored to fit your site, both thematically and content-wise.
Stock Photography These are existing photos that you pay to
use. If youre skilled at selecting them, you can foster the idea that
they were custom-made. Because anyone can buy them, be careful
the same photos dont exist on too many other sites.
Royalty-Free Stock Photography A type of stock photography
that is free-to-use. The selection is somewhat limited, and there
are often restrictions on commercial use. You get what you pay for.
Semi-Custom Stock Photography One of the newer and up-andcoming options for web photography, these are photo kits similar
to existing photos with customizable options. For example, a stock
image of a desk where you can arrange the elements as you like.
Each option has its own advantages and disadvantages, and different
situations may call for different strategies.
Custom Photography
We can boil the discussion down to custom or stock and sometimes
a mixture of the two. Here well explain the considerations behind
each.
To oversimplify, custom photography is almost always better (and
mandatory for physical products), however may not be viable with
time or resource constraints. With custom photography, you have
the most control over what your photos are expressing, and can be
properly tuned to your brand and personality.
Photo credit: http://woodbuds.com/
The drawback is price and time. A general timeframe is about several

weeks for going from proposal to finished product longer if youre
hiring a new photographer. Professional photographers are always
preferred, but doing it yourself or having someone else on the team
do it can save some hassle if the skill level is adequate. Either way,
the designer and the photographer must be clear on the art direction
and overall goals before starting.
Photo credit: https://www.purefixcycles.com/
Photo credit: http://antonandirene.com/
Pros:
control over content and project
tailored to your needs
images are owned by company
a long-term brand investment because the pictures can be used

over and over
Cons:
expensive (photographer, equipment, setting up shoots, etc.)
setting up shoots can troublesome
results may not match expectations
outside photographers might be difficult to work with
Stock Photography
Stock photography may have a bad reputation (probably because of
pictures like these), but in recent years its matured into an increasingly viable and useful industry. Todays stock images cover a wider
range, and the goods ones leave behind that generic cheesiness that
theyre typically known for. Take a look at the Nu Schools list of their
50 favorite stock photography sites, organized by quality, to see the
diversity.
Photo credit: https://www.kissmetrics.com/
While stock photography is cheaper and less involved that custom

photography, it still requires some effort namely in searching for
the right picture. If you dedicate your time and skill towards digging
through hundreds of images, you may find one thats just as effective
as a custom photograph.
Photo credit: http://microsoft.com
Pros:
inexpensive (or even free)
fast turnaround (images are ready after downloading)
sometimes the search inspires new ideas
Cons:
available to anyone, and may find duplicates elsewhere online
finding quality images is difficult
consistency difficult if using more than one
There are ways to mitigate the risks of stock photography. For starters,
youll want to check that the license is what you need. Some royal-
ty-free photos dont allow modifications and reposting images from a

Google search is usually illegal for commercial sites. Definitely read
and know the differences in photo licenses.
Editing effects like cropping, rotating, or color overlays can effectually
add enough personalization to remove the generic feel. Recomposing
the shot with a cropping tool can make different elements stand out,
not to mention differentiate it from the same image used elsewhere.
Combining Custom and Stock

You can find the best of both worlds in combining the two. The main
appeal is that, if you manage to set the right pattern, stock photos
seem custom. Users wont put too much thought into where photos
came from, so if you can suggest all are custom early on, any stock
photos wont seem like stock.
151
The trick is to intersperse stock photos with images that are obviously
custom for example, featuring the product or logo. When choosing
stock photos, try not to be generic: select content based on a theme
or that distinguishes itself on its own. You can even thread together
some dissimilar stock photos with a few custom ones that establish
a pattern.
Thinking Beyond the PresentPhotos will remain a cornerstone of
web design until technology advances to allow video to replace it
and even then photos might still persist for their retro look. In the
near future, the trends we discussed above will shift in favor of the
following new techniques:
1. Smaller Custom Images

Perhaps as an alternative to the hero image trend, or perhaps to
coincide with the popularity of cards, smaller photos are gaining
steam as a web trend in the near future. To state the obvious,
smaller images allow sites to showcase more content on the screen.
Photo credit: http://theportraitmachine.co.uk/
The Portrait Machine an event portrait artist for-hire uses a

slider of smaller images to illustrate what she brings to an event
by showing context (as we explained above). Because her style is
a bit experimental, the more images help flesh out why people
should hire her.
2. Photo Manipulation
The availability of better photo-editing equipments naturally means
better photo manipulation. While techniques like color overlays
are still pretty basic, more complex trends will grow more popular as more people figure out of to use these programs. This can
also do wonders in personalizing stock photos, even to the point
of adding a logo.
Photo credit: https://beth-emily.com/
Beth-Emily doesnt let minimalism stop her creative photo manipulation. Some of the graphics behind the shelf have been fabricated
to add a little something extra to the image.
3. Paired with Custom Typography

If youll remember from Chapter 6, custom typography, like custom
photography, can enhance or even single-handedly create your
brands personality. When combined, the effects are quite powerful.
Photo credit: http://metaversemodsquad.com/
Just look at Metaverse Mod Squad the immediate image communicates so much about the brands personality. The faux-sloppy
painted font draws out the rebellious aspects of the photo of the
scooter gang, and vice-versa. Combining a custom font with a
custom photo helps determine how the user interprets each.

1. 10 Pitfalls to Avoid When Using Stock Photography An article from Design Shack warning against ten common mistakes
with stock photography.

2. TinEye Reverse Image Search A great tool for stock photography that reveals all of a photos locations on the Internet.
3. The Ultimate Guide to Beautiful DIY Photography A beginners guide to taking your own web photography.
4. StockPhotoRights.com FAQ All the common areas of confusion around stock photography cleared up.
5. 16 Places to Find the Best Free Stock Photos Designmodos
list of small but free websites that offer stock photography.
6. Time and costs for professional photographers A professional photographer breaks down the pricing by time you can
expect to pay when hiring a freelancer.
7. Should You Use Stock or Free Images for Blog Posts? A post
by CoSchedule Blog debating the pros and cons of stock photography, and which option is best for your particular situation.
8. Creative Commons A library of open source photography (as
well as music and videos), with some licenses allowing for modification.
9. Top 10 Reasons to Hire a Professional Photographer Rob
Korb Photography lists some compelling reasons to hire an expert instead of doing it yourself.
10. Things to Ask When Hiring a Photographer A beginners
guide to finding the right photography, written by the Professional Photographers of America.
Long Scrolls
Prompted by the domination of mobile and supported by the trend

of card UIs, the long-scrolling site is quickly gaining popularity.
To explain the popularity of the long scroll in a nutshell, we can look
to the increased usage of mobile screens. Simply put, the smaller the
screen, the longer the scroll. This interaction design guideline revitalized long and infinite-scrolling sites, challenging designers to get
more creative in their storytelling techniques.
Photo credit: Jack Daniels
Long Scrolls 156
But mobile screens alone cant explain the newfound success of the
long scroll, only the foundation behind it. The long-scrolling technique encompasses more than a few different design elements, and
in this chapter well discuss how they all weigh in.
A Short History of Long Scrolling

Long-scrolling sites tend to have one lengthy home page that links
to other, smaller pages, or the entire site can just exist on a single
long page.
Designers focus on storytelling with clever tactics like parallax scrolling or Ajax jQuery methods to allow for more dynamic animations
and interactions.
Photo credit: Apple
In the infancy of the Internet, scrolling was considered taboo. The

myth that users didnt like scrolling was perhaps a vestigial relic
Long Scrolls
157
from the print industrys above the fold mandate: newspapers

needed to get their readers attention from only the top area above
the front pages halfway fold. This made enough sense for websites,
too whatevers on the first screen will be what influences the users
first impression.
Moreover, old websites, like print, were mostly text, which cannot
sustain an interesting long scrolling site. However, when advances
in Javascript/CSS/HTML5 opened up more options and sites like Facebook and Twitter broke the ice, designers found that users actually
do scroll. In fact, studies have been conducted to back this up: they
found 66% of users attention on a normal media page was spent
below the fold.
Now, with high speed Internet available in more places than ever before and social media sites setting the bar (scrolling is the best way to
display their expansive user-generated content), scrolling just seems
right. Considering all the dynamic landscape of web design today,
long scrolling can act as the centerpiece that ties everything together.
Long Scrolls 158
Impact of Screen Size

Screen size limits the amount of information that can fit above the
fold, making designers choose between scrolling or shrinking everything to fit. Luckily, the gesture controls of mobile devices make
scrolling intuitive and fun.
The popularity of long-scrolling is even paying back the mobile industry by enabling yet smaller screens than before.
Photo credit: Shinya Suzuki. Creative Commons.
The ambitious Apple Watch relies on scrolling, as seen by the built-in

crown for that purpose. The Apple Watch Developer Library guidelines themselves state: Keep the total number of pages as small as
possible to simplify navigation.
Even on non-mobile devices, screens are shrinking just look at new
MacBooks 12-inch Retina display. The trend for laptops is leading
towards smaller and lighter, so when you consider they are now
incorporating gesture controls, you see how long-scrolling benefits
most users in general.
Long Scrolls 159
Storytelling
Long scrolling offers unique opportunities for storytelling that pageby-page navigation just cant match. Thats why Hoa Loranger of the
Nielsen Norman Group claims the tactic suits open-ended sites geared
towards discoverability, rather than goal-driven sites like ecommerce.
Photo credit: Frame Collections
Long-scrolling sites, such as Frame Collections One to See, One to

Kill above, creates a linear structure that allows for rich stories to
unfold naturally. Different layouts and animation patterns builds a
rhythm that gets the user wondering what will happen next. When
done right, this can be an immersive experience that the user wont
want to leave.
1. Advantages and Disadvantages

Long scrolling isnt a flawless technique, though, even with the
limitations of mobile devices. Lets take a look at its advantages
and disadvantages.
Long Scrolls 160
Advantages
Allows creative storytelling and visuals
Aids simple navigation
Promotes interaction
Infinite scrolling entices users to stay longer
Works well with touch controls
Opens the door for more app or game-like experiences
Disadvantages
There will always be people who simply refuse to scroll
Negative effect on SEO (to learn how to combat this drawback,
read this Moz piece and this Quicksprout piece.
Can be confusing and disorienting to people who prefer traditional navigation
Difficulty in returning to previous page (a persistent top navigation bar circumvents this)
May slow site speed, especially with video content or parallax
effects (this tutorial explains how to use parallax scrolling
without slowing down the site)
In general, the combination of long scrollings advantages and
disadvantages make the style most suited for sites that:
Anticipate a lot of mobile users
Frequently update content
Carry a heavy amount of inalienable content
Do not have heavy media like videos that will slow the site down
This article from Smashing Magazine further explores the pros and
cons of long scrolling.
Long Scrolls
161
Scrolling Options
Here well elaborate on the new opportunites long scrolling allows
for designers. Below are three methods that even alone can be worth
implementing scrolling.
1. Parallax
Known to the video game industry for decades, parallax refers
to the background and the foreground (or differing layers of the
background) moving at different speeds. This techniques creates
a three-dimensional effect to enhance otherwise stagnant two-dimensional graphics.
Photo credit: http://makeyourmoneymatter.org/
Parallax scrolling lets Make Your Money Matter (above) illustrate

some basic economics without boring people in a way thats fun, interactive, visually stimulating, and beneficial to the company.
Long Scrolls 162
2. Screens as Pages
To alleviate some of the disorienting drawbacks to scrolling, it helps
to think of screens as pages. Each new screen can be sectioned off
with a different background, style, typography, etc., to properly
divide one page into several.
Photo credit: Jumo
Jumo is a great example of tastefully balancing parallax scroll

with the screens as pages long-scrolling technique. At the top
of the page, notice how the lamp comes to life as you first scroll
downwards, but then the site smoothly transitions to a more standard layout. The clever interaction technique shows off how the
device works in real life and adds a bit of delight to draw in the
user. By applying parallax effects and card layouts in different
parts of the scroll, the site creates a lively experience that doesnt
overload the senses.
Long Scrolls 163
3. Animations
User-triggered interactivity makes the animations feel more connected, while the animations breathe life and fun into the scroll,
enticing and rewarding the users.
Photo credit: http://revelator.com/tour/sell
Revelator (a music promotion platform) walks the user through

each of its 5 steps in a left-to-right narrative triggered by scrolling.
As you scroll, animations transition you to the next screen while
creating a path of content for you to follow. Its a useful way to tell
users Heres the flow of content while keeping them interested
in whats next. Of course, users can also click ahead if they dont
want to scroll through the content.
Revelators clever navigation pattern and meaningful interactive
design turns a standard Features page into a rich story that guides
users through uploading, promoting, and analyzing music sales.
Long Scrolls 164
Best Practices
If youve decided that long scrolling can help your site, keep the following best practices in mind during the designing:
Photo credit: http://bauer.com/
Differentiate the scrolling navigation controls from other calls-toactions and links
If youre not designing a single-page site, the home or landing
page should be in a long-scrolling format, with splinter pages in
a shorter format
Sticky navigation where navigation controls and menus are stagnant while the content moves helps with a lot of the orientation
issues from long scrolling (see Grovemade below)
Long Scrolls 165
Photo credit: Grovemade
Include visual cues to orient users in the scroll like a Scroll

down note at the top of the page, and a dotted path to show their
position in the scroll.
Photo credit: Jumo
Conduct usability testing and behavior analysis (like in Google

Analytics) to see how your design is actually working
Dont overdo it with too many screens. Even infinite-scrolling
pages shouldnt go on infinitely.
Long Scrolls 166

As long as small screens stay in fashion (and they will for the foreseeable future), then long scrolling will continue to evolve and expand
in what it can offer.
The most likely trend of the future is that the more advanced effects
will become translated to mobile devices. While parallax is mainly
a desktop effect now, in the future it will surely become more mobile-friendly. Using Ajax and other auto-loading strategies will clear
the path for these advances in mobile.
Photo credit: The Boat
Digital Telepathy is calling pageless design the future of the web, and
were inclined to agree. Rethinking what a site should be, designers
are starting to realize that a page-by-page structure is not really
necessary.
Similarly, today interaction design is starting to finally get the credit
it deserves. As IxD is granted more power, so too will long-scrolling
Long Scrolls
167
styles. These allow for better user interactions and offer better rewards,
and this style is primed to become the next interaction design staple.
As it grows in popularity, long scrolling will also incorporate other
trends. While not typically associated with minimalism, giving a
minimalistic site a scrolling navigation could increase the amount
of user interaction minimalisms natural weakness.
Long scrolling sites are incredibly adaptable, allowing modifications
to include a wide range of attributes even video, like the Beaterate
Band site below.
Photo credit: http://www.beatrate.org/
People visit sites for content first, with everything else secondary.
Because long scrolling provides a linear platform for narrative design,
it will continue to be reinvented over and over to fulfill new needs.
Long Scrolls 168
Consider everything we said in this chapter before taking the plunge

into long scrolling. Review the necessary criteria and make sure
your site meets it. Otherwise, adopting long scrolling for the sake of
trendiness may actually do more harm than good.
Start free UXPin trial

1. Ajax jQuery Learning Center A guide to using Ajax techniques
on various apps.
2. Build a Parallax Scrolling Website: 10 Pro Tips Josh Chan
of Chormatix gives Creative Bloq his ten best tips for parallax
scrolling.
3. Parallax.js A tool for testing how your pages render to different screen orientations.
4. How to Create an SEO Friendly Infinite Scrolling Page One
of the biggest disadvantages to scrolling sites is SEO, so Quicksprout explains how to sidestep the problem.
5. Adobe Muse CC Scroll Effects An Adobe software release with
tools for various scrolling effects.
6. One Page Love A gallery of the best single-page websites, up-
Long Scrolls 169
dated regularly.
7. Apple Resurrects the Scroll Wheel A TechCrunch article analyzing how the Apple Watch will breath new life into scrolling
websites.
8. How to Create a Parallax Website A two-part tutorial that
teaches the fundamentals, including coding, for parallax design.
9. Scrolling Controls for HTML5 Video Ollie Rogers offers a
great bit of code and interaction on CodePen.
10. How to Create a Horizontally Scrolling Site A tutorial from
CSS Tricks on how to orient your scroll side-to-side.
HD Backgrounds
High definition displays are steadily becoming the norm rather than
the exception. As HD displays grow more affordable, so too do HD
backgrounds grow in popularity. Videos, photos, or animations and
graphics each have their own strengths and weaknesses, but the
one thing they all share is the crisper, more engaging visuals.
Photo credit: http://www.wonderfullywild.co.uk/
HD Backgrounds
171
Photo credit: Big Cartel
This chapter will explore the types and best practices for HD backgrounds, including tips for getting around the common problems.
But first, well start with a little background...
Some Background on HD Backgrounds

When we talk about HD, we refer a device that contains more than
twice as many pixels as one with standard definition. Resolution is
measured in how many pixels exist within an inch of screen this
unit is interchangeably referred to as dots per inch (DPI) or pixels per
inch (PPI). To put things in perspective, a typical standard definition
screen boasts a 72 ppi, while high definition screens are anything
more than 200 ppi. (The current highest definition PC is the iMac 27
at 217 PPI.)
The rise of HD displays impacts more than just the popularity of HD
backgrounds, but the way we think about design altogether, specifically between uploading images in raster or vector formats.
HD Backgrounds 172
Before, raster formats like .jpg, .gif, and .png were preferred as a way
to compress images and hasten loading times. These simply translated the image to the screen pixel-for-pixel. But with HD displays,
this images appear blurry, with the same amount of image pixels
displayed on twice as many screen pixels.
The shift is leaning towards scalable vector formats (SVG), which
allows the same image to appear at its best on different screen resolutions. By using connected points and lines instead of pixel-for-pixel,
vector formats allow the image to accommodate various resolutions
without changing the file.
Photo credit: https://flipboard.com/
HD web design requires rethinking and using vector formats, which is

a newer concept when it comes to the internet. (Coincidentally, print
designers have been doing it for ages.) Thats where the Scalable Vector Format, or SVG, comes in. As with other vector graphic formats,
HD Backgrounds 173
SVG graphics use connected points and lines, rather than pixels, to
create images that can be scaled to any size without a loss of quality.
But that doesnt make vectors a cure-all solution. Photographs, for
example, are limited only to the resolution they were taken in, so
vectors wont change how theyre rendered on larger or smaller
screens. For that reason, we recommend the following guidelines:
Use vector for original graphics
Use raster for photographs and graphics whose pixels cant be
changed
With this in mind, use the highest resolution possible when selecting
or taking photographs for your site.
HD Backgrounds 174
3 Trends in HD Backgrounds
With the prevalence of HD displays, three trends with HD backgrounds
have become popular: images, videos, and animation. Well discuss
each below, including best practices.
1. HD Images
Usually given a full-screen or hero placement, HD images better
emphasize texture, colors, and of course the color. This does wonders for that split-second, all-important first impression.
Photo credit: Bose
Photo credit: Ashworth
HD Backgrounds 175
Photo credit: http://www.wearedandy.com/
If you know just the image to best represent your brand as the first
thing your user sees, here are five suggestions to implementing it:
Dont compete The HD background will naturally attract a lot
of attention, so other elements will only distract the user and
complicate the visual hierarchy. Try pairing this background
with a minimalist interface.
Sliders or collages Multiple images obviously give you more
options in what you can show, so sliders or collages are acceptable strategies if you have more than one image.
Image effects Blurs, color overlays, integrating graphics and
photography some effects can achieve more goals in ways the
image alone cannot.
Consider screen size differences Where your elements fall
on the background image can change on different device screen
sizes, so keep all variations in mind.
HD Backgrounds 176
Cropping Photo backgrounds rarely conform to the 1 to 1.5

aspect ratio of cameras, so use cropping to your advantage to
get the best possible end result.
2. HD Videos
Despite the potentially heavy loading times, HD video backgrounds
can take still images a step further with their ability to create emotional connections. Classic cinematic techniques can be applied to
web design for moving images that captivate the user.
Photo credit: https://www.airbnb.com/
AirBnB uses video backgrounds to illustrate the emotional context

of their service (a concept we mentioned in the photography chapter). Paired with friendly headlines, the crisp videos depicting the
human side of traveling helps prime users to book a destination.
Until the introduction of HTML5, video backgrounds just werent
something most browsers and internet connections could handle,
but now that most smartphones are equipped to handle it, designers are starting to mine HD videos potential.
HD Backgrounds
177
Photo credit: http://www.brindisatapaskitchens.com/
The benefits of HD video are the same as the benefits of film itself.
If youd like to explore a cinematic background, consider these tips:
Between 1030 second loops Aim for this range to keep
loading times down and keep your users attention, all without
sacrificing coherence.
Sound off Automatic sound can be an annoyance, so set the
default to off with the option to turn it on. Sound is still a
polarizing autoplay element for most users.If youre going to
play sound, allow users to turn it on (and make sure its not
obnoxiously loud or annoying).
Minimize loading The biggest drawback of HD video is loading time, so minimize this as much as possible. Your video with
be worthless if your users get bored and leave before it loads.
HD Backgrounds 178
Backup for devices that cant render video Set a backup for
devices where your video cant be rendered Google Analytics
will show you which devices your site is used on most.
Quality Dont forget the advantage of HD is the quality, so
select the best possible quality, whether filming it yourself or
using stock.
Simply having a video clip in the background is not enough. Respect
the medium and draw on decades of film theory to maximize the
gains of HD video.
3. HD Animations
Somewhere between images and video are animations, sharing
elements of both. While the principles of animation we discussed
earlier remain the same, whats different is the quality brought
by HD.
Photo credit: http://madebyfieldwork.com/
HD Backgrounds 179
The biggest concern here is in transitions, which should be as

seamless and unnoticeable as possible. Whether your animations
are looped or triggered by interaction, they should have an organic feel that doesnt draw attention to itself. In HD, this is more
important, as flaws or loading stutters are even more noticeable.
Photo credit: http://www.acnplwgl.com/
For HD animation, remember these five tips:

Keep it simple The limitless potential of animation makes it
easy to go overboard. Dont convolute your site with unnecessary complications.
Connect animations to the interface Using signifiers like
key colors or suggestive cues, you can use animations to show
functionality or draw attention.
Vectors Use scalable image formats so you dont have to worry
about animations performing on different screens or resolutions.
HD Backgrounds 180
Use rules of video Think of animation as an extension of

video, so the same rules apply.
Design for target audience Different animations styles suit
different types of users, so use the one that hits your target
audience.
Review our chapter on animation for more guidelines.

As the future of web design (and TV, for that matter), HD designs will
only increase in prominence over time. In fact, what we see now is
only the beginning: for example, the looping format of HD videos is
a consequence of technological limitation; as loading times improve,
these loops will get longer and more involved.
Photo credit: http://wagamama.yoani.co.jp/#
HD Backgrounds
181
HD backgrounds are and always will be an instrument of visual prowess. As such an artistic tool, in the future we will see more creative,
even experimental, uses of HD visuals.
Above, the trendsetters Wagamama bend the rules without straying
from the familiar the loading screens animated hero illustration
with a bright color overlay sets the stage for the remainder of the site.
Photo credit: http://bellroy.com/live-life-outside
Similarly, still HD video combines effects and utilizes the stimulation of video with the easy loading and relative calm of photo. Bellroy
(above), a wallet cover manufacturer, shows off their products durability in a slow-paced video where the only motion is in the softly
falling snow. The imagery is stunning with full HD effects, but still
relaxing and with a quick loading time.
Layers are another attribute with a lot of creative potential. Effects
like blurs and color overlays open a lot of new doors.
HD Backgrounds 182
The blurred background, especially, is an effective layering tool. By

prodding the users curiosity, it entices them to interact with the site,
sometimes with the promise of the background becoming clearer. This
technique not only shares the users attention with other elements,
it also makes for quicker loading.
Photo credit: http://fernando.is/all-about/
By living up to its superb simplicity, Fernando Maclens site brings

focus to the external portfolio links by repelling focus from the background. More ambitious sites can feature a call-to-action that reveals
the video in full-clarity when activated.
Another visual element we see on the horizon is 3D effects, made
possible by HD displays and proper layering. By playing with concepts
that make use of layering effects like parallax scrolling designers
can create an illusion of 3D. This immersive technique is only enhanced by HDs powerful visual capabilities.
HD Backgrounds 183
Photo credit: http://www.colorplanpapers.com/
On the site for Color Plan Papers above, the floating circles create a
3D hierarchy of their own by superimposing one another. The more
layers created by this effect, the more 3D the page seems. Combine
that with a fun animated effect each circle expands cartoonishly
on hover and you have a site thats engaging in both visuals and
interactivity.
The transition to HD might seem scary to some designers who are
set in their ways, but those who embrace the new opportunities will
better position themselves in the future. Just like when sound and
then color was added to movies, there is an adjustment period followed by one of experimentation, and ultimately a renaissance. The
heightened visuals of HD will, in the end, give the designers more
power, not less. The key is to get in on this fantastic new movement
while its still in its early phases.
HD Backgrounds 184

1. Using SVG for Flexible, Scalable and Fun Backgrounds, Part
I The first part of A List Aparts comprehensive guide on everything you need to know about SVG.
2. Designers Guide to DPI For beginner to intermediate designers, this guide from Sebastien Gabriel teaches cross-DPI and
cross-platform design.
3. How to Design the Web in a High-Def World Six Revisions
presents a case study that shows the step-by-step process of
building a full-screen HD website, including resolution, large
files, and come coding.
4. Videezy Stock Video A collection of free HD stock video.
5. Creative Commons A collection of free HD stock photos.
6. Backgrounds and Web Design: Examples and Best Practices
Smashing Magazines coverall on the basics of website backgrounds.
7. Tutorial Export SVG for the Web with Adobe Illustrator
A quick tutorial on exporting vector files to SVG with Illustrator.
8. Improving Image Quality on the Retina Display Tuts+s tips
on tackling HD displays, including the usage of CSS media queries.
9. Browser Shots An online tool for testing your sites screen res-
HD Backgrounds 185
olutions and browser capabilities.

10. 20 HD Blurred Background Sets A collection of free blurry
HD backgrounds.

Uxpin Web Design Book of Trends 2015 2016

Uploaded by

Copyright:

Available Formats

Uxpin Web Design Book of Trends 2015 2016

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Uxpin Web Design Book of Trends 2015 2016

Uploaded by

Copyright:

Available Formats

What are some trends discussed for HD backgrounds?

What are some trends discussed for HD backgrounds?

What are some techniques mentioned for using layers with HD backgrounds?

What are some techniques mentioned for using layers with HD backgrounds?

Copyright 2015 by UXPin Inc.

All rights reserved. No part of this publication text may be uploaded

For permission requests, write to the publisher, addressed Attention:

The New Flat Design

5 Characteristic Components of Flat Design

Advantages and Disadvantages

Prevailing Trends in Flat Design

Flat Design and Material Design

Thinking Beyond the Present

10 Free Resources and Tools

Only the Essentials

Combining Minimalism with Other Styles

Visual Harmony and Symmetry 

Minimalism Best Practices

Thinking Beyond the Present

10 Free Resources and Tools

Cards in Mobile and Responsive Design

Advantages and Disadvantages

Cards and Material Design

Thinking Beyond the Present

10 Free Resources and Tools

The Power of Interactivity

5 Pillars of Interaction Design

The Evolution of Interaction

Thinking Beyond 2015

10 Free Resources and Tools

Attributes of Web Animation

8 Popular Web Animation Techniques

Thinking Beyond the Present

10 Free Resources and Tools

Defining Dramatic Typography

Superimposed Over Images

Creative Use of Simple Typefaces

Thinking Beyond the Present

10 Free Resources and Tools

Influences from Fashion and Interior Design

Blocking and Hovering

Color and Texture

Thinking Beyond the Present

10 Free Resources and Tools

Trends in Modern Web Photography

Web Photography Options

Combining Custom and Stock

10 Free Resources and Tools

A Short History of Long Scrolling

Impact of Screen Size

Thinking Beyond the Present

10 Free Resources and Tools

Some Background on HD Backgrounds

Thinking Beyond the Present

10 Free Resources and Tools

Jerry Cao is a content strategist at UXPin where he gets to put

Carrie Cousins has more than 10 years experience in the media

Co-founder and head of product, Kamil previously worked as a

Flat Design Evolved

The New Flat Design

The New Flat Design

5 Characteristic Components of Flat Design

Advantages and Disadvantages

Prevailing Trends in Flat Design

Flat Design and Material Design

Thinking Beyond the Present

10 Free Resources and Tools

Only the Essentials

Combining Minimalism with Other Styles

Visual Harmony and Symmetry

Minimalism Best Practices

Thinking Beyond the Present

10 Free Resources and Tools

Cards in Mobile and Responsive Design

Advantages and Disadvantages

Cards and Material Design

Thinking Beyond the Present

10 Free Resources and Tools

The Power of Interactivity

5 Pillars of Interaction Design

The Evolution of Interaction

Thinking Beyond 2015

10 Free Resources and Tools

Attributes of Web Animation

8 Popular Web Animation Techniques

Thinking Beyond the Present

10 Free Resources and Tools

Defining Dramatic Typography

Superimposed Over Images

Creative Use of Simple Typefaces

Thinking Beyond the Present

10 Free Resources and Tools

Influences from Fashion and Interior Design

Blocking and Hovering

Color and Texture

Thinking Beyond the Present

10 Free Resources and Tools

Trends in Modern Web Photography

Web Photography Options

Combining Custom and Stock

10 Free Resources and Tools

A Short History of Long Scrolling

Impact of Screen Size

Thinking Beyond the Present

10 Free Resources and Tools

Some Background on HD Backgrounds

Thinking Beyond the Present

10 Free Resources and Tools