aula 13

Prévia do material em texto

Aula 13: PROCESSO DE CRIAÇÃO (PARTE 4) 
Webdesign 
WEBDESIGN 
Aula 13: Processo de criação (parte 4) 
Aula 13: PROCESSO DE CRIAÇÃO (PARTE 4) 
Webdesign 
Objetivos desta aula 
1. Explicar como usar texturas na criação da interface digital; 
2. Identificar as funções da imagem no meio digital; 
3. Definir o uso das imagens em interfaces digitais; 
4. Definir o uso de ícones. 
Aula 13: PROCESSO DE CRIAÇÃO (PARTE 4) 
Webdesign 
| 
• O uso de texturas/padrões em projetos de design permite complementar a mensagem transmitida 
ao usuário, tornando-a mais eficiente; 
• Ellen Lupton (2013) afirma que “a textura acrescenta detalhes a uma imagem, proporcionando 
mais qualidade à superfície como um todo e recompensando o olhar daquele que a observa”; 
• O web designer pode utilizar texturas prontas, que podem ser compradas ou adquiridas 
gratuitamente via internet, ou pode criar suas texturas; 
• O uso de texturas e padrões envolve, muitas das vezes, a repetição de imagens e, quanto menor 
for seu tamanho (em dimensão e bytes) mais rápido serão carregadas e exibidas ao usuário. 
Texturas no ambiente digital 
Aula 13: PROCESSO DE CRIAÇÃO (PARTE 4) 
Webdesign 
| 
Novos recursos do CSS possibilitaram utilizar texturas e padrões em qualquer elemento à escolha do 
web designer e, por isso, é muito importante o trabalho coletivo com o desenvolvedor front-end. 
A aplicação de texturas e padrões podem ser configuradas e quatro formas distintas: 
 
• Repeat: onde a imagem é repetida na horizontal e na vertical; 
• Repeat-x: a imagem é repetida somente na horizontal; 
• Repeat-y: a imagem é repetida somente na vertical; 
• No-repeat: não há repetição da imagem. 
 
Ainda há outras possibilidades, como o uso de gradientes e fixação do background. 
Texturas no ambiente digital 
Aula 13: PROCESSO DE CRIAÇÃO (PARTE 4) 
Webdesign 
| 
• Além dos elementos estéticos, a escolha da imagem envolve questões como resolução, formato de 
arquivo e direitos de uso; 
• Para a definição da imagem, o web designer pode pensar em produzi-la, contratar um 
fotógrafo/ilustrador ou comprá-la em um banco de imagens. O orçamento, bem como o conceito 
do projeto, influencia diretamente esse tipo de decisão; 
• A produção de imagens proporciona maior autenticidade ao projeto, tornando-o ainda mais coeso 
com o conceito proposto; 
• Utilizar bancos de imagens pode exigir bastante esforço e tempo até encontrar uma boa imagem 
que se adeque ao leiaute que está sendo proposto. 
Imagens digitais 
Aula 13: PROCESSO DE CRIAÇÃO (PARTE 4) 
Webdesign 
| 
Imagens digitais 
“Mesmo que uma imagem seja livre de restrições, 
você deve garantir que o uso da imagem caia nas 
diretrizes do acordo de licenciamento da imagem 
do site. As diretrizes para cada banco de imagem 
diferem, então tenha certeza que você sabe quais 
são elas antes de começar a procurar imagens. 
Algumas galerias até restringem suas imagens para 
uso pessoal e sem fins lucrativos.” (BEAIRD, 2010) 
Fonte: freerangestock.com 
Aula 13: PROCESSO DE CRIAÇÃO (PARTE 4) 
Webdesign 
| 
• A escolha da imagem envolve também sua resolução, ou seja, o seu nível de detalhamento. 
Porém, quanto mais detalhes uma imagem tem, mais dados ela contém; 
• Imagens com altas resoluções podem ser apresentadas em dimensões maiores sem perder 
qualidade. Por outro lado, quanto maior for sua resolução, mais demorado será seu carregamento 
e consequente exibição; 
• A unidade mais utilizada para medir a resolução de uma imagem é o DPI (pontos por polegada), 
porém usa-se esta medida apenas para imagens impressas; 
• Medimos a resolução de uma imagem digital pelo PPI (pixels por polegada). 
Imagens digitais 
Aula 13: PROCESSO DE CRIAÇÃO (PARTE 4) 
Webdesign 
| 
De acordo com Beaird (2010), há três formatos principais para imagens na web: 
• GIF (Graphics Interchange Format - Formato para Intercâmbio Gráficos): Tem como característica o 
tamanho em bytes, menor do que os demais formatos. Além disso, permite transparência e 
animações. Imagens neste formato possuem apenas 256 cores, o que as tornam inapropriadas 
para alguns usos, como fotografia, por exemplo; 
• PNG (Portable Networks Graphics - gráfico portáteis para redes): Foi criado como alternativa para 
as limitações apresentadas pelos GIFs; 
• JPEG (Join Photographic Experts Groups - grupo conjunto de especialistas fotográficos): Muito 
utilizado para fotografias, texturas, imagens com efeitos complexo etc., por conta do tamanho do 
seu arquivo sem perda de qualidade. 
Imagens digitais 
Aula 13: PROCESSO DE CRIAÇÃO (PARTE 4) 
Webdesign 
| 
• Toda imagem possui significados a serem explorados pelo web designer. Este aproveitamento de 
sentido pode ser feito com o uso de simbolismos, metáforas, símiles ou tipogramas, por exemplo; 
• Considerar a Semiótica e a Linguística permite um melhor entendimento de como as imagens são 
interpretadas. 
Escolhendo imagens 
Aula 13: PROCESSO DE CRIAÇÃO (PARTE 4) 
Webdesign 
| 
Para escolha das imagens para sites, há três questões norteadoras para o processo: 
 
• Relevância da imagem: imagens relevantes podem despertar o interesse do usuário pelo leiaute, 
além de proporcionar pontos de referências e memorização; 
• Quão interessante é a imagem: imagens interessantes nem sempre são literais em relação ao 
assunto tratado. O uso de ilustrações e fotografias podem reforçar o conceito do projeto; 
• Atratividade da imagem: imagens atrativas podem ser ótimas para criar pontos focais dentro de 
um site. Bons exemplos de imagens atrativas são as de pratos oferecidos por um restaurante, com 
o objetivo de despertar desejo no público. 
Escolhendo imagens 
Aula 13: PROCESSO DE CRIAÇÃO (PARTE 4) 
Webdesign 
| 
• Outro uso muito comum de usar imagens em ambientes digitais é na forma de ícones. 
Assim como as fotografias e vetores, eles também podem ser comprados ou produzidos; 
• O ícone serve para facilitar a navegação do usuário ao acessar determinada informação. 
Muitas vezes, ele é uma redução ou simplificação de algum objeto de conhecimento do usuário; 
• O uso dos ícones varia de acordo com o contexto cultural, porém algumas convenções já são 
aceitas como padrão. Carrinho de compras e casa são exemplos de ícones que têm sua 
funcionalidade mundialmente reconhecida. 
Escolhendo imagens 
Aula 13: PROCESSO DE CRIAÇÃO (PARTE 4) 
Webdesign 
| 
De acordo com James Kalbach (2007), um bom ícone deve possuir as seguintes qualidades: 
• Clareza em seu reconhecimento e de fácil legibilidade; 
• Quantidade limitada de ícones ajudam na distinção entre eles; 
• Memoráveis para que o usuário consiga reconhecer facilmente a informação quando voltar 
ao site; 
• Linguagem comum é uma qualidade que visa preservar elementos que identificam os 
ícones como da mesma família. 
 
Testar os ícones antes de usá-los é fundamental. 
Escolhendo imagens 
Aula 13: PROCESSO DE CRIAÇÃO (PARTE 4) 
Webdesign 
Saiba mais 
BEAIRD, Jason. The principles of Beautiful Web Design. 
SitePoint, 2010. 
 
KALBACH, James. Designing Web Navigation. O’Reilly 
Media, 2007. 
 
LUPTON, Ellen. Pensar com tipos. São Paulo: Editora 
Cosac Naify, 2013. 
Aula 13: PROCESSO DE CRIAÇÃO (PARTE 4) 
Webdesign 
Proposta de atividade: 
• Determinação de texturas e dos tipos de imagens 
e ícones a serem utilizados no projeto; 
• Apresentação de texturas, imagens e ícones 
aplicados ao leiaute; 
• Para próxima aula, as justificativas textuais a 
respeito das escolhas das imagens devem ser 
entregues. 
Aula 13: PROCESSO DE CRIAÇÃO (PARTE 4) 
Webdesign 
VAMOS AOS PRÓXIMOS PASSOS? 
 
 
 Formas de validação; 
 
 Mecânica de validação; 
 
 Processo de validaçãode um projeto web. 
AVANCE PARA FINALIZAR 
A APRESENTAÇÃO.