Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX, Front-end and Back-end

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.

1bf877955dc2e43662320fd3b0280166?s=128

Diego Eis

May 11, 2015
Tweet

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
  3. None
  4. None
  5. None
  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

  19. None
  20. None
  21. None
  22. None
  23. None
  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