SlideShare uma empresa Scribd logo
1 de 29
Mobile 2015
UI/UX trends
Whether on an app screen, a web browser, or a wearable watch face, design is
one of the most important drivers of consumer engagement. From flat design to
Material design, I analysed what trends have evolved, and share a few of my
insights with you—what are these trends? Why are they beneficial to the user?
And how are they created?
Let’s look at how flat design and Material design came into play and evolved to
the trends we see today.
Content © Onur Oral (https://medium.com/@oralonur)
Lighter Design
What
Instead of incorporating a wide array of gradients and shadows, shifting to a ‘flat
design’ creates a lighter aesthetic in the app. This means using negative space —
instead of gradients, shadows, etc.— can create a simpler interface, focusing
only on having core information and removing design elements that are not
productive as itself and to the user flow.
Why
Lighter design removes distraction to help guide the user’s eye to meaningful
content on the screen, enabling easier navigation while also providing a sleek,
modern aesthetic to the brand itself.
One Typeface To Rule Them All
What
Reducing the number of fonts on a screen can reveal the power of typography.
Instead of using different typeface and leveraging different characteristics —e.g.
italics, bold, semi-bold— and different font sizes can better differentiate discrete
areas of content.
Why
Embracing a singular typeface across an entire app drives consistency not only
for branding, but also across channels —e.g. app, mobile site, website— thus
optimising the mobile elements across the omnichannel experience. Also, users
prefer the simplicity of having one typeface to scroll through in identifying
relevant content.
Spaces & Blocks - No More Lines
What
While previously lines and dividers were used to clearly delineate specific
sections or categories within a screen, adding these elements can result in
dense, crowded interfaces. Straying away from lines, interfaces which leverage
clustered blocks of content separated by spaces have the advantage of freeing
up that space and establishing a clean look.
Why
The removal of explicit lines and dividers provides a modern look that focuses
on functionality; for example, images and/or fonts can be bigger, providing
visual clarity and improved ease of use. Leveraging space instead of drawing
lines helps to define different sections in a non-obtrusive manner.
Spotlighted Data
What
As users’ preferences shift toward a simpler interface, usage of big fonts and
striking colors get more common to make a certain data the center of focus.
Highlighted data can vary according to target customers.
Why
Leveraging increased font size and/or a pop of color draws the users’ attention
to a particular area of the screen — without an obtrusive, heavy-handed push or
command to do so. As a result, users can access information more quickly,
providing an easier navigation and information-gathering experience.
Micro-interaction
What
Micro-interactions are small visual enhancements (for example — an animation, a
sound etc.) that occur around a use case. These scenarios may include
completing a transaction, favoriting an item, or prompting a pop-up message.
These interactions are subtle, but they differentiate the product by pointing to
the attention the right element.
Why
These micro-interactions can be leveraged as a signal to prompt the user while
accomplishing a task — e.g. adjusting a setting— creating a small piece of content
like a pop-up message. Apps which have well-done micro-interactions
considered easier, more fun, and more engaging by their users.
Smaller Color Palette
What
The usage of simpler color schemes became a trend after the introduction of flat
design in 2013, which embraces clarity and simplicity. As a result, designers and
users alike prefer the usage of smaller number of colors, aiming for a clean look.
Why
Usage of color is essential in creating a certain mood, guiding the user’s area of
focus, and communicating a brand. By using fewer colors, the brand identity can
be reflected more clearly. In addition, users may prefer this aesthetic as it
removes the distraction that too many colors can cause, and it better highlights
key features, improving navigation through the app’s flow.
Layered Interface
What
Previously, interfaces were centered around the principle of skeumorphism, a
design principle that takes cues from original structures or objects (for example,
digital calendar resembling a paper desk calendar, 3D ‘depth’ on app icons, the
shutter click sound of a mobile phone). Now that flat design has shifted away
from this principle, it opens up the opportunity to create depth in new ways.
Primarily, using layers helps create this feeling of depth and dimension, creating
a more ‘tangible’ experience.
Why
An implication of flat design was the risk of being ‘too flat’ — with so much
subtlety, how can the user navigate and engage, given their conditioning to a 3D
physical (and previously digital) world? Layers provide the ability to show one
item is on top of another by taking full advantage of the z-axis. Layering and
increasing depth helps identify the relationship between different items, and
draws attention to certain items.
Ghost Buttons
What
Ghost buttons are transparent buttons, having no color fill. Their borders are
very thin-lined, and the shape itself is basic — such as a rectangular or squared,
with right angle or softened edges. Text in these buttons are simple and
minimal.
Why
These subtle buttons can grab the user’s attention while still seeming clean,
trendy, and unobtrusive. It also allows for there to be a hierarchy of buttons on
the screen —if there are different buttons on the screen— if there are different
buttons in the same page, they may be designed and placed with prioritisation
(e.g. ghost buttons for optional or intermediate steps). In some cases for
material design, subtle shadows are used to help users perceive that hierarchy.
Gestures
What
With integration of gyroscopes and motion sensors, consumer devices are able
to detect movement. With this, interaction between user and the device moves
beyond the click and extends real life gestures to the screen.
Why
Users are intuitive about gestures. When asked how to delete an item, users tried
to move the item out of the screen regardless of age, sex and gender. Enhances
user experience with less taps and more scrolling, applications become more
interactive by positioning the screen more than just a touch target.
Motion
What
Through software innovation, designers now have the ability to take advantage
of controlling movement with their style sheets. Motion-based design elements
can be seen in a variety of forms, including transitions, animations and even on
texture to mimic 3D depth. The use of motions within the design helps users to
engage with and internalise content, differentiating that element or data/object
from others to highlight its importance.
Why
Motions can draw user’s attention to a specific area — or help to distract from it.
By showing a visual response, it can increase engagement, delighting the user
with a ‘wow’ factor.
Shorter User Flows
What
Instead of navigating through multiple pages to complete a single transaction, a
single screen can include those intermediate steps and reduce the time and
effort spent in app. For example, a form can automatically open or highlight the
subsequent input area when the user completes the previous field.
Why
Mobile users prefer to complete their transactions in an app easily and quickly
while they are on-the-go. Designing the experience of the applications
according to this insight minimizes the effort for the user and can increase the
rate of conversion and/or frequency of app opens.
Design Standards—as Best Practice
What
Design standards is the process of setting the visual language at the beginning
of the project by determining standards such as colors, icons and global
padding.
Why
Setting the standards of the design helps to create consistency within the
application and between different platforms. It minimizes possible errors while
bringing the project into life and makes it easier to make modifications in the
future.
Prototyping—as Best Practice
What
A prototype is a preliminary or early working version of a product. The usage of
prototypes can provide valuable insights into the functionality of design,
highlighting potential changes needed in order to enhance the user experience
without costing a major loss in designer time and effort.
Why
By creating these low-cost ‘experiments’, prototyping can clarify the key
components of the project, including the feature scope and requirements. It
leaves essential time and resources to learn from the experiment and iterate on
the product in an insight-driven process.
etsarkov@gmail.com
+7 916 9505029
skype: etsarkov
fb.com/etsarkov
linkedin.com/in/etsarkov
Evgeny Tsarkov

Mais conteúdo relacionado

Mais procurados

2016 Mobile Design & UX Trends
2016 Mobile Design & UX Trends2016 Mobile Design & UX Trends
2016 Mobile Design & UX TrendsMiva
 
UX/UI Design : Methodology . Artifacts . Acumen
UX/UI Design : Methodology . Artifacts . AcumenUX/UI Design : Methodology . Artifacts . Acumen
UX/UI Design : Methodology . Artifacts . AcumenLehrmach
 
Basic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesBasic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesAvijit Chinara
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for StartupsRichard Fang
 
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of DesignUI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of DesignShiran Sanjeewa
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface DesignKANKIPATI KISHORE
 
Brand Identity in UI/UX Design
Brand Identity in UI/UX DesignBrand Identity in UI/UX Design
Brand Identity in UI/UX DesignAdryan Putra
 
UI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best PracticesUI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best PracticesSamuel Chow
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeMadhuri Garg
 
Flat Design. Microsoft Story
Flat Design. Microsoft StoryFlat Design. Microsoft Story
Flat Design. Microsoft StoryNikita Lukianets
 
UI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILEUI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILEJoseph Ssekono
 
LaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferencesLaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferencesIgor Vivchar
 
IxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsIxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsJayan Narayanan
 
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile App
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile AppAsap casestudy - UX / UI Design for Corporate Instant Messaging Mobile App
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile Appram bal
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiMatin Maleki
 

Mais procurados (19)

2016 Mobile Design & UX Trends
2016 Mobile Design & UX Trends2016 Mobile Design & UX Trends
2016 Mobile Design & UX Trends
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
UX/UI Design : Methodology . Artifacts . Acumen
UX/UI Design : Methodology . Artifacts . AcumenUX/UI Design : Methodology . Artifacts . Acumen
UX/UI Design : Methodology . Artifacts . Acumen
 
Basic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesBasic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best Practices
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of DesignUI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of Design
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
 
Brand Identity in UI/UX Design
Brand Identity in UI/UX DesignBrand Identity in UI/UX Design
Brand Identity in UI/UX Design
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
UI Design 101: Day 02 of 07
UI Design 101: Day 02 of 07UI Design 101: Day 02 of 07
UI Design 101: Day 02 of 07
 
UI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best PracticesUI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best Practices
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
 
Flat Design. Microsoft Story
Flat Design. Microsoft StoryFlat Design. Microsoft Story
Flat Design. Microsoft Story
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 
UI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILEUI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILE
 
LaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferencesLaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferences
 
IxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsIxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital Interactions
 
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile App
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile AppAsap casestudy - UX / UI Design for Corporate Instant Messaging Mobile App
Asap casestudy - UX / UI Design for Corporate Instant Messaging Mobile App
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
 

Destaque

CURRICULUM VITAE FOR INNOCENT KAYUNGUYA
CURRICULUM VITAE FOR INNOCENT KAYUNGUYACURRICULUM VITAE FOR INNOCENT KAYUNGUYA
CURRICULUM VITAE FOR INNOCENT KAYUNGUYAInnocent Kayunguya
 
Delbert Tippey CV Feb 2016
Delbert Tippey CV Feb 2016Delbert Tippey CV Feb 2016
Delbert Tippey CV Feb 2016Delbert Tippey
 
AcademicAttainment-392681
AcademicAttainment-392681AcademicAttainment-392681
AcademicAttainment-392681Brett Byrnes
 
теоретические сведения и типовые задания по разделу «дифференциальное и интег...
теоретические сведения и типовые задания по разделу «дифференциальное и интег...теоретические сведения и типовые задания по разделу «дифференциальное и интег...
теоретические сведения и типовые задания по разделу «дифференциальное и интег...Иван Иванов
 
SP15 CIS 4910 ETRA NUJIMEM PAPER 1
SP15 CIS 4910 ETRA NUJIMEM PAPER 1SP15 CIS 4910 ETRA NUJIMEM PAPER 1
SP15 CIS 4910 ETRA NUJIMEM PAPER 1Vitalis I Nujimem
 
2011 Garden State Council SHRM Conference "Ethics in Human Resource Management"
2011 Garden State Council SHRM Conference "Ethics in Human Resource Management"2011 Garden State Council SHRM Conference "Ethics in Human Resource Management"
2011 Garden State Council SHRM Conference "Ethics in Human Resource Management"Employers Association of New Jersey
 

Destaque (9)

CURRICULUM VITAE FOR INNOCENT KAYUNGUYA
CURRICULUM VITAE FOR INNOCENT KAYUNGUYACURRICULUM VITAE FOR INNOCENT KAYUNGUYA
CURRICULUM VITAE FOR INNOCENT KAYUNGUYA
 
reiki 3
reiki 3reiki 3
reiki 3
 
Delbert Tippey CV Feb 2016
Delbert Tippey CV Feb 2016Delbert Tippey CV Feb 2016
Delbert Tippey CV Feb 2016
 
Stefany
StefanyStefany
Stefany
 
AcademicAttainment-392681
AcademicAttainment-392681AcademicAttainment-392681
AcademicAttainment-392681
 
теоретические сведения и типовые задания по разделу «дифференциальное и интег...
теоретические сведения и типовые задания по разделу «дифференциальное и интег...теоретические сведения и типовые задания по разделу «дифференциальное и интег...
теоретические сведения и типовые задания по разделу «дифференциальное и интег...
 
SP15 CIS 4910 ETRA NUJIMEM PAPER 1
SP15 CIS 4910 ETRA NUJIMEM PAPER 1SP15 CIS 4910 ETRA NUJIMEM PAPER 1
SP15 CIS 4910 ETRA NUJIMEM PAPER 1
 
10
1010
10
 
2011 Garden State Council SHRM Conference "Ethics in Human Resource Management"
2011 Garden State Council SHRM Conference "Ethics in Human Resource Management"2011 Garden State Council SHRM Conference "Ethics in Human Resource Management"
2011 Garden State Council SHRM Conference "Ethics in Human Resource Management"
 

Semelhante a Mobile UI / UX Trends

Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Michelle Reyes
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideBabajide Aroyewun
 
Micro interactions and motion designs
Micro interactions and motion designsMicro interactions and motion designs
Micro interactions and motion designsKiran Challa
 
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
 
Ui ux design trends that will dominate in 2021
Ui ux design trends that will dominate in 2021Ui ux design trends that will dominate in 2021
Ui ux design trends that will dominate in 2021Kelly Ston
 
Web Animation using JavaScript: Develop & Design (Develop and Design)
Web Animation using JavaScript: Develop & Design (Develop and Design)Web Animation using JavaScript: Develop & Design (Develop and Design)
Web Animation using JavaScript: Develop & Design (Develop and Design)Tan Le
 
GUI & Modern UI Design
GUI & Modern UI DesignGUI & Modern UI Design
GUI & Modern UI DesignMalik Zahid
 
new UID module one(1) in the ppt format.
new UID module one(1) in the ppt format.new UID module one(1) in the ppt format.
new UID module one(1) in the ppt format.abhishek106899
 
Designing With User In Mind
Designing With User In MindDesigning With User In Mind
Designing With User In Mindintuitiv.de
 
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design 13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design BugRaptors
 
Technical Report.docx
Technical Report.docxTechnical Report.docx
Technical Report.docxAbiola57
 
Insight into Application Design & Oracle Fusion
Insight into Application Design & Oracle Fusion Insight into Application Design & Oracle Fusion
Insight into Application Design & Oracle Fusion Zabisco Digital
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designMoodLabs
 
Top 10 UI Visual Design Techniques You Should Consider to Master - Copy.pdf
Top 10 UI Visual Design Techniques You Should Consider to Master - Copy.pdfTop 10 UI Visual Design Techniques You Should Consider to Master - Copy.pdf
Top 10 UI Visual Design Techniques You Should Consider to Master - Copy.pdfSparity1
 
User Experience Matters How to Craft Intuitive Mobile App Designs
User Experience Matters How to Craft Intuitive Mobile App DesignsUser Experience Matters How to Craft Intuitive Mobile App Designs
User Experience Matters How to Craft Intuitive Mobile App DesignsBitCot
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website designRavi Bhadauria
 
UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?DariaPersell
 

Semelhante a Mobile UI / UX Trends (20)

Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI
 
UI.docx
UI.docxUI.docx
UI.docx
 
UI.docx
UI.docxUI.docx
UI.docx
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
 
Micro interactions and motion designs
Micro interactions and motion designsMicro interactions and motion designs
Micro interactions and motion designs
 
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
 
Ui ux design trends that will dominate in 2021
Ui ux design trends that will dominate in 2021Ui ux design trends that will dominate in 2021
Ui ux design trends that will dominate in 2021
 
Web Animation using JavaScript: Develop & Design (Develop and Design)
Web Animation using JavaScript: Develop & Design (Develop and Design)Web Animation using JavaScript: Develop & Design (Develop and Design)
Web Animation using JavaScript: Develop & Design (Develop and Design)
 
GUI & Modern UI Design
GUI & Modern UI DesignGUI & Modern UI Design
GUI & Modern UI Design
 
new UID module one(1) in the ppt format.
new UID module one(1) in the ppt format.new UID module one(1) in the ppt format.
new UID module one(1) in the ppt format.
 
Ux design process
Ux design processUx design process
Ux design process
 
Designing With User In Mind
Designing With User In MindDesigning With User In Mind
Designing With User In Mind
 
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design 13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
13 Things To Keep In Mind For Enhanced Mobile App UI/UX Design
 
Technical Report.docx
Technical Report.docxTechnical Report.docx
Technical Report.docx
 
Insight into Application Design & Oracle Fusion
Insight into Application Design & Oracle Fusion Insight into Application Design & Oracle Fusion
Insight into Application Design & Oracle Fusion
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through design
 
Top 10 UI Visual Design Techniques You Should Consider to Master - Copy.pdf
Top 10 UI Visual Design Techniques You Should Consider to Master - Copy.pdfTop 10 UI Visual Design Techniques You Should Consider to Master - Copy.pdf
Top 10 UI Visual Design Techniques You Should Consider to Master - Copy.pdf
 
User Experience Matters How to Craft Intuitive Mobile App Designs
User Experience Matters How to Craft Intuitive Mobile App DesignsUser Experience Matters How to Craft Intuitive Mobile App Designs
User Experience Matters How to Craft Intuitive Mobile App Designs
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 
UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?
 

Mais de Evgeny Tsarkov

Тренды в мобильных UX / UI
Тренды в мобильных UX / UIТренды в мобильных UX / UI
Тренды в мобильных UX / UIEvgeny Tsarkov
 
New CMO Guide - Handbook for Marketing Leaders
New CMO Guide - Handbook for Marketing LeadersNew CMO Guide - Handbook for Marketing Leaders
New CMO Guide - Handbook for Marketing LeadersEvgeny Tsarkov
 
Guide to Predictive Lead Scoring
Guide to Predictive Lead ScoringGuide to Predictive Lead Scoring
Guide to Predictive Lead ScoringEvgeny Tsarkov
 
How to 10x Your Content Marketing Team's Productivity
How to 10x Your Content Marketing Team's ProductivityHow to 10x Your Content Marketing Team's Productivity
How to 10x Your Content Marketing Team's ProductivityEvgeny Tsarkov
 
LinkedIn Tips for the Social Marketer Cheatsheet
LinkedIn Tips for the Social Marketer CheatsheetLinkedIn Tips for the Social Marketer Cheatsheet
LinkedIn Tips for the Social Marketer CheatsheetEvgeny Tsarkov
 
Decoupling Global Digital Marketing Services
Decoupling Global Digital Marketing ServicesDecoupling Global Digital Marketing Services
Decoupling Global Digital Marketing ServicesEvgeny Tsarkov
 
Winning at Social - 4 Steps to Enhance Your Social Media Strategy
Winning at Social - 4 Steps to Enhance Your Social Media StrategyWinning at Social - 4 Steps to Enhance Your Social Media Strategy
Winning at Social - 4 Steps to Enhance Your Social Media StrategyEvgeny Tsarkov
 
Data-Driven Content Marketing
Data-Driven Content MarketingData-Driven Content Marketing
Data-Driven Content MarketingEvgeny Tsarkov
 
Guide to Influencer Marketing
Guide to Influencer MarketingGuide to Influencer Marketing
Guide to Influencer MarketingEvgeny Tsarkov
 
Ultimate Guide to the New Buyers Journey
Ultimate Guide to the New Buyers JourneyUltimate Guide to the New Buyers Journey
Ultimate Guide to the New Buyers JourneyEvgeny Tsarkov
 
The 2015 App Marketing Guide
The 2015 App Marketing GuideThe 2015 App Marketing Guide
The 2015 App Marketing GuideEvgeny Tsarkov
 
Millennial Mind - How Content Drives Brand Loyalty
Millennial Mind - How Content Drives Brand LoyaltyMillennial Mind - How Content Drives Brand Loyalty
Millennial Mind - How Content Drives Brand LoyaltyEvgeny Tsarkov
 
Listen Publish Analyze - Intelligent Guide to Social Media Management Platforms
Listen Publish Analyze - Intelligent Guide to Social Media Management PlatformsListen Publish Analyze - Intelligent Guide to Social Media Management Platforms
Listen Publish Analyze - Intelligent Guide to Social Media Management PlatformsEvgeny Tsarkov
 
Ultimate Guide to App User Engagement
Ultimate Guide to App User EngagementUltimate Guide to App User Engagement
Ultimate Guide to App User EngagementEvgeny Tsarkov
 
Ultimate Guide to Moblie App A/B Testing
Ultimate Guide to Moblie App A/B TestingUltimate Guide to Moblie App A/B Testing
Ultimate Guide to Moblie App A/B TestingEvgeny Tsarkov
 
52 Things You Didn’t Know About Buzzfeed
52 Things You Didn’t Know About Buzzfeed52 Things You Didn’t Know About Buzzfeed
52 Things You Didn’t Know About BuzzfeedEvgeny Tsarkov
 
10 Ways to Better Engage App Users in 10 Seconds
10 Ways to Better Engage App Users in 10 Seconds10 Ways to Better Engage App Users in 10 Seconds
10 Ways to Better Engage App Users in 10 SecondsEvgeny Tsarkov
 
Measuring and Allocating MarCom Budgets
Measuring and Allocating MarCom BudgetsMeasuring and Allocating MarCom Budgets
Measuring and Allocating MarCom BudgetsEvgeny Tsarkov
 

Mais de Evgeny Tsarkov (20)

Тренды в мобильных UX / UI
Тренды в мобильных UX / UIТренды в мобильных UX / UI
Тренды в мобильных UX / UI
 
New CMO Guide - Handbook for Marketing Leaders
New CMO Guide - Handbook for Marketing LeadersNew CMO Guide - Handbook for Marketing Leaders
New CMO Guide - Handbook for Marketing Leaders
 
Guide to Predictive Lead Scoring
Guide to Predictive Lead ScoringGuide to Predictive Lead Scoring
Guide to Predictive Lead Scoring
 
How to 10x Your Content Marketing Team's Productivity
How to 10x Your Content Marketing Team's ProductivityHow to 10x Your Content Marketing Team's Productivity
How to 10x Your Content Marketing Team's Productivity
 
LinkedIn Tips for the Social Marketer Cheatsheet
LinkedIn Tips for the Social Marketer CheatsheetLinkedIn Tips for the Social Marketer Cheatsheet
LinkedIn Tips for the Social Marketer Cheatsheet
 
Decoupling Global Digital Marketing Services
Decoupling Global Digital Marketing ServicesDecoupling Global Digital Marketing Services
Decoupling Global Digital Marketing Services
 
Winning at Social - 4 Steps to Enhance Your Social Media Strategy
Winning at Social - 4 Steps to Enhance Your Social Media StrategyWinning at Social - 4 Steps to Enhance Your Social Media Strategy
Winning at Social - 4 Steps to Enhance Your Social Media Strategy
 
Data-Driven Content Marketing
Data-Driven Content MarketingData-Driven Content Marketing
Data-Driven Content Marketing
 
Guide to Influencer Marketing
Guide to Influencer MarketingGuide to Influencer Marketing
Guide to Influencer Marketing
 
Ultimate Guide to the New Buyers Journey
Ultimate Guide to the New Buyers JourneyUltimate Guide to the New Buyers Journey
Ultimate Guide to the New Buyers Journey
 
The 2015 App Marketing Guide
The 2015 App Marketing GuideThe 2015 App Marketing Guide
The 2015 App Marketing Guide
 
Millennial Mind - How Content Drives Brand Loyalty
Millennial Mind - How Content Drives Brand LoyaltyMillennial Mind - How Content Drives Brand Loyalty
Millennial Mind - How Content Drives Brand Loyalty
 
Listen Publish Analyze - Intelligent Guide to Social Media Management Platforms
Listen Publish Analyze - Intelligent Guide to Social Media Management PlatformsListen Publish Analyze - Intelligent Guide to Social Media Management Platforms
Listen Publish Analyze - Intelligent Guide to Social Media Management Platforms
 
Ultimate Guide to App User Engagement
Ultimate Guide to App User EngagementUltimate Guide to App User Engagement
Ultimate Guide to App User Engagement
 
Ultimate Guide to Moblie App A/B Testing
Ultimate Guide to Moblie App A/B TestingUltimate Guide to Moblie App A/B Testing
Ultimate Guide to Moblie App A/B Testing
 
Future of Advertising
Future of AdvertisingFuture of Advertising
Future of Advertising
 
52 Things You Didn’t Know About Buzzfeed
52 Things You Didn’t Know About Buzzfeed52 Things You Didn’t Know About Buzzfeed
52 Things You Didn’t Know About Buzzfeed
 
Digital StatShot
Digital StatShotDigital StatShot
Digital StatShot
 
10 Ways to Better Engage App Users in 10 Seconds
10 Ways to Better Engage App Users in 10 Seconds10 Ways to Better Engage App Users in 10 Seconds
10 Ways to Better Engage App Users in 10 Seconds
 
Measuring and Allocating MarCom Budgets
Measuring and Allocating MarCom BudgetsMeasuring and Allocating MarCom Budgets
Measuring and Allocating MarCom Budgets
 

Último

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 

Último (19)

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 

Mobile UI / UX Trends

  • 2. Whether on an app screen, a web browser, or a wearable watch face, design is one of the most important drivers of consumer engagement. From flat design to Material design, I analysed what trends have evolved, and share a few of my insights with you—what are these trends? Why are they beneficial to the user? And how are they created? Let’s look at how flat design and Material design came into play and evolved to the trends we see today. Content © Onur Oral (https://medium.com/@oralonur)
  • 4. What Instead of incorporating a wide array of gradients and shadows, shifting to a ‘flat design’ creates a lighter aesthetic in the app. This means using negative space — instead of gradients, shadows, etc.— can create a simpler interface, focusing only on having core information and removing design elements that are not productive as itself and to the user flow. Why Lighter design removes distraction to help guide the user’s eye to meaningful content on the screen, enabling easier navigation while also providing a sleek, modern aesthetic to the brand itself.
  • 5. One Typeface To Rule Them All
  • 6. What Reducing the number of fonts on a screen can reveal the power of typography. Instead of using different typeface and leveraging different characteristics —e.g. italics, bold, semi-bold— and different font sizes can better differentiate discrete areas of content. Why Embracing a singular typeface across an entire app drives consistency not only for branding, but also across channels —e.g. app, mobile site, website— thus optimising the mobile elements across the omnichannel experience. Also, users prefer the simplicity of having one typeface to scroll through in identifying relevant content.
  • 7. Spaces & Blocks - No More Lines
  • 8. What While previously lines and dividers were used to clearly delineate specific sections or categories within a screen, adding these elements can result in dense, crowded interfaces. Straying away from lines, interfaces which leverage clustered blocks of content separated by spaces have the advantage of freeing up that space and establishing a clean look. Why The removal of explicit lines and dividers provides a modern look that focuses on functionality; for example, images and/or fonts can be bigger, providing visual clarity and improved ease of use. Leveraging space instead of drawing lines helps to define different sections in a non-obtrusive manner.
  • 10. What As users’ preferences shift toward a simpler interface, usage of big fonts and striking colors get more common to make a certain data the center of focus. Highlighted data can vary according to target customers. Why Leveraging increased font size and/or a pop of color draws the users’ attention to a particular area of the screen — without an obtrusive, heavy-handed push or command to do so. As a result, users can access information more quickly, providing an easier navigation and information-gathering experience.
  • 12. What Micro-interactions are small visual enhancements (for example — an animation, a sound etc.) that occur around a use case. These scenarios may include completing a transaction, favoriting an item, or prompting a pop-up message. These interactions are subtle, but they differentiate the product by pointing to the attention the right element. Why These micro-interactions can be leveraged as a signal to prompt the user while accomplishing a task — e.g. adjusting a setting— creating a small piece of content like a pop-up message. Apps which have well-done micro-interactions considered easier, more fun, and more engaging by their users.
  • 14. What The usage of simpler color schemes became a trend after the introduction of flat design in 2013, which embraces clarity and simplicity. As a result, designers and users alike prefer the usage of smaller number of colors, aiming for a clean look. Why Usage of color is essential in creating a certain mood, guiding the user’s area of focus, and communicating a brand. By using fewer colors, the brand identity can be reflected more clearly. In addition, users may prefer this aesthetic as it removes the distraction that too many colors can cause, and it better highlights key features, improving navigation through the app’s flow.
  • 16. What Previously, interfaces were centered around the principle of skeumorphism, a design principle that takes cues from original structures or objects (for example, digital calendar resembling a paper desk calendar, 3D ‘depth’ on app icons, the shutter click sound of a mobile phone). Now that flat design has shifted away from this principle, it opens up the opportunity to create depth in new ways. Primarily, using layers helps create this feeling of depth and dimension, creating a more ‘tangible’ experience. Why An implication of flat design was the risk of being ‘too flat’ — with so much subtlety, how can the user navigate and engage, given their conditioning to a 3D physical (and previously digital) world? Layers provide the ability to show one item is on top of another by taking full advantage of the z-axis. Layering and increasing depth helps identify the relationship between different items, and draws attention to certain items.
  • 18. What Ghost buttons are transparent buttons, having no color fill. Their borders are very thin-lined, and the shape itself is basic — such as a rectangular or squared, with right angle or softened edges. Text in these buttons are simple and minimal. Why These subtle buttons can grab the user’s attention while still seeming clean, trendy, and unobtrusive. It also allows for there to be a hierarchy of buttons on the screen —if there are different buttons on the screen— if there are different buttons in the same page, they may be designed and placed with prioritisation (e.g. ghost buttons for optional or intermediate steps). In some cases for material design, subtle shadows are used to help users perceive that hierarchy.
  • 20. What With integration of gyroscopes and motion sensors, consumer devices are able to detect movement. With this, interaction between user and the device moves beyond the click and extends real life gestures to the screen. Why Users are intuitive about gestures. When asked how to delete an item, users tried to move the item out of the screen regardless of age, sex and gender. Enhances user experience with less taps and more scrolling, applications become more interactive by positioning the screen more than just a touch target.
  • 22. What Through software innovation, designers now have the ability to take advantage of controlling movement with their style sheets. Motion-based design elements can be seen in a variety of forms, including transitions, animations and even on texture to mimic 3D depth. The use of motions within the design helps users to engage with and internalise content, differentiating that element or data/object from others to highlight its importance. Why Motions can draw user’s attention to a specific area — or help to distract from it. By showing a visual response, it can increase engagement, delighting the user with a ‘wow’ factor.
  • 24. What Instead of navigating through multiple pages to complete a single transaction, a single screen can include those intermediate steps and reduce the time and effort spent in app. For example, a form can automatically open or highlight the subsequent input area when the user completes the previous field. Why Mobile users prefer to complete their transactions in an app easily and quickly while they are on-the-go. Designing the experience of the applications according to this insight minimizes the effort for the user and can increase the rate of conversion and/or frequency of app opens.
  • 26. What Design standards is the process of setting the visual language at the beginning of the project by determining standards such as colors, icons and global padding. Why Setting the standards of the design helps to create consistency within the application and between different platforms. It minimizes possible errors while bringing the project into life and makes it easier to make modifications in the future.
  • 28. What A prototype is a preliminary or early working version of a product. The usage of prototypes can provide valuable insights into the functionality of design, highlighting potential changes needed in order to enhance the user experience without costing a major loss in designer time and effort. Why By creating these low-cost ‘experiments’, prototyping can clarify the key components of the project, including the feature scope and requirements. It leaves essential time and resources to learn from the experiment and iterate on the product in an insight-driven process.
  • 29. etsarkov@gmail.com +7 916 9505029 skype: etsarkov fb.com/etsarkov linkedin.com/in/etsarkov Evgeny Tsarkov