SlideShare une entreprise Scribd logo
1  sur  46
Télécharger pour lire hors ligne
Frameworks Front-end
Frameworks para Desenvolvimento Web
Prof. MSc. André Costa - andre.costa@unifacs.br
SUMÁRIO
• Design	de	Interface	para	Web
• User Interface	(UI)	e	User Experience	(UX)
• Frameworks	CSS	para	Front-end
• Bootstrap
• Atividade	Prática
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Design	de	Interface	para	Web
O	que	é?
• O	design	de	interface	é	o	recurso	que conduz	a	interação do	ser	humano	com	
um	produto	físico	ou	virtual.	A	interface	varia	de	um	brinquedo,	aparelho	
eletrodoméstico,	até	um	aplicativo	para	smartphone	ou	uma	página	na	web.
• Na	prática,	o	design	de	interface	diz	respeito	à	parte visual,	à	usabilidade,	
arquitetura	da	informação,	navegação,	transição	de	telas.	Ou	seja,	todos	os	
recursos	que	incrementam	e	melhoram	a	forma	como	o	usuário	lida	com	o	
produto.
• Tudo	deve	ser	construído	em	virtude	da satisfação	do	elemento	humano!
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Design	de	Interface	para	Web
Qual	a	importância?
• É	o	principal	meio	de	comunicação	entre	o	software/dispositivo	e	o	
usuário.	Tem	que	tornar	o	produto	atraente.
• Uma	interface	mal	projetada	pode	proporcionar	uma	má	experiência,	
o	que	acarreta	negativamente	na	função	do	software,	e	claro,	se	torna	
uma	experiência	complicada	e	frustrante.
• Quando	bem	construída,	a	interface	garante	ao	utilizador	que	ele	possa	
realizar	todas	as	ações	e	tarefas	de	forma	simples	e	eficiente.
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Design	de	Interface	para	Web
Qual	a	importância?
• Ignorar	a	importância	do	design	de	interface	pode	ser	o fator	decisivo na	rejeição	de	uma	aplicação.
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Design	de	Interface	para	Web
Impacto	num	e-commerce
• A	grande	maioria	das decisões	de	compra passa	pelo	período	de	
cogitação,	que	frequentemente	se	inicia	com	pesquisas	na	internet.	
• Um	design	de	interface	bem	programado	facilita	a	busca	de	
informações	e	produtos	no	site	e	é	responsável	pelo caminho	do	
usuário	até	compra.
• Quando	usuários	navegam	na	página	por	pouco	tempo	podem	impactar	
o posicionamento	de	um	site	no	Google.
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Design	de	Interface	para	Web
Responsividade
• Construir	sites	que	se	adaptem aos	diversos	tipos	de	dispositivos.
• Google	passará	a	considerar	a	responsividade para	seu	ranqueamento.
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Design	de	Interface	para	Web
Usabilidade
• Facilidade	de	utilização	do	usuário
1. Aprendizagem	(É	intuitivo?)
2. Eficiência	(Faz	o	que	se	espera?)
3. Memorização	(Fácil	de	lembrar	como	utilizar?
4. Robustez	(Funciona	sem	erros?)
5. Satisfação	(causa	boa	experiência?)
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Design	de	Interface	para	Web
Acessibilidade
• Estar	disponível	para	todos
• Mitigar	barreiras	para	pessoas	com	necessidades	especiais
• Visual
• Audição
• Motora
• Cognitiva
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Design	de	Interface	para	Web
Designer	de	Interface
• O Designer	de	Interface	é	necessário	para	manter	e	fidelizar	usuários	
que	naveguem	nos	sites,	aplicativos	e	sistemas	de	uma	empresa.	Ele	
atua	na	construção	da	credibilidade	até	ao	convencimento	da	compra.
• As	atividades	de	um	especialista	na	área	incluem	o	levantamento	de	
informações	sobre	o	projeto,	a	localização	das	mesmas	na	interface	e	a	
forma	de	interação	com	o	usuário.
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
User Interface	(UI)	e	User Experience	(UX)
User Interface	(UI)
O User Interface – ou	interface	do	usuário	– é	tudo	aquilo	que	é	
perceptível	visualmente	em	alguma	plataforma	e	leva	o	usuário	a	uma	
interação	positiva.	 Pode	ser	um	botão,	um	menu	diferente	ou	até	
mesmo	um	som.
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
User Interface	(UI)	e	User Experience	(UX)
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
User Interface	(UI)	e	User Experience	(UX)
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
User Interface	(UI)	e	User Experience	(UX)
User Experience	(UX)
O User Experience	Design	– ou	design	da	experiência	do	usuário	– se	
preocupa	com	o	ponto	de	contato	de	um	produto/serviço,	com	as	
pessoas.	Este	produto/serviço	pode	ser	um	website,	um	aplicativo,	uma	
máquina,	um	dispositivo	móvel,	ponto	de	venda,	entre	outras	
plataformas	de	interação.
UX	Design	é	a	ciência	que	pensa	exclusivamente	na	relação	de	um	
produto	com	o	usuário,	buscando	torná-la	mais	natural	e	simples.
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
User Interface	(UI)	e	User Experience	(UX)
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
User Interface	(UI)	e	User Experience	(UX)
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
User Interface	(UI)	e	User Experience	(UX)
Mobile	First
Mobile	First é	um	conceito	aplicado	em	projetos	web	onde	o	foco	inicial	
da	arquitetura	e	desenvolvimento	é	direcionado	aos	dispositivos	móveis	e	
em	seguida	para	os	desktops.
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Framework	CSS	para	Front-end
O	que	é?
• Conjunto	de	bibliotecas	pré-preparadas	para	facilitar	o	desenvolvimento	
de	interface	de	sites	e	sistemas	web.
• Estabelece	um	conjunto	de	classes	em	CSS
• Estrutura	em	Grids	(Responsividade)
• Tipografia
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Framework	CSS	para	Front-end
Vantagens
• Documentação	detalhada
• Layout	responsivos
• Se	aplica	desde	sites	a	sistemas
• Padronização
• Cross	Browser
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Framework	CSS	para	Front-end
Desvantagens
• Projetos	com	aparência	parecida
• Engessado	ao	padrão	do	framework
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Framework	CSS	para	Front-end
Materialize	(materializecss.com)
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Framework	CSS	para	Front-end
Foundation	(foundation.zurb.com)
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Framework	CSS	para	Front-end
Semantic UI	(semantic-ui.com)
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Framework	CSS	para	Front-end
Bootstrap (getbootstrap.com)
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Estrutura	dos	Arquivos
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Documento	Base	(usando	CDN)
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Template	Base
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Entendendo	sua	Meta	Tags e	Doctype
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Templates (startbootstrap.com)
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Container
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Grids
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Grids
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Grids
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Grids
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Responsividade
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Responsividade
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Responsividade
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Responsividade
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Navbar
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Tabelas
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Formularios
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Botões
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Modal
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Bootstrap
Card
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Atividade	Prática
Descrição	do	trabalho	em	sala..
Frameworks	para	Desenvolvimento	Web	– Porf.	MSc.	André	Costa
Prof. MSc. André Costa
andre.costa@unifacs.br

Contenu connexe

Tendances

Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento WebSérgio Souza Costa
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a InternetLeonardo Soares
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Bruno Grange
 
Aula 1: Virtualização
Aula 1: VirtualizaçãoAula 1: Virtualização
Aula 1: Virtualizaçãocamila_seixas
 
Aula 1 - Introdução ao Mobile
Aula 1 - Introdução ao MobileAula 1 - Introdução ao Mobile
Aula 1 - Introdução ao MobileCloves da Rocha
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScriptBruno Catão
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfCesar Braz
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoJessyka Lage
 
Aula 01 - Sistemas Operacionais - Windows 10
Aula 01 - Sistemas Operacionais - Windows 10Aula 01 - Sistemas Operacionais - Windows 10
Aula 01 - Sistemas Operacionais - Windows 10LucasMansueto
 

Tendances (20)

Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
Protocolo TCP/IP
Protocolo TCP/IPProtocolo TCP/IP
Protocolo TCP/IP
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Aula 1: Virtualização
Aula 1: VirtualizaçãoAula 1: Virtualização
Aula 1: Virtualização
 
Arquitetura de Redes de Computadores
 Arquitetura de Redes de Computadores Arquitetura de Redes de Computadores
Arquitetura de Redes de Computadores
 
Aula 1 - Introdução ao Mobile
Aula 1 - Introdução ao MobileAula 1 - Introdução ao Mobile
Aula 1 - Introdução ao Mobile
 
Front End x Back End
Front End x Back EndFront End x Back End
Front End x Back End
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Plano de aula sobre HTML básico
Plano de aula sobre HTML básicoPlano de aula sobre HTML básico
Plano de aula sobre HTML básico
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Introdução ao SQL
Introdução ao SQLIntrodução ao SQL
Introdução ao SQL
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: Introdução
 
Aula 01 - Sistemas Operacionais - Windows 10
Aula 01 - Sistemas Operacionais - Windows 10Aula 01 - Sistemas Operacionais - Windows 10
Aula 01 - Sistemas Operacionais - Windows 10
 
Aula03 - JavaScript
Aula03 - JavaScriptAula03 - JavaScript
Aula03 - JavaScript
 

En vedette

Aula 5. frameworks mobile
Aula 5. frameworks mobileAula 5. frameworks mobile
Aula 5. frameworks mobileandreluizlc
 
5 Factors Impacting Your Big Data Project's Performance
5 Factors Impacting Your Big Data Project's Performance 5 Factors Impacting Your Big Data Project's Performance
5 Factors Impacting Your Big Data Project's Performance Qubole
 
Social Business: Frameworks for Next-Gen Organizational Structure | Enterpris...
Social Business: Frameworks for Next-Gen Organizational Structure | Enterpris...Social Business: Frameworks for Next-Gen Organizational Structure | Enterpris...
Social Business: Frameworks for Next-Gen Organizational Structure | Enterpris...Dion Hinchcliffe
 
Introduction to Enterprise Architecture
Introduction to Enterprise Architecture Introduction to Enterprise Architecture
Introduction to Enterprise Architecture Leo Shuster
 
Place in Space (AKA "How to Design A Concept Model")
Place in Space (AKA "How to Design A Concept Model")Place in Space (AKA "How to Design A Concept Model")
Place in Space (AKA "How to Design A Concept Model")Stephen Anderson
 
Integrating It Frameworks, Methodologies And Best Practices Into It Delivery ...
Integrating It Frameworks, Methodologies And Best Practices Into It Delivery ...Integrating It Frameworks, Methodologies And Best Practices Into It Delivery ...
Integrating It Frameworks, Methodologies And Best Practices Into It Delivery ...Alan McSweeney
 
IQ Crash Course - Big Data Analytics
IQ Crash Course - Big Data AnalyticsIQ Crash Course - Big Data Analytics
IQ Crash Course - Big Data AnalyticsInterQuest Group
 
Aula 6. trabalho da disciplina
Aula 6. trabalho da disciplinaAula 6. trabalho da disciplina
Aula 6. trabalho da disciplinaandreluizlc
 
Data Stream Processing - Concepts and Frameworks
Data Stream Processing - Concepts and FrameworksData Stream Processing - Concepts and Frameworks
Data Stream Processing - Concepts and FrameworksMatthias Niehoff
 
Net Promoter Score Pitfalls to Avoid
Net Promoter Score Pitfalls to AvoidNet Promoter Score Pitfalls to Avoid
Net Promoter Score Pitfalls to AvoidAureus Analytics
 
Bridging business analysis and business architecture - The Open Group webinar
Bridging business analysis and business architecture - The Open Group webinarBridging business analysis and business architecture - The Open Group webinar
Bridging business analysis and business architecture - The Open Group webinarCraig Martin
 
Visual Data Representation Techniques Combining Art and Design
Visual Data Representation Techniques Combining Art and DesignVisual Data Representation Techniques Combining Art and Design
Visual Data Representation Techniques Combining Art and DesignLogo Design Guru
 
Complete Business Frameworks Toolkit - Strategy, Marketing, Operations, Consu...
Complete Business Frameworks Toolkit - Strategy, Marketing, Operations, Consu...Complete Business Frameworks Toolkit - Strategy, Marketing, Operations, Consu...
Complete Business Frameworks Toolkit - Strategy, Marketing, Operations, Consu...Flevy.com Best Practices
 
Management Consultant Toolkit in powerpoint & Excel
Management Consultant Toolkit in powerpoint & ExcelManagement Consultant Toolkit in powerpoint & Excel
Management Consultant Toolkit in powerpoint & ExcelAurelien Domont, MBA
 
Beyond Measure, Erika Hall
Beyond Measure, Erika HallBeyond Measure, Erika Hall
Beyond Measure, Erika HallFuture Insights
 

En vedette (20)

Aula 5. frameworks mobile
Aula 5. frameworks mobileAula 5. frameworks mobile
Aula 5. frameworks mobile
 
5 Factors Impacting Your Big Data Project's Performance
5 Factors Impacting Your Big Data Project's Performance 5 Factors Impacting Your Big Data Project's Performance
5 Factors Impacting Your Big Data Project's Performance
 
Social Business: Frameworks for Next-Gen Organizational Structure | Enterpris...
Social Business: Frameworks for Next-Gen Organizational Structure | Enterpris...Social Business: Frameworks for Next-Gen Organizational Structure | Enterpris...
Social Business: Frameworks for Next-Gen Organizational Structure | Enterpris...
 
Introduction to Enterprise Architecture
Introduction to Enterprise Architecture Introduction to Enterprise Architecture
Introduction to Enterprise Architecture
 
Place in Space (AKA "How to Design A Concept Model")
Place in Space (AKA "How to Design A Concept Model")Place in Space (AKA "How to Design A Concept Model")
Place in Space (AKA "How to Design A Concept Model")
 
TOGAF Vs E-Tom
TOGAF Vs E-TomTOGAF Vs E-Tom
TOGAF Vs E-Tom
 
Integrating It Frameworks, Methodologies And Best Practices Into It Delivery ...
Integrating It Frameworks, Methodologies And Best Practices Into It Delivery ...Integrating It Frameworks, Methodologies And Best Practices Into It Delivery ...
Integrating It Frameworks, Methodologies And Best Practices Into It Delivery ...
 
Togaf 9 template solution concept diagram
Togaf 9 template   solution concept diagramTogaf 9 template   solution concept diagram
Togaf 9 template solution concept diagram
 
IQ Crash Course - Big Data Analytics
IQ Crash Course - Big Data AnalyticsIQ Crash Course - Big Data Analytics
IQ Crash Course - Big Data Analytics
 
MEC Concept Plans and Diagrams
MEC Concept Plans and DiagramsMEC Concept Plans and Diagrams
MEC Concept Plans and Diagrams
 
Aula 6. trabalho da disciplina
Aula 6. trabalho da disciplinaAula 6. trabalho da disciplina
Aula 6. trabalho da disciplina
 
TOGAF in 8 Steps
TOGAF in 8 StepsTOGAF in 8 Steps
TOGAF in 8 Steps
 
TOGAF ADM cycle
TOGAF ADM cycleTOGAF ADM cycle
TOGAF ADM cycle
 
Data Stream Processing - Concepts and Frameworks
Data Stream Processing - Concepts and FrameworksData Stream Processing - Concepts and Frameworks
Data Stream Processing - Concepts and Frameworks
 
Net Promoter Score Pitfalls to Avoid
Net Promoter Score Pitfalls to AvoidNet Promoter Score Pitfalls to Avoid
Net Promoter Score Pitfalls to Avoid
 
Bridging business analysis and business architecture - The Open Group webinar
Bridging business analysis and business architecture - The Open Group webinarBridging business analysis and business architecture - The Open Group webinar
Bridging business analysis and business architecture - The Open Group webinar
 
Visual Data Representation Techniques Combining Art and Design
Visual Data Representation Techniques Combining Art and DesignVisual Data Representation Techniques Combining Art and Design
Visual Data Representation Techniques Combining Art and Design
 
Complete Business Frameworks Toolkit - Strategy, Marketing, Operations, Consu...
Complete Business Frameworks Toolkit - Strategy, Marketing, Operations, Consu...Complete Business Frameworks Toolkit - Strategy, Marketing, Operations, Consu...
Complete Business Frameworks Toolkit - Strategy, Marketing, Operations, Consu...
 
Management Consultant Toolkit in powerpoint & Excel
Management Consultant Toolkit in powerpoint & ExcelManagement Consultant Toolkit in powerpoint & Excel
Management Consultant Toolkit in powerpoint & Excel
 
Beyond Measure, Erika Hall
Beyond Measure, Erika HallBeyond Measure, Erika Hall
Beyond Measure, Erika Hall
 

Similaire à Aula 3. frameworks front end

Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuárioBruno Biagioni Neto
 
Design para a web - da interface ao branding
Design para a web - da interface ao brandingDesign para a web - da interface ao branding
Design para a web - da interface ao brandingJoão Alves
 
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...Leandro Ciccarelli
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Renato Melo
 
UX e UI no Webdesign - Aula 08 - Webdesign - 2019
UX e UI no Webdesign - Aula 08 - Webdesign - 2019UX e UI no Webdesign - Aula 08 - Webdesign - 2019
UX e UI no Webdesign - Aula 08 - Webdesign - 2019Renato Melo
 
Workshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos MóveisWorkshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos MóveisDaniel Lugondi
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioRenato Melo
 
UX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuárioUX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuárioRenato Melo
 
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01Renato Melo
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoRodrigo Correia
 
Por que você vai se apaixonar por design e UX?!
Por que você vai se apaixonar por design e UX?!Por que você vai se apaixonar por design e UX?!
Por que você vai se apaixonar por design e UX?!Priscilla Albuquerque
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalMarconi Pacheco
 
UX e UI no Webdesign - Aula 02 - Webdesign - 2020
UX e UI no Webdesign - Aula 02 - Webdesign - 2020UX e UI no Webdesign - Aula 02 - Webdesign - 2020
UX e UI no Webdesign - Aula 02 - Webdesign - 2020Renato Melo
 
UX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSUX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSDiego Moraes
 
"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Resp...
"Estratégia para “Responsive UX”"-  #7 Industry Sessions by EDIT. / UX & Resp..."Estratégia para “Responsive UX”"-  #7 Industry Sessions by EDIT. / UX & Resp...
"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Resp...EDIT. - Disruptive Digital Education
 

Similaire à Aula 3. frameworks front end (20)

Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
 
User experience
User experienceUser experience
User experience
 
Design para a web - da interface ao branding
Design para a web - da interface ao brandingDesign para a web - da interface ao branding
Design para a web - da interface ao branding
 
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07
 
UX e UI no Webdesign - Aula 08 - Webdesign - 2019
UX e UI no Webdesign - Aula 08 - Webdesign - 2019UX e UI no Webdesign - Aula 08 - Webdesign - 2019
UX e UI no Webdesign - Aula 08 - Webdesign - 2019
 
Workshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos MóveisWorkshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos Móveis
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do Usuário
 
UX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuárioUX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuário
 
O que é Web Designer?
O que é Web Designer?O que é Web Designer?
O que é Web Designer?
 
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
 
Por que você vai se apaixonar por design e UX?!
Por que você vai se apaixonar por design e UX?!Por que você vai se apaixonar por design e UX?!
Por que você vai se apaixonar por design e UX?!
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface Digital
 
UX e UI no Webdesign - Aula 02 - Webdesign - 2020
UX e UI no Webdesign - Aula 02 - Webdesign - 2020UX e UI no Webdesign - Aula 02 - Webdesign - 2020
UX e UI no Webdesign - Aula 02 - Webdesign - 2020
 
UX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSUX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOS
 
Cv alexandre rezendedecastro
Cv alexandre rezendedecastroCv alexandre rezendedecastro
Cv alexandre rezendedecastro
 
"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Resp...
"Estratégia para “Responsive UX”"-  #7 Industry Sessions by EDIT. / UX & Resp..."Estratégia para “Responsive UX”"-  #7 Industry Sessions by EDIT. / UX & Resp...
"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Resp...
 
UX Design
UX DesignUX Design
UX Design
 

Plus de andreluizlc (20)

Aula 4. bibliotecas js
Aula 4. bibliotecas jsAula 4. bibliotecas js
Aula 4. bibliotecas js
 
PHP
PHPPHP
PHP
 
Feriado
FeriadoFeriado
Feriado
 
Atividade
AtividadeAtividade
Atividade
 
Avaliação
AvaliaçãoAvaliação
Avaliação
 
Js
JsJs
Js
 
Css
CssCss
Css
 
Html formulário
Html   formulárioHtml   formulário
Html formulário
 
Html tabela
Html   tabelaHtml   tabela
Html tabela
 
Apresentação e Introdução ao HTML
Apresentação e Introdução ao HTMLApresentação e Introdução ao HTML
Apresentação e Introdução ao HTML
 
Apresentação + html (tags)
Apresentação + html (tags)Apresentação + html (tags)
Apresentação + html (tags)
 
CSS
CSSCSS
CSS
 
Trabalho
TrabalhoTrabalho
Trabalho
 
Revisão
RevisãoRevisão
Revisão
 
Prática
PráticaPrática
Prática
 
PHP
PHPPHP
PHP
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Html (tabela)
Html (tabela)Html (tabela)
Html (tabela)
 
Html (formulário)
Html (formulário)Html (formulário)
Html (formulário)
 
Feriado
FeriadoFeriado
Feriado
 

Aula 3. frameworks front end