Por que pensar no futuro é crucial no web design

A diferença entre construir um ótimo site e um medíocre geralmente é determinada muito cedo. Muitas vezes é uma questão de um web designer pintar seu projeto em um “canto” virtual. É aí que um design se torna inflexível e incapaz de acomodar vários casos de uso.

Isso tende a acontecer na fase de prototipagem. Gastamos muito tempo e energia criativa em uma ideia que parece incrível. Nossos clientes podem adorar tanto quanto nós. Mas somente quando começamos a construí-lo é que começamos a entender completamente as consequências.

Um mockup de design serve como bússola para nossos projetos de sites. Se não pensarmos no futuro em relação ao que certos elementos exigem, isso pode significar ficar preso em uma situação ruim. O resultado final é um site que precisa fazer alguns compromissos sérios para funcionar em diferentes dispositivos e navegadores. Isso pode impactar negativamente a acessibilidade, o desempenho e a adesão às melhores práticas.

Felizmente, algum planejamento ajudará você a evitar um processo de compilação confuso. Vamos dar uma olhada em alguns itens importantes a serem considerados antes de compartilhar suas ideias com um cliente.

Como os elementos se adaptam a diferentes telas

Há uma razão pela qual se fala tanto de uma abordagem “mobile first” para web design. Em essência, isso nos permite começar com o essencial de um site. A partir daí, podemos adicionar e aprimorar à medida que a janela de visualização aumenta.

Ainda assim, cada um de nós tem suas próprias preferências para construir protótipos. Para aqueles que ainda usam uma abordagem baseada em desktop, é importante pensar em como todos esses elementos de design sofisticados funcionarão em um telefone.

Se você planeja implementar CSS Grid ou Flexbox, eles ajudarão muito em termos de fazer o melhor uso do espaço de tela disponível. Mas outros elementos podem exigir mais esforço para funcionar.

Grandes controles deslizantes, por exemplo, podem se tornar muito difíceis de usar em telas pequenas. Imagens complexas podem não ser tão impactantes e o texto pode ultrapassar os limites. O desempenho também pode atrasar.

Nesse caso, talvez você precise decidir se vale a pena exibir o controle deslizante no celular. Ou talvez possa ser refatorado para melhor se adaptar ao trabalho em todas as situações.

Impactos de acessibilidade

O design começa com a escolha das fontes e cores apropriadas. Ambos estão profundamente ligados ao branding e à acessibilidade.

As fontes devem ser nítidas e dimensionadas para legibilidade. Embora o script sofisticado e o tipo decorativo possam parecer bonitos, eles precisam ser grandes o suficiente para serem lidos e restritos ao uso em títulos. Se esses requisitos não puderem ser razoavelmente atendidos, talvez seja melhor eliminá-los completamente do seu projeto.

Além disso, o contraste de cores também deve ser uma grande preocupação. As cores de fundo e de primeiro plano devem atingir uma taxa de contraste aceitável para serem consideradas acessíveis. Além disso, é apenas uma boa prática.

Se você não tiver certeza sobre sua paleta, use uma ferramenta online para determinar sua adequação. Às vezes, até mesmo um pequeno ajuste é tudo o que é necessário para passar pelos padrões WCAG AA.

Além desses dois itens, também é bom ter um plano de como você exibirá elementos como ícones. Eles são intuitivos? Serão acompanhados de texto?

Compatibilidade com versões anteriores

Nem todo site precisa ser totalmente compatível com, digamos, o Internet Explorer 9. E os navegadores legados não devem necessariamente nos impedir de usar o CSS ou JavaScript mais recente. Mas algum pensamento deve ser colocado em compatibilidade com versões anteriores.

De particular preocupação são os elementos de design que tornarão um site completamente inutilizável em software mais antigo. Mesmo que um navegador específico represente uma pequena porcentagem dos visitantes do seu site, isso ainda deixa algumas conversões em potencial na mesa.

Vale a pena considerar o efeito que as decisões de design terão sobre esses usuários. Os fallbacks disponíveis para uma determinada tecnologia podem ser suficientes para manter as coisas com aparência decente e utilizável. Ainda melhor é que eles podem ser bastante simples de implementar.

Antigamente, esperava-se que os designers garantissem que os elementos parecessem e funcionassem exatamente da mesma forma em todos os navegadores. Isso pode ser pedir demais nos dias de hoje. Contanto que um usuário possa navegar e consumir conteúdo em alguns dos softwares mais antigos, isso pode ser suficiente.

Cenários que ainda não aconteceram

Mesmo os menores sites terão a necessidade de evoluir ao longo do tempo. À medida que novos tipos de conteúdo são adicionados, eles precisam ser considerados no design. Se você não estiver preparado, a implementação desses itens pode entrar em conflito com o que já existe.

Pense em adicionar uma série de vídeos, por exemplo. Embora o processo de adicionar esse conteúdo possa ser bastante fácil – como ele se encaixará na aparência que você já estabeleceu? Você utilizará uma interface de usuário padrão do navegador ou criará algo para combinar com sua marca?

Embora nem sempre você possa prever o futuro, pode planejar todos os tipos de possibilidades. Isso é parte do que um sistema de design permite que você realize. Ao definir algumas diretrizes padrão desde o início, você terá mais facilidade em lidar com adições futuras.

A realidade é que o que projetamos hoje provavelmente mudará no futuro. Portanto, vale a pena estar pronto para essa eventualidade.

Construindo certo na primeira vez

Criar esse primeiro mockup é muito mais do que apenas fazer as coisas parecerem boas. Vai além de impressionar seus clientes. Na verdade, é um exercício que nos obriga a olhar para o nosso projeto como um todo.

A estética deve ser agradável aos olhos. Mas o design também deve ser acessível e capaz de se adaptar a várias telas. Além disso, pode ter que acomodar diferentes tipos de conteúdo à medida que as coisas evoluem.

Se isso soa avassalador – respire fundo. É aqui que sua experiência e conhecimento podem vir em socorro. As ferramentas certas também podem contribuir.

Pense no que funcionou (e no que não funcionou) em seus projetos anteriores. Procure maneiras de implementar recursos que sejam resilientes. Faça isso e você estará no caminho para um projeto de sucesso!