As pessoas, em geral, quando pensam em construção e design de um site, acreditam que montar uma página na web seja algo muito simples de ser executado. Que basta o desenho de um layout específico, a escolha da tipografia e de cores aleatórias – que muitas vezes não se relacionam ao conteúdo. Entretanto, isso não corresponde à realidade. Os designers, principais responsáveis pela criação do projeto de um site, não pensam dessa forma.
Montar uma página está longe de ser um trabalho fácil. Principalmente para o designer, que normalmente não é familiarizado com códigos.
Felizmente, hoje há uma série de ferramentas que servem de preciosos suportes ao trabalho de webdesign, o que deu maior competência a esses profissionais para realizar projetos incríveis por toda a web.
Vale destacar que as ferramentas são apenas um meio e o fato de saber utilizá-las não o torna um designer e nem garante que você seja capaz de criar um site profissional.
É sempre fundamental lembrar o seguinte: a prática, embora imprescindível no aperfeiçoamento de todo profissional, pouco vale sem um estudo embasado em uma série de conceitos e fundamentos que designers devem seguir na construção de um projeto.
Com isso em mente, apresentaremos neste e-book alguns conceitos básicos que vão te ajudar bastante ao definir o design do seu novo site.
Nas próximas páginas, você irá aprender, de forma rápida e fácil, sobre os seguintes aspectos:
É importante fazer uma observação preliminar: embora este seja um material com foco em design, os objetivos são os conceitos básicos da atividade, para quem tem interesse em sites e como são criados, mas não tem muita noção sobre o assunto.
Por isso, como se trata de uma área com muitos termos técnicos, que assustam o público em geral, optamos por adotar uma linguagem mais neutra e simplificada em nossas explicações. Tudo para facilitar sua leitura e apreciação!
Vamos começar? Acompanhe conosco!
Ao escolher um layout para o seu site, você deve levar em consideração que existem três principais tipos: o layout fixo, o fluído e o responsivo. Cada um deles possui suas características e é necessário avaliar bem o tipo de site que você quer para escolher o que melhor se adequa ao seu projeto.
É bem simples de compreender. Trata-se de uma estrutura de site feita para caber exatamente em uma tela de computador. Atualmente, trabalha-se pouco com layout fixo. Sabe por quê? Vamos refletir: por onde a internet é mais acessada? Celular, claro!
Então, esse tipo de layout não se adapta às telas dos celulares e nem dos tablets, justamente por ser pré-fixado em um formato para computador.
A página será carregada nesses aparelhos, porém não terá uma diagramação ajustada, tampouco uma navegação confortável – com muitas partes do site ilegíveis e/ou inacessíveis.
Quem nunca abriu um site no celular e teve que ficar aumentando e diminuindo o zoom para conseguir ler ou clicar nos botões e links? Isso é extremamente chato e deixa a experiência de navegação insuportável – fazendo com que o site perca acessos.
Diferentemente do layout fixo, o layout fluido - ou “líquido” - recebe essa nomenclatura pelo fato de deixar o conteúdo, sobretudo o texto, ocupando toda a tela do dispositivo, independentemente do tamanho ou resolução.
Desse modo, o designer consegue mostrar mais ou menos conteúdo, conforme o tamanho da tela. Mesmo em telas menores é possível visualizar o site, embora com menos detalhes do layout.
Como o layout fluido valoriza manter o espaço equilibrado entre os elementos, a página responde dinamicamente, caso o usuário decida mudar tamanho de fonte e/ou resolução.
Diferentemente do Layout fixo, um site com Layout responsivo irá se adaptar a diferentes formas de navegação, respeitando e adaptando a diagramação do site. Tudo isso como apoio à navegação confortável e satisfatória em todas as experiências do usuário, seja em tablet, celular ou computador.
Observação importante: a diferença entre o layout responsivo e o fluido é que, nesse último, a valorização é do enquadramento do texto em tela; já para o responsivo, todos os elementos do layout se acomodam para serem visualizados totalmente e em qualquer suporte.
Curiosidade:
Muitos enquadram os tablets em dispositivos mobile, mas o Google entende que não. De acordo com a empresa,
os tablets costumam ter telas maiores. Isso significa que, a menos que você ofereça conteúdo otimizado para tablets, supomos que os usuários esperam ver seu site como ele é visualizado no navegador de um computador, e não como visto em um smartphone.
Logo, apenas os celulares são considerados como mobile pela gigante da tecnologia.
É interessante constatar que a influência da internet móvel é tanta, que surgiu um conceito chamado Mobile First. A ideia de que os novos sites sejam desenvolvidos primeiramente para celulares e depois para computadores.
Nada mais justo, considerando que o celular tem sido o dispositivo mais usado para acessar a internet, conforme divulgou o IBGE.
Em termos gerais, é isso mesmo que você leu. O mercado, atualmente, caminha para que 100% dos sites tenham de ser responsivos.
Esse é o design a ser perseguido pelas marcas que desejam ter um público cada vez mais cativo e engajado, com navegação intuitiva e facilitada. Caso contrário, a empresa perderá público e, consequentemente, amargará prejuízos.
E isso pode ocorrer por, ao menos, dois motivos:
Não tem como falar de web design sem comentar da diagramação - que é tão importante quanto o layout.
A diagramação dentro do web desing é muito relevante, afinal, é esse conjunto de configurações que fará com que o site ganhe personalidade. Ou seja, a diagramação é o “esqueleto” sobre o qual toda a estrutura do site irá se apoiar e encaixar.
É na diagramação que todos os detalhes de configuração do site poderão ser alterados, até formar um conjunto perfeito, convergente e funcional, com o apelo necessário ao público-alvo da marca.
A título de exemplo, mais especificamente, é a diagramação que irá delimitar a forma como você irá montar o layout, bem como o espaçamento do texto, alinha de corte e a padronização da página.
Mas cuidado! Quando a diagramação não é bem feita, tudo pode ir por água abaixo, poluindo excessivamente a área do site e afastando visitantes em vez de aproximá-los. Por isso é importante conhecer bem com o que você está lidando.
E já que estamos falando de design, é válido saber que a diagramação não é algo padronizado.
Dependendo do projeto que for criar, você deve pesquisar propostas que dialoguem com a visão do cliente para que o projeto possa ser realizado com o máximo de personalidade possível.
Quando se trabalha com página na web, por outro lado, você precisa definir a diagramação da página, conforme o seu conteúdo é estruturado, para não cansar o usuário ou deixar o site muito carregado ou mal construído.
Em um site é vital definir a diagramação de cada página conforme o seu conteúdo específico, de forma a deixá-lo mais atrativo, intuitivo e de fácil assimilação pelos usuários.
Como você já deve ter percebido, cada projeto é único. Nesse sentido, um estudo de cores é fundamental para a criação do layout de um site.
A chamada roda de cores é uma ferramenta muito utilizada por designers de um modo geral, já que oferece, de maneira simples e dinâmica, diversas possibilidades de estudos cromáticos, até que se consiga a paleta adequada para aplicar em um projeto de website. Achou complicado? Acesse https://color.adobe.com/pt/create/color-wheel/ e faça um experiência da marca.
É necessário fazer um estudo para que se consiga compreender a relação entre cores diferentes, bem como o efeito que ocorre a partir da combinação. Feito isso, você pode verificar se é interessante ou não utilizar as cores escolhidas em seu projeto.
Há três propriedades da cor com as quais você pode estar familiarizado. A primeira é a tonalidade, que se refere à cor em si. Você olha pra ela e sabe em qual das cores do arco-íris ela se encaixa. A segunda propriedade é a saturação, que significa quão rica a cor é. A terceira propriedade de cor é de valor. Valor em termos de cor significa o quão brilhante ela é, geralmente expresso como uma porcentagem entre 0% e 100%.
Podem haver muitos matizes e muitas tonalidades de cor tomadas a partir da roda.
Por exemplo, ao adicionar a cor branca ao vermelho, dá-se o rosa claro. A cor preta com a branca resulta em uma tonalidade de preto mais suave... e por aí vai.
As cores são frequentemente associadas a diferentes temperaturas. Por exemplo, quando você pensa em uma noite fria de inverno, há uma paleta de cores que sua mente imagina.
Azuis claros e escuros ou até mesmo cinzas claros são muitas vezes associados a temperaturas frias.
Vermelho, laranja e amarelo são as cores mais quentes que, na maioria das vezes, podem ser atribuídas às chamas.
Entretanto, isso é a teoria. Temos sempre de ressaltar que: cores e tonalidades, independentemente de frias ou quentes, são pensadas de acordo com o projeto.
Temperaturas podem se misturar, desde que o resultado seja harmônico. Inclusive, contraste é regra básica de design. Peças monocromáticas demais costumam ser monótonas e sem graça.
Uma vez que você tem uma compreensão de colorimetria, você deve se perguntar quais sensações quer provocar no site. A cor ajuda a influenciar as pessoas de diversas maneiras.
Imagine só abrir um site totalmente colorido, laranja, todo vermelho ou azul turquesa. Provavelmente a visita do usuário não se estenderia por muito tempo, não é mesmo?
Então tenha bastante cautela ao calibrar e combinar as cores do projeto, pois disso pode resultar uma grande influência na jornada de compra do cliente.
É cientificamente comprovado que as cores refletem muito o estado de espírito do indivíduo e influenciam diretamente produtores e consumidores. Para referência, seguem alguns exemplos:
Há, entretanto, outras técnicas das quais designers fazem uso para provocar ações, estimular desejos e transmitir sensações.
Portanto, as cores são relevantes, claro, mas não devem ser pensadas como a única maneira de se chamar atenção no web design.
Um princípio importante do uso de fontes para sites é: trabalhe com no máximo duas fontes.
Mesmo assim, essas duas fontes precisam ter um contraste muito assertivo. Do contrário, o seu design ficará um caos.
Se não se sente seguro em trabalhar com duas fontes diferentes, busque por uma família de fonte com diferentes aspectos (bold, light, itálico...).
Assim você dá destaque sem quebrar a unidade e uniformidade de seu design.
Outra dica importante é estabelecer o peso dessas fontes e onde cada uma se encaixa. Tudo deve ocorrer para que seja mantida sempre a unidade dos elementos diversos do site:
Texto / título / menu / texto de rodapé.
Pense em cada um desses elementos como uma unidade diferente. É aí que a fonte deve se contrastar, diferenciar.
Mas como já dito, é importante optar por uma família tipográfica com variações diferentes ou no máximo duas fontes (três, se você tiver muita certeza e segurança doque está fazendo).
Nunca centralize textos. Esse é um dos piores erros que um designer pode cometer. Faz seu leitor perder o foco na leitura e se cansar muito mais rápido em textos mais longos. Além de ser esteticamente feio.
Não é recomendado justificar o texto para sites pois não existe hifenização, o que altera o espaçamento entre as palavras dificultando muito a leitura. O melhor é sem prealinhar à esquerda. Mesmo porque, palavras com sílabas separadas no fim da frase são monótonas e cansativas.
Não termine textos com linhas de uma ou duas palavras. Trate de fazê-las desaparecer ou de incluir mais palavras na linha, eliminando assim as chamadas palavras viúvas. Uma linha curta quebra a harmonia da página.
Este talvez seja um dos maiores motivos de discussão entre designer e cliente. Isso se dá por uma característica do nosso cérebro de querer, automaticamente, ficar preenchendo espaço quando estamos organizando e/ou elaborando alguma coisa.
O espaço é elemento tão importante quanto o conteúdo.
Visualmente, espaços brancos dão uma organização inteligente aos layouts. Ele dá um alívio visual aos leitores, traz leveza e sofisticação a qualquer projeto.
Quando todos os elementos estão muito próximos um do outro, ficando dispostos de forma linear, acabam resultando em uma sensação de desconforto e o seu site pode ficar com uma aparência poluída.
O que é importante é a incorporação adequada de todos os elementos que compõem o layout para que se alcance uma harmonia, um conforto visual e até mesmo um prazer.
Esta sensação muitas vezes é chamada de "clean".
Uma característica peculiar para quem desenvolve websites e afins, diferentemente de projetos de design gráfico, são os códigos ou linguagens de marcação e estilo— nesse caso me refiro ao HTML e CSS. Você deve estar se perguntando, o que os códigos têm a ver com o design?
A resposta é: tudo!
Quando pensamos em um site, não tem como ignorar o Google, pois é um objetivo primário estar bem posicionado no Google e é aí que entram os códigos.
O Google e outros buscadores não entendem nada de layout. Para eles, o que importa são os códigos; logo, ter uma casa bonita por fora, mas tenebrosa por dentro.
Design é função e não forma. Steve Jobs
Design é uma coisa mais orgânica. Então, você faz coisas que todo mundo admira, percebe e se surpreende com o novo. Alexandre Wollner
O web design é um fragmento do design. Não existe web designer. Existe o designer que faz web. Alexandre Wollner
Bom design é bom negócio. Thomas Watson Jr.
Ser Designer Gráfico não é fazer o que o cliente quer e sim o que ele precisa. Jorge Clésio
Bom design vicia, porque dá bons resultados. Gilberto Strunck
Você não precisa investir em design, assim como sua empresa também não precisa ter sucesso. Mônica Fuchshuberadeira
Esses foram alguns conceitos básicos dessa profissão que, além de ser muito criativa, oferece muitas oportunidades de inovação ao visual, encontrando diferentes facetas na tipografia e combinando cores conforme o foco do seu trabalho.
Além disso, saiba que é uma profissão que está em ascensão no mundo inteiro, devido ao aumento do campo de trabalho nos últimos anos por ser considerado estratégico para qualquer empresa.
É muito importante ter em mente que, quando um projeto é desenvolvido para uma marca que já possui toda uma identidade visual, boa parte do que tratamos acima já está estabelecido no Manual de Identidade Visual.
Daí, a importância de contratar profissionais especializados em desenvolver este tipo de trabalho.
Gostou desse material? Esperamos que tenha ajudado a entender um pouco sobre design de sites e que possa servir para aplicar no seu projeto. Se tiver alguma dúvida ou precisar de ajuda.
Entre em contato conosco, será um prazer.
Fale sobre seu negócio e sobre seus objetivos com relação ao marketing para que possamos montar um projeto eficaz para seus clientes e seu segmento. Se você quer ter uma boa receita com seu site, somente aqui é possível encontrar profissionais capacitados e que possuem domínio de todas as ferramentas necessárias.
