MMI - Ebook - Webdesign (2021)

Web Design
David J. C. de Santana
Curso Técnico em Multimídia

Educação a Distância
2021
Web Design
Curso Técnico em Multimídia
Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa
Educação a Distância
Recife
1.ed. | Set. 2021

Professor(es) Autor(es) Catalogação e Normalização
David J. C. de Santana Hugo Cavalcanti (Crb-4 2129)
Revisão Diagramação
David J. C. de Santana Jailson Miranda
Coordenação de Curso Coordenação Executiva

Maria José Alcântara Sulamita de Lima George Bento Catunda
Sérgio Severo do Nascimento Renata Marques de Otero
Manoel Vanderley dos Santos Neto
Coordenação Design Educacional
Deisiane Gomes Bazante Coordenação Geral
Maria de Araújo Medeiros Souza
Design Educacional Maria de Lourdes Cordeiro Marques
Ana Cristina do Amaral e Silva Jaeger
Helisangela Maria Andrade Ferreira Secretaria Executiva de
Izabela Pereira Cavalcanti Educação Integral e Profissional
Jailson Miranda
Roberto de Freitas Morais Sobrinho Escola Técnica Estadual
Professor Antônio Carlos Gomes da Costa
Audiodescrição das imagens
Jonara Medeiros Siqueira Gerência de Educação a distância
Sumário
Introdução .............................................................................................................................................. 4
1.Competência 01 | Desenvolver artefatos para web focando na interface e sua usabilidade ........... 5
1.1 Uma introdução à web e ao design ............................................................................................................ 5
1.2 Tipos de sites, blogs e aplicativos ............................................................................................................... 6
1.3 Linguagens de marcação, de design e de programação de web .............................................................. 18
1.4 Planejamento, usabilidade e a importância de um site responsivo ......................................................... 22
2.Competência 02 | Aplicar os princípios da arquitetura da informação em artefatos da web ......... 36
2.1 Porque devemos aprender sobre Arquitetura da Informação ................................................................. 36
2.2 Definindo as personas............................................................................................................................... 39
2.3 Estrutura hierárquica, Fluxo de navegação e criação de wireframes ...................................................... 41
2.4 Modelo mental, Design Thinking e um pouco mais de UX e Gestalt ....................................................... 47
3.Competência 03 | Avaliar a usabilidade e ergonomia visual nos sites e artefatos da web.............. 56
3.1 Avaliar princípios da usabilidade .............................................................................................................. 56
3.2 O que é Ergonomia Visual ......................................................................................................................... 68
Conclusão ............................................................................................................................................. 73
Referências ........................................................................................................................................... 74
Minicurrículo do Professor ................................................................................................................... 77

Introdução
Estudantes, sejam bem-vindos à disciplina de Web design!
Neste momento você provavelmente está no seu computador, celular, outro meio
digital ou até mesmo, porque não, com este documento impresso. Não faz diferença. Mas você
parou para pensar quais foram os caminhos que este documento que você está lendo passou até
chegar aqui? Porque escolheram estas cores, fontes, ilustrações e como isso cabe perfeitamente em
sua tela. Pois bem, estas perguntas, e mais algumas outras dúvidas que você nem sabe que tem,
serão respondidas nesta disciplina.
Para começar você irá entender o que danado é isso de Web design. Muitos de nós,
desde cedo, se acostumou a “navegar pela web”, também temos alguma noção de design, mas eles
juntos significa o que, e como está presente no nosso dia-dia.
Sabendo disso, serão apresentados variados tipos de artefatos para web, suas funções e
através da linguagem de marcação você irá entender um pouco como é possível estrutura-los.
Se já sabemos o que é, as opções e como são formatados, é a hora de planejar a criação, aplicando
boas técnicas de usabilidade e por fim, aprendendo a criar sites ou aplicativos.
Após isso, serão apresentados métodos para que seu projeto saia da melhor forma
possível e seja agradável ao usuário/cliente, afinal de contas, este é um dos nossos objetivos. Para
isso serão apresentadas técnicas de Arquitetura da Informação.
E por fim, mas não menos importante, iremos aprender a avaliar se nosso projeto está
correto com o que nos foi apresentado. Afinal de contas, para saber se algo ficou bom é sempre
importante testá-los!
Sejam bem-vindos e vamos navegar em um mundo multimídia!
4
Competência 01
1.Competência 01 | Desenvolver artefatos para web focando na interface

e sua usabilidade
Antes de começar a competência que tal ouvir o podcast e entender um pouco

sobre o que falaremos neste início curso. Confere lá
1.1 Uma introdução à web e ao design
A World Wide Web, também conhecida como www e para os mais íntimos, web, que
significa rede em inglês, começou lá no ano de 1989 quando Tim Berners-Lee propôs um sistema de
distribuição de informação baseado em hipertexto e, em seguida, hipermídia. Ou seja, dando a
liberdade do leitor de escolher vários caminhos, como, por exemplo, você agora tem a possibilidade
de com dois cliques pular para outros textos, vídeos ou áudios. Mas não faça isso, por favor.
Através da web você pode “navegar”, como dizem os mais velhos, em diversos websites
e outros tipos de plataformas, que falarei mais adiante. Em geral as páginas se encontram em
formatos como HTML, Flash, XHTML e CSS que são as linguagens para criação de artefatos mais
utilizados. Outro tema que será abordado mais para frente. Para fazer isso é necessário a existência
do servidor web, que é o computador ou a unidade onde se executam determinados softwares.
Vamos saber neste podcast um pouco sobre a história da WEB, confira no

segundo podcast
Web e Internet é a mesma coisa? Vamos saber mais! Link

https://canaltech.com.br/entretenimento/qual-a-diferenca-entre-internet-e-
world-wide-web/
5
Competência 01
A outra parte do Web design, é uma palavra inglesa com origem no latim Designare, que
seria “destacar, marcar, sinalizar”. O professor Robin Willians (não confundir com o ator Robin
Willians dos excelentes filmes, Gênio Indomável, Jumanji e O Homem bicentenário) em seu livro
Design para quem não é Designer, diz que o termo design pode ser denominado como qualquer
processo criativo que se utiliza das mais variadas técnicas para conceber algum artefato através da
elaboração e concepção de um projeto.
O Design possui diversas áreas como Design Gráfico, Design de Ambiente, Design de
Interior e muitos mais. Além do tema que você aprenderá no decorrer desta apostila, que é o Web
Design, que seria, em resumo, a utilização de métodos do design para a criação de conteúdo na
web.
Então a função do Web designer é a de adaptar os sites, artefatos e plataformas da web

através de um projeto que forneça soluções eficientes e eficazes em usabilidade, ergonomia visual,
desempenho e comunicação, focadas nas necessidades do público-alvo. No entanto, cabe frisar, a
função do Web designer não é apenas a da produção de imagem ou conceitos da linguagem visual,
ele também pode atuar na organização textual de um site, através da tipografia e da arquitetura da
informação.
Web Designer e Desenvolvedor Web é a mesma coisa?

https://upsites.digital/desenvolvimento-web/web-designer/
1.2 Tipos de sites, blogs e aplicativos

Com certeza você já acessou um site, até porque para chegar até aqui em algum
momento você teve que passar por um. Ele, que traduzindo para o português seria chamado de
sítio (estranho, né?), são locais ou espaços na internet (que não é a mesma coisa que web,
recordam?), compostos por uma ou mais páginas de hipertexto, identificados por um nome de
6
Competência 01
domínio. Eles podem conter textos, gráficos, vídeos, áudios, enfim, tudo o que você imaginar
relativo à multimídia.
Desde os mais tradicionais e sofisticados, aos mais simples, na web podemos encontrar
incontáveis sites, com uma quantidade imensa em opções de conteúdos e diversidade de assuntos.
Vale destacar que muitos deles não possuem apenas uma finalidade, podendo apresentar vários
tipos e objetivos. Vamos conhecer alguns?
Portais Institucionais
É o tipo de site mais comum, podendo ser utilizado por empresas (públicas ou privadas),
órgãos públicos ou por figuras públicas, as celebridades. Em resumo, estes portais têm como
objetivo apresentá-las no ambiente online.
Eles podem, entre outras coisas, apresentar o histórico da empresa ou a biografia de

uma pessoa, seus serviços e produtos, contatos. A importância desse tipo de site é de passar
credibilidade, se aproximar do cliente ou da população em geral, no caso dos órgãos públicos, e
disponibilizar as informações necessárias, podendo ser com páginas fixas ou dinâmicas, no entanto
que possuam um determinado grau de atualização.
Figura 01 – Site da Secretaria de Educação e Esporte de Pernambuco
7
Competência 01
Fonte: educação.pe.gov.br
Audiodescrição da figura: No centro da tela, imagem colorida da página principal do site da Secretaria de Educação e
Esporte de Pernambuco, em destaque, fotografia colorida de uma sala de reunião. Da esquerda para a direita, 5 pessoas
brancas, sentadas no entorno de uma bancada em U, uma sequência de uma mulher e quatro homens, todos estão
usando máscara. Na plateia, pessoas observam. Fim da audiodescrição.
Loja virtual
A loja virtual é definida por efetuar venda direta de produtos e serviços ao cliente por
meio on-line, sendo uma boa opção para lojas de roupas, acessórios e até serviços de delivery ou de
qualquer coisa, não ilegal, que você queira vender.
No entanto, para que ele funcione é necessário desenvolver um site responsivo que
esteja sempre atualizado, afinal de contas é horrível quando você vai comprar algo e ele não está
mais disponível, mesmo o site acusando que sim, com os produtos dispostos para venda, assim com
a devida precificação. Ou seja, sim, coloque os preços, nada de só por DM.
Neste tipo de site a experiência do cliente é a questão central, a finalidade é gerar

interesse em adquirir o produto. Os sites mais limpos, cuja a finalidade é comprar, costumam
levar vantagem sobre os demais.
Porém, é importante separar aplicativo de site, as finalidades de ambos são diferentes,

com o site devendo oferecer uma amplitude maior de recursos, se possível até um cafezinho.
Outro ponto importante é que se você trabalha com poucos produtos e tem uma
demanda pequena, talvez fazer um site de compras não seja o melhor caminho, podendo optar
tanto por redes sociais como por aplicativos. Conheça um pouco mais.
8
Competência 01
Figura 02 - site buscapé

Fonte: buscape.com.br
Audiodescrição da figura: No centro da tela, imagem colorida da página principal do Buscapé, na tela, da esquerda para
a direita, 3 produtos (livros) em destaque, com descrição e valor. Fim da audiodescrição.
Portal de Notícias
Outro tipo de site extremamente popular. Eles são páginas na internet que servem
como ponto de acesso direto a um conjunto de serviços e informações, em geral através de grandes
veículos de notícias. Em seu site, o globo.com, destaca que seu portal permite que o usuário
encontre, em uma mesma página, acesso a e-mail, vídeos, notícias, entretenimento, esportes,
downloads, jogos, rádios, blogs, fotologs, sites de humor e informações sobre programação de TVs,
entre outros serviços e conteúdos.
Muitos deles permitem a interação direta do leitor através da caixa de comentário.
Exemplo:
9
Competência 01
Figura 03 – Site do G1
Fonte: g1.globo.com
Audiodescrição da figura: No centro da tela, imagem colorida da página principal do site G1, na tela, da esquerda para a
direita, 3 matérias em destaque, com fotografias coloridas e texto. Fim da Audiodescrição.
Site de Busca
O Google. Com esta definição acho que já daria para ter uma ideia do que é um site de
busca. Mas além do site mais visitado do mundo, existem outros sites de busca conhecidos como
Yahoo, que também é um Portal de Notícias (lembram que eu disse que um site pode ser mais de
uma coisa?), o ASK, o BING, etc...
Também existem alguns sites de buscas curiosos como o AllMusic que é buscador de
cantores e músicas, com um recurso de pesquisa que permite encontrar músicas, álbuns e artistas
de qualquer país e o Web Design Museum.
10
Competência 01
Figura 04 - site Web Design Museum

Fonte: web.design.com
Audiodescrição da figura: No centro da tela, imagem colorida da página principal de uma sequência de telas, da
esquerda para a direita, de cima para baixo, 9 sites (Web Design Museum, google, Apple e Coca-Cola). Fim da
audiodescrição.
Hotsite
Não é o que alguns de vocês podem imaginar. Os hotsites são utilizados normalmente
para ações de marketing sendo incluídos em outros sites. Ou seja, os hotsites não funcionam
isoladamente, precisando de hospedeiro. Sendo assim, em geral, os hotsites são sites estáticos.
Sendo assim, se você busca destacar algo no seu site, uma campanha, uma ação, uma
informação, muitas vezes a utilização de um hotsite é um bom caminho.
11
Competência 01
Figura 05 - hotsite da marca Ipanema

Fonte: https://blog.netzee.com.br/website-hotsite-e-landing-page-qual-usar-para-meu-negocio/
Audiodescrição da figura: No centro da tela, imagem colorida do Hotsite da Ipanema. Ao fundo, sol com nuvens
amarelas e luz resplandecendo, na parte superior, 6 placas coloridas com as palavras (a promoção, Ipanema, cadastre-
se, você e Ipanema, dúvidas, regulamento. Abaixo, “Promoção, você no calor da moda com Ipanema”. Da esquerda para
a direita, 4 objetos, (Tablet na vertical, tablete na horizontal, ipad e fone de ouvido e um carro rosa. Fim da
audiodescrição.
Landing Page
Assim como os hotsites, ele é muito utilizado no marketing digital. O landing page, ou
página de aterrissagem, é a primeira página quando se abre um site, e é feita de forma específica,
sendo mais objetivas e criadas estrategicamente.
Ela difere do hotsite por trazer mais opções e informações e também difere de uma
página normal por, não necessariamente, ser fixa e ser objetivamente ligada ao marketing.
Então Web designer, se você estiver vendendo ou trabalhando para uma empresa que
vende, por exemplo, um ebook, uma landing page é uma boa solução para apresentar as
informações indispensáveis para o visitante, trazendo um pouco do produto e reforçando a ideia de
que ele deixe seus dados de contato. Saiba um pouco mais.
12
Competência 01
Figura 06 - modelo de landing page

Fonte: https://www.idealmarketing.com.br/blog/modelos-de-landing-page/
Audiodescrição da figura: No centro da tela um modelo de landing page de um petshop. Da esquerda para a direita,
uma imagem onde está escrito “cupom de desconto” e ao lado um texto escrito “Quer ganhar 10% de desconto em sua
próxima compra? ”. Fim da audiodescrição.
Blogs
Provavelmente você já viu ou leu algum blog, seja pessoal, corporativo ou profissional.
Na verdade, nesta disciplina diversos blogs servem de apoio.
Diferente dos sites, os blogs são mais leves e com linguagem mais direta. Ou seja, se vai
fazer um blog, evite os textões e utilize outros tipos de mídia que vai do textual, podendo ser vídeo
ou áudio, e sempre se utilize de hiperlinks.
Outra diferença é que os blogs devem possuir uma atualização mais recorrente. Então,
se você busca, por exemplo, a criação de um portfólio online, o blog não é o melhor caminho.
No entanto, assim como os sites, existem um monte de tipos de blogs. Os mais

populares que são os pessoais funcionam de forma parecida a um diário, existem também os
institucionais, que não podem ser confundidos com o site, servindo como um apoio a eles, blogs de
receita, de comentários em geral e até de notícias.
13
Competência 01
Além disso, ainda temos plataformas um tanto mais novas similares aos blogs, como o
Medium e o Tumblr, que vocês irão conhecer já já, caso não conheçam.
Interessou-se pelo assunto? Pois neste blog você saberá mais sobre o tema e
como criar um blog >
https://www.weblink.com.br/blog/como-criar-um-blog
Tumblr
Embora tenha uma pegada diferente de outras plataformas de blog como o WordPress
e seja mais focado em posts curtos, o Tumblr não chega a ser um microblog, como o Twitter. Além
disso, ele possui um ótimo layout para exposição de fotografias, (apesar de que para isso talvez seja
melhor você utilizar o Picart).
O Tumblr se explica como um espaço para celebrar a criatividade. “Nós queremos que
você se expresse livremente e use o Tumblr para refletir quem você é, o que você gosta e no que
você acredita”, diz a página.
Quer saber mais sobre?

https://www.techtudo.com.br/dicas-e-tutoriais/noticia/2016/06/o-que-e-
tumblr.html
Medium
O Medium é uma plataforma de publicação mais parecida com uma revista digital, nisto
se parece muito com um blog comum, onde as pessoas podem ler artigos sobre os tópicos que mais
importam para elas (ou seja, seguir temas de interesse), assim como compartilhar as suas próprias
ideias.
14
Competência 01
No entanto, diferente dos blogs, quando você faz o cadastro e começa a publicar você
não batiza de qualquer maneira. O endereço para os seus textos é
www.medium.com/@SeuTwitter, já que o cadastro é feito apenas pelo twitter.
No Medium não existem tags ou categorias para se encontrar o texto. Eles são
exatamente as categorias! Porém com uma página bonitona para abrigar todos os textos, e uma
diferença crucial: as Collections, que por padrão, são públicas.
Ou seja, eu posso criar uma collection só para textos sobre música (hiperlink: Re / verb –
Medium), e, por ela ser pública, outra pessoa pode vê-la e resolver escrever um texto nela. Além
disso, ela pode ser indicada para outros textos que falem sobre músicas, em resumo o medium tá
com um pé no blog e outro nas redes sociais. Saiba mais.
Aplicativos
Com a evolução da tecnologia os computadores cada vez diminuíram de tamanho.
Talvez você não saiba, mas o celular que leva no bolso consegue armazenar bem mais informações
do que computadores que eram quase do tamanho do seu quarto. Acessem este médium e
conheçam mais sobre a plataforma que falei a pouco e sobre o tema.
Figura 07 - A evolução dos computadores

Fonte: https://medium.com/@edumarques936/a-evolu%C3%A7%C3%A3o-dos-computadores-a-partir-dos-anos-1900-
46606ccb0235
Audiodescrição da figura: No centro da tela, da esquerda para a direita, ilustração de uma linha do tempo, de 1960
(com um grande equipamento de computador), na sequência de 1970, 1980, 1990, 2000, 2010 e 2015 (um
smartphone). Fim da audiodescrição.
15
Competência 01
E o que resume bem toda esta evolução são os aplicativos, que surgem do termo em
inglês Aplicattive, que possuímos em nossos celulares. Atualmente utilizamos eles para nos
locomover, mesmo que nem sempre ele aponte o horário correto do ônibus, para pedir comida,
pagar contas e até para paquerar. Enfim, se você tem um celular e ele tem menos de 15 anos, é
certeza que você tem algum tipo de aplicativo nele.
Motivado por estes avanços, o mercado de aplicativos para aparelhos celulares mostra-
se em crescimento rápido. Atualmente é um mercado disputado por diferentes plataformas
tecnológicas, incluindo sistemas operacionais e plataformas de desenvolvimento, gerando uma
variedade de soluções no mercado. Frente a este fato, um dos principais desafios deste mercado é
desenvolver aplicativos em um ambiente de tecnologia altamente fragmentado e em rápida
evolução.
Atualmente existem basicamente 3 tipos de aplicativos móveis: os aplicativos nativos,

aplicativos da web e aplicativos híbridos.
De acordo com o professor James White, os aplicativos nativos são desenvolvidos para
apenas um tipo sistema operacional, oferecendo mais acessos a recursos do celular, tais como
câmera, agenda, calendário, GPS, etc. É importante lembrar, que dependendo da funcionalidade da
aplicação o app pode funcionar sem a necessidade da internet.
Já os aplicativos para web podem ser baseados em HTML5 (chegaremos lá) e exibidos
através de um navegador embutido na aplicação, eles também são multiplataforma, funcionando
além do celular, como o Facebook, por exemplo.
E o aplicativo híbrido é uma mistura dos tipos web e nativo. Ou seja, ele funciona como
um app nativo, mas sua codificação é toda desenvolvida na linguagem web, podendo
HTML5, JavaScript ou CSS. Muitos dos aplicativos para web também podem ser considerados
híbridos, como o Facebook e o Instagram.
Pode-se dizer que estes são os aplicativos os que trazem mais possibilidades e maior
capacidade de atualizações na sua interface e usabilidade.
16
Competência 01
TIPO DE LINGUAGEM VANTAGENS DESVANTAGENS
• Maior integração com usuário • Cada plataforma terá sua

Nativo • Velocidade de execução não versão do programa
depende da web • Distribuição e atualização
dependente de lojas online
• Executados pelo navegador • Pouca integração com o

independente da plataforma hardware do dispositivo
• Atualização e distribuição • Lento
rápidas, sem necessidade de • Menos funcionalidades
Aplicativo para Web atualizações • Execução depende da
• Acesso rápido e fácil internet
• Compartilha códigos com • Desempenho e design

Híbrido outras plataformas limitados
• Pode ser distribuído em lojas
online
• Pode usar recurso de
plataformas com código
nativo
Tabela 01 - Diferenças entre aplicativos nativos, híbridos e para web.

Fonte: o autor.
Saiba um pouco mais

https://www.webpixel.com.br/aplicativo-movel/
17
Competência 01
1.3 Linguagens de marcação, de design e de programação de web
No capítulo anterior você aprendeu um pouco sobre sites e outros tipos de plataformas
para web. Porém, fica a pergunta, como eles são feitos? Calma, eu sei que o desenvolvimento de
web não é o nosso foco, no entanto, para saber como modifica-los e melhorá-los é importante
saber como eles são feitos, certo? Então vamos lá.
A linguagem de marcação é um conjunto de códigos empregados a dados e a textos,

com a finalidade de adicionar informações específicas sobre eles. Ela é utilizada em diferentes
segmentos, em especial na indústria editorial onde a marcação e a formatação de páginas são feitas
a partir desse recuso.
As linguagens de marcação se utilizam do conceito de marcador ou tag, que já trazem

algum significado e que quando forem visualizados por algum sistema que as reconheça, irão saber
como o conteúdo deve ser exibido.
Exemplo: <title>, <body>, <header>, <footer>, <article>, <video>, e muitos outros.
A mais popular das linguagens de marcação é o HTML, fundado por Tim Berners-Lee
(lembra?). HTML é a sigla em inglês Hypertext Markup Language, que significa linguagem para
marcação de hipertexto.
Já falei um pouco anteriormente sobre hipertexto. Mas, sendo mais específico, de

acordo com a definição de Maurício Samy Silva, autor de diversos livros sobre HTML, o hipertexto
seria todo o conteúdo inserido em um documento para web tendo como principal característica a
possibilidade de se interligar a outros documentos, através de links.
Maurício Samy ainda destaca que a HTML evoluiu de acordo com o tempo, passando
por diversas versões, sendo a atual a HTML5. Esta versão, mais atualizada, traz uma maior
compatibilidade com os navegadores (Google Chrome, Firefox, Microsoft Edge), maior suporte de
multimídia (áudio e vídeo) e melhor desempenho em dispositivos móveis, sendo atualmente a
principal do mercado.
18
Competência 01
Figura 08 - A evolução do HTML.

Fonte: http://blogdoscursos.com.br/html-5-o-que-voce-precisa-saber-para-comecar/
Audiodescrição da figura: No centro da tela, da esquerda para a direita, ilustração de uma linha do tempo da HTML, de
1991 até o surgimento do HTML5. Fim da audiodescrição.
Confira aqui algumas outras diferenças:

https://www.hostinger.com.br/tutoriais/diferenca-entre-html-e-html5
Além do HTML existe também o XML como linguagem de marcação. Ambos são bem
parecidos, a grande diferença é que o HTML descreve a aparência e as ações em uma página na
rede enquanto o XML não descreve nem aparência e nem ações, mas sim o que cada trecho de
dados é ou representa, ou seja, o XML descreve o conteúdo do documento. Outro ainda existente é
o XHTML que é basicamente a mistura entre o XML e o HTML.
Quer ver o HTML que constitui o site? Vá numa página, clique no botão direito do
mouse e depois em inspecionar. E... pronto!
19
Competência 01
Figura 09 - Como verificar o HTML de um site

Fonte: própria
Audiodescrição da figura: Página à esquerda, um tanto escura, com a mesma imagem da figura 8. Ao lado códigos de
HTML da mesma página. Fim da audiodescrição.
Outra famosa linguagem de marcação é o Flash Adobe, conhecida por ser uma das
primeiras na criação de efeitos e animações bem diferentes do que se via nos sites tradicionais
feitos somente com a linguagem HTML.
O Flash também trazia a possibilidade de construir páginas inteiras, reproduzir

vídeos, jogos online, etc. Atualmente, com a HTML5, ficou um tanto em desuso,
tanto que foi encerrado ano passado. Mas, caso lhe interesse, você pode
conhecer um pouco mais aqui. https://canaltech.com.br/software/O-que-e-o-
Adobe-Flash/
CSS
Outra linguagem, que não funciona como de marcação, mas atua em parceria com ela, é
a linguagem de "folha de estilo" ou “linguagem de design” que é o CSS, ou Cascading Style Sheets
(Folha de Estilos em Cascata), utilizada para definir como os documentos escritos na linguagem de
marcação (HTML ou XML) devem ser apresentados em termos de formatação e de layout.
20
Competência 01
Ou seja, o CSS é o principal amigo do Web designer pois ele será o responsável, através
de códigos, pela “decoração” do site. Com ele você pode mudar a cor do texto e do fundo, criar
tabelas, fazer alterações no layout, ajustar imagens, etc
JavaScript
De acordo com o livro JavaScript: O Guia Definitivo, de David Flanagan, o JavaScript é

uma linguagem de programação de web. Atualmente, a ampla maioria dos sites modernos e todos
os navegadores modernos em computadores, console de jogos, tablets, smartphones, incluem
interpretadores JavaScript.
Se o HTML serve para especificar o conteúdo, o CSS cuida da apresentação, o JavaScript

será responsável pelo comportamento das páginas. Ou seja, é através dele que é possível incluir e
editar multimídias, imagens animadas, infográficos interativos, entre outras coisas.
Além do JavaScript, outra linguagem de programação bastante utilizada é o PHP. Apesar

de parecido, ele traz algumas diferenças do Java. Saiba mais.
21
Competência 01
Figura 10 - Diferenças entre HTML, CSS e Javascript

Fonte: https://www.freecodecamp.org/news/learn-html-in-5-minutes-ccd378d2ab72/
Audiodescrição da figura: No centro da tela, uma ilustração colorida. Da esquerda para a direita, um esqueleto, abaixo
está escrito (HTML), um corpo de um homem de cueca, abaixo está escrito (CSS) e imagem de uma representação do
tecido humano, abaixo está escrito (Java script). Fim da audiodescrição.
Quer saber mais sobre HTML, CSS e JAVASCRIPT e o que eles fazem, confira
este vídeo e veja na prática as diferenças entre os três.
https://www.youtube.com/watch?v=lwSLZ3e5Zn8
1.4 Planejamento, usabilidade e a importância de um site responsivo
Já falei um pouco sobre a história da web, alguns tipos de produtos e como eles são
programados, então é chegada a hora de colocar a mão na massa e planejar. Vamos lá!
Objetivo – Como diz o ditado, “tem que começar pelo começo”, e o início de tudo é
definir um objetivo, não adianta criar um site, blog, aplicativo ou até um software sem um objetivo
22
Competência 01
claro. Na verdade, na vida é importante definir os objetivos, você provavelmente está fazendo este
curso, e espero que gostando até aqui, com algum objetivo.
E para isso você deve responder algumas questões como: para que servirá; qual o tipo
de site, aplicativo ou blog que você irá propor; quais resultados você espera a partir deles e como
irá calculá-los, e o principal, qual público você busca atingir e como será seu relacionamento com
eles.
Público-alvo – Não dá para ter tudo, e no mundo digital não é diferente, em um mundo
cheio de pessoas distintas, cada um com seu gosto, você vai precisar definir qual público quer
alcançar.
Por exemplo, se você vai fazer um site com o objetivo de vender roupas esportivas, vai
precisar saber que público consome mais esse tipo de produto, qual idade, renda, que tipo de
produtos consomem mais, onde moram, pesquise! Não adianta nada você fazer um excelente site
se o público que você busca atingir não irá ver.
É claro que você não vai se resumir e focar em apenas um público, até porque, como eu
disse, as pessoas não são iguais, mas é importante entender quem será a maioria do seu público
para saber qual linguagem visual ou textual você utilizará.
Conteúdo – Você já tem o objetivo e o público alvo definido, então é chegado o

momento de pensar o conteúdo, e para isso uma coisa é essencial: clareza e coesão. Busque
conteúdos que prezam pela simplicidade, linguagem direta, coesa e clara. Mesmo que seu site seja,
como no exemplo anterior, uma loja virtual para vender roupas esportivas, busque apresentar de
forma mais clara o produto.
Exemplo: Se o produto é a camisa de algum clube, especifique o tamanho, o material

que é feito e o preço. Por sinal, dica, esse negócio de esconder o preço não tá com nada, quanto
mais claro for, melhor. Outra dica, usando o mesmo exemplo, se o produto é a camisa de clube,
sendo possível, escreva um pequeno texto sobre o clube, ano que foi fundado, principais títulos,
essas coisas. Curiosidades são sempre bem vindas.
Porém, evite textões, deixe os textões para as redes sociais.
23
Competência 01
Atrair o público – Se você já tem o conteúdo e o público, cabe agora atraí-los.

Independente do que você vai criar, mesmo que não seja para vender algo, busque fazer um
produto atrativo. Algum vídeo, alguma produção textual, promoção, enfim.
Além disso, é importante focar no lançamento, que é o momento que deve gerar um
número maior de acessos. Se for criar um site, um landing page é uma boa pedida. E, como falei
anteriormente, trazer informações e responder rápido o cliente é sempre bem-vindo.
Existem vários plataforma de desenvolvimento de site gratuitas, as principais

atualmente são Wix, Wordprees, site123, Joomla, entre outros. Ainda nesta
competência iremos aprender um pouco sobre como criar.
Para desenvolver um site é importante o domínio que é a marca do seu site.

Pense bem o nome que irá escolher e o domínio que usará, sendo possível,
registre a marca. Você pode fazer isso pelo registro.br
Usabilidade - Passado os processos para criação de artefatos, é necessário identificar

algo extremamente atual e importante: a usabilidade.
Usabilidade é o termo usado para descrever a qualidade da interação dos usuários com
uma determinada interface. Esta qualidade está associada, segundo um dos principais
pesquisadores sobre usabilidade, Jakob Nielsen, aos seguintes princípios:
• facilidade de aprendizado;
• facilidade de lembrar como realizar uma tarefa após algum tempo;
• rapidez no desenvolvimento de tarefas;
• baixa taxa de erros;
• satisfação subjetiva do usuário.
24
Competência 01
Em seu sentido mais amplo, a usabilidade na interação humano-computador não

abrange apenas o sistema informatizado, mas o equipamento e o mobiliário incluídos no ambiente
de trabalho, fazendo interseção com a usabilidade de produtos.
Considera-se que a interface tem um problema de usabilidade se um determinado

usuário ou um grupo de usuários encontra dificuldades para realizar uma tarefa. Tais dificuldades
podem ter origens variadas e ocasionar perda de dados, diminuição da produtividade e mesmo a
total rejeição do produto por parte dos usuários. Então é importante ter muito cuidado!
Vamos a alguns exemplos:
1 - Talvez o pior dos problemas. Se sua página demora a carregar, não carrega ou não
aparecem todos os ícones. Cuidado! Contrate um servidor melhor ou observe o tamanho das
imagens. Também observe se o problema ocorre apenas com um navegador (Edge, Firefox,
Chrome) e se não é problema com o Javascript ou CSS.
Figura 11 - página sem carregar

Fonte: https://support.google.com/chrome/thread/40993392/alguns-sites-n%C3%A3o-abrem-corretamente?hl=pt-BR
Audiodescrição da figura: No centro da tela, uma página de um site com códigos. Fim da audiodescrição.
2 - Problemas com a tipografia, ou seja, as letras escolhidas e com as cores. Em

resumo, fica difícil de ler o que tá escrito abaixo, né?
25
Competência 01
Figura 12 - página com várias tipografias diferentes

Fonte: https://www.1001fonts.com/bedtime-stories-font.html#gallery
Audiodescrição da figura: No centro da tela, uma página de um site e uma sequência de 4 linhas com palavras
aleatórias e fontes diferentes, nas cores (preto, rosa, vermelho e azul escuro). Fim da audiodescrição.
Figura 13 - Palavras com problemas de tipografia

Fonte: O autor
Audiodescrição da figura: Acima está escrito: escrever algo em amarelo sobre uma página branca é
ruim e atrapalha bastante e nem sempre tudo que parece bonito é bom para leitura. Fim da audiodescrição.
3 - Cuidado com os menus confusos ou que exigem muito do leitor. Falei

anteriormente que utilizar landing page é sempre uma boa pedida. No entanto, é preciso ser direto.
Como dizem, tempo é dinheiro, e nem sempre você tem tempo para passar por sete passos, muitos
deles evitáveis.
26
Competência 01
Figura 14 - Facebook das Casas Bahia

Fonte: http://brnarede.com.br/pt/gamificacao-a-casa-do-desconto-das-casas-bahia-e-seu-ui-ux-confuso/
Audiodescrição da figura: No centro da tela, página do facebook das Casas Bahia, e de cima para baixo, uma sequência
de 7 passos, à direita, e à esquerda uma ilustração de uma casa com um boneco de um menino com chapéu. O texto na
parte superior da imagem diz: “casa do desconto”. Fim da audiodescrição.
4 - Cuidado com as url, links, e-mails. Sabemos dos perigos que existem na internet com
golpes e afins. Então, evite desconfiança. Por exemplo, talvez você não fosse entrar em um site com
o nome twssty.com sem desconfiar, ou enviar um e-mail para xywxx@gmail.com, cuidado com o
domínio, evitar o X e Y, se possível. Também evite urls enormes.
5 - Muitos anúncios. Bem, esse é quase autoexplicativo. Por mais que muitas vezes os
anúncios ajudem na rentabilidade do seu produto, evite que eles estejam por toda a parte.
27
Competência 01
Figura 15 - layout do Site hemmy.net

Fonte: https://www.webhostingsecretrevealed.net/blog/web-design/10-worst-website-design-mistakes/
Audiodescrição da figura: No centro da tela, uma página de um site chamado Hemmy.net e uma sequência de códigos e
propagandas e anúncios. Fim da audiodescrição.
6 - Site, app, blog, etc sem buscador ou uma barra para pesquisar, não dá! Lembre
sempre de ter um e mantê-lo atualizado, ou seja, com as buscas funcionando perfeitamente e com
o máximo de refinamento possível. Então, por exemplo, se eu pesquiso a palavra “casa” apareçam
apenas pesquisas que contenham a palavra casa de forma isolada e não, termos como
“casamento”, “casarão”, “casado”, etc.
28
Competência 01
Figura 16 - Ilustração de um buscador

Fonte: https://www.tlgagenciadigital.com.br/blog-artigos/meu-site-na-busca-organica-do-google/
Audiodescrição da figura: No centro da tela, uma página de um site com fundo azul, e projeções de telas de internet, no
centro, ilustração de uma mão com lupa. Fim da audiodescrição.
7 - E por fim, porém não menos importante. Este site. Ele basicamente é a mistura de
tudo que há de errado em um site.
29
Competência 01
Figura 17 - site acidez mental

Fonte: https://www.techtudo.com.br/noticias/noticia/2011/12/top-10-os-sites-brasileiros-mais-feios-da-
atualidade.html
Audiodescrição da figura: No centro da tela, uma página de um site “Acidez Mental” com uma sequência direito
diversas imagens de propagandas. Fim da audiodescrição.
UX e UI
Atualmente boas técnicas de usabilidade se confundem com UX, ou User eXperience
(experiência do usuário), que não envolve apenas a facilidade do uso e conseguir atingir os
objetivos como a usabilidade propõe. Indo um pouco além e se relacionando com sentimentos e
emoções do usuário antes, durante e depois de utilizar o sistema.
Ou seja, o usuário deve gostar de utilizar seu produto e não apenas vê-lo como um meio
para conseguir um objetivo. Não tem quando você fica um tempão em determinada página, seja
lendo, seja vendo imagem que lhe agradem e você nem sabe bem o motivo, já que entrou ali
apenas para pesquisar algo. Pois bem, você foi seduzida ou seduzido pela UX.
Outro aspecto importante é a User Interface (ou interface do usuário) que não é tão
subjetiva como a UX, mas igualmente importante. De acordo com este artigo no blog do
Rockcontent (inclusive um bom site para entender mais sobre Web design), UI é um termo utilizado
para explicar como serão feitas as interações entre pessoas e softwares ou aplicativos.
O artigo explica que as empresas começaram a desenvolver essa área para facilitar de
forma estratégica a navegação dos usuários em suas plataformas, permitindo que eles consigam ser
orientados através de recursos visuais para concluírem suas ações com praticidade. Se um
consumidor entra na sua loja online, por exemplo, e não consegue finalizar a compra porque não
está encontrando as informações necessárias para chegar até o carrinho, você certamente está
perdendo vendas.
30
Competência 01
Figura 18 - Diferença entre UX e UI

fonte: https://gabrielsilvestri.com.br/o-que-e-ui-design/
Audiodescrição da figura: Uma ilustração de um cérebro dividido em preto e azul, do lado preto escrito
Comportamento UX e algumas definições abaixo (pesquisa, protótipos, etnografia, personas e objetivos), do lado azul
escrito aparência UI e algumas definições abaixo, (design visual, tipografia, cores, layouts e design system). Fim da
audiodescrição.
Veremos mais sobre UX e UI em Arquitetura da Informação na competência a seguir.
Site Responsivo
Se sua plataforma tem boa usabilidade e você aplicou corretamente técnicas de UX e UI,
ele com certeza será um site responsivo. Você pode tá se perguntando, o que é um site responsivo?
É um site “responsa”?. Sim, de alguma forma, sim.
No livro Responsive Web Designers, Ethan Marcotte explica que uma interface
responsiva é, de forma resumida, aquela que se adapta a diferentes resoluções de tela. No entanto,
Maurício Samy ressalta que um design responsivo vai muito além apenas da adaptação do layout
31
Competência 01
ao tamanho da tela. O conceito na sua forma mais ampla deve ser entendido como o design ser
capaz de “responder” às características do dispositivo ao qual é servido.
Ou seja, o layout responsivo expande e contrai com a finalidade de se acomodar de

maneira usável e acessível à área de onde é visualizado, seja smartphone, computador, notebook,
tablet, etc.
Resumindo, se você tem a impressão que determinado site é melhor lido pelo celular ou
pelo Computador, trazendo grandes diferenças quando se muda o meio é porque ele não é
responsivo.
Figura 19: Site responsivo x Site não responsivo

Fonte: https://c2ti.com.br/blog/3-ferramentas-para-testar-um-site-responsivo-design
Audiodescrição da figura: Do lado esquerdo, com o fundo azul, temos uma ilustração de uma mão segurando um
celular, escrito acima Site Responsivo (e três informações: mobile menu, retina image e call to action). Do lado direito,
com o fundo laranja e escrito Site não responsivo na parte de cima e abaixo também uma mão segurando um celular (e
três informações: navegação desorientada, texto pequeno e conteúdo obstruído). Fim da audiodescrição.
Vamos entender melhor na prática. Acesse a página responsinator.com e digite a url de

qualquer site, no exemplo abaixo coloquei o EducaPE. E verifique como o site se comporta em
diversas plataformas. Atente principalmente para alterações no layout, cores, disposição das
32
Competência 01
informações, se em determinadas plataformas algumas informações somem e se isso traz algum

problema, se ele carrega corretamente as informações. Divirtam-se.
Figura 20 - Site responsinator.com

Fonte: O autor
Audiodescrição da figura: No centro da tela, uma página de um site com a Barra de busca do site repositor e, ao lado,
está escrito “Digite Aqui o endereço do site”. Fim da audiodescrição.
Figura 21 - Imagem do Educa-PE no site responsinator.com
33
Competência 01
Fonte: responsinator.com
Audiodescrição da figura: No centro, tela ilustrativa do site Educa-pe para Smartphone. Fim da audiodescrição.

Audiodescrição da figura: No centro, tela ilustrativa site Educa-pe, em um smartphone, na horizontal. Fim da
audiodescrição.
34
Competência 01

Audiodescrição da figura: No centro, tela ilustrativa site Educa-pe, em um smartphone, na vertical, Ilustração do site
Educa-pe em um tablete. Fim da audiodescrição.
Você agora já entende vários aspectos sobre a criação de artefatos, então que
tal ver na prática? Confere lá a vídeoaula e veja como criar um site e um
aplicativo
35
Competência 02
2.Competência 02 | Aplicar os princípios da arquitetura da informação em

artefatos da web
2.1 Porque devemos aprender sobre Arquitetura da Informação
Mas antes de aprender sobre Arquitetura da Informação que tal se informar

sobre a competência através? Escuta lá o podcast e tenha um resumo sobre a
temática!
De acordo com o Information Architecture Institute (Instituto de Arquitetura da

Informação): A arquitetura da informação é a prática de decidir como organizar as partes de algo
para ser compreensível. O Instituto ainda explica que a arquitetura de informação (IA) está nos sites
que usamos, aplicativos e softwares que baixamos, materiais impressos que encontramos e até
mesmo nos lugares que passamos. Ou seja, ela está em todo lugar!
O termo foi criado por Richard Saul Wurman, em 1975, ele também traz uma definição
bem interessante. Para ele, a Arquitetura da Informação deve tornar claro o que é complexo. Ao
criar o termo ele apontou que a explosão massiva de informações precisava de uma arquitetura, de
uma série de sistemas, um design e uma série de critérios de performance para mensurá-los.
Então, a IA ajuda a entender o que nos rodeia e encontrar o que procuramos, no mundo
real e online. Praticar a arquitetura da informação envolve ajudar as pessoas e organizações com as
quais trabalhamos a considerarem suas estruturas e linguagem de maneira cuidadosa.
Então, em boa parte das coisas no nosso dia-dia, virtual ou real, podemos imaginar e
aplicar conceitos de arquitetura da informação. E quando falo em boa parte, é boa parte mesmo.
Você pode imaginar a arquitetura da informação até numa paquera!
36
Competência 02
Figura 24 - Arquitetura da informação aplicada em um encontro

Fonte: própria
Audiodescrição da figura: No centro da tela, tabela denominada “Arquitetura da Informação aplicado em um
encontro”. Possui 8 linhas com as informações, de cima para baixo, os pontos (Ideia ou pedido do que será seu
objetivo), (Analisar os concorrentes: Verificar os pontos fortes e fracos), (Definir o público-alvo: escolher a melhor
37
Competência 02
opção), (Cenários: pensar nas várias possibilidades de cenário), (Pesquisar os conteúdos: do que seu público-alvo
gostará?), (Fluxo de processo: onde você colocará em prática o projeto), (Wire frame: Imaginar/planejar como colocar
em prática) e (Tá tudo certo? É hora de conquistar). Uma sequência de 8 ícones que correspondem a cada ponto
descrito). Fim da audiodescrição.
Mas como você não está aqui para aprender a paquerar, no mundo digital a Arquitetura
da Informação possibilitará a orientação necessária para o desenvolvimento de produtos e serviços,
trazendo tanto a melhoria na qualidade da navegação quanto na usabilidade.
Ou seja, quanto mais bem planejado e organizado seu projeto, menos problemas ele
terá o que acarretará mais tempo e dinheiro. Tudo isso envolverá temas como linguagem, design,
tecnologia, psicologia e muito mais.
Figura 25 - O que compõe a arquitetura da informação

Fonte: autor
Audiodescrição da figura: No centro da tela, fluxograma circular, com três círculos juntos, um verde escrito “contexto’,
um roxo escrito “conteúdo” e um laranja escrito “usuário”, no centro a palavra “AI”. Abaixo, uma tabela com Conteúdo
(texto, imagens, podcast, estrutura e taxonomia), Usurário (persona, busca pela informação, experiência de uso, o que
busca executando sua aplicação) e Contexto (objetivos do projeto, modelo de negócios, metodologia de
desenvolvimento, recursos e restrições), dividido em três colunas, da esquerda para a direita. Fim da audiodescrição.
38
Competência 02
2.2 Definindo as personas
Personas
Na competência passada apontei sobre a importância da definição do público-alvo na
criação de um projeto. No entanto, vamos ampliar um pouco essa visão e falar sobre as personas.
Primeiro é importante destacar que persona e público-alvo não é a mesma coisa.

Podemos dizer que o primeiro está contido no segundo (quem lembra disso na matemática?). Ou
seja, o público-alvo define algo mais genérico, um grupo maior de consumidores, já a persona cria
identidade e personagens de forma individual.
Figura 26 - Persona x Público Alvo

Fonte: https://rockcontent.com/br/blog/personas/
Audiodescrição da figura: No centro da tela, cartaz com ilustração colorida, da esquerda para a direita, com azul claro
ao fundo, uma ilustração de um homem negro, acima dele seu nome (Diego Mesquita, 33 anos, Gerente de Marketing
de uma grande empresa), na parte superior, a palavra “Persona”. À direita, com azul escuro ao fundo, um boneco cinza
com um alvo no peito, na parte superior, a palavra “Público Alvo”, ao lado está escrito, (Gerente de Marketing, entre
30- 45 anos, trabalham em grandes empresas, não gastam muito tempo na internet, renda mensal “entre 5.000 e
39
Competência 02
30,000”). Na parte inferior, quatro colunas divididas em duas linhas, da esquerda para a direita (definição específica,
personagem específico, detalhes sobre hábitos e trabalho, consumidor ideal, definição ampla, não se refere a alguém
específico, não fala sobre hábitos, pessoas que podem querer o seu produto). Fim da audiodescrição.
A criação de uma persona será importante para determinar alguns andamentos para o
seu projeto. E dica, ela pode ocorrer mesmo com o seu projeto (um site, por exemplo), pronto. Caso
você esteja com menos acessos ou compras, no caso de um site de vendas, talvez seja porque a
persona que você alcança não é a ideal.
Definindo uma persona você poderá determinar o tipo de conteúdo que precisa, definir
o estilo do seu conteúdo, melhorar suas estratégias de marketing e entender melhor as
modificações que ocorrem no mercado.
Existem alguns tipos de personas. Vamos conhecer as principais:
• Buyer persona – É o exemplo mais comum. Buyer = Comprador. Então, como o nome
indica, é um perfil semifictício que representa o seu comprador. A partir da criação
dessa persona é possível entender melhor o que compõe o seu público-alvo
• Audience persona – Audience = Audiência. Ela é importante no engajamento entre a
marca e o usuário. Pode até não ser a persona compradora, mas muitas vezes ajuda
a divulgar seu produto. Ela representa quem visita as suas páginas nas redes sociais,
lê as publicações do seu blog ou até assiste aos seus vídeos.
Nesta esquete do Porta dos Fundos podemos ver um bom exemplo de Audience
Persona. https://www.youtube.com/watch?v=fRKTwbgpDD8
• Brand persona – A persona não precisa apenas ser, veja só, humana. Ela pode ser a
própria empresa! No mercado atual é bem comum o processo de “humanização” das
marcas, então se torna interessante para sua marca ter a própria persona. Ela pode
ocorrer através de mascotes, como a Magalu do Magazine Luiza ou mesmo de perfis
nas redes sociais, um exemplo é o antigo perfil da Prefeitura de Curitiba. Ahhh sim,
Brand significa marca em inglês.
40
Competência 02
Figura 27 - Tuíte da Prefeitura de Curitiba

Fonte: http://g1.globo.com/pr/parana/noticia/2013/11/prefeitura-brinca-com-capivaras-e-nome-de-curitiba-nas-redes-
sociais.html
Audiodescrição da figura: No centro, fotografia colorida, uma captura de tela, na parte supeior, está escrito:
“Tranquilizamos todos os cidadãos avisando que essa imagem, publicada recentemente no instragram, não é real.
Obrigado”, na parte inferior, imagem de uma Capivara gigante atirando raios pelos olhos, na direção de três
monumentos e, ao fundo, fogo. Fim da audiodescrição.
Proto persona – Importante no projeto inicial da empresa, é a versão inicial das muitas
personas que uma empresa pode ter. Ela é criada por meio de um brainstorming da sua equipe e
avalia as principais características dos clientes.
No entanto, eu imagino que as personas do curso de Multimídia, além de criativas,

serem em sua maioria torcedoras do Sport e adorarem sorvete de napolitano, também gostam de
aprender através de outras mídias, como o vídeo. Então, no vídeo a seguir tem um tutorial bem
legal sobre como criar personas. Confira https://www.youtube.com/watch?v=r5lEnn4ImEI
2.3 Estrutura hierárquica, Fluxo de navegação e criação de wireframes
Estrutura hierárquica
41
Competência 02
Lembram que no tópico passado eu falei sobre o brainstorming? Com certeza, sim. Até
porque a informação está três parágrafos acima. E o primeiro passo para nossa estrutura
hierárquica é o brainstorming, a famosa tempestade de ideias, onde você vai selecionar as melhores
ideias para o seu projeto, neste caso usarei um site como exemplo. Após isso, e entendendo o seu
objetivo, é hora de definir quais são as prioridades do seu site.
Este processo pode ser feito como se fosse um organograma, dá para fazer em
algumas plataformas online, neste caso eu usarei o jamboard e lucidchart. Você
pode ver nos materiais complementares da disciplina.
Figura 28 - Organograma do site Lucidchart
42
Competência 02
Fonte: autor
Audiodescrição da figura: Um organograma colorido com a palavra Lucidchart, na parte superior, na horizontal. Na
parte inferior, 5 cartelas com as palavras (exemplos, preço, documentos, login e software). Na vertical, na parte inferior,
uma sequência que vai de (Login, abaixo, Editor Lucidchart), em seguida, Documentos, Perfil e Configurações. Na lateral,
uma sequência de que começa de Software, (equipe, tutorial e blog). Fim da audiodescrição.
Hierarquizar as informações é fundamental para entender o nível de importância delas,

como criar conteúdo e, principalmente, como usuário encontrará as informações.
Além disso, criar esse tipo de hierarquização servirá para você perceber algumas falhas
e ausências que possam ocorrer. Afinal de contas seria horrível criar um site para compras e só
lembrar de colocar o botão “pagar” quando ele estiver no ar.
Neste tipo de criação o autor Merlyn Holmes, explica que três aspectos são importantes
a se pensar pelo arquiteto da informação. São eles:
Criação de Rótulos – Devem ser simples e objetivos, facilitando o entendimento do

usuário sobre o que se trata a categoria.
Figura 29 - Menu no site do Atacado dos Presentes

Fonte: o Autor
Audiodescrição da figura: Na tela, página de um site denominado “Site com a palavra Serviços Oferecidos”, sem
seguida, à direita, na parte superior, imagem de uma mulher branca, cabelo longo, preto, com capacete e blusa branca,
ela segura com as mãos uma maquete com produtos. Abaixo, da esquerda para a direita, uma sequência de figuras com
pequenos serviços como: Ambiente climatizado, crédito fácil, cor sob medida, estacionamento próprio, horário especial,
lanchonete e loja de plantas. Fim da audiodescrição.
43
Competência 02
Sobre a imagem acima, cor sob medida não é lá um menu muito claro que
oferece uma informação satisfatória. O que você imaginaria que é cor sob
medida, clique no link abaixo, e responda. Vamos fazer um brainstorming.
Link> https://www.menti.com/5t3hiwx4oh
Regra dos 3 cliques – Quanto mais o usuário clica para encontrar algo que busca mais
chances ele tem de desistir do site, com isso o número de nível hierárquico deve ser o menor
possível, evitando mais de três cliques. Ou seja, usem apenas dois níveis de acesso nas informações
mais importantes, se possível.
Regra dos Sete Mais ou Menos Dois itens – Parece complicado, mas é simples de
entender. O objetivo é que se crie menus com uma quantidade média de itens. E aí entra a
psicologia. Pois entende-se que a capacidade média de retenção é de sete itens não relacionados
entre si, que pode variar de mais ou menos dois. Isso vem a ter relação com a memória de curto
prazo. Esse vídeo explica direitinho como ocorre. Não se esqueça de ver:
https://www.youtube.com/watch?v=TkjwcDv_FOg
Então muito cuidado quando planejar a hierarquização para não colocar coisas de
menor importância acima das coisas necessárias. Porém, vamos ver isso na prática. Abaixo tem três
arquivos abertos com projetos feitos na plataforma jamboard, que é bem intuitiva.
Agora chegou a hora de você praticar. Acesse os links abaixo, explore a vontade. Porém
não bagunce muito
Hierarquia site de compra
https://jamboard.google.com/d/15mB9OGSHzEIMLs3VISTgfC5KwTCE0ZxHLJARFKmv0u8
/edit?usp=sharing
Hierarquia site institucional
https://jamboard.google.com/d/12uQXp5MDGzjSSzVyQxHPt9G9Uj99R4tFDwAdr63EGU
s/edit?usp=sharing
44
Competência 02
Agora que você já observou chegou a hora de colocar em prática e criar seu próprio
projeto. Divirta-se.
Monte sua hierarquia
https://jamboard.google.com/d/1M4nPIJymnJMYAlQR6QznqWW8Nz4-CU_you-
rhVJvrvs/edit?usp=sharing
Fluxo de navegação
Já definimos a nossa hierarquia. Após isso é importante, pensando em um site, entender

o fluxo. O que leva para onde e com quantos cliques chegaremos até determinada informação.
Ter bem definido um fluxo de navegação evitará algumas frustrações, como quando a
gente clica em determinado link e não vai para lugar nenhum. Além disso, ter um objetivo claro,
facilita a navegação do usuário.
Mais uma vez vamos para o lucidchart e através de uma vídeoaula nos
materiais complementares vamos entender um pouco sobre o processo.
Assim como na hierarquização, no fluxo de navegação é importante perceber os

aspectos apontados por Merlyn Holmes, principalmente o último item.
O fluxo de navegação não é nada mais do que um fluxograma, se pensarmos em

aspectos não digitais. Quer saber mais sobre fluxograma, como fazer e aplicar no
seu dia-dia. Veja aqui: https://www.lucidchart.com/pages/pt/o-que-e-um-
fluxograma
45
Competência 02
Figura 30 - Modelo de fluxograma

Fonte: https://pt.wikipedia.org/wiki/Fluxograma
Descrição da imagem: No centro da tela, um fluxograma colorido, que tem início a frase: A lâmpada não funciona,
abaixo escrito: A lâmpada estava plugada?, depois, o bulbo queimou? E depois comprar lâmpada nova. Ao DE “A
Lâmpada estava plugada? ” Uma seta com não escrito em cima e apontando para “plugar a lâmpada”. Ao lado de “o
bulbo queimou? ” Uma seta onde está escrito: Sim, apontando para trocar o bulbo. E seguida, está escrito: Não,
“comparar nova lâmpada”. Fim da audiodescrição.
Wireframe
Já passamos pelo processo de hierarquização e do fluxo de navegação. Sendo assim, já
temos um modelo do projeto e isso se fará através de um wireframe.
O wireframe pode ser definido como um esqueleto do site, que deve ser feito antes de
se iniciar a montagem do layout com cores e imagens. O seu objetivo é validar o projeto, auxiliar na
aplicação da identidade visual e alinhar com o cliente, caso necessário, os objetivos, como na
imagem abaixo.
46
Competência 02
Figura 31 - Modelo de wireframe

Fonte: https://www.freepik.com/blog/how-use-wireframes-web-design/how-use-wireframes-web-design-cover-post-
100/
Audiodescrição da figura: Na tela, ilustração colorida de um modelo de um site, com menus, categorias, espaço para
pesquisa, espaço para imagem e um exemplo de barra de rolagem. Fim da audiodescrição.
2.4 Modelo mental, Design Thinking e um pouco mais de UX e Gestalt
Modelo mental
Para finalizar esta competência voltaremos um pouco a um tema que foi abordado na
competência anterior: UX ou User eXperience (experiência do usuário), para isso irei falar sobre dois
temas que atuam ao lado da Arquitetura da Informação: Os modelos mentais e Design Thinking.
Modelo Mental é uma representação mental da realidade. Ele foi citado pela primeira
vez pelo filósofo americano Charles Sanders Peirce. Não existe um único modelo mental para um
determinado estado de coisas. Ao contrário, podem existir vários, mesmo que apenas um deles
represente de maneira correta esse estado de coisas.
Mas o que isso interessa para a arquitetura da informação? Provavelmente você

conhece o google, mas se eu pergunto agora, sem ir lá no site, qual é a ordem das cores da palavra
47
Competência 02
google você consegue me responder (mentalmente)? Complicado, né. Pois é dessa forma que, na
criação digital, o modelo mental vai funcionar.
Vou dar outro exemplo, você já usou papel higiênico em sua vida, certo? Pois bem, e se
eu falar que existe um site que é só a imagem de um papel higiênico, você consegue imaginar como
é isso? Então imagine e crie na sua mente este site, continue a leitura e já já você acessará ele.
Entender o modelo mental é trabalhar a expectativa do usuário. Ou seja, ao acessar um

site, por exemplo, o que ele imaginará além da tela principal? Quais funções imediatamente são
criadas na mente dele e como ele realizará isso. Esses modelos não precisam ser tecnicamente
exatos, mas devem ser funcionais. E a partir da interação com o sistema, a pessoa continuamente
modifica seu modelo mental a fim de chegar a uma funcionalidade que lhe satisfaça.
É importante entender que muitas vezes os modelos mentais podem levar a uma
rejeição prévia do seu produto. Um exemplo, se você tem uma barraca de cachorro-quente em
determinada região e uma pessoa comeu um cachorro-quente ruim nesta mesma região, porém
não na sua barraca, isso pode criar um modelo mental ruim para aquela pessoa sobre os cachorros-
quentes da região. Logo é importante estar atento sobre erros de concorrentes que atuam com o
mesmo produto que você, e isto também vale para o mundo digital.
Ah sim. O site lá do papel higiênico é esse aqui: papertoilet.com.
48
Competência 02
Fonte - https://pt.slideshare.net/stefaniecrm/ihm-modelos-mentais
Figura 32: Modelo mental
Audiodescrição da figura: Na tela, ilustração em preto e branco de um gato no centro, na parte inferior, à direita uma
mulher observa o animal e acima de sua cabeça, uma nuvem com a ilustração de um gato numa almofada. À esquerda,
um homem observa o gato e, acima da sua cabeça, uma nuvem com gato segurando um rato. Fim da audiodescrição.
Design Thinking
De acordo com o Tim Brown em seu livro Design Thinking - Uma Metodologia Poderosa
Para Decretar o Fim Das Velhas Ideias, o design thinking, que traduzindo do inglês seria mais ou
menos design pensado, tem duas funções. A primeira é a de expandir o conceito de design para
abarcar os desafios enfrentados pelos negócios e pela sociedade; mostrar como uma abordagem
criativa e focada na resolução de problemas e no ser humano propicia a descoberta de soluções
novas e mais eficazes.
Já a segunda é extrapolar as habilidades de um design, sendo disponível em qualquer

área e campo de atuação, desde que busque as melhores respostas para os desafios.
A primeira vista parece uma repetição de algo que já foi estudado. De alguma forma é
verdade, mas o que nos interessa aqui é uma coisa: buscar soluções novas. Esse é o foco do design
thinking. É um processo que busca a criatividade, onde problemas diferentes exigem abordagens
diferentes, e a empresa que é capaz de moldar seu plano de ação de acordo com a dificuldade
apresentada se destaca no mercado.
49
Competência 02
Temos alguns exemplos de grandes empresas que utilizam design thinking, como
Netflix, Natura e Havaianas. Mas o modelo não serve apenas para marcas multimilionárias. Como
uma decisão colaborativa, muitas vezes para o designer e consequentemente o web designer, é
importante ouvir e trocar ideias com outras funções.
Se você vai, por exemplo, desenvolver um site ou artefato qualquer para um

restaurante, além do dono talvez seja legal conversar com alguns garçons que poderão lhe passar
sugestões não apenas das comidas mais pedidas, mas também das que demoram mais a serem
preparadas, das mesas que são mais requisitadas e o/ou do perfil do cliente que dá mais gorjeta. E o
que isso significa?
Ao saber das comidas, você pode em algum tipo de criação destacá-las como as mais
saborosas, já que, se demoram mais, porém continuam sendo pedidas é porque vale a pena. Ao
saber qual mesa é mais requisitada, você pode destacar numa imagem para o site este local, visto
que é o que os clientes gostam mais, e ao saber sobre o cliente que dá mais gorjeta, você pode
entender quais são os clientes que estão dispostos a pagar mais. Informação!
No entanto, como tudo que aprendemos, isso requer um método. Vamos conhecer os
principais:
Identificar onde encontrar oportunidades de inovação - Conhecer seus pontos fortes e

fracos e o dos seus concorrentes, as condições do ambiente e da sua localidade e as possibilidades
de aumento e diminuição do fluxo de clientes.
Descobrir a Oportunidade de Inovação – Autoexplicativo. Não dê um passo maior que

as pernas, no entanto, sempre que for possível inovar, inove e o mundo digital permite isso.
Testar as ideias — protótipos – Tendo a possibilidade de inovar e aplicar, tente! Seja

com sua família, amigo, mas teste algo que traga alguma inovação. Um aplicativo, um vídeo no
youtube.
50
Competência 02
Figura 33 - Etapas para aplicar o design thinking

Fonte: https://www.rsdesign.com.br/espaco_arquiteto/design-thinking-o-que-e-e-por-que-envolve-a-arquitetura/
Audiodescrição da figura: Na tela, ilustração colorida com cinco cards com as etapas para aplicar o Design Thinking na
arquitetura corporativa, da esquerda para a direita, Empatia (em vermelho, com as informações, coloque-se no lugar do
outro), análise (em azul, com as informações, defina problemas a sanar e metas a alcançar), Brainstorm (em verde, e as
informações, com colegas, discuta os pontos fortes e fracos do projeto), desenho (em amarelo, com as informações,
coloque ideias no papel junto a bons parceiros ) e pós-ocupação (em vermelho, com as informações, permaneça em
contato com o cliente para ajustes e melhorias). Fim da audiodescrição.
UX
Na outra competência fiz uma breve introdução ao UX: User eXperience (experiência
do usuário), lembra? Então o porquê de voltar a este assunto? Bem, falando como um designer,
diria que vamos imergir um pouco mais.
51
Competência 02
Figura 34 - UX o que é
Fonte: própria
Audiodescrição da figura: Na tela, um título escrito Comportamento UX e abaixo quatro tópicos: pesquisa, protótipos,
personas e objetivo. Fim da audiodescrição.
Além do UX, você já foi apresentado um pouco sobre todos os processos: Pesquisa,
protótipos, personas e objetivos. Então, vamos entender como tudo junto forma o UX.
Quando um objeto digital é feito deve-se pensar no usuário. Ele, sua persona e público-
alvo (que são coisas diferentes), deve ser o foco da sua produção. E a experiência dele através do
serviço que é oferecido por você não ocorrerá apenas em uma ocasião.
Ou seja, se eu tenho um aplicativo ou site de vendas e aplico de forma correta muito do

que a gente viu aqui, é provável que a UX seja boa. Mas é importante saber se ela foi aplicada em
todo o processo. Exemplo, se você compra algo pela internet obviamente espera receber, e se a
empresa lhe dá um prazo você espera que ela cumpra. Certo. No entanto, se isso não ocorre a culpa
é do web designer? Não. Mas ele é capaz de facilitar essa boa experiência.
E como ele pode fazer isso? Respondo: pensando em meios de resposta que vão além
do site ou do aplicativo e que sejam práticos e eficientes aos usuários. Por exemplo, pensando em
promoções, através da criação de landing page que faça com o que usuário continue buscando sua
empresa ou numa resposta rápida ao problema e que seja encontrada de forma fácil.
Outro exemplo, se alguém te indica um canal de esportes no youtube ou um podcast,

quando você vai buscar, é fundamental que você consiga encontrar as informações de forma coesa,
intuitiva e fácil. Qualquer dúvida não respondida, dificuldade de navegação ou ruído nesta jornada
pode ser um fator decisivo para você abandonar o serviço em questão.
52
Competência 02
Então, a grande responsabilidade de um designer UX é garantir que, a partir do

momento que uma pessoa acessa seu produto ou serviço, seja oferecida uma experiência de uso
incrível.
Figura 35 - Dinossauro de jogo do google

Fonte: própria
Audiodescrição da figura: Na tela, uma ilustração em preto e branco, da esquerda para a direita, de um pequeno
dinossauro a caminho de dois cactos. Fim da audiodescrição.
Você provavelmente já viu esse joguinho do google quando não tinha internet, certo?
Caso não, veja aqui chrome://dino/. E o que ele traz de UX? Bem, tudo! Quando você não tem
internet e se abre uma possibilidade de passar o tempo em um joguinho viciante e extremamente
fácil/intuitivo. E mesmo que você nunca jogue, em dois minutos aprenderá. Isso é pensar na
experiência do usuário.
Algumas vantagens do UX apontados pelo site hostinger:
Maior conversão de vendas - Clientes que têm uma boa experiência antes do estágio de
decisão, claramente também têm mais chances de converter e comprar.
Fidelidade e indicações - A fidelidade é alcançada quando ao sentir a necessidade da

próxima compra, a primeira memória que vem à cabeça do cliente é a sua marca, e com isso ele
53
Competência 02
realiza compras recorrentes. Portanto, deixe boas lembranças na mente do seu consumidor fazendo
com que ele tenha ótimas experiências em todas as etapas do contato com a sua marca: escolha,
decisão de compra, aquisição e usabilidade do seu produto ou serviço. Dessa forma, além de ter um
cliente fiel à sua marca, você também terá um defensor, que a indicará aos amigos, familiares e
conhecidos.
Economia de recursos - Analisar a experiência do usuário resulta em um melhor

planejamento e reduz as chances de retrabalho, reduzindo custos e tempo dos funcionários
envolvidos.
Aumenta o valor percebido pelo produto - Uma boa experiência gera uma ótima
sensação que vem acompanhada de um “Nossa, valeu muito a pena essa compra!”. É o momento
em que você supera as expectativas que o cliente tinha ao adquirir o seu produto e aumenta o seu
valor agregado, que vai além do seu custo monetário.
Gestalt
Esta estranha palavra alemã que não tem tradução é uma teoria fundada pelo
psicólogo Max Wertheimer como uma pesquisa de orientação, compreensão e interpretação da
nossa visão e da forma como enxergamos as coisas.
Ele vai dizer que a percepção de uma totalidade, um rosto humano, por exemplo, não se
pode reduzir a soma dos estímulos percebidos, pois ela extrai propriedades particulares de seu
lugar e função em cada um deles. De acordo com ele, isto ocorre, pois nosso cérebro utiliza
parâmetros de leitura visual, ao enxergarmos um composto de elementos onde a tendência é
agrupar características que sejam semelhantes, de forma que sua interpretação seja a mais rápida
possível.
Então, segundo a Gestalt, ao observarmos um objeto, primeiro o compreendemos como

um todo, antes de notar seus elementos separadamente.
Para isso foram citados 8 princípios/leis, são eles:
Pregnância (ou boa forma), Unidade, Segregação, Proximidade, Semelhança,

Unificação, Continuidade e Fechamento.
54
Competência 02
Não tem quando a gente fica vendo objetos, animais ou pessoas em nuvens.
Pois bem, isso tem relação com o Gestalt. No entanto, para melhorar a sua
percepção, a explicação desses princípios/leis serão realizados na vídeoaula da
competência. Vá lá e confira
Figura 36 - Coelho aparece no céu

Fonte: https://metsul.com/coelho-de-pascoa-na-nuvem/
Audiodescrição da figura: Na tela, fotografia colorida, imagem do céu, fundo azul e nuvens brancas. No centro, uma
nuvem em formato de um coelho. Fim da audiodescrição.
55
Competência 03
3.Competência 03 | Avaliar a usabilidade e ergonomia visual nos sites e

artefatos da web
Antes de aprender a avaliar os princípios da usabilidade, que tal ouvir o podcast

e conhecer um pouco mais sobre o que falamos ao longo da disciplina. Escute lá
e deixe sua avaliação!
3.1 Avaliar princípios da usabilidade
Na primeira competência falei sobre usabilidade, que, rememorando, é o termo usado

para descrever a qualidade da interação dos usuários com uma determinada interface. Esta
qualidade está associada aos seguintes princípios:
• Facilidade de aprendizado;
• Facilidade de lembrar como realizar uma tarefa após algum tempo;
• Rapidez no desenvolvimento de tarefas;
• Baixa taxa de erros;
• Satisfação subjetiva do usuário.
Também vimos alguns exemplos negativos e positivos da usabilidade. Porém, na criação

de artefatos digitais um dos principais passos é a avaliação. Então como podemos avaliar
corretamente a usabilidade? Vamos ver.
As medidas de usabilidade mais importantes, inclusive homologadas pela International

Standard Organization (ISO), são: efetividade, eficiência e satisfação. Nota-se, que, com a inclusão
do quesito satisfação, entende-se como é importante ser considerada a atitude da pessoa que
utiliza o produto ou interface como um fator para a boa usabilidade. Para Jakob Nielsen, ser de fácil
aprendizagem, permitir utilização eficiente e apresentar poucos erros são os três aspectos
fundamentais para a percepção da boa usabilidade por parte do usuário.
56
Competência 03
Em geral, problemas de usabilidade são identificados apenas durante a utilização da interface, em

situações e contextos de utilização especiais. A maioria dos autores concorda que o processo de
desenvolvimento de interfaces com usabilidade, na web ou não, é um ciclo contínuo de design e
avaliações de usabilidade, como exposto abaixo.
Figura 37 - Ciclo de vida do projeto com usabilidade

Fonte: própria
Audiodescrição da figura: No centro da tela, fluxograma na vertical, colorido, com o ciclo da usabilidade. De cima para
baixo, (conhecer usuários e suas tarefas; participação; avaliação da usabilidade e protótipo em trabalho e termina com
o produto final). Fim da audiodescrição.
Este ciclo tem início com a identificação de usuários, tarefas e requisitos para a
aplicação. Tais requisitos são utilizados como entrada para a construção de um protótipo que, em
seguida, é avaliado com relação a sua usabilidade. Os problemas de usabilidade identificados na
avaliação são solucionados na versão seguinte e uma nova avaliação de usabilidade se segue. O
ciclo termina quando nenhum problema for identificado.
O grau de severidade pode ser avaliado como relação ao impacto (grave, importante ou
impacto menor) sobre a realização de tarefas e frequência com o qual o problema ocorre. Embora
outras escalas para avaliar severidade possam ser utilizadas, sugere-se a escala de severidade
57
Competência 03
proposta por Woolrych e Cockton. Assim, com relação ao impacto, os problemas podem ser
classificados como:
• Grave: usuários precisam de mais de 2 minutos sem progresso na realização da

tarefa. Usuários abandonam a tarefa ou demonstram stress na realização da mesma.
Usuários não concluem a tarefa.
• Importante: usuários gastam até 2 minutos e obtém êxito na realização da tarefa.
Usuários podem demonstrar stress visível ou perda de qualidade de interação.
• Impacto menor: usuários encontram o problema mas conseguem contorna-lo sem
prejuízo importante para a qualidade de realização da tarefa.
A segunda dimensão para determinar severidade é a frequência com que um problema

ocorre. Assim temos:
• Grande frequência: problemas ocorrem com mais de três usuários.

• Média frequência: problemas ocorrem com dois ou três usuários.
• Baixa frequência: problemas ocorrem com um usuário.
As medidas de usabilidade de eficácia, eficiência e satisfação podem ser especificadas

para objetivos maiores ou menores. Ao selecionar medidas de usabilidade para os objetivos mais
importantes do usuário pode ser necessário ignorar algumas das funções, mas provavelmente esta
seja a abordagem mais prática. Vejam exemplos de medidas mais práticas:
Objetivos da Modelos de Eficácia Medidas de Medidas de

usabilidade eficiência satisfação
• Porcentagem de • Tempo para • Escala de

objetivos completar uma satisfação
alcançados tarefa
• Frequência de
uso
58
Competência 03
- Usabilidade global • Porcentagem de • Tarefas

usuários completadas por • Frequência de
completando as unidade de reclamações
tarefas tempo
• Média de • Custo monetário

acurácia de da realização da
tarefas tarefa
completadas
Tabela: 2 – Práticas de usabilidade

Fonte: o autor
Avaliação e testes
Para avaliar a Usabilidade existem diversos métodos. Os mais importantes, e que

conheceremos um pouco mais, são a Avaliação heurística e a classificação/ordenação de cartões
(card sorting).
Os métodos contam com a participação de usuários e caracterizam-se pelo uso de

questionários ou observação direta ou indireta de usuários durante a utilização da interface, como
fonte de informações que possam levar à identificação de problemas.
A avaliação heurística é o método mais tradicional de avaliação de usabilidade, ele foi

desenvolvido pelo supracitado Nielsen e por Rolf Molich. Seu objetivo é a inspeção sistemática da
interface do usuário com relação à sua usabilidade. Seu procedimento básico é o seguinte: um
avaliador interage com a interface e julga a sua adequação comparando-a com princípios de
usabilidade reconhecidos, as heurísticas. Nielsen sugere um conjunto com 10 recomendações para
guiar a avaliação, são elas:
Simplicidade e Naturalidade: as interfaces de usuários devem ser a mais simples

possível, combinando as tarefas do usuário de forma a simplificar o mapeamento entre os conceitos
computacionais e os do usuário.
59
Competência 03
Falar a Linguagem do Usuário: A terminologia da interface deve ser baseada na

linguagem do usuário e não no sistema. Ou seja, o que às vezes é o mais fácil de fazer, no que diz
respeito ao design em geral do produto, não necessariamente é o melhor. Além disso, as
informações devem ser organizadas conforme o modelo mental que o usuário possui do domínio.
Observe sempre quesitos como hierarquia e categorização.
Minimizar a Sobrecarga de Memória do Usuário: Deve-se buscar elementos de diálogo

para o usuário e permitir que o mesmo faça suas escolhas, sem a necessidade de lembrar deste ou
daquele comando específico. Aplique a Regra dos Sete Mais ou Menos Dois itens e de três cliques.
Consistência: Se os usuários souberem que um mesmo comando ou uma mesma ação

terá sempre o mesmo efeito, eles ficarão mais confiantes. Ou seja, não coloque caminhos não
levam a lugar nenhum.
Disponibilize apenas o que esteja pronto.
Figura 38 - Site sem disponibilidade de informações

fonte: sintepe.org
Audiodescrição da figura: No centro da tela, site com a frase “Campanhas salarias Educacionais” no centro e em caixa
alto, abaixo, menor, “em breve disponibilizaremos um histórico de diversas de nossas campanhas Salarias
Educacionais”. Fim da audiodescrição.
60
Competência 03
Feedback: O sistema deverá informar continuamente ao usuário sobre o que ele está
fazendo. A informação, neste caso, é relativa a ação. Pensando em um site, por exemplo, é
importante que o clique leve prontamente a informação requerida.
Saídas Marcadas: Fazer com que o usuário sinta que pode controlar o software e não se
perca ou perca tempo realizando uma ação. Por exemplo, as caixas de diálogo devem possuir um
botão Cancelar para abortar uma tarefa.
Figura 39 - erro de usabilidade no site da Caixa

Fonte: tadifícil
Audiodescrição da figura: No centro da tela, imagem do site da Caixa Econômica Federal, com todos os menus e
categorias, ao centro uma caixa com a palavra “a busca deve ser efetuada com 3 caracteres, abaixo um círculo com
quatro números digitados. Fim da audiodescrição.
Atalhos: Apesar de ser possível operar a interface conhecendo-se apenas algumas

regras gerais é importante também ser possível para o usuário experiente executar mais
rapidamente operações através de atalhos.
61
Competência 03
Exemplo: Você sabia que apertando os números 1-9 você pode saltar para 10% ou 90%
da duração total de vídeos no Youtube? Ou seja, se você está vendo um vídeo de 10 minutos e quer
passar para o nono minuto é só apertar o número 9. Pode fazer o teste.
Boas mensagens de erro: Erros acontecem, no entanto, as mensagens avisando devem

seguir duas regras: linguagem clara e sem códigos.
Ajuda e Documentação: O melhor é que um software ou hardware seja tão fácil de usar
que não necessite de ajuda ou documentação. No entanto, se preciso, esta ajuda deve estar
facilmente acessível de forma on-line.
Prevenir Erros: E como fazer isso? Com uma boa avaliação de usabilidade. Lembrem que
este processo é um ciclo contínuo.
Para testar e verificar se você está cometendo erros ou acertos, ou mesmo qual a
melhor opção de layout/artefato/site você pode aplicar diversos testes remotamente através de
aplicativos.
Estes testes podem ser feitos com funcionários da empresa, de preferência os que não
tenham familiaridade com o produto, familiares, amigos, etc. Um deles é simples, apresente seu
projeto e verifique para onde os participantes estão olhando numa única página e quais são as
principais dúvidas. Se eles conseguiram fazer algo simples como, por exemplo, comprar algo com
facilidade.
Outro tipo de teste importante é o teste A/B. É simples, se a marca/produto tiver mais
de uma versão para algum tipo de peça, esse recurso permitirá experimentar as duas possibilidades
(ou mais, porém de preferência duas) simultaneamente para saber qual delas trará os melhores
resultados.
62
Competência 03
Figura 40 - projeto de um teste A/B

fonte: alsakamarketing.com.br
Audiodescrição da figura: No centro da tela, imagem com fundo azul, acima escrito “Tráfego 200 visitantes”, abaixo a
ilustração de dois jornais, com A e B ao seu lado, abaixo deles o número de vendas com uma seta para a figura do lado
direito com VERSÃO CAMPEÃ. Fim da audiodescrição.
Este teste pode ser feito, de preferência através da plataforma Google Website
Optimizer ou da Optimizely. As duas plataformas também permitem outros tipos de análises mais
completas de usabilidade. Por estar interligado ao Google Analytics o Google Optmizer talvez seja a
melhor pedida.
Card Sorting
Outra metodologia para se testar e avaliar a usabilidade é o Card Sorting ou ordenação

de cartões. Este processo não é tão diferente da estruturação hierárquica que falo na competência
63
Competência 03
2, no entanto ela possui com um foco maior no Design Thinking, do qual também falo na
competência 2.
Esta metodologia permite que os usuários possam opinar e organizar as informações da

maneira como eles as enxergam. Com isso, os profissionais têm material para definir a melhor
organização com base nos padrões dos usuários.
As etapas
Antes de começar a sessão de Card Sorting, é importante realizar um inventário de
funcionalidades e conteúdo do projeto. Com elas você irá compor um card, que podem ser
representadas por meio de material físico (ex: post-its ou mesmo pedaços de papel) ou por meio
digital. Existem ferramentas online que ajudam nesse processo como por exemplo o ConceptCodify.
O conjunto de cards é então apresentado aos usuários e então eles devem reagrupar os
diferentes cards de acordo com o seu ponto de vista e de forma coerente. E isto pode ser feito de
duas formas.
Card Sorting aberto

O usuário dispõe de cards que representam o conteúdo ou funcionalidades do projeto.
Então o usuário reagrupa as informações e define o rótulo para cada um dos grupos de acordo com
o seu ponto de vista. Este processo é mais utilizado no começo de um projeto.
64
Competência 03
Figura 41 - modelo de Card Sort

Fonte: autor
Audiodescrição da figura: No centro da tela, uma sequência de três cards. O primeiro, da esquerda para a direita, de
cima para baixo, “ mato, avião, ônibus, folha, rã). Em seguida, cards estão misturados, nos outros eles estão divididos
em grupos de três. Fim da audiodescrição.
Card Sorting Fechado

Já no Card Sorting fechado os rótulos dos grupos são fornecidos aos usuários e eles
devem organizar dentro dos grupos já definidos pelo organizador.
65
Competência 03
Figura 42 - Modelo de Card Sort

Fonte: autor
Audiodescrição da figura: No centro da tela, uma sequência de dois cards. O primeiro, da esquerda para a direita, de
cima para baixo, “ mato, avião, ônibus, folha, rã). Em seguida, cards estão misturados, nos outros eles estão divididos
em colunas. Fim da audiodescrição.
Ainda existe o modelo híbrido. Aqui vocês aprenderam com um exemplo prático
de um modelo de card sorting da Claro:
https://medium.com/@scarlettmorganaamorim/card-sorting-dccee73e0308
3.2 Acessibilidade
No segundo podcast da Disciplina Fundamentos do Design Gráfico e Composição Visual
foi falado um pouco sobre a importância da acessibilidade e seu uso em aspectos ligados à teoria
das cores e tipografia. Porém, como é possível avaliar se seu projeto digital, principalmente um site,
é acessível?
Em primeiro lugar é importante destacar que quando se fala em acessibilidade não diz
respeito apenas a pessoas com deficiências, que, obviamente, fazem parte, mas também a pessoas
com algum tipo de limitação tecnológica. Por exemplo, aparelhos celulares um pouco mais antigos.
66
Competência 03
Mas como é possível avaliar a acessibilidade? Vamos lá conhecer algumas dicas.
Existe um processo, mais ligado a desenvolvedores, que como sabemos não é a mesma
coisa que web designer, que diz respeito a verificações utilizando ferramentas que validam o código
HTML e CSS com base nos Padrões Web do W3C.
No entanto, para quem não é programador, existem alguns avaliadores automáticos de

acessibilidade como o AccessMonitor e o ASES – Avaliador e Simulador de Acessibilidade, que são
bem simples. Após inserir o link da página a ser avaliada, os avaliadores de acessibilidade geram um
relatório detalhado os problemas encontrados. A tela que segue mostra um relatório de
acessibilidade gerado pela ferramenta onde é possível clicar em cada erro ou aviso para maiores
detalhes.
Figura 43 – ASES – Avaliador e Simulador de Acessibilidade em Sitios

Fonte: https://asesweb.governoeletronico.gov.br/avaliar#url
Audiodescrição da figura: No centro da tela, tela do site do Avaliador e Simulador de Acessibilidade em Sítios. Fim da
audiodescrição.
67
Competência 03
Figura 44 - Teste de acessibilidade no ASES

Fonte: https://asesweb.governoeletronico.gov.br/avaliar#url
Audiodescrição da figura: No centro da tela, tela do sites com gráficos com a avaliação do site da Educação de
Pernambuco. Fim da audiodescrição.
Além da avaliação automática, também é possível verificar de forma manual a

acessibilidade do seu projeto digital, conferindo, além do que diz respeito a cores e tipografia, como
citado anteriormente, aspectos de usabilidade como a verificação da disponibilização de
documentos, tabelas e formulários e a possibilidade de alternativas em multimídia, observando se
determinados conteúdos disponíveis em áudio e vídeo possuem transcrições textuais, legendas,
Audiodescrição e alternativa em Libras (Língua Brasileira de Sinais).
Através do Portal do Governo Federal existem manuais de apoio para realização

e analises da acessibilidade.
https://www.gov.br/governodigital/pt-br/acessibilidade-digital/material-de-
apoio
3.2 O que é Ergonomia Visual
De acordo com o dicionário Michaelis a Ergonomia é o estudo científico da engenharia

industrial, em conjunto com anatomistas, fisiologistas e psicólogos, para estudar a relação do
68
Competência 03
homem com as máquinas em seu ambiente de trabalho. Até a década de 1970 se voltava mais para
a interação homem-máquina e atualmente é voltado para a interação homem-computador.
Figura 45 - As disciplinas que contribuem para a Interação homem-computador

Fonte: própria
Audiodescrição da figura: No centro da tela, fluxograma em preto e branco, circular, de cima para baixo, Psicologia
organizacional e social, Ergonomia e fatores humanos, Engenharia, Design, Sociologia, Filosofia, Linguística, Inteligência
artificial, Ciência da computação, Psicologia cognitiva. No centro da imagem, (homem-computador).
Fim da audiodescrição.
A definição de ergonomia poderia ser a de “ciência do trabalho”. Ela deve ultrapassar as

oposições acadêmicas entre as disciplinas científicas que fazem do trabalho e do trabalhador o seu
objeto de estudo, como a anatomia, a fisiologia, a toxicologia, a psicologia, a sociologia, a
administração, etc. Para o design, a ergonomia representa uma fonte de informação científica
essencial para o desenvolvimento de objetos, sistemas e ambientes e, nesse sentido, pode ser
definida como o estudo das interações.
Mas vamos entender melhor neste vídeo curtinho como a ergonomia está
presente em nossa vida:
https://www.youtube.com/watch?v=A6VUW-EqOSA
69
Competência 03
No contexto da ergonomia visual, encontra-se também os conceitos de usabilidade, que

é a medida na qual um produto pode ser usado por usuários específicos para alcançar objetivos
específicos com eficácia, eficiência e satisfação em um contexto específico de uso, como define a
ABNT.
Neste sentido, entende-se que a abordagem da ergonomia visual considerando os

aspectos da legibilidade e os elementos gráficos para tanto, tais como forma do texto, cores
utilizadas, ilustrações e composição gráfica.
Ou seja, da ergonomia de interface, o bem-estar humano está diretamente ligado ao

conforto visual, que, por sua vez, pode ser alcançado com os resultados das pesquisas pautadas em
novas tecnologias e por meio da adequação técnica do layout, permitindo atrair e agradar de forma
segura e funcional, diz Júlia Abrahão autora do livro Introdução à ergonomia: da prática à teoria.
Sobre este assunto, o autor Gavin Ambrose afirma que informar, orientar, entreter,
guiar e cativar são funções essenciais a serem definidas para dar finalidade ao layout. Desta forma,
a compreensão de como o ser humano percebe e reage aos estímulos visuais é uma atividade
técnica mensurável que contribui para a área específica de conhecimento denominada ‘ergonomia
cognitiva’.
Ainda de acordo com Ambrose para garantir a qualidade técnica da comunicação visual
deve-se conhecer alguns princípios básicos do layout na inserção de elementos em uma página:
colunas e espaços; escala; alinhamento; imagens; hifenização e justificação; ritmo; hierarquia da
informação e rótulos. Alguns destes temas já foram vistos em disciplinas e competências anteriores.
70
Competência 03
Figura 46 - Tabela Ergonomia

Fonte: própria
Audiodescrição da figura: No centro da tela, fluxograma em preto e branco. Da esquerda para a direita, uma sequência
que vai da ergonomia, concepção (análise ergonômica do trabalho informatizado), (abordagem centrada no usuário),
(utilização e funcionamento), (semiótica computacional), (ciências cognitivas), (critérios e recomendações). Correção
(técnicas de avaliação: checklist ergonômico, testes de usabilidade, avaliação heurística e etc.). Fim da audiodescrição.
Já o autor João Filho Gomes, no livro Ergonomia e Design Gráfico: Sistema Técnico de
Leitura Ergonômica, defende a utilização do sistema técnico de leitura ergonômica, que, segundo
ele, é um conjunto de conceitos aplicável a qualquer análise ou projeto ergonômico, sobre qualquer
tipo de produto ou sistema de objetos, no seu todo ou em partes específicas.
O Sistema técnico de leitura ergonômica, sugerido por Gomes quanto à percepção visual
e recebimento de informações, baseia-se na definição de quatro códigos visuais:
1. Tipográfico: que diz respeito à família de letras, números e outros sinais e caracteres;
2. Morfológico: organização visual da informação, diagramação e Leis da Gestalt

(Unidade, Segregação, Unificação, Fechamento, Continuidade, Proximidade,
Semelhança e Pregnância da forma);
3. Cromático: definição e utilização das cores; e
4. Tecnológico: Processos de produção, reprodução e transmissão da informação.
71
Competência 03
Ou seja, a base dos códigos definidos por João Gomes é um convite a releitura de
algumas competências da qual passamos. Com a fusão destas técnicas é possível aplicar métodos
para passar sua mensagem de maneira eficaz e não confusa, facilitando a compreensão do usuário
na busca de uma informação mais direta e simples.
O método de análise ergonômica possibilitará você analisar e verificar muito do que

aprendemos ao longo da disciplina.
Após passar por estas competências e entender um pouco sobre Web Design,
não deixe de conferir nossa última videoaula e relembrar alguns processos e
sua utilização
72
Conclusão
Ao longo dessas três competências você aprendeu alguns processos para criação de
produtos para web.
Em mundo cada vez mais digital é necessário não só aprender alguns processos de
criação, como formas de avaliação e aplicação. Estes métodos farão de você um profissional
multimídia melhor, até porque ser multimídia é exatamente querer entender diversos processos e
aspectos da criação de artefatos.
Então, neste caderno, foram apresentadas técnicas do web design como arquitetura da
informação, usabilidade, linguagem de marcação e processos de acessibilidade, que possibilitem a
construção de artefatos que sejam o mais efetivo, eficiente e satisfatório ao usuário.
No entanto, assim como as análises de usabilidade, o processo de aprendizado não se

finda. Então, se você gostou do caderno ou de algum tema em especial, continue pesquisando, pois
o mundo digital é amplo e sem barreiras.
Espero que você tenha aprendido e gostado, o caderno pode não estar perfeito, mas foi
feito com o melhor design thinking possível.
Até mais!
73
Referências
ABRAHÃO, Júlia. Introdução à ergonomia: da prática à teoria. São Paulo: Blucher, 2009.
AMBROSE, Gavin; HARRIS, Paul. Layout. Porto Alegre: Bookman, 2012.
BATISTA, Claudia Regina; RIBAS Ulbricht, Vania. Discussões sobre o perfil do designer de interfaces
web. Revista Design em Foco, vol. III, núm. 2, julio-diciembre, 2006,Universidade do Estado da Bahia
, Brasil Disponível em: < http://www.redalyc.org/pdf/661/66111515007.pdf >. Acesso em: 27. Jul.
2021.
BENETTI, Rodolfo. Entenda o que são landing pages e por que elas são importantes para seu negócio!.
Orgânica Digital, 2021. Disponível em: < https://www.organicadigital.com/blog/entenda-o-que-sao-
landing-pages-e-por-que-elas-sao-importantes-para-seu-negocio/ >. Acesso em: 30, jul. 2021.
BRACHT, Fabio. Medium seu próximo blog. Tecnoblog. 2013. Disponível em: <
https://tecnoblog.net/131081/medium/ >. Acesso em: 12, jul. 2021.
BROWN, Tim. Design Thinking: Uma metodologia poderosa para decretar o fim das velhas ideias. 1
Ed. São Paulo: Alta Books, 2009. Disponível em: <
https://books.google.com.br/books/about/Design_Thinking.html?id=UTNtDwAAQBAJ&printsec=fro
ntcover&source=kp_read_button&redir_esc=y#v=onepage&q&f=false >. Acesso em 22, jul. 2021.
CIRIACO, Douglas. Qual a diferença entre Internet e World Wide Web?. Canaltech, 2016. Disponível
em: <https://canaltech.com.br/entretenimento/qual-a-diferenca-entre-internet-e-world-wide-web/
>. Acesso em: 8, jul. 2021.
DE SOUZA, Ivan. Saiba o que é UI (User Interface) e a importância dele para os clientes. Rockcontent.
2020. Disponível em: < https://rockcontent.com/br/blog/o-que-e-ui/ >. Acesso em: 12, jul. 2021.
EDUARDO, Carlos. Teste de Usabilidade de Site: Tudo o que Você Precisa Saber. Hostinger. 2019.
Disponível em: < https://www.hostinger.com.br/tutoriais/teste-de-usabilidade-site >. Acesso em 28.
Jul. 2021.
FERNANDEZ, Amyris. Modelos Mentais: o que você precisa saber para fazer UX. Amyris-Fernandez.
2019. Disponível em: < https://amyris-fernandez.com/modelos-mentais-o-que-voce-precisa-saber-
para-fazer-ux/ >. Acesso em: 22, jul. 2021.
FLANAGAN, David. JavaScript: O Guia Definitivo. 6 ed. Porto Alegre: Bookman, 2013.
GINGER, Serge. Gestalt uma Terapia do Contato, 4 Ed. São Paulo: Summus, 1995. Disponível em: <
https://www.google.com.br/books/edition/Gestalt_uma_terapia_do_contato/iRYzTafcQmEC?hl=pt
-BR&gbpv=1&dq=Gestalt+uma+terapia+do+contato.&printsec=frontcover >. Acesso em 24, jul. 2021.
GOGONI, Ronaldo. O que é blog?. Tecnoblog. 2019. Disponível em: <

https://tecnoblog.net/313117/o-que-e-blog/ >. Acesso em: 12, jul. 2021.
74
GOMES, João Filho. Ergonomia e Design Gráfico: sistema técnico de leitura ergonômica. Disponível
em: < https://docplayer.com.br/10334243-Sistema-tecnico-de-leitura-ergonomica-prof-dr-joao-
gomes-filho.html > Acesso em: 30. Jul. 2021.
GOMES, Carolina Fernanda; REIS, Helena Macedo. Marketing digital: sites x redes sociais no Brasil. In:
Revista Interface Tecnológica da FATEC Taquaritinga. p. 53-62,jun. de 2016.ISSN online2447-0864.
Disponível em: <www.fatectq.edu.br/Interfacetecnologica>.Acesso em: 6, jul. 2021.
GONÇALVES, Tássio. Entendendo de uma vez o que é UI Design e UX Design. Videosdeti. 2019.
Disponível em: < https://videosdeti.com.br/entendendo-de-uma-vez-o-que-e-ui-design-e-ux-design/
>. Acesso em: 13, Jul. 2021.
GUIA DE WEB SEMÂNTICA. NIC, 2015. Disponível em:

<https://nic.br/media/docs/publicacoes/13/Guia_Web_Semantica.pdf>. Acesso em: 6, jul. 2021.
GRANT, Will. UX Design Guia Definitivo com as Melhores Práticas de UX. 1 Ed. São Paulo: Novatec,
2019. Disponível em: <
https://www.google.com.br/books/edition/UX_Design/b5KeDwAAQBAJ?hl=pt-
BR&gbpv=1&dq=usabilidade+web+ux&printsec=frontcover >. Acesso em: 17, jul. 2021.
JÚNIOR, Miguel Benedito Furtado. XML - Extensible Markup Language. Grupos de Teleinformática e
Automação/ Universidade Federal do Rio de Janeiro. Disponível em: <
https://www.gta.ufrj.br/grad/00_1/miguel/index.html >. Acesso em: 12. Jul. 2021.
LISBOA, Ândlei. Por que criar Personas?. Brasil.uxdesign. 2017. Disponível em: <
https://brasil.uxdesign.cc/por-que-criar-personas-bc796a1ffc7e >. Acesso em 22, jul. 2021.
O que é UX – User Experience. Hostinger, 2018. Disponível em: <

https://www.hostinger.com.br/tutoriais/ux-o-que-e-user-experience >. Acesso em 26, jul. 2021.
OLIVEIRA, HPC, VIDOTTI, SABG, e BENTES, V. Arquitetura da informação. In: Arquitetura da

informação pervasiva [online]. São Paulo: Editora UNESP; São Paulo: Cultura Acadêmica, 2015, pp.
43-74. ISBN 978-85-7983-667-1. Available from SciELO Books . Acesso em 20, jul. 2021.
NEIL, Theresa. Padrões de Design para Aplicativos Móveis. 1 ed. São Paulo: Novatec, 2012.
NOGUEIRA, Caio. Web Designer X Desenvolvedor Web: saiba as diferenças. Upsites, 2016. Disponível
em: < https://upsites.digital/desenvolvimento-web/web-designer/ >. Acesso em: 6, jul. 2021.
ORIGEM DA PALAVRA DESIGNAR. Origem da Palavra, 2021. Disponível em:
<https://origemdapalavra.com.br/pergunta/origem-da-palavra-designar/>. Acesso em: 8, jul. 2021.
PIMENTA SOARES, Marcelo; Winckler, Marco. Avaliação de Usabilidade de Sites Web. Instituto de
Informática – UFRGS. Porto Alegre. Disponível em: < https://www.irit.fr/~Marco.Winckler/2002-
winckler-pimenta-ERI-2002-cap3.pdf >. Acesso em 27. Jul. 2021.
SANTANA, Flávio. Card Sorting: a arquitetura de informação construída pelos usuários. Coletivoux.
2017. Disponível em: < https://coletivoux.com/card-sorting-a-arquitetura-de-
75
informa%C3%A7%C3%A3o-constru%C3%ADda-pelos-usu%C3%A1rios-54b9f892e38e >. Acesso em
30. Jul. 2021.
SANTOS, Robson. Abordagem heurística para avaliação da usabilidade de interfaces. Rio de Janeiro,
2000. Dissertação de Mestrado. PUC-Rio, Pontifícia Universidade Católica do Rio de Janeiro.
SILVA, Maurício Samy. Web Design Responsivo. 1 Ed. São Paulo: Novatec, 2014. Disponível em: <
https://www.google.com.br/books/edition/Web_Design_Responsivo/Rs1tDwAAQBAJ?hl=pt-
BR&gbpv=1&dq=site+responsivo&printsec=frontcover >. Acesso em: 12, jul. 2021.
THOMAS, H. Ecologia da informação: por que só a tecnologia não basta para o sucesso na era da
informação / Thomas H. Davenport, Laurence Prusak; tradução Bernadette Siqueira Abrão. — São
Paulo: Futura, 1998. Disponível em: < https://ppgic.files.wordpress.com/2018/07/davenport-t-h-
2002.pdf >. Acesso em 27. Jul. 2021.
WOEBCKEN, Cayo. Design Thinking: uma forma inovadora de pensar e resolver problemas.
Rockcontent. 2019. Disponível em: < https://rockcontent.com/br/blog/design-thinking/ >. Acesso
em 26, Jul. 2021.
WOOLRYCH, A.; COCKTON, G. (2001) Why and when five users aren’t enough. In proceedings... IHM-
HCI 2001. Lille, França.
XAVIER, Thiago. O que a arquitetura da informação? Entenda esse conceito e suas aplicações.
Rockcontent. 2018. Disponível em: < https://rockcontent.com/br/blog/arquitetura-da-informacao/
>. Acesso em 26. Jul. 2021.
76
Minicurrículo do Professor
Diria que sou uma pessoa tranquila, adepto de uma vida
sossegada e uma boa cervejinha no fim de semana. Também sou morador
do Recife, nascido em Vitória-PE (terra da Pitú), formado em jornalismo
(Uninassau) com mais de 10 anos de experiência na área, com uma pós-
graduação em Mídias Digitais (Estácio) e outra em Ciência Política (UNICAP)
e atualmente estou cursando licenciatura em Letras (UFPE). Ou seja, assim
como vocês, também sou um estudante. É isso.
77

MMI - Ebook - Webdesign (2021)

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

MMI - Ebook - Webdesign (2021)

Enviado por

Direitos autorais:

Formatos disponíveis

Web Design

Curso Técnico em Multimídia

Curso Técnico em Multimídia

Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa

1.ed. | Set. 2021

Coordenação de Curso Coordenação Executiva

1.1 Uma introdução à web e ao design ............................................................................................................ 5

1.2 Tipos de sites, blogs e aplicativos ............................................................................................................... 6

1.3 Linguagens de marcação, de design e de programação de web .............................................................. 18

1.4 Planejamento, usabilidade e a importância de um site responsivo ......................................................... 22

2.Competência 02 | Aplicar os princípios da arquitetura da informação em artefatos da web ......... 36

2.1 Porque devemos aprender sobre Arquitetura da Informação ................................................................. 36

2.2 Definindo as personas............................................................................................................................... 39

2.3 Estrutura hierárquica, Fluxo de navegação e criação de wireframes ...................................................... 41

2.4 Modelo mental, Design Thinking e um pouco mais de UX e Gestalt ....................................................... 47

3.Competência 03 | Avaliar a usabilidade e ergonomia visual nos sites e artefatos da web.............. 56

3.1 Avaliar princípios da usabilidade .............................................................................................................. 56

3.2 O que é Ergonomia Visual ......................................................................................................................... 68

Minicurrículo do Professor ................................................................................................................... 77

Sejam bem-vindos e vamos navegar em um mundo multimídia!

1.Competência 01 | Desenvolver artefatos para web focando na interface

Antes de começar a competência que tal ouvir o podcast e entender um pouco

1.1 Uma introdução à web e ao design

Vamos saber neste podcast um pouco sobre a história da WEB, confira no

Web e Internet é a mesma coisa? Vamos saber mais! Link

Então a função do Web designer é a de adaptar os sites, artefatos e plataformas da web

Web Designer e Desenvolvedor Web é a mesma coisa?

1.2 Tipos de sites, blogs e aplicativos

Eles podem, entre outras coisas, apresentar o histórico da empresa ou a biografia de

Figura 01 – Site da Secretaria de Educação e Esporte de Pernambuco

Neste tipo de site a experiência do cliente é a questão central, a finalidade é gerar

Porém, é importante separar aplicativo de site, as finalidades de ambos são diferentes,

Figura 02 - site buscapé

Muitos deles permitem a interação direta do leitor através da caixa de comentário.

Figura 04 - site Web Design Museum

Figura 05 - hotsite da marca Ipanema

Figura 06 - modelo de landing page

No entanto, assim como os sites, existem um monte de tipos de blogs. Os mais

Quer saber mais sobre?

Figura 07 - A evolução dos computadores

Atualmente existem basicamente 3 tipos de aplicativos móveis: os aplicativos nativos,

TIPO DE LINGUAGEM VANTAGENS DESVANTAGENS

• Maior integração com usuário • Cada plataforma terá sua

• Executados pelo navegador • Pouca integração com o

• Compartilha códigos com • Desempenho e design

Tabela 01 - Diferenças entre aplicativos nativos, híbridos e para web.

Saiba um pouco mais

1.3 Linguagens de marcação, de design e de programação de web

A linguagem de marcação é um conjunto de códigos empregados a dados e a textos,

As linguagens de marcação se utilizam do conceito de marcador ou tag, que já trazem

Exemplo: <title>, <body>, <header>, <footer>, <article>, <video>, e muitos outros.

Já falei um pouco anteriormente sobre hipertexto. Mas, sendo mais específico, de

Figura 08 - A evolução do HTML.

Confira aqui algumas outras diferenças:

Figura 09 - Como verificar o HTML de um site

O Flash também trazia a possibilidade de construir páginas inteiras, reproduzir

De acordo com o livro JavaScript: O Guia Definitivo, de David Flanagan, o JavaScript é

Se o HTML serve para especificar o conteúdo, o CSS cuida da apresentação, o JavaScript

Além do JavaScript, outra linguagem de programação bastante utilizada é o PHP. Apesar

Figura 10 - Diferenças entre HTML, CSS e Javascript

1.4 Planejamento, usabilidade e a importância de um site responsivo

Conteúdo – Você já tem o objetivo e o público alvo definido, então é chegado o

Exemplo: Se o produto é a camisa de algum clube, especifique o tamanho, o material