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

1. ID14my 2014 observations
in interactive design
Petra Sell
volpelino.com

2. Nice to meet you!
I am Petra Sell,
UI designer
& consultant.

3. here is a link
to all the examples
shown

4. do you fancy
a voice-over?
Download this presentation
including my speaker notes
—
or book me for a presentation

5. ID14
design observations
emerging
trends
in 2013

6. “Trends are kind of
shit, IMO.
Design needs to
serve a message.
Style isn’t design.”
—Jason Santa Maria
1

7. 1
emerging trends in 2013
the user
is in focus

8. we make our own stuff, supported by us1

9. internet of things is mainstream1

10. google bought nest.1

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. 2
emerging trends in 2013
challenging
the status quo

13. infinitive scrolling2

14. disrupting traditional UX standards2

15. 3
emerging trends in 2013
tell a story

16. photo narratives3

17. big images & bkg videos3

18. simple shapes, colors, handcraft. UI design = product3

19. 2013 at mail chimp in numbers3

20. 4
emerging trends in 2013
design
focusses on
the essence

21. “Simplicity is
the ultimate
sophistication.”
—Leonardo da Vinci
4

22. Homepages are getting zen4

23. let the shoe talk4

24. no you shouldn’t.4

25. 10 sec elevator pitch video explains it all.4

26. long scrolling pages with content chunking4

27. flat design as far as you can see4

28. graphics are simplified, UX thinking is way ahead4

29. 5
emerging trends in 2013
the revolution is
in the details

30. “good interaction
design shapes
the space
between tasks.”—Jason Santa Maria
5

31. flat color-matching backgrounds as a preloaded5

32. revolution typo: everybody uses it5
custom fonts
63%
system fonts
37%

33. typo companies catch up5

34. revolution parallax: everybody uses it5

35. just scroll till the footer5

36. yes, it does go with you. scroll and see5

37. Dynamic Web Forms5

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. do you miss
the voice-over?
Download this presentation
including my speaker notes
—
or book me for a presentation

40. ID14
design observations
way to go
in 2014

41. 1
way to go in 2014
the next
logical step

42. what literature suggests1

43. 2
way to go in 2014
responsive
web design is
about a responsive
mindset

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. In 2014, the mobile Web will die, responsive site the standard.2

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. “A long scrolling
page of disparate
information is not
a good mobile
user experience.”
—Brad Frost
2

48. progressive disclosure for article sub-headings2

49. Site performance no longer an afterthought2
</>
1,6MB

50. also embracing large screens2

51. 3
way to go in 2014
user paths don’t fit
into the classic
sitemap box

52. Seamless cross-channel user experience3

53. tablet and smartphone are often top of mind3

54. smartphone gets game console3

55. design as one entity, one experience3

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. menu degraded as a supporting role3

58. menu degraded as a supporting role3

59. a real hamburger icon!3

60. 4
way to go in 2014
the role
of a UI designer

61. be aware of the Dribbblisation of design4

62. “Great design is
pushing/focusing
the user to do
something
that he’ll thank you
for later.”
—Seth Godin
4

63. don’t pull button – who can resist?4

64. 5
way to go in 2014
designing
for content

65. focus on the essence5

66. Remove superfluous stuff5

67. so simple and pretty. and clever.5

68. “There is no longer room
for irrelevant things.
We have no longer got
the resources.
Irrelevance is out. ”
—Dieter Rams
5

69. 6
way to go in 2014
moving
past
just flat

70. jummy flat and still touchable6

71. flat but 3-dimensional6

72. 7
way to go in 2014
typography
at its best

73. typo is all you need7

74. old fashioned ligatures7

75. responsive typography – an experiment7

76. know your craftmanship.7

77. 8
way to go in 2014
digital branding

78. digital brand experience for flanders8

79. a digital-only brand8

80. sophisticated newspaper experience online8

81. digital style guide and UX specifications8

82. 9
way to go in 2014
flux is the capacity
for change

83. smart transitions9

84. “Heading from a
homepage to an inner
page should be a visually
pleasing experience. ”
—Himanshu Sareen
9

85. just some little css9

86. responsive iconography9

87. SVG graphics animation9

88. blinking9

89. The decline of :hover9

90. The return of rich media9

91. 10
way to go in 2014
and did you
know…

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. ID14
design observations
how to
keep up

94. 1
how to keep up
new toys

95. webfont preview1

96. photoshop is challenged1

97. 2
how to keep up
collaborate

98. learn to deal with it2

99. designers' manifesto2

100. 3
how to keep up
think
with your heart

101. the power of empathy3

102. “designers who
plan before they
decorate will be
more important
than ever.”—Paul Souders
3

103. 4
how to keep up
don’t just
follow trends

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. “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. 5
how to keep up
ask me

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. 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. volpelino.com