Manual de design: Crie sites responsivos no grid Bootstrap

18/07/2017 • categoria:Editorial comentários •
Manual de design: Crie sites responsivos no grid Bootstrap

Desenvolver um site deixou de ser apenas para desktop e acabou cada vez mais atingindo diversos tipos de dispositivos, com telas e sistemas operacionais diferentes. Para aumentar a usabilidade das páginas, softwares foram adaptados e regras de internet foram criadas para criar uma uniformidade no desenvolvimento.

Abaixo listamos os principais pontos e por quais caminhos seguir, para criar sites e lojas virtuais cases de sucesso:

Software

A escolha perfeita para o desenvolvimento Web é o Adobe Photoshop, sendo um software que se adaptou muito bem com o mundo da Web e o desenvolvimento para multiplataforma como Desktop, Tablet e Smartphone.

Caso você esteja acostumado com Adobe Illustrator também é possível desenvolver sites neste software, porém o Photoshop torna o trabalho mais fácil devido a facilidade de gerenciamento com as camadas (layers).

Não recomendamos o Corel Draw, porque é uma ferramenta que não possui o suporte adequado para Web sendo exclusivo para o formato offline como folders, panfletos, etc. Principalmente se utilizar computadores Apple com sistema operacional macOS, pois o Corel Draw possui suporte somente ao Windows da Microsoft.

Ferramentas do Photoshop

O Adobe Photoshop CC possui duas ferramentas que podem ajudar no desenvolvimento Web.

O primeiro é o Artboard, através dele você pode criar várias telas em formatos de dispositivos diferentes tudo no mesmo arquivo de forma facilitada.

O segundo é a possibilidade de poder visualizar o site em um dispositivo Mobile ao mesmo tempo que estiver criando no Photoshop, apenas conectando na USB.

Bootstrap 3

Link: http://getbootstrap.com

A melhor forma de explicar o Bootstrap é entender que o Bootstrap é como um carro já pronto, que você pode trocar a cor, bancos e melhorar o motor, porém toda a estrutura do carro já é entregue pronta para você, ou seja, a parte mais complexa já está pronta tendo que seguir o mesmo padrão da estrutura e modificando somente o que desejar.

Em termos técnicos o Bootstrap possui toda a estrutura pronta para fazer sites responsivos adaptados para desktop, tablets e smartphones, mas é possível fazer alterações no design conforme desejar.

GRID – A estrutura do carro

O mais importante no Bootstrap é o Grid, porque é a estrutura que vai permitir o site ser visualizado para desktop, tablets e smartphones. Ao desenvolver uma página para desktop no Photoshop, poderá ser adaptada para tablets e smartphones quando implementado no código, evitando assim de desenvolver a mesma página no Photoshop para diversas plataformas.

1) Container e Colunas

O Grid é constituído por container e colunas:

  • O container possui um tamanho fixo de acordo com o dispositivo que o usuário está acessando o site, por exemplo, se o usuário acessar o site em um monitor grande a largura do container será de 1170px, porém se o usuário acessar de um iPad a largura será de 750px.
  • As colunas são as divisórias dentro do container e não possuem um tamanho fixo, a largura se adapta de acordo com o dispositivo do usuário.

2) Limite de 12 colunas

As colunas dentro do container possuem limite de 12 colunas, ou seja, na largura de uma página é possível adicionar até 12 colunas uma do lado da outra.

Exemplo de grid com 12 colunas

Cada coluna possui um número, que significa o seu espaçamento. No exemplo acima vemos que cada coluna possui o número 1 e uma do lado da outra é igual a 12. Porém podem ser utilizados menos colunas preenchendo a largura total da página, neste caso podem ser utilizados colunas com tamanho 6 + 6, 8 + 4 e assim por diante desde que o total seja 12. Segue exemplos:

Exemplo de grid com 3 colunas que no total o espaçamento é igual a 12

Exemplo de grid com 2 colunas que no total o espaçamento é igual a 12

Exemplo de grid com 2 colunas que no total o espaçamento é igual a 12

Segue abaixo exemplos práticos em sites reais que utilizam Bootstrap para definir as colunas e como o conteúdo é mostrado:

Exemplo de 6 colunas com espaçamento igual a 2 (6 x 2)
                                                           Site: www.udemy.com

Exemplo de 3 colunas com espaçamento igual a 4 (3 x 4)
                                      Site: www.washington.edu

Exemplo de 2 colunas com espaçamento 7 no lado esquerdo e 5 no lado direito (7 + 5) Site: trakt.tv

Exemplo de 2 colunas com espaçamento 8 no lado esquerdo e 4 no lado direito (8 + 4) Site: webtask.io/slack

3) Componentes

O Bootstrap possui diversos componentes prontos que podem ser utilizados no design como botões, alertas, dropdown, formulário, entre outros. Para verificar toda a lista de componentes acesse este link: http://getbootstrap.com/components/.

DESIGN – No Photoshop

O desenvolvimento no Photoshop será somente para o formato desktop. Como informado acima, ao seguir o Grid não é necessário se preocupar com os formatos para tablets e smartphones, porque essa mágica é feita através do código.

Através da tabela abaixo é possível verificar a relação da tela, container e colunas de acordo com o dispositivo que o usuário está acessando. Para o desenvolvimento no Photoshop, utilize as referências do desktop marcado em amarelo:

  • Tela do dispositivo: Mostra o tamanho mínimo de largura que a tela deve possuir para se enquadrar no dispositivo.
  • Container: O tamanho fixo do container de acordo com cada dispositivo.
  • Largura coluna: Largura da coluna dentro do container de acordo com cada dispositivo.
  • Espaço entre colunas: Espaço fixo de 15px para cada lado, porém pode ser alterado conforme preferência do designer.

Faça o download do Grid do Photoshop: http://webmania.me/2u6xXUe

Exemplos

Comentários