Designer vs Developer

684 views
544 views

Published on

Presentation presented by Nicole Maynard and Bryan Gulley of Slalom Consulting at SharePoint Fest Chicago 2013

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
684
On SlideShare
0
From Embeds
0
Number of Embeds
41
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Designer vs Developer

  1. 1. DESIGNER Nicole “Nicky” Maynard DEVELOPER Bryan “Rock Star” Gulley @punkynixter @uxjester User Research Information Architecture Interactive Design Visual Design Interaction Design UI Development Information Architecture SharePoint UI Sleuth
  2. 2. DESIGNERS DEVELOPERS
  3. 3. ROUND 1 Designer  
  4. 4. “Design is not just what it looks like and feels like. Design is how it works.” Steve Jobs
  5. 5. Yes, it’s beautiful.
  6. 6. Started when humans made tools to make tasks easier After WWII ·Engineers research, lessons learned ·Human Factors & Ergonomics Society Paul Fitts ·Improved cockpits ·Fitts’s law still used today
  7. 7. Dieter Rams · Braun industrial designer · “Less, but better”   Walt Disney · First immersive experience by UCD   · “Imagineers” first UX team?  
  8. 8. Donald Norman  
  9. 9. Researchers Design Strategists Information Architects Interactive Designers Visual Designers Content Strategists
  10. 10. us·er noun A person who uses or operates something, esp. a computer or other machine. Defined  by  Google.   Synonyms Consumer, customer, employee, client, patient Antonyms Stakeholder, steering committee member, designer, developer
  11. 11. What is UX a person's perceptions and responses that result from the use or anticipated use of a product, system or service ISO1924  
  12. 12. Includes The Users’ emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviors and accomplishments that occur before, during and after use
  13. 13. Influential Factors System User What Who Context of Use Why When Where
  14. 14. Everything That Affects A User’s Interaction
  15. 15. Meet the users’ needs & reach business goals Solve business problems! Improve communication! Drive adoption & productivity! Ensure profitability! Enjoyable to use!
  16. 16. Meet the users’ needs & reach business goals Make people happy by creating great experiences
  17. 17. User Experience Drives Behavior & Action How a user feels 
 How a user feels about a system about a system Affects their behavior & choices Impacting time, cost, Impacting time, cost, profit and satisfaction profit and satisfaction Bad Experience Undesired Behavior Negative Impact
  18. 18. User Experience Drives Behavior & Action How a user feels 
 How a user feels about a system about a system Affects their behavior & choices Impacting time, cost, Impacting time, cost, profit and satisfaction profit and satisfaction Good Experience Desired Behavior Positive Impact
  19. 19. User Centered Design Process 01 02 03 04 05 RESEARCH ANALYZE IDEATE EVALUATE STYLIZE BUILD
  20. 20. ROUND 2 Developer
  21. 21. A Developer’s Approach to UX ! ! ! ! White boarding Wireframing Prototyping Implementation 23
  22. 22. White Boarding ! Think “Sketch” ! Information Architecture ! User Centered Design 24
  23. 23. Wireframes & Prototypes ! ! ! ! ! Think “Skeleton” Sketch to Screen Annotated User Interface Shareable Testable 25
  24. 24. DEMO 26  
  25. 25. Disclaimer ! Previous 4 slides are an example of how not to conduct development tasks with users ! More on that later 27
  26. 26. Implementation ! ! ! ! ! Skeleton to SharePoint Putting it all together Migrating the “design” with Design Manager We are not limited to the Design Manager Use of SharePoint Designer Strongly Discouraged 28
  27. 27. DEMO 29  
  28. 28. Tips, Tricks & Tools ! Tips ! Don’t use SharePoint Designer for master pages, page layouts, HTML, CSS, JS, etc. ! Use tools that work well in your workflow ! Tricks ! Network Drives ! Build reusable frameworks, libraries, plug-ins, “Starter” assets ! Utilize proven work by others ! Tools ! ! ! ! Raw HTML, CSS, and JavaScript Libraries like Twitter Bootstrap, YUI, jKit, Wirefy Sublime Text, Notepad ++, Coda, Plain Ol’ NotePad Axure, OmniGraffle, Fireworks, etc.
  29. 29. TIE MATCH Designer Developer
  30. 30. User Centered Design Process 01 02 03 04 05 RESEARCH ANALYZE IDEATE EVALUATE STYLIZE BUILD
  31. 31. How we work together · Communication - keep everyone involved in the whole process · Check your ego at the door · Set expectations and boundaries, build trust · Know each other’s lingo · Understand each other’s process, job and value · Be excited to teach one another – not chastise for gaps in knowledge · Devs aren’t machines, they have feelings too · Designers aren’t machines, great work takes time
  32. 32. Key Take Aways · NNg’s Intranet Design Annuals · UX is valuable investment · $10 change in UX phase, $100 in Design, $1,000 in Development · UX bridges the gap between business and IT by being the spokesperson for the user · Design and Development are equally important · Keep communication open throughout the entire process · Learn each others’ job, limitations, lingo · Collaboration is more important than your ego, you are working toward he same goal
  33. 33. SLALOM CONTACTS Robert Nicole Bryan Portals & Collaboration Practice Director UX Designer UI Developer robert.toro@slalom.com 630.309.4042 nicolem@slalom.com 630.251.8821 bryang@slalom.com 773.359.3384 Toro Maynard Gulley 35
  34. 34. © 2013 Slalom, LLC. All rights reserved. The information herein is for informational purposes only and represents the current view of Slalom, LLC. as of the date of this presentation. SLALOM MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

×