Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
Design para internetResolução
- No Design Gráfico quanto maior o DPI melhor.- Na web não é bem assim.
Design para internetResolução
Exemplo de imagem com diferentes resoluções de “Pontos/Pixels por polegada".
Em uma imagem digital quanto mais pixels, mais informação acumulada e maior o tamanho do arquivo de imagem.
Para internet 96dpi é um valor aceitável e o mais comum.
Design para internetResolução
Resolução % de usuários
1366x768 19,28%
1024x768 12,26%
1280x800 9,55%
1280x1024 6,49%
1920x1080 6,24%
1440x900 5,69%
W3counter, março 2013
Design para internetResolução
Resolução Largura máx [sem scroll] Altura [visível]
800×600 760px 420px
1024×768 (recomendado) 960px 550px
1280×1024 1210px 855px
Design para internetResolução
Layout com largura fixa
Design para internetResolução
Layout com largura fixa
Positivo- Comprimento de linha previsível.
Negativo- Podem resultar em espaços vazios, em grandes monitores.- Pode ocorrer a perda de conteúdo no lado direito.
Design para internetResolução
Layout com largura fixa
Design para internetResolução
Layout com largura variável
Design para internetResolução
Layout com largura variável
Positivo- Se adaptam a resolução do usuário.
Negativo- Em monitores muito grandes, podem ter comprimento de linhasmuito grandes.
Design para internetResoluções
Mais detalhes sobre esse assunto em:http://www.designadaptavel.com.br/artigos/layout-fluido-ou-liquido
Design para internetFormatos de arquivos de imagens
JPG
- A extensão mais popular.
- Pode ser aberta em quase todos os programas para edição de imagens.
- Sempre que se comprime o arquivo há perda de qualidade.
- Uma vez criado o JPG ele não pode retornar ao BMP com a qualidade anterior.
Design para internetFormatos de arquivos de imagens
JPG
- A extensão mais popular.
- Pode ser aberta em quase todos os programas para edição de imagens.
- Sempre que se comprime o arquivo há perda de qualidade.
- Uma vez criado o JPG ele não pode retornar ao BMP com a qualidade anterior.
Design para internetFormatos de arquivos de imagens
Design para internetFormatos de arquivos de imagens
GIF
- Muito utilizado para criar imagens animadas.
- Permite imagens com transparência.
- Seu formato permite que as imagens em GIF possuam apenas 256 cores.
Design para internetFormatos de arquivos de imagens
JPG GIF
Design para internetFormatos de arquivos de imagens
PNG
- Formato mais novo.
- Traz compressão de arquivos sem perder muita qualidade.
- Suporta um número muito maior de cores.
- Permite imagens com transparência.
Design para internetFormatos de arquivos de imagens
Design para internetFormatos de arquivos de imagens
SVG
- JPG, GIF e PNG são formatos de arquivos BMP.
- No SVG as imagens são vetoriais.
- Eles são capazes de comprimir ainda mais os arquivos, sem perda nenhuma de qualidade (mesmo ao redimensionar as imagens).
- Permite imagens com transparência e animações.
Mais detalhes sobre esse assunto em:http://www.infowester.com/imagens.php
Design para internetConvenções de design
Design para internetConvenções de design
Menu vertical
- Pode ser facilmente estendido para baixo, a adição de opções é normalmente menos problemática que adicionar um menu horizontal.
Design para internetConvenções de design
Design para internetConvenções de design
Menu horizontal
- Não ocupam espaço na largura horizontal da área principal de conteúdo. O conteúdo pode então espalhar-se ao longo de toda a largura do navegador.
- Existe uma quantidade limitada de espaço horizontal em um site.
Design para internetConvenções de design
Rodapé
- Pode repetir alguns links do menu principal.
- Utilizado para informações de copyright, data da última atualização, política de privacidade, contato e até links para o topo da página.
- Maioria não tem mais problemas de compatibilidade.
- Suportam padrões HTML e XHTML.
- Podem haver pequenas diferenças na interpretação do código(HTML, CSS).
- Testar é importante.
Design para internetNavegadores
Design para internetNavegadores
Chrome51,7%
Firefox28,5%
Opera1,8%
Safari4,1%
W3schools.com, março 2013
Internet Explorer13%
Design para internetDesign gráfico
Em se tratando de visual, muitos dos conceitos básicos (diagramação, cores, tipografia) que valem para o impresso valem para o digital.
Porém, têm que ser adaptado às características da internet.
Design para internetDesign gráfico - Diagramação
Design para internetDesign gráfico - Tipografia
Blocos de texto alinhados a direita são difíceis de ler já que o ponto inicial de cada linha é completamente irregular. Textos centralizados também possuem o mesmo problema, mas podem ser usados para destacar blocos curtos de informações como títulos e citações.
Design para internetDesign gráfico - Tipografia
- Nem todas as fontes são compatíveis com os navegadores e estão instaladas no sistema operacional.
- As mais comuns são Arial, Times New Roman, Verdana e Courier.
- Para textos na web as mais indicadas são Verdana e Tahoma.
Verdana
1 I i l J 1 I i l J
Arial
1 I i l J
Tahoma
Design para internetDesign gráfico - Tipografia
Evitar fontes com serifas com tamanho menor que 12 pontos.
Em tamanhos maiores as duas categorias ficam empatadas e o que deve ditar a escolha é o estilo geral do design da página.
Para textos na web as mais indicadas são Verdana e Arial.
Design para internetDesign gráfico - Usabilidade
Foco na usabilidade.
“Usabilidade é um termo usado para definir a facilidade com que as pessoas podem empregar uma ferramenta ou objeto a fim de realizar uma tarefa específica e importante”.
Design para internetDesign gráfico - Usabilidade
Design para internetDesign gráfico - Usabilidade
Design para internetDesign gráfico - Usabilidade
- Não faça o usuário pensar;- Não use nomes legais ou bonitinhos, termos técnicos pouco conhecidos;- Links ou botões devem PARECER OBVIAMENTE clicáveis;- Diminua a poluição visual;
Design para internetDesign gráfico - Usabilidade
Design para internetDesign gráfico - Usabilidade
Design para internetDesign gráfico - Tendências
Flat Design- Cores chapadas e sem gradientes;- tons pastéis, muito branco;- ícones simplificados sem muitos detalhes.
É TENDÊNCIA, por isso é preciso usar o estilo com cuidado e de acordo com as necessidades/objetivos de cada projeto.
Design para internetDesign gráfico - Tendências
Design para internetDesign gráfico - Tendências
Design para internet
Até onde a usabilidade mata a criatividade?Por Gilberto Alves Jr.http://webinsider.com.br/2006/09/06/ate-onde-a-usabilidade-mata-a-criatividade/
Se for possível colocar toda arte que corre nas suas veias no projeto e ainda tê-lo fácil de usar, ótimo. Mas se for preciso escolher entre criatividade e usabilidade, olhe para o briefing. Um bom designer sabe reconhecer um briefing pelos seus olhos de ressaca.
O site de um artista (músico, pintor, etc.) tem a função de expressar a linguagem daquele músico, expressar o sentimento, a tribo, a atitude, a poética específica daquele artista, e isso é mais importante no site de um artista do que a informação propriamente dita.
Já o site de um jornal, por exemplo, não tem motivos para ser muito decorativo, criativo, porque o principal é a informação. O usuário quer encontrar o conteúdo rapidamente, quer ter facilidade de leitura.
Design para internet
É aí que vemos mais claramente a diferença entre design e arte. Arte não tem briefing, não tem certo ou errado. Quando alguém vê uma mancha roxa pintada numa tela se pergunta: o que é isso? O que isso significa? Um monte, um camelo, um martelo? A morte, a vida, o sexo? Ué, uma mancha roxa numa obra de arte pode ser simplesmente uma mancha roxa.
Pode não ser nada além disso, não significar nada, não expressar nada. O legal da arte (no caso da mancha roxa) é que somente esta mancha roxa é o que é, e nada mais no universo é o que esta mancha roxa é.
Mas o design tem que sempre ser alguma coisa, comunicar alguma coisa, ter uma função bem clara, atingir o objetivo. Ai do diretor de arte que não souber explicar o que aquela mancha roxa está fazendo na capa da revista ou no topo do site. O design pode ser ou não criativo, depende da função do objeto.
Lápis, papel e muita, muita referência.
Design para internetReferências
www.abduzeedo.com.br/tags/sites-week
www.coolhomepages.com/
www.webcreme.com/
www.webdesign-inspiration.com/
www.bestwebgallery.com/