Dani Guerrato

Perguntas Frequentes sobre Grids

Por | Comentários: 42

Que grids são o esqueleto do design você provavelmente já sabe. Mas, como não existe nenhum guia definitivo sobre o assunto, muitas perguntas acabam surgindo. A idéia deste artigo é reunir a maior quantidade de informações sobre grids por meio de perguntas e respostas úteis para iniciantes e veteranos. São perguntas teóricas, sugestões de ferramentas para design e desenvolvimento, downloads de arquivos prontos e um passo-a-passo de como montar um grid no Photoshop do jeito que você quiser.

Aviso aos navegantes

Nomear este artigo “tudo o que você precisa saber sobre grids” é tentador, mas seria uma ilusão. Existe muito a ser pesquisado, discutido e analisado a respeito. Tanto que existem livros inteiros sobre o assunto. E com as mudanças na tecnologia, mudam os padrões. E o tempo passa rápido! Há apenas um ano e meio atrás no artigo Design Responsivo II – Grids e Texto fiz uma série de recomendações de ferramentas muito úteis na época que já estão hoje desatualizadas. Eu me sinto na obrigação com vocês de atualizar as informações. Mas mais do que isto acrescentar, modificar e retificar o que é importante. Talvez daqui a um ano e meio seja importante rever e atualizar esta lista. Mas no dia de hoje é isto aqui que vocês precisam saber sobre Grids. :)

O que é um grid?

Um grid é uma malha composta essencialmente por linhas guias, colunas e margens. Esta rede serve para definir as relações de alinhamento, proporção e posicionamento dos elementos de um layout. A intenção do grid é facilitar a diagramação de grandes quantidades de informação e guiar o olhar do leitor.

De onde surgiu o conceito de grids?

Existem registros do uso de grids desde a idade média para diagramação de livros e documentos antes mesmo da invenção dos tipos móveis. Algumas das estruturas criadas naquela época permanecem até hoje como o grid de colunas.  Na foto abaixo temos, na ordem da esquerda para direita, uma incunabula impressa em latim de 1483, ao lado de uma cópia do jornal Edinburgh Evening Courant de 1774 e uma screenshot do aplicativo do The New York Times em um iPad. Séculos separam estas publicações, mas a estrutura do grid permanece a mesma.

grid-colunas

Depois da segunda guerra mundial um grupo de designers europeus influenciado pelos ideias modernistas ajudaram a formalizar e propagar o uso da ferramenta. O grid – levado ao extremo e utilizado de maneiras inusitadas como diagonalmente – acabou sendo um dos ícones do design da Suíca nos anos 50. Um dos principais designers deste estilo foi Josef Müller–Brockmann que influencia designers até hoje.

Josef-muller–brockmann-grid

Por que utilizar um grid?

São muitas as vantagens na criação baseada em grids. Organizar informações é a principal função, mas podemos citar orientação da atenção do leitor através de focos visuais, simplificação do processo de criação, estruturação de hierarquia e agilidade de produção como outros benefícios. Grids aumentam a precisão de um layout e são ótimas ferramentas para criar dinamismo.

O que eu posso fazer com um grid?

Bem, eu poderia listar diversas aplicações práticas, mas sou fã da metalinguagem. Este blog e todo o portfólio da PopUp Design está organizado dentro de um grid. São 14 colunas horizontais utilizadas para diagramar a informação. Mas simplesmente colar o texto neste espaço ficaria meio entediante em um meio tão dinâmico quanto a internet, certo? Por isto é necessário criar contrastes. No caso da PopUp isto acontece pela largura variável dos módulos de conteúdo e diferença nas mais de 20 matizes de cores utilizadas para demarcar os cases.

popup-screenshot

Outro exemplo de grids aplicados a webdesign é o layout do Pinterest, uma rede social que reune conteúdos visuais de diversas origens. O grid utilizado aqui é bem restritivo, com colunas, imagens e blocos de texto sempre do mesmo tamanho. O aparente desalinhamento do eixo horizontal das imagens é o que torna o layout interessante e dinâmico.

pinterest

Grids podem ser úteis para a criação de patterns. Como neste poster criado para a Schweppes Club of Good pelo designer Daniel Niño.

scweppes-club-of-good-taste

Ou até mesmo para reforçar uma identidade visual como na caso da Microsoft que criou um grid multi-plataforma unindo o visual do Windows 8, Windows Phone e Xbox Live.

microsoft

Neste artigo vamos tratar de grids especialmente dentro do contexto de design e desenvolvimento web, mas eles podem (e devem) ser utilizados para qualquer outro tipo de produção gráfica como livros, revistas, cartões de visita, folders, etc.

Mas grids não estão presentes apenas em design. É possível traçar linhas divisórias imaginárias em todo tipo de produto. Grids estão presentes em esportes como grids de largada em corridas de carros, maratonas e jardas de futebol americano. Você pode encontra-los em jogos analógicos como Xadrez ou até mesmo em games como o RPG Dofus ou viciante Candy Crush. Grids estão por toda parte!

Mas isto não vai limitar minha criatividade?

Não. Um grid é uma ferramenta que visa auxiliar o posicionamento dos elementos, mas você não precisa ficar preso a ele o tempo todo ou isto pode tornar o seu layout entediante. É fundamental criar contrastes variando a forma, estrutura, peso, tamanho e posicionamento dos elementos. Por exemplo, construir um layout composto de divs do mesmo tamanho o tempo todo trás um clima ordenado, porém sem criatividade. Variar o tamanho desta estrutura quebra a monotonia e dá vida ao design. Alias, quebrar o grid pode ter a mesma função de uma nota dissonante em uma melodia harmônica. Pequenos momentos de caos controlado podem valorizar o seu layout.

Note como neste poster criado pela Riot o ângulo de leitura muda diversas vezes fazendo o texto e as imagens girarem. O ritmo é dado pelo tamanho das imagens, grid e paleta de cores que permanece o mesmo. Mas a variação do ângulo é o que torna a peça interessante.

mindthat-baster-klijs-boon

Nesta outra peça da mesma agência o que quebra a monotonia do grid é a presença de um quadrado branco sobrepondo a organização dos outros elementos.

47548517859

Mas para saber como e onde quebrar um grid é necessário saber como utilizar um.

Quais são as partes de um grid?

Linhas Guia

linhas-guia

São linhas “imaginárias” utilizadas para estruturar o layout. Estas linhas vão demarcar o espaço ocupado pelas colunas, margens e módulos.

Colunas

colunas

As colunas são as estruturas verticais que delimitam o espaço a ser ocupado pelo conteúdo. Os elementos como texto, por exemplo, devem ocupar o espaço de uma ou mais colunas. Elas podem ser simétricas (mesma largura) ou assimétricas (larguras diferentes).

Margens

margens

É o espaço entre a borda externa da página e o conteúdo e/ou entre as colunas compondo o espaço negativo do grid.

Módulos

modulos

Módulos são caixas de informação que podem ser dispostos de maneira simétrica ou assimétrica. Eles demarcam o espaço a ser ocupado por imagens, vídeos, etc.

Linhas base

linhadebase

É um conjunto de linhas paralelas dispostas horizontalmente utilizadas principalmente para guiar a tipografia. Para isto é preciso posicionar o texto de modo que ele fique “sentado” sobre as guias. As linhas de base servem para compor o ritmo vertical de um layout e alinhar os elementos na transversal. É importante cuidar para que o espaço entre as linhas fique harmônico e o texto não colida.

E como eu crio um grid?

Defina o formato (tamanho da página), no caso de webdesign pense no tamanho máximo do seu layout.

A segunda etapa é um inventário de conteúdo. Qual é o tipo de material a ser diagramado? Textos, fotos, vídeos? As características de cada elemento podem ter um grande impacto nas escolhas do grid. De nada adianta, por exemplo, criar um módulo enorme destinado a fotos se as imagens do seu projeto são todas de baixa resolução.

A partir do conteúdo é possível definir qual é a melhor maneira de organizar o layout utilizando linhas horizontais, verticais, diagonais, arcos e módulos de conteúdo. Depois da criação visual você pode transferir este conteúdo para o CSS livremente ou através de um sistema de grid de CSS fixo ou fluído.

É recomendável utilizar o 960gs?

Esta é uma questão pessoal. Existem muitas pessoas que aprovam e utilizam este sistema. Minha intenção não é desmerecer ninguém mas, porém, todavia, o 960gs não é uma boa ferramenta para os dias de hoje. Vou explicar em 5 razões o por que disto.

1. Formato ultrapassado.

O 960gs foi criado em para um momento em que a resolução mais popular era 1024x768px. Agora vamos considerar o ano de 2013 e as 10 resoluções de tela mais populares nos últimos 3 meses segundo o site Statcounter.

statcounter

Por estas estatísticas podemos perceber que 1024x768px corresponde a apenas 13,28% dos monitores em uso. A resolução mais utilizada é a 1366x768px correspondendo a 25,03% das telas. Mas, somando todas as resoluções maiores, temos quase 80% de usuários em monitores widescreen com pelo menos 1280px de largura. Podemos ver, não pela opinião de uma pessoa, mas por números concretos que 1024px já não é mais a resolução padrão a muito tempo e a linha do gráfico continua caindo…

2. Layout engessado.

Na minha visão a ferramenta tem que se ajustar a você e não ao contrário. O 960gs fica preso, bem, a 960 pixels. E se você quiser criar um site com 1140 ou até mesmo 1600 pixels? O 960gs permanece engessado em vários outros aspectos. É impossível, por exemplo, modificar a quantidade e largura das colunas, largura das margens, etc sem praticamente refazer o grid. Existem apenas algumas variações de templates e você precisa se contentar com isto…

3. Pouco espaço negativo.

O tema padrão do 960gs (que na verdade ocupa 940pixels) possui 12 colunas de 60 pixels e margens de 20 pixels. Considerando que o tamanho base (e portanto ideal) para texto da maior parte dos browsers é 16 pixels estas margens são muito pequenas. O resultado não é muito atraente. Basta ver os exemplos de design do site oficial do 960gs para perceber que a maioria tem um visual datado…

4. Semântica.

Aqui na PopUp estamos sempre preocupados com semântica e webstandarts então eu não poderia deixar de falar deste aspecto. Inserir classes do tipo grid_1, container_1, etc no meio do html (embora fosse a única solução em um passado não muito distante) polui o código.

Segue um exemplo retirado do site oficial da ferramenta para vocês terem uma idéia do horror:

5. Design Responsivo.

O 960gs não é fluido. Existe um grande aviso em amarelo no topo da página alertando a respeito disto. Ou seja, se você quiser trabalhar com design responsivo pode deletar o link dos seus bookmarks. Existem alguns sucessores que fazem as adaptações necessárias (o site oficial do 960gs recomenda o Unsemantic), mas eles carregam todos os outros problemas do original. Acho que o nome deste último já diz tudo que eu penso sobre ele. Para quem insiste em utilizar o sistema original dá também para fazer estripulias como incluir o Adapt.gs que utiliza JavaScript para servir diversos arquivos CSS de acordo com o tamanho do viewport… mas… *suspiro* não faça isto, cara. É basicamente penalizar o seu usuário por que você ficou com mimimi e não quis trocar de grid.

O que são grids semânticos?

São grids que, através de pré-processadores de CSS calculam matematicamente o valor das colunas em pixels e transformam estes valores em porcentagens. Estes grids ainda utilizam mixins e variáveis para definir através do próprio CSS a largura dos elementos, isto elimina a necessidade de inserir no html classes não-semanticas utilizadas em sistemas fixos como grid_1, etc.

Existem diversos sistemas de grids semânticos. Aqui estão alguns exemplos de ferramentas. Escolha uma de acordo com o seu pré-processador favorito.

Semantic.gs

semantic

Pré-processador: LESS, SASS ou Stylus
Site oficial
Github

O Semantic.gs foi um dos pioneiros no conceito de grid semânticos e é super simples de utilizar. Eu escrevi um passo-a-passo sobre o Semanti.gs para o Tableless no artigo Grids Semânticos com LESS. Entre as funções mais avançadas está a possibilidade de criar colunas aninhadas e empurrar / puxar elementos, mas a maior vantagem é a possibilidade de trabalhar com LESS, SASS ou Stylus.

Profound

profound

O profound faz tudo o que o Sematic.gs faz e mais. Ele é super-flexível. É possível criar grids fixos, responsivos, fluídos, múltiplos, etc. Uma das funções interessantes é a possibilidade de utilizar margens negativas para calcular colunas com maior precisão.

Pré-processador: SASS
Site oficial
Github

Mueller Grid System

mueller

Pré-processador: Compass / SASS
Site oficial
Github

Mueller é um grid modular útil para design responsivo, adaptável ou até mesmo para layouts convencionais. Ele possui diversas funções interessantes como a possibilidade de lidar com frações de colunas, utilizar diversos grids diferentes em um mesmo layout através de media queries e integração com a biblioteca Masonry.

Qual é o tamanho ideal para um grid de webdesign?

Depende do seu projeto. Para facilitar eu recomendaria pensar em um número de colunas que seja divisível por 2, 3 e 4. Falo isto por que, uma técnica comum em design responsivo é dobrar o grid, ou seja, pegar o conteúdo que estava arranjado horizontalmente e alinha-lo verticalmente. Com um número primo, pro exemplo, isto seria impossível por que sempre ficaria um “dente quebrado”.

Considerando que, como já comentado neste artigo, a maior parte dos monitores desktop são widescreen e o menor deles tem algo por volta 1280px uma boa medida para desktops é 1200px. Mas lembre-se de adaptar estes valores para o design responsivo. 960px funciona bem para tablets e algo por volta de 480px é o ideal para smartphones. Se você ainda tem dúvidas de como adaptar o layout em diversos grids dê uma olhada no meu artigo Design Responsivo na prática: do rascunho ao digital.

Como eu construo um grid no Photoshop?

Pegue lápis e papel e desenhe um wireframe. Agora pense no tamanho que ele deve ocupar, na quantidade de colunas e margens. Como o nosso foco é a web, para o nosso exemplo vamos fazer um grid de 1200 pixels. Esta medida é bacana pois funciona bem em monitores widescreen. Mas com as dicas citadas aqui você pode construir um grid de qualquer largura!

Abra um novo arquivo. Lembre-se de escolher um tamanho um pouco maior do que o seu grid. É sempre bom ter um espaço negativo e desta forma você consegue visualizar o seu layout em monitores maiores. Vou simular a resolução mais popular: 1366×768 pixels.

tuto-01

Lembre-se de habilitar a opção mostrar réguas (command+r ou contr+r) e mostrar guias (command+; ou contr+;) .

Bem, o nosso wrap será centralizado e terá a largura máxima de 1200 pixels. Como o arquivo tem 1366 precisamos fazer uma continha rápida para descobrir as margens laterais do arquivo. É só seguir esta formulinha:

(Tamanho do arquivo – Tamanho do Wrap) : 2 = margem lateral
(1366 – 1200) : 2 =
(166 : 2) = 83

Dica: Não está afim de fazer conta? Faça um retângulo de 1200 pixels e centralize ele em relação ao background.

Agora é só arrastar duas guias para marcar o inicio do grid. Para facilitar o trabalho eu recomendo baixar a extenção GuideGuide.

guideguide

Abra o GuideGuide no menu Janelas, extenções, GuideGuide. Agora basta colocar os valores 83 px na opções left margin e right margin e apertar o botãozinho azul que ele faz o trabalho sujo pra você.

tuto-02

Lembre-se de especificar uma unidade de medida já que o GuideGuide pode trabalhar com pixels, centimetros ou porcentagens.

Okay, está é o tamanho ocupado pelo nosso wrap. Vamos criar o grid em si. Eu quero para o meu grid 12 colunas de 60 pixels e margens de 40 pixels de largura. O padrão do GuideGuide é começar o arquivo com a coluna contando a partir da primeira margem. Já especificamos 83 pixels que seriam o espaço negativo do monitor mas, além disso, quero colocar uma margem de 20 pixels no meu container para garantir que sempre haverá uma margem nas resoluções menores. Para isto basta colocar o valor da próxima margem separado por virgula.

Left margin: 83px, 20px
Right margin: 83px, 20px

Agora é só preencher o restante das informações:
Number of columns: 12
Column width: 60 px
Column gutter: 40 px

Aperte o botão azul GG da vitória e pronto! Você tem o seu próprio grid personalizado. O plugin ainda permite que você salve os arquivos em sets para poupar tempo no futuro.

tuto-03

Como uma última etapa você pode opcionalmente fazer retângulos para marcar os espaços das colunas. Isto facilita na hora de alinhar os elementos de um layout. Agora é só criar os módulos do seu wireframe.

tuto-04

Como construir as linhas base?

Para criar as linhas de base ou grid vertical você pode utilizar, novamente, o plugin de Photoshop GuideGuide. Basta preencher o item row height com a altura base entrelinha. Este é um exemplo com um grid vertical de 24 pixels.

tuto-05

Depois basta posicionar textos, imagens, vídeos, menus e outros elementos da ui lembrando de utilizar sempre que possível valores proporcionais ao número base e alinhar os elementos na transversal. Esta é uma boa prática que garante o ritmo de leitura.

tuto-08

Você pode baixar o arquivo psd do grid aqui.

Onde eu posso encontrar outros arquivos com grids prontos?

Bootstrap responsive grid PSD

Bootstrap-responsive-grid-PSD

Template: Bootstrap responsive grid PSD 
Formato: Photoshop
Grid: 1280px (12 colunas)
Colunas: 70px
Margens: 30px
Extras: Versões do grid para Tablet (1024px) e Mobile (320px)
Baseado no sistema: Bootstrap

960px grid templates

960px-grid-templates

Template: 960px grid templates
Formato: Photoshop e Fireworks
Grid: 960px (16 colunas)
Colunas: 10px
Margens: 20px
Extras: Inclui variações de 3 a 16 colunas.
Baseado no sistema: 960gs

Frameless

frameless

Template: Frameless
Formato: Photoshop
Grid: 2560px
Colunas: 48px
Margens: 24px
Extras: Inclui máscaras para as principais resoluções de tela.
Baseado no sistema: Frameless

A better Photoshop grid for responsive web design

A-better-Photoshop-grid-for-responsive-web-design

Template: A better Photoshop grid for responsive web design
Formato: Photoshop
Grid: 1000px (6 colunas)
Colunas: 150px
Margens: 20px
Extras: Criado para facilitar a conversão de valores de pixel para porcentagem no design responsivo. Possui uma demo online.

Responsive Grids

Responsive-Grids

Template: Responsive Grids
Formato: Photoshop
Grid: 960px (24 colunas)
Colunas: 30px
Margens: 10px
Extras: Possui versões para tablets ( 640px) e smartphones (320px). O grid acompanha um mock-up de janela de browser.

Mobile to Desktop

Mobile-to-Desktop

Template: Mobile to desktop
Formato: Photoshop
Grid: 1170 (12 colunas)
Colunas: 70px
Margens: 30px
Extras: Possui versões para monitores menores (940px), tablets (724px) e smartphones (300px).
Baseado no sistema: Bootstrap e Foundation

Responsive Grid PSD

Responsive-Grid-PSD

Template: Responsive Grid PSD
Formato: Photoshop
Grid: 960px (16 colunas)
Colunas: 40px
Margens: 20px
Extras: Possui versões para tablets (768px) e smartphones (320px) lado a lado em um arquivo único para facilitar a criação do layout.

Photoshop Grids

Photoshop-Grids

Template: Photoshop Grids
Formato: Photoshop
Grid: 1144px (12 colunas)
Colunas: 65px
Margens: 28px
Extras: Possui versões para tablets em modo paisagem (1024px), tablet em modo retrato (768px), smartphone (640px), e-mail (640px), desktop (972px) e IAB (1000px).

Round Bonus

Modular Grid App

Modular-Grid-App

O Modular Grid  é um gerador online que possibilita a criação de grids em tempo real. Basta preencher as informações e realizar o download do arquivo em formato png ou pat. Existe também a opção de baixar um plugin para gerar as guias diretamente do Photoshop.

Gridpak

Gridpak

O Gridpak é outro gerador. É possível criar um grid personalizado online e baixar um kit contendo arquivos PNG, CSS, LESS, SCSS, JavaScript e documentação.

Golden Ratio Grid

Golden-Ratio-Grid

O Golden Ratio é um grid para iPhone 4 & 5 baseado nas proporção áurea.

Ícone iOS7

ios7icons

Justamente com o iOS7 a Apple criou um novo grid universal para padronizar o design dos ícones dos aplicativos nativos. Já existem alguns templates criados especialmente para designers que queiram seguir o conceito.

iOS 7 Icon Template (Photoshop)
iOS Icons Guidelines (Photoshop)
Template for iOS 7 App Icons (Photoshop)
Template for iOS 7 App Icons FW (Fireworks)
IOS7 App Icon Grid (EPS)
Free App Icon Templates (Wireframe para desenho em PDF)

Por enquanto é só, pessoal!

A intenção é revisar este post para incluir novas dicas de ferramentas e textos de referências. Se sua dúvida não estivar listada escreva aqui nos comentários que a gente faz o possível para responder. Se sua pergunta for interessante ela poderá ser incluída nas próximas edições deste FAQ. Até a próxima! :)

Tags: > , , , ,

Dani Guerrato

Dani Guerrato

Uma geek que adora Design, Literatura Fantástica, Games de RPG e mochaccinos de chocolate branco - não exatamente nesta ordem. É designer, desenvolvedora front-end, palestrante e co-fundadora da PopUp. Gosta de coisas estranhas como cheiro de livro e bandas de heavy metal que ninguém ouviu falar.

Você pode achar a Dani por aqui:
Facebook - Twitter - - Instagram

  • Amadeus

    Artigo sensacional, meus parabéns!

  • Kiliano Lopes

    Excelente =] Estava usando a 978, com suas variações para monitores maiores. Mas sempre fica algum probleminha com fluidez para dispositivos com telas menores. Vou salvar o link e dar uma estudada com calma.

  • FraterOsiris

    Muito bom o artigo… Eu geralmente uso o “Responsive Grid System”. Muito leve e cumpre com o que promete. E o melhor. Sem aquelas “frescuras” do twitter bootstrap (botões e bla bla bla).

  • Diego Pereira

    Muito bom o artigo! Sempre utilizei até agora o 960 grid system, mas realmente os tempos estão mudando. To começando um blog sobre design e desenvolvimento web também, quem quiser dar uma olhada o endereço é http://www.dupstudio.com.

  • Fernando

    “Por enquanto é só”.

    Nossa, maravilhoso artigo. É uma pena a academia ser tão lenta e engessada. Nunca vi nem verei um assunto discutido dessa forma em uma aula de graduação.

    Parabéns.

  • Neto

    Dani, parabens por mais este artigo.
    Sempre acabo voltando pra esse site pra ver as novidades e o indico para varios amigos.

    Lendo esse artigo sobre grid systems, acabei ficando mais confuso ainda.

    Comprei um livro que vc indicou RESPONSIVE WEB DESIGN por Ethan Marcotte.

    O livro realmente e’ muito bom mas em nenhum momento cita esses grid systems.
    Vc desenvolve o layout que deseja e só define os valores em % pra ele se tornar responsivo, juntamente com as media queries.

    Mas em sua opiniao, mesmo que eu tenha mais trabalho, o que seria melhor ?
    Um design proprio ou os grids ?

    Abracos

    • Oi Neto!
      Na minha opinião, quanto ao aspecto de design / criação de layouts em software gráfico, a utilidade do grid é inquestionável. Já em termos de CSS a escolha é sua. Quanto ao que é melhor isto é muito relativo. Depende do layout do seu projeto, disponibilidade de tempo, gosto pessoal, etc Os grids matemáticos são mais precisos e rápidos, porém seu código pode ficar um pouco mais pesado por conta de redundancias. Desenvolver tudo sem contar com a ajuda desta ferramenta demora mais e é menos preciso, mas o código fica mais limpo. Na dúvida, estudo os dois! Conhecimento nunca é demais. :) Mas mesmo que você utilize o sistema de grid para acelerar o desenvolvimento você ainda vai precisar definir a largura de outros elementos utilizando porcentagem. Por isto é importante saber a formulinha objeto : contexto = resultado. A base da construção destes sistemas são justamente valores em porcentagem. A diferença é que você atribui larguras pré-definidas baseada no número de colunas ocupadas pelos elementos do layout para agilizar o processo. Supondo um grid de 1000px e 10 colunas, por exemplo, 1 coluna = 10%, 2 colunas = 20%, etc.

      O Ethan Marcotte não cita estes sistemas no livro dele por dois motivos: 1. Eles ainda não haviam sido inventados. Na época da publicação deste livro só existiam sistemas de grid não-semânticos. 2. Simplesmente não é o foco do livro já que é uma técnica que, em tese, depende do conhecimento prévio dos assuntos abordados por ele (media queries, objetos fluídos, etc. )

      Um abraço!

  • Cândido Souza

    Obrigado!!!

  • Rodrigo Goncalves

    Excelente Dani, curto muito seus artigos, simples, claro e didático, atende desde quem está começando até desenvolvedores experientes.

  • Itarcio Lima

    Genial! Muito obrigado por tão detalhado artigo.

  • Marcos Lourenço

    Que bandas de heavy metal Dani? (curioooso) kkkkkk Ótimo artigo.

    • Eu gosto de metal progressivo, sinfônico, melódico, avant-garde ou experimental. Coisas como Diablo Swing Orquestra, Akphaezya, Unexpect, Aina, Mägo de Oz, Demons & Wizards, Angeldark, The Dear Hunter, Black veil brides…

      Embora a minha banda favorita de todos os tempos seja Coheed & Cambria! :)

      • Marcos Lourenço

        Interessante. Mas acabei de constatar que conheço beeeeem pouco de heavy metal, kkkkkkkk. Curto Gammaray, Helloween, Iron Savior, Edguy, dentre outras. Mas como aqui não é um blog de música, aceita meu convite no face e continuamos a conversa. Abs.

      • Leandro Ruel

        caramba, so vim pra comentar que Coheed & Cambria é dahora, ja ouvia desde os tempos da internet discada, quando baixava MP3 pelo site do CNET Download.com

  • Itarcio Lima

    Dani, tenho um layout pra fazer aqui na agência, e por razões contratuais não será responsivo. Estou em dúvida de qual grid utilizar, se Bootstrap (1170px) ou 960grid (940px). Nesse caso, o que você faria?

    • Oi Itarcio!
      Bem, esta é uma decisão pessoal.
      Considerando que a maior parte dos monitores hoje em dia é widescreen o grid do Bootstrap aproveita melhor o espaço. Para ser sincera eu não gosto muito do 960gs por N motivos, mas talvez seja uma escolha mais acertada para design não-responsivo já que esta largura se encaixaria também para tablets em modo paisagem.
      Um abraço!

      • Itarcio Lima

        Pois é, por esses dois motivos estou em dúvida. Mas acabei começando o layout com o grid do Bootstrap, e acho que vou ficar com ele. Vou ver com o desenvolvedor a possibilidade de fazer um que redimensione só para monitores menores e tablets que é mais simples do que para celular (já mobile vai ficar faltando…).
        Obrigado ;)

  • Allan Alexandre

    Excelente Dani, você como sempre nos surpreendendo com ótimos artigos!

  • Tamiris

    Parabéns pelo Artigo Dani!

  • Fernando Cruz

    Muito bom o artigo, esclareceu muitas dúvidas…
    Parabéns, na verdade muito obrigado…

  • Andrea Mendonça

    Really like your articles Dani! And to see our biggest Festival (Olma) on your web, I like even more! :-)

  • Roger Albino

    Gostei do Post! Muito de mais! Parabéns!
    Ainda estou brigando com as grids. Mas seu post me ajudou muito na minha caminhada.
    Obrigado. :)

  • Junior Gracchia

    Muito bom, mas clicar nesses links e abrirem na mesma pagina eh um saco, coloca ai o target=”_blank” nesses , pls?

  • Virginia Almeida

    Seria muito bom se tivéssemos uma aula dinâmica assim na Faculdade. Parabéns!!!!

  • Jefferson

    Ótimo artigo Dani, parabéns!

  • Olá Dani

    Estou agora começando com a construção de grids e ainda tenho muitas dúvidas, depois de fazer o grid no potoshop temos que passar esse layout na unha para css e thml, ou existe forma de tal ser feito automaticamente. Comecei agora utilizar o guideguide.

    Outra dúvida acho que a Dani já explicou isso algures, é como calcular com valores proporcionais colunas duma grid e o espaço entre elas, (as colunas pequeninas), ou isso é feito de acordo com cada projeto?

    Muito bons seus projetos, citei vosso no meu projeto de dissertação, onde projetei uma pequena aplicação para mobile

    http://silviomdias.pt/

  • marcelo alves

    parabéns pelo blog, você podia habilitar os feeds por e-mail para facilitar

  • mariano barbosa

    Discordo quando fala que o grid 960 esta desatualizado porque a resolução mais usada hoje é: A é a 1366x768px correspondendo a 25,03% das telas , e quando o grid 960 foi criado a resolução mais usada era: 1024x768px. quanto a estas estatisticas nada contra.
    na verdade os monitores realmente aumentaram e cairam na preferência.
    Mas o barato do grid 960 é que você faz o seu site na largura que quizer, você é quem manda, você é quem esta no controle. inclusive você entra no site oficial do grid, no criador do template e especifica a largura que quizer, e ele te dar o css pronto para customizar a seu gosto. não sou nenhum especialista em grid. mas portanto precisa se informar melhor.

    quanto a discusão parabens!

    mariano barbosa

    • Oi Mariano,

      Estou devendo uma atualização a este post. Desde a publicação (em 2013) o 960gs foi atualizado e recebeu algumas funções novas que não tinham na época (como o gerador de templates que você comentou). Existem ainda algumas versões melhoradas do sistema no GitHub, feitas independentemente por membros da comunidade que acabam ficando melhores que o original. Mas isto não basta para esconder outros defeitos da plataforma como, por exemplo, o html não semântico ou a falta de flexibilidade. Sistemas de grids semânticos que utilizam pré-processadores como SASS e LESS, por exemplo, permitem gerar grids matematicamente através de frações, aninhamento de grids, são responsivos e, ainda por cima, possuem um código semântico. Na minha opinião isto ultrapassa de longe usar um código pré-formatado criado em 2009. Mas esta é apenas a minha opinião. Você (e todo mundo) pode ficar livre para usar a ferramenta que quiser. ;)

      Abraço!

      • mariano barbosa

        oi Dani tudo bem?

        esta certo, já sobre o sass e less não conhecia vou pesquisar, se souber o site do desenvolvedor me manda ok.

        abraço

        att.
        Mariano barbosa

        Em 20 de abril de 2015 12:56, Disqus escreveu:

  • Thaís

    Ótimo post, super esclarecedor! Parabéns!

  • Luiz Campos

    Oi dani.

    Se eu quiser começar pelo mobile (320px), terei que usar um grid com o mesmo número de colunas de resoluções maiores, ou seja, o número de colunas é sempre o mesmo o que muda é só a resolução? Ou as colunas se multiplicam junto com a resolução?

    Desde já muito obrigado e parabéns pelo post.

    • Oi Luiz, tudo certo, cara?

      Então… existem diversas opções para você fazer. Não tem um certo ou errado. Recomendo que você converse com o seu desenvolvedor para pensar.

      Aqui na PopUp nós trabalhamos com um grid modular, ou seja, nós variamos a quantidade de colunas para o Mobile e para o Desktop. E, a quantidade de colunas, varia de projeto para projeto. Normalmente, temos 3 colunas no mobile e até 12 no desktop. Mas, já teve casos de usarmos 2 no mobile e 16 no desktop. Enfim… varia do projeto!

      O que ajuda muito é que o sistema de grid que usamos no HTML permite fazer isso. Ele está em um framework interno desenvolvido para as nossas necessidades. Mas, existem opções de grids que são mais fixos, que não permitem variação. Neste caso, você terá que usar a mesma quantidade de colunas em todos os dispositivos.

      Espero ter ajudado! ;)

      • Luiz Campos

        Vlw pela atenção Leandro.

        Vocês tem algo publicado sobre esse ou outro “framework”. Gostaria de aprender como se faz na unha mesmo, sem bootstrap etc. Nada contra, mas gosto ser saber como tudo funciona as coisas por baixo dos panos rsrsrs.

        • Oi Luis, tudo certo?

          Então, cara… eu não gosto do Bootstrap. A ideia do “Last Cookie” (nosso querido framework) foi criar algo super modular e fácil de adaptar para cada cliente, de maneira semântica e lógica, sem poluir o código ou o CSS. Fizemos baseados em Atomic Design há 1 ano e meio atrás.

          A questão é que, por causa de algumas confidencialidades, não podemos divulgar… ainda! Estamos estudando a possibilidade de tornar isso público. E, quando acontecer, a gente fala sobre isso aqui! ;)

  • João Neto

    Que post maravilhoso, parabéns, seguidor agora!!

  • Janaina

    Oi Dani, ótimo artigo!! Parabéns!
    Mas fiquei com uma dúvida no design para aplicativos nativos (IOS, Android etc..) usa-se o grid também?
    Como ficaria o grid de acordo com as variações das dimensões de cada aparelho?
    Já escreveu algum artigo sobre o assunto?

Postamos coisas legais aqui


Google

Adicione no GOOGLE+

Instagram

Siga nosso perfil no INSTAGRAM

Quer utilizar o conteúdo do BlogUp?

Gostamos de compartilhar conhecimento por isto os textos sa seção Blog são licenciado sob Creative Commons com as condições: Atribuição - Não Comercial - CompartilhaIgual.

Em português claro, você pode reproduzir este artigo se cumprir TODOS os requisitos:
1. Ninguém esteja lucrando nada em função disto.
2. Exista crédito para a PopUp Design e o autor do post em um local claro com link para o conteúdo original.
3. O material derivado seja distribuido da mesma maneira.

Obs 1. Leia a licença completa para entender todos os termos.
Obs 2. Se o seu site tiver qualquer tipo de anúncio, como AdSence, por exemplo, isto já é considerado fim comercial e portanto você não pode reproduzir o texto.
Obs 3. Se você gostaria de utilizar este material sob outros termos e/ou possui dúvidas envie um e-mail contato@popupdesign.com.br e requisite uma autorização.