Os princípios de um bom Layout

Nesse tópico, as definições iniciais e todo aquele planejamento discutido começa a tomar uma forma muito mais próxima do layout final. A partir do wireframe construído no processo de Interface Design é possível transformar as marcações de elementos em funcionalidades com vida.

Estamos falando basicamente em adicionar cor, tipografia, forma, ícones e conteúdo ao esqueleto anterior. Mas lembre-se que este processo é igualmente importante quanto ao anterior e deverá ser guiado pela identidade visual da empresa com o único objetivo de estabelecer um vínculo de credibilidade entre a Marca da sua empresa e a nova plataforma que você está lançando.

Nota: Se até essa etapa sua empresa ainda não possuir uma identidade visual ou guia de marca bem definido é o momento ideal para construir uma marca de impacto no mercado e que possa ser assimilada facilmente por seu público alvo.

Continuando, envolva também a equipe de Marketing e comunicação da sua empresa nesse processo. A qualidade das redações, slogan e artifícios publicitários serão explorados ao máximo para tornar a experiência do usuário mais agradável e autêntica.

Metodologia I2R Digital no desenvolvimento de Layouts e Interfaces

Interface Design Concept (Imagem: I2R Digital)

1. Padrão Visual

Quando os elementos visuais forem tomando forma, pense que eles serão reutilizados em situações semelhantes em outras páginas. Mentalize uma categoria de tênis de corrida em uma loja virtual, provavelmente cada produto possuirá um botão de Comprar e esse mesmo botão será repetido inúmeras vezes nessa página de tênis de corrida e também aparecerá em páginas de outras categorias. Logo, se comprometa em criar um padrão de botão que seja aderente em todas essas situações.

O mesmo vale para para botões de voltar e avançar. Eles têm que seguir uma ordem de exibição iguais todas as vezes que serem exibidos (botões de voltar orientados à esquerda e botões avançar orientado à direita), caso contrário seu o usuário ficará confuso sendo induzido ao erro por falta de padrões.
Essa regrinha de padrões servem também para as cores, títulos, fontes, campos de formulários, etc.

Temos um grande compromisso com o estabelecimento de padrões para que o usuário seja automaticamente educado pelo layout, assim ele saberá como usar os diferentes elementos visuais. É mais um recurso a favor da objetividade e da simplificação de recursos.

2. Autêntico

Esse quesito é importante para reforçar sua marca e sua identidade visual já existente e estabelecer um laço de credibilidade entre o que você está lançando e a reputação da sua empresa.

Imagine você acessando seu Bankline e de repente se depara com cores diferentes, fontes que seu banco não costuma usar e uma linguagem completamente coloquial. Você teria coragem em colocar seus dados e sua senha ali? A resposta será Não.

Então se coloque no lugar do seu cliente nesse sentido. A segurança e credibilidade nos meios digitais vale tanto quanto a própria marca da companhia.

Obs.: Evite também clichês do segmento e faça algo original. O mercado costuma chamar isso de criatividade e inovação.

3. Desejável

Lembra que um pouco acima comentei sobre a identidade visual? Use e abuse das estratégias de marketing e posicionamento de marca que sua empresa já tem para incorporar esse sentimento nos usuários. Crie conteúdos, posicione os elementos de uma forma que tudo fique elegante, clean e harmonioso para ele.

Se o seu público alvo acessar sua aplicação e admirar aquilo que ele vê, certamente ele desejará se tornar o seu cliente.

Nota: O Marketing não é somente um mercado de necessidades, mas também de aspirações. Onde que você quer chegar? De qual tribo quer fazer parte? Você deseja um MacBook ou um PC comum?

4. Comunicação

Este fundamento é como aquele “pretinho básico”, nunca sai de moda e cai bem onde quer que você for. A qualidade da redação e proximidade na interação com seu público é um diferencial na admiração da sua marca.

Se você quer ter clientes defensores em seu negócio desenvolva conteúdos relevantes, simples, e de fácil compreensão para eles. Estude a cultura do seu público e fale a língua deles na hora certa.

Isso significa estar atento a detalhes e analisar todos os aspectos do layout que precisam de textos para existir algum entendimento entre a aplicação e o usuário. Por exemplo:
- Títulos intuitivos;
- Resumos de funcionalidades e páginas;
- Descrição detalhada de produtos e serviços;
- Custos e valores envolvidos;
- Confirmações de ação (caso de compras, ativações, cadastros, etc);
- Mensagens de sucesso e erro amigáveis nas transações (transparência);
- Texto legal claro e simples;
- Jamais faça pegadinhas com letras minúsculas e termos dúbios.

Não brinque com a paciência e senso de humor das pessoas. Se tratando de conteúdo, seja transparente e honesto ao desenvolver qualquer argumentação de negócio em seu layout. Deixe sempre os valores e condições de pagamento evidenciados para a boa assimilação de quem está interessado na sua empresa.

Informações enganosas e redações com gramática comprometidas irão destruir a reputação de qualquer empreendimento na web, por melhor e mais inovador que seja seu visual possa ser.

Do contrário, um bom planejamento de conteúdo de forma clara, simples e transparente contarão pontos com o público e também com mecanismos de buscas orgânicas (SEO) e Adwords do Google.

5. Tipografia

Esse elemento visual é muito negligenciado por inúmeras agências e empresas, porém, acreditamos ser um recurso muito valioso para deixar a leitura geral mais agradável e Call to Actions mais eficazes.
Há mais um ponto de atenção: boas fontes trabalham em seu favor para tornar o que está escrito mais claro e compreensível à qualquer tipo de pessoa, lembre-se que um bom layout é aprovado por uma criança de 6 anos e também pelos nossos avós.

Nota: Planeje com sua TI um tratamento nos campos de formulários, imagens e blocos de textos para permitir o correto funcionamento de softwares de leitura para deficientes visuais (conforme recomendações internacionais do W3C).


Você também pode se interessar:

Parte 1 — Porque empreendedores digitais devem conhecer User Experience?
Parte 2 — Interface Design, a essência dos wireframes.
Parte 3 — Os princípios de um bom Layout.
Parte 4 — Criando layout responsivo com Think Mobile.

Like what you read? Give I2R Digital a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.