Por que as pessoas continuam me dizendo que meu site está horrível?

Eu desenvolvi um site e recentemente estava procurando emprego. Praticamente todos os entrevistadores, depois de dar uma rápida olhada nele, disseram-me que meu site foi projetado terrivelmente (mas gostou do conceito). Devo mencionar que sou engenheiro de software, mas também estou realmente tentando acertar a parte do design. Eu tenho tentado redesenhar, mas não tenho ideia do que há para mudar.

Veja como fica agora:

Eu realmente aprecio algumas dicas específicas para o meu site ou sobre como melhorar o design de um site em geral (visitei alguns sites que explicam como criar sites, mas isso não parece ajudar :)).

Edit 1 : Como eu disse, as pessoas tendem a ter uma impressão ruim apenas de uma olhada, mesmo antes de eu apresentar a funcionalidade. Isso me faz pensar que há algo errado com as cores que escolhi ou o layout. E eu estava pensando que um design de site específico pode ser útil para designers lá fora, assim como uma história específica é educativa para estudantes de literatura e algoritmos específicos são úteis para estudantes de software. Obrigado.

Uma observação lateral: Funcionalidade: se isso importa, eis o que o site pretende realizar (muito brevemente): Os usuários podem adicionar tópicos e, para cada tópico, adicionar perguntas juntamente com suas respostas . O site cria "testes" e "questionários" para os usuários fazerem e compararem seus resultados

Edição 2 : Aqui está outra tela de impressão:

Editar 3 : Só para esclarecer, uma dessas capturas de tela não é minha página de destino. São páginas de conteúdo específicas de tópicos.

Antes de tudo, quero enfatizar que tudo nesta resposta é apenas MHO, não uma verdade universal;).

Como engenheiro de software, você sabe como é importante em todo projeto ter uma estrutura clara e bem definida - a ordem. Praticamente o mesmo se aplica às artes e design "visuais". Costumo ver o design como "encapsulamento visual". O designer conhece a estrutura das informações que deseja transmitir ao seu público-alvo. Por exemplo: ele cria um livro. Ele sabe que este livro é dividido em capítulos e cada capítulo em sub-capítulos. Ele sabe que o assunto principal é anotado por algumas notas (notas de margem, notas de rodapé, notas de rodapé). Agora ele deve usar seu "arsenal" para tornar essa estrutura "visível". Ele pode usar um tamanho e forma de fonte e preencher todas as páginas consecutivas com um monte de glifos, mas isso significaria que o leitor teria que ler, interpretar e entender tudo para conhecer a estrutura de informações contida. O designer também pode "sugerir" ao leitor a importância / nível de várias informações. Um dos truques é usar o tamanho da fonte para mostrar a gradação dos "dados" apresentados. Se isso for feito, o leitor não precisará ler (muito menos interpretar) o texto para diferenciar entre o assunto principal e, por exemplo, as notas de rodapé. A importância e a "posição" recíproca da informação são "descritas" visualmente. O leitor é capaz de "decapsular" informações facilmente. Também se pode vê-lo como uma espécie de processo de serialização / desserialização que ocorre no domínio visual (as informações abstratas são lançadas no espaço "visual"). Isso é uma simplificação do greeeeat, mas acho que, para começar, é bom o suficiente. Se isso for feito, o leitor não precisará ler (muito menos interpretar) o texto para diferenciar entre o assunto principal e, por exemplo, as notas de rodapé. A importância e a "posição" recíproca da informação são "descritas" visualmente. O leitor é capaz de "decapsular" informações facilmente. Também se pode vê-lo como uma espécie de processo de serialização / desserialização que ocorre no domínio visual (as informações abstratas são lançadas no espaço "visual"). Isso é uma simplificação do greeeeat, mas acho que, para começar, é bom o suficiente. Se isso for feito, o leitor não precisará ler (muito menos interpretar) o texto para diferenciar entre o assunto principal e, por exemplo, as notas de rodapé. A importância e a "posição" recíproca da informação são "descritas" visualmente. O leitor é capaz de "decapsular" informações facilmente. Também se pode vê-lo como uma espécie de processo de serialização / desserialização que ocorre no domínio visual (as informações abstratas são lançadas no espaço "visual"). Isso é uma simplificação do greeeeat, mas acho que, para começar, é bom o suficiente. Também se pode vê-lo como uma espécie de processo de serialização / desserialização que ocorre no domínio visual (as informações abstratas são lançadas no espaço "visual"). Isso é uma simplificação do greeeeat, mas acho que, para começar, é bom o suficiente. Também se pode vê-lo como uma espécie de processo de serialização / desserialização que ocorre no domínio visual (as informações abstratas são lançadas no espaço "visual"). Isso é uma simplificação do greeeeat, mas acho que, para começar, é bom o suficiente.

Agora, quanto ao seu design. Eu, pessoalmente, não sei por onde começar a olhar para ele. Eu tenho que ler tudo, entender tudo, pensar sobre tudo e, em seguida, colocar as coisas de volta na ordem que julgo correta. Isso é muito trabalho para mim como leitor. É difícil definir o que é mais e o que menos importante aqui em um vislumbre. Mesmo quando tomo meu tempo para conhecer o conteúdo, ainda não existem muitos "marcos" visuais que me ajudam a encontrar um caminho para alguns dados específicos. Pense: quando você deixa o carro no estacionamento, está procurando um ponto de referência para ajudá-lo a se lembraronde está o seu carro Tente pensar por um momento como você usa sites, como é capaz de lembrar onde estão as opções / links que você usa com mais frequência. Você não está procurando um link como um "segundo quadrado à direita deste logotipo vermelho na parte superior do site"? Sem leitura - apenas lembrando a imagem / localização.

Eu acho que o maior problema aqui não é a “feia” - acho que é a falta de graduação da importância. Tente “guiar” o visitante do seu site através dos seus dados. O que você quer que ele veja primeiro? Para onde ir a partir daí? Dessa forma, você está criando "um fluxo de leitura" / "um fluxo de trabalho". Você induz (aceita talvez?;)) Um caminho específico que seus leitores seguirão. Se houver algumas rotas, tente torná-las o mais separadas possível (por exemplo, um “caminho” no menu - algo como um sumário / descrição geral / descrição da estrutura, um “caminho” no formulário de login, etc. ) Eu acho que se você corrigir isso, seu design definitivamente melhorará. Talvez não fique "bonito" imediatamente, mas pelo menos será mais acessível e compreensível e, como efeito colateral, será mais agradável esteticamente.

Espero que isso faça algum sentido para você :).

Algumas coisas que noto que não gosto particularmente são:

• Isso se parece mais com a parte "back-end" ou "admin" de um site, particularmente alguma forma de sistema de gerenciamento de conteúdo, em vez do "front-end" ou do que as pessoas veem. Em particular, PhpMyAdmin vem à mente.
• Inconsistência nas cores sendo usadas. O logotipo (que acho que é um pouco apertado) já tem algumas cores, então essas cores podem ser usadas para desenvolver um esquema de cores para o site. Esse esquema de cores deve se aplicar a coisas como faixas para as tabelas, cores para links e assim por diante.
• Existem muitos visuais contrastantes. Eu geralmente defendo mais simplicidade e padronização no design. No entanto, nesta captura de tela, vemos:
  • A caixa "Tudo" é uma caixa angular direita rígida.
  • A navegação da barra lateral usa cantos arredondados.
  • Os subtópicos usam um gradiente radial.
  • Nenhuma das caixas tem "preenchimento" suficiente: Observe como as palavras comprimidas nos links "subtópicos" aparecem; eles ficariam muito melhores se houvesse algum espaço ao seu redor.

Definitivamente, leia atentamente a resposta de @thebodzio , pois é muito precisa: um novo visitante do site dificilmente saberia onde procurar primeiro, e isso geralmente é um sinal de design "ruim".

Existem algumas boas respostas aqui, então vou apontar alguns exemplos concretos. Para mim, a estrutura básica da página parece decente; como outros já disseram, um layout de três colunas é um grampo do design da web há anos. A maioria dos problemas está no design gráfico.

Dito isto, a importância relativa "Subtópicos" parece estranha:

• O título deve ser algo como "Subtópicos"?

• Está à direita e parece mais importante que o cabeçalho do tópico; talvez você possa incorporá-lo ao corpo do tópico principal para torná-lo mais subordinado?

• O peso do cabeçalho "Subtópicos" faz com que pareça mais pesado (mais importante) do que a trilha de navegação do tópico.

Para o design gráfico, você pode se perguntar sobre os princípios básicos de cada elemento da página:

• Contraste : elementos que não são a mesma coisa devem parecer diferentes o suficiente para que seus usuários possam diferenciá-los imediatamente.

• Repetição : os designs só ficam bons se as coisas forem iguais. Em outras palavras, almeje consistência. Isso pode assumir a forma de todos os seus fundos com a mesma saturação e luminosidade, mas com tonalidades variadas ou usando gradientes em todos os títulos (ou sem gradientes). Por exemplo:

  • o plano de fundo "Sub-tópicos" é o único com gradiente (o botão é uma coisa diferente, portanto, ter um gradiente nele faz com que pareça diferente, colocando o contraste em jogo)

  • o destaque de navegação à esquerda possui cantos arredondados, enquanto a maioria dos outros elementos possui cantos quadrados nítidos

  • a cor das "Preferências do questionário" (grafada incorretamente) não aparece no logotipo, que você estava tentando usar nas cores; tente obter a mesma tonalidade para os elementos da página que as cores do livro

(De fato, existe uma maneira fácil de garantir que as cores combinem: comece com uma única cor e depois varie apenas uma de matiz, saturação ou luminosidade. Todas as cores geradas por esse método devem ficar bem juntas.)

• Alinhamento : os alinhamentos tornam os elementos conectados em um todo, em vez de parecerem dispersos e incoerentes. Por exemplo:

  • a caixa "Lembrar-me" é menor que o outro texto ao lado

  • "Preferências do questionário" está mais à direita do que a trilha de tópicos acima

  • as preferências são centralizadas, enquanto a maioria dos outros textos do corpo é alinhada à esquerda

• Proximidade : aproximar objetos os torna agrupados na mente do usuário, embora deixar muito pouco espaço ao redor dos objetos os torne pequenos e difíceis de ver como itens individuais. Por exemplo:

  • não há espaço em torno de tópicos ou tópicos secundários (na minha opinião, esse é um dos recursos mais comuns que me diz que o design gráfico não foi totalmente desenvolvido)

  • o espaçamento dos parágrafos abaixo do cabeçalho do corpo principal é inconsistente

Há muito mais sobre os princípios de design na web, mas esses são quatro dos mais importantes.

Eu acho que o principal problema com o design do seu site não é tanto o design gráfico quanto o design da interface do usuário . Especificamente, quando olho para as capturas de tela acima, a pergunta que faço a mim mesma não é " Legal, o que devo tentar primeiro? ", Mas " Que diabos é isso e o que devo fazer com isso? "

Esse é um problema comum em sites e outras interfaces de usuário projetadas por engenheiros (ou outros especialistas em domínio): eles já sabem como o sistema deve ser usado; portanto, para eles, tudo fica bem desde que todos os recursos necessários sejam convenientemente acessíveis . Infelizmente, isso geralmente leva a que todos os recursos sejam igualmente visíveis e acessíveis, dando ao novo usuário muito poucas pistas sobre por onde começar.

O design gráfico tem algum efeito aqui, na medida em que um design gráfico ruim pode confundir qualquer interface do usuário, enquanto bons gráficos podem aprimorar a interface do usuário, tornando claro o significado e os relacionamentos de diferentes elementos da interface e chamando a atenção do usuário para os elementos mais importantes. Mas, fundamentalmente, o problema é mais sobre o que apresentar ao usuário e como estruturá-lo do que sobre como torná-lo bonito.

OK, vamos ser um pouco mais específicos. Meu primeiro conselho seria: simplifique! Você pode se inspirar no design original da primeira página do Google , que basicamente tinha três elementos: o logotipo, a caixa de pesquisa e dois botões (e pode-se argumentar que o segundo botão era desnecessário). Ah, e alguns links para outras páginas com mais coisas - que foram claramente marcadas como de importância secundária por serem inferiores, em uma fonte pequena e / ou cinza - e um aviso de direitos autorais, aparentemente adicionado como uma dica sutil para usuários que a página realmente terminou aí.

Ou dê uma olhada no Doodle , outra empresa com um nome ruim e um design simples, mas eficaz, da primeira página. Por conveniência, tirei uma captura de tela da primeira página e adicionei alguns rabiscos vermelhos no topo:

O Doodle é um site muito bom para comparar o seu, já que o site, como o seu, é basicamente uma estrutura para permitir que os usuários criem seu próprio conteúdo (questionários para você, agendas de eventos para eles) e convidar outros usuários a interagir com ele. A grande diferença é que, diferentemente do seu design, o pessoal do Doodle gasta muito esforço facilitando seus usuários suavemente na interface, em vez de apenas jogá-los no fundo da piscina e esperar que eles afundem ou nadem.

Olhando para a primeira página, especialmente sem os meus rabiscos, o óbvio é que há pouca coisa - especialmente coisas irrelevantes - nela. Claro, há um monte de pequenas notas e links na parte inferior da página, mas isso é tudo "abaixo da dobra" e algo que os novos usuários simplesmente ignoram. A segunda coisa mais visível, em grandes letras amigáveis, exatamente onde o usuário provavelmente procurará primeiro, é um resumo de oito (!) Palavras que explica o que é o site. O mais visível é o grande gráfico que mostra, em fotos simples, as principais etapas do fluxo de trabalho, fazendo com que tudo pareça fácil e convidativo. E entre eles existe um grande botão que convida o usuário a clicar nele e começar.

De fato, na parte superior da página, existem apenas quatro itens clicáveis ​​(excluindo o logotipo, que é clicável - como os usuários esperam que seja - mas apenas o leva de volta à página inicial): dois links para a primeira etapa no assistente de agendamento de eventos, um para um exemplo fixo para usuários não confiantes o suficiente para entrar direto e um link discreto no canto superior direito que abre uma caixa de diálogo de login pop-up para usuários estabelecidos. Isso é tudo.

E o seu site, como ele é? A primeira coisa na sua captura de tela que me parece algo que pode valer a pena olhar são os títulos verdes, que são pelo menos curtos, em letras grandes e no meio do que parece ser a "área de conteúdo". Infelizmente, não há muito interesse lá - a seção "Informações sobre o tópico" possui apenas alguns metadados triviais que devem estar em letras pequenas em algum canto, a seção "Sub-tópicos" possui alguns links (para outras páginas semelhantes?) Que aparecem para duplicar aqueles no canto superior direito, e a seção "Recursos" está simplesmente vazia. Além disso, mesmo depois de ler tudo isso, ainda não tenho idéia do que é o site ou o que posso fazer com ele.

Então, o que posso fazer com o seu site? Bem, você diz que eu posso criar e fazer testes, e que tal colocar links / botões grandes e atraentes na primeira página que dizem " Fazer um teste " e " Criar um teste "? (O primeiro deve ser mais proeminente, já que é provável que um novo usuário faça um teste do que crie um, mas incluir o segundo na primeira página pelo menos permite que os usuários saibam que também podem fazer isso.) uma breve explicação - de algumas palavras até um parágrafo curto - sobre o que é o seu site também seria boa. (Esse também pode ser um bom lugar para acessar um link "leia mais".)

Ou, olhando do outro lado, o que você pode perder com sua página atual? Bem, eu realmente diria "quase tudo", mas a coisa óbvia que salta (além do despejo de metadados) é o formulário de login na parte superior. Claro, é bom fornecer aos usuários estabelecidos uma maneira fácil de fazer login, mas isso não significa que você realmente precise mostrar o formulário de login em cada página. Em vez disso, faça como o Doodle e apenas tenha um formulário de login pop-up acessível através de um link. (Para usuários com JavaScript desativado, é uma boa ideia também ter uma página de login separada como destino de fallback para o link.)

Há várias outras coisas que você também pode perder: por exemplo, como um usuário novo e não registrado, por que estou vendo o que parece um link "excluir"? Posso realmente excluir a página? Se sim, por que ? Caso contrário, por que o link está lá?

Da mesma forma, a nota "(703 perguntas disponíveis)" é uma distração sem sentido, pois se parece com um elemento de interface. Se você quiser impressionar os visitantes com a profundidade do seu site, coloque-o onde ele pertence: em uma sinopse de aparência impressionante adequada na área de conteúdo. (" Já temos 703 perguntas disponíveis e mais estão chegando! ")

Finalmente, devo observar que tudo é relativo. O TV Tropes , por exemplo, tem uma interface de usuário horrível (muito parecida com a sua), mas isso não importa, porque o compensa com um monte de conteúdo excelente e densamente interligado, para que a maioria dos novos usuários ganhe ' Não é necessário tocar na interface de navegação. Na verdade, isso é bastante comum nos sites wiki; A Wikipedia não é realmente muito melhor. O problema, porém, é que você já precisa ter essa carga de conteúdo (ou uma base de usuários comprometida em criá-lo) antes que esse efeito possa começar a funcionar para você.

Seu "design" seria legal ... em 1995. Na verdade, está desatualizado. É um projeto que os engenheiros sempre criam :-) A coisa mais fácil que você pode fazer é usar alguma estrutura css, como Twitter Bootstrap , Zurb , qualquer que seja . O Framework ajuda você a protegê-lo de sua própria "criatividade" ;-)

Do ponto de vista do layout, não há nada de errado com seu site. É um layout padrão de 3 colunas com o logotipo no canto superior esquerdo. Essa estrutura geral está em uso há muito tempo e é porque funciona. A maioria dos sites modernos ainda usa princípios semelhantes, com base em vários layouts comuns, mas escondidos sob gráficos muito mais lisos. (Seja muito cauteloso com as pessoas que criticam com base na modernidade de alguma coisa - só porque alguns anos se passaram não significa que a forma como os humanos absorvem informações é repentinamente diferente).

Alguns podem questionar se os links de navegação principais devem ou não estar no lado esquerdo ou na parte superior, mas essas diferenças não criam ou quebram um site.

Não, o problema não está na sua escolha de posições das coisas. É com os gráficos, as opções de cores, o tamanho das coisas e assim por diante. Eu diferencio os termos layout , que tem tudo a ver com posicionamento, design , que tem tudo a ver com sensação e aparência. Não tenho certeza se todos usariam os termos exatamente da mesma maneira que eu.

Dito isto, seu layout é essencialmente bom, mas seu design é problemático e, infelizmente, é a situação mais difícil de resolver. Se o seu layout fosse o problema, poderíamos dar conselhos mais concretos, como "mova seus campos de pesquisa para cá" ou "coloque seu logotipo ali". O layout é realmente a implementação da usabilidade .

O design, no entanto, é sobre sensação e estilo, o que é obviamente muito mais difícil de comentar. Embora eu possa dizer que você simplesmente deixou muitas opções de cores como padrão (o fundo é branco, os links são azuis, poucas imagens de interface), é muito mais difícil dizer quais cores e gráficos devem estar lá . Depende muito do tipo de sentimento que você deseja. Azuis e cinzas chatos e seguros para uma sensação corporativa, rosa e amarelo para uma sensação inocente e infantil, vermelhos e pretos quentes para uma sensação emocionante em uma boate ... E mesmo assim, usar essas cores de exemplo não levará necessariamente ao sente que me apeguei a eles. O diabo está nos detalhes.

Há alguma sobreposição entre os problemas de layout mais concretos e os de design etéreo, como o que thebodzio diz em sua resposta sobre tamanhos de fonte variados para títulos e notas de rodapé e assim por diante, a fim de enfatizar a importância e ajudar a orientar o visitante do site através das informações que você deseja que eles tenham. Você deve seguir seu conselho.

No entanto, receio que, se seu objetivo é não formar parceria com um designer, mas aprender a aplicar um design atraente de site, você não está apenas adquirindo uma resposta, mas também está em uma jornada. Existem tantas rotas para se tornar um bom designer quanto existem designers e toneladas de recursos por aí, então não há falta de oportunidade de aprender.

Para o caminho mais curto para adquirir algum senso de design para este site em particular, eu procuraria outros sites que você gosta e outros sites que oferecem um serviço semelhante ao que você está criando, e começaria a comparar e contrastar o que você gosta e sobre aqueles e o que está faltando no seu site.

Infelizmente, isso é o mais objetivo possível, e apenas o ponto mais alto da ponta do iceberg. Espero que parte do que eu disse ajude, no entanto.

Eis por que acho que as pessoas reagem negativamente ao seu site: isso levanta muitas perguntas!

Como você disse, antes de apresentar a funcionalidade. O que me diz que as pessoas não entendem do que se trata. Qual deve ser a primeira pergunta respondida pelo site. Porque, se estiver na Web, você não pode ficar ao lado deles e explicar.

"Todo o conhecimento do mundo" não comunica exatamente o que você pode encontrar no site (ou não é muito crível) ou por que você deve fazer o login. Portanto, seu design é mal percebido porque não suporta responder a essas perguntas.

Então, primeiro você precisa responder "sobre o que é este site?". Por exemplo, com uma declaração de missão. Pode ser óbvio para você, mas não para todos os outros na web. Qual é o objetivo principal? Aceitar questionários ou criar questionários? Qual é a primeira coisa que você quer que as pessoas façam? Conecte-se? Responda a um questionário? Crie um? É isso que você deve responder se quiser que as pessoas permaneçam na sua página.

Então você deve organizar suas informações. O que é conteúdo, o que é meta (logotipo, navegação, login). Dê uma olhada na stackexchange. O conteúdo (claro) é claramente diferenciado do meta (escuro).

Agrupe as coisas que andam juntas. Você tem migalhas de pão que são desconectadas da navegação. Visualmente, bem como no texto. Não encontro "Tudo" na navegação principal. Como posso chegar lá?

Por que tudo isso? Quanto mais rápido as pessoas entenderem as informações apresentadas, maior a probabilidade de elas permanecerem e interagirem. Se estiverem confusos e confrontados com perguntas que não podem responder, reagirão negativamente.

Porque faz. Isso foi cruel, não foi :) Era apenas uma piada, minha melhor resposta seria trabalhar com alguém na parte de design, se você não tiver alguém com quem trabalhar, conseguir um freelancer, se isso não funcionar também comece novamente do zero, mas tente manter as coisas mais simples e permitir que o conteúdo respire ...

Algumas dicas, conselhos / recomendações: Faça com que as fontes h tags (títulos) sejam maiores que as tags p, muito maiores (algo nos intervalos de tamanho de fonte de título 30 a 48 e parágrafo (11 a 13). Margens de 20 px ou preenchimento entre blocos de conteúdo (por exemplo, um ponto de partida: 20 px; para a barra de login, seria mais separado e fácil de ler.

Peça a alguém para criar um logotipo adequado, o que você tem agora é ... não é bom. Tente fontes diferentes, talvez uma fonte sem serifa (como Open Sans, grátis no Google Fonts, ou .. apenas Arial-Helvetica).

Não use gradientes se você não tem senso de cor apenas porque é legal ou apenas porque parece melhor para você, tente manter cores claras e talvez no final, quando terminar, tente experimentar gradientes apenas no CTA ( Call to action) áreas (nos botões, por exemplo).

Há muita coisa que você pode fazer ... mas essas coisas geralmente acontecem ao longo do tempo, você obtém um olhar treinado olhando para muitos projetos excelentes e tentando entender como esse resultado foi produzido ... a melhor maneira de fazer isso é tente recriar você mesmo o mesmo resultado. Nesse processo, você obterá algum conhecimento e insight sobre por que e como as coisas são feitas / feitas para parecer / interagir e experimentar as UIs.

Recomandação de livro: Smashing Book [o primeiro e o segundo livro] e o site:

http://smashingmagazine.com

e outro: http://www.bamagazine.com/

Uau! Você realmente gerou uma resposta! Pelo menos você sabe que seu design não passa despercebido;)

Aqui está a resposta curta para sua pergunta: o site parece ter sido projetado por um engenheiro de software. É isso que você faz e tenho certeza de que faz bem. Agora você precisa de alguém que faça design de interface do usuário para tornar sua ideia acessível. Não há maneira de contornar isso. Você não vai aprender design em um fim de semana e resolver o problema.

Encontre um estudante ou jovem designer procurando preencher seu portfólio e dar-lhes alguma liberdade. Você quer alguém com trabalho limpo e organizado para este projeto. Veja se você encontra um designer que favorece o minimalismo.

Não sou um designer profissional; portanto, do ponto de vista do usuário e da experiência de navegar em vários sites, posso apontar algumas coisas?

1. A cor de fundo da página é branca, mas os cabeçalhos / destaques das seções estão em tons de amarelo ou branco, você pode experimentar um pouco de cores contrastantes , criar um nível de contraste para corresponder à sua hierarquia de elementos (cabeçalho de mais alto nível = mais contraste) ou um esquema de cores fixo do conteúdo do cabeçalho (por exemplo, laranja escuro como na segunda página do livro mostrado no logotipo do cabeçalho, branco no texto do cabeçalho e cinza escuro no conteúdo do texto).
2. Demasiado espaço livre na sua página, o espaço livre é bom para dar aos usuários um lugar para respirar, mas o excesso de espaço livre faz com que a sua página pareça um back-office / em manutenção. por exemplo, a seção "Subtópicos" na primeira tela poderia ter sido espalhada por todo o espaço na seção "Tudo". Também por que duas seções de sub-tópicos redundantes ?
3. A distribuição de conteúdo da IMO deve estar sob uma hierarquia . Se você usar um site como as páginas de código do Google (que se parece muito com o seu site), a Wikipedia ou este site como exemplo, todos eles gastam uma quantidade significativa de espaço no cabeçalho do site e , em seguida, vem o conteúdo. Também hoje em dia, muitas páginas usam uma barra de ferramentas como o cabeçalho, que possui uma cor distinta, menus gerais e o logotipo do site incorporado, mas você pode dizer que seu logotipo é muito grande para fazer isso.
   Veja a seção de subtópicos na parte mais à direita da página, por exemplo, eles realmente se parecem mais com a especialização do conteúdo atual? Em vez disso, eles se parecem mais com tags aleatórias ou tópicos relacionados . Você pode refletir a hierarquia deles fazendo umaestrutura semelhante a uma árvore, como em várias páginas de documentação, também tornaria desnecessárias as migalhas de pão. Além disso, na IMO, o local certo para essa árvore (navegação) estaria na barra lateral esquerda e o restante das ações ocorreria no lugar da farinha de rosca.
4. A uniformidade é tão importante quanto a distribuição. Seus botões podem ter cores diferentes de acordo com sua finalidade / importância. Mas sua estrutura deve permanecer a mesma. O botão "Login" é nítido, enquanto o "Fazer o teste agora" é arredondado. Você pode se livrar de qualquer uma dessas abordagens.
5. Links e ações não são iguais , você também deve nomeá-los de acordo. Como o menu "Excluir" à esquerda, reflete itens excluídos ou a ação excluir, não pode ser dito. Dê aos usuários um botão de exclusão e um menu / guia de itens excluídos, como no GMail.
6. As fontes são muito importantes para refletir o objetivo. Se você está criando uma página de arte ou qualquer família serif de literatura é bom para isso, mas para criar um site de e-learning, você deve escolher uma fonte que seja confortável de seguir em tamanhos diferentes e que tenha menos aumento (como bordas alongadas), Sans é bom nisso. A Wikipedia usa por exemplo. A escolha do tamanho e peso também é importante. Onde as estatísticas são importantes (e em mudança), faça os números em negrito (por exemplo, 703 perguntas disponíveis). Como você fez para escolher o número de perguntas na segunda tela. O itálico nos cabeçalhos da IMO não parece bom, por que não usar negrito?
7. Isso é muito parecido com a minha opinião pessoal, mas acho que alguns cantos mais arredondados aliviariam os usuários dos sentimentos de caixa.

Sou designer e desenvolvedor profissional. Eu acho que a coisa mais importante a fazer com um design é usar um programa gráfico - como o Fireworks - para criar um design antes de implementá-lo. Isso torna mais fácil mudar as coisas e experimentar com facilidade. Vindo de um plano de desenvolvimento, sei a importância disso.

Não sei em quais posições você está se candidatando. Se você está se candidatando a uma posição de design gráfico, pode levar algum tempo para aprender sobre design gráfico profissional. Se você está assumindo uma posição de desenvolvimento, pode fazer sentido pagar um designer profissional um pouco para criar um bom design ou fazer uma solução rápida em vez de levar meses para aprender.

Se você quiser fazer uma correção rápida, tentarei fornecer alguns detalhes para você começar. As respostas aqui são boas - mas não são muito específicas. Vou tentar.

Observe que um design de largura variável é sempre um pouco mais complicado do que um design de largura fixa. Eu acho que você está certo ao escolher um design de 3 colunas. O conteúdo está correto, o design não é tão bom (na minha opinião).

Aqui está o que eu faria (provavelmente levaria menos de um dia):

1. Comece com o logotipo. Parece muito ocupado -> tente simplificar. Use cores mais vibrantes; o amarelo está sujo. Tente uma fonte mais simples.
   • Depois de criar o logotipo, você pode combinar as cores do site
2. Tudo no site deve ser "arejado". Portanto, não faça as coisas apertadas.
   • a coluna da esquerda deve ser muito mais larga. 1,5 vezes a largura atual
   • o topo deve ter mais espaçamento nos campos de login
   • o direito deve ter os subtópicos, cada um em uma nova linha. Faça com que eles tenham um espaçamento maior ao redor deles, para que não fiquem esmagados um no outro
   • a sub-tabela pode usar muito mais preenchimento nas células, as divs do título podem ser preenchidas mais etc.
3. Todo o conteúdo deve fluir em vez de ser instável. Isso significa alinhar o máximo possível, usar fontes uniformes e tamanhos adequados.
   • A coluna central "Todo o conhecimento do mundo" parece fora de lugar com o restante do conteúdo. Talvez flutue para a esquerda, remova o sublinhado e, com certeza, reduza-o ao título.
   • O conteúdo da página não está alinhado. Seria melhor se você deixasse alinhado o sub conteúdo com os subtítulos.
4. Os campos de login na parte superior podem ser melhorados.
   • Você pode colocar os rótulos dentro das caixas de entrada de texto (acinzentadas). Isso tornaria tudo mais limpo.
   • Você pode tornar a caixa de seleção / fonte lembrar-me muito menor. Não é o recurso mais importante, portanto não deve ser tão grande quanto a parte importante.

Isso não tornará seu site o site mais impressionante da Internet, mas, com sorte, o polirá o suficiente para que seja aprovado nas inspeções. :)

uau ... isso é muito ruim lol.

Eu não acho que você pode aprender a redesenhar algo em algumas sugestões, se você não tem nenhum senso de design, então realmente acho que você deve arranjar outra pessoa para fazer o layout. Procure uma faculdade de arte local e veja classe vai levá-lo como um exemplo do mundo real.

Mas, na falta disso, aqui estão minhas poucas sugestões. A página de índice / destino, apesar do nome, precisa funcionar mais como um outdoor ou um anúncio de revista. Ele precisa transmitir sua mensagem RÁPIDO, em alguns segundos. Note que eu disse "mensagem", não informação. As informações precisam estar disponíveis para quando o espectador as procura, mas nem todas precisam ser dispostas como um índice ligeiramente embaralhado.

Então, quanto à mensagem ... a primeira coisa a se pensar é: O que eles estão vendo ... página da web, sim, mas página da web do quê? Mesmo lendo suas categorias, não está claro para mim o que é essa página.

O 'o que' é será transmitido por esquema de cores, layout geral e títulos de cabeçalho.

Depois de resolver a questão do que é, decida o que você quer que eles vejam primeiro. Minha escolha seria o logotipo Practice makes Perfect e eu aumentaria o tamanho dele e o colocaria fora do cabeçalho. Mas você pode ter motivos para que eles se concentrem em outra coisa ou em algum tipo de apelo à ação.

Suponho que sua coisa mais importante seja 'Todo o conhecimento do mundo ", porque você o centralizou (má ideia) tornou itálico (má ideia!) E deu muito espaço à sua volta (boa ideia). palavras em si ... não está claro o que isso é ou faz, tente algo mais descritivo e menos pateta.

Tente dividir a página de destino geral em três elementos de design E três níveis de importância das informações. Pergunte a si mesmo qual é a PRIMEIRA coisa que eles deveriam ver, a PRIMEIRA coisa que deveriam fazer? o que é segundo, terceiro? e tente redesenhar de acordo.

Use menos cores e faça-as fazer sentido .. por que três azuis desajeitados diferentes borrifaram aleatoriamente em torno do texto ??? Use mais tamanhos de fonte (!), Dividir novamente em 3s é um bom começo, fonte GRANDE para a mais importante, mídia para secundária etc.

Minha última sugestão é fazer o seu design PRIMEIRO e bem antes de escrever o código. Sugiro começar com PAPEL e canetas ou lápis para bloquear uma página. Apenas esboços rápidos, NÃO escreva as palavras reais ao fazê-las, apenas bloqueie as áreas enquanto tenta decidir qual o tamanho da área de conteúdo em relação ao cabeçalho. , qual é o tamanho da barra lateral e assim por diante.

Em seguida, faça um design mais finalizado em um programa gráfico. MOVE coisas e experimente o posicionamento. Lembre-se de que você está criando uma página que precisa funcionar como uma página de revista. Faça o espectador fazer uma pausa, tente MOSTRA-LHE o que você quer que ele veja, tente levá-lo a FAZER o que você quer que ele faça.

E comece a OLHAR para o design. Apenas olhe. não avalie o conteúdo; em vez disso, procure quais mensagens estão sendo transmitidas pelas páginas da web. Como eles usam espaçamento, cor, tamanho da fonte? Tente imitar um bom design. boa sorte

e considere a sugestão da escola de arte. programas de design gráfico frequentemente procuram projetos de redesenho do mundo real para seus alunos.

O principal problema que recordo desse tópico é que você está mais interessado em debater e defender seu "design" do que em aprender a criar algo atraente. Típico de um engenheiro de software. Você acha que pode dividir a página em elementos componentes, testar e verificar esses elementos e, depois de integrar os componentes, acredita que os elementos devem enumerar matematicamente um bom design. Então você acha que, ao postar essa pergunta, novamente você pode dividir a página em componentes e discutir os méritos de cada um e discutir como ela segue o que o provedor de respostas disse.

Até que você esteja disposto a aceitar que você é péssimo na UX, você continuará tendo esse problema. Como dito acima, design gráfico é sobre sentir. Design gráfico não é igual ao design de engenharia. Você não pode construir algo matematicamente, integrá-lo a outras coisas "matematicamente corretas" e esperar um bom resultado. Você nunca será bom em UX (provavelmente) porque simplesmente não olha o mundo da maneira que um designer o vê. Mas se parar de medir sua página e compará-la com outra coisa - abra-se completamente para aprender a perceber que você não sabe nada sobre design gráfico, então poderá começar a obtê-lo ...