Submit Search
Upload
Web UI Best Practices.ppt
•
Download as PPTX, PDF
•
3 likes
•
1,688 views
Hoàng Nguyễn Mạnh
Follow
Report
Share
Report
Share
1 of 55
Download now
Recommended
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
Roshan Karunarathna
UI/UX Fundamentals
UI/UX Fundamentals
Dijup Tuladhar
Mobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best Practices
OXD
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challenge
Whitney Quesenbery
UX Strategy Part-1
UX Strategy Part-1
Varun Jhariya
UI UX introduction
UI UX introduction
Ismail Norri
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
Mightybytes
The Importance of UX
The Importance of UX
Bart Van Hecke
Recommended
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
Roshan Karunarathna
UI/UX Fundamentals
UI/UX Fundamentals
Dijup Tuladhar
Mobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best Practices
OXD
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challenge
Whitney Quesenbery
UX Strategy Part-1
UX Strategy Part-1
Varun Jhariya
UI UX introduction
UI UX introduction
Ismail Norri
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
Mightybytes
The Importance of UX
The Importance of UX
Bart Van Hecke
Introduction to Information Architecture
Introduction to Information Architecture
Mike Crabb
Good UX Bad UX
Good UX Bad UX
Michał Aleksander
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
Jeremy Robinson
Heuristic Usability Evaluation
Heuristic Usability Evaluation
Sokteang Ngov
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
Koombea
Introduction to UX Design
Introduction to UX Design
Bill Tribble
Design Principles
Design Principles
David Gelb
UX Explained
UX Explained
Mind Over Machines
Introduction to UI UX
Introduction to UI UX
GDSCUniversitasMatan
UX/UI Design 101
UX/UI Design 101
Jasmine Phan
What is a User Experience?
What is a User Experience?
Dotinum
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Brad Frost
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
CHI UX Indonesia
UI-UX Services | Web Designing Services
UI-UX Services | Web Designing Services
eLuminous Technologies Pvt. Ltd.
UX design
UX design
Tanay Kumar
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
GDGKuwaitGoogleDevel
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
Joan Lumanauw
Introduction to Information Architecture & Design - 2/14/15
Introduction to Information Architecture & Design - 2/14/15
Robert Stribley
UX/UI Introduction
UX/UI Introduction
Shrutee Aneja
Heuristic ux-evaluation
Heuristic ux-evaluation
Steffen Kastner
Agile BDD
Agile BDD
Scrum Breakfast Vietnam
[DevDay 2017] Lean Startup - Design Thinking - Speaker: Sebastian Sussmann - ...
[DevDay 2017] Lean Startup - Design Thinking - Speaker: Sebastian Sussmann - ...
DevDay.org
More Related Content
What's hot
Introduction to Information Architecture
Introduction to Information Architecture
Mike Crabb
Good UX Bad UX
Good UX Bad UX
Michał Aleksander
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
Jeremy Robinson
Heuristic Usability Evaluation
Heuristic Usability Evaluation
Sokteang Ngov
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
Koombea
Introduction to UX Design
Introduction to UX Design
Bill Tribble
Design Principles
Design Principles
David Gelb
UX Explained
UX Explained
Mind Over Machines
Introduction to UI UX
Introduction to UI UX
GDSCUniversitasMatan
UX/UI Design 101
UX/UI Design 101
Jasmine Phan
What is a User Experience?
What is a User Experience?
Dotinum
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Brad Frost
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
CHI UX Indonesia
UI-UX Services | Web Designing Services
UI-UX Services | Web Designing Services
eLuminous Technologies Pvt. Ltd.
UX design
UX design
Tanay Kumar
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
GDGKuwaitGoogleDevel
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
Joan Lumanauw
Introduction to Information Architecture & Design - 2/14/15
Introduction to Information Architecture & Design - 2/14/15
Robert Stribley
UX/UI Introduction
UX/UI Introduction
Shrutee Aneja
Heuristic ux-evaluation
Heuristic ux-evaluation
Steffen Kastner
What's hot
(20)
Introduction to Information Architecture
Introduction to Information Architecture
Good UX Bad UX
Good UX Bad UX
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
Heuristic Usability Evaluation
Heuristic Usability Evaluation
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
Introduction to UX Design
Introduction to UX Design
Design Principles
Design Principles
UX Explained
UX Explained
Introduction to UI UX
Introduction to UI UX
UX/UI Design 101
UX/UI Design 101
What is a User Experience?
What is a User Experience?
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
UI-UX Services | Web Designing Services
UI-UX Services | Web Designing Services
UX design
UX design
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
Introduction to Information Architecture & Design - 2/14/15
Introduction to Information Architecture & Design - 2/14/15
UX/UI Introduction
UX/UI Introduction
Heuristic ux-evaluation
Heuristic ux-evaluation
Similar to Web UI Best Practices.ppt
Agile BDD
Agile BDD
Scrum Breakfast Vietnam
[DevDay 2017] Lean Startup - Design Thinking - Speaker: Sebastian Sussmann - ...
[DevDay 2017] Lean Startup - Design Thinking - Speaker: Sebastian Sussmann - ...
DevDay.org
BDD in Automation Testing
BDD in Automation Testing
Scrum Breakfast Vietnam
[DevDay 2016] Web Components, is it the future of Web Development? Speaker: V...
[DevDay 2016] Web Components, is it the future of Web Development? Speaker: V...
DevDay.org
Creating Modern UI PowerBuilder Framework using native objects
Creating Modern UI PowerBuilder Framework using native objects
zulmach .
User Experience Documentation - Lime.com
User Experience Documentation - Lime.com
Mark Waldo
IABC East Texas: Websites on a Shoestring Budget
IABC East Texas: Websites on a Shoestring Budget
Whitley Crawford
IA workshop
IA workshop
Peter van Lanschot
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & Planning
Paul Crimi
[DevDay 2016] Secret tools for a Scrum Team - Speaker: Sebastian Sussman – CI...
[DevDay 2016] Secret tools for a Scrum Team - Speaker: Sebastian Sussman – CI...
DevDay.org
Salesforce Admin - Barcelona - Bloobirds event
Salesforce Admin - Barcelona - Bloobirds event
animuscrm
Design Presentation.pdf
Design Presentation.pdf
VamsiYeduri
[DevDay 2016] The toolkit for an amazing product - Speaker: Sebastian Sussman...
[DevDay 2016] The toolkit for an amazing product - Speaker: Sebastian Sussman...
DevDay.org
[Da Nang Scrum Breakfast] Angular Tour
[Da Nang Scrum Breakfast] Angular Tour
Scrum Breakfast Vietnam
Learn How To Implement Mobile First Into Your Website Dominate19 - V2
Learn How To Implement Mobile First Into Your Website Dominate19 - V2
Exposure Ninja
MOB PROGRAMMING
MOB PROGRAMMING
Scrum Breakfast Vietnam
BYOD: Add Affordable 3D Content to Your eLearning
BYOD: Add Affordable 3D Content to Your eLearning
Michael Sheyahshe
Getting started with #Noestimates
Getting started with #Noestimates
Scrum Breakfast Vietnam
Chrome extensions
Chrome extensions
Ahmad Tahhan
Web animation, interaction and user experience
Web animation, interaction and user experience
saya4
Similar to Web UI Best Practices.ppt
(20)
Agile BDD
Agile BDD
[DevDay 2017] Lean Startup - Design Thinking - Speaker: Sebastian Sussmann - ...
[DevDay 2017] Lean Startup - Design Thinking - Speaker: Sebastian Sussmann - ...
BDD in Automation Testing
BDD in Automation Testing
[DevDay 2016] Web Components, is it the future of Web Development? Speaker: V...
[DevDay 2016] Web Components, is it the future of Web Development? Speaker: V...
Creating Modern UI PowerBuilder Framework using native objects
Creating Modern UI PowerBuilder Framework using native objects
User Experience Documentation - Lime.com
User Experience Documentation - Lime.com
IABC East Texas: Websites on a Shoestring Budget
IABC East Texas: Websites on a Shoestring Budget
IA workshop
IA workshop
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & Planning
[DevDay 2016] Secret tools for a Scrum Team - Speaker: Sebastian Sussman – CI...
[DevDay 2016] Secret tools for a Scrum Team - Speaker: Sebastian Sussman – CI...
Salesforce Admin - Barcelona - Bloobirds event
Salesforce Admin - Barcelona - Bloobirds event
Design Presentation.pdf
Design Presentation.pdf
[DevDay 2016] The toolkit for an amazing product - Speaker: Sebastian Sussman...
[DevDay 2016] The toolkit for an amazing product - Speaker: Sebastian Sussman...
[Da Nang Scrum Breakfast] Angular Tour
[Da Nang Scrum Breakfast] Angular Tour
Learn How To Implement Mobile First Into Your Website Dominate19 - V2
Learn How To Implement Mobile First Into Your Website Dominate19 - V2
MOB PROGRAMMING
MOB PROGRAMMING
BYOD: Add Affordable 3D Content to Your eLearning
BYOD: Add Affordable 3D Content to Your eLearning
Getting started with #Noestimates
Getting started with #Noestimates
Chrome extensions
Chrome extensions
Web animation, interaction and user experience
Web animation, interaction and user experience
Web UI Best Practices.ppt
1.
www.axon.vnfb.com/AxonActiveVietNam Golden Team Web UI
Design Best Practices
2.
www.axon.vnfb.com/AxonActiveVietNam Agenda ● Introduction ● Best
practices ○ Layout ○ Getting input ○ Navigation ○ Data & Content Management ○ Light, Color and Contrast ● How to Choose and Apply ● Q&A
3.
www.axon.vnfb.com/AxonActiveVietNam Introduction
4.
www.axon.vnfb.com/AxonActiveVietNam UI and UX UX:
Design the Experience - How ... feel ... - Emotional UI: Design the Product - What … look ... - Technical
5.
www.axon.vnfb.com/AxonActiveVietNam There is a
saying ...
6.
www.axon.vnfb.com/AxonActiveVietNam Put everything together
7.
www.axon.vnfb.com/AxonActiveVietNam Patterns of Layout ●
Two of the common layouts are: ○ F-pattern layout ○ Z-pattern layout ● What? How? Why?
8.
www.axon.vnfb.com/AxonActiveVietNam F-Pattern Layout 21 3 4 5
6 7 8 9
9.
www.axon.vnfb.com/AxonActiveVietNam 1 2 3 4
10.
www.axon.vnfb.com/AxonActiveVietNam F-Pattern Layout ● Why
Is This Pattern Effective? ○ It follows users' natural sight. ○ Conversely, It promotes the user’s sight to follow naturally.
11.
www.axon.vnfb.com/AxonActiveVietNam Z-Pattern Layout 1 2 3
4
12.
www.axon.vnfb.com/AxonActiveVietNam 1 2 3 4
13.
www.axon.vnfb.com/AxonActiveVietNam ● Why Is
This Pattern Effective? ○ It follows users' natural sight. ○ It adheres the 4 of principles of an effective design: 1. Branding 2. Visual Hierarchy 3. Structure 4. A Call to Action Z-Pattern Layout
14.
www.axon.vnfb.com/AxonActiveVietNam Getting Input
15.
www.axon.vnfb.com/AxonActiveVietNam Inputs
16.
www.axon.vnfb.com/AxonActiveVietNam Inputs I need hints,
hints, hints! I want to fix my mistake now! I hate complication!
17.
www.axon.vnfb.com/AxonActiveVietNam Users want to
know exactly what data to enter.
18.
www.axon.vnfb.com/AxonActiveVietNam Users want immediate feedback
about entered data.
19.
www.axon.vnfb.com/AxonActiveVietNam Users want to
enter data without worrying about the formats.
20.
www.axon.vnfb.com/AxonActiveVietNam Inputs Hints !!! Immediate feedback
!!! Smart formats !!!
21.
www.axon.vnfb.com/AxonActiveVietNam Navigation
22.
www.axon.vnfb.com/AxonActiveVietNam Find alternative website
23.
www.axon.vnfb.com/AxonActiveVietNam Recommendations & Related Content
24.
www.axon.vnfb.com/AxonActiveVietNam Recommendations & Related Content
25.
www.axon.vnfb.com/AxonActiveVietNam
26.
www.axon.vnfb.com/AxonActiveVietNam Infinite Scroll
27.
www.axon.vnfb.com/AxonActiveVietNam Infinite Scroll
28.
www.axon.vnfb.com/AxonActiveVietNam
29.
www.axon.vnfb.com/AxonActiveVietNam
30.
www.axon.vnfb.com/AxonActiveVietNam “Sticky” Fixed Navigation
31.
www.axon.vnfb.com/AxonActiveVietNam Data and Content Management
32.
www.axon.vnfb.com/AxonActiveVietNam Data and Content Management ●
Content & Data Interaction ● Autosave ● Quick Search Box ● Hidden Information ● Media ● Empty States
33.
www.axon.vnfb.com/AxonActiveVietNam Content & Data
Interaction Hover Click Drag & Drop
34.
www.axon.vnfb.com/AxonActiveVietNam Content & Data
Interaction
35.
www.axon.vnfb.com/AxonActiveVietNam Autosave The user wants
to protect their data and continue working without having to remember to do so.
36.
www.axon.vnfb.com/AxonActiveVietNam Quick Search Box User
remember what he looking for, but he want to reduce manipulations.
37.
www.axon.vnfb.com/AxonActiveVietNam Hidden Information The user
wants quick access secondary information that’s not usually necessary to show.
38.
www.axon.vnfb.com/AxonActiveVietNam Media Flickr Photo Viewer Lightbox
pops up, background grays out Thumb image slider Full screen mode Back and forward navigation button
39.
www.axon.vnfb.com/AxonActiveVietNam Empty States The user
needs to know why a section of the application is empty and what to do next.
40.
www.axon.vnfb.com/AxonActiveVietNam Light, Color and Contrast
41.
www.axon.vnfb.com/AxonActiveVietNam Light Create depth
42.
www.axon.vnfb.com/AxonActiveVietNam Light Lighter shades appear
closer to us and darker shades further away. Why?
43.
www.axon.vnfb.com/AxonActiveVietNam Color Warmer colors expand
when placed next to colder colors.
44.
www.axon.vnfb.com/AxonActiveVietNam Contrast Higher contrast items
stand out — they catch your eye.
45.
www.axon.vnfb.com/AxonActiveVietNam
46.
www.axon.vnfb.com/AxonActiveVietNam How to Choose and
Apply
47.
www.axon.vnfb.com/AxonActiveVietNam 4 steps Define problem Find examples Choose a good example Apply the solution
48.
www.axon.vnfb.com/AxonActiveVietNam S1: Define problem #User
Story 6969 As a user, I want to rate a video and overview about all rating of this video Then I can contribute to the site, and help build a great community
49.
www.axon.vnfb.com/AxonActiveVietNam S2: Find examples
50.
www.axon.vnfb.com/AxonActiveVietNam S3: Choose a
good example
51.
www.axon.vnfb.com/AxonActiveVietNam S4: Apply the
solution ● Average of rating ● Clickable items
52.
www.axon.vnfb.com/AxonActiveVietNam 4 steps Define problem Find examples Choose a good example Apply the solution
53.
www.axon.vnfb.com/AxonActiveVietNam
54.
www.axon.vnfb.com/AxonActiveVietNam Reference ● http://www.uxpin.com/web-ui-design-best-practices.html ● http://www.uxpin.com/web-design-patterns.html ●
http://www.fastcodesign.com/3032719/ui-ux-who-does-what-a-designers- guide-to-the-tech-industry ● http://thecdm.ca/news/ux-vs-ui ● http://www.vanseodesign.com/web-design/3-design-layouts/ ● http://www.uxpin.com/visual-web-ui-design-colors-space-contrast.html
55.
www.axon.vnfb.com/AxonActiveVietNam
Download now