Design para internet -...

Design para internetResolução

- No Design Gráfico quanto maior o DPI melhor.- Na web não é bem assim.


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.


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


Resolução Largura máx [sem scroll] Altura [visível]

800×600 760px 420px

1024×768 (recomendado) 960px 550px

1280×1024 1210px 855px


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.


Layout com largura variável


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.


GIF

- Muito utilizado para criar imagens animadas.

- Permite imagens com transparência.

- Seu formato permite que as imagens em GIF possuam apenas 256 cores.


JPG GIF


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.


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


Menu vertical

- Pode ser facilmente estendido para baixo, a adição de opções é normalmente menos problemática que adicionar um menu horizontal.


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.


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.


- 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


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”.


- 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 - 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 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/

Design para internet -...

Documents

Transcript of Design para internet -...