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.

Diego Eis

May 11, 2015
Tweet

More Decks by Diego Eis

Other Decks in Technology

Transcript

  1. UX, FRONT-END AND BACK-END
    How Front-end help Back-end and UX guys

    View Slide

  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

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. Let’s divide
    First of all we need divide and understand the sides.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  13. The common flow

    View Slide

  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.

    View Slide

  15. wireframe
    design
    front-end
    back-end

    View Slide

  16. wireframe
    design front-end back-end

    View Slide

  17. The broken flow

    View Slide

  18. UX layout back-end

    View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. UX back-end
    front-end

    View Slide

  25. UX back-end
    front-end

    View Slide

  26. How Front-end can help
    Back-end?

    View Slide

  27. HTML
    Maintain an organized HTML, caring about semantic and structure.

    View Slide

  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.

    View Slide

  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.

    View Slide

  30. How Front-end can help UX?

    View Slide

  31. Prototypes
    Sometimes the tests with user need to be more real. Functional
    prototypes are more useful than squares in white background.

    View Slide

  32. Information Architecture
    HTML semantic + SEO + information priority and evidence.

    View Slide

  33. Visual and behavior standards
    Standards of flow, visual interface, behavior and even functionality.

    View Slide

  34. What front-end learn from
    UX team?

    View Slide

  35. Information Architect
    Organize and priorize information on page.

    View Slide

  36. Understand visual patterns
    Front-end needs to know when the pattern of alignments, weight and
    size of elements are wrong.

    View Slide

  37. Know what good design is
    Understand a little about design and how designers make your layouts.

    View Slide

  38. What front-end learn from
    back-end team?

    View Slide

  39. Manipulate informations
    Manipulate and use informations with the right tools and the right way.

    View Slide

  40. Logic
    Learn programming logic to increase your skills.

    View Slide

  41. Operations
    Understand a little more how the environment of the project works.

    View Slide

  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.

    View Slide

  43. http://opensource.locaweb.com.br/locawebstyle/

    View Slide

  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.

    View Slide

  45. Let’s simplify this division

    View Slide

  46. IMHO, the division: designer,
    front-end and back-end is
    broken.

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  50. Goodbye!
    Let me know what you think!
    @diegoeis
    @tableless
    tableless.com.br
    diegoeis.com
    slideshare.net/diegoeis

    View Slide