Your SlideShare is downloading. ×
Intelligent Design - Transitioning UX into UI
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Intelligent Design - Transitioning UX into UI

1,019
views

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 …

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,019
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. Sitemap Example
  • 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. 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. 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. 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. 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. Move It and Use It
  • 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. 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. 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. 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. 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. Beautiful UI Clear – Mobile To-Do List
  • 16. Beautiful UI Saucony – Product Detail UI
  • 17. Beautiful UI FK Agency – Business Detail
  • 18. Beautiful UI Jan Ploch– Online Portfolio
  • 19. Beautiful UI Weather App – Daily Detail
  • 20. Beautiful UI Agence De Communication – Company Home
  • 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. 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/#