Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI Design, Trends, Patterns and User Experience - Academy of Design

2,362 views

Published on

This is the presentation I've done for Academy of Design in Colombo Sri Lanka (Learning Center for University of Northumbria) on 12th September 2013

Published in: Education, Technology, Business

UI Design, Trends, Patterns and User Experience - Academy of Design

  1. 1. UI Design, Trends, Patterns and User Experience By Shiran Sanjeewa twitter : @shiran_sanjeewa
  2. 2. Who I am? Logo Designer / UX Consultant Art Director at Netstarter Founder of UX Colombo *Dad
  3. 3. Buzz Words Web Design, UI, HTML, PHP, jQuery, New Trends, SOCIAL MEDIA, Responsive, UX, Information Architecture
  4. 4. JOB TITLES Web Designer, UI Engineer, HTML & PHP Developer, jQuery Guru, SOCIAL MEDIA EXPERT, UX Designer, Information Architect
  5. 5. WHAT IS UI The user interface is the space where interaction between humans and machines occurs.
  6. 6. TRENDS
  7. 7. RESPONSIVE “Break Points”
  8. 8. FLAT DESIGN
  9. 9. LONG SHADOWS
  10. 10. TOOLS OF THE TRADE SKETCHBOOKS. WIREFRAMING TOOLS. ADOBE CREATIVE SUITE. HTML AND PHP or ASP.net (other)
  11. 11. A NEW DIMENSION
  12. 12. Why a design has to be meaningful ?
  13. 13. DESIGN AND STYLE
  14. 14. WHY IS IT CALLED “USER” INTERFACE. not “the designers interface”
  15. 15. Don’t Compromise We need to think about who and what we’re designing for and ask ourselves why we’re applying a certain kind of aesthetic style to our design.
  16. 16. What sets Traditional Design and UI Design APART
  17. 17. Prioritize Prioritize your design tasks and make a workflow
  18. 18. Design Patterns
  19. 19. GETTING INPUT Forms Wizards Feedback
  20. 20. NAVIGATION Tabs Menus Pagination Tag Cloud
  21. 21. HANDLING DATA Search Tables Images (Galleries, Slideshows)
  22. 22. SOCIAL MEDIA Live Feeds, Activity Streams (Twitter, Facebook) Location Based Suggestions (4Square) Answers (Quora, Disqus)
  23. 23. DESIGN PRACTICALLY TECHNOLOGICAL BARRIERS DEVELOPER MINDSET
  24. 24. STYLE GUIDES
  25. 25. STYLE GUIDES
  26. 26. STYLE GUIDES FOR THE WEB www.bbc.co.uk/gel
  27. 27. GET YOUR DESIGN BRIEF RIGHT
  28. 28. 1. Objectives and Goals of the new design 2. Budget and Schedule 3. Target Audience 4. Scope of the Project 5. Available Materials/Needed Materials 6. Overall Style/Look 7. Any Definite “Do Not's”
  29. 29. 1. Objectives and Goals of the new design The first thing you need to find out is what your client wants from their new design. Is this a redesign or reworking of an existing site, or is it a completely new design? Do they already have solid ideas for what they want their site to do or are their ideas more vague?
  30. 30. 2. Budget and Schedule Be realistic with your clients about both their budget and schedule needs. If you know you can’t do something within a certain budget or schedule, tell them up front.
  31. 31. 3. Target Audience If your clients aren’t sure who they want to reach with their site, ask them who their ideal customer is. I’m sure they have an idea of who buys their products or uses their services.
  32. 32. 4. Project Scope Sometimes, project scope is obvious from the goals of a project.
  33. 33. 5. Available Materials Looking at their existing promotional materials can shed valuable insight into what their design taste is and what their priorities are.
  34. 34. 6. Overall Style Getting a sense of what your client wants in terms of style is vital. But they’re not always good at expressing what their tastes are.
  35. 35. CREATING EXPERIENCES
  36. 36. ‘Experience’ is an episode, a chunk of time that one goes through sights and sounds, feelings and thoughts, motives and actions closely knitted together, stored in memory, labelled, relived and communicated to others.
  37. 37. In short, experience-led design is more likely to evoke an emotion of engagement and consequently, a strong desire to associate with your product, system or service.
  38. 38. A CASE STUDY Facebook Home
  39. 39. Improvise what’s already there
  40. 40. HAVE YOU EVER CONSIDERED THAT YOU'RE POOPING WRONG?
  41. 41. www.youtube.com/watch?v=pYcv6odWfTM MEET SQUATTY POTTY
  42. 42. Final Thoughts • Design Websites with user in mind • Innovate new ways to deliver information, not to showcase just a masterpiece. • Its not about how beautiful it is but how useful it is.
  43. 43. www.uxcolombo.org
  44. 44. THANK YOU !!!

×