UX, Front-end and Back-end

How front-end can help UX and Back-end guys? How they interact? I tell a little about it in this slides, showing how the front-end can help the back-end and UX.

Transcript

1. UX, FRONT-END AND BACK-END How Front-end help Back-end and UX guys
2. Diego Eis I love work with web. And I lost 55 pounds. ;-) @diegoeis @tableless http://tableless.com.br http://diegoeis.com http://slideshare.net/diegoeis
6. Let’s divide First of all we need divide and understand the sides.
7. Interactive Design This important guy is a scientist of behavior. He understand how will navigate and use all pages of system. They take business needs and product requirements and transform them into user-focused interface and experience.
8. Interface Designer I like to name this guy simply like Designer. He will design the layout and the modules that will bring the interfaces concepts to life, cultivating customers and brands. They know how an beauty interface can sell and retain more costumers.
9. Back-end They care about the environment and how the functionalities will work. All the server side logic of application, API structure and web services, databases integrations and many other processes.
10. Front-end Very short explain: Front-end is the guy that will implement the Layout created by Interface Designer and will study and apply the project specs explained in wireframe designed by Information Architecture.
11. What about UX? This is a long and boring discuss, but here we go: I think the way that UX name is applied is wrong. UX is not a concern of one team or one person. The client support cares about the User Experience. The dev and the Product Owner cares about it too. UX is not an exclusive name to a exclusive type of people in a project. All people involved in a project is an UX.
12. Let’s be clear All people that works with web are responsible for user experience. Not only UX, UI or Front-end. This is also a concern of back-end, product owner, manager and all people involved to the project.
13. The common flow
14. Linear or parallel Sometimes the flow needs to be linear, like in small projects like websites. But, with the adoption of web standards this flow can be parallel. This is awesome.
15. wireframe design front-end back-end
16. wireframe design front-end back-end
17. The broken flow
18. UX layout back-end
24. UX back-end front-end
25. UX back-end front-end
26. How Front-end can help Back-end?
27. HTML Maintain an organized HTML, caring about semantic and structure.
28. Implement direct in back-end code Instead deliver a static code to back-end, the front-end team can implement the html/css/javascript code directly into back-end code.
29. Consume API If Back-end deliver an API, the Front-end guys take care about all interface. Back-end don’t need to write any line of front-end code.
30. How Front-end can help UX?
31. Prototypes Sometimes the tests with user need to be more real. Functional prototypes are more useful than squares in white background.
32. Information Architecture HTML semantic + SEO + information priority and evidence.
33. Visual and behavior standards Standards of flow, visual interface, behavior and even functionality.
34. What front-end learn from UX team?
35. Information Architect Organize and priorize information on page.
36. Understand visual patterns Front-end needs to know when the pattern of alignments, weight and size of elements are wrong.
37. Know what good design is Understand a little about design and how designers make your layouts.
38. What front-end learn from back-end team?
39. Manipulate informations Manipulate and use informations with the right tools and the right way.
40. Logic Learn programming logic to increase your skills.
41. Operations Understand a little more how the environment of the project works.
42. A Framework helps all If you work in a big company that have a big product or many products that share same visual interface, maybe it's a good idea to create a CSS Framework and define a common styleguide.
43. http://opensource.locaweb.com.br/locawebstyle/
44. HTML needs to be common to all If exists one thing that back-end, front-end and UX teams needs to learn, this things is HTML. The HTML is influenced by all.
45. Let’s simplify this division
46. IMHO, the division: designer, front-end and back-end is broken.
47. Designing Programming interface photoshop illustrator personas usability accessibility semantic HTML CSS ruby javascript json database infrastructure API PHP development environment UX UI layout AI prototype tests python JS for Interface NodeJS EmberJS
48. In fact, having only one front-end developer in a team with other developers doing only server-side work is a recipe for disaster. Don Roby bit.ly/18MX8cg
49. One of the reasons for poor design execution is that UX teams need to own more than just design. We need to own front-end development. UX Matters http://bit.ly/ux-require-frontend
50. Goodbye! Let me know what you think! @diegoeis @tableless tableless.com.br diegoeis.com slideshare.net/diegoeis