02
Olá, e novamente, bem vido ao programa de testes em interfaces
web da Aperture Science computer-aided enrichment center.
V...
CÓPIA NÃO AUTORIZADA É CRIME
RESPEITE O DIREITO AUTORAL
Aroeira, Roberto Mitraud
Portais: livro de companhia do design em ...
Roberto Mitraud Aroeira
livro de companhia do design em web e meios digitais
Texto:
Roberto Mitraud Aroeira
Imagens:
Rober...
SUMáRIO
O
@
P w
339 C
f
0808/64
}
}
12
INTRODUÇÃO
20 30 38
50 60
LAYOUT
GRID
TIPOS
ELEMENTOS
} representamonúmerodapáginaque
serelacionacomocapítulo
} osícone...
INTRODUÇÃO
O
@
P w
339 C
f
1212/64
13
WEBDESIGN
Neste livro de companhia, a Aperture Science
abordará diversos termos relacionados ao design
de mídias digitais,...
15
WebDesignResponsivo
Atualmente o Web Design Responsivo
exerce papel de grande importância, devido
ao massivo uso de dispos...
17
LAYOUT-GRID
O
@
P w
339 C
f
2020/64
21
LAYOUT
O layout precisa transmitir a informação desejada
com eficiência. É preciso que o layout seja um elo
de comunicação...
O uso de layouts fluidos é característica do web design responsivo,
nele o layout se adapta a diferentes dispositivos e pr...
GRID
O grid é o responsável por estruturar todo o con-
teúdo textual e imagético formando assim o layout
em web.
Inicialme...
25
O 960 GRID SYSTEM é um sistema de grid que proporciona uma
maior flexibilidade do layout, porem ele é um sistema adaptativ...
O unsemantic é considerado o sucessor do 960 GRID SYSTEM e tam-
bém foi criado por Nathan Smith. A grande diferença é que ...
TIPOS
O
@
P w
339 C
f
3030/64
31
TIPOS
A escolha correta de fontes tipográficas em uma
construção de website é fundamental, uma vez que
são através delas q...
Possuir certa noção quanto aos estilos tipográficos é um fator fa-
cilitador na escolha correta da família de fontes. Essa...
No desenvolvimento de um projeto web,
é recomendável utilizar para as massas de
texto fontes websafe, que são famílias de
...
35
COR-IMAGEM
O
@
P w
339 C
f
3838/64
39
COR
Para produção de websites, o sistema de cor mais
utilizado é o RGB (red, green, blue). Que é um sis-
tema aditivo usad...
A representação do RGB é dada através da indicação de um valor
de luminosidade de 0 a 255 a cada pixel (R (vermelho). G (v...
Este é o exemplo de uma seção da paleta de cores RGB com seus
valores hexadecimais. Relembrando que só apresentaram caráte...
As cores não são somadas ou subtraídas, mas sim
distribuídas ao longo de um circulo cromático. Cada
matiz representa um gr...
IMAGEM
Quanto ao uso de imagens no web design, reso-
lução em pixels é um fator crucial.
Um layout verdadeiramente fluido ...
Podemos usar porcentagens para dimensionar
imagens, mas é preciso cuidado. Aumentá-la além
do seu tamanho original deixará...
As imagens responsivas podem manter uma mesma proporção de
um dispositivo para ou outro. Neste caso, a imagem continua com...
Este outro ilustra a forma como uma imagem responsiva pode al-
terar tanto de tamanho quanto proporção. Tais parâmetros po...
ELEMENTOS
O
@
P w
339 C
f
5050/64
51
ELEMENTOS
O projeto de design em web e meios digitais pos-
sui diversos termos em sua construção, os princi-
pais são os e...
Agrupamentos temáticos ou funcionais de links, que podem ser
publicados em formato de imagem ou texto, normalmente no alto...
Barrasderolagem
São as áreas laterais à janela do browser, que sinalizam a existência
de conteúdo que ultrapassa a área vi...
Ferramentadebuscainterna
Mecanismo de recuperação de informações que aceita uma pes-
quisa, compara-a com os arquivos inde...
Formulários
Permitem que o usuário forneça, a partir de um website, diversos
tipos de informações e as envie para destinat...
Ícones
Símbolos visuais que recuperam lembranças informacionais a eles
relacionadas. Em sites com usuários regulares, ajud...
FONTES
O
@
P w
339 C
f
6060/64
61
REFERÊNCIASBIBLIOGRÁFICAS
ALMEIDA, Thiago. Inspiração Web: Página Única. Disponível em: <http://choco-
ladesign.com/inspir...
MOREIRA, Vinicius. Web Design Flexível. Disponível em: <http://chocoladesign.
com/a-web-flexivel>. Acesso em: 7 jun. 2013....
65
p074707357
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS
of 68

PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS

O livro busca orientar o leitor acerca da produção de design em web e meios digitais, relacionando o conteúdo textual e imagético com a informação estética e abordagem digital do jogo Portal / Portal 2. Apresentando um corte diferenciado, o cubo assemelha-se ao Weighted Companion Cube que aparece nas séries de jogos Portal. O livro, assim como o cubo no jogo, será a companhia do articulador/ designer, e seu formato reduzido facilita seu transporte. Trabalho acadêmico realizado nas disciplinas de Prática Projetual III e Materiais e Processos de Produção II, no curso de Design Gráfico - 5º Período pela Universidade do Estado de Minas Gerais Valve Corporation. All rights reserved. The Valve logo, the Steam logo and the Portal logo, are trademarks and/or registered trademarks of Valve Corporation.
Published on: Mar 4, 2016
Published in: Design      
Source: www.slideshare.net


Transcripts - PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS

  • 1. 02
  • 2. Olá, e novamente, bem vido ao programa de testes em interfaces web da Aperture Science computer-aided enrichment center. Você foi selecionado para portar o Livro de Companhia do design em web e meios digitais. Manuseie cuidadosamente e esteja ciente de que suas ações serão agora monitoradas pela Aperture Science e futuros registros poderão ser posteriormente usados para execução de novos testes. Neste livro iniciaremos o protocolo de testes em interfaces digitais, esperamos que os assuntos aqui abordados colaborem de forma promissora na produção digital. Estaremos te obeservando...
  • 3. CÓPIA NÃO AUTORIZADA É CRIME RESPEITE O DIREITO AUTORAL Aroeira, Roberto Mitraud Portais: livro de companhia do design em web e meios digitais / Roberto Mitraud Aroeira Belo Horizonte: Valve, 2013 64 p. ; ill. : color ; 15,15 x 15 cm ISBN 074-70-7357-074-2 1. Design Gráfico. 2. Editorial. 3. Web. P0747o CDU 074.074
  • 4. Roberto Mitraud Aroeira livro de companhia do design em web e meios digitais Texto: Roberto Mitraud Aroeira Imagens: Roberto Mitraud Aroeira Valve Corporation 2013
  • 5. SUMáRIO O @ P w 339 C f 0808/64 } }
  • 6. 12 INTRODUÇÃO 20 30 38 50 60 LAYOUT GRID TIPOS ELEMENTOS } representamonúmerodapáginaque serelacionacomocapítulo } osíconesficarãodestacadosquando relacionadoscomocapítulo [Legenda] COR IMAGEM FONTES 09
  • 7. INTRODUÇÃO O @ P w 339 C f 1212/64
  • 8. 13
  • 9. WEBDESIGN Neste livro de companhia, a Aperture Science abordará diversos termos relacionados ao design de mídias digitais, uma vez que o mesmo é de grande importância para a instituição. O web design tende à multidisciplinaridade, uma vez que a construção de páginas web requer sub- sídios de diversas áreas técnicas, além do design propriamente dito. Áreas como a arquitetura da informação, programação, usabilidade, acessibili- dade entre outros. A tarefa do web designer é a elaboração estética e funcional e a manutenção de um website. O web designer deve ter a compreensão da aplicação em mídia eletrônica. 14
  • 10. 15
  • 11. WebDesignResponsivo Atualmente o Web Design Responsivo exerce papel de grande importância, devido ao massivo uso de dispositivos móveis para acesso as mídias digitais. Web Design Responsivo é uma abordagem de web design destinada a elaborar sites obtendo uma melhor experiência de visualização, fácil leitura e navegaçãocomummínimoderedimensionamento e rolagem, para uma ampla gama de dispositivos. Um website definido como responsivo adapta a sua exibição para o ambiente de visualização e faz uso de grades proporcionais e fluídas, CSS Media Queries, fontes funcionais e imagens flexíveis. 16
  • 12. 17
  • 13. LAYOUT-GRID O @ P w 339 C f 2020/64
  • 14. 21
  • 15. LAYOUT O layout precisa transmitir a informação desejada com eficiência. É preciso que o layout seja um elo de comunicação com o usuário, que sua linguagem seja condizente com o objetivo do site. Conhecer heurísticas de usabilidade é fundamental para se gerar layouts para a web. Cada elemento inserido em um website deve ter um objetivo, a perfeição de um projeto de website se atinge quando não há nada a ser retirado e não quando não há nada mais a ser inserido. 22
  • 16. O uso de layouts fluidos é característica do web design responsivo, nele o layout se adapta a diferentes dispositivos e preferências feitas pelo usuário. 23
  • 17. GRID O grid é o responsável por estruturar todo o con- teúdo textual e imagético formando assim o layout em web. Inicialmente, usavam-se grids estruturados e até mesmo fixos em HTML, que eram gerados por uma espécie de tabela. Posteriormente foram utilizados os grids modu- lares, que não se ajustavam de uma forma muito estruturada, e que respondia a uma série de fa- tores, uma vez que o conteúdo se ajusta de uma maneira muito mais fluida nesse tipo de grid. 24
  • 18. 25
  • 19. O 960 GRID SYSTEM é um sistema de grid que proporciona uma maior flexibilidade do layout, porem ele é um sistema adaptativo e possui malhas de 12 ou16 colunas com a largura fixa de 960 pixels, que acabam por estruturar mais a disposição dos elementos. A premissa para este sistema é que ele se propõe como ideal para prototipagem rápida de layouts web, mas que funciona perfeita- mente bem num ambiente de produção de meios digitais. Website: http://960.gs/ 26
  • 20. O unsemantic é considerado o sucessor do 960 GRID SYSTEM e tam- bém foi criado por Nathan Smith. A grande diferença é que o sistema de grid do unsemantic é responsivo e ele se adapta com maior fluidez, já que ao contrário de usar colunas de larguras fixas, ele funciona baseando-se na porcentagem entre elas. Sistemas de grid responsivos se adaptam muito bem a diferentes mídias e dispositivos digitais. Website: http://unsemantic.com/ 27
  • 21. TIPOS O @ P w 339 C f 3030/64
  • 22. 31
  • 23. TIPOS A escolha correta de fontes tipográficas em uma construção de website é fundamental, uma vez que são através delas que serão transmitidas as infor- mações aos usuários. O processo de leitura das informações deve ser funcional e despertar curiosidade do leitor ao mes- mo tempo. Juntamente com o grid, blocos de texto ganham maior fluidez e permitem que a infor- mação seja passada de uma forma mais dinâmica e agradável. 32
  • 24. Possuir certa noção quanto aos estilos tipográficos é um fator fa- cilitador na escolha correta da família de fontes. Essa escolha deve ser feita com cautela, uma vez que no design responsivo as fontes variam de corpo e sua decisão pode atrapalhar a legibilidade do texto. Abc - serifada Abc - não serifada O tamanho e peso da tipografia, além de influenciar na legibilidade também influenciam no contraste e hierarquia do conteúdo no bloco de texto. A A A A A A A A A A A A A A A A 33
  • 25. No desenvolvimento de um projeto web, é recomendável utilizar para as massas de texto fontes websafe, que são famílias de fontes que são encontradas em diversos sis- temas operacionais, apesar de que hoje em dia tenha incorporação de fontes pela rede. O alinhamento ou disposição de palavras em um bloco de texto na web pode modificar o ritmo e a direção de leitura. Saber utilizar bem este recurso pode garantir que o leitor percorrerá a informação tex- tual numa espécie de caminho pré-determinado. 34
  • 26. 35
  • 27. COR-IMAGEM O @ P w 339 C f 3838/64
  • 28. 39
  • 29. COR Para produção de websites, o sistema de cor mais utilizado é o RGB (red, green, blue). Que é um sis- tema aditivo usado em telas de monitores. Para formar uma imagem, diferentes porcentagens de cada cor se sobrepõe, como as reticulas são muito pequenas, não vemos os pontos de luz, mas sim a imagem formada. A grande maioria dos monitores colori- dos atuais possuem 24 bits e são capazes de renderizar exatamente 16,777,216 cores no padrão RGB e suas cores só são fiéis no suporte no qual o sistema trabalha, ou seja monitores. 40
  • 30. A representação do RGB é dada através da indicação de um valor de luminosidade de 0 a 255 a cada pixel (R (vermelho). G (verde), B (azul) ), onde o 0 é ausência e 255 o valor de mais intensidade. 41
  • 31. Este é o exemplo de uma seção da paleta de cores RGB com seus valores hexadecimais. Relembrando que só apresentaram caráter figurativo, uma vez que o sistema de cores RGB é projetado para monitores. As cores do sistema RGB são complementares às do sistema CMYK - Ciano (Cyan), Magenta (Magenta), Amarelo (Yellow) e Preto (Black / Key) - e a sua mistura forma a cor branca. 42
  • 32. As cores não são somadas ou subtraídas, mas sim distribuídas ao longo de um circulo cromático. Cada matiz representa um grau do cilindro entre o 0 e 360. A sintaxe dele é da seguinte maneira: hsl (hue, saturation%, lightness%) A escala das cores tanto em RGB quanto em có- digos HEX varia entre o eixo claro-escuro. E estes modelos deixam de lado outras maneiras mais in- tuitivas de classificação de cores como matiz e a saturação. O HSL surgiu para preencher este vácuo. 43
  • 33. IMAGEM Quanto ao uso de imagens no web design, reso- lução em pixels é um fator crucial. Um layout verdadeiramente fluido em web design responsivo precisa de imagens que se adaptem à todo tipo de resolução. Precisamos de várias imagens em resoluções diferentes, uma para cada contexto. E é preciso saber como servir a imagem certa pra cada dis- positivo. Alto valor em dpi de uma imagem não tem relação de qualidade com fotos digitais. O fato é que valor em dpi refere-se ao uso da imagem para impressão, nos meios digitais, o importante é a dimensão em pixels. 44
  • 34. Podemos usar porcentagens para dimensionar imagens, mas é preciso cuidado. Aumentá-la além do seu tamanho original deixará o layout pixeliza- do. E carregar uma imagem de alta resolução para depois diminuí-la via código vai deixar a página muito carregada.   Fazendo uso de Media Queries é possível forçar as imagens a se redimensionarem proporcionalmente de acordo com o tamanho de um container ou também cortar as laterais da imagem, escondendo ou revelando algumas partes de acordo com o tamanho do browser. 45
  • 35. As imagens responsivas podem manter uma mesma proporção de um dispositivo para ou outro. Neste caso, a imagem continua com o mesmo tamanho, somente o texto sofreu alterações de formatação. 46
  • 36. Este outro ilustra a forma como uma imagem responsiva pode al- terar tanto de tamanho quanto proporção. Tais parâmetros podem sofrer mudanças, desde que a informação da imagem consiga ser transmitida por todos os dispositivos (neste caso, a bola aparece em todos os aparelhos). 47
  • 37. ELEMENTOS O @ P w 339 C f 5050/64
  • 38. 51
  • 39. ELEMENTOS O projeto de design em web e meios digitais pos- sui diversos termos em sua construção, os princi- pais são os elementos da interface web, comuns à maioria dos sites e que influenciam o deslocamen- to, a ação e a experiência do usuário de acordo com soluções amplamente testadas e aceitas. Serão aqui apresentados os elementos funda- mentais nessa experiência entre usuário e suporte digital. 52
  • 40. Agrupamentos temáticos ou funcionais de links, que podem ser publicados em formato de imagem ou texto, normalmente no alto, à esquerda, ou na base das páginas. Barrasdenavegação 53
  • 41. Barrasderolagem São as áreas laterais à janela do browser, que sinalizam a existência de conteúdo que ultrapassa a área visível da página e permitem o deslocamento da janela para alcançá-lo. 54
  • 42. Ferramentadebuscainterna Mecanismo de recuperação de informações que aceita uma pes- quisa, compara-a com os arquivos indexados em bancos de dados e gera uma lista de links com os resultados encontrados. Pode ser dirigido a uma página, um site, um documento de um site ou banco de dados, ou um tipo de informação, como produtos num site de vendas. É necessária em sites grandes, com mais de 200 páginas, com alto nível de complexidade e atualizados frequentemente. É utilizada por 88% dos usuários que precisam achar informações, especialmente os que não conhecem um determinado site. 55
  • 43. Formulários Permitem que o usuário forneça, a partir de um website, diversos tipos de informações e as envie para destinatários definidos, como no caso de pagamento de impostos, compra de mercadorias, con- trato de serviços, registro de acesso a um site. 56
  • 44. Ícones Símbolos visuais que recuperam lembranças informacionais a eles relacionadas. Em sites com usuários regulares, ajudam a simplificar a navegação, através da rápida visualização de links e informações a eles associadas. 57
  • 45. FONTES O @ P w 339 C f 6060/64
  • 46. 61
  • 47. REFERÊNCIASBIBLIOGRÁFICAS ALMEIDA, Thiago. Inspiração Web: Página Única. Disponível em: <http://choco- ladesign.com/inspiracao-web-pagina-unica>. Acesso em: 6 jun. 2013. EIS, Diego. Introdução ao Responsive Web Design. Disponível em: <http://table- less.com.br/introducao-ao-responsive-web-design/#.Ub6EypwTX7B>. Acesso em: 10 jun. 2013. GUERRATO, Dani. Sobre Cor e Webdesign. Disponível em: <http://tableless.com. br/sobre-cor-e-webdesign/#.Ub6DzpwTX7C>. Acesso em: 7 jun. 2013. HUNT, Ben. Imagery: Using images in Web Page Design. Disponível em: <http:// www.webdesignfromscratch.com/web-design/imagery/>. Acesso em: 10 jun. 2013. JOHNSON, Joshua. The 960 Grid System Made Easy. Disponível em: <http://www. thegridsystem.org/tags/website/>. Acesso em: 5 jun. 2013. LOPUCK, Lisa. Web Design For Dummies. 3ª Edição Estados Unidos: Hungry Minds Inc, 2012. 335 p 62
  • 48. MOREIRA, Vinicius. Web Design Flexível. Disponível em: <http://chocoladesign. com/a-web-flexivel>. Acesso em: 7 jun. 2013. MULLER, Gisele. 48 Examples of Excellent Layout in Web Design. Disponível em: <http://webdesignledger.com/inspiration/48-examples-of-excellent-layout-in- web-design>. Acesso em: 7 jun. 2013. NUNES, Ronaldo Paiva. A Teoria das Cores e o Web Design. Disponível em: <http:// www.blogwebdesign.microcampsp.com.br/a-teoria-das-cores-e-o-web-de- sign/>. Acesso em: 10 jun. 2013. SERRAZINA, Filipe. Dicas de Tipografia para a Web. Disponível em: <http://log.pt/ blog/2012/01/dicas-de-tipografia-para-a-web/>. Acesso em: 5 jun. 2013. VASILE, Christian. How to Use Images Successfully: Web Design Usability Guide. Disponível em: <http://www.1stwebdesigner.com/design/images-on-web-de- sign-usability-guide/>. Acesso em: 5 jun. 2013. TIDWELL, Jennifer. Designing Interfaces. 2ª Edição Estados Unidos: O’reilly Media, 2011. 576 p. YATES, Ian. The Anatomy of Web Typography. Disponível em: <http://webdesign. tutsplus.com/articles/typography-articles/the-anatomy-of-web-typography/>. Acesso em: 7 jun. 2013. 63
  • 49. 65
  • 50. p074707357

Related Documents