O que você precisa saber para criar um layout de site para clientes

layout de site

Criar o layout de site perfeito é um desafio que todo designer vai enfrentar em sua carreira. Afinal, cada vez mais, os negócios estão migrando seu foco para a internet e hoje é quase impossível não se ver na posição de ter que desenhar uma página para a web.

Por isso, é importante conhecer quais são os principais elementos do layout de site, entender o que é uma página responsiva, descobrir como usar o HTML5 e conhecer um pouco de CSS. Com isso em vista, desenvolvemos este guia. Após sua leitura, você estará munido de todos os conhecimentos necessários para criar um layout para site de clientes.

Quais são os principais elementos do layout de site?

Constantemente, vemos evoluir o design de sites e surgirem novos elementos e estilos que tomam conta da internet. Entretanto, existem alguns aspectos que ajudam a contar uma história e a fazer com que a sua página tenha um desempenho tão bom no desktop quanto em qualquer outro dispositivo. Esses elementos cruciais devem fazer parte do checklist de todo designer e precisam ser incluídos na maioria dos projetos.

Dos espaços de respiro — necessários para uma leiturabilidade agradável do material desenvolvido por você — até as informações de como entrar em contato com o seu cliente, listamos o que é essencial incluir no seu design. Confira:

Espaços de respiro

Quando você cria um layout de e-mail marketing ou website, uma das questões mais importantes a se considerar são os espaços em branco. É estranho falarmos disso em um artigo sobre design, mas você não sabe o quanto esses pedaços de não informação são importantes para compor uma harmonia visual.

Espaço é um dos recursos de design mais importantes porque dita quase tudo, do fluxo a leiturabilidade. E hoje, designers sabem disso como em nenhum outro momento na história. Por isso, eles estão começando a utilizar o espaço de formas como não víamos na internet há alguns anos, incluindo amplos espaços em branco, maiores distâncias entre textos etc.

Entretanto, não basta sair colocando um monte de espaço em branco entre os elementos do seu layout de site para que ele se torne necessariamente melhor. Uma boa relação espacial inclui uma consistência entre espaços, ou seja, elementos similares devem incluir espaçamentos parecidos. Dessa forma, a distância entre linhas em um parágrafo deve ser a mesma em todos eles, por exemplo.

Mas por que espaço é tão importante? É porque ele cria um ponto focal nos elementos que circunda. Textos e imagens que são contornados por espaço parecem mais relevantes do que aqueles que estão espremidos entre outras dezenas de elementos.

Explore o espaço, que não precisa sempre ser branco. Use as cores escolhidas para o seu layout e faça composições sólidas que não contenham elemento algum, senão tons. O resultado serão peças mais harmônicas e bem resolvidas.

Uma seção sobre o seu cliente

Um site é um cartão de visitas virtual, certo? E como todo cartão de visitas, ele tem um único objetivo: dizer quem você é e o que você faz. Por isso, nenhuma página poderia estar completa sem uma seção sobre o seu cliente, respondendo exatamente essas perguntas.

A página “sobre” deve nos dizer o que você faz de uma forma clara e ser concisa sobre quem você é. Ela também pode falar um pouco da filosofia da empresa e dos seus objetivos, se assim for do seu agrado. Ali, podem estar contidos os testemunhos de clientes e algumas histórias de sucesso, que justificam o seu trabalho, afinal, essa página é o canal para tudo o que diz respeito à sua marca na web.

Faça dela um lugar simples e direto, que forneça informações o suficiente para que o cliente se informe e não se chateie, além de criar um design interessante. Assim, você garante aos visitantes a oportunidade de conhecer um pouco mais da personalidade da sua marca.

Uma call to action

Em geral, websites têm como principal objetivo incitar os usuários a agir de uma certa maneira. A essa ação esperada chamamos de conversão. Todavia, para chegar a conversões, antes de tudo, é preciso informar ao seu visitante o que você espera que ele faça.

Por isso, existem as calls to action. Um layout de site que contém uma call to action deve colocá-la em local de destaque, de maneira que ela seja óbvia para o usuário e contraste com o resto de seu conteúdo. Se você deseja que ele faça um download, se inscreva em uma newsletter ou faça uma cotação, escreva um texto atraente e breve.

Botões estilizados

Todos os botões de um website devem ser reconhecidos como botões e, portanto, como elementos clicáveis do seu layout. Assim, eles precisam ter sempre o mesmo formato, os mesmos efeitos de design e as mesmas características, ainda que sirvam a propósitos diferentes.

Criar as características únicas de um botão pode ser um desafio, principalmente considerando a complexidade de determinados projetos. Todavia, você pode optar por um kit de design para criar elementos consistentes entre si.

Um rodapé com informações úteis

Um rodapé de informações é uma última chance que você tem de se conectar com a sua audiência sem se impor. Tendo em vista que está no final da página, trata-se da localização lógica para incluir um mapa do site, os dados da sua empresa e as informações de contato, além de links úteis para o seu website. Maximize sua eficiência e o mantenha simples e fácil de utilizar.

Imagens únicas

As pessoas adoram ver imagens incríveis e cativá-las dessa forma é imprescindível ao se fazer o layout de um website. Imagens e ilustrações incríveis podem ser encontradas facilmente em bancos de imagens pela internet e são capazes de fazer a diferença em como seus produtos, serviços e marca se apresentam ao cliente.

Uma ferramenta de busca

Apostamos que não foram poucas as vezes em que você precisou encontrar uma informação antiga em uma página e não teve como fazê-lo. É nesses momentos que uma barra de busca se faz útil. Esse recurso é vital para usuários que tem costume de frequentar uma página e não pode ser deixado de lado por você na construção de um layout de site.

Crie barras de busca de modo que elas não obstruam a navegação e sejam fáceis de utilizar. Adicionalmente, certifique-se de que elas são grandes o bastante para serem preenchidas com os termos de busca mais comumente procurados por seus usuários e, se optar por utilizar um ícone, não invente: use a lupa que é entendida universalmente.

Fontes apropriadas para a web

Antigamente, a internet só suportava algumas tipografias e todos os layouts eram mais ou menos parecidos nesse aspecto. Esses tempos ficaram para trás com o surgimento de web fonts, sobre as quais falaremos melhor ao final deste artigo.

Web fonts ampliam as possibilidades que um designer tem de encontrar tipografias para compor os layouts de suas páginas na internet e serviços como o Google Fonts são gratuitos e trazem combinações amplas de fontes que você pode explorar e utilizar, sem se preocupar com a sua renderização em outros computadores.

O uso de fontes apropriadas para a web é especialmente importante porque são elas que garantem a leiturabilidade e a legibilidade da sua página. Portanto, esse elemento deve ser uma preocupação desde o início de seus layouts.

Informações de contato

Por último, o elemento mais importante de qualquer website são as informações de contato que permitem aos visitantes falar com o seu cliente. Você quer que esses dados estejam tão visíveis quanto possível e que o seu telefone, endereço e formulário de contato sejam claros e fáceis de encontrar. Por isso, planeje seu formulário de contato com cuidado e tente não solicitar informações desnecessárias nele.

O que é um site responsivo? E um site AMP?

Agora que você já sabe quais são os elementos fundamentais de uma página na internet, vamos nos aprofundar melhor por um conceito importante para qualquer web designer moderno: a definição do que é um site responsivo. É provável que já tenha ouvido esse termo por aí e talvez você até saiba defini-lo, mas vamos deixar bem claro o seu real significado a partir de agora.

Um site responsivo é um site único que é capaz de se adaptar a todos os tamanhos de tela possíveis, fazendo com que seja tão fácil utilizá-lo no celular e no tablet quanto no desktop. Para que um site responsivo funcione, você não precisa dar zoom ou passar horas deslizando pela página. Ele simplesmente se adapta ao tamanho dela, instintivamente.

Sites responsivos são muito importantes e você pode imaginar por quê. Hoje, milhões de usuários de smartphones entram na internet todos os dias e boa parte do tráfego dos websites (inclusive deste aqui) vêm de dispositivos móveis. Estar pronto para receber esses visitantes e também quem chega via desktop é fundamental para conseguir fechar mais negócios.

Talvez você se pergunte: por que não fazer então, simplesmente, um site mobile? É que os sites responsivos apresentam uma série de vantagens. Eles são mais eficientes porque atendem a mais dispositivos do que sites mobile, carregam muito mais rápido e poupam tempo de desenvolvimento para uma empresa, que não precisa fazer e hospedar dois sites diferentes.

Todavia, foi-se o tempo em que sites mobile e sites responsivos eram os únicos dois players com que você precisava se familiarizar. Hoje há no mercado uma novidade e a ela chamamos de sites AMP. Você sabe do que se trata?

Websites AMP, ou Accelerated Mobile Pages (Páginas Mobile Aceleradas) são uma iniciativa do Google e um projeto open source (de código aberto) cujo objetivo é construir uma web ainda mais veloz. Se os sites responsivos poupam tempo para os visitantes, os sites AMP prometem poupar ainda mais, mantendo layouts belos e que funcionam em todas as plataformas.

Sites AMP são feitos com um tipo de HTML, JS e Cache específicos, conhecidos como AMP HTML, AMP JS e Google AMP Cache. E sua prioridade é a performance e experiência de usuário, ou seja, nada de pirotecnia. A ideia por trás do projeto é construir páginas tão rápidas quanto os browsers modernos podem suportar.

Para distinguir se uma página é AMP é muito fácil: nos resultados Google todas elas aparecem com um símbolo de raio e a sigla AMP ao lado de seu nome. Clicando, você tem a oportunidade de conferir uma página otimizada e extremamente veloz em seu smartphone.

Como usar o HTML5?

Já que falamos de AMP HTML para definir como as Accelerated Mobile Pages são construídas, que tal falar um pouco mais do HTML em si? O HTML5 foi a última grande atualização na linguagem, que não era modernizada desde 1999. Você pode imaginar que tecnologias que sequer eram imaginadas naquela época foram implementadas à linguagem e que hoje ela leva em consideração a existência de smartphones, tablets e outros dispositivos móveis.

Só que em vez de ficar mais complexo, o HTML ficou mais simples na sua quinta edição. Com novidades do ponto de vista da segurança e suporte nativo de vídeo e áudio, a linguagem ficou mais leve e melhor para designers. Confira o que você precisa saber para utilizar seus principais novos recursos.

Novos elementos gráficos

O HTML5 tem novos elementos de semântica, mais atributos de forma para elementos e, para designers, algo que eles sempre sonharam: a possibilidade de incluir gráficos em SVG direto em seus layouts. Para fazer isso, basta usar as tags <svg> </svg>. Então, se você quiser construir um retângulo, basta desenhá-lo com código, da seguinte maneira:

<svg width=”200″ height=”50″>

<rect width=”200″ height=”50″ style=”fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)” />

</svg>

Desenhar gráficos também é uma possibilidade, e incluir gradientes e linhas diagonais no seu trabalho ficou mais simples. Basta usar a tag <canvas> </canvas> para definir o tamanho da tela em que você fará seus desenhos e, em seguida, fazer escrever o código do desenho em si:

<canvas id=”myCanvas” width=”400″ height=”200″ style=”border:1px solid #000000;”>

</canvas>

Inclua mídia em seus layouts

Agora, você pode incluir vídeos em MPEG, AVI, WMV, QuickTime e outra série de formatos utilizando a tag <video>. Da mesma forma, áudios podem ser acrescentados às páginas com a tag <audio>.

Layout CSS: o que um designer precisa saber?

Todavia, sempre que você vir um código HTML, vai perceber que ele não está formatado como uma página na web normalmente aparenta ser. Isso acontece porque o HTML é uma linguagem de marcação e não de estilo. Por isso, para conferir a uma página as suas características como cor e forma, usamos CSS.

Antigamente, toda a formatação era conferida por meio do HTML, mas isso deixava o código complexo e pesado demais. A solução descoberta foi isolar ambos HTML e CSS, em documentos diferentes, cada um com a sua função.

Como designer gráfico, tudo o que você precisa saber a respeito do CSS é que ele funciona da seguinte maneira: há um elemento HTML que você deseja estilizar, chamado selector, uma declaração, uma propriedade e um valor associado a essa propriedade.

Portanto, se você deseja mudar a cor de um artigo, o selector será algo como <article> e a declaração será a propriedade e o valor que você deseja alterar, incluídos entre colchetes, mais ou menos da seguinte forma: {background-color: #FFFFFF}.

Há, entretanto, milhares de propriedades em CSS que podem ser utilizadas com cada elemento do HTML. Mas não é necessário escrever cada uma delas você mesmo. Você pode confiar nos padrões do seu browser ou usar uma folha de estilos base para alterá-las. A melhor maneira de aprender a fazer isso, todavia, é experimentando. Faça download de materiais sobre HTML e CSS e verifique como eles interagem na prática.

Como usar tipografia em websites e onde encontrar fontes apropriadas?

Nos primeiros tópicos que abriram este texto, falamos da importância de se utilizar fontes apropriadas para a web e prometemos para você que explicaríamos direitinho o que isso significa, lembra? Pois bem. Chegamos finalmente à parte do nosso guia dedicada às web fonts e sua aplicação.

O que são web fonts?

Primeiro, vamos conceituar o que são web fonts. Computadores geralmente vem com fontes pré-instaladas, conhecidas como fontes do sistema. Essas fontes são seguras de se usar em qualquer projeto web, pois estão disponíveis em quase todos os OS do mercado. Tipografias como Arial, Times New Roman e Garamond são muito comuns aqui e podem ser reconhecidas e renderizadas por computadores de todos os tipos e idades sem nenhum problema.

Entretanto, acontece que, muitas vezes, os designers não querem ficar presos ao uso dessas fontes. Ou seja, gostariam de usar algo diferente que encontraram por aí para compor os seus layouts. Entretanto, se essa fonte não estiver instalada no computador do usuário, ela poderá não renderizar apropriadamente e todo o seu layout ficará comprometido.

Por isso, foram inventadas as web fonts. Quando um designer quer utilizar uma tipografia customizada, mas não pode garantir que ela esteja instalada em todas as máquinas dos visitantes de seu website, ele a torna acessível em um servidor onde a fonte está hospedada. Dali, a fonte é “chamada” sempre que o visitante faz um acesso ao website em questão e ele pode ser visto exatamente como o designer pretendia.

Como web fonts funcionam?

Web fonts são uma parte do estilo de um website, portanto, estão descritas em seu CSS. E funcionam da seguinte maneira: elas são hospedadas localmente, no mesmo endereço que um website, em um servidor isolado ou por meio de um provedor como o Google Fonts ou o Adobe Typekit.

Todavia, nem todos os browsers suportam web fonts, então, é normal que um designer queira indicar uma fonte de segurança para o caso de sua escolha inicial não ser funcional. Essa fonte de segurança vai tomar o lugar da fonte primária caso o “chamado” não funcione e garantirá que o seu layout tenha a melhor aparência e performance possível para os seus usuários.

Onde encontrar fontes para a web?

Agora que você já sabe o que são web fonts, deve estar se perguntando onde encontrá-las e se elas são gratuitas. Todas as fontes podem ser uma web font, então isso já responde a sua pergunta quanto à gratuidade. Nem todas elas são gratuitas, mas há muitas fontes de código aberto disponíveis para o uso em layout de sites.

O principal lugar para encontrá-las na internet é provavelmente o Typekit, site que começou toda essa revolução direcionada ao uso de fontes para a internet. Ali, você encontra tipos pagos e gratuitos por um custo/benefício justo e pode incluí-los no layout do seu website com muita facilidade.

Boa parte das fontes do site vem da Adobe e de designers independentes e você pode aproveitar-se da sua assinatura da Creative Cloud para conseguir descontos nos preços de fontes.

Outro ótimo lugar para conseguir encontrar Web Fonts é o Font Squirrel, uma página lotada de tipografias gratuitas para uso comercial. Esse site independente tem uma grande quantidade de tipos e você pode transformá-los em web fonts ao hospedá-los independentemente, uma ótima alternativa para poupar um pouco em seus projetos.

Agora, se você quer o máximo de comodidade e não se importa em pagar por isso, talvez o Fontspring seja a opção ideal para você. Em seu catálogo, há fontes gratuitas e fontes licenciadas para a web que podem ser instaladas com alguns cliques. Isso poupa muito tempo em seus projetos e não custa mais do que US$ 5.

Mas se o seu orçamento estiver curto, o melhor recurso possível ainda é o Google Fonts. Lá você encontra uma coleção gigantesca de fontes de código aberto para fazer o que quiser com elas. Inclusive, o Google tornou a sua instalação em websites um processo bastante simples e intuitivo. Todas as tipografias encontradas ali são gratuitas e podem ser combinadas online, para que você veja os resultados na sua tela. Vale a pena experimentar.

Criar o layout de site mais adequado para as necessidades do seu cliente vai variar de projeto para projeto e sempre será um desafio novo e excitante. Esperamos, todavia, que este guia possa ajudá-lo pelo caminho e simplifique a maneira como você executa o seu trabalho.

Gostou desta postagem? Assine a newsletter WeLancer para receber mais conteúdos como este no seu e-mail!