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 full-size 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 full-size slide

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

    View full-size slide

  4. 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 full-size slide

  5. 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 full-size slide

  6. 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 full-size slide

  7. 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 full-size slide

  8. 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 full-size slide

  9. 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 full-size slide

  10. The common flow

    View full-size slide

  11. 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 full-size slide

  12. wireframe
    design
    front-end
    back-end

    View full-size slide

  13. wireframe
    design front-end back-end

    View full-size slide

  14. The broken flow

    View full-size slide

  15. UX layout back-end

    View full-size slide

  16. UX back-end
    front-end

    View full-size slide

  17. UX back-end
    front-end

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 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 full-size slide

  21. 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 full-size slide

  22. How Front-end can help UX?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. What front-end learn from
    UX team?

    View full-size slide

  27. Information Architect
    Organize and priorize information on page.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. Logic
    Learn programming logic to increase your skills.

    View full-size slide

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

    View full-size slide

  34. 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 full-size slide

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

    View full-size slide

  36. 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 full-size slide

  37. Let’s simplify this division

    View full-size slide

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

    View full-size slide

  39. 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 full-size slide

  40. 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 full-size slide

  41. 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 full-size slide

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

    View full-size slide