Desde muitos espaços em branco e ótimas imagens até funcionalidade de pesquisa e frases atrativas, esses elementos comuns são o que as pessoas esperam quando se trata de usar um site com facilidade.

Separei dez elementos que devem ser priorizados em um site e dicas sobre como usar cada um deles em seu site.

1. Espaço

O espaço é uma das ferramentas de design mais importantes porque dita tudo – desde o fluxo até a legibilidade. Diversos sites apresentam espaçamentos que não víamos na web antes. Margens grandes formando áreas de respiro ao redor dos textos, maior espaçamento entre linhas de texto e uso geral de espaço aberto.

A consistência no espaçamento também é bem importante. Elementos semelhantes devem incluir espaçamentos semelhantes. A quantidade de espaço entre as linhas em um parágrafo deve ser a mesma, assim como a quantidade de espaço ao redor das imagens.

Temos ainda o ponto focal. Uma imagem ou pedaço de texto cercado por um espaço em branco parecerá maior e mais importante do que aquele que está amontoado em um local menor ou mais apertado no layout.

Vale ressaltar que o espaço nem sempre é branco. Refere-se à falta de elementos, podendo ser igualmente uma cor de fundo ou uma textura.

Como usar: comece com elementos-chave como menus de navegação, por exemplo. Certifique-se de que os elementos estejam organizados de forma que inclua espaçamento definido entre os elementos. Isso fará com que cada botão ou palavra se destaque mais por si só.

2. Navegação simples

A navegação deve ser fácil de identificar e de usar. Também é importante manter os menus de navegação no mínimo para não sobrecarregar os usuários. Dependendo do tipo de site, cinco a oito itens de navegação no menu são suficientes.

Há algumas ferramentas que ajudam os usuários a navegar por um site. Sites com rolagem parallax, por exemplo, geralmente tornam o site mais amigável. Quanto mais fácil for para as pessoas usarem e navegarem em seu site, maior será a probabilidade de elas interagirem com ele.

Como usar: lembre-se que os usuários desejam algumas coisas importantes da navegação: saber onde estão no site, ter uma maneira de voltar para Home, além de acessar qualquer subpágina sem se sentir perdido.

3. Sobre nós

É especialmente importante para uma pequena empresa ou proprietário de site informar aos usuários quem eles são. (Isso é menos importante para grandes empresas conhecidas, embora ainda seja uma prática comum.)

A página “Sobre nós” deve informar aos usuários quem você é e o que faz. Ele pode apresentar a filosofia ou objetivos da empresa ou até como o site surgiu. Esta página também pode ser o local para depoimentos de clientes ou usuários e histórias de sucesso. Também pode servir como porta de entrada para páginas relacionadas ou até mesmo perfis de redes sociais.

O único problema que costuma acontecer com as páginas “Sobre nós” é que elas ficam longas e prolixas. Mantenha a página simples; forneça aos usuários informações suficientes para que fiquem interessados, mas não entediados. E lembre-se de manter o design interessante.

Como usar: use a página Sobre nós para dar um pouco de personalidade à sua marca. Considere incluir fotos de sua equipe e uma breve biografia da empresa.

4. Informações de contato

As informações de contato geralmente aparecem de duas maneiras – no cabeçalho/navegação principal ou como uma página “Fale conosco” com um formulário ou informações expandidas. Qualquer uma das opções pode funcionar bem, dependendo do design do seu site.

A chave é torná-lo altamente visível. Ter informações de contato, como número de telefone, endereço físico ou formulário para entrar em contato com o proprietário do site, adiciona legitimidade ao seu site e ao seu negócio. Pode ser frustrante para os usuários quererem encontrar você e as informações não estarem claramente visíveis.

Como usar: adicione informações de contato a todos os cabeçalhos e/ou rodapés estáticos. Se você tiver um endereço comercial físico, inclua informações de localização. Considere um formulário de contato para que os usuários possam enviar e-mails diretamente do site.

5. Call to Action (ou Inscrição)

Na maioria dos casos, um site é a porta de entrada para uma ação – fazer uma venda, fornecer informações e coletar informações de contato. Para garantir esta ação, os apelos à ação precisam ser óbvios e fortes.

Primeiro, determine o que seu site deve fazer. Em seguida, projete-o de forma que a ação seja óbvia e leve os usuários a ela. Técnicas envolvendo teoria das cores, contraste e espaço podem ajudar a levar os usuários aos botões “certos”.

Um formulário de inscrição também pode ser um ótimo atrativo. Se esse for o seu objetivo, coloque o formulário em um local privilegiado e destaque-o. Torne o formulário simples e rápido de preencher. Mantenha o site sempre dinâmico.

Como usar: torne as frases de chamariz óbvias. O posicionamento deve ser em uma parte bem visível da página e próximo ao item ao qual se refere. Os botões devem ser de uma cor contrastante e dizer exatamente o que a pessoa deve fazer: compre agora, cadastre-se, baixe, envie etc.

6. Pesquisa

Essa ferramenta é vital para usuários recorrentes. Projete a caixa de maneira discreta, mas fácil de usar. Certifique-se de que a caixa seja grande o suficiente para digitar os termos do seu site. Se você usar um ícone para pesquisa, não há necessidade de inventar algo novo; use a lupa padrão.

Como usar: crie uma caixa simples que fique no topo do seu site para pesquisa. O canto superior direito é o local mais popular, o uso desse espaço é esperado e fácil de ser encontrado pelos usuários.

7. Rodapé Informativo

Um rodapé é a forma como você pode se conectar ao seu público com uma riqueza de informações sem atrapalhar o design. Como o rodapé está na parte inferior da página, é um local lógico para um pequeno mapa do site, informações da empresa ou de contato, links e contexto do seu site.

Torne o rodapé útil e simples. Ele deve ser projetado para combinar com o seu site, mas pode ter uma aparência muito mais minimalista. Facilite o uso.

Como usar: alguns dos melhores rodapés combinam muitos dos elementos acima. O rodapé costuma ser uma repetição de elementos encontrados em outros lugares (como adicionar pesquisa ao topo da página na navegação principal e novamente no rodapé). Também pode introduzir alguns dos elementos que citei caso não houver outra localização lógica no esquema de design.

8. Botões

Cada botão em um site deve ser reconhecível apenas como um botão. Eles devem ter a mesma forma, efeitos de design e sensação, independentemente da finalidade ou localização. Aqui a repetição e a consistência são a regra.

Como usar: desenvolva um conjunto de botões exclusivos para o seu site. Crie um tema com cores consistentes e que se destaquem dos demais elementos da página.

9. Imagens profissionais

Com imagens ou ilustrações produzidas e personalizadas você pode mostrar produtos, pessoas ou qualquer outra coisa para atrair os usuários ao seu site.

Caso não seja possível contratar um fotógrafo, considere usar bancos de imagens. Só tenha cuidado ao usar muitas imagens de banco, pois o site pode perder a identidade.

Como Usar: contrate um fotógrafo ou ilustrador para desenvolver e criar um conjunto de imagens. As fotos produzidas poderão ser aproveitadas durante muito tempo e ainda serem usadas em catálogos e/ou folder impressos.

10. Web fonts

A web já foi preenchida com um punhado de fontes – Arial e Courier vêm à mente – porque elas eram legíveis pela maioria dos computadores e navegadores. Mas isso é passado.

As web fonts são importantes por dois motivos principais – compatibilidade e licenciamento. Usar um serviço de fontes da web é importante para a otimização de mecanismos de pesquisa, e claro, não é preciso criar imagens com fontes especiais para manter uma determinada aparência de layout.

Como usar: comece com um serviço como o Google Fonts, que é gratuito, para implementar um conjunto de fontes bonitas e interessantes no design do site sem ter que gastar uma fortuna em licenciamento ou se preocupar com problemas de compatibilidade.

…..

Fonte (adaptado):
Design Shack

Montei um resumo das etapas baseado no meu fluxo de trabalho e no infográfico do John Furness, designer e fundador da Simple Square. Nesse infográfico, John Furness considerou o tipo de envolvimento, qual a importância do evento e quem vai executar a tarefa (designer ou cliente).

No meu infográfico, mantive a divisão de tarefas mas preferi simplificar as etapas facilitando o entendimento do processo. A partir da reunião inicial temos:

Explicando as etapas:

1. Preenchimento do briefing

O briefing é a base de informações sobre o site. É um questionário com perguntas sobre os produtos/serviços oferecidos, qual o público alvo, quem são os concorrentes, quais os objetivos a médio e longo prazos, história da empresa etc. Um briefing bem preenchido é o primeiro passo para um projeto de sucesso.

2. Envio do orçamento

Com base nas informações do briefing, consigo saber quais as necessidades da empresa e quais funcionalidades teremos (formulários, sliders, galerias, dashboards, Google Maps, videos, métodos de pagamento para e-commerce etc). Essa é minha base para pesquisa de concorrência, análise dos pontos fortes e fracos e quais as características de mercado do cliente. Envio então um orçamento/contrato detalhado contendo descrição completa do serviço, suas etapas, cronograma, valor e forma de pagamento.

3. Aprovação do orçamento

Assim que o cliente aprovar o orçamento, dou início aos trabalhos.

4. Esboço do site: wireframe e layouts

O primeiro passo é a construção do wireframe, que é um protótipo usado para sugerir a estrutura que o site terá e como ele vai se relacionar com as outras páginas (já falei sobre esse assunto aqui).

O wireframe define quais os assuntos prioritários, a localização ideal de cada elemento e a distribuição dos links em todo o site. Nesse ponto já temos uma ideia geral do conteúdo do site. É o momento onde o cliente deve aprovar a estrutura do projeto.

Já os layouts são a transformação do esboço (wireframe aprovado) em imagens. Aqui é definida a identidade visual do site através da tipografia, paleta de cores, iconografia, fotos, textos etc.

O primeiro layout a ser criado é a Home. Com ela aprovada, partimos para a criação das páginas internas do site.

5. Aprovação do layout

Fase em que o cliente revisa os últimos detalhes gráficos apresentados.

6. Envio do conteúdo

Com os layouts aprovados, o cliente já pode enviar todo o conteúdo do site (fotos, textos, videos, documentos para download etc).

7. Desenvolvimento dos códigos

Aqui o layout aprovado será convertido em linguagem de programação adequada a todos os navegadores. Tecnicamente é dividida em duas partes: o desenvolvimento front-end (construção de tudo o que podemos ver na tela como animações, cores, disposições de texto e imagem, campos etc) e o back-end (tudo o que ocorre nos bastidores do site e invisíveis ao usuário: gerenciamento de banco de dados, segurança das informações, integração de sistemas etc).

Durante o desenvolvimento do código, o site fica disponível para navegação em um endereço provisório, permitindo ao cliente acompanhar todo o processo.

8. Validação

Com todos os códigos desenvolvidos e conteúdos aplicados, é a hora da validação. Baseado na ferramenta de padronização do W3C, consórcio internacional que estabelece padrões de qualidade para sites do mundo todo, serão analisados e corrigidos todos os códigos do site. Para entender melhor, a validação funciona como uma “análise gramatical” que verifica possíveis erros na linguagem de código.

9. Aprovação final

É a última fase de verificação e onde o cliente dá o ok final para a publicação do site.

10. Publicação

Após a aprovação final, é hora de publicar o site. Isso envolve a contratação de um domínio (ex.: www.suaempresa.com.br) e também de uma hospedagem em servidores que tornarão seu site visível para os usuários da web.

—

Cada projeto tem suas próprias demandas assim como cada designer tem seu próprio método de trabalho. Aqui eu dividi em 10 fases com um tempo médio de produção entre 45 e 60 dias.

Após a publicação, o mais indicado é que o cliente faça um contrato de manutenção do site. Isso garante backups periódicos, suporte técnico, atualizações, verificações de vírus, entre outras tarefas. É a garantia de que todo o trabalho terá continuidade e funcionamento perfeito.

Saiba quanto custa a manutenção de um site mensalmente.

Então, um wireframe é um layout que demonstra quais elementos da interface existirão nas páginas do site.

Veja porque o wireframe é importante:

• Estabelece a estrutura das páginas antes de definir o visual, evitando retrabalho
• Ajuda a entender quais assuntos serão abordados e suas prioridades
• Determina os espaços para todos os itens e onde estarão localizados
• Estabelece a distribuição dos links e como será a jornada do usuário

O objetivo do wireframe é fornecer um entendimento visual básico de uma página no início de um projeto a fim de obter a aprovação da equipe e do cliente antes que a fase criativa comece. Os wireframes também podem ser usados ​​para criar a navegação do site e garantir que a estrutura usada atenda à expectativa do usuário.

Além disso, alterar um wireframe é bem mais fácil e rápido do que um design conceitual.

Definindo os wireframes

É importante lembrar que os wireframes funcionam apenas como guias. Não devem ter ilustrações, fotos e nem blocos de texto. Apenas elementos referenciais. Dessa forma, não é necessário usar cores, imagens e nenhuma tipografia específica (no máximo uma diferenciação de títulos e subtítulos definindo proporções).

Os wireframes podem variar de simples rascunhos no papel até pequenos sistemas criados no computador com detalhes mais bem definidos.

Os de baixa fidelidade ajudam na comunicação da equipe do projeto e são relativamente rápidos no desenvolvimento. São mais abstratos e costumam usar imagens simples (quadrados, textos falsos, círculos simbolizando ícones, riscos definindo links etc.).

Os wireframes de alta fidelidade são melhores para a documentação devido ao seu maior nível de detalhe. Esses wireframes geralmente incluem informações sobre cada item específico da página, incluindo dimensões, comportamento e/ou ações relacionadas a qualquer elemento interativo.

É importante lembrar que, mesmo não havendo a participação direta do redator e do designer nesse estágio (eventualmente), todo o processo deve ser elaborado com o consentimento de toda a equipe. Inclusões de textos, novas seções e novas imagens podem ocorrer no meio do processo e isso deve ser previsto no wireframe também.

Vantagens e desvantagens do wireframe

Uma das grandes vantagens do wireframe é que ele fornece uma ideia inicial que pode ser usada como revisão junto ao cliente e a equipe. Além disso, um wireframe aprovado pelo cliente dá segurança ao designer na hora de criar o layout. Como os wireframes não incluem nenhum design, nem sempre é fácil para o cliente entender o conceito. Dependendo do cliente, pode ser uma desvantagem.

…..

Fonte (adaptado):
Sachintha Keddagodage

Um bom trabalho de branding é o que diferencia você de seus concorrentes. Confira 5 dicas básicas na hora de definir sua estratégia de branding:

1. Seja único

É muito importante garantir que a marca tenha uma identidade própria que se destaque dos concorrentes. Evite imitar a aparência de grandes marcas. Experimente e crie sua própria marca: ela deve ser única. Muitos consumidores são atraídos para estabelecimentos independentes, à procura de algo autêntico ou original.

2. Defina uma comunicação integrada

Uma comunicação integrada funciona como uma “voz” que deve ser capaz de falar com o cliente e o consumidor onde ele estiver, de forma que ele saiba o que esperar do serviço ou produto. Toda comunicação da empresa/marca deve ser integrada e falar a mesma língua, seja on-line ou off-line. Unifique a imagem e o discurso de sua marca. Assim seu consumidor saberá imediatamente do que se trata.

3. Embalagem

A embalagem deve atrair a atenção do consumidor. Isso é muito importante, pois vai determinar se um consumidor comprará ou não o produto. A embalagem deve despertar o desejo de compra do consumidor assim que ele olha pra ela. Devem ser simples e ativar o envolvimento emocional.

4. Conheça seus consumidores

É muito importante conhecer o seu nicho de mercado, pois isso ajudará a conhecer o caminho certo para alcançar seus consumidores. Conhecer suas personas irá ajudá-lo a conhecer o tipo de mídia com as quais elas se relacionam. A partir daí sua estratégia de marketing poderá ser montada.

5. Mídia social

A maioria das pessoas gasta seu tempo online em plataformas de mídia social, como Facebook, Pinterest, Instagram, Twitter e LinkedIn. Você pode vender sua marca facilmente nessas plataformas. Uma vez estabelecida a presença na mídia social, você deve mantê-la de forma consistente ao postar sobre sua marca de tempos em tempos. Blogs também podem ser importantes para chegar ao maior número possível de consumidores.

…..

Fonte (adaptado):
creativeoverflow.net

Na verdade, esses mitos frustram os designers e são uma grande perda para os empresários que acreditam nesses mitos. Confira alguns equívocos bem comuns sobre design e entenda porque eles estão errados.

Mito 1: Design é uma arte

O design é um assunto na engenharia e nas escolas de arte, mas a abordagem dos designers é feita de uma perspectiva diferente, dependendo do campo. Os designers de escolas de arte percebem isso como artes visuais e os designers de escolas de engenharia como uma aplicação científica que molda os produtos finais. Os gerentes e desenvolvedores avaliam os recursos do designer que refletem na sua capacidade.

Correção: Design é design

Dessa forma, o design ajuda na criação da capacidade cognitiva humana. Em ambas as disciplinas é usado para tornar o produto funcional, portanto, um bom designer deve ter conjuntos de ferramentas adequados para desenvolver um projeto de sucesso que solucione os problemas dos consumidores e ajude a facilitar a vida.

Mito 2: Design é uma ferramenta

Normalmente, o design é feito usando o Illustrator e o Photoshop. Então, novos designers acreditam que aprender essas ferramentas é o suficiente para se tornarem profissionais. Na verdade, o uso dessas ferramentas é baseado na indústria. De fato, projetar é a maneira de transferir idéias criativas para um produto inovador.

Correção: Design é um processo

O desenvolvimento do design se inicia com a compreensão das necessidades do negócio para daí sim entender quais os problemas do projeto. Esse processo deverá incluir:

• Foco total no usuário
• Compreensão das necessidades através de uma busca intensiva
• Criação de um design inovador através de ideias viáveis ​​e criativas
• Promoção da competitividade no mercado a fim de elevar a lucratividade

Mito 3: Design refere-se à estética

Outra crença é que os designers são artistas criando produtos, interfaces ou aplicativos bonitos. Restringir o papel à estética é um sério problema que leva ao fracasso do produto no mercado.

Correção: Design é forma e funcionalidade

O design é funcional e tem um forma. A forma define a aparência de um produto, enquanto a funcionalidade se refere ao que ela serve. Para atingir o público-alvo, é necessário que ambos estejam em harmonia. Um belo produto sozinho não consegue compradores; ao mesmo tempo, precisa ser amigável ao usuário. Da mesma forma, produtos de aparência feia são menos desejáveis. É preciso então, mesclar forma e função.

Mito 4: Designers não precisam de diploma

Muitos jovens aprendem algumas ferramentas e começam a procurar empregos como designers. Efetivamente, apenas conhecer o Photoshop e o Illustrator, não credencia ninguém a desenvolver as habilidades necessárias.

Correção: Designers precisam de educação em design

A educação em design fornece um curso de aprendizado necessário e isso inclui a teoria do design, princípios e implementação de habilidades de design. Unir-se às boas escolas de design é caro e difícil. Há uma necessidade de bons mentores para adquirir habilidades necessárias.

Além disso, outra característica muito importante é a experiência. Só o dia-a-dia de um studio de design é que vai dar lastro para o desenvolvimento de bons profissionais.

…..

Fonte (adaptado):
saurabhmpatel.com