This document provides an introduction to user experience (UX) design. It defines UX as involving a person's behaviors, attitudes, and emotions about using a product, in contrast to a user interface (UI) which is the means a person uses to control software or hardware. The history of UX/UI design is explored from the 1900s to the present. Current trends discussed include responsive web design, flat design, parallax effects, full-screen photo pages, and advanced scrolling. The UX design process and common tools used such as prototypes, mockups, and usability testing are also outlined.
2. UI or UX?
Definition
A user interface, also called a "UI" or
simply an "interface," is the means in
which a person controls a software
application or hardware device.
User experience (UX) involves a
person's behaviors, attitudes, and
emotions about using a particular
product, system or service.
GUI – Graphic User Interface
3. The Difference
UI or UX?
User Interface design is the part of the product
that faces the user when he looks at the site,
and the User Experience is how they feel when
they look at the site.
4. The History
UI / UX Design
Taylorism,
Machine Age
Personal
Computing
Mobile and Tablet
1900s
1980s
2000s
1940s
1990s
Toyota Production
System
The Web
12. Responsive Web Design (RWD)
The Present - 2013
RWD allows users to better read and
experience the web from their laptop or
desktop, as well as, tablet and cell phone.
Responsive web templates are designed
to look great on a variety of different
screen sizes, so anyone can view your site
in a crisp and clear manner where ever
they go.
16. Parallax
The Present - 2013
The Parallax web design trend has grown in popularity
because it creates an illusion of depth (or a faux-3D
effect) as you scroll through the webpage. Various
images on the site will move at different speeds or
change in size or at dimension to the site.
18. Full-Screen Photo Launch Pages
The Present - 2013
If you want to convey a powerful message
on your site, utilize a full-screen photo
launch page. Your viewers will be
immediately transported into another world
of your creation.
20. Advanced Page Scrolling and
Navigation
The Present - 2013
The navigation panels we have seen on certain apps
are now being integrated into websites, because of
their interactive nature. More and more websites are
offering these enhanced scrolling and navigation
panels to help users navigate websites in a fun and
effective way.
23. Dave McClure
Founder of 500 Startups
“Design and marketing aren’t just as
important as engineering: they are way
more important.”
24. UX is the air successful startups breathe...
As a UX designer you’re not only interested in a usable
door handle. You want to create something that will
encourage people to open doors and will provide a
unique experience.
(Marcin Treder, UX Design for Startups)
27. In the age of user experience design your startup needs
to focus on users’ problems rather than on technology
only.
28. Step 3 : Research
Don’t daydream, don’t say “my mom wouldn’t get it”, or “well I would use it!” - reach
out to your customers and ask them what their thoughts are.
(Marcin Treder, UX Design for Startups)
31. Prototype
The UX Design Tools
A prototype is a middle-to-high fidelity
representation of the final product, which
simulates user interface interaction.
• Axure http://axure.com
• FluidUI http://fluidui.com
• Hotgloo http://hotgloo.com
• iRise http://irise.com
• Just In Mind http://justinmind.com
• Pidoco http://pidoco.com
32. Mockup
The UX Design Tools
The term ‘mockup’ was used for years in
regard to high fidelity, static, design
representation. It’s a kind of draft (or even
a final version!) of visual design used to
get a buy-in from stakeholders.
10 Completely Free Wireframe and Mockup Applications