Intelligent Design - Transitioning UX into UI


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
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
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, J. (2010, October 5). What is user experience design? overview, tools and resources. Retrieved from, W. (2009, January 09). 10 common misconceptions about user experience design [Web log message]. Retrieved from (2013, January). WHY SHOULD I WIREFRAME?. Retrieved from, J. (2010). Designing user interfaces for business. In Retrieved from, J. (n.d.). Retrieved from (2011, December 12). 4 Reasons Why You Need a Site Map. Retrieved from Meme (2013, January 30). Eight UX Design Trends for 2013. Retrieved from Cites:
  1. A particular slide catching your eye?

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