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

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

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

livro de companhia do design em web e meios digitais
Texto:
Imagens:
Valve Corporation
2013

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íconesficarãodestacadosquando
relacionadoscomocapítulo
[Legenda]
COR
IMAGEM
FONTES
09

INTRODUÇÃO
O
@
P w
339 C
f
1212/64

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

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

LAYOUT-GRID
O
@
P w
339 C
f
2020/64

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

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

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

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

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

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

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

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

COR-IMAGEM
O
@
P w
339 C
f
3838/64

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

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

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

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

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

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

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

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

ELEMENTOS
O
@
P w
339 C
f
5050/64

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

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

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

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

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

Í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

FONTES
O
@
P w
339 C
f
6060/64

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

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

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

Recommandé

Recommandé

Contenu connexe

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

Similaire à PORTAIS: LIVRO DE COMPANHIA DO DESIGN EDITORIAL EM WEB E MEIOS DIGITAIS (20)

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