The Complete Digital Marketing Course

Session – 2 (20 Mar 2016)

___________________________________________________________________www.LearnxLab.com

______________________________________________________________________________

___________________________________________________________________

______________________________________________________________________________

___________________________________________________________________

What’s UX?

The cultivation of customer satisfaction and loyalty by optimally developing the usability and positive emotional response a visitor

experiences with your site. – Tom Ewer

What’s UI?

The user interface (UI) is everything designed into an information device with which a human being may interact -- including display screen, keyboard, mouse, light pen, the appearance of a desktop, illuminated characters, help messages, and how an application program or a Web site invites interaction and responds to it. – TechTarget.com

User experience includes all the users' emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviours and accomplishments that occur before, during and after use.

______________________________________________________________________________

___________________________________________________________________

___________________________________________________________________

___________________________________________________________________

___________________________________________________________________

______________________________________________________________________________

___________________________________________________________________

______________________________________________________________________________

___________________________________________________________________

UI:

Drop-down Menu

Form Fields

CTAs

Animations

Button Styling

Pagination

Icons

Share buttons

UX:

Persona Creation

User Study

Wireframes

Heuristic Analysis

Journey Flow

Prototypes

______________________________________________________________________________

___________________________________________________________________

UI Design Principles

Consistent: design and behavior across the site should be consistentIntuitive: it should work the way the user rationally expects it to and they shouldn’t undergo a learning curve

Responsive: design and layout should be flexible across various devicesFamiliar: design changes and behavior shouldn’t be too drastic or unfamiliar to the user

Clean: an organized, flat and simple design and function

Elegant: an aesthetically pleasing design and layout

Efficient: efficiency is key particularly if a user needs to spend a lot of time on your site

Content-focused: content, text or visual, is powerful and adds value

______________________________________________________________________________

___________________________________________________________________

UX/UI Trends for 2016

______________________________________________________________________________

___________________________________________________________________

Responsive Design….is a Must!

______________________________________________________________________________

___________________________________________________________________

Parallax Scrolling

Parallax web design is a technique that allows components of a web page to move at varying speeds when a user scrolls.Examples??

______________________________________________________________________________

___________________________________________________________________

Flat Design

Flat design is a minimalistic design approach that emphasizes usability. It features clean, open space, crisp edges, bright colours and two-dimensional/flat illustrations.

______________________________________________________________________________

___________________________________________________________________

Material Design

______________________________________________________________________________

___________________________________________________________________

Differences between Flat & Material Design

Material design is an evolution of flat design.

Flat design is overall easier to develop and faster to load than material design.

Flat design has no skeuomorphisms while material design utilizes them subtly.

Both flat and material are minimalist approaches.

______________________________________________________________________________

___________________________________________________________________

Zero UI

______________________________________________________________________________

___________________________________________________________________

HTML 5 & CSS 3

______________________________________________________________________________

___________________________________________________________________