Design na Web e Dispositivos Móveis

Prévia do material em texto

Indaial – 2022
Móveis
Prof. Gabriel Marante de Oliveira
1a Edição
Design na Web e 
Dispositivos
Impresso por:
Copyright © UNIASSELVI 2022
Elaboração:
Prof. Gabriel Marante de Oliveira
Revisão, Diagramação e Produção:
 Equipe Desenvolvimento de Conteúdos EdTech
Centro Universitário Leonardo da Vinci – UNIASSELVI
 Ficha catalográfica elaborada pela equipe Conteúdos EdTech UNIASSELVI
O48d
Oliveira, Gabriel Marante de
Design na web e dispositivos móveis. / Gabriel Marante de Oliveira 
– Indaial: UNIASSELVI, 2022.
152 p.; il.
ISBN 978-65-5663-778-5
ISBN Digital 978-65-5663-773-0
1. Design de interfaces. - Brasil. II. Centro Universitário Leonardo 
da Vinci.
CDD 004
Olá, acadêmico! Seja bem-vindo ao Livro Didático Design na Web e Dispositivos 
Móveis. O objetivo deste livro é capacitar o aluno a construir e avaliar o design de 
interfaces na web e dispositivos móveis. Para tanto, serão estudados os fundamentos 
da área de design e computação, além das técnicas e ferramentas direcionadas para 
o desenvolvimento design de sistemas digitais. Inicialmente, analisaremos a evolução 
do design e das técnicas que se aplicam na perspectiva da interface e usabilidade 
desses ambientes. A seguir, serão estudados os conceitos específicos da área, suas 
particularidades, fundamentação teórica da tecnologia dominante e a aplicação de 
técnicas e ferramentas que irão preparar para a prática profissional. 
Na Unidade 1, será abordada a evolução do design digital, os fundamentos de 
design, os fundamentos de interação entre o humano e o computador e a caracterização 
tecnológica do ambiente web e dispositivo móvel.
Em seguida, na Unidade 2, será estudada a usabilidade e as técnicas e padrões 
de análise de interface, as abordagens de ergonomia e as técnicas de UI (User Interface) 
e UX (User eXperience).
Por fim, na Unidade 3, serão estudadas as arquiteturas de informação, os 
padrões de arquitetura, os métodos de avaliação de sistemas para web e dispositivos 
móveis, e os panoramas de evolução dos designs. 
Bons estudos!
Prof. Gabriel Marante de Oliveira 
APRESENTAÇÃO
Olá, acadêmico! Para melhorar a qualidade dos materiais ofertados a 
você – e dinamizar, ainda mais, os seus estudos –, a UNIASSELVI disponibiliza materiais 
que possuem o código QR Code, um código que permite que você acesse um conteúdo 
interativo relacionado ao tema que está estudando. Para utilizar essa ferramenta, acesse 
as lojas de aplicativos e baixe um leitor de QR Code. Depois, é só aproveitar essa facilidade 
para aprimorar os seus estudos.
GIO
QR CODE
Você lembra dos UNIs?
Os UNIs eram blocos com informações adicionais – muitas 
vezes essenciais para o seu entendimento acadêmico 
como um todo. Agora, você conhecerá a GIO, que ajudará 
você a entender melhor o que são essas informações 
adicionais e por que poderá se beneficiar ao fazer a leitura 
dessas informações durante o estudo do livro. Ela trará 
informações adicionais e outras fontes de conhecimento que 
complementam o assunto estudado em questão.
Na Educação a Distância, o livro impresso, entregue a todos os 
acadêmicos desde 2005, é o material-base da disciplina. A partir 
de 2021, além de nossos livros estarem com um novo visual 
– com um formato mais prático, que cabe na bolsa e facilita a 
leitura –, prepare-se para uma jornada também digital, em que 
você pode acompanhar os recursos adicionais disponibilizados 
através dos QR Codes ao longo deste livro. O conteúdo 
continua na íntegra, mas a estrutura interna foi aperfeiçoada 
com uma nova diagramação no texto, aproveitando ao máximo 
o espaço da página – o que também contribui para diminuir 
a extração de árvores para produção de folhas de papel, por 
exemplo. Assim, a UNIASSELVI, preocupando-se com o impacto 
de ações sobre o meio ambiente, apresenta também este 
livro no formato digital. Portanto, acadêmico, agora você tem a 
possibilidade de estudar com versatilidade nas telas do celular, 
tablet ou computador. 
Junto à chegada da GIO, preparamos também um novo 
layout. Diante disso, você verá frequentemente o novo visual 
adquirido. Todos esses ajustes foram pensados a partir de 
relatos que recebemos nas pesquisas institucionais sobre os 
materiais impressos, para que você, nossa maior prioridade, 
possa continuar os seus estudos com um material atualizado 
e de qualidade.
ENADE
LEMBRETE
Olá, acadêmico! Iniciamos agora mais uma 
disciplina e com ela um novo conhecimento. 
Com o objetivo de enriquecer seu conheci-
mento, construímos, além do livro que está em 
suas mãos, uma rica trilha de aprendizagem, 
por meio dela você terá contato com o vídeo 
da disciplina, o objeto de aprendizagem, materiais complementa-
res, entre outros, todos pensados e construídos na intenção de 
auxiliar seu crescimento.
Acesse o QR Code, que levará ao AVA, e veja as novidades que 
preparamos para seu estudo.
Conte conosco, estaremos juntos nesta caminhada!
Acadêmico, você sabe o que é o ENADE? O Enade é um 
dos meios avaliativos dos cursos superiores no sistema federal de 
educação superior. Todos os estudantes estão habilitados a participar 
do ENADE (ingressantes e concluintes das áreas e cursos a serem 
avaliados). Diante disso, preparamos um conteúdo simples e objetivo 
para complementar a sua compreensão acerca do ENADE. Confira, 
acessando o QR Code a seguir. Boa leitura!
SUMÁRIO
UNIDADE 1 - FUNDAMENTOS DE DESIGN PARA WEB E DISPOSITIVOS MÓVEIS ............... 1
TÓPICO 1 - FUNDAMENTOS DE INTERFACE .........................................................................3
1 INTRODUÇÃO .......................................................................................................................3
2 FUNDAMENTOS DE INTERFACE ........................................................................................3
2.1 COMUNICAÇÃO HUMANO COMPUTADOR .......................................................................................4
2.2 PROPRIEDADES DA INTERFACE NO AMBIENTE DIGITAL ............................................................7
2.3 ENGENHARIA SEMIÓTICA ................................................................................................................... 9
2.3.1 Inspeção Semiótica ................................................................................................................... 11
2.3.2 Avaliação de comunicabilidade ............................................................................................ 13
RESUMO DO TÓPICO 1 ......................................................................................................... 15
AUTOATIVIDADE .................................................................................................................. 16
TÓPICO 2 - DESENVOLVIMENTO DE SOFTWARE PARA WEB ............................................ 19
1 INTRODUÇÃO ..................................................................................................................... 19
2 AMBIENTE DE DESENVOLVIMENTO WEB ....................................................................... 20
2.1 NOÇÕES DE LINGUAGEM DE DESENVOLVIMENTO PARA WEB ................................................24
2.2 CAMADAS DE INTEGRAÇÃO WEB ...................................................................................................25
RESUMO DO TÓPICO 2 .........................................................................................................27
AUTOATIVIDADE ................................................................................................................. 28
TÓPICO 3 - DESENVOLVIMENTO DE SOFTWARE PARA DISPOSITIVOS MÓVEIS ............. 31
1 INTRODUÇÃO ..................................................................................................................... 31
2 AMBIENTE DE DESENVOLVIMENTO DISPOSITIVOS MÓVEIS ......................................... 31
2.1 NOÇÕES DE LINGUAGEM DE DESENVOLVIMENTO PARA MOBILE ..........................................32
RESUMO DO TÓPICO 3 ........................................................................................................35
AUTOATIVIDADE ................................................................................................................. 36
TÓPICO 4 - DESIGN NA WEB E DISPOSITIVOS MÓVEIS .................................................... 39
1 INTRODUÇÃO .................................................................................................................... 39
2 PADRÕES DE PROJETO DE DESIGN ............................................................................... 39
2.1 TIPOS DE DESIGN ................................................................................................................................ 41
2.2 FERRAMENTAS DE DESENVOLVIMENTO ......................................................................................43
3 DESENVOLVIMENTO DE PROTÓTIPO DE INTERFACE .................................................. 45
3.1 DESENVOLVIMENTO DE PROTÓTIPO ...........................................................................................45
LEITURA COMPLEMENTAR ................................................................................................ 46
RESUMO DO TÓPICO 4 ........................................................................................................ 49
AUTOATIVIDADE ................................................................................................................. 50
REFERÊNCIAS ..................................................................................................................... 52
UNIDADE 2 — USABILIDADE E INTERFACE COM O USUÁRIO .......................................... 55
TÓPICO 1 — ERGONOMIA E USABILIDADE EM PLATAFORMAS DIGITAIS .........................57
1 INTRODUÇÃO .....................................................................................................................57
2 FUNDAMENTOS DE ERGONOMIA .....................................................................................57
2.1 A ERGONOMIA NO AMBIENTE DIGITAL ...........................................................................................59
2.2 A INSERÇÃO DE NOVOS USUÁRIOS E A USABILIDADE.............................................................60
RESUMO DO TÓPICO 1 ........................................................................................................ 65
AUTOATIVIDADE ................................................................................................................. 66
TÓPICO 2 - INTERFACE HUMANO COMPUTADOR ............................................................ 69
1 INTRODUÇÃO .................................................................................................................... 69
2 PADRÕES DE INTERFACE ................................................................................................ 69
2.1 COR NO DESIGN GRÁFICO ................................................................................................................71
2.1.1 Padrões de criação de layout de dispositivos móveis ...................................................... 72
3 CAMADAS DE INTERFACE ................................................................................................76
3.1 TÉCNICAS DE ANÁLISE DA INTERFACE ......................................................................................... 77
RESUMO DO TÓPICO 2 .........................................................................................................79
AUTOATIVIDADE ................................................................................................................. 80
TÓPICO 3 - UI – USER INTERFACE ..................................................................................... 83
1 INTRODUÇÃO .................................................................................................................... 83
2 TERMINOLOGIA UI ........................................................................................................... 83
2.1 DESIGN DE INTERAÇÃO .................................................................................................................... 84
2.2 DESIGN VISUAL ...................................................................................................................................85
RESUMO DO TÓPICO 3 ........................................................................................................ 86
AUTOATIVIDADE ..................................................................................................................87
TÓPICO 4 - UX – USER EXPERIENCE ................................................................................. 89
1 INTRODUÇÃO .................................................................................................................... 89
2 TERMINOLOGIA UX .......................................................................................................... 89
2.1 PESQUISA COM O USUÁRIO..............................................................................................................90
2.2 ESTRATÉGIAS DE CONTEÚDO .........................................................................................................92
LEITURA COMPLEMENTAR ................................................................................................ 94
RESUMO DO TÓPICO 4 .........................................................................................................96
AUTOATIVIDADE ..................................................................................................................97
REFERÊNCIAS ......................................................................................................................99
UNIDADE 3 — ARQUITETURA E AVALIAÇÃO DE SISTEMAS PARA WEB 
 E DISPOSITIVOS MÓVEIS ...........................................................................103
TÓPICO 1 — ARQUITETURA DA INFORMAÇÃO NA WEB E DISPOSITIVOS MÓVEIS.........105
1 INTRODUÇÃO ...................................................................................................................105
2 ASPECTOS DA ARQUITETURA DA INFORMAÇÃO NA WEB E DISPOSITIVOS MÓVEIS .......106
2.1 FUNDAMENTOS DE ARQUITETURA DA INFORMAÇÃO E SISTEMAS ..................................... 107
2.2 MODELOS DE ANÁLISE DA ARQUITETURA ..................................................................................111
2.3 CAMADAS DE INTERAÇÃO MVC ....................................................................................................113
RESUMO DO TÓPICO 1 ....................................................................................................... 116
AUTOATIVIDADE .................................................................................................................117
TÓPICO 2 - GRÁFICOS E EDIÇÃO DE IMAGENS ............................................................... 119
1 INTRODUÇÃO ................................................................................................................... 119
2 INSERÇÃO DE GRÁFICOS EM INTERFACE ..................................................................... 119
2.1 FUNDAMENTOS DE EDIÇÃO DE IMAGENS ................................................................................ 123
2.2 AVALIAÇÃO GRÁFICA E DE IMAGEM NAS INTERFACES .......................................................... 124
RESUMO DO TÓPICO 2 .......................................................................................................126
AUTOATIVIDADE ................................................................................................................ 127
TÓPICO 3 - MUNDO DIGITAL, MOBILIDADE E SUAS INOVAÇÕES ...................................129
1 INTRODUÇÃO ...................................................................................................................129
2 EVOLUÇÃO DIGITAL ........................................................................................................129
2.1 INOVAÇÃO DIGITAL ............................................................................................................................1302.2 ADAPTABILIDADE DAS TECNOLOGIAS ÀS NOVAS REALIDADES .........................................133
RESUMO DO TÓPICO 3 .......................................................................................................134
AUTOATIVIDADE ................................................................................................................135
TÓPICO 4 - TÉCNICAS DE AVALIAÇÃO E APRIMORAMENTO DE INTERFACE ................ 137
1 INTRODUÇÃO ................................................................................................................... 137
2 TÉCNICAS DE AVALIAÇÃO MULTIDIMENSIONAL .......................................................... 137
2.1 CAMADAS DE ANÁLISE DA INTERFACE ....................................................................................... 139
3 PERSPECTIVAS DE ANÁLISE DA INTERFACE ...............................................................143
LEITURA COMPLEMENTAR ...............................................................................................146
RESUMO DO TÓPICO 4 .......................................................................................................148
AUTOATIVIDADE ................................................................................................................149
REFERÊNCIAS .................................................................................................................... 151
1
UNIDADE 1 - 
FUNDAMENTOS DE 
DESIGN PARA WEB E 
DISPOSITIVOS MÓVEIS
OBJETIVOS DE APRENDIZAGEM
PLANO DE ESTUDOS
A partir do estudo desta unidade, você deverá ser capaz de:
• compreender as interações entre o usuário e como os sistemas computacionais 
evoluíram, analisando essas evolução, sob a perspectiva do software, do hardware 
e da interface entre o usuário e o sistema;
• analisar o design nos ambientes digitais com base em técnicas apresentadas, 
demonstrando como essas técnicas têm evoluído em seus aspectos visuais, de 
acessibilidade e de integração de novos recursos;
• saber como são estruturados os sistemas de web e dispositivos móveis pela 
perspectiva das linguagens computacionais, apresentado os fundamentos das 
linguagens utilizadas no desenvolvimento dos sistemas e do design;
• conhecer os padrões de design, os tipos predominantes de design e como 
implementar esses padrões no desenvolvimento do design das interfaces, além das 
ferramentas que auxiliam o desenvolvimento de sistemas digitais e como aplicar 
essas ferramentas na avaliação dos design;
• saber quais são os designs predominantes e como evoluíram os designs.
Esta unidade está dividida em quatro tópicos. No decorrer dela, você encontrará 
autoatividades com o objetivo de reforçar o conteúdo apresentado.
TÓPICO 1 – FUNDAMENTOS DE INTERFACE
TÓPICO 2 – DESENVOLVIMENTO DE SOFTWARE PARA WEB
TÓPICO 3 – DESENVOLVIMENTO DE SOFTWARE PARA DISPOSITIVOS MÓVEIS
TÓPICO 4 – DESIGN NA WEB E DISPOSITIVOS MÓVEIS
Preparado para ampliar seus conhecimentos? Respire e vamos em frente! Procure 
um ambiente que facilite a concentração, assim absorverá melhor as informações.
CHAMADA
2
CONFIRA 
A TRILHA DA 
UNIDADE 1!
Acesse o 
QR Code abaixo:
3
FUNDAMENTOS DE INTERFACE
1 INTRODUÇÃO
Nas últimas décadas, a evolução dos computadores e das interfaces foi enorme. 
Desde as primeiras telas monocromáticas aos atuais smartphones houve uma grande 
mudança na interação com o usuário. 
As alterações ocorreram para tornar o design mais intuitivo, fácil, ágil e agradável na 
relação do usuário com a interface dos aparelhos, seja um computador ou um dispositivo 
móvel. Muito da evolução tecnológica tem focado na relação do usuário com o dispositivo.
Os objetivos desta unidade visam apresentar ao aluno os fundamentos técnicos 
de design no ambiente web e dos dispositivos móveis; apresentar as perspectivas do 
design, interface e usabilidades no ambiente web e mobile; apresentar os conceitos 
específicos da área, suas particularidades, fundamentação teórica da tecnologia 
dominante; e, por fim, mostrar a aplicação de técnicas e ferramentas que irão preparar o 
aluno para a prática profissional. 
Nesta unidade, mais especificamente, serão estudados os fundamentos 
de design e bases computacionais dos sistemas web e dos dispositivos móveis. As 
seguintes perguntas serão norteadoras deste capítulo: como as interações entre o 
usuário e os sistemas computacionais evoluíram? O que é design nos ambientes digitais? 
Como compreender a interface dos sistemas? Como são estruturados os sistemas de 
web e dispositivos móveis pela perspectiva das linguagens computacionais? Como são 
estabelecidos os padrões de design? Quais são os designs predominantes? 
Nos tópicos a seguir, serão analisadas todas essas questões e, por fim, a primeira 
parte do desenvolvimento de uma interface.
TÓPICO 1 - UNIDADE 1
2 FUNDAMENTOS DE INTERFACE
A partir daqui, serão apresentados os principais fundamentos sobre interface 
e seu histórico. Serão analisados os tópicos acerca da relação entre o humano e o 
computador, o que é a semiótica e Engenharia Semiótica e a relação dessas áreas 
com o design de interfaces. 
4
2.1 COMUNICAÇÃO HUMANO COMPUTADOR
Inicialmente, “design” é um termo bastante amplo. De modo geral, pode-se 
definir design como o processo de criação de um produto com o objetivo de oferecer ao 
usuário um produto fácil de usar, intuitivo e agradável, atingindo o seu objetivo final. No 
caso do ambiente web e dos dispositivos móveis, o design está intimamente ligado a 
dois aspectos, sendo: os aspectos físicos do dispositivo (tamanho, espessura, desenho 
etc.) e a apresentação das informações dispostas na tela e a forma de acesso a essas 
informações no dispositivo. Esta disciplina é focada no segundo aspecto, a apresentação 
das informações na tela e a interação do usuário com essas informações.
Desde o surgimento dos computadores, e durante várias décadas, o usuário de 
sistemas computacionais se deparava com uma tela escura e com as informações em “fósforo-
verde”, nada agradável de usar. Isso afetava diretamente a produtividade dos funcionários, 
visto o fato de ter que trabalhar várias horas por dia com uma interface pouco amigável. 
FIGURA 1 – TELA DOS PRIMEIROS COMPUTADORES
FONTE: O autor
As telas dos primeiros computadores eram monocráticas e continham somente 
texto, o que tornava entediante e cansativo o trabalho diário. A grande virada iniciou com o 
surgimento das telas superpostas do Windows, do mouse, das telas em cores, da internet e 
de diversas possibilidades de apresentação da informação. Apareceram nas telas imagens, 
filmes e áudio, colocando o design como foco de atenção. Assim, a relação do usuário com 
os sistemas começou a ser objeto de estudos dos desenvolvedores de sistemas. 
A evolução passou por várias etapas. Com o surgimento dos sites na internet, não 
era raro encontrar uma página extremamente carregada de informações, com cores fortes, 
muitas figuras (algumas em movimento) e pouco amigável. Muitas vezes o usuário tinha 
dificuldade de encontrar o que realmente queria, devido a um excesso de informações 
e imagens, levando a desistir de usar o sistema na web, como apresentado na Figura 2.
5
No Brasil, foi criada uma legislação direcionada a garantir a acessibilidade, 
inclusive a acessibilidade em ambientes digitais. Ela foi criada em 2004, 
a partir do Decreto n° 5.296, em que são estabelecidas normas para a 
promoção da acessibilidade, garantindo o acesso global à informação. Quer 
saber mais? Confira: https://bit.ly/3tcb1lm. 
IMPORTANTE
FIGURA 2 – ATENÇÃO AO EXCESSO DE INFORMAÇÕES
FONTE: O autor
Diante desse panorama, os cientistas da computação perceberam a necessidade 
de elaborar melhores designs, estudar melhor o comportamento do usuário e sua relação 
com os sistemas computacionais, desenvolvendo métodos e ferramentas específicas 
de avaliação, que visam aprimorar a relação do humano com o computador. Surgiu, 
nesse ponto, o profissional de design em sistemas de informação. 
O designer deve teruma atenção muito grande na apresentação das informações, 
qualquer que seja essa informação. Então, como definir o profissional de designer de ambientes 
digitais? Rocha e Baranauskas (2003, p. 7), definem a profissão do designer de software como:
Designers de software têm explorado maneiras melhores de organizar 
informação graficamente. Eles têm desenvolvido linguagens de con-
sulta e facilidades visuais para entrada, busca e saída de informação. 
Têm usado sons (música e voz), representações tridimensionais, ani-
mação e vídeo para melhorar o conteúdo e a expressão das interfaces. 
Técnicas como manipulação direta, telepresença e realidade virtual 
mudam a maneira de interagir e de pensar sobre computadores.
É possível perceber a importância da relação do ser humano com os dispositivos 
que utiliza, principalmente pelo uso excessivo no cotidiano. A relação humano/
computador concentra, também, os aspectos a seguir:
6
• Existe uma integração cada vez maior de diferentes usuários com os sistemas 
computacionais (idosos, com limitações físicas e psicológicas, diferenças sociais 
etc.), ou seja, o perfil do usuário tem-se alterado, necessitando que os sistemas se 
adaptem aos diversos tipos de público.
• Várias mídias e recursos têm integrado (texto, áudio, vídeo, validações biométricas 
digitais e faciais, telas “touch-screen” etc.). 
O designer precisa seguir fundamentos que o auxiliem no desenvolvimento de 
uma boa interface. Inicialmente, Segundo Benyon (2011, p.381), os primeiros aspectos a 
serem analisados são os “princípios do design universal”:
• Uso equitativo: a interface não pode excluir nenhum grupo.
• Flexibilidade de uso: a interface deve englobar uma grande 
possibilidade de uso.
• Uso simples e intuitivo: a interação do usuário com o sistema 
deve ser de fácil aprendizagem.
• Informação perceptível: a comunicação da interface deve fornecer 
as informações corretas e necessárias para a utilização do sistema.
• Tolerância ao erro: a interface deve evitar ao máximo situações 
onde possam ocorrer erros de entrada ou saída de dados.
• Baixo esforço físico: o design deve ser confortável e evitar fadiga.
• Tamanho e espaço para aproximação e uso: condições de ergonomia 
são fundamentais para evitar esforço desnecessário para o usuário.
Dias (2006, p. 42), elenca quais as variáveis devem ser analisadas ao se 
desenvolver uma interface:
• Facilidade de uso – o usuário quer ter acesso imediato à 
informação que deseja.
• Facilidade de reuso – o usuário pode desfazer uma ação incorreta.
• Eficiência – o usuário espera que o sistema execute o que se espera.
• Poucos erros – o usuário não quer se deparar com mensagens 
indesejáveis.
• Autoaprendizagem – o sistema deve se adaptar ao usuário.
• Satisfação e prazer – o sistema não deve ser entediante ou cansativo.
• Percepção favorável do usuário – o usuário deseja ter boa 
impressão do uso do sistema.
• Entradas dos campos pré-definidos – os campos devem ser 
fáceis de operar.
• Crítica às entradas – o sistema deve barrar ações incorretas. 
• Atualização dos dados já fornecidos – os campos devem ser 
atualizados.
• Capacidade de selecionar dispositivos de entrada/saída – 
integração fácil entre dispositivos.
• Possibilidade de formatação da saída – o sistema deve se 
adaptar a cada usuário.
• Saídas padronizadas e identificadas – os campos devem ser 
padronizados.
• Existência de sistema de ajuda – o usuário espera contar com 
ajuda automática do sistema.
• Documentação abrangente – deve haver uma documentação 
com informações importantes para o usuário.
• Procedimentos dos manuais são suficientes para executar as 
tarefas – os manuais devem ser claros.
7
Portanto, elaborar o design de uma interface requer uma análise detalhada sobre vá-
rios aspectos. O designer deve elaborar um plano de desenvolvimento de uma interface, ana-
lisando vários aspectos a serem considerados. Essa elaboração será iniciada nesta unidade.
FIGURA 3 – A BUSCA PELO USO INTUITIVO E DE FÁCIL MANIPULAÇÃO
FONTE: <https://bit.ly/3hhXF1r>. Acesso em: 31 jan. 2022.
No processo de desenvolvimento do design de uma interface, é fundamental 
compreender com clareza a relação humano computador, considerando os seus 
diversos aspectos físicos, psicológicos e sociais. A seguir, serão analisadas com mais 
detalhes quais são as propriedades da interface no ambiente digital.
2.2 PROPRIEDADES DA INTERFACE NO AMBIENTE DIGITAL
Diante da evolução dos dispositivos computacionais, a interface ganhou um status 
especial, seja um computador desktop ou um aparelho celular. O papel do designer deve con-
siderar a elaboração de um esquema de propriedades a serem analisadas durante todo o 
desenvolvimento do design do dispositivo. Rocha e Baranauskas (2003, p. 36) consideram 
que o designer deve elaborar um esquema que considere as propriedades elencadas a seguir:
• Visibilidade: apenas as coisas necessárias têm que estar visíveis 
para indicar quais as partes podem ser operadas e como e para 
indicar como o usuário interage com um dispositivo. Visibilidade 
o mapeamento entre ações pretendidas e as ações reais.
• Modelo conceitual: um bom modelo conceitual permite prever o 
efeito de ações. Sem um bom modelo conceitual opera-se sob 
comando, cegamente.
• Mapeamento: mapeamento é o termo técnico para denotar o 
relacionamento entre duas entidades. No caso de interfaces, 
indica o relacionamento entre os controles e seus movimentos 
e os resultados.
• Feedback: retornar ao usuário informação sobre as ações 
que foram feitas, quais os resultados obtidos, é um conceito 
conhecido da teoria da informação e controle.
8
No ambiente web, Rocha e Baranauskas (2003), explicam que, além das variáveis 
citadas anteriormente, o designer deve considerar alguns aspectos no processo de 
criação de um design:
• Clareza na arquitetura da informação: é essencial que o usuário consiga 
discernir o que é prioritário e o que é secundário no site, ou seja, inicialmente, é 
preciso chegar a um bom arranjo da informação.
• Facilidade de navegação: uma máxima é que o usuário deveria conseguir acessar 
a informação desejada no máximo em três cliques.
• Simplicidade: quem navega quer encontrar o mais rápido possível o objetivo da 
busca. Portanto, a pirotecnia deve ser evitada, dando ao usuário paz e tranquilidade 
para que possa analisar a informação.
• Relevância do conteúdo: se nas revistas ou na televisão, por exemplo, a sedução 
passa muito pela beleza das imagens, na Web o conteúdo é o que mais importa para 
atrair e prender a atenção do usuário.
• Manter a consistência: como para qualquer outro tipo de software, a consistência 
é um poderoso princípio de usabilidade na Web. Quando as coisas acontecem 
sempre do mesmo jeito, os usuários não precisam se preocupar a respeito do que 
irá acontecer.
• Tempo suportável: o tempo de carga das páginas deve ser necessariamente curto. 
Estudos indicam que dez segundos é o máximo de tempo antes que as pessoas 
percam o interesse.
• Foco nos usuários: novamente, todos os princípios podem ser sumarizados em 
um só, o foco deve estar nas atividades dos usuários.
• O designer também deve considerar as questões de estética da interface, como:
o Cores: devem ser agradáveis e que não cansam a visão. Cores muito fortes 
agridem a visão; e cores muito fracas dificultam a leitura das informações.
o Tamanho dos textos: é importante utilizar fontes agradáveis e de tamanho 
adequado para que o usuário não fique cansado com um esforço grande de 
leitura das informações.
o Imagens: devem ser usadas imagens que realmente facilitem o entendimento 
das informações. Não deve haver excessos desnecessários.
o Ícones bem definidos: os ícones não podem gerar dúvidas sobre a sua função 
ou usar o mesmo ícone para funções distintas.
o Uso correto dos recursos: devem ser usados com coerência recursos como 
listas de opções, campos autocompletantes, informações de erro etc.
o Distribuição uniforme dos campos e informações: telas carregadas de 
campospara preenchimento tornam confusa a execução.
o Uso coerente de áudios e filmes: deve haver uso correto de recursos de áudio 
e vídeo para que não haja uma carga muito grande de informações.
O designer deve considerar os diversos tipos de usuários que utilizarão o 
sistema. Se for dirigido aos jovens, idosos ou público em geral, as estratégias de design 
são alteradas. A criação da interface deve se adaptar às características de cada público. 
9
Junto a essa abordagem, a evolução da interface e do design de sistema evoluiu de 
forma rápida e com o surgimento de técnicas e métodos que são fundamentais. 
Nessa evolução, um conceito importante do desenvolvimento do design entrou 
em cena: a Semiótica. A seguir, será analisado o conceito de Semiótica e Engenharia 
Semiótica e a relação dessas áreas com o desenvolvimento do design.
2.3 ENGENHARIA SEMIÓTICA
É fundamental que o designer de sistemas computacionais tenha claro o que 
é a semiótica e sua aplicação do desenvolvimento de interfaces no ambiente digital. 
Rocha e Baranauskas (2003, p. 160), explicam o surgimento da semiótica: 
Semiótica como disciplina teve seu desenvolvimento a partir dos 
trabalhos do filósofo norte-americano Charles Sanders Peirce (1839-
1914) e do linguista suíço Ferdinand de Saussure (1857-1915). [...] A 
Semiótica objetiva estudar os signos e sistemas de signos. Um signo 
é qualquer coisa que está no lugar de outra coisa sob determinados 
aspectos ou capacidades, para alguém.
Benyon (2011, p. 392) complementa o sentido de semiótica: 
Semiótica ou semiologia é o estudo dos sinais e símbolos e de como 
eles funcionam. Os sinais podem assumir uma variedade de formas, 
como palavras, imagens, sons, gestos ou objetos. Um sinal consiste 
em um signo, um significado e um significante. 
Diante desses conceitos expostos, é possível compreender que, no momento 
que o usuário interage com a interface de um computador ou dispositivo móvel, existe 
uma série de signos. O que são esses signos na interface? São os ícones, os campos 
a serem preenchidos, as imagens, os vídeos, os sons e os objetivos de estarem na tela 
naquele momento e, fundamentalmente, suas funções na interface.
Um signo é codificado pelo designer para estabelecer a comunicação com os usuários. 
São estabelecidos três conceitos centrais na semiótica: o signo, o interpretante e o significante. 
Como exemplo, podemos usar a operação de “salvar o documento” por um botão com o rótulo 
“salvar”. A Figura 4 traz a interpretação do signo, do interpretante e do significante:
10
FIGURA 4 – EXEMPLO DE SIGNO ILUSTRANDO A RELAÇÃO DO SIGNO COM SEU OBJETO E SEU INTERPRE-
TANTE. SIGNO QUE REPRESENTA UM OBJETO FÍSICO E SIGNO DE INTERFACE
FONTE: Adaptada de Barbosa e Silva (2010)
A interface de um sistema é um grande conjunto de símbolos e suas interações 
com o usuário. No momento em que o designer é capaz de “se colocar no lugar” do 
usuário e tentar compreender como ele se comportaria diante dos sistemas, surge a 
“metacomunicação”. Muitas vezes, são pontos de vista muito diferentes entre quem 
desenvolve a interface e de quem usa o sistema no dia a dia. Por exemplo, um jovem 
desenvolve uma interface sem saber das dificuldades de um idoso ou de um deficiente 
físico. Mesmo questões de gênero e questões sociais devem ser consideradas. Homens 
e mulheres têm visões diferentes do mundo, como, por exemplo, as cores que são 
socialmente relacionadas ao gênero. Nordestinos e sulistas podem ter interpretações 
diferenciadas de um mesmo símbolo, além de questões linguísticas e regionalismos.
Como exemplo, na Figura 4, a operação para “salvar” um arquivo está 
representada pelo desenho de um disquete. Provavelmente, quem utiliza esse símbolo 
na interface, faz parte de uma geração mais antiga. Será que um usuário jovem, hoje, 
em pleno ano de 2022, saberá o que é um disquete? A maioria, talvez, nunca viu um. 
Podemos, então, levantar uma questão interessante: atualmente, qual símbolo seria 
usado para estabelecer a relação de “signo” e “significante” para salvar um arquivo?
Por outro lado, os usuários interpretam a visão do desenvolvedor. Essa ação ocorre 
de forma gradual, à medida que usa o sistema, buscando atribuir sentido aos signos. Essa 
interação, que se denomina “metacomunicação”, é demonstrada na Figura 5.
11
FIGURA 5 – METACOMUNICAÇÃO DESIGNER-USUÁRIO E COMUNICAÇÃO USUÁRIO-SISTEMA NO PROCES-
SO DE DESENVOLVIMENTO DE UMA INTERFACE
FONTE: Adaptada de Barbosa e Silva (2010)
Por outro lado, a Engenharia Semiótica compreende um aprofundamento da 
organização conexa dos diversos signos e as suas funções no design de uma interface, 
focando na relação humano/computador. Para Aramuni e Maia (2018, p. 47), a Engenharia 
Semiótica tem como função:
[...] a Engenharia Semiótica se concentra na identificação e prevenção 
de interrupções no processo de comunicação entre designer e 
usuário por meio de uma abordagem, que visa colocar o designer 
como interpretante dos problemas e necessidades dos usuários 
finais, ajudando-os a suprir suas demandas adequadamente.
A Engenharia Semiótica engloba dois métodos de avaliação de design: inspeção 
semiótica e avaliação de comunicabilidade. Segundo Barbosa e Silva (2010, p. 78), os 
fundamentos das técnicas da Engenharia Semiótica são:
• Processos de significação, que envolvem signos e semiose.
• Processos de comunicação, que envolvem intenção, conteúdo 
nos níveis de comunicação.
• Os interlocutores envolvidos no processo de significação e 
comunicação.
• O espaço de design de IHC, baseado no modelo que envolve a 
comunicação em termos de emissores, receptores, contextos, 
códigos, canais e mensagens.
2.3.1 Inspeção Semiótica
A inspeção semiótica tem como objetivo avaliar a comunicabilidade de uma 
interface por meio da inspeção sistemática. O objetivo principal da inspeção semiótica é 
avaliar a qualidade da emissão da metacomunicação do designer. Os usuários não são 
envolvidos nessa técnica. Na inspeção semiótica, segundo Barbosa e Silva (2010), os 
signos são classificados em três tipos:
12
• Signos estáticos: signos que expressam o estado do sistema e cujo significado é 
interpretado independentemente de relações causais e temporais da interface. Eles 
podem ser interpretados a partir de um retrato da interface num momento do tempo. 
São exemplos de signos estáticos: o layout geral e os elementos distribuídos na tela.
• Signos dinâmicos: signos que expressam o comportamento do sistema, envolvendo 
aspectos temporais e causais da interface. Estão vinculados à própria interação e 
devem ser interpretados fazendo referência a ela. São exemplos de signos dinâmicos: 
a associação entre a escolha de um item de menu e a exibição do diálogo.
• Signos metalinguísticos: são signos principalmente verbais e que se referem a 
outros signos de interface, sejam eles estáticos, dinâmicos ou mesmo metalin-
guísticos. Em geral, ocorrem na forma de mensagens de ajuda e de erro, alertas, 
diálogos de esclarecimento, dicas e semelhantes.
A tabela a seguir mostra as atividades da inspeção semiótica:
TABELA 1 – INSPEÇÃO SEMIÓTICA
FONTE: Barbosa e Silva (2010, p. 331)
INSPEÇÃO SEMIÓTCA
ATIVIDADE TAREFA
Preparação
• Identificar os perfis dos usuários.
• Identificar os objetivos apoiados pelo sistema.
• Definir as partes da interface que serão avaliadas.
• Escrever cenários de interação para guiar a avaliação.
Coleta de 
dados
• Inspecionar a interface simulando a interação descrita pelo 
cenário de interação.
Interpretação
• Analisar os signos metalinguísticos e reconstruir a metamensagem 
correspondente.
• Analisar os signos estáticos e reconstruir a metamensagem 
correspondente.
• Analisar os signos dinâmicos e reconstruir a metamensagem 
correspondente.
Consolidação 
de resultados
• Contrastar e comparar as metamensagens reconstruídas nas 
análises de cada tipo de signo. 
• Julgar os problemas de comunicabilidade encontrados.
Relato dos 
resultados
• Relatar a avaliação da comunicabilidade da solução de IHC,sob o 
ponto de vista do emissor da metamensagem.
Segundo Barbosa e Silva (2010), é fundamental compreender o comportamento 
do usuário frente ao sistema. Para isso, os autores elencam algumas questões 
importantes:
13
TABELA 2 – AVALIAÇÃO DE COMUNICABILIDADE
FONTE: Barbosa e Silva (2010, p. 345)
• [Quem você, usuário, é?] A quem a mensagem do designer está endereçada? 
Quais os perfis desses destinatários?
• [Quer ou precisa fazer?] Na visão do designer, o que os usuários vão querer co-
municar ao sistema? Por quê?
• [De que maneira prefere fazer?] Como, onde e quando o designer espera que os 
usuários se engajem nessa comunicação? Por quê?
• [Este, portanto, é o sistema que projetei para você?] O que o designer está co-
municando? Que conteúdo e expressão estão utilizando nessa comunicação? Qual 
é a sua visão de design?
• [A forma como você pode ou deve utilizá-lo?] Como essa metacomunicação 
privilegia certos desejos e necessidades dos usuários, em detrimento a outros? 
Como essa metacomunicação indica diferentes estratégias de comunicação que o 
usuário pode seguir ao se comunicar com o preposto do designer? Como a comuni-
cação do usuário com o preposto do designer é facilitada em certos contextos, em 
detrimento a outros? Por quê?
• [Alcançar uma gama de objetivos?] Que efeito o designer espera que sua comunica-
ção cause? Que objetivos ele espera que o usuário alcance por meio dessa comunicação?
2.3.2 Avaliação de comunicabilidade
A avaliação de comunicabilidade avalia a qualidade da recepção da metacomunicação 
realizada pelo designer em direção ao usuário. São elencados usuários para executarem tarefas 
de um sistema em um ambiente controlado. Esses controles são realizados por meio de ques-
tionários, câmeras de vídeo e outros dispositivos. As tarefas são observadas e registradas. Os 
avaliadores analisam cada registro para compreender como foi realizada a interação do usuário 
com o sistema. A tabela a seguir mostra as atividades da avaliação de comunicabilidade.
AVALIAÇÃO DE COMUNICABILIDADE
ATIVIDADE TAREFA
Preparação
• Inspecionar os signos estáticos, dinâmicos e metalinguísticos.
• Definir tarefas para os participantes executarem.
• Definir o perfil dos participantes e recrutá-los.
• Preparar material para observar e registrar o uso.
• Executar um teste-piloto.
Coleta de 
dados
• Observar e registrar sessões de uso em laboratório.
• Gravar o vídeo da interação de cada participante.
Interpretação • Etiquetar cada vídeo de interação individualmente.
Consolidação 
de resultados
• Interpretar as etiquetagens de todos os vídeos de interação.
• Elaborar perfil semiótico.
Relato dos 
resultados
• Relatar a avaliação da comunicabilidade da solução de IHC, sob o 
ponto de vista do receptor da metamensagem.
14
Na atividade de preparação e avaliação de design, é realizada uma breve 
inspeção dos signos estáticos, dinâmicos e metalinguísticos, para orientar a definição 
dos cenários de tarefas que os usuários deverão realizar. A atividade de coleta dos dados 
deve conter o questionário pré-teste, a sessão de observação e a entrevista pós-teste.
Nesse ponto, é muito importante que o designer compreenda os fundamentos 
computacionais envolvidos na estrutura tecnológica. A seguir, serão estudados os 
fundamentos que fazem parte da relação humana computador.
15
Neste tópico, você adquiriu certos aprendizados, como:
• A importância dos fundamentos da interface para o desenvolvimento de designer. 
• A interface é o contato do usuário com o sistema, é onde o usuário navega e busca 
as informações que necessita. 
• A interface, quando bem desenvolvida, torna a interação do usuário uma tarefa 
fluída atingindo os objetivos esperados do aplicativo.
• É fundamental que o designer saiba equilibrar todas as informações na interface, 
imagens e ferramentas de utiização.
RESUMO DO TÓPICO 1
16
1 O designer de interfaces computacionais precisa conhecer os princípios do chamado 
“design universal”. Esses princípios orientam o designer a elaborar os principais pontos que 
farão sentido para o usuário final no momento da utilização do dispositivo computacional, 
sejam um computador desktop ou um aparelho celular. A seguir, são apresentados alguns 
princípios do “design universal” e a sua explicação. Acerca da relação entre o princípio do 
design universal e a sua explicação, assinale a alternativa CORRETA:
a) ( ) Flexibilidade de uso significa que a interface deve englobar em várias telas.
b) ( ) Uso equitativo significa que a interface não pode excluir nenhum grupo. 
c) ( ) Tolerância ao erro significa que existe um nível de tolerância a erros.
d) ( ) Informação perceptível significa que a cor das fontes deve ser escura.
2 Ao se elaborar um design de um dispositivo computacional, o designer deve elencar 
diversas varáveis que serão avaliadas durante o processo de implantação do sistema 
e de todo seu uso. As variáveis procuram elevar a relação humano computador a um 
alto nível de qualidade. Acerca desses princípios, analise as sentenças a seguir:
I- O usuário pode desfazer uma ação incorreta.
II- O usuário deve se adaptar ao sistema.
III- O sistema deve barrar ações incorretas.
Assinale a alternativa CORRETA:
a) ( ) As sentenças I e II estão corretas.
b) ( ) Somente a sentença II está correta.
c) ( ) As sentenças I e III estão corretas.
d) ( ) As sentenças II e III estão corretas.
3 A interface atingiu um patamar especial diante da evolução dos dispositivos computa-
cionais. O papel do designer deve considerar a elaboração de um esquema de proprie-
dades a serem analisadas durante todo o desenvolvimento do design do dispositivo. 
Sobre o exposto, classifique V para as sentenças verdadeiras e F para as falsas:
( ) Visibilidade considera que apenas as coisas necessárias têm que estar visíveis. 
( ) Modelo conceitual é o termo para denotar relacionamento entre entidades.
( ) Mapeamento permite prever o efeito de ações.
AUTOATIVIDADE
17
Assinale a alternativa que apresenta a sequência CORRETA:
a) ( ) V – F – F.
b) ( ) V – F – V.
c) ( ) F – V – F.
d) ( ) F – F – V.
4 Existem algumas diferenças entre o ambiente web e de dispositivos móveis que o 
designer deve considerar ao elaborar um design. Disserte sobre as características 
próprias do ambiente web que devem ser considerados pelo designer.
5 O designer deve saber com bastante propriedade qual a importância da semiótica e 
da Engenharia Semiótica ao se desenvolver um design digital. Disserte sobre o que é 
a Inspeção Semiótica na Engenharia Semiótica.
18
19
DESENVOLVIMENTO DE SOFTWARE PARA WEB
1 INTRODUÇÃO
É fundamental que o designer tenha o conhecimento básico da estrutura 
tecnológica que existe por trás da tela. O objetivo não é o de se aprofundar nas técnicas 
de linguagem, mas é importante que o designer tenha o conhecimento mínimo da 
estrutura que existe entre o usuário e o dispositivo computacional. As pesquisadoras da 
área de designer Rocha e Barauskas (2003, p. 15) sustentam essa importante relação:
Novas tecnologias provêm poder às pessoas que as dominam. Siste-
mas computacionais e interfaces acessíveis são novas tecnologias 
em rápida disseminação. Explorar o poder do computador é tarefa 
para designers que entendem da tecnologia e são sensíveis às capa-
cidades e necessidades humanas.
Como ponto de partida, a relação de toda a estrutura humano/computador se 
divide em duas partes: o “front end” e o “back end”. Front end compreende a tecnologia 
responsável pela apresentação das informações na tela do dispositivo, como são 
estruturadas essas informações, como essas informações interagem com o usuário e 
como elas são transmitidas ao back end. O back end, por sua vez, compreende a tecnologia 
responsável pelo processamento, integração e armazenamento das informações. 
UNIDADE 1 TÓPICO 2 - 
Foram desenvolvidos sistemas que são capazes de avaliar o nível de 
acessibilidade de sites. Na análise, é gerado um relatório em que são 
descritos os problemasencontrados. Entre esses programas está um 
brasileiro do governo federal que executa a avaliação de acessibilidade: 
Avaliador e Simulador e Acessibilidade em Sítios – ASES. Quer saber mais? 
Acesse o link: https://asesweb.governoeletronico.gov.br/. 
DICA
Os conceitos fundamentais do front end são: “HTML”, “CSS”, “JavaScript” e 
“PHP”. Do lado do back end, os conceitos centrais são: “Java” e “SGBD”. Na Figura 6 é 
demonstrada essa estrutura. Todos esses conceitos serão explicados a seguir
20
FIGURA 6 – REPRESENTAÇÃO DA RELAÇÃO HUMANO/COMPUTADOR COMPREENDENDO AS FRONTEIRAS 
DO FRONT END E BACK END E A ESTRUTURA COMPUTACIONAL INTEGRANTE
FONTE: O autor
Tendo conhecido essa base, necessária para a compreensão de front-end 
e back-end, a seguir, será estudado o ambiente de desenvolvimento e estrutura 
tecnológica do ambiente web.
2 AMBIENTE DE DESENVOLVIMENTO WEB
Quando acessamos um site, toda a apresentação visual é realizada pelo HTML 
(HyperText Markup Language), que significa: "Linguagem de Marcação de Hipertexto". 
É por meio do HTML que o desenvolvedor de sites elabora onde as informações estarão 
dispostas na tela (lembrando que informação não é só textual, mas também imagens, 
vídeo, áudio etc.). 
Além da disposição das informações, no HTML são definidas as características 
desses dados, como tamanho, cor etc. Na Figura 5, tem-se uma tela de cadastro de um 
site de Gestão Imobiliária. Nesse site, tem-se as informações básicas a serem preenchidas, 
como disponibilidade (venda ou aluguel), tipo (apartamento, casa etc.), estado, cidade, 
bairro, endereço e complemento de informações complementares do imóvel.
21
FONTE: O autor
FIGURA 7 – TELA DE CADASTRO DE UM SITE DE GESTÃO IMOBILIÁRIA
As informações presentes na tela são denominadas “objetos”. Cada objeto contém 
funções e propriedades. Analisando cada informação contida na tela, são objetos: 
• Título da tela, que é um objeto tipo “span”. 
• A opção de disponibilidade do imóvel, que é um objeto “radiobox”. 
• O tipo de apartamento, estado, cidade e bairro, que são objetos tipo “listview”, 
• Os campos de endereço e complemento, que são objetos “input”. 
Um objeto “span” tem como função apresentar uma informação puramente 
explicativa. O objeto “radiobox”, da opção de disponibilidade, indica que o usuário deve 
escolher uma das opções, e somente uma. Os objetos “listview”, do tipo de imóvel, 
estado, cidade e bairro, quando selecionados, exibirá uma lista de opções a serem 
escolhidas pelo usuário. Os objetos “input”, do endereço e complemento, representam 
campos livres, onde o usuário tem a liberdade de escrever a informação. 
No entanto, como é escrito o HTML dessa tela? Na Figura 6 está exibido código 
dessa tela.
22
FIGURA 8 – CÓDIGO HTML DA TELA DE CADASTRO DE UM SITE DE GESTÃO IMOBILIÁRIA
FONTE: O autor
Analisando o código da figura anterior, é possível perceber que, tudo o que 
está escrito, está em três cores: azul, vermelho e preto. A cor azul está representada de 
duas formas diferentes. Algumas palavras em azul têm o símbolo “<” no início, e outras 
palavras em azul estão entre aspas. O que tudo isso significa?
• As palavras em azul, iniciadas com o símbolo “<”, indicam o objeto a ser representado 
na tela. Essa palavra é chamada de “tag”.
• As palavras escritas em vermelho indicam quais as características que o objeto 
possui.
• As palavras em azul entre aspas indicam o conteúdo assumido pela característica.
• As palavras em preto indicam textos a serem exibidos, na tela.
Agora, analisaremos cada tag do código:
• A tag inicial é “<font”. Isto significa que, na tela, os textos exibidos após essa linha 
terão as seguintes características: a fonte será Arial, a cor da fonte será preta e a 
fonte terá tamanho 16. 
• Na linha seguinte, tem a tag “<span>, que indica que será apresentado um texto na 
tela com a frase “Cadastro de imóvel”, seguindo as características de fonte descritas 
na tag anterior.
• Logo após, a fonte é alterada para a cor marrom, com o tamanho de 12. Assim, os 
textos exibidos após essa linha terão essas características.
• Tag <label> indica que é apresentado um rótulo de um campo a ser manipulado pelo 
usuário. Nessa tela, temos essa tag nos “labels” disponibilidade, venda, aluguel, tipo, 
estado, cidade, bairro, endereço e complemento. 
23
• Abaixo de cada “label”, tem uma tag que representa a interação entre a interface e 
o usuário, sendo: 
o “<Input>, que representa uma “entrada” de informação a ser fornecida pelo 
usuário. Esse “input>”. O primeiro “input” dessa tela tem a característica de ser 
um tipo “radio”, ou seja, o usuário deve “escolher” entre as opções dispostas. Ele 
é identificado como venda e aluguel.
o Logo após, tem-se os “labels”>: tipos, estado, cidade e bairro; a que são tags 
são do tipo <select>, que indica que o usuário tela uma “lista vire”, ou seja, 
aparecerá uma série em lista de opções, para apenas uma ser escolhida. A Figura 
7 representada a <select>: tipo.
o Por fim, as tags endereço e complemento são representados pela tag <input>, 
mas, nesse caso, são caracterizadas pelo tipo “text”, diferente do “label” <input>, 
radio da opção disponibilidade.
Por fim, diversos objetos e tags são utilizados na construção de um site. O uso 
correto e coerente será papel fundamental do designer da tela do site.
O outro conceito fundamental no ambiente front end, relacionado à exibição 
das informações, é o CSS. Quando são utilizados diversos sites, é possível perceber que 
vários “estilos” são exibidos. Esses estilos determinam um conjunto de exibição que 
pode tornar mais agradável a utilização do sistema. Designs mais modernos, ícones 
mais amigáveis, fontes mais fáceis de ler etc. Essa é a função do CSS na interface. 
Cascading Style Sheets – CSS é traduzido como "folha de estilo". O CSS interage com 
a sintaxe HTML, alterando as possibilidades de exibição das informações. As principais 
vantagens de se utilizar o CSS são:
• Facilita as mudanças no visual e estética da interface.
• Um mesmo CSS pode ser usado em diversas páginas e interfaces.
• Facilita a visualização e manutenção do código. 
• Chamados “estilos”, os CSS de uma interface HTML pode ser definida por dois meios:
• Definindo o estilo em uma tag <style> anterior a declaração antes das outras tags.
• Usando do CSS por meio de uma biblioteca remota. O acesso ao CSS é realizado 
utilizando a cláusula “class” na tag a que esse CSS será aplicado.
A seguir, segue a exibição de um código HTML usando CSS. No decorrer deste 
estudo, será explicado cada tag da tela.
24
FIGURA 9 – CÓDIGO HTML COM AS TAGAS <STYLE> E <LINK> QUE SE REFEREM AOS CSS QUE SERÃO 
UTILIZADOS NA EXIBIÇÃO DAS INFORMAÇÕES DA INTERFACE
FONTE: O autor
A tag <style> indica, nesse caso, que a área de todos os vídeos contidos nessa 
tela terá a mesma configuração. Ou seja, todos os vídeos terão largura de 20 pixels, 
altura de 30 pixels e a cor de fundo de todos os vídeos será branco. Ou seja, quando são 
declaradas as tags <vídeo> duas vezes no site (ou seja, nessa interface serão exibidos 
dois vídeos), eles serão apresentados com as mesmas características, não sendo 
necessário repetir essas configurações para cada vídeo.
A tag <link> indica que, quando essa página for carregada no computador ou 
dispositivo, será importada uma biblioteca CSS chamada de “toastr”. Essa biblioteca 
contém CSS com fontes e recursos que tornam a aparência da interface mais agradável 
para o usuário. As tags no final do HTML <span> e <input> utilizam a declaração do CSS 
importado pela declaração “class=” e “toastr”’. Isto quer dizer que serão utilizados cores 
e fontes originadas dessa biblioteca, facilitando o desenvolvimento do site e tornando a 
usabilidade mais agradável para o usuário.
A seguir, serão analisadas as linguagens de desenvolvimento utilizadas na 
interface computacional.
2.1 NOÇÕES DE LINGUAGEM DE DESENVOLVIMENTO PARA WEB
Quando utilizamos um site, a interface é a parte mais próxima do usuário. No 
entanto, quando esseusuário, por exemplo, preenche um formulário de um site de 
compras e pressiona a tecla “CONFIRMAR”, uma série de processamentos são carregados.
O HTML e CSS não são consideras “linguagens”, pois as suas funções são 
puramente estáticas, HTML e CSS não possuem recursos de manipulação dos dados e 
nem de transferir as informações para o back end. Para isso, são utilizadas as linguagens 
JavaScript e PHP no front end.
25
FIGURA 10 – CÓDIGO HTML COM AS TAGAS “<SCRIPTA” DECLARAÇÃO “ONKEYPRESS()”, UTILIZAM CÓDIGO 
DESENVOLVIDO EM JAVASCRIPT
FONTE: O autor
A linguagem de programação JavaScript interage diretamente com o HTML. Por 
exemplo, ao cadastrar o CPF em um site, esse CPF deverá ser validado pelo seu código 
identificador. Caso o CPF esteja incorreto, o site emitirá uma mensagem de erro e não 
permitirá a conclusão de preenchimento de um formulário.
É o JavaScript que processa essa verificação do CPF, por meio de um algoritmo 
de processamento. Esse processamento ocorre pela cláusula “onKeyPress=()”. Isto quer 
dizer que, quando o usuário clicar no CPF, será efetuada uma função de validação do 
CPF. A Figura 10 demonstra como é utilizada a chamada de uma função. A seguir, será 
dada a explicação do código.
No <input> do CPF é declarada uma cláusula onKeyPress=”ValidaCPF(CPF)”. Isso 
quer dizer que, quando clicar no CPF, a ação será direcionada para um código em Java 
Script que fará a sua validação. Não faz parte do escopo desta disciplina mostrar o 
código em JavaScript, mas, veja que tem uma tag <script> com uma “palavra “Function 
ValidaCPF(CPF)” – É nessa parte que é codificada a validação do CPF e retornado para 
o site se o CPF foi aceito ou não.
É fundamental que o designer faça exaustivos testes para verificar se todas 
as validações estão sendo realizadas corretamente antes de colocar o site em 
disponibilidade para o público.
A seguir, serão explicadas as linguagens PHP, Java e o conceito de SGBD. O 
PHP faz a integração entre o front end e o back end. Já o uso da linguagem Java e os 
fundamentos do SGBD, encontram-se no back end.
2.2 CAMADAS DE INTEGRAÇÃO WEB
Para vários sites, é necessário gravar as informações. Por exemplo, nas 
plataformas de compra, cadastro de clientes, plataformas de ensino EAD e os mais 
diversos. No entanto, as informações não ficam gravadas no aparelho do usuário, mas 
sim em um banco de dados. É aí que se encontra o back end. 
26
Inicialmente, para que essas informações sejam enviadas para o back end, é 
necessária uma linguagem específica, aí encontra-se o PHP. 
PHP (Hypertext Preprocessor) é uma linguagem voltada à conexão entre os 
servidores e a interface do usuário. É o PHP que transfere os dados do usuário para 
serem gravados, alterados, consultados ou excluídos de uma base de dados. Quem é 
responsável pelo gerenciamento dessas ações é o SGBD – Sistema Gerenciador de Baco 
de Dados. O PHP também está integrado ao HTML, mas contém os recursos necessários 
para conectar com bases e sistemas externos ao front end. 
Flor, Vanzin e Ulbricht (2013), desenvolveram um estudo apresentando uma 
pesquisa sobre a comunicação entre surdos no âmbito da acessibilidade 
da web. É realizada uma revisão bibliográfica sobre o assunto e o reflexo 
da acessibilidade no contexto da educação. Quer ler mais? Acesse o link: 
https://bit.ly/35sy3MA.
INTERESSANTE
Do lado do back end são desenvolvidos os códigos de inserção, alteração, 
exclusão e consulta de todas as informações que são exibidas na tela de um site. Essas 
informações serão enviadas pelo PHP.
Por vezes, é necessário que haja ainda alguma manipulação de informações no 
back end. Atualmente, a linguagem mais utilizada é o Java. Segundo o site oficial do 
Java (2021):
Java é uma linguagem de programação e plataforma computacional 
lançada pela primeira vez pela Sun Microsystems em 1995. [...] O 
Java é rápido, seguro e confiável. De laptops a datacenters, consoles 
de games a supercomputadores científicos, telefones celulares à 
Internet, o Java está em todos os lugares.
Por fim, o Sistema Gerenciador de Banco de Dados é o sistema que gerencia todo 
o processo físico de armazenamento nos bancos de dados, tornando ágil o processo de 
busca das informações.
27
RESUMO DO TÓPICO 2
Neste tópico, você adquiriu certos aprendizados, como:
• Como são estruturadas as tecnologias front end e back end do ambiente web.
 
• É fundamental para o profissional de design compreender com clareza como são 
estruturados os ambeintes front end e back end das aplicações.
• É muito importante que se saiba como são formadas as linguagens de 
desenvolvimento e como são interliçagdas as camadas de integração web. 
• É preciso que o designer saiba como diferenicar a linguagem de estrutuação do 
ambiente web, que é o HTML, as linguagens JavaScriopt, PHP e os fundamentos 
dos Sistemas Gerenciadores de Bancos de dados.
28
1 A análise da estrutura tecnológica que existe entre o usuário e o sistema é dividido 
em duas partes, que são o front end e o back end. Sobre qual a tecnologia que faz 
parte da estrutura do back end, assinale a alternativa CORRETA:
a) ( ) HTML.
b) ( ) JavaScript. 
c) ( ) SGBD.
d) ( ) PHP.
2 A chamada linguagem de marcação – HTML – exibe as informações na tela segundo 
uma série de definições contidas no código. Pelos fundamentos do HTML, analise as 
sentenças a seguir:
I- A tag <input type=”text”> significa uma entrada de dados em que o usuário deve 
digitar um texto livre. 
II- A tag <input type=”radio”> significa que o usuário tem uma lista de opções onde ele 
pode escolher mais de uma opção.
III- A tag <select> significa que o usuário pode entrar com um texto, mas esse texto não 
pode ser livre.
Assinale a alternativa CORRETA:
a) ( ) As sentenças I e II estão corretas.
b) ( ) Somente a sentença I está correta.
c) ( ) As sentenças I e III estão corretas.
d) ( ) As sentenças II e III estão corretas.
3 Cascading Style Sheets – CSS é traduzido como "folha de estilo". O CSS interage com 
a sintaxe HTML, alterando as possibilidades de exibição das informações. Sobre o 
exposto, classifique V para as sentenças verdadeiras e F para as falsas:
( ) O CSS facilita as mudanças no visual e estética da interface. 
( ) Um CSS pode ser usado somente em uma página.
( ) O CSS facilita a visualização e manutenção do código.
Assinale a alternativa que apresenta a sequência CORRETA:
a) ( ) V – F – F.
b) ( ) V – F – V.
AUTOATIVIDADE
29
c) ( ) F – V – F.
d) ( ) F – F – V.
4 A linguagem JavaScript ocupa um lugar especial no desenvolvimento de uma página 
da web. Disserte sobre qual o papel do JavaScript nesse contexto.
5 Do lado do back end, existem duas tecnologias predominantes que são a linguagem 
Java e o SGBD. Descreva o que é SGBD.
30
31
TÓPICO 3 - 
DESENVOLVIMENTO DE SOFTWARE PARA 
DISPOSITIVOS MÓVEIS
1 INTRODUÇÃO
O ambiente de dispositivos móveis agrega muito do desenvolvimento do ambiente 
web. No entanto, ele contém algumas diferenças, como a diferenciação entre aplicativo e 
site responsivo. As interfaces dos dispositivos móveis devem se adequar ao tamanho da 
tela, que é diferente da tela de um computador. Aí encontra-se a grande diferença. 
Nesse sentido, é necessário que o profissional de design saiba adequar um a interface 
de um aplicativo desenvolvido exclusivamente para dispositivos móveis e outro para um 
sistema desenvolvido para web. Nos próximos subtópicos, serão exploradas as características 
tecnológicas pertinentes aos dispositivos móveis e sua relação com o design da interface.
UNIDADE 1
2 AMBIENTE DE DESENVOLVIMENTO DISPOSITIVOS MÓVEIS
A primeira diferença que se percebe na interface e design dos dispositivos 
móveis é o tamanho da tela. As informações devem ocupar menos espaço, serem mais 
concisas e objetivas.
Também é importante ter em mente no planejamento de um design para 
dispositivo móvel a ausência de um teclado físico. Para a maioria dos usuários é mais 
difícil digitar textos no teclado virtual de um dispositivomóvel. 
No entanto, é possível “baixar” um aplicativo por meio de um Play Store, ou 
acessar um site pelo dispositivo móvel diretamente de um navegador. Há pouco tempo, 
as páginas web não se adaptavam ao tamanho das telas dos dispositivos móveis, 
ficando confuso de utilizar, pois as informações ficavam muitas vezes ocultas na tela. 
Atualmente, surgiu o HTML responsivo, isso significa que uma mesma tela de um site 
na tela de um computador “se adapta automaticamente” quando é carregada em um 
dispositivo móvel. Esse processo torna a usabilidade mais agradável. 
Para Aramuni e Maia (2018, p. 51), que estudam a experiência do usuário nos 
dispositivos móveis, “o designer de interface deve possuir conhecimentos que transitam 
não somente nas tecnologias, ferramentas e técnicas do design, mas também em tudo 
aquilo que o usuário final precisa para trabalhar bem com os sistemas”.
A seguir, serão estudadas as noções básicas das linguagens orientadas para o 
desenvolvimento de aplicativos em dispositivos móveis.
32
2.1 NOÇÕES DE LINGUAGEM DE DESENVOLVIMENTO PARA 
MOBILE
Os dispositivos móveis podem ser agrupados em dois grandes grupos: Android 
e Apple, sendo que o sistema Android é predominante do mercado. Contudo, qual é a 
importância do sistema operacional Android? 
Conforme explicado por Pilar (2013, p. 43), “o Android é uma plataforma móvel 
de código livre, baseada em Linux desenvolvida pela Google, com o objetivo de operar 
em dispositivos com toque na tela, como smartphones e tablets”. Ainda segundo Pilar 
(2013, p. 44), as principais características do Android são:
• Utilização de widgets: pequenos ícones que ficam na tela inicial, 
onde é possível escolher entre seus aplicativos favoritos, tendo 
acesso a atualizações sem sair da tela principal. 
• Tela de notificações: onde é possível visualizar em um só lugar as 
notificações de novas ligações, mensagens e e-mails. 
• Multitarefa: é possível executar diversos aplicativos ao mesmo 
tempo e alternar a visualização entre eles. 
• Escrita por voz: possibilidade de escrever e-mails, SMS e qualquer 
tipo de texto, através da voz. 
• Compartilhamento de imagens: possibilidade de explorar, editar 
e compartilhar rapidamente nas redes sociais e as fotos tiradas 
direto do celular.
• Compartilhar com o toque: compartilhamento de fotos e 
vídeos com outros celulares com a mesma tecnologia, apenas 
encostando-os. Também é possível parear dispositivos via 
bluetooth apenas encostando os aparelhos. 
• Fotos panorâmicas de 360°: através do Photo Sphere, é possível 
tirar fotos panorâmicas de todo o seu redor e realizar upload 
do resultado direto para o Google Maps, onde outros usuários 
poderão visualizá-la.
• Múltiplos usuários: nos tablets, é possível criar múltiplos usuários, 
cada um com sua tela inicial, aplicativos e jogos.
Por outro lado, todas as linguagens de programação para Android contam com, 
ao menos, um de dois kits de desenvolvimento nativos do Android. O primeiro é o NDK 
(Kit de Desenvolvimento Nativo), e o segundo kit de desenvolvimento é o Android SDK 
(Kit de Desenvolvimento de Software ou DevKit). 
O Android SDK inclui projetos de exemplo com código fonte, ferramentas de 
desenvolvimento, emulador e outras bibliotecas que auxiliam os desenvolvedores 
a utilizarem a plataforma. A linguagem predominante no ambiente Android é 
o Java, sendo utilizado, também, C/C++ e C#, que são linguagens de antigas 
gerações e já consolidadas no ambiente de desenvolvimento computacional. 
As linguagens JavaScript, HTML e CSS também pertencem ao universo de 
desenvolvimento de dispositivos móveis.
33
Os aplicativos móveis, que incluem calendários, navegadores e mapas 
interativos, fazem parte da vida da maioria das pessoas hoje em dia. A maioria 
dos aplicativos móveis é de usuário único; e eles não permitem a colaboração 
síncrona entre os usuários. A colaboração móvel permite que vários usuários 
em diversos locais combinem sinergicamente suas contribuições de maneira 
conveniente. Os pesquisadores Pichiliani e Hirata (2014) investigaram o 
potencial de criar aplicativos colaborativos com base em aplicativos móveis de 
usuário único. Nesse trabalho, foi proposta uma técnica de adaptação, baseada 
na reutilização de SDKs (Software Development Kits) de fabricantes para criar 
aplicativos protótipos multiusuários.
FONTE: <https://bit.ly/3JXhckc>. Acesso em: 3 fev. 2022.
NOTA
Além dessas, novas linguagens de programação têm sido desenvolvidas para o 
ambiente Android, sendo elas:
LUA (Corona SDK)
• Simples, fácil de aprender e poderoso.
• É uma linguagem de programação muito rápida de usar.
• Suporte para todas as bibliotecas nativas, podendo publicar em várias plataformas.
• Emulador que permite ver sem compilar o código.
KOTLIN
• Suporte a Java Virtual Machine.
• Não faz com que o tamanho dos arquivos aumente.
• Não causa desaceleração.
• É simplificado.
• Ideal para começar com Android.
• Suporta Android Studio.
Existem dois modelos de sistema operacional predominantes nos dispositivos 
móveis: Android, da Google, e iOS, da Apple. Ambos têm recursos bastante parecidos, 
porém, em alguns aspectos, existem diferenças, sendo uma delas a possibilidade de 
customizar a aparência e as funcionalidades consideravelmente maiores no Android. Outra 
grande diferença entre os sistemas operacionais é que o Android foi desenvolvido como código 
aberto, permitindo que cada fabricante personalize a plataforma com layout próprio. Por outro 
lado, o iOS tem mais restrições na experiência da tela inicial e menus.
34
Design e usabilidade são pontos fortes no iOS. Além disso, uma das principais 
vantagens para quem tem um iPhone é aproveitar a conectividade com outros 
equipamentos e gadgets da própria Apple. 
Por outro lado, o Android tem vantagem na liberdade e nas possibilidades, na 
conexão com dispositivos variados e no universo de aplicativos criados para a loja do Google.
35
RESUMO DO TÓPICO 3
Neste tópico, você adquiriu certos aprendizados, como:
• Como são estruturadas as tecnologias front end e back end do ambiente mobile. 
• Compreender as diferenças e semelhanças no desenvolvimento de programas e 
interfaces para os ambientes distintos entre web e dispositivos móive. No entanto, 
essas diferenças estão cada vez menos notórias para o usuário final. 
• Verificar as difernças entre as lingaugens utilizadas e que, no ambiente de dispositivos 
móiveis, existem modelos diferentes de sistema operacional, interferindo do 
processo de desenvolvimento da interface.
• Por fim, foi apresentado como se organiza as camadas existentes no ambiente de 
dispositios móveis.
36
1 O Android é o sistema operacional predominante nos dispositivos móveis. É importante 
que o designer saiba todos os recursos que o Android oferece. Acerca da descrição do 
Android, assinale a alternativa CORRETA:
a) ( ) É Unitarefa.
b) ( ) Utiliza de widgets.
c) ( ) É Monousuário.
d) ( ) Por segurança, não compartilha fotos.
2 O designer deve ter o conhecimento básico das linguagens e kits de desenvolvimento 
contidas no processamento dos dispositivos móveis. Sobre o exposto, analise as 
sentenças a seguir:
I- O primeiro kit de desenvolvimento foi o Android SDK.  
II- O kit de desenvolvimento NDK surgiu para sanar os erros do SDK.
III- O Android suporta as linguagens de desenvolvimento C/C++ e C#.
Assinale a alternativa CORRETA:
a) ( ) As sentenças I e II estão corretas.
b) ( ) As sentenças II e III estão corretas.
c) ( ) As sentenças I e III estão corretas.
d) ( ) Somente a sentença III está correta.
3 O ambiente de dispositivos móveis agrega muito do desenvolvimento do ambiente 
web. Com relação ao ambiente de dispositivos móveis, classifique V para as sentenças 
verdadeiras e F para as falsas:
( ) O HTML responsivo faz com que uma tela de um site se adapte automaticamente 
quando é carregada em um dispositivo móvel. 
( ) A ausência de um teclado físico não altera a usabilidade dos dispositivos móveis e 
não precisa ser consideradopelo designer.
( ) Os dispositivos móveis podem ser agrupados em dois grandes grupos: Android e 
Apple, sendo que o sistema Android é predominante do mercado.
Assinale a alternativa que apresenta a sequência CORRETA:
a) ( ) V – F – F.
b) ( ) F – F – V.
AUTOATIVIDADE
37
c) ( ) F – V – F.
d) ( ) V – F – V.
4 Além das linguagens tradicionais, surgiram novas linguagens para serem utilizadas 
no ambiente de dispositivos móveis. Disserte sobre essas linguagens e uma 
característica delas.
5 O Android permite o uso de widgets. Descreva o que são widgets e o que é SGBD.
38
39
TÓPICO 4 - 
DESIGN NA WEB E DISPOSITIVOS MÓVEIS
1 INTRODUÇÃO
Os padrões de projeto surgiram da proposta de que cada padrão é uma regra 
com três partes, que expressa a relação entre: contexto, problema e solução
É importante saber que Projeto é um empreendimento temporário, realizado 
de maneira coordenada, que visa alcançar objetivos específicos com característica 
própria. É temporário porque deve possuir um início e um fim bem definidos, enquanto 
característica singular significa nunca ter sido feito antes. 
UNIDADE 1
O W3C (World Wide Web Consortium) funciona como uma organização 
responsável por padronizar toda a web por meio do desenvolvimento de 
protocolos e fóruns abertos, que promovem a evolução e asseguram a 
interoperabilidade na rede pública, de forma gratuita. Esses padrões são 
bastante úteis a designers e desenvolvedores, não só no que diz respeito 
à acessibilidade, mas também à compatibilidade e à interoperabilidade 
da web. Essas publicações estão disponíveis em português no site da 
W3C Brasil: www.w3c.br.
ATENÇÃO
2 PADRÕES DE PROJETO DE DESIGN
É fundamental que todo profissional qualificado tenha as noções básicas de 
gestão de projetos. Para conhecer os fundamentos de gerenciamento de projetos, pode-
se acessar o Guia conhecido como PMBOK – Project Management Book of Knowledge, 
onde está registrado o conjunto de conhecimentos em gerenciamento de projetos. 
A partir daqui, focaremos nos projetos direcionados ao desenvolvimento do 
design de um dispositivo.
• O contexto: refere- se ao conjunto das informações nas quais o padrão de projeto 
pode ser aplicado.
• O problema: trata do conjunto de objetivos e limitações que ocorrem dentro do contexto.
• A solução: uma estrutura formal para ser aplicada na resolução do problema.
40
Um projeto de design deve ser desenvolvido com o objetivo de apresentar uma 
relação dos diversos signos (conforme a semiótica) aos critérios de usabilidade da interface. 
Todos os projetos de design devem ter o usuário centrado no processo de 
desenvolvimento. Portanto, a interface deve atender às necessidades dos seus usuários. 
O escopo do projeto é construído sobre os chamados requisitos. Os requisitos são 
divididos em dois grupos: funcionais e não funcionais. Os requisitos funcionais dizem 
respeito à interação direta entre o usuário e a interface. Os requisitos não funcionais 
dizem respeito à qualidade do sistema, descrevendo suas facilidades. A não atenção a 
esses critérios é um dos principais motivos de insatisfação dos usuários. 
Os requisitos funcionais são agrupados em duas categorias: aqueles relacionados 
à exibição e à entrada de dados.
• Requisitos relacionados à exibição da informação:
o Consistência.
o Feedback.
o Níveis de habilidade.
o Percepção e cognição.
o Metáforas.
o Baixa carga de memória.
o Classificação funcional dos comandos.
o Projeto independente da resolução do monitor.
• Requisitos relacionados à entrada de dados:
o Mecanismos de ajuda.
o Prevenção de erros.
o Tratamento de erros. 
Os requisitos não funcionais são agrupados como:
• Apresentação visual.
• Uso adequado da combinação de cores.
• Comportamentos inesperados.
• Uso de diversos nomes para um mesmo assunto.
• Uso de um mesmo ícone para funções diferentes.
É importante para o profissional de design saber que o gerenciamento de pro-
jetos representa uma aplicação de conhecimentos, habilidades, ferramentas e técnicas 
para a execução das atividades do projeto, a fim de atender aos requisitos deste, sejam 
requisitos funcionais e não funcionais.
O gerenciamento de projetos direciona um projeto no sentido de trazer visão, 
objetivo e padronização. A falta de gerenciamento de projetos compromete todas as 
atividades da organização.
41
Existem várias ferramentas e software de gerenciamento de projetos 
disponíveis. Alguns exemplos são: Bitrix24, Wrike, Asana, Monday. Basecamp. A seguir, 
serão analisados quais são os tipos de designs responsivos e como eles se estruturam 
para oferecer uma experiência de usabilidade mais agradável para o usuário.
2.1 TIPOS DE DESIGN
Os padrões responsivos são os mais atuais nos projetos de design. No entanto, o 
que isso significa? Que o “layout”, ou seja, a disposição das informações na tela, adequa-
se à tela utilizada para o mesmo sistema.
Há muitos padrões estabelecidos que funcionam bem em dispositivos móveis 
e computadores. A maioria dos layouts usados por páginas da Web responsivas pode 
ser categorizada em um de cinco padrões: mostly fluid, column drop, layout shifter, tiny 
tweaks e off canvas. A seguir, veremos cada uma delas:
Mostly fluid
O padrão mostly fluid consiste, principalmente, em uma grade fluida. Em telas 
grandes ou médias, ele geralmente permanece do mesmo tamanho, apenas ajustando 
as margens quando necessário. 
FIGURA 11 – PROJETO DE DESIGN MOSTLY FLUID
FONTE: O autor
Column drop
Para layouts de várias colunas de largura completa, o column drop empilha as 
colunas verticalmente, conforme a largura da janela. 
42
FIGURA 12 – PROJETO DE DESIGN CLUMN DROP
FONTE: O autor
Layout shifter
O padrão layout shifter é o padrão mais responsivo, com vários pontos de 
interrupção em várias larguras de tela. Esse layout determina a forma com a qual o 
conteúdo se orienta.
FIGURA 13 – PROJETO DE DESIGN LAYOUT SHIFTER
FONTE: O autor
Tiny tweaks
O tiny tweaks realiza mudanças no layout, como ajustar o tamanho da fonte, 
redimensionar imagens ou mover o conteúdo.
FIGURA 14 – PROJETO DE DESIGN TINY TWEAKS
FONTE: O autor
43
FIGURA 15 – PROJETO DE DESIGN OFF CANVAS
FONTE: O autor
Off canvas
O padrão off canvas remove o conteúdo usado com menos frequência — como 
menus de navegação ou de aplicativo — mostrando-os apenas quando o tamanho da 
tela for suficiente. 
Portanto, é possível realizar o desenvolvimento do design de uma interface 
utilizando ferramentas que auxiliam a formatação das telas e facilitam a navegação e a 
visualização das informações de forma mais intuitiva.
A seguir, serão demonstradas quais são as principais ferramentas de 
desenvolvimentos nos ambientes web e de dispositivos móveis.
2.2 FERRAMENTAS DE DESENVOLVIMENTO
É essencial que os profissionais de design conheçam as principais ferramentas e 
conceitos de desenvolvimento dos sistemas desenvolvidos para o ambiente web e mobile. 
Inicialmente, é necessário compreender o que é IDE – Integrated Development Environment, 
ou “Ambiente de Desenvolvimento Integrado”, um utilitário que tem como objetivo escrever 
códigos para apoiar o desenvolvimento de aplicações, otimizando diversos processos 
envolvidos, ou seja, integra diversas ferramentas em uma única interface.
Os componentes que compõem um IDE são: editor de textos, compilador, 
verificadores de sintaxe, complementos e assistentes de código, prompt integrado, blocos 
de código, ferramentas de auxílio para conexão com banco de dados, automatizador de 
tarefas e editor de interface gráfica. Um IDE pode ser dedicado para geração de sistemas 
em ambiente desktop ou mobile. A seguir, será analisado o IDE Netbeans, direcionado 
para o desenvolvimento em ambiente desktop, que utiliza a linguagem Java. Segundo 
Tosin (2022, s.p.): 
44
O NetBeans possui um conjunto de ferramentas capaz de gerar 
código e arquivos de configuração, auxiliar no empacotamento e 
instalação de aplicações, renomear elementos do código, entre 
outras. Tudo isto através de assistentes,