SlideShare a Scribd company logo
UX, FRONT-END AND BACK-END
How Front-end help Back-end and UX guys
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
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
Let’s divide
First of all we need divide and understand the sides.
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.
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.
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.
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.
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.
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.
The common flow
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.
wireframe
design
front-end
back-end
wireframe
design front-end back-end
The broken flow
UX layout back-end
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
UX back-endfront-end
UX back-endfront-end
How Front-end can help
Back-end?
HTML
Maintain an organized HTML, caring about semantic and structure.
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.
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.
How Front-end can help UX?
Prototypes
Sometimes the tests with user need to be more real. Functional
prototypes are more useful than squares in white background.
Information Architecture
HTML semantic + SEO + information priority and evidence.
Visual and behavior standards
Standards of flow, visual interface, behavior and even functionality.
What front-end learn from
UX team?
Information Architect
Organize and priorize information on page.
Understand visual patterns
Front-end needs to know when the pattern of alignments, weight and
size of elements are wrong.
Know what good design is
Understand a little about design and how designers make your layouts.
What front-end learn from
back-end team?
Manipulate informations
Manipulate and use informations with the right tools and the right way.
Logic
Learn programming logic to increase your skills.
Operations
Understand a little more how the environment of the project works.
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.
http://opensource.locaweb.com.br/locawebstyle/
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.
Let’s simplify this division
IMHO, the division: designer,
front-end and back-end is
broken.
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
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
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
Goodbye!
Let me know what you think!
@diegoeis
@tableless
tableless.com.br
diegoeis.com
slideshare.net/diegoeis

More Related Content

What's hot (20)

PPTX
Introduction to Web development
Md. Shafiuzzaman Hira
 
PDF
Front-End Frameworks: a quick overview
Diacode
 
PDF
Progressive web apps
R. Caner Yıldırım
 
PDF
ReactJS presentation
Thanh Tuong
 
PPTX
Introduction to MERN
ShyamMohanKunwar
 
PDF
Web Designing Presentation
RahulSuri30
 
PDF
Introduction to Web Programming
Ynon Perek
 
PDF
Web Development Presentation
TurnToTech
 
PPTX
Web development with django - Basics Presentation
Shrinath Shenoy
 
PDF
webpack 101 slides
mattysmith
 
PPTX
React js - The Core Concepts
Divyang Bhambhani
 
PDF
Responsive web design
Russ Weakley
 
PPTX
Angular vs React vs Vue
Hosein Mansouri
 
PPTX
Web design - How the Web works?
Mustafa Kamel Mohammadi
 
PPTX
Introduction to react js
Aeshan Wijetunge
 
PPTX
Web Application
Sameer Poudel
 
PDF
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
PDF
Website Layout and Structure
Michael Zinniger
 
PDF
React Js Simplified
Sunil Yadav
 
PPTX
Progressive Web-App (PWA)
NexThoughts Technologies
 
Introduction to Web development
Md. Shafiuzzaman Hira
 
Front-End Frameworks: a quick overview
Diacode
 
Progressive web apps
R. Caner Yıldırım
 
ReactJS presentation
Thanh Tuong
 
Introduction to MERN
ShyamMohanKunwar
 
Web Designing Presentation
RahulSuri30
 
Introduction to Web Programming
Ynon Perek
 
Web Development Presentation
TurnToTech
 
Web development with django - Basics Presentation
Shrinath Shenoy
 
webpack 101 slides
mattysmith
 
React js - The Core Concepts
Divyang Bhambhani
 
Responsive web design
Russ Weakley
 
Angular vs React vs Vue
Hosein Mansouri
 
Web design - How the Web works?
Mustafa Kamel Mohammadi
 
Introduction to react js
Aeshan Wijetunge
 
Web Application
Sameer Poudel
 
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
Website Layout and Structure
Michael Zinniger
 
React Js Simplified
Sunil Yadav
 
Progressive Web-App (PWA)
NexThoughts Technologies
 

Viewers also liked (20)

PDF
Um pequeno estudo sobre a microsoft
Diego Eis
 
PDF
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
Diego Eis
 
PDF
O básico sobre Web Semântica, JSON-LD e Linked Data
Diego Eis
 
PDF
Full Stack Web Application Performance Tuning
Fabian Lange
 
PDF
CSS 4 - What's coming up
Diego Eis
 
PDF
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Diego Eis
 
PDF
O que você precisa saber para se tornar um dev front-end
Diego Eis
 
PPTX
Integrate JBrowse REST API Framework with Adama Federation Architecture
Vivek Krishnakumar
 
PPT
Small Business Can
cimota
 
PDF
Hardening Routers and Swithches
n|u - The Open Security Community
 
PDF
Basics of Networking
n|u - The Open Security Community
 
PDF
Github, Travis-CI and Perl
Dave Cross
 
PDF
Fun & profit with bug bounties
n|u - The Open Security Community
 
PPTX
Web & Cloud Security in the real world
Madhu Akula
 
PDF
My Bug Hunting With Open Source
Madhu Akula
 
PPTX
Making Web Fun
Rajasekar Murugan
 
PDF
DevOps at Crevise Technologies
Crevise Technologies
 
PDF
LAPP/SELinux - A secure web application stack powered by SELinux
Kohei KaiGai
 
PDF
Training Webinar: Top front-end techniques for OutSystems
OutSystems
 
PDF
What is a Full stack developer? - Tech talk
Bui Hai An
 
Um pequeno estudo sobre a microsoft
Diego Eis
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
Diego Eis
 
O básico sobre Web Semântica, JSON-LD e Linked Data
Diego Eis
 
Full Stack Web Application Performance Tuning
Fabian Lange
 
CSS 4 - What's coming up
Diego Eis
 
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Diego Eis
 
O que você precisa saber para se tornar um dev front-end
Diego Eis
 
Integrate JBrowse REST API Framework with Adama Federation Architecture
Vivek Krishnakumar
 
Small Business Can
cimota
 
Hardening Routers and Swithches
n|u - The Open Security Community
 
Basics of Networking
n|u - The Open Security Community
 
Github, Travis-CI and Perl
Dave Cross
 
Fun & profit with bug bounties
n|u - The Open Security Community
 
Web & Cloud Security in the real world
Madhu Akula
 
My Bug Hunting With Open Source
Madhu Akula
 
Making Web Fun
Rajasekar Murugan
 
DevOps at Crevise Technologies
Crevise Technologies
 
LAPP/SELinux - A secure web application stack powered by SELinux
Kohei KaiGai
 
Training Webinar: Top front-end techniques for OutSystems
OutSystems
 
What is a Full stack developer? - Tech talk
Bui Hai An
 
Ad

Similar to UX, Front-end and Back-end: How front-end can help these guys? (20)

PDF
UX Fluency for a better Front End
Monika Piotrowicz
 
PDF
Understand front end developer
Hsuan Fu Lien
 
PDF
Front end developer responsibilities what does a front-end developer do?
Katy Slemon
 
PPTX
Front end development session1
marwa Ayad Mohamed
 
PDF
Web UX Landscape (and all points in between...)
Gene Crawford
 
PPTX
Angular JS - UI Development Online Training
Front End UI Online Training from India
 
PDF
UI/UX-Distinction and Trend
Quikr
 
PDF
UI/UX: Distinction and Trends
Ankur Sharma
 
PDF
Ui / UX developer crashcourse
Ahmed Sabbour
 
PDF
UX UI - Principles and Best Practices 2014-2015
Harsh Wardhan Dave
 
PDF
Introduction to UX for Mesiniaga Academy
Zainul Zain
 
PPTX
Modern ux-workflow-presentation
Brian Akpa
 
PDF
Frontend Development The Ultimate Guide Sufyan Bin Uzayr
iredestyffe
 
PPTX
UI/UX presentation by Roshan Karunarathna
Roshan Karunarathna
 
PDF
UX, UI, and Front-End...what's the difference?
Ramya Mahalingam
 
PDF
Uxpin web ui_design_best_practices
imdurgesh
 
PPTX
Get to know about UI/UX designing
Menusha Pathirana
 
PPTX
Maximizing Business Impact with Front-End Web Development
Catherine William
 
PDF
Abstracting the UI Layer for WebSphere Portal
Perficient, Inc.
 
PPTX
Designing for Impact: Front End Web Development & UI/UX Best Practices
Catherine William
 
UX Fluency for a better Front End
Monika Piotrowicz
 
Understand front end developer
Hsuan Fu Lien
 
Front end developer responsibilities what does a front-end developer do?
Katy Slemon
 
Front end development session1
marwa Ayad Mohamed
 
Web UX Landscape (and all points in between...)
Gene Crawford
 
Angular JS - UI Development Online Training
Front End UI Online Training from India
 
UI/UX-Distinction and Trend
Quikr
 
UI/UX: Distinction and Trends
Ankur Sharma
 
Ui / UX developer crashcourse
Ahmed Sabbour
 
UX UI - Principles and Best Practices 2014-2015
Harsh Wardhan Dave
 
Introduction to UX for Mesiniaga Academy
Zainul Zain
 
Modern ux-workflow-presentation
Brian Akpa
 
Frontend Development The Ultimate Guide Sufyan Bin Uzayr
iredestyffe
 
UI/UX presentation by Roshan Karunarathna
Roshan Karunarathna
 
UX, UI, and Front-End...what's the difference?
Ramya Mahalingam
 
Uxpin web ui_design_best_practices
imdurgesh
 
Get to know about UI/UX designing
Menusha Pathirana
 
Maximizing Business Impact with Front-End Web Development
Catherine William
 
Abstracting the UI Layer for WebSphere Portal
Perficient, Inc.
 
Designing for Impact: Front End Web Development & UI/UX Best Practices
Catherine William
 
Ad

More from Diego Eis (16)

PDF
Carreira de Product Manager em 18 minutos
Diego Eis
 
PDF
Service Dominant Logic - S-D Logic em Produtos Digitais
Diego Eis
 
PDF
Métricas para times Ágeis usando Estatística Básica
Diego Eis
 
PDF
Os cuidados e os limites do Responsive Web Design
Diego Eis
 
PDF
WAI-ARIA - Interações acessíveis na web
Diego Eis
 
PDF
Primeiros passos para estruturar uma equipe front-end
Diego Eis
 
PDF
Construindo seu framework CSS
Diego Eis
 
PDF
Construindo um framework CSS
Diego Eis
 
PDF
A verdadeira semântica do HTML
Diego Eis
 
PDF
HTML5 e CSS3 - A nova novidade
Diego Eis
 
PDF
Manual de Sobrevivência do Desenvolvedor Empreendedor
Diego Eis
 
PDF
Acessibilidade para web
Diego Eis
 
PDF
CSS3 - Novo contexto
Diego Eis
 
PDF
Padrões Web passado, presente, futuro
Diego Eis
 
PDF
Padrões Web e algumas vantagens para o designer
Diego Eis
 
PDF
Padrões Web - Um elogio ao ócio do desenvolvedor
Diego Eis
 
Carreira de Product Manager em 18 minutos
Diego Eis
 
Service Dominant Logic - S-D Logic em Produtos Digitais
Diego Eis
 
Métricas para times Ágeis usando Estatística Básica
Diego Eis
 
Os cuidados e os limites do Responsive Web Design
Diego Eis
 
WAI-ARIA - Interações acessíveis na web
Diego Eis
 
Primeiros passos para estruturar uma equipe front-end
Diego Eis
 
Construindo seu framework CSS
Diego Eis
 
Construindo um framework CSS
Diego Eis
 
A verdadeira semântica do HTML
Diego Eis
 
HTML5 e CSS3 - A nova novidade
Diego Eis
 
Manual de Sobrevivência do Desenvolvedor Empreendedor
Diego Eis
 
Acessibilidade para web
Diego Eis
 
CSS3 - Novo contexto
Diego Eis
 
Padrões Web passado, presente, futuro
Diego Eis
 
Padrões Web e algumas vantagens para o designer
Diego Eis
 
Padrões Web - Um elogio ao ócio do desenvolvedor
Diego Eis
 

Recently uploaded (20)

PPTX
6. PMES PORTFOLIO_PINK DESIGN_T1-TE_A4.pptx
GynnelNicanor1
 
PDF
70% of Users Leave Unresponsive Sites – Is Yours Driving Them Away?
Virtual Employee Pvt. Ltd.
 
PPTX
Project Report on Corrosion (1).pptxkkkk
kaushikpkrishna2024
 
PPTX
Pendant Lights, Types and their applications
Disha Agrawal
 
PDF
ABS system PPT 2025 for used automatic backing system .pdf
altron1331
 
PPTX
Iot module of the module 4 is the very beautiful
prodbythre
 
PPTX
ABDULPPT New.pptx slide presentation for
aaabayomi30
 
PDF
Graphic Designing Article All about Graphic Designing
Techera
 
PPTX
Presentationghjgghjhg (11)hcpckxgjt.pptx
ishafarikarbel
 
PPTX
www ecommerce web based architecture.pptx
revathi148366
 
PPTX
Woven Fibers templete Title Lorem Ipsum pptx
VarunThukral8
 
PPTX
search engine optimization123244556.pptx
revathi148366
 
PPTX
FPCL Land Acquisition.pptxgggggjjjjjjjjj
radiologisthinarana
 
PPTX
Power BI - The future of Data Presentation and Visualizations
Techera
 
PDF
HISTORY OF Ethiopia and Horn of African
dereab29
 
PDF
Favorite Looks Menswear Spring Summer 2026
Ana Andjelic
 
PPTX
ArchitectingOnAWS_Module_13 goat bumrah i
m23aid005
 
PPTX
Round 1 Final Assessment-Chelsea Black.pptx
indiapoliticscom
 
PPTX
Robotic Arm Control System for help of robots you can easily operate things t...
altron1331
 
PPTX
4. PMES PORTFOLIO_BROWN DESIGN_T1-T3_A4.pptx
GynnelNicanor1
 
6. PMES PORTFOLIO_PINK DESIGN_T1-TE_A4.pptx
GynnelNicanor1
 
70% of Users Leave Unresponsive Sites – Is Yours Driving Them Away?
Virtual Employee Pvt. Ltd.
 
Project Report on Corrosion (1).pptxkkkk
kaushikpkrishna2024
 
Pendant Lights, Types and their applications
Disha Agrawal
 
ABS system PPT 2025 for used automatic backing system .pdf
altron1331
 
Iot module of the module 4 is the very beautiful
prodbythre
 
ABDULPPT New.pptx slide presentation for
aaabayomi30
 
Graphic Designing Article All about Graphic Designing
Techera
 
Presentationghjgghjhg (11)hcpckxgjt.pptx
ishafarikarbel
 
www ecommerce web based architecture.pptx
revathi148366
 
Woven Fibers templete Title Lorem Ipsum pptx
VarunThukral8
 
search engine optimization123244556.pptx
revathi148366
 
FPCL Land Acquisition.pptxgggggjjjjjjjjj
radiologisthinarana
 
Power BI - The future of Data Presentation and Visualizations
Techera
 
HISTORY OF Ethiopia and Horn of African
dereab29
 
Favorite Looks Menswear Spring Summer 2026
Ana Andjelic
 
ArchitectingOnAWS_Module_13 goat bumrah i
m23aid005
 
Round 1 Final Assessment-Chelsea Black.pptx
indiapoliticscom
 
Robotic Arm Control System for help of robots you can easily operate things t...
altron1331
 
4. PMES PORTFOLIO_BROWN DESIGN_T1-T3_A4.pptx
GynnelNicanor1
 

UX, Front-end and Back-end: How front-end can help these guys?