CRASH COURSE IN UX DESIGN

August 21, 2014

AGENDAWhat do you hope to learn?

A Bit About UX

UX Terms

UX Research Tools

UX Design Tools

ARCHITECTS

WHY YOU NEED US

http://theoatmeal.com/comics/design_hell

KNOW IT WHEN YOU SEE IT

http://theoatmeal.com/comics/shopping_cart

WHAT’S UX?User Experience design is the art and science of ingratiating all the various elements that comprise an interactive system to meet the users needs, goals, limitations, desires and expectations.

MY JOURNEY TO UX

HIGH SCHOOL(art)

BUSINESS SCHOOL

(markEtING)aD aGENCY 1(aD SErVING)

INFO arCHItECt(1St rOLE)

DESIGNINtErNSHIP

UX DESIGNEr(SaPIENt)

aD aGENCY 2(tECHNICaL)

art CLaSSES(SVa)

SELF taUGHtGraD SCHOOL(Pratt)

I Cannot Believe I Lived Long Enough

To See Something Like This!

• Graphic Design• Physical Computing• Self-taught• Interaction Design• Animation• Account

• Culinary School• Architecture• Self-taught• Interaction Design• Research• Data analysis

VARIOUS BACKGROUNDS

KEEP IT SIMPLE

https://www.youtube.com/watch?v=XFxAleTesqA

WHAT WE’RE CALLEDUX DesignerExperience DesignerInteraction DesignerUI Designer

Web DesignerFunctional AnalystInformation Architect Mobile Designer

UX TERMSSite MapWireframeAnnotationsBreadcrumbsUtility

EcosystemUser JourneyCard SortingFooter Header

FoldCarouselPersonaPrototypeCTA

http://uxmatters.com/mt/archives/2012/06/ux-design-defined.phphttp://52weeksofux.com/post/634887207/is-the-term-ux-being-marginalized

http://52weeksofux.com/post/634887207/is-the-term-ux-being-marginalizedhttp://designshack.net/articles/graphics/the-difference-between-ui-and-ux/

INTUITIVE

CREATIVE

ORGANIZED

STRUCTURED

EMPATHETIC

INSTIGATOR

VISUAL

LOGICAL

DETAILEDINNOVATIVE

WEAR LOTS OF HATS

We are empathy* designers

*сочувствие

EMPATHY MAPS

METHOD SORTING

TREEJACK + CARD SORT

EXPERIENCE MAPS

SITE MAPS

SECTION NAVIGATION

Lorem Ipsum

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

LEarN USE CrEatE

My Account Lorel Ipsnb

LogoutMy Inbox

Search

Restricted Area

Lorem Ipsum Dolor

mY BraND CENtraL

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

USER FLOWS

SPECS + ANNOTATIONS

WIREFRAMES

Last tier 2

Last tier 1

Last tier 5

Last tier 3

Last tier 7

Last tier 4

Last tier 8

third tier Name 4 Lorem Ipsum

Dolor Lorem Ipsum

QUIZDefine the page using some of the mentioned UX terms

HEADER

UTILITY

FOLD

FOOTER

CAROUSEL

CTA

UX TOOLS

http://www.axure.com/

https://www.omnigroup.com/omnigraffle

http://www.invisionapp.com

https://popapp.in/

http://keynotopia.com/move-over-origami-heres-how-to-prototype-facebooks-paper-app-in-10-minutes-using-apple-keynote/https://itunes.apple.com/us/app/keynote/id361285480?mt=8

http://www.optimalworkshop.com

Put simply, Responsive web design is about browser sizes. It’s con-cerned with layout, hier-archy and creating an op-timal reading experience regardless of device. It’s concerned with layout, hi-erarchy, and creating an optimal reading experience regardless of device.

Adaptive web design is about content. It’s con-cerned with creating an optimal user experience depending on different devices. Adaptive design uses the components of progressive enhance-ment (PE) to define design methods that focus on user, not the browser.

Fixed websites have a set width and resizing the browser or viewing it on different devices won’t af-fect on the way the web-site looks.

TYPES OF DESIGN

http://www.rasmussen.edu/degrees/design/blog/web-design-101-adaptive-vs-responsive-design/ http://nerd.vasilis.nl/the-definitions-of-responsive-and-adaptive-web-design/http://venturebeat.com/2013/11/19/responsive-design-adaptive/

TASKAdd a skirt to shopping cart without using search on the following 3 sites:

http://www.maurices.com/home/http://www.nastygal.com/http://www.hm.com/

?THANK YOU!Cпасибо!

UX RESOURCES50 Design Problems In 50 Days- Real Empathy For Innovation http://uxdesign.smashingmagazine.com/2013/05/27/50-problems-50-days-part-1-real-empathy-innovation/

Better User Experience With Storytelling – Part Onehttp://uxdesign.smashingmagazine.com/2010/01/29/better-user-experience-us-ing-storytelling-part-one/

Google Glass + The Bee Gees might one day save lives http://gigaom.com/2013/07/08/google-glass-the-bee-gees-might-one-day-save-lives/

Why visual storytelling is the future of digitalhttp://www.imediaconnection.com/printpage/printpage.aspx?id=32879

Why good storytelling helps you design great products https://medium.com/design-ux/148c9bbc7404

What is UX? http://uxdesign.com/ux-defined

Seductive Interactionshttp://www.themoleskin.com/2010/01/stephen-anderson-on-seductive-interac-tions/

What is the User Design Processhttp://www.scoop.it/t/ux-design-process?page=2

About User Experience http://uxdesign.com/about-user-experience-design/article/what-is-ux/4

What is User Experience Design - Cooper.comhttp://www.cooper.com/journal/2012/11/what-is-user-experience-design.html

UX Methods for Professionals - Measuring Usabilityhttp://www.measuringusability.com/blog/ux-methods.php

User Experience or UX Historyhttp://www.interaction-design.org/encyclopedia/user_experience_or_ux.html

Personal UXhttp://blog.jthoenes.net/2012/09/20/how-to-do-your-own-personal-retrospective/#

Cognitive Interactionhttp://en.wikipedia.org/wiki/Interaction_design#Cognitive_dimensions

Report: 44M health app downloads in 2012http://mobihealthnews.com/15029/

Report: 1.7B to download health apps by 2017http://mobihealthnews.com/20814/report-1-7b-to-download-health-apps-by-2017/

Mobile Health Care Apps Growing Fast in Number http://mhealthwatch.com/mobile-health-care-apps-growing-fast-in-num-ber-20052/

Health apps downloads doubledhttp://healthyceleb.com/health-apps-downloads-doubled-from-last-year

What does a UX designer do?http://www.sitepoint.com/ux-designer-actually/

RESOURCESBooksSites / Blogs

52 weeks of UXAgency SpyAd AgeIXPATED Talks

http://rosssimmonds.com/2010/10/20/20-books-read-job-advertising/

lana.voynova@gmail.com

behance.net/lanamaniac

linkedin.com/in/lanavoynova

@lanamaniac

New York, NY

CONTACT