SlideShare ist ein Scribd-Unternehmen logo
1 von 26
UI DESIGN
- The top 10 trends for 2016 -
- WHAT’S NEW (OR ALMOST) -
Nowadays, interfaces have to adapt
to a variety of devices that change
constantly. Due to this constant state
of flux , it’s important to repeatedly
question our ways of working to
guarantee a scalability and
consistency across all platforms.
In design, it is no longer possible to think
in “fixed pages”; we need to think about
“fluid design” as a system of changing
components, just as developers do.
There are several ways to approach this:
Responsive Design is a classic example,
but Adaptive UI, Material Design and
Atomic Design also have this same
perspective.
TREND N°1
FLUID DESIGN
Users are used to rich visual
experiences found in certain apps:
lighter content, targeted features,
more fine-tuned interaction design
and navigation native to each OS.
Users are now more demanding than
ever and they expect similar rich
experiences on the web.
Many sites are now overhauling their
graphic and ergonomic codes for
mobile and tablet apps. This means it’s
crucial to rethink content strategy and
structure in order to keep only what’s
essential and to optimize navigation
with “smart” interfaces (clever menus,
predictive forms, etc.).
TREND N°2
APPS THAT
INSPIRE THE WEB
- NOT NEW, BUT STILL RELEVANT -
TREND N°3
SIMPLICITY AT
EACH STEP
The keyword here is “less is more”,
which requires a constant quest to
keep only relevant information that
is useful to users, both in style
(interface) and substance (content).
So we can forget all about the fancy
details that can easily overload
interfaces and move towards a design
that is as simplified as possible. To
achieve a harmonious visual balance,
the interface needs to be structured
using a table where each space and
alignment is carefully adjusted.
Contrary to what you might think,
simplicity doesn’t always mean facility
or streamlining.
Flat Design is still holding strong and
is now being paired with Material
Design.
Flat Design is still very much present
with its focus on simplicity and colored
fields.
Material Design brings a new
dimension, with the concept of field
hierarchy, a return to shadows and
especially animation. This helps to more
clearly structure information while
allowing for more interactive elements.
TREND N°4
MATERIAL
ENRICHING FLAT
DESIGN
TREND N°5
ALL THE COLORS
OF THE RAINBOW
Colors are very important in graphic
design because they introduce the
brand universe and mood, while
playing a key role in the visual
hierarchy of the interface and
redirecting the user’s focus.
Using bright colors adds a much-
needed dynamism to understand the
interface. They can be accompanied by
pastel tints or paired with other bright
colors to create bold color palettes. It’s
also possible to add light fading to a
background to intensify the depth.
TREND N°6
ILLUSTRATION IN
ALL SHAPES AND
SIZES
In response to Flat Design and image
banks’ impersonal visuals, we’ll be
seeing more and more personalized
illustrations.
An illustration’s fun, differentiating
approach adds personality to interfaces
while affirming a brand’s identity and
finding new ways to present content.
They are particularly helpful in
storytelling.
TREND N°7
IMMERSIVE
BACKGROUNDS
Some interfaces can particularly
benefit from playing with large
background visuals to provide a
realistic, human touch and add
depth.
These visuals become real spaces of
expression for the brand because they
help add value to the content and set
the tone for the overall look the brand
is aiming for.
More and more short videos as
backgrounds provides a realistic,
immersive sensation. Just make sure
that this animation is discreet and that
it won’t distract or bore the user.
TREND N°8
INFINITE
SCROLLING
The classic fear that users won’t
scroll and thereby will miss content
beneath the line of sight is long
gone!
With the pervasive use of smartphones
and tablets, scrolling has become both
natural and automatic. For many years,
“one-page” sites have been growing in
popularity, progressively loading
content as users scroll further. Another
benefit: scrolling increases user
engagement.
TREND N°9
HIERARCHY
THROUGH
TYPOGRAPHY
Typography is still an essential
element to add hierarchy to
information, by using contrasting
font sizes and varying boldness.
With web fonts now on the scene, there
is even more freedom of typographic
expression.
Two character families are enough to
simultaneously create rhythm,
harmonious layout and to guarantee
good legibility of the content (Font
Pairing).
TREND N°10
ANIMATION THAT
SERVES A PURPOSE
Animation is not only useful in
creating a “wow” factor, but can also
be used to help users understand the
interface and interactions.
Sticking to Material Design guidelines,
animation is based on the laws of
physics while remaining discreet. Micro-
interactions help provide feedback to
the user after they perform an action.
Be careful to not go overboard, it’s
better to maintain a consistency and
meaning in the user experience.
- CONCLUSION -
We can see a logical evolution that follows market trends and usage.
3 key takeaways:
● Every trend should be considered and challenged with the brand’s users and objectives in
mind
● The “test and learn” method is the best way to check user comprehension and to start
applying hypotheses
● And of course, a good UI is nothing without a good UX!
Want more information, or to get in touch?
Marie-Amélie COTILLON
Creative Studio Manager
marie-amelie.cotillon@backelite.com
www.backelite.com

Weitere ähnliche Inhalte

Andere mochten auch

How to design forms that deliver a great user experience
How to design forms that deliver a great user experienceHow to design forms that deliver a great user experience
How to design forms that deliver a great user experienceIdean France
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Idean France
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017NiceToMeetYou
 
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...Idean France
 
Fjord Trends 2017
Fjord Trends 2017 Fjord Trends 2017
Fjord Trends 2017 Fjord
 
Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015Idean France
 
Intro to Usability (UX) Testing
Intro to Usability (UX) TestingIntro to Usability (UX) Testing
Intro to Usability (UX) TestingJake Truemper
 
Ux and usability it's no PICNIC
Ux and usability   it's no PICNICUx and usability   it's no PICNIC
Ux and usability it's no PICNICMyriam Jessier
 
10 user experience trends in 2015
10 user experience trends in 201510 user experience trends in 2015
10 user experience trends in 2015Idean France
 
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...Idean France
 
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...Idean France
 
UX & Usability: From "nice to have" to "do or die"
UX & Usability: From "nice to have" to "do or die" UX & Usability: From "nice to have" to "do or die"
UX & Usability: From "nice to have" to "do or die" iKatDigital
 
Boost the ROI of your digital presence
Boost the ROI of your digital presenceBoost the ROI of your digital presence
Boost the ROI of your digital presenceIdean France
 
Backelite digital agency presentation_English
Backelite digital agency presentation_EnglishBackelite digital agency presentation_English
Backelite digital agency presentation_EnglishIdean France
 
Career Paths of User Experience
Career Paths of User ExperienceCareer Paths of User Experience
Career Paths of User ExperiencePatrick Neeman
 
Etude Deloitte sur les usages Mobile des Français en 2014
Etude Deloitte sur les usages Mobile des Français en 2014Etude Deloitte sur les usages Mobile des Français en 2014
Etude Deloitte sur les usages Mobile des Français en 2014servicesmobiles.fr
 
L'user experience for IoT
L'user experience for IoTL'user experience for IoT
L'user experience for IoTUX REPUBLIC
 

Andere mochten auch (20)

How to design forms that deliver a great user experience
How to design forms that deliver a great user experienceHow to design forms that deliver a great user experience
How to design forms that deliver a great user experience
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017
 
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
 
Fjord Trends 2017
Fjord Trends 2017 Fjord Trends 2017
Fjord Trends 2017
 
Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015
 
Usability and UX
Usability and UXUsability and UX
Usability and UX
 
Intro to Usability (UX) Testing
Intro to Usability (UX) TestingIntro to Usability (UX) Testing
Intro to Usability (UX) Testing
 
Emotional Design
Emotional DesignEmotional Design
Emotional Design
 
Ux and usability it's no PICNIC
Ux and usability   it's no PICNICUx and usability   it's no PICNIC
Ux and usability it's no PICNIC
 
10 user experience trends in 2015
10 user experience trends in 201510 user experience trends in 2015
10 user experience trends in 2015
 
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
 
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
 
UX & Usability: From "nice to have" to "do or die"
UX & Usability: From "nice to have" to "do or die" UX & Usability: From "nice to have" to "do or die"
UX & Usability: From "nice to have" to "do or die"
 
Boost the ROI of your digital presence
Boost the ROI of your digital presenceBoost the ROI of your digital presence
Boost the ROI of your digital presence
 
Backelite digital agency presentation_English
Backelite digital agency presentation_EnglishBackelite digital agency presentation_English
Backelite digital agency presentation_English
 
Lean UX and usability testing
Lean UX and usability testingLean UX and usability testing
Lean UX and usability testing
 
Career Paths of User Experience
Career Paths of User ExperienceCareer Paths of User Experience
Career Paths of User Experience
 
Etude Deloitte sur les usages Mobile des Français en 2014
Etude Deloitte sur les usages Mobile des Français en 2014Etude Deloitte sur les usages Mobile des Français en 2014
Etude Deloitte sur les usages Mobile des Français en 2014
 
L'user experience for IoT
L'user experience for IoTL'user experience for IoT
L'user experience for IoT
 

Ähnlich wie The top 10 UI Design Trends for 2016

5 ux design trends you need to pay attention to in 2021
5 ux design trends you need to pay attention to in 20215 ux design trends you need to pay attention to in 2021
5 ux design trends you need to pay attention to in 2021Stefan Gerber
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile SolutionsDMI
 
Impact of Visual Design on UX
Impact of Visual Design on UXImpact of Visual Design on UX
Impact of Visual Design on UXMayank Ranjan
 
2014 UX/UI trends for mobile solutions
2014 UX/UI trends for mobile solutions2014 UX/UI trends for mobile solutions
2014 UX/UI trends for mobile solutionsDMI
 
best Graphic Design presentation created by me
best Graphic Design presentation created by mebest Graphic Design presentation created by me
best Graphic Design presentation created by meshivamds1205
 
UI/UX Design Trends 2023 – You’ll Love It
UI/UX Design Trends 2023 – You’ll Love ItUI/UX Design Trends 2023 – You’ll Love It
UI/UX Design Trends 2023 – You’ll Love ItBMN Infotech
 
Hallvarsson & Halvarsson - Webbdesigntrender 2012
Hallvarsson & Halvarsson - Webbdesigntrender 2012Hallvarsson & Halvarsson - Webbdesigntrender 2012
Hallvarsson & Halvarsson - Webbdesigntrender 2012Hallvarsson Halvarsson
 
2018 Web Design Trends
2018 Web Design Trends2018 Web Design Trends
2018 Web Design TrendsSproutMediaLab
 
Interactive Design Basics
Interactive Design Basics Interactive Design Basics
Interactive Design Basics katy walker
 
Website Design Trend 2016
Website Design Trend 2016Website Design Trend 2016
Website Design Trend 2016Samuel Soon
 
10 Design Trends 2013
10 Design  Trends 201310 Design  Trends 2013
10 Design Trends 2013Kim Peratt
 
10 Design Trends 2013
10 Design Trends 201310 Design Trends 2013
10 Design Trends 2013DMI
 
2018 UX & Web Design Trends
2018 UX & Web Design Trends2018 UX & Web Design Trends
2018 UX & Web Design TrendsVanksen
 
Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016Lewis Lin 🦊
 
Web Design Book Of Trends 2015 2016
Web Design Book Of Trends 2015 2016Web Design Book Of Trends 2015 2016
Web Design Book Of Trends 2015 2016Jessie Doan
 
Web Design Trends e-Book
 Web Design Trends e-Book Web Design Trends e-Book
Web Design Trends e-Bookjesús Santo
 

Ähnlich wie The top 10 UI Design Trends for 2016 (20)

5 ux design trends you need to pay attention to in 2021
5 ux design trends you need to pay attention to in 20215 ux design trends you need to pay attention to in 2021
5 ux design trends you need to pay attention to in 2021
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
 
Impact of Visual Design on UX
Impact of Visual Design on UXImpact of Visual Design on UX
Impact of Visual Design on UX
 
Top 10 Mobile App UI/UX Design Trends in 2022
Top 10 Mobile App UI/UX Design Trends in 2022Top 10 Mobile App UI/UX Design Trends in 2022
Top 10 Mobile App UI/UX Design Trends in 2022
 
datenwerk Cookbook: webdesign trends 2014 (en)
datenwerk Cookbook: webdesign trends 2014 (en)datenwerk Cookbook: webdesign trends 2014 (en)
datenwerk Cookbook: webdesign trends 2014 (en)
 
2014 UX/UI trends for mobile solutions
2014 UX/UI trends for mobile solutions2014 UX/UI trends for mobile solutions
2014 UX/UI trends for mobile solutions
 
best Graphic Design presentation created by me
best Graphic Design presentation created by mebest Graphic Design presentation created by me
best Graphic Design presentation created by me
 
UI/UX Design Trends 2023 – You’ll Love It
UI/UX Design Trends 2023 – You’ll Love ItUI/UX Design Trends 2023 – You’ll Love It
UI/UX Design Trends 2023 – You’ll Love It
 
Hallvarsson & Halvarsson - Webbdesigntrender 2012
Hallvarsson & Halvarsson - Webbdesigntrender 2012Hallvarsson & Halvarsson - Webbdesigntrender 2012
Hallvarsson & Halvarsson - Webbdesigntrender 2012
 
2018 Web Design Trends
2018 Web Design Trends2018 Web Design Trends
2018 Web Design Trends
 
Interactive Design Basics
Interactive Design Basics Interactive Design Basics
Interactive Design Basics
 
Ui trends 2019 by Amit
Ui trends 2019 by AmitUi trends 2019 by Amit
Ui trends 2019 by Amit
 
Mobile UI / UX Trends
Mobile UI / UX TrendsMobile UI / UX Trends
Mobile UI / UX Trends
 
Website Design Trend 2016
Website Design Trend 2016Website Design Trend 2016
Website Design Trend 2016
 
10 Design Trends 2013
10 Design  Trends 201310 Design  Trends 2013
10 Design Trends 2013
 
10 Design Trends 2013
10 Design Trends 201310 Design Trends 2013
10 Design Trends 2013
 
2018 UX & Web Design Trends
2018 UX & Web Design Trends2018 UX & Web Design Trends
2018 UX & Web Design Trends
 
Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016
 
Web Design Book Of Trends 2015 2016
Web Design Book Of Trends 2015 2016Web Design Book Of Trends 2015 2016
Web Design Book Of Trends 2015 2016
 
Web Design Trends e-Book
 Web Design Trends e-Book Web Design Trends e-Book
Web Design Trends e-Book
 

Mehr von Idean France

Start with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineStart with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineIdean France
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Idean France
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsIdean France
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphiqueIdean France
 
Graph QL par Andy Gigon
Graph QL par Andy GigonGraph QL par Andy Gigon
Graph QL par Andy GigonIdean France
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas FontaineIdean France
 
Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Idean France
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Idean France
 
From Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléFrom Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléIdean France
 
RX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangRX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangIdean France
 
Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Idean France
 
Rendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineRendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineIdean France
 
Sirikit par Julien Coudsi
Sirikit par Julien CoudsiSirikit par Julien Coudsi
Sirikit par Julien CoudsiIdean France
 
CocoaPods par David Yang
CocoaPods par David YangCocoaPods par David Yang
CocoaPods par David YangIdean France
 
Messages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineMessages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineIdean France
 
Un développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqUn développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqIdean France
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}Idean France
 
Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Idean France
 
App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}Idean France
 
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutMeetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutIdean France
 

Mehr von Idean France (20)

Start with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineStart with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a Machine
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outils
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
 
Graph QL par Andy Gigon
Graph QL par Andy GigonGraph QL par Andy Gigon
Graph QL par Andy Gigon
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas Fontaine
 
Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
 
From Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléFrom Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre Harlé
 
RX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangRX Swift avril 2017 - David Yang
RX Swift avril 2017 - David Yang
 
Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017
 
Rendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineRendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas Fontaine
 
Sirikit par Julien Coudsi
Sirikit par Julien CoudsiSirikit par Julien Coudsi
Sirikit par Julien Coudsi
 
CocoaPods par David Yang
CocoaPods par David YangCocoaPods par David Yang
CocoaPods par David Yang
 
Messages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineMessages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas Fontaine
 
Un développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqUn développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey Hacq
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}
 
Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}
 
App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}
 
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutMeetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
 

Kürzlich hochgeladen

Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一Fi L
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一z xss
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一D SSS
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一F dds
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Servicejennyeacort
 
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degreeyuu sss
 
Apresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoApresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoCarolTelles6
 
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作7tz4rjpd
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree ttt fff
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfworkingdev2003
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造kbdhl05e
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改yuu sss
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一Fi sss
 

Kürzlich hochgeladen (20)

Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
 
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
 
Apresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoApresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus Rizzo
 
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdf
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
 

The top 10 UI Design Trends for 2016

  • 1. UI DESIGN - The top 10 trends for 2016 -
  • 2. - WHAT’S NEW (OR ALMOST) -
  • 3. Nowadays, interfaces have to adapt to a variety of devices that change constantly. Due to this constant state of flux , it’s important to repeatedly question our ways of working to guarantee a scalability and consistency across all platforms. In design, it is no longer possible to think in “fixed pages”; we need to think about “fluid design” as a system of changing components, just as developers do. There are several ways to approach this: Responsive Design is a classic example, but Adaptive UI, Material Design and Atomic Design also have this same perspective. TREND N°1 FLUID DESIGN
  • 4.
  • 5. Users are used to rich visual experiences found in certain apps: lighter content, targeted features, more fine-tuned interaction design and navigation native to each OS. Users are now more demanding than ever and they expect similar rich experiences on the web. Many sites are now overhauling their graphic and ergonomic codes for mobile and tablet apps. This means it’s crucial to rethink content strategy and structure in order to keep only what’s essential and to optimize navigation with “smart” interfaces (clever menus, predictive forms, etc.). TREND N°2 APPS THAT INSPIRE THE WEB
  • 6.
  • 7. - NOT NEW, BUT STILL RELEVANT -
  • 8. TREND N°3 SIMPLICITY AT EACH STEP The keyword here is “less is more”, which requires a constant quest to keep only relevant information that is useful to users, both in style (interface) and substance (content). So we can forget all about the fancy details that can easily overload interfaces and move towards a design that is as simplified as possible. To achieve a harmonious visual balance, the interface needs to be structured using a table where each space and alignment is carefully adjusted. Contrary to what you might think, simplicity doesn’t always mean facility or streamlining.
  • 9.
  • 10. Flat Design is still holding strong and is now being paired with Material Design. Flat Design is still very much present with its focus on simplicity and colored fields. Material Design brings a new dimension, with the concept of field hierarchy, a return to shadows and especially animation. This helps to more clearly structure information while allowing for more interactive elements. TREND N°4 MATERIAL ENRICHING FLAT DESIGN
  • 11.
  • 12. TREND N°5 ALL THE COLORS OF THE RAINBOW Colors are very important in graphic design because they introduce the brand universe and mood, while playing a key role in the visual hierarchy of the interface and redirecting the user’s focus. Using bright colors adds a much- needed dynamism to understand the interface. They can be accompanied by pastel tints or paired with other bright colors to create bold color palettes. It’s also possible to add light fading to a background to intensify the depth.
  • 13.
  • 14. TREND N°6 ILLUSTRATION IN ALL SHAPES AND SIZES In response to Flat Design and image banks’ impersonal visuals, we’ll be seeing more and more personalized illustrations. An illustration’s fun, differentiating approach adds personality to interfaces while affirming a brand’s identity and finding new ways to present content. They are particularly helpful in storytelling.
  • 15.
  • 16. TREND N°7 IMMERSIVE BACKGROUNDS Some interfaces can particularly benefit from playing with large background visuals to provide a realistic, human touch and add depth. These visuals become real spaces of expression for the brand because they help add value to the content and set the tone for the overall look the brand is aiming for. More and more short videos as backgrounds provides a realistic, immersive sensation. Just make sure that this animation is discreet and that it won’t distract or bore the user.
  • 17.
  • 18. TREND N°8 INFINITE SCROLLING The classic fear that users won’t scroll and thereby will miss content beneath the line of sight is long gone! With the pervasive use of smartphones and tablets, scrolling has become both natural and automatic. For many years, “one-page” sites have been growing in popularity, progressively loading content as users scroll further. Another benefit: scrolling increases user engagement.
  • 19.
  • 20. TREND N°9 HIERARCHY THROUGH TYPOGRAPHY Typography is still an essential element to add hierarchy to information, by using contrasting font sizes and varying boldness. With web fonts now on the scene, there is even more freedom of typographic expression. Two character families are enough to simultaneously create rhythm, harmonious layout and to guarantee good legibility of the content (Font Pairing).
  • 21.
  • 22. TREND N°10 ANIMATION THAT SERVES A PURPOSE Animation is not only useful in creating a “wow” factor, but can also be used to help users understand the interface and interactions. Sticking to Material Design guidelines, animation is based on the laws of physics while remaining discreet. Micro- interactions help provide feedback to the user after they perform an action. Be careful to not go overboard, it’s better to maintain a consistency and meaning in the user experience.
  • 23.
  • 25. We can see a logical evolution that follows market trends and usage. 3 key takeaways: ● Every trend should be considered and challenged with the brand’s users and objectives in mind ● The “test and learn” method is the best way to check user comprehension and to start applying hypotheses ● And of course, a good UI is nothing without a good UX!
  • 26. Want more information, or to get in touch? Marie-Amélie COTILLON Creative Studio Manager marie-amelie.cotillon@backelite.com www.backelite.com