1

FERRAMENTAS PARA EDITORAÇÃO GRÁFICA PARTE II

Conteudista

Prof. Esp. GLEIDSON GOUVEA DA SILVA

2

Introdução

Ao passar dos anos nosso cenário digital foi evoluindo cada vez mais rápido, de modo que

quando menos percebemos algo que era tendência dias atrás, hoje já pode ser

ultrapassado e assim precisamos estar sempre atualizados em suas contentas mudanças.

Mas algumas coisas ainda nos guiam de modo tão preciso e funcional que não podemos

deixar para trás, isso desde conceitos, aplicações e regras. Vamos falar sobre Grids,

conhecer a sua importância na hora de desenvolver um layout, saber como funciona e

como se aplica na prática. Para isso precisamos entender cada vez mais os formatos, para

quem estamos criando? Desktop, mobile? Saber para qual plataforma iremos criar é

fundamental.

O que são Grids?

Hoje super comum acabar ouvindo sobre isso em uma construção impressa e digital, mas

afinal como realmente devemos aplicar as grids? Existe alguma regra especifica para

trabalhar? Quais os pontos iniciais que preciso entende e conhecer?

Primeiro o que é Grid? Podemos encontrar como grade ou malha, é um dos elementos

principais do design tanto impresso como digital, sua propostas é ser uma ferramenta que

auxilia no arranjo visual de uma peça, em sua organização, tornando o layout mais coeso,

mais harmônico e estruturado. Grid também pode ser definido como a mescla de vários

elementos que compõem uma peça digital ou impressa que leve informação, conteúdo

com sua composição.

Um grid é uma malha construída com diversos retângulos, usada para ordenar

elementos gráficos. Segundo Derek Birdsall (apud Tondreau).

3

Vamos ver que o Grid possui uma gama de elementos que auxiliam em sua aplicação e

que fazem todo sentido em sua construção final, em muitos casos acabamos fazendo

nossos grids de modo tão automático que muitas das vezes nem percebemos que estamos

criando baseado em grids. Vamos visualizar as imagens abaixo e perceber que ele está

cada vez mais presente em nosso dia-a-dia.

Imagem 01 – elementos do grid

Vimos que o grid vai além do que linhas dividindo nosso layout e marcando posições, ele

possui: Margens - para dar um espaço entre linhas, elementos, blocos, folha. Também

4

guia horizontal e vertical que auxiliam diretamente a construção do layout, ajudando nas

aplicações de textos e elementos visuais. As colunas são as mais comuns de

encontrarmos, quase todo projeto visual encontramos as colunas presentes, desde jornais

e revistas impressos, agora também em sites, portais e revistas digitais elas continuam

mais presentes que nunca. Módulos são comuns encontrarmos também são geralmente

formados pela união da coluna com a guia horizontal. Temos as zonas espaciais que

nada mais são que um determinado grupo de módulos, para receber fotos ou informações

específicas. Marcadores, geralmente trazemos eles como elementos secundários ou

informações que precisam ser exibidas constantemente como cabeçalho e rodapé.

Imagem 02 – aplicação de grid

já podemos ver que grids possui um leque de elementos que facilitam na sua composição

e criação e ambos ajudam cada vez mais na construção de qualquer layout impresso ou

digital. Vamos ver abaixo mais alguns exemplos de como se aplica:

5

Imagem 03 – Aplicação de grids em website.

Como podemos ver no website acima, uma boa aplicação de grids em um website deixa

todo o projeto mais organizado, mais articulado e mais objetivo, muitos acabam não

usando as grids por ficarem com medo de perder a criatividade, mas uma grid bem

aplicada e conhecendo cada elemento sabemos que podemos construir um projeto criativo

e profissional.

Abaixo iremos ver um mix de grids aplicadas para web que deixaram tudo mais claro

referente ao nosso dia-a-dia.

6

Imagem 04 – Grids comuns na web

7

Esses grids são os mais comuns encontrados na web, temos vários sites e portais que

trabalham esses formatos.

Vamos ver uma sequência de atualizações do portal terra, como foram suas

transformações referentes as grids e aplicações de seus elementos como eram os itens de

visualização e organização.

Imagem 05 – layout Terra 1

Vemos aqui uma das primeiras versões do portal terra, sua construção e aplicação

podemos encontrar na imagem 04, com marcadores específicos no topo e sidebar sempre

8

presente em ambos lados, assim era um dos primeiros layouts do Terra e por muito tempo

várias empresas seguiram essa linha.

Imagem 06 – layout Terra 2

Vemos aqui uma evolução em alguns itens como queda da sidebar padrão, vemos uma

alteração no marcador do topo e mudança grande de grids já presente, ajudando muito na

visualização e navegação.

Abaixo teremos o layout do Terra Espanha mas também tivemos a passagem por esse

formato, com a sidebar lateral aplicada em banners e informações essenciais, marcadores

no topo mais leves e uma mudança na aplicação das grids já trazendo inovações e

facilitando demais o uso do portal, tornando já mais acessível, mais claro e objetivo..

9

Imagem 07 - Layout Terra Espanha

10

Para finalizar vemos o layout Terra nos dias de Hoje com uma aplicação mais fluida e grids

mais dinâmicas o site ganhou leveza, várias áreas de destaque, a renovação as grids

tornaram o projeto mais limpo, mais preciso e eficiente.

Imagem 08 – Layout Terra 2015

Certo mas porque todos esses layouts? Podemos ver em cada um sua mudança, que o

portal sofreu durante todo seu tempo, podemos ver como isso facilita a navegação,

interação e busca de conteúdo do usuário, navegando hoje pelo portal Terra, vemos sua

grid bem construída ao ponto de poder analisar o layout atual e ver cada divisão de bloco

em cada área, perceber cada área de destaque, tornando assim a navegação caga vez

mais fácil e objetiva aos usuários.

Usar grids a principio pode ser chato, pode parecer complexo e confuso, mas com o

passar dos tempos vamos ver que cada vez que construir um projeto trabalhando bem

suas grids, vamos obter resultado mais positivo e eficaz, isso também para o mundo

mobile, as grids são fundamentais para uma aplicação responsiva, trabalhando uma boa

11

construção de grid irá facilitar o seu desenvolvimento responsivo sabendo assim como

ficará a informação e o conteúdo quando aplicado em plataformas diferentes, o mundo das

grids é imenso e como saber o melhor jeito de construir e aplicar grids em meu projeto?

Isso vai depender de cada caso, cada projeto demandará uma necessidade especifica e

você é livre para trabalhar seu projeto da melhor maneira, tornando-o mais agradável e

funcional.

Imagem 09 – Grid Bloco Pixels

Para web também uma maneira interessante de montar grids e até muito comum, são por

blocos de pixels horizontais ou verticais que auxiliam bastante para entender a divisão de

gris, entender como funciona cada área separadamente em espaços e derivados e

também auxiliam na visualização, assim em muitos casos é mais fácil de visualizar como e

quais são as possíveis divisão dentro do projeto. O importante de tudo é ser livre para

criar, as grids estão sempre presentes e facilitam nosso projeto.

12

Referências

CARUSONE, Antonio. The grid system. Disponível em: http://www.thegridsystem.org/.

Acesso em 15 de Janeiro de 2015.

SAMARA, Timothy. Elementos do design: guia de estilo gráfico. Tradução Edson

Furmankiewkiewicz – Porto Alegre: Bookman, 2010.

TONDREAU, Beth. Criar Grids: 100 fundamentos de layout.Tradução Luciano Cardinali –

São Paulo: Editora Blucher, 2009.