A arte de construir sites melhores

A criação de sites tornou-se uma habilidade quase comum nos dias de hoje, e há tantos sites por aí competindo com os seus que qualquer coisa que você possa fazer para se destacar da multidão será uma grande ajuda.

O que podemos fazer para que nossos sites sejam notados, admirados e prestados atenção? Isso requer um certo ajuste na maneira como pensamos sobre o design do site. Neste pequeno artigo, vamos dar uma olhada em algumas das principais coisas que são necessárias para criar melhores sites.

O conteúdo deve ter prioridade

Como designers, estamos sempre dispostos a criar designs incríveis. É claro que isso não se aplica àqueles que meramente se chamam de designers, porque não permitem que suas próprias almas chorem na página, consagrando eternamente um momento de inspiração na glória eletrônica.

O que os proprietários de sites querem, é claro, é que as pessoas leiam seu conteúdo, se envolvam com ele e talvez até comprem algo por causa disso. Imagens bonitas são maravilhosas de se ter, mas não se elas estão atrapalhando o usuário a experimentar o conteúdo.

Como esse é o caso, o que poderíamos considerar como “aprimoramentos estilísticos” certamente deve ficar para trás na apresentação principal. Se você precisar soltar algo, deve ser sempre o elemento estilístico.

imagem cortesia de

O design responsivo é essencial (exceto quando não é)

O design responsivo é tão importante nos dias de hoje por causa do grande número de pessoas que usam seus telefones para navegar na web, e o fato de que a maioria dos navegadores de telefone ainda faz um péssimo trabalho de renderizar páginas da web.

Existem algumas exceções notáveis, mas são muito raras. Tais exceções seriam quando algo necessidades para ser exibido na página para que o conteúdo faça sentido e precise ser de um tamanho definido. Algumas coisas simplesmente não funcionariam se reduzidas demais.

Casos como este precisam ser tratados com cuidado. Como você faria isso é usar uma coluna responsiva especial que é exibida somente quando um tamanho de tela é detectado, que é muito pequeno para exibir o conteúdo, com uma mensagem instruindo o usuário a exibir o conteúdo em um monitor maior.

Isso geralmente será algo que você deve evitar, mas em circunstâncias excepcionais é aceitável, desde que seja tratado com tato.

ilustração cortesia de

Conteúdo importante precisa ser óbvio

Embora deva ser óbvio, com tanta frequência não parece ser. O design não deve tornar coisas importantes sutis. Deve fazer o que é importante se destacar e ser visto pelo espectador primeiroe, no entanto, muitos designers tentam ser "criativos" e subjugar esses itens importantes.

Não cometa esse erro. Os usuários não podem permanecer no site por muito tempo, portanto, colocar a marca na frente dos olhos é crucial. Mesmo que saiam rapidamente, você pelo menos causou uma boa impressão. Mais tarde, quando encontrarem a marca, eles a reconhecerão como familiar e terão maior probabilidade de comprar de uma marca familiar (ou seja, “confiável”).

O que acontece é um tipo de auto-truque cognitivo, onde a mente consciente diz: "Se eu ouvi falar disso, deve ser bom." É por isso que as empresas estão dispostas a gastar milhões de dólares apenas para obter seu logotipo em um sinal de um evento esportivo.

O que mais é importante? Bem, a resposta para essa pergunta depende do tipo de site que você está construindo. O que você precisa fazer é pensar sobre o que você estaria procurando se visitar este site. Geralmente é muito diferente do que um executivo corporativo dirá que quer mostrar. As coisas que as pessoas vão procurar são as coisas importantes para incluir e destacar de forma proeminente.

Elementos estilísticos devem se misturar facilmente

Seus enfeites de design devem deixar o espectador espantado de uma boa maneira. Eles devem trazer prazer ao invés de aborrecimento. Muitas vezes os designers se empolgam e adicionam coisas a uma página para gerar o “fator uau” sem ter certeza de que essas coisas não têm o potencial de serem chatas.

Você também precisa ter certeza de que esses enfeites se degradam graciosamente. Quando eles não podem ser exibidos corretamente, eles não devem ser exibidos, e deve parecer que eles nunca estiveram lá.

gif cortesia de

Camadas para o resgate

Você pode adicionar esses enfeites através do uso de camadas. As pessoas que criam designs responsivos parecem ter esquecido que têm uma pilha 3D para trabalhar e, como resultado, estão perdendo o verdadeiro potencial do design responsivo.

Um exemplo de como isso funciona ... Imagine que você tenha um site em que você tenha um layout com vários pontos de interrupção. A maneira convencional de pensar faria com que você colocasse tudo em uma única camada, o que levaria à aglomeração em telas menores, forçando-o a deixar cair coisas, ou (como geralmente é o caso), exibindo um design hediondo.

Essas duas últimas palavras nunca devem ir juntas quando você está falando sobre algo que você criou. O bom é que você realmente pode evitar a situação através do uso de camadas.

Ao empilhar elementos estilísticos em uma camada separada, você pode ocultá-los ou exibi-los como quiser, independentemente da camada de conteúdo, e as duas camadas são totalmente responsivas.

Suponha que o usuário esteja visualizando o site em um monitor com uma resolução de 2560 x 1440. Nossa camada de conteúdo inferior ocupa toda a largura da tela, mas podemos definir margens que colocariam o conteúdo dentro de uma borda decorativa que poderia ser de qualquer tamanho que desejarmos.

Colocando essa borda decorativa na camada superior sem margens, podemos definir a largura para ser igual ao tamanho das margens na camada inferior.

À medida que o usuário desce por pontos de interrupção de tela diferentes, as duas camadas podem continuar trabalhando juntas dessa forma, e a camada superior pode até exibir bordas completamente diferentes para cada ponto de interrupção. Até no breakpoint final, descartamos inteiramente a camada superior, apenas configurando-a para ser ocultada.

O potencial aqui é óbvio. Você tem um grande número de anúncios de links irritantes na coluna da direita? Você pode escondê-los de usuários com telas pequenas e, além disso, pode adicioná-los novamente sob demanda usando jQuery.

Finalmente, uma maneira de separar adequadamente o conteúdo do design

É assim que as páginas web devem funcionar. Ao armazenar seus “extras” em uma camada completamente separada, você obtém uma separação ainda maior entre o conteúdo e o design, porque a camada superior pode ser afetada a qualquer momento sem afetar a camada inferior e vice-versa.

Divirta-se experimentando a liberdade que isso oferece a você, para que você possa brincar com todos os tipos de ideias criativas, enquanto o conteúdo em si não é afetado.

É exatamente o mesmo conceito que usar máquinas virtuais para sandbox. Não importa o que você faça, você não pode afetar o conteúdo da página, porque ele está isolado da camada decorativa.

imagem de cabeçalho cortesia de Matt Carlson

Bogdan Rancea

Bogdan é um membro fundador da Inspired Mag, acumulando quase 6 anos de experiência neste período. Em seu tempo livre, ele gosta de estudar música clássica e explorar artes visuais. Ele é muito obcecado com fixies também. Ele é dono do 5 já.