Erros que você provavelmente já cometeu como web designer

Todos os web designers querem perfeição. No entanto, eles são apenas humanos e os erros sempre podem aparecer. É tão fácil simplesmente ignorar alguns detalhes. Não há designer no mundo que não cometa erros e evitá-los é algo que normalmente acontece depois de algum tempo.

Vamos agora falar sobre alguns dos erros mais comuns que os web designers cometem constantemente, aqueles que você provavelmente já cometeu pelo menos uma vez. Corrija seus maus hábitos e supere os obstáculos dos quais você é culpado atualmente para que seu trabalho seja melhor do que nunca.

O uso do flash

No design de sites modernos, raramente vemos o Flash usado, mesmo que seja incrível no que pode fazer. Deparamo-nos com a possibilidade de proporcionar ao visitante uma experiência animada que impressiona mas há bagagem associada.

Existem diferentes problemas que aparecem com o uso do Flash em web design. Você tem um tempo de carregamento mais longo, problemas com usuários móveis por causa da falta de suporte e da linguagem de programação diferente usada. O número de dispositivos que atualmente suportam Flash é muito baixo. Além disso, no futuro, não esperamos um maior suporte. Novas bibliotecas aparecem como mais fortes e populares, especialmente aquelas baseadas em JavaScript como AngularJS e jQuary.

Usando imagens realmente grandes

A tendência moderna em web design é usar imagens grandes em todo o site. Isso definitivamente tornará a experiência mais agradável e o usuário terá algo ótimo para ver, mas existem algumas complicações que o designer e o desenvolvedor precisam estar cientes.

O carregamento da página é aumentado automaticamente sempre que imagens maiores são utilizadas. Isso pode levar a um cenário muito ruim para o visitante do site. A boa notícia é que temos acesso a várias ferramentas diferentes que ajudam muito na otimização de imagens. Aqueles que você pode querer considerar incluem:

• GruntJS-ImageMin
• ImageOptim

Aplicativos como o PrePros podem ajudar a otimizar imagens automaticamente enquanto estão dentro de aplicativos. O problema é que as ferramentas ajudarão os fluxos de trabalho, mas não resolverão o enorme problema associado ao tempo de carregamento, pelo menos não completamente.

Muitos designers agora usam SVG. Eles usam códigos para animar e desenhar gráficos em um ambiente de navegador. Assim, acabamos com um carregamento de página acelerado e vários elementos que chamam a atenção.

Também devemos destacar o fato de que imagens maiores complicarão o design da web devido ao fator não responsivo. Estamos falando de um elemento de design que definiu altura e largura. Os navegadores dimensionarão as imagens, mas temos o mesmo tamanho de arquivo.

O W3C agora trabalha usando “ <picture> ” como um elemento HTML5. Isso permitiria chamar imagens de tamanhos diferentes com base na largura da tela de visualização. Quando isso acontece, a experiência seria muito melhor para o espectador, mas até a implementação, você deve evitar as imagens maiores.

Usando largura e altura fixas

A adaptação é automaticamente restringida para os usuários quando os tamanhos fixos são codificados. Temos soluções alternativas, mas temos que sempre pensar em criar um padrão de web design que seja 100% responsivo. A altura fixa definida no CSS pode limitar a área visível para o usuário. Repassar isso é possível por meio de ajustes de consulta de mídia, mas o código extra adicionado levará a problemas de desempenho. Você realmente não precisa disso. Na maioria dos casos, você não deve usar tamanhos fixos. Eles devem ser evitados o máximo possível no ambiente moderno de web design.

Fazendo suposições sobre ajustes de design

Web designers normalmente trabalham com softwares como Adobe Photoshop ou Sketch. Quando o trabalho é concluído, a suposição comum é ter um ponto de interrupção específico no fluxo de trabalho responsivo. As larguras de tela que são vistas como padrão cobrem muitos tamanhos de tela diferentes, mas cobrir todos eles não é uma certeza. Temos milhares de dispositivos móveis disponíveis no mercado. Criar um design que funcione para tudo é muito difícil.

Quando você trabalha em larguras específicas, você precisa planejar e pensar no futuro se torna uma habilidade importante para o web designer. Você precisa ter certeza de que não são feitas suposições e que você realmente trabalharia dentro do navegador após o trabalho regular do editor gráfico terminar.

Usando muitos efeitos e animações

Você pode ver esse problema mesmo em alguns dos sites mais populares do mundo. Muitos sites estão oferecendo uma experiência de tirar o fôlego, com muitos oferecendo algo verdadeiramente único e incrível. No entanto, isso não significa adicionar tantos efeitos e animações quanto você poderia. É muito importante combinar os princípios do web design com o objetivo de encontrar a combinação certa entre funcionalidade e impacto gráfico.

Existem dois grandes problemas associados ao exagero com animações e efeitos:

• O tempo de carregamento da página é aumentado
• Os efeitos e a animação serão problemáticos para computadores mais antigos

Os hacks e animações populares no momento são aqueles que adicionam elementos fade in, up ou down. Eles podem parecer ótimos e farão com que os sites pareçam ótimos, mas isso não significa que você deva sempre usá-los. Veja se o carregamento geral da página seria demais para os dispositivos que a maioria dos visitantes usará e nunca se esqueça da velocidade de carregamento da página. Estes são muito importantes e precisam sempre oferecer ótimas experiências para os visitantes.

Links com estilo incorreto

Este é um erro que é muito mais comum do que você pode pensar no momento. Os links precisam sempre fazer o que fazem. Isso significa que quando um link tem um estilo impróprio, as pessoas não vão descobrir que são links. Precisamos sempre pensar nos visitantes para que os links sempre pareçam links. Você pode experimentar e não se ater ao sublinhado azul padrão, mas nunca deve exagerar.

Não usando DRY em CSS

Caso você não saiba disso, DRY significa “Não se repita”. É um método em web design e praticamente significa que o designer é ajudado a manter o código conciso e clonado. Apenas o uso do código necessário é recomendado em todos os momentos para o estilo do site.

Ao usar CSS tradicional, muita repetição é necessária com elementos específicos que são usados ​​dentro de outros elementos. Os seletores acabam sendo muito grandes e levarão muito tempo para serem escritos. Quando você usa classes no design em vez de estilizar cada elemento na página HTML, tudo se torna muito mais simples.

Uma ideia muito boa no momento é utilizar linguagens de pré-processamento como Sass. Eles são bastante úteis em termos de tecnologia CSS necessária. As linguagens usadas acelerarão o desenvolvimento e o design devido ao fato de incluirem recursos como variáveis, funções, mixins, aninhamentos e muito mais. O código produzido será então compilado no código CSS. Desenvolvedores e web designers agora podem usar menos linhas de código e a repetição pode ser facilmente evitada graças às linguagens.

Degradação Graciosa

Podemos definir Graceful Degradation como uma prática de construção de funcionalidade da web capaz de oferecer um nível de experiência de usuário específico em um navegador moderno, enquanto degrada para níveis mais baixos de experiência do usuário em navegadores mais antigos. Isso soa um pouco complexo, mas como exemplo, podemos discutir o suporte ao Internet Explorer 8 e 7. Você ficaria surpreso ao saber que a maioria dos usuários simplesmente não atualiza os navegadores por longos períodos de tempo. Por causa disso, você precisa adicionar degradação graciosa para que o suporte adequado seja implementado para ambas as versões do navegador.

Sites modernos são fáceis de desenvolver, mas em um momento posterior você pode acabar percebendo o fato de que em um navegador mais antigo, as páginas parecem muito ruins por causa de dependências específicas.

Aprimoramento progressivo

Isso é algo semelhante à Degradação Graciosa mencionada acima. A diferença é que o processo é tratado de forma inversa, começando com o nível de experiência básico que é suportado em cada navegador da web. Em seguida, o designer/desenvolvedor adiciona funcionalidade aprimorada que está disponível para os navegadores que podem usá-la.

Tanto esta opção quanto a acima são complicadas. Eles são normalmente usados ​​apenas pelos designers realmente bons. No entanto, com muitos navegadores disponíveis agora, precisamos considerar seriamente as opções. Os web designers normalmente fazem com que os clientes decidam exatamente o que será suportado. Você precisa tentar usar essas abordagens para oferecer uma experiência realmente ótima para os usuários que são particularmente ativos e dentro do público-alvo.

Problemas de navegação - não ser amigável ao usuário

Uma das partes mais importantes de qualquer site é a navegação. O designer tem que ser capaz de tornar a experiência do visitante natural. O objetivo é tornar a navegação realmente simples e intuitiva. Um usuário entenderá automaticamente que a experiência é adequada quando o design levar esse elemento em consideração.

Sempre que a experiência do usuário é ruim, vemos os visitantes frustrados. Eles simplesmente não visitam um site específico novamente e procuram em outras páginas as soluções para seus problemas. A usabilidade precisa ser sempre considerada pelo designer. O design tem que parecer ótimo, mas você nunca deve esquecer a funcionalidade. A facilidade de uso é necessária e a falta disso tornaria todo o design inútil.

Falta de foco no conteúdo

“A forma segue a função” é um princípio de arquitetura muito comum que surgiu no século XX, bem durante a fase de design industrial da arquitetura moderna. Este é um princípio que você precisa lembrar em todos os momentos em web design.

Web e design gráfico são realmente semelhantes à arquitetura moderna em termos de funcionalidade necessária. A forma do objeto deve primeiro ser baseada na finalidade ou função pretendida. Em termos de sites, podemos vê-los como bancos de dados de informações que estão espalhados por toda a internet. O usuário visitará um site para obter dados específicos. É aqui que o conteúdo entra em cena para oferecer esses dados. Como o visitante acaba em um site e não encontra os dados, ele vai procurá-los em outro lugar, sem sequer olhar para o design. Ao mesmo tempo, caso o design torne muito difícil localizar ou digerir os dados, o mesmo resultado acontece.

Os usuários da Internet agora querem ter acesso à informação e querem que esse acesso seja rápido. Form Over Function acaba sendo muito importante no web design. Não levar em conta esse princípio significa que o foco é colocado na aparência e não no conteúdo oferecido. Como resultado, os sites não serão realmente populares. O conteúdo precisa se destacar o tempo todo.

Conclusões

Em suas raízes, os erros mais comuns de web design estão relacionados a tentar criar algo realmente bonito e único, sem levar em consideração o motivo pelo qual os visitantes realmente acessam um site. Por isso, você quer sempre ter a paciência necessária para combinar um design realmente bom com funcionalidade completa.

Sempre crie sites que sejam funcionais e continue aprendendo novas tecnologias com o passar do tempo. Os melhores web designers do mundo continuam aprendendo e sempre atualizados com tudo o que pode e não pode ser feito. Você deseja criar seu web design, conversar com o cliente e, em seguida, garantir que os visitantes apreciem o que é oferecido. Isso é muito mais fácil dizer do que fazer, mas com o tempo, tudo se torna muito mais fácil.

Certifique-se de sempre levar o tempo necessário para criar algo realmente ótimo. Outro erro não mencionado no web design é não se permitir o tempo necessário para realmente criar o design do site perfeito. Isso normalmente acontece porque os clientes precisam que o trabalho seja feito no menor período de tempo. Certifique-se de que você sempre tenha tempo suficiente para criar o design da web estelar que você sabe que pode.