ID14my 2014 observations 

in interactive design
Petra Sell

volpelino.com
Nice to meet you!
I am Petra Sell,
UI designer 

& consultant.
here is a link 

to all the examples
shown
do you fancy

a voice-over?
Download this presentation 

including my speaker notes
—
or book me for a presentation
ID14 

design observations
emerging 

trends 

in 2013
“Trends are kind of
shit, IMO.
Design needs to
serve a message.
Style isn’t design.”
—Jason Santa Maria
1
1
emerging trends in 2013
the user
is in focus
we make our own stuff, supported by us1
internet of things is mainstream1
google bought nest.1
“The fact that people actually
adjusted their lives based on the
digital feedback of a glorified
bracelet was an amazing
accomplishment for designers.
As we all know, physical behavior
change is one of the hardest
challenges an experience designer
can tackle.”
— Chris Smith
1
2
emerging trends in 2013
challenging
the status quo
infinitive scrolling2
disrupting traditional UX standards2
3
emerging trends in 2013
tell a story
photo narratives3
big images & bkg videos3
simple shapes, colors, handcraft. UI design = product3
2013 at mail chimp in numbers3
4
emerging trends in 2013
design
focusses on
the essence
“Simplicity is
the ultimate
sophistication.”
—Leonardo da Vinci
4
Homepages are getting zen4
let the shoe talk4
no you shouldn’t.4
10 sec elevator pitch video explains it all.4
long scrolling pages with content chunking4
flat design as far as you can see4
graphics are simplified, UX thinking is way ahead4
5
emerging trends in 2013
the revolution is
in the details
“good interaction
design shapes
the space
between tasks.”—Jason Santa Maria
5
flat color-matching backgrounds as a preloaded5
revolution typo: everybody uses it5
custom fonts
63%
system fonts
37%
typo companies catch up5
revolution parallax: everybody uses it5
just scroll till the footer5
yes, it does go with you. scroll and see5
Dynamic Web Forms5
“Movement, change,
and animation are a lot
more than ways to
delight users: they are a
functional method for
design.”
—Frank Chimero
5
do you miss 

the voice-over?
Download this presentation 

including my speaker notes
—
or book me for a presentation
ID14 

design observations
way to go
in 2014
1
way to go in 2014
the next
logical step
what literature suggests1
2
way to go in 2014
responsive 

web design is
about a responsive
mindset 
“Does it adapt to screen size?
Does it take advantage of device
capabilities?
Is it accessible anywhere?
Does it work well?
For our users, those are the
things that matter.”
—Jason Grigsby
2
In 2014, the mobile Web will die, responsive site the standard.2
“We can’t keep building apps
with the desktop mindset of
permanent, fast connectivity,
where a temporary disconnection
or slow service is regarded as a
problem and communicated as
an error.”
—manifesto of Hoodie, say hello to offline first
2
“A long scrolling
page of disparate
information is not
a good mobile
user experience.”
—Brad Frost
2
progressive disclosure for article sub-headings2
Site performance no longer an afterthought2
</>
1,6MB
also embracing large screens2
3
way to go in 2014
user paths don’t fit
into the classic
sitemap box
Seamless cross-channel user experience3
tablet and smartphone are often top of mind3
smartphone gets game console3
design as one entity, one experience3
“move away from a Web 2.0
model based on simplifying tasks
and getting users from point A to
B as quickly as possible,
to a model of serendipitous
experiences based on location,
context, and intent.”
—Gaurishankar Krishnan
3
menu degraded as a supporting role3
menu degraded as a supporting role3
a real hamburger icon!3
4
way to go in 2014
the role 

of a UI designer
be aware of the Dribbblisation of design4
“Great design is
pushing/focusing
the user to do
something
that he’ll thank you
for later.”
—Seth Godin
4
don’t pull button – who can resist?4
5
way to go in 2014
designing 

for content 
focus on the essence5
Remove superfluous stuff5
so simple and pretty. and clever.5
“There is no longer room
for irrelevant things.
We have no longer got
the resources.
Irrelevance is out. ”
—Dieter Rams
5
6
way to go in 2014
moving
past
just flat 
jummy flat and still touchable6
flat but 3-dimensional6
7
way to go in 2014
typography
at its best
typo is all you need7
old fashioned ligatures7
responsive typography – an experiment7
know your craftmanship.7
8
way to go in 2014
digital branding
digital brand experience for flanders8
a digital-only brand8
sophisticated newspaper experience online8
digital style guide and UX specifications8
9
way to go in 2014
flux is the capacity
for change
smart transitions9
“Heading from a
homepage to an inner
page should be a visually
pleasing experience. ”
—Himanshu Sareen
9
just some little css9
responsive iconography9
SVG graphics animation9
blinking9
 The decline of :hover9
The return of rich media9
10
way to go in 2014
and did you
know…
“People exposed to the
well-designed layout
have higher cognitive
focus, more efficient
mental processes, and a
stronger sense of clarity.”
—Mikael Cho
10
ID14 

design observations
how to
keep up
1
how to keep up
new toys
webfont preview1
photoshop is challenged1
2
how to keep up
collaborate
learn to deal with it2
designers' manifesto2
3
how to keep up
think
with your heart
the power of empathy3
“designers who 

plan before they
decorate will be
more important
than ever.”—Paul Souders
3
4
how to keep up
don’t just
follow trends
“Don’t be into trends. 

… you decide what you
are, what you want 

to express by the way 

you dress and 

the way you live.”
—Gianni Versace
4
“Sometimes you have to
unlearn the things that you
believe to be true. You don’t
have to see the world the
same way you’ve always seen
it. Just because it was true in
the past, doesn’t mean it’s
true today.”
—James Clear
4
5
how to keep up
ask me
did you enjoy 

the presentation?
Download this presentation 

including my speaker notes
—
or book me for a presentation
—
and kudos for sharing it!
resources
• http://frankchimero.com/what-screens-want/
• http://insideintercom.io/the-dribbblisation-of-design/
• http://www.smashingmagazine.com/2013/08/22/
designing-for-digital-products/
• http://www.wired.com/design/2013/08/design-and-the-
digital-world/
• http://uxmag.com/articles/how-to-design-for-the-gut
• http://99designs.com/designer-blog/2014/01/15/7-
unbreakable-laws-of-user-interface-design
• http://www.cooper.com/journal/2012/08/the-best-
interface-is-no-interface.html
• http://ia.net/blog/learning-to-see/
• https://medium.com/web-design-technique/e67589bf9b73
!
… and more on https://delicious.com/volpelino/search/ID14
volpelino.com

ID14 – my 2014 observations in interactive design