UserExperienceDesignAssessing how users feel about a system (a website,application, software etc.) evaluating elements lik...
The Tools of the TradeSitemapsA roadmap for the site’s generalnavigation and content placementWhy use them?Sitemaps act as...
Sitemap Example
The Tools of the TradeWireframesA skeletal layout that helps in the organization ofcontent. In advanced forms, they can ha...
Wireframing is a MustDo we really need a wireframe?Wireframes help you to get a clear picture of what yoursystem will most...
Dynamic vs StaticStatic WireframesWill give you basic layout andillustrate overall systemorganization, only detailingfunct...
Keeping it Simple           The Benefits of           Static Wireframes           Still wireframes can help with:         ...
Change the GameLookie-lou + Click-thruFor the tactile learners in the room, understandingfunctionality is better met with ...
Move It and Use It
Making the Jump SafelyPrior ProperPlanning PreventsPiss PoorPerformanceOnce the navigation iscemented, the generallayouts ...
UserInterfaceDesignCreating a design for websites, mobile apps, softwareetc., that pays strict attention to overall userex...
Always Meeting a NeedSolve for XUI design has the task oftranslating UX information inan aesthetically pleasingfunctional ...
This vs That and WhySophie’s ChoicePicking toggles over pressed and depressed, tabs overbuttons, borders over whitespace a...
That’s so 2013Trends in UI TodayPatterns form based on the content being craved by themasses and how the most popular syst...
Beautiful UI               Clear – Mobile To-Do List
Beautiful UI               Saucony – Product Detail UI
Beautiful UI               FK Agency – Business Detail
Beautiful UI               Jan Ploch– Online Portfolio
Beautiful UI               Weather App – Daily Detail
Beautiful UI               Agence De Communication – Company Home
Inception to ElaborationStrategy is key to quality design and only through tactile implementationcan a user experience be ...
Out of CiteClemens, D. (2012, May 30). Design process in the responsive age. Retrieved from http://uxdesign.smashingmagazi...
Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI
Upcoming SlideShare
Loading in...5
×

Intelligent Design - Transitioning UX into UI

1,072

Published on

Users are infinitely more complex today because technology has become so readily accessible. In order to gain any kind of foothold, designing a system has to be approached with the same intricacy and diversity as one's desired target demographic.

User Experience Design has brought strategy to the forefront of any system build, and User Interface Design marries that practicality with aesthetically pleasing creations all with the end user top of mind.

This presentation seeks to give an overview of the two design methods and the process of how to go from brainstorming to realization.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,072
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Intelligent Design - Transitioning UX into UI

  1. 1. UserExperienceDesignAssessing how users feel about a system (a website,application, software etc.) evaluating elements likeease of use, perception of the value, efficiency,function and how design can help meet the needs ofsaid user.
  2. 2. The Tools of the TradeSitemapsA roadmap for the site’s generalnavigation and content placementWhy use them?Sitemaps act asa guiding structure forall system builds,helping to keep theme,organization and ease ofnavigation top of mind.
  3. 3. Sitemap Example
  4. 4. The Tools of the TradeWireframesA skeletal layout that helps in the organization ofcontent. In advanced forms, they can have clickablelinks, display movement and demonstrate the overalluser experience.
  5. 5. Wireframing is a MustDo we really need a wireframe?Wireframes help you to get a clear picture of what yoursystem will most likely become before going throughthe arduous and expensive task of actually building it.Wireframes allow you to play without getting dirty by:• Providing focus on basic layouts• Creating parameters for designers/developers ahead of time easing transition into construction• Allowing for iteration in an environment more accepting of change (aka SAVE MONEY)• Safeguarding against wasting time/doing rework• Getting the client more involved on the front-end
  6. 6. Dynamic vs StaticStatic WireframesWill give you basic layout andillustrate overall systemorganization, only detailingfunctionality through wordsDynamic WireframesAllow you to interact with thewireframe mimicking the livesite, visually providing anunderstanding of functionalityand movement
  7. 7. Keeping it Simple The Benefits of Static Wireframes Still wireframes can help with: • Time • Money • Client adoption Static wireframes keep things basic and rely on vernacular to explain functionality. Useful Programs: Balsamiq, MockFlow, OmniGraffle, Cacoo, Pencil Project
  8. 8. Change the GameLookie-lou + Click-thruFor the tactile learners in the room, understandingfunctionality is better met with dynamic prototypes thatwill inevitably make it easier to build in the long run.Useful Programs: Axure, Protoshare, HotGloo
  9. 9. Move It and Use It
  10. 10. Making the Jump SafelyPrior ProperPlanning PreventsPiss PoorPerformanceOnce the navigation iscemented, the generallayouts understoodand functionalityrealized, it’s time tomove into UI design –putting “meat on thebones”.
  11. 11. UserInterfaceDesignCreating a design for websites, mobile apps, softwareetc., that pays strict attention to overall userexperience by making interaction with the system asefficient and enjoyable as possible.
  12. 12. Always Meeting a NeedSolve for XUI design has the task oftranslating UX information inan aesthetically pleasingfunctional entity. Using largeimagery because it’s moreengaging, varied typefacesbecause users get bored, fixedheaders and visual indicationof how to get from point A topoint B (while being superobvious about it) are allmatters to consider.
  13. 13. This vs That and WhySophie’s ChoicePicking toggles over pressed and depressed, tabs overbuttons, borders over whitespace all comes down to whatthe end user will find most appealing and useful in relationto what they are trying to attain from your system.
  14. 14. That’s so 2013Trends in UI TodayPatterns form based on the content being craved by themasses and how the most popular systems go about doingit. UI design is often a game of follow the leader. What’s hotright now:• Fixed headers • Typography takeovers• Large photo or video • Vertical navigation backgrounds • Fixed heights• Minimalism • Flat and simplistic• Complex illustrations • Simplified navigation• Infinite scrolling • Responsive• Dynamic sliding panels
  15. 15. Beautiful UI Clear – Mobile To-Do List
  16. 16. Beautiful UI Saucony – Product Detail UI
  17. 17. Beautiful UI FK Agency – Business Detail
  18. 18. Beautiful UI Jan Ploch– Online Portfolio
  19. 19. Beautiful UI Weather App – Daily Detail
  20. 20. Beautiful UI Agence De Communication – Company Home
  21. 21. Inception to ElaborationStrategy is key to quality design and only through tactile implementationcan a user experience be enriched through an appealing user interface.
  22. 22. Out of CiteClemens, D. (2012, May 30). Design process in the responsive age. Retrieved from http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/Gube, J. (2010, October 5). What is user experience design? overview, tools and resources. Retrieved fromhttp://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/Hess, W. (2009, January 09). 10 common misconceptions about user experience design [Web log message]. Retrieved fromhttp://mashable.com/2009/01/09/user-experience-design/HotGloo (2013, January). WHY SHOULD I WIREFRAME?. Retrieved from http://www.hotgloo.com/wireframeJovanovic, J. (2010). Designing user interfaces for business. In Retrieved fromhttp://uxdesign.smashingmagazine.com/2010/02/25/designing-user-interfaces-for-business-web-applications/Rocheleau, J. (n.d.). Hongkiat.com. Retrieved from http://www.hongkiat.com/blog/web-design-trend-2013/SonicSEO (2011, December 12). 4 Reasons Why You Need a Site Map. Retrieved from http://www.sonicseo.com/why-sitemap/The Meme (2013, January 30). Eight UX Design Trends for 2013. Retrieved from http://uxmag.com/articles/eight-ux-design-trends-for-2013Image Cites:http://www.1stwebdesigner.com/freebies/45-free-web-user-interface-elements-psd-files/tp://www.nike.com/us/en_us/c/nikeidhttp://abduzeedo.com/design-trends-2013-flat-and-minimalhttps://andrewl14.wordpress.com/category/wallpapers/#jp-carousel-753http://www.axure.com/sample-prototypeshttp://captaindash.comhttp://community.saucony.com/kinvara3/http://www.condenaststore.com/-sp/Seeing-eye-dog-eludes-blind-owner-he-is-wearing-the-sunglasses-which-the-New-Yorker-Cartoon-Prints_i8473412_.htmhttp://www.realmacsoftware.com/clear/http://www.xprimegroupe.com/#
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×