ID14my 2014 observations 

in interactive design
Petra Sell

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

& consultant.
here is a link 

to all the examples
shown
do you fancy

a voice-over?
Download this presentation 

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

design observations
emerging 

trends 

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

the voice-over?
Download this presentation 

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

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

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

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

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

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

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

… you decide what you
are, what you want 

to express by the way 

you dress and 

the way you li...
“Sometimes you have to
unlearn the things that you
believe to be true. You don’t
have to see the world the
same way you’ve...
5
how to keep up
ask me
did you enjoy 

the presentation?
Download this presentation 

including my speaker notes
—
or book me for a presentation
...
resources
• http://frankchimero.com/what-screens-want/
• http://insideintercom.io/the-dribbblisation-of-design/
• http://w...
volpelino.com
Upcoming SlideShare
Loading in...5
×

ID14 – my 2014 observations in interactive design

10,692

Published on

In our business, time never stands still. In order to keep up with the latest developments in user interface design, browse through more than 100 slides full of insides and inspirations.
this si a follow-up of http://www.slideshare.net/ProphetsAgency/trends-in-interactive-design-2013

Do you miss a voice-over?
Download this presentation including my speaker notes for 3 euro on https://gum.co/id14
or book me for a presentation in your office or next event

http://volpelino.com/id14

Published in: Design, Technology
3 Comments
95 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,692
On Slideshare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
0
Comments
3
Likes
95
Embeds 0
No embeds

No notes for slide

Transcript of "ID14 – my 2014 observations in interactive design"

  1. 1. ID14my 2014 observations 
 in interactive design Petra Sell
 volpelino.com
  2. 2. Nice to meet you! I am Petra Sell, UI designer 
 & consultant.
  3. 3. here is a link 
 to all the examples shown
  4. 4. do you fancy
 a voice-over? Download this presentation 
 including my speaker notes — or book me for a presentation
  5. 5. ID14 
 design observations emerging 
 trends 
 in 2013
  6. 6. “Trends are kind of shit, IMO. Design needs to serve a message. Style isn’t design.” —Jason Santa Maria 1
  7. 7. 1 emerging trends in 2013 the user is in focus
  8. 8. we make our own stuff, supported by us1
  9. 9. internet of things is mainstream1
  10. 10. google bought nest.1
  11. 11. “The fact that people actually adjusted their lives based on the digital feedback of a glorified bracelet was an amazing accomplishment for designers. As we all know, physical behavior change is one of the hardest challenges an experience designer can tackle.” — Chris Smith 1
  12. 12. 2 emerging trends in 2013 challenging the status quo
  13. 13. infinitive scrolling2
  14. 14. disrupting traditional UX standards2
  15. 15. 3 emerging trends in 2013 tell a story
  16. 16. photo narratives3
  17. 17. big images & bkg videos3
  18. 18. simple shapes, colors, handcraft. UI design = product3
  19. 19. 2013 at mail chimp in numbers3
  20. 20. 4 emerging trends in 2013 design focusses on the essence
  21. 21. “Simplicity is the ultimate sophistication.” —Leonardo da Vinci 4
  22. 22. Homepages are getting zen4
  23. 23. let the shoe talk4
  24. 24. no you shouldn’t.4
  25. 25. 10 sec elevator pitch video explains it all.4
  26. 26. long scrolling pages with content chunking4
  27. 27. flat design as far as you can see4
  28. 28. graphics are simplified, UX thinking is way ahead4
  29. 29. 5 emerging trends in 2013 the revolution is in the details
  30. 30. “good interaction design shapes the space between tasks.”—Jason Santa Maria 5
  31. 31. flat color-matching backgrounds as a preloaded5
  32. 32. revolution typo: everybody uses it5 custom fonts 63% system fonts 37%
  33. 33. typo companies catch up5
  34. 34. revolution parallax: everybody uses it5
  35. 35. just scroll till the footer5
  36. 36. yes, it does go with you. scroll and see5
  37. 37. Dynamic Web Forms5
  38. 38. “Movement, change, and animation are a lot more than ways to delight users: they are a functional method for design.” —Frank Chimero 5
  39. 39. do you miss 
 the voice-over? Download this presentation 
 including my speaker notes — or book me for a presentation
  40. 40. ID14 
 design observations way to go in 2014
  41. 41. 1 way to go in 2014 the next logical step
  42. 42. what literature suggests1
  43. 43. 2 way to go in 2014 responsive 
 web design is about a responsive mindset 
  44. 44. “Does it adapt to screen size? Does it take advantage of device capabilities? Is it accessible anywhere? Does it work well? For our users, those are the things that matter.” —Jason Grigsby 2
  45. 45. In 2014, the mobile Web will die, responsive site the standard.2
  46. 46. “We can’t keep building apps with the desktop mindset of permanent, fast connectivity, where a temporary disconnection or slow service is regarded as a problem and communicated as an error.” —manifesto of Hoodie, say hello to offline first 2
  47. 47. “A long scrolling page of disparate information is not a good mobile user experience.” —Brad Frost 2
  48. 48. progressive disclosure for article sub-headings2
  49. 49. Site performance no longer an afterthought2 </> 1,6MB
  50. 50. also embracing large screens2
  51. 51. 3 way to go in 2014 user paths don’t fit into the classic sitemap box
  52. 52. Seamless cross-channel user experience3
  53. 53. tablet and smartphone are often top of mind3
  54. 54. smartphone gets game console3
  55. 55. design as one entity, one experience3
  56. 56. “move away from a Web 2.0 model based on simplifying tasks and getting users from point A to B as quickly as possible, to a model of serendipitous experiences based on location, context, and intent.” —Gaurishankar Krishnan 3
  57. 57. menu degraded as a supporting role3
  58. 58. menu degraded as a supporting role3
  59. 59. a real hamburger icon!3
  60. 60. 4 way to go in 2014 the role 
 of a UI designer
  61. 61. be aware of the Dribbblisation of design4
  62. 62. “Great design is pushing/focusing the user to do something that he’ll thank you for later.” —Seth Godin 4
  63. 63. don’t pull button – who can resist?4
  64. 64. 5 way to go in 2014 designing 
 for content 
  65. 65. focus on the essence5
  66. 66. Remove superfluous stuff5
  67. 67. so simple and pretty. and clever.5
  68. 68. “There is no longer room for irrelevant things. We have no longer got the resources. Irrelevance is out. ” —Dieter Rams 5
  69. 69. 6 way to go in 2014 moving past just flat 
  70. 70. jummy flat and still touchable6
  71. 71. flat but 3-dimensional6
  72. 72. 7 way to go in 2014 typography at its best
  73. 73. typo is all you need7
  74. 74. old fashioned ligatures7
  75. 75. responsive typography – an experiment7
  76. 76. know your craftmanship.7
  77. 77. 8 way to go in 2014 digital branding
  78. 78. digital brand experience for flanders8
  79. 79. a digital-only brand8
  80. 80. sophisticated newspaper experience online8
  81. 81. digital style guide and UX specifications8
  82. 82. 9 way to go in 2014 flux is the capacity for change
  83. 83. smart transitions9
  84. 84. “Heading from a homepage to an inner page should be a visually pleasing experience. ” —Himanshu Sareen 9
  85. 85. just some little css9
  86. 86. responsive iconography9
  87. 87. SVG graphics animation9
  88. 88. blinking9
  89. 89.  The decline of :hover9
  90. 90. The return of rich media9
  91. 91. 10 way to go in 2014 and did you know…
  92. 92. “People exposed to the well-designed layout have higher cognitive focus, more efficient mental processes, and a stronger sense of clarity.” —Mikael Cho 10
  93. 93. ID14 
 design observations how to keep up
  94. 94. 1 how to keep up new toys
  95. 95. webfont preview1
  96. 96. photoshop is challenged1
  97. 97. 2 how to keep up collaborate
  98. 98. learn to deal with it2
  99. 99. designers' manifesto2
  100. 100. 3 how to keep up think with your heart
  101. 101. the power of empathy3
  102. 102. “designers who 
 plan before they decorate will be more important than ever.”—Paul Souders 3
  103. 103. 4 how to keep up don’t just follow trends
  104. 104. “Don’t be into trends. 
 … you decide what you are, what you want 
 to express by the way 
 you dress and 
 the way you live.” —Gianni Versace 4
  105. 105. “Sometimes you have to unlearn the things that you believe to be true. You don’t have to see the world the same way you’ve always seen it. Just because it was true in the past, doesn’t mean it’s true today.” —James Clear 4
  106. 106. 5 how to keep up ask me
  107. 107. did you enjoy 
 the presentation? Download this presentation 
 including my speaker notes — or book me for a presentation — and kudos for sharing it!
  108. 108. resources • http://frankchimero.com/what-screens-want/ • http://insideintercom.io/the-dribbblisation-of-design/ • http://www.smashingmagazine.com/2013/08/22/ designing-for-digital-products/ • http://www.wired.com/design/2013/08/design-and-the- digital-world/ • http://uxmag.com/articles/how-to-design-for-the-gut • http://99designs.com/designer-blog/2014/01/15/7- unbreakable-laws-of-user-interface-design • http://www.cooper.com/journal/2012/08/the-best- interface-is-no-interface.html • http://ia.net/blog/learning-to-see/ • https://medium.com/web-design-technique/e67589bf9b73 ! … and more on https://delicious.com/volpelino/search/ID14
  109. 109. volpelino.com

×