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

Transcrição

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

2 Resoluçã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.

3 Resoluçã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

4 Resolução Resolução Largura máx [sem scroll] Altura [visível] px 420px (recomendado) 960px 550px px 855px

5 Resolução Layout com largura fixa

6 Resoluçã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.

7 Resolução Layout com largura fixa

8 Resolução Layout com largura variável

9 Resolução Layout com largura variável Positivo - Se adaptam a resolução do usuário. Negativo - Em monitores muito grandes, podem ter comprimento de linhas muito grandes.

10 Resoluções Mais detalhes sobre esse assunto em:

11 Formatos 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.

12 Formatos 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.

13 Formatos de arquivos de imagens

14 Formatos 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.

15 Formatos de arquivos de imagens JPG GIF

16 Formatos 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.

17 Formatos de arquivos de imagens

18 Formatos 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:

19 Convenções de design

20 Convençõ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.

21 Convenções de design

22 Convençõ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.

23 Convençõ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.

24 Navegadores - 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.

25 Navegadores Chrome 51,7% Firefox 28,5% Internet Explorer 13% Safari 4,1% Opera 1,8% W3schools.com, março 2013

26 Design 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.

27 Design gráfico - Diagramação

28 Design 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.

29 Design 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 Arial Tahoma 1 I i l J 1 I i l J 1 I i l J

30 Design 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.

31 Design 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.

32 Design gráfico - Usabilidade

33 Design gráfico - Usabilidade

34 Design 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;

35 Design gráfico - Usabilidade

36 Design gráfico - Usabilidade

37 Design 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.

38 Design gráfico - Tendências

39 Design gráfico - Tendências

40 Até onde a usabilidade mata a criatividade? Por Gilberto Alves Jr. 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.

41 É 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.

42 Lápis, papel e muita, muita referência.

43 Referências