Qual é o site com pior design?
Respostas
Diferenças entre Web Design Bom e Ruim
As tendências de design da Web estão mudando o tempo todo, portanto, os princípios de design na Web são realmente difíceis de definir; no entanto, ainda existem regras de ouro que resistem ao teste do tempo. Verifiquei centenas de sites e descobri vários princípios de design. Esses incluem:
- Uma navegação fácil de entender
- Uso adequado de animação
- Bom esquema de cores
- Layout limpo
- Uma interface visualmente atraente
- Escolher um design adequado ao tópico ou tema
- Manter os elementos de design e o conteúdo organizados
Os princípios acima são apenas algumas regras de web design, mas todos indicam claramente que um bom web design deve ser esteticamente agradável, fácil de entender e fácil de usar. Ou seja, um bom site deve proporcionar uma excelente experiência ao usuário.
Os 10 principais exemplos de web design ruins
1. Arngren - Design no caos e bagunça pela falta de grade
Não quero ser má, mas realmente dói meus olhos toda vez que vejo. O site literalmente coloca os gráficos, conteúdo e links em qualquer lugar. Todos os elementos juntos tornam o site uma bagunça incompreensível.
Por que Arngren é um site mal projetado?
1) O maior problema é que o sit não usa grade.
2) Estrutura de navegação inacreditável.
3) Tipografia pobre torna ilegível.
4) Uso aleatório de cores.
Uma grade pode deixar tudo limpo e organizado em seu site. Ele mantém todos os seus elementos em seus devidos lugares e ajuda você a determinar seu tamanho, o tamanho e o espaço do texto, etc. Com uma grade, você pode criar uma interface consistente e bem projetada.
Um bom exemplo de web design do uso da grade em web design - tudo é organizado.
2. Design tipográfico - O design carece de contraste
Um contraste claro e poderoso entre os elementos pode ajudar os usuários a saber qual é a informação central da página. Isso ajuda o usuário a ler e entender melhor as informações. Neste site, a cor de fundo e a cor do texto são bem parecidas, deixando um contraste bem fraco. O baixo contraste faz com que o texto fique embaçado aos olhos. Além disso, o tamanho pequeno da fonte torna a legibilidade do texto extremamente ruim.
Um bom design da web deve garantir que o texto e as imagens sejam altamente legíveis. Na verdade, não é difícil melhorar a legibilidade, basta aproveitar tudo - a cor, o espaço e o tamanho para que tenham alto contraste. Por exemplo, o bom uso da tipografia faz com que as informações importantes sejam destacadas por tamanhos de fonte diferentes, e o contraste entre as cores potencializa os efeitos visuais.
Um bom design da web com contraste adequado deve ser assim:
3. Theweddinglens - Design não responsivo
Você sempre deve usar uma estrutura de design responsiva ou adotar outras soluções melhores. Sua página da web precisa ser executada no celular sem problemas, assim como no site. Neste site, ao carregar no celular, ainda mostra uma página inteira com uma interface tão pobre de textos simples. Ele não tem uma versão móvel para visualizar, portanto, não pode ser usado no telefone. Vou desistir de um site como este.
O bom web design - design responsivo.
4. Pacific Northwest X-Ray Inc - o esquema de cores desagradável
Protótipo mais rápido, mais inteligente e mais fácil com Mockplus
Comece GRATUITAMENTE
Este web design é como uma paleta de cores mistas, que contém muitas cores conflitantes e cores de texto, e também misturadas com a cor de fundo. Tudo isso dificulta a leitura dos usuários. Além disso, a navegação é bastante complicada.
Um bom web design deve usar cores adequadamente para criar uma interface e uma atmosfera bonitas e concisas. Deve facilitar a visão do usuário e fazê-lo operar sem esforço, como este:
Mais informações sobre o esquema de cores: Como usar cores no design da interface do usuário com sabedoria para criar uma interface de interface do usuário perfeita?
5. Gatesnfences - Navegação e operações ruins
A maior característica da navegação de um site é evidente. Quando um usuário faz login em seu site, ele deve entender o que pode fazer a seguir e quais ações tomar para chegar ao destino. A navegação deve ser atraente e geralmente deve estar no topo da página. Não tente projetar uma navegação como este site. Isso só deixa o usuário mais confuso.
Além disso, o conteúdo da navegação e as interações também precisam ser claros, portanto, não use a barra de rolagem horizontal ou outro design de animação incomum. Se o fizer, você deve pelo menos dar ao usuário algumas dicas para que ele saiba como seu site funciona.
Uma boa navegação de web design deve ser assim:
6. Uat - Link ruim e configurações de CTA erradas
A mess of links and dead links are both major errors of the website. You should check your links manually or use tools such as the Website Link Checker often.
Also, you need to make sure of the functionality of the links. Especially links in the text, you should make them obvious enough and easy to click. For example, do not add a lot of text links within your text. When browsing the text on a small mobile screen, it will be difficult for users to tap on the correct link.
On this site, each moving small picture is actually a link. Leave along it’s moving all the time, the text irself is very vague, so the user does not know what information is displayed.
The CTA settings must be clear too. Do not give users too many CTA choices at the same level because it will cost the user more time to figure which one they prefer to choose. Have a look at the example:
Too many CTAs of the same level will make the user more confused. Also, you should retain only one CTA to highlight the key point. The following is a well-designed CTA.
7. Nmg-group - Unclear interface image background
The picture you use on the web page can be the front door of your website. A good-looking picture makes your site more beautiful and comfortable. Some designer even uses the entire picture as a background image.
On this site, the design is very good actually, but when looking closely you will find out the text and background images are too overwhelmed. The website's background image is covered by other elements, so the whole interface is actually broken.
Using transparent buttons would be a better choice here. That is, when designing buttons in the web page, you should abandon complex colors, styles, and textures. Instead, just outline the wireframe and use text only indicating the function. Here is a better one.
8. Wateronwheels - Inconsistent style
If you want to keep the page smooth and concise, then do not use too much element of different styles. On this site, the text area uses contrasting colors and different font sizes to highlight the info. But the text on the second level also uses a highlight blue color, which in fact breaks the unity and balanced hierarchical interface.
Unity is crucial to the overall beauty and fluency of the web interface, see it below:
9. Greatdreams - Not have any white space
Todo o site parece colorido, contrastante e proeminente, e também adequado ao tema do suco infantil. Mas muitas cores muito brilhantes são muito misturadas e não há espaço algum. Parece mais uma pintura colorida do que um site de negócios online. Além disso, a combinação de cores exageradas faz com que a legibilidade dos textos fique muito ruim. Além disso, o site não tinha nenhuma navegação, deixando você rolar até o final para encontrar informações relevantes.
Um bom web design com espaço em branco é simples e limpo:
Acima estão algumas listas de sites ruins. Mas também existem outros erros de web design:
1. Tocando música automaticamente (sem notificar o usuário).
2. Tempos de carregamento de página longos . Quanto mais tempo demorar para carregar, maior a probabilidade de o usuário sair do seu site.
3. A página da web é muito longa . Quantos usuários você acha que estão interessados em ir até o final da sua página? Não tente testar a paciência do usuário.
3. Informações expiradas . As informações que não forem atualizadas enganarão o usuário e farão com que seu site pareça pouco profissional.
5. Página isolada . O usuário não sabe como retornar à página inicial. Isso oferece uma experiência ruim.
6. Falta de conteúdo interativo. Se você não conseguir fornecer uma maneira para os usuários expressarem emoções e ideias, seu site pode morrer lentamente.
Design de protótipo - primeiro passo para iniciar o design da Web
Tudo bem se você cometer alguns dos erros mencionados acima. A prática leva à perfeição, você só precisa de mais prática. Minha sugestão é começar com o design do protótipo.
Você pode usar a ferramenta de protótipo mais rápida e fácil , Mockplus, para iniciar seu web design. Mockplus oferece suporte a projetos da web. Agora vou mostrar como criar páginas da web no Mockplus.
Passo 1: Abra o Mockplus e crie um projeto web
Na página inicial, você pode selecionar projetos individuais ou projetos de equipe. Depois de selecionar, escolha o projeto da web na janela pop-up. Aqui, você também pode definir o tamanho da página do site.
Passo 2: Crie livremente no Mockplus
O Mockplus tem mais de 200 componentes altamente projetados e mais de 3.000 ícones vetoriais que podem ajudá-lo a projetar rapidamente. Aqui estão algumas dicas para você:
1) Hierarquia do texto: O texto na barra de navegação, título principal, subtítulos e corpo devem ser diferentes. Você pode usar os componentes da área de texto e definir o tamanho do texto no Mockplus para realçar a hierarquia do texto.
2) Desenho rápido: você pode usar o pintor de formatos e o Preenchimento automático de dados para finalizar seu desenho rapidamente. O pintor de formato pode fazer com que todos os textos sejam apresentados no mesmo formato, e o preenchimento automático de dados pode preencher automaticamente dados de texto e dados de imagem.
3) Configurações de propriedade: Você pode definir a cor e a transparência dos componentes.
4) Importação de imagem: Um componente de imagem dedicado pode importar as imagens que você deseja como imagem de fundo da página da web, e você também pode desenhá-la livremente.
Tente você mesmo.
Design Colaborativo Online - Evite Web Design Ruim e Erros desde o Início
Para evitar web designs ruins e erros comuns mencionados acima, é necessário que os designers permitam que desenvolvedores, gerentes de produto e outros membros da equipe de produto participem do design do site desde o início e coletem sugestões e feedback deles oportunamente.
Sobre isso, uma ferramenta útil de colaboração de design online, como o Mockplus iDoc, pode ser um bom começo para você.
Como designers de sites, você pode simplesmente importar designs de sites com detalhes de ativos e do Photoshop/Adobe XD/Sketch (usando plug-ins Mockplus iDoc ) com um clique, coletar feedback e sugestões de outros membros da equipe em tempo hábil e criar protótipos interativos para compartilhar com outras pessoas .
Como desenvolvedores de front-end de sites, você pode simplesmente visualizar todos os designs de sites e deixar comentários livremente, pesquisar elementos e cores duplicados com facilidade e verificar e baixar recursos de design rapidamente.
Como gerente de produto, você pode simplesmente verificar o processo de design facilmente, fazer upload e visualizar documentos livremente para gerenciar projetos de design de sites com mais facilidade.
No geral, o Mockplus iDoc pode conectar efetivamente todo o fluxo de trabalho de design do produto desde o início e ajudá-lo a evitar muitos erros de design do site.
Resumindo
O design de um site precisa atender à funcionalidade do próprio site. Ele também precisa levar em conta a beleza e outros requisitos. Espero que os 9 exemplos de web design ruins acima sejam úteis para você e o ajudem a entender o que é um web design ruim e como evitá-los no futuro.
Mockplus iDoc, designs de transferência com especificações precisas, ativos, trechos de código automaticamente
Comece GRATUITAMENTE
Tweetar
Nossa, geralmente não sou de reclamar, mas...
Acho que Miller Paint (por volta de junho de 2013) merece menção a esse respeito.
Na verdade, fiquei um pouco chocado ao ver este. "Bem-vindo ao nosso novo site" .. "Clique aqui" ... caixas no estilo dos anos 90, layouts de grade incoerentes que não cabem em nenhum dispositivo... pesquisas que dizem "Pesquisar ..." três vezes, cores estranhas, espaçamento inútil em branco, falta de conteúdo, experiência do usuário pouco clara, ... você poderia escrever um livro sobre isso.