Aula 3. frameworks front end

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!

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.

Qual a importância?
• Ignorar a importância do design de interface pode ser o fator decisivo na rejeição de uma aplicação.

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.

Responsividade
• Construir sites que se adaptem aos diversos tipos de dispositivos.
• Google passará a considerar a responsividade para seu ranqueamento.

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?)

Acessibilidade
• Estar disponível para todos
• Mitigar barreiras para pessoas com necessidades especiais
• Visual
• Audição
• Motora
• Cognitiva

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.

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.

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.

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.

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

Vantagens
• Documentação detalhada
• Layout responsivos
• Se aplica desde sites a sistemas
• Padronização
• Cross Browser

Desvantagens
• Projetos com aparência parecida
• Engessado ao padrão do framework

Materialize (materializecss.com)

Foundation (foundation.zurb.com)

Semantic UI (semantic-ui.com)

Bootstrap (getbootstrap.com)

Bootstrap
Estrutura dos Arquivos

Bootstrap
Documento Base (usando CDN)

Bootstrap
Template Base

Bootstrap
Entendendo sua Meta Tags e Doctype

Bootstrap
Templates (startbootstrap.com)

Bootstrap
Container

Bootstrap
Grids

Bootstrap
Responsividade

Bootstrap
Navbar

Bootstrap
Tabelas

Bootstrap
Formularios

Bootstrap
Botões

Bootstrap
Modal

Bootstrap
Card

Atividade Prática
Descrição do trabalho em sala..

Prof. MSc. André Costa
andre.costa@unifacs.br

Aula 3. frameworks front end

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Aula 3. frameworks front end

Mais de andreluizlc

Aula 3. frameworks front end