Imagem de fundo UX

Web Série - Como construir um bom Layout [1]

Escrito por Matheus Rocha.

como desenhar um bom layout greenlabsweb

 

Nesta série de artigos, abordaremos conceitos de design voltados para a web e ao fim, você terá uma orientação para seus estudos da criação de belíssimos Layouts de Websites. Note que algumas nuances apresentadas aqui, poderão se repetir para diversos tipos de peças Web, incluindo Instagram, Facebook ou postagens em seu Blog.

 

Introdução ao desenho Web


Conteúdo

Requisitar e organizar o conteúdo que será utilizado para a criação do material. É impossível tirar leite de pedra. Marca, Fotos, Texto(s) institucional(is) são itens básicos para o sucesso de um produto ou campanha


Planejamento

Designar respostas para perguntas como: Para quem? Quando? Onde? ajudam à orientar o planejamento para a direção certa. Defina quantas peças, onde elas serão disponibilizadas, quais os limites técnicos (Tamanhos de altura, largura e peso máximo das imagens). Organize suas métricas (formas de medir) para observar os resultadas na etapa do “rastreamento”


Otimização

Como fator controverso e mais importante, otimize suas peças. Quanto a tamanho e peso, atente-se sempre aos limites estabelecidos e siga-os. Se possível, reduza mais ainda. Isso depende bastante de cada projeto/caso. Existem projetos Web onde a qualidade da imagem e peso, são fatores determinantes, mas em sua grande maioria - não. Lembre-se que em um mundo globalizado, seu Website tem grandes chances de ser visualizado através de um dispositivo-móvel como o celular.


Rastreamento

É necessário monitorar a resposta do público quanto à postagem em seu Blog, Rede social ou Site pessoal. Baseado nos resultados desta etapa é que serão definidas as próximas ações quanto à quesitos técnicos ou ideológicos sobre a próxima peça. Exemplo: Ao receber críticas por determinada cor ou fonte usada, adota-se uma próxima pra a produção da peça sucessiva.

Pesquise

Busque referências de Websites do segmento, se você é iniciante e ainda não sabe nada, comece conhecendo bem as ferramentas do seu Editor de imagem. Procure reproduzir cópias fiéis de sites que se encontram hoje na rede, até aprender sobre as tendências e julgar quais são boas e quais são ruins.

Busque opiniões

Peça um Feedback  sobre seus trabalhos para pessoas que estão próximas à você como amigos ou familiares. A opnião de outras pessoas importa bastante, afinal, não produz-se peças Web para serem vistas por uma só pessoa, mas sim por várias. Lembre-se que o usuário vai interagir e dependendo de seu julgamento, pode ou não voltar à ver a sua peça.

 

“Mãos-a-obra”

  1. Crie um projeto com dimensões 1920x1000 - 72 dpi

  2. Crie um objeto retângulo com 1200px e alinhe ao centro

  3. Habilite a visualização da Régua em seu Editor

  4. Arraste uma linha da Régua até o início do retângulo (atenção para a precisão)

  5. Arraste outra linha da Régua até o final do retângulo (atenção para a precisão)

  6. Apague o retângulo

  7. Salve o arquivo

 

O projeto está criado, com área-útil demarcada e centralizada. Se você ainda não sabe o que é área-útil recomendo a leitura deste artigo. No exemplo do artigo citado, utilizo 990px largura da área-útil. Aqui usamos 1200px devido à compatibilidade com Smartphones e predominância de monitores Widescreen no mercado. No próximo artigo daremos sequência ao desenvolvimento do nosso primeiro Layout. Até a próxima!

 

Tags: UX Flat Design

Deixe sua Mensagem

Artigos de UX

O que é Flat Design?

Leonardo Volpiano

Flat Design é uma tendência recente, que defende interfaces simples e claros, entre outras ca...

VER ARTIGO

Web Série - Como construir um bom Layout [1]

Matheus Rocha

  Nesta série de artigos, abordaremos conceitos de design voltados para a web e ao fim...

VER ARTIGO

Começando com UX - O que é UX?

Matheus Rocha

O que é UX? O termo User Experience foi criado por Donald Norman no início de 1990, quando e...

VER ARTIGO