UX, FRONT-END AND BACK-END
How Front-end help Back-end and UX guys
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Let’s divide
First of all we need divide and understand the sides.
Slide 7
Slide 7 text
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.
Slide 8
Slide 8 text
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.
Slide 9
Slide 9 text
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.
Slide 10
Slide 10 text
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.
Slide 11
Slide 11 text
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.
Slide 12
Slide 12 text
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.
Slide 13
Slide 13 text
The common flow
Slide 14
Slide 14 text
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.
Slide 15
Slide 15 text
wireframe
design
front-end
back-end
Slide 16
Slide 16 text
wireframe
design front-end back-end
Slide 17
Slide 17 text
The broken flow
Slide 18
Slide 18 text
UX layout back-end
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
UX back-end
front-end
Slide 25
Slide 25 text
UX back-end
front-end
Slide 26
Slide 26 text
How Front-end can help
Back-end?
Slide 27
Slide 27 text
HTML
Maintain an organized HTML, caring about semantic and structure.
Slide 28
Slide 28 text
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.
Slide 29
Slide 29 text
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.
Slide 30
Slide 30 text
How Front-end can help UX?
Slide 31
Slide 31 text
Prototypes
Sometimes the tests with user need to be more real. Functional
prototypes are more useful than squares in white background.
Slide 32
Slide 32 text
Information Architecture
HTML semantic + SEO + information priority and evidence.
Slide 33
Slide 33 text
Visual and behavior standards
Standards of flow, visual interface, behavior and even functionality.
Slide 34
Slide 34 text
What front-end learn from
UX team?
Slide 35
Slide 35 text
Information Architect
Organize and priorize information on page.
Slide 36
Slide 36 text
Understand visual patterns
Front-end needs to know when the pattern of alignments, weight and
size of elements are wrong.
Slide 37
Slide 37 text
Know what good design is
Understand a little about design and how designers make your layouts.
Slide 38
Slide 38 text
What front-end learn from
back-end team?
Slide 39
Slide 39 text
Manipulate informations
Manipulate and use informations with the right tools and the right way.
Slide 40
Slide 40 text
Logic
Learn programming logic to increase your skills.
Slide 41
Slide 41 text
Operations
Understand a little more how the environment of the project works.
Slide 42
Slide 42 text
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.
Slide 43
Slide 43 text
http://opensource.locaweb.com.br/locawebstyle/
Slide 44
Slide 44 text
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.
Slide 45
Slide 45 text
Let’s simplify this division
Slide 46
Slide 46 text
IMHO, the division: designer,
front-end and back-end is
broken.
Slide 47
Slide 47 text
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
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
Goodbye!
Let me know what you think!
@diegoeis
@tableless
tableless.com.br
diegoeis.com
slideshare.net/diegoeis