Acesse os slides da apresentação que o Oli Gardner, co-fundador da Unbounce, palestrou no RD on the Road dia 05 de Julho de 2017.

1. 3DDESIGN DIRECIONADO POR DADOS
#rdontheroad @oligardner

2. 1

3. #rdontheroad @oligardner

4. 67%67 % DOS PROFIS SIONAIS
DE MARKETING NESSA
AU DIÊNCIA NÃO
POS SUEM DADOS
SU FICIENTES PARA
EXECUTAR SEU
TR ABAL HO
EFETIVAMENTE.
67%
* who responded to the pre-conference survey
*

5. Fizemos porque estava na moda
We did it because it was trendy

6. DESIGN DECISIONS NEED TO BE INFORMED BY DATA
#rdontheroad @oligardner
DECISÕES DE DESIGN PRECISAM SER INFORMADAS POR DADOS
NÃO TENDÊNCIAS

7. All design trends lead to the same thing…
Todatendênciadedesignlevaparaamesmacoisa…

10. TENDÊNCIA
NÃO
SIGNIFICA
A MELHOR
OPÇÃO

11. Scrappy

12. Entrevistei/fiz uma pesquisa com
700+ Membros de Equipes de Marketing
PROFISSIONAL
DE MARKETING
DESIGNER
REDATOR
PUBLICITÁRIO

14. Boy when you’re with me, I’ll give you a taste
Make you lick your butt crack every day
- Katy Perry

15. Sparing his wife from his warm sausage tea
- Queen

16. Hold me closer Tony Danza
- Elton John

17. Hold me close or tie me down sir
- Elton John

18. It doesn't make a difference
- Bon Jovi
if we're naked or not

19. How do I get you a loan
- Heart

20. It’s a death row hard-on two minutes too late
- Alanis Morissette

21. …

22. - Alanis Morissette
It’s like ray-ee-aiiiiiiiiiiin

23. DESIGNER
COPYWRITER
O trabalho do
designer é deixar
as coisas bonitas,
enquanto o trabalho
do profissional de
marketing é gerar
resultados.
MARKETER
The designer's job is to make
things look nice, while the
marketer's job is to get results.

24. DESIGNER
COPYWRITER
MARKETER
Profissionais
de marketing
são muito míopes
e adoram viajar
na batatinha.
Marketers are too
myopic, and enjoy
naval gazing.

25. DESIGNER
COPYWRITER
MARKETER
Redatores parecem não
apreciar que os
mecanismos de
buscas veem as
coisas diferentes
dos seres humanos.
Writers don't seem to
appreciate that search
engines see things
differently to humans.

26. DESIGNER
COPYWRITER
MARKETER
Designers estão
sempre com a
agenda cheia e
limitam o conteúdo a
uma minúscula “box”.
Designers force their
design agenda and limit
copy to a small “box".

27. DESIGNER
COPYWRITER
MARKETER
Redatores sempre
querem que eu
comece o design sem
conteúdo algum.
Writers always want me to
start designing without any
content.

28. 81%D OS DE SI GNERS SÃO
O BRIGADOS A COMEÇAR A
C RI AÇÃO DO DESIGN
AN T ES DE RECEBEREM O
C O NTEÚDO
81%*
“A criação do design acaba sendo frustrante quando
você não possui tudo o que precisa desde o começo.”
* % de designers que responderam pesquisa sobre trabalhar com profissionais de marketing.
“É como pintar seguindo os números”

29. DESIGNER
COPYWRITER
Profissional de marketing
não respeitam designers
e acreditam que eles
sabem como as coisas
devem ser feitas.
MARKETER
Marketers don't
respect design and
believe they know
how it should be
done.

30. 98%
98%*DOS PROFISSI ONAIS DE
MARKETING DIS SERAM
QUE ELES SÃO
RESPONSÁVEIS POR DAR
FEEDBACK DO DESIGN AOS
DESIGNE RS
* % profissionais de marketing que responderam a pesquisa sobre trabalhar designers e redatores em marketing

31. 87%
87%*DOS PROFISSI ONAIS
DE MARKETING OS
QUAI S SÃO FEEDBACK
ACR EDI TAM Q UE SÃO
QUALIFICADOS PARA
FAZ ER ISSO.
* % profissionais de marketing que responderam a pesquisa sobre trabalhar designers e redatores em marketing

32. DOS PROFISSI ONAIS
DE MARKETING OS
QUAI S SÃO FEEDBACK
ACR EDI TAM Q UE SÃO
QUALIFICADOS PARA
FAZ ER ISSO.
* % profissionais de marketing que responderam a pesquisa sobre trabalhar designers e redatores em marketing
87%
87%*

33. DESIGNER
COPYWRITER
MARKETER
Designers são
muito sensíveis
Designers are
too sensitive.

34. is data the answer?
dados são a resposta?

36. 3D

37. 3D
1. VERIFICAR PLAYBOOK 3D
The 3D Playbook is a simple lookup tool for taking the
overwhelming amount of data that exists, and narrowing it
down to the types, sources, and formats that are most
relevant to what you’re working on.

39. 3D
Escolha o Objeto de Interesse
SCROLL
MAP
VISUAL
ID
VISUAL
ID
BOUNCE
RATE
FALSE
BOTTOM
FALSE
BOTTOM
STOCK
PHOTO
STOCK
PHOTO
NAV
CTA
HERO
SHOT
HERO
SHOT
FORM
VISUAL
ID
FALSE
BOTTOM
STOCK
PHOTO
1. VERIFICAR PLAYBOOK 3DIsole os recursos de
dados que você
precisa
O Playbook 3D é uma ferramenta de pesquisa simples para
eliminar a enorme quantidade de dados que existem e
facilitar por tipos, fontes e formatos mais relevantes para o
que você está trabalhando.

40. 3D !
2. COLETAR DADOS
1. CONSULT 3D PLAYBOOK
The 3D Playbook is a simple lookup tool for taking the
overwhelming amount of data that exists, and narrowing it
down to the types, sources, and formats that are most
relevant to what you’re working on.
!
"
#
$
%
&
'
(
Coletar dados é uma mistura de arte, ciência e
diversão. Fazer isso como um processo
colaborativo capacitará sua equipe e criará
relacionamentos no trabalho que removerão as
frustrações que os profissionais de marketing,
designers e redatores costumam sentir. Uma
planilha simples para organização ajuda.

41. July 5, 20171Facil Leitura
July 5, 201725Visual ID Test
2,000Scroll Map
readable.io
Usability Hub
Hotjar
1
1
7
Andrea
Oli
Oli
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
Completo
Data para
início
Dias
Necessários Coletando
Ferramenta
Usada
Tamanho da
Amostra
Necessária
Tipo de Dados
+
)
3D
*,
! PLANILHA #1 - COLETAR DADOS
Tech
SetupAtribuido à

42. Planilhas para o Processo 3D - bit.ly/rd-oli

43. *
!3D
2. COLLECT DATA
Collecting data is equal parts art, science, and
fun. Doing this as a collaborative process will
empower your team, and create working
relationships that remove the frustrations
marketers, designers, and copywriters often
feel. A simple status document helps.
1. CONSULT 3D PLAYBOOK
The 3D Playbook is a simple lookup tool for taking the
overwhelming amount of data that exists, and narrowing it
down to the types, sources, and formats that are most
relevant to what you’re working on.
3. OBSERVAÇÕES
É fundamental que toda a equipe consiga visualizar os
dados juntos. Ver gravações, analisar mapas de calor,
ler os resultados da pesquisa. Esta é a parte do
processo que desenvolve empatia e, finalmente,
melhores experiências digitais.

44. *
,
!3D
2. COLLECT DATA
Collecting data is equal parts art, science, and
fun. Doing this as a collaborative process will
empower your team, and create working
relationships that remove the frustrations
marketers, designers, and copywriters often
feel. A simple status document helps.
1. CONSULT 3D PLAYBOOK
The 3D Playbook is a simple lookup tool for taking the
overwhelming amount of data that exists, and narrowing it
down to the types, sources, and formats that are most
relevant to what you’re working on.
3. MAKE OBSERVATIONS
It’s critical that the whole team gets to view the data
together. Watching recordings, analyzing heat maps,
reading through survey results. This is the part of the
process that develops empathy, and ultimately better
digital experiences.
4. HIPÓTESES
Criar hipóteses com sua equipe ajuda a
eliminar os viés e permite uma perspectiva
multifacetada - ampliada quando você possui
uma estrutura de equipe diversificada.

45. )
3D
*
,
!
2. COLLECT DATA
Collecting data is equal parts art, science, and
fun. Doing this as a collaborative process will
empower your team, and create working
relationships that remove the frustrations
marketers, designers, and copywriters often
feel. A simple status document helps.
3. MAKE OBSERVATIONS
It’s critical that the whole team gets to view the data
together. Watching recordings, analyzing heat maps,
reading through survey results. This is the part of the
process that develops empathy, and ultimately better
digital experiences.
4. FORM HYPOTHESES
Forming hypotheses as a team helps eliminate
biases and allows for a multifaceted
perspective – amplified when you have a
diverse team structure.
5. 3D DESIGN CARDS
Esta é a fase Magaiver. Leve suas
observações, hipóteses e sua nova
compreensão da experiência do usuário, e
esboce antes / depois das formas de resolver
cada problema, em equipe. Lembre-se, somos
todos designers.

46. show photos of cards

47. +
)
3D
*
,
!
2. COLLECT DATA
Collecting data is equal parts art, science, and
fun. Doing this as a collaborative process will
empower your team, and create working
relationships that remove the frustrations
marketers, designers, and copywriters often
feel. A simple status document helps.
1. CONSULT 3D PLAYBOOK
The 3D Playbook is a simple lookup tool for taking the
overwhelming amount of data that exists, and narrowing it
down to the types, sources, and formats that are most
relevant to what you’re working on.
3. MAKE OBSERVATIONS
It’s critical that the whole team gets to view the data
together. Watching recordings, analyzing heat maps,
reading through survey results. This is the part of the
process that develops empathy, and ultimately better
digital experiences.
4. FORM HYPOTHESES
Forming hypotheses as a team helps eliminate
biases and allows for a multifaceted
perspective – amplified when you have a
diverse team structure.
5. 3D DESIGN CARDS
This is the MacGyver phase. Take your
observations, hypotheses, and your new
understanding of the user experience, and
sketch before/after ways to solve each
problem, as a team. Remember, we are all
designers.
6. 3D DESIGN DOCS
!
-
!
-
CONTROL
CTA
3D TREATMENT
CTA
This is where your designer goes to town,
taking all of the inspired, and hypothesized
design concepts and moulding them into a
new collaboratively-generated design
treatment.

48. we are all designers
somos todos designers

49. design = empatia

50. how do we become better designers?
Como nos tornamos designers melhores?

51. live your life as an optimizer
Viva sua vida como um otimizador

52. O PRIMEIRO OTIMIZADOR
Magaiver.

53. COMECE COMENDO
CHIPS

54. 3Dbit.ly/rd-oli
Slides & Recursos

55. TRENDLINETREND
TENDÊNCIAS

56. 2011
2010
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
2012
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
1991
WWW
The World Wide
Web is made
available to the
general public.
1994
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
1997
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
1998
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
2004
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
2007
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
2013
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Affordance is thrown out the
window en masse with a trend
that can destroy app usability.
2014
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
2015
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
2016
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
2017
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
DESIGN TRENDLINE
@OliGardner @Unbounce #rdontheroad

57. 2011
2010
2012
1991
1994
1997
1998
2004
2007
2013
2014
2015
2016
2017
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
WWW
The World Wide
Web is made
available to the
general public.
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Microsoft’s 2010 efforts were
amplified by Apple and
affordance is thrown out the
“window” en masse.
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
1991
WWW
The World Wide
Web is made
available to the
general public.
1991

58. 2011
2010
2012
1991
1994
1997
1998
2004
2007
2013
2014
2015
2016
2017
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
WWW
The World Wide
Web is made
available to the
general public.
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Microsoft’s 2010 efforts were
amplified by Apple and
affordance is thrown out the
“window” en masse.
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
Data visualization has become big business, one whose needs
will only grow as data expands like a new universe. After an
initial peak, the quality declined as the market got swamped.
INFOGRAPHICS
1994
1994
“THE FOLD”

59. Precisamos reformular “A Dobra”
We need to reframe “The Fold”

60. Precisamos reformular “A Dobra”
DE: acima e abaixo
FROM: above and below

61. Precisamos reformular “A Dobra”
PARA: visto e não visto
DE: acima e abaixo
TO: seen and unseen

62. 2011
2010
2012
1991
1994
1997
1998
2004
2007
2013
2014
2015
2016
2017
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
WWW
The World Wide
Web is made
available to the
general public.
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Microsoft’s 2010 efforts were
amplified by Apple and
affordance is thrown out the
“window” en masse.
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
Data visualization has become big business, one whose needs
will only grow as data expands like a new universe. After an
initial peak, the quality declined as the market got swamped.
INFOGRAPHICS
19971997
CAPTCHAS

63. 2011
2010
2012
1991
1994
1997
1998
2004
2007
2013
2014
2015
2016
2017
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
WWW
The World Wide
Web is made
available to the
general public.
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Microsoft’s 2010 efforts were
amplified by Apple and
affordance is thrown out the
“window” en masse.
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
19971997
CAPTCHAS
pânico laxante

64. 2011
2010
2012
1991
1994
1997
1998
2004
2007
2013
2014
2015
2016
2017
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
WWW
The World Wide
Web is made
available to the
general public.
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Microsoft’s 2010 efforts were
amplified by Apple and
affordance is thrown out the
“window” en masse.
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
Data visualization has become big business, one whose needs
will only grow as data expands like a new universe. After an
initial peak, the quality declined as the market got swamped.
INFOGRAPHICS
2004
2004
PINOT NOIR

67. 2011
2010
2012
1991
1994
1997
1998
2004
2007
2013
2014
2015
2016
2017
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
WWW
The World Wide
Web is made
available to the
general public.
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Microsoft’s 2010 efforts were
amplified by Apple and
affordance is thrown out the
“window” en masse.
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
2004
Image Source: GQ

68. 2011
2010
2012
1991
1994
1997
1998
2004
2007
2013
2014
2015
2016
2017
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
WWW
The World Wide
Web is made
available to the
general public.
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Microsoft’s 2010 efforts were
amplified by Apple and
affordance is thrown out the
“window” en masse.
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
2004
Image Source: GQ
Jeremy

69. 2011
2010
2012
1991
1994
1997
1998
2004
2007
2013
2014
2015
2016
2017
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
WWW
The World Wide
Web is made
available to the
general public.
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Microsoft’s 2010 efforts were
amplified by Apple and
affordance is thrown out the
“window” en masse.
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
2004
Image Source: GQ
Jeremy
Me

70. 2011
2010
2012
1991
1994
1997
1998
2004
2007
2013
2014
2015
2016
2017
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
WWW
The World Wide
Web is made
available to the
general public.
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Microsoft’s 2010 efforts were
amplified by Apple and
affordance is thrown out the
“window” en masse.
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
2004
Image Source: GQ

71. 2011
2010
2012
1991
1994
1997
1998
2004
2007
2013
2014
2015
2016
2017
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
WWW
The World Wide
Web is made
available to the
general public.
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Microsoft’s 2010 efforts were
amplified by Apple and
affordance is thrown out the
“window” en masse.
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
2004
Image Source: GQ

75. Source: http://www.decanter.com/wine-news/sideways-effect-confirmed-76585/

76. EU BEBO MUITO VINHO

77. Mas eu não compro uma garrafa
de Merlot há 13 anos.

78. “It only takes one tree to
make a thousand matches.
— Stereophonics
Leva somente uma
árvore para fazer
milhares de fósforos.

79. “It only takes one tree to
make a thousand matches.
Only takes one match to
burn a thousand trees.”
— Stereophonics
Leva somente um
fósforo para queimar
milhares de árvores.”
Leva somente uma
árvore para fazer
milhares de fósforos.

80. 2011
2010
2012
1991
1994
1997
1998
2004
2007
2013
2014
2015
2016
2017
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
WWW
The World Wide
Web is made
available to the
general public.
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Microsoft’s 2010 efforts were
amplified by Apple and
affordance is thrown out the
“window” en masse.
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
Data visualization has become big business, one whose needs
will only grow as data expands like a new universe. After an
initial peak, the quality declined as the market got swamped.
INFOGRAPHICS
2007
2007
RE-CAPTCHA

81. 2011
2010
2012
1991
1994
1997
1998
2004
2007
2013
2014
2015
2016
2017
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
WWW
The World Wide
Web is made
available to the
general public.
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Microsoft’s 2010 efforts were
amplified by Apple and
affordance is thrown out the
“window” en masse.
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
Data visualization has become big business, one whose needs
will only grow as data expands like a new universe. After an
initial peak, the quality declined as the market got swamped.
INFOGRAPHICS
2007
2007
RE-CAPTCHA

82. Not all books should be preserved.
Nem todos os livros devem ser
preservados

83. Faça tricô
com pêlo de
cachorro

84. Scrappy

85. Passando ferro ao extremo

87. Aprenda como
brincar com os
testículos de
um leão

88. 2011
2010
2012
1991
1994
1997
1998
2004
2007
2013
2014
2015
2016
2017
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
WWW
The World Wide
Web is made
available to the
general public.
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Microsoft’s 2010 efforts were
amplified by Apple and
affordance is thrown out the
“window” en masse.
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
Data visualization has become big business, one whose needs
will only grow as data expands like a new universe. After an
initial peak, the quality declined as the market got swamped.
INFOGRAPHICS
2011
2011 CINEMAGRAPHS

91. 2011
2010
2012
1991
1994
1997
1998
2004
2007
2013
2014
2015
2016
2017
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
WWW
The World Wide
Web is made
available to the
general public.
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Microsoft’s 2010 efforts were
amplified by Apple and
affordance is thrown out the
“window” en masse.
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
Data visualization has become big business, one whose needs
will only grow as data expands like a new universe. After an
initial peak, the quality declined as the market got swamped.
INFOGRAPHICS
2012
2012
EXPLAINER VIDEOS

94. não está bom o suficiente

95. Andrea Amaral
- Marketing Brasil, Unbounce

96. Brega & totalmente desnecessário
essa parte do elevador
Mulher de
negócios fajuta
passando na
hora certa.
Protegidinho da
chefe jerk
*Não são desenvolvedores
reais
Sério? Isso é o departamento
automotivos?
parte do minority report - A
nova lei
som do clique perfeitamente sincronizado
mais minority report à toa
ele não faz ideia do que
esses termos de marketing
significam
Aparentemente, nenhum dos nossos
visitantes gostaram deste video em
nossa homepage.
Sorriso falso
porque somos uma empresa tech!
oposto a assistir esse video explicativo
mulher de
negócio
desenvolvedor
fajuto
Esses ícones não tem
nada a ver com o do
editor

97. 2011
2010
2012
1991
1994
1997
1998
2004
2007
2013
2014
2015
2016
2017
PARALLAX SCROLLING
A beautiful motion design and photographic technique, parallax scrolling can
create an excellent experience. Sadly it was quickly abused.
CINEMAGRAPHS
Another beautiful concept, that didn’t gain much traction, instead its
subtlety was passed over in favour of the surging animated GIF.
STICKY NAVIGATION
A similar device to the HelloBar, but designed for anchor (in-page)
navigation. Something that can really help long landing pages.
INLINE FORM FIELD LABELS
This one blew up UX and CRO communities. Primarily because the label
disappeared when the field was clicked, removing context and hints.
BUTTON COLOUR
As affordable A/B testing tools hit the
market, so cometh a slew of bad case
studies that encourage bad experimentation
practices.
HELLO BAR
The first sticky bar emerges from Digital
Telepathy, allowing you to place persistent offers
at the top of the page.
EXPLAINER VIDEOS
Everyone needs an explainer video, right? Explain that to me.
FULLSCREEN HERO IMAGES
Wide adoption of fullscreen background images was the
beginning of many trends that would harm readability of the
all-important above-the-fold value prop area of web pages
everywhere.
WWW
The World Wide
Web is made
available to the
general public.
THE FOLD
Jakob Nielsen
proclaims that
people don’t
scroll, and most
debated topic in
digital marketing
begins, and
never stops.
CAPTCHAS
The first evil
interruptive
device is added
to web forms.
Creating a
usability
nightmare.
POPUPS
Things get even uglier
as web designers and
developers begin
hacking browser
behaviour. The hard to
escape Javascript
popup empowers the
black hats to start
misbehaving.
PINOT NOIR
Not a design
trend, but an
example of the
power trends
can wield when
left unchecked.
CAROUSELS
Oft looked upon as
a way to pacify
stakeholder
politics, carousel
sliders hit every
homepage adding
massive amounts
of content destined
never to be seen.
RE-CAPTCHA
The evil captcha is
turned into a device
that does good – by
crowdsourcing
digitizing of hard-
to-read books. Gets
acquired by Google
in 2009.
RESPONSIVE WEB DESIGN
One of the biggest web bandwagons ever. RWD seemed like a great idea at the
time, but the lack of control over the mobile experience can cause issues.
MOBILE-FIRST DESIGN
Closely tied to RWD, mobile-first sought to future-proof web
experiences by placing emphasis on mobile – because all of your traffic
is mobile, right?
EYE TRACKING
An expensive and fancy way to detect what people are looking at on a web
page. It quickly gained notoriety when the “baby gaze” experiment did the
rounds on marketing blogs.
INLINE FORM FIELD LABELS II
A community-led success story.
Designers created a way to keep the
label inline without disappearing.
HAMBURGER MENU
Massive debates raged about
this one, but influence from OS
designers has forced this into
mass adoption.
FLAT DESIGN
Microsoft’s 2010 efforts were
amplified by Apple and
affordance is thrown out the
“window” en masse.
BACKGROUND VIDEOS
The fullscreen hero image extends
to video, further impacting
readability and increasing instances
of “false bottoms”.
CONGRATULATIONS!
A Facebook hack more than a design
trend. But quite hilarious.
Congratulations!!!
GHOST BUTTONS
Rectangles with opaque fills create quite
awesome secondary state buttons, but poor
affordance and readability can render them
unclickable-looking.
GOOD COP / BAD COP
The psychological term for the two-
button popup, whereby you have to click
something you don’t agree with to exit
the experience.
SCROLLJACKING
20 years of interaction design thrown down the
toilet. Designers once more try to re-invent the
quite perfect browser scrolling mechanism.
SCROLL-TRIGGERED ANIMATIONS
As you scroll down the page, images and
text start to fly in, drawing your attention to
them. Great the first time you see them.
Thereafter annoying as hell.
CSS ANIMATED CTAs
These have the ability to get really out of hand.
Although there are some really nice subtle
effects.
WELCOME MAT
An entrance-overlay method from
SumoMe whereby the entire screen is
covered. An interruptive experience
that has seen some positive updates.
OVERLAYS
Unbounce signals the end to the
popup, ushering in a new era of
responsible marketing practices.
SKELETON SCREENS
A technique where a wireframe-like layout appears
before the content to accelerate load times and
provide a signal that loading is happening.
CONVERSATIONAL FORMS
One of the most interesting new interaction
models to emerge, conversational forms
turn a regular web form into a chat-like
experience.
CONFIRM SHAMING
A new name for good cop / bad cop
emerges. Manipulinks is another. Regardless
of the name, I hope one sticks as it makes it
easier to track the trend.
STICKY TOP AND BOTTOM
Top-anchored sticky bars are awesome, bottom
ones feel slightly more interruptive, but when both
are used at the same time it destroys the viewport.
SMART NAVIGATION
This will be an interesting one, where navigational
devices will be presented to visitors where and when
they hold the most contextual importance and utility.
ASYMMETRIC DESIGN
Could this simple yet elegant and dynamic
trend be the saviour of the false bottom? Quite
possibly.
2017?
2017 will be an interesting year for trends,
hopefully we’ll see an increase in
experimentation and validation.
Data visualization has become big business, one whose needs
will only grow as data expands like a new universe. After an
initial peak, the quality declined as the market got swamped.
INFOGRAPHICS
2012
FULLSCREEN HERO IMAGES
2012

99. 3D
+
)
3D
*,
! 3D PLAYBOOK >> FULLSCREEN HERO SHOTS
1. VERIFICAR PLAYBOOK 3D