UX, Front-end e Back-end... Na verdade, não é cada um na sua
description
Transcript of UX, Front-end e Back-end... Na verdade, não é cada um na sua
![Page 1: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/1.jpg)
Back-end, UX e Front-end Na verdade, não é cada um na sua…
![Page 2: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/2.jpg)
DIEGO EIS
@diegoeis @tableless !
!
!
tableless.com.br slideshare.net/diegoeis
![Page 3: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/3.jpg)
![Page 4: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/4.jpg)
"Uma das razões de haver uma
execução pobre no design é que
os times de UX precisam
aprender mais que apenas design.
Eles precisam aprender mais
desenvolvimento front-end."http://www.uxmatters.com/mt/archives/2012/04/great-user-
experiences-require-great-front-end-development.php
![Page 5: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/5.jpg)
“Ter apenas um
desenvolvedor front-end em
um time que só há
desenvolvedores back-end, é
uma receita para o desastre."
bit.ly/18MX8cgDon Roby no StackOverflow
![Page 6: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/6.jpg)
O FLUXO
![Page 7: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/7.jpg)
Geralmente os fluxos são lineares.
Principalmente quando se trata de websites ou projetos pequenos.
!Com a adoção dos padrões web, esse fluxo pode ficar paralelo, o que é
ótimo para ganhar velocidade.
O FLUXO PODE SER LINEAR OU PARALELO
![Page 8: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/8.jpg)
wireframe protótipo
design
front-end
back-end
![Page 9: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/9.jpg)
wireframe protótipo
design front-end back-end
![Page 10: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/10.jpg)
O FLUXO QUEBRADO
![Page 11: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/11.jpg)
UX PSD back-end
![Page 12: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/12.jpg)
![Page 13: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/13.jpg)
![Page 14: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/14.jpg)
![Page 15: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/15.jpg)
![Page 16: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/16.jpg)
![Page 17: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/17.jpg)
UX back-endfront-end
![Page 18: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/18.jpg)
UX back-endfront-end
![Page 19: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/19.jpg)
ENTREGAS
![Page 20: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/20.jpg)
Especificações em wireframes, ensinando como as coisas irão funcionar, suas variações e possíveis cenários.
O QUE O UX ENTREGA?
![Page 21: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/21.jpg)
Aí depende de como a equipe é montada em relação ao time de back-end. Mas ele pode entregar desde arquivos estáticos, prontos para serem implementados pelo back-end. Ou ele pode consumir uma API e entregar as coisas todas funcionando.
O QUE O FRONT ENTREGA?
![Page 22: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/22.jpg)
Ele entrega o ambiente pronto com o sistema totalmente funcional ou uma API completa para o front-end consumir. Mas uma coisa é certa, o Back-end é responsável por manter a “máquina" funcionando.
O QUE O BACK ENTREGA?
![Page 23: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/23.jpg)
O QUE É O QUE É?
![Page 24: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/24.jpg)
Backbone, por exemplo, não é uma linguagem server-side, mas trabalhamos com ela no back-end.
SE UM PROGRAMADOR MEXE COM BACKBONE, ELE É BACK OU FRONT?
![Page 25: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/25.jpg)
Server = Lado do Servidor Client = Lado do Cliente !Back = Bastidor que faz funcionar Front = O que o usuário vê
CADA COISA É UMA COISA
![Page 26: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/26.jpg)
O dev front-end une as pontas.
O QUE SÃO OS DEVS FRONT-END?
![Page 27: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/27.jpg)
Programadores back-end acham que é coisa de design. Designers acham que é programação.
FRONT-END É DESIGN OU PROGRAMAÇÃO
![Page 28: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/28.jpg)
Um zela pela experiência e design. O outro pela técnica e lógica.
FRONT-END DESIGNER FRONT-END PROGRAMADOR
![Page 29: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/29.jpg)
ux / ai back-endfront-end
É aquele cara que vai prezar pela
fidelidade do layout e vai pensar
junto com o UX quais
experiências, transições e etc o
usuário vai ver.
FRONT-END PROGRAMADOR
É aquele front-end que manja muito de
programação, mas não é programador.
Ele conhece pelo menos uma
linguagem de programação e manja dos
truques da área de back-end.
FRONT-END DESIGNER
![Page 30: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/30.jpg)
Moscas brancas no mercado. São os caras que fazem um bom design, escrevem ótimo código front-end e manja muito de back-end. !Eu conheço dois desses caras, mas um está na Holanda e outro está indo para o Canadá. :-\
FULL-STACK
![Page 31: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/31.jpg)
Organização e hierarquia de informação (HTML semântico). Comportamentos e interações que ajudam em fluxos e navegação.
O QUE O FRONT-END APRENDE COM UX?
![Page 32: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/32.jpg)
Lógica de programação. Automação de tarefas. Estruturação de dados.
O QUE O FRONT-END APRENDE COM BACK-END?
![Page 33: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/33.jpg)
Criamos um framework onde o UX produz design e requisições de uso e o back-end é cliente desse framework, chegando a fazer telas inteiras sozinhos usando apenas os elementos do framework.
COMO TRABALHAMOS NA LOCAWEB?
![Page 34: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/34.jpg)
Não é só o front-end que mantém, mas o UX precisa se envolver porque é de lá que os designs sairão. O back-end precisa se envolver porque eles podem sofrer com a documentação ou falta de módulos.
MANTER UM FRAMEWORK É UM TRABALHO DE TODOS
![Page 35: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/35.jpg)
Não existe tarefa para front, ou tarefa para ux, ou tarefa para back-end. Existe a tarefa e essa tarefa é compartilhada. Pensar assim evita gargálos. Evita o leva e traz de tarefas.
NA VERDADE, NÃO É CADA UM NA SUA
![Page 36: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/36.jpg)
Todo mundo se cruza no HTML. Por isso eu sou a favor de designers e programadores back-end aprenderem HTML.
HTML É O LUGAR COMUM
![Page 37: UX, Front-end e Back-end... Na verdade, não é cada um na sua](https://reader030.fdocumentos.tips/reader030/viewer/2022013121/553943544a7959c1688b4912/html5/thumbnails/37.jpg)
Amplexos! Perguntas?
@diegoeis @tableless !
tableless.com.br !A PALESTRA FICA AQUI: slideshare.net/diegoeis