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.

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-endfront-end

25. UX back-endfront-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
NodeJSEmberJS

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