¿Por qué la gente sigue diciéndome que mi sitio se ve horrible?

Desarrollé un sitio web y recientemente estaba buscando trabajo. Prácticamente todos los entrevistadores, después de echarle un vistazo rápido, me dijeron que mi sitio fue diseñado terriblemente (pero me gustó el concepto). Debo mencionar que soy un ingeniero de software, pero también estoy tratando de hacer bien la parte de diseño. He estado tratando de rediseñarlo, pero no tengo idea de qué hay que cambiar.

Así es como se ve ahora:

Realmente agradecería cualquier consejo específico para mi sitio, o sobre cómo mejorar el diseño de un sitio en general (he visitado algunos sitios que explican cómo diseñar sitios, pero eso no parece ayudar :)).

Edición 1 : como dije, las personas tienden a tener una mala impresión de ello solo al mirarlo, incluso antes de que presente la funcionalidad. Eso me hace pensar que hay algo mal con los colores que elegí o el diseño. Y estaba pensando que un diseño de sitio específico puede ser útil para los diseñadores, al igual que una historia específica es educativa para los estudiantes de literatura, y los algoritmos específicos son útiles para los estudiantes de software. Gracias.

Una nota al margen: Funcionalidad: si es importante, esto es lo que el sitio pretende lograr (muy brevemente): los usuarios pueden agregar temas y, para cada tema, agregar preguntas junto con sus respuestas . El sitio crea "pruebas" y "cuestionarios" para que los usuarios realicen y comparen sus resultados.

Edición 2 : Aquí hay otra pantalla de impresión:

Edición 3 : para ser claros, ninguna de estas capturas de pantalla es mi página de destino. Son páginas de contenido de temas específicos.

En primer lugar, quiero enfatizar que todo en esta respuesta es solo MHO, no una verdad universal;).

Como ingeniero de software, usted sabe lo importante que es en cada proyecto tener una estructura clara y bien definida: el orden. Casi lo mismo es cierto para las artes y el diseño "visual". Tiendo a ver el diseño como "encapsulación visual". El diseñador conoce la estructura de la información que quiere transmitir a su público objetivo. Por ejemplo: diseña un libro. Él sabe que este libro está dividido en capítulos y cada capítulo en subcapítulos. Él sabe que el asunto principal está anotado por algunas notas (notas al margen, notas al pie, notas al margen). Ahora debe usar su "arsenal" para hacer que esta estructura sea "visible". Puede usar un tamaño y forma de fuente y llenar todas las páginas consecutivas con una gota de glifos, pero eso significaría que el lector tendría que leer, interpretar y comprender todo para conocer la estructura de información contenida. El diseñador también puede "sugerir" al lector la importancia / nivel de varias piezas de información. Uno de los trucos es utilizar el tamaño de fuente para mostrar la gradación de los "datos" presentados. Si se hace esto, el lector no tendrá que leer (y mucho menos interpretar) el texto para diferenciar entre la materia principal y, por ejemplo, las notas al pie. La importancia y la "posición" recíproca de la información se "describe" visualmente. El lector puede "desencapsular" información fácilmente. También se puede ver como un tipo de proceso de serialización / deserialización que tiene lugar en el dominio visual (la información abstracta se envía al espacio "visual"). Esa es una simplificación ecológica, pero creo que para empezar es lo suficientemente buena. Si se hace esto, el lector no tendrá que leer (y mucho menos interpretar) el texto para diferenciar entre la materia principal y, por ejemplo, las notas al pie. La importancia y la "posición" recíproca de la información se "describe" visualmente. El lector puede "desencapsular" información fácilmente. También se puede ver como un tipo de proceso de serialización / deserialización que tiene lugar en el dominio visual (la información abstracta se envía al espacio "visual"). Esa es una simplificación ecológica, pero creo que para empezar es lo suficientemente buena. Si se hace esto, el lector no tendrá que leer (y mucho menos interpretar) el texto para diferenciar entre la materia principal y, por ejemplo, las notas al pie. La importancia y la "posición" recíproca de la información se "describe" visualmente. El lector puede "desencapsular" información fácilmente. También se puede ver como un tipo de proceso de serialización / deserialización que tiene lugar en el dominio visual (la información abstracta se envía al espacio "visual"). Esa es una simplificación ecológica, pero creo que para empezar es lo suficientemente buena. También se puede ver como un tipo de proceso de serialización / deserialización que tiene lugar en el dominio visual (la información abstracta se envía al espacio "visual"). Esa es una simplificación ecológica, pero creo que para empezar es lo suficientemente buena. También se puede ver como un tipo de proceso de serialización / deserialización que tiene lugar en el dominio visual (la información abstracta se envía al espacio "visual"). Esa es una simplificación ecológica, pero creo que para empezar es lo suficientemente buena.

Ahora, en cuanto a su diseño. Yo, personalmente, no sé por dónde empezar a mirarlo. Tengo que leerlo todo, entenderlo todo, pensarlo todo y luego volver a poner las cosas en el orden que creo que es correcto. Eso es mucho trabajo para mí como lector. Es difícil definir qué es lo más importante y lo menos importante aquí de un vistazo. Incluso cuando me tome mi tiempo para conocer el contenido, todavía no hay muchos "puntos de referencia" visuales que me ayuden a encontrar la manera de obtener algunos datos específicos. Piensa: cuando dejas tu auto en el estacionamiento, estás buscando algún "punto de referencia" que te ayude a recordardonde está tu auto Trate de pensar por un momento cómo usa los sitios web, cómo puede recordar dónde están las opciones / enlaces que usa con más frecuencia. ¿No es que estás buscando un enlace como un "segundo cuadrado a la derecha de este logotipo rojo en la parte superior del sitio"? Sin lectura, solo recordando imagen / ubicación.

Creo que el mayor problema aquí no es la "fealdad", creo que es la falta de importancia de la gradación. Intente "dirigir" a su visitante del sitio web a través de sus datos. ¿Qué quieres que vea primero? A dónde ir desde allí? De esta manera está creando "un flujo de lectura" / "un flujo de trabajo". Induce (¿tal vez?))) Un camino específico que seguirán sus lectores. Si hay un par de rutas, intente hacerlas lo más separadas posible (por ejemplo, una "ruta" a través del menú, algo así como una tabla de contenido / descripción general principal / descripción de la estructura, una "ruta" a través del formulario de inicio de sesión, etc. ) Creo que si arreglas esto, tu diseño definitivamente mejorará. Tal vez no se volverá "hermoso" de inmediato, pero al menos será más accesible y comprensible y, como efecto secundario, más agradable estéticamente.

Espero que tenga sentido para ti :).

Algunas cosas que noto que no me gustan particularmente son:

• Esto se parece más a la parte "back-end" o "admin" de un sitio web, en particular a alguna forma de sistema de administración de contenido, en lugar del "front-end" o lo que la gente ve. En particular, me viene a la mente PhpMyAdmin.
• Inconsistencia en los colores que se utilizan. El logotipo (que me parece un poco demasiado estrecho) ya tiene algunos colores, por lo que esos colores se pueden usar para desarrollar un esquema de colores para el sitio. Este esquema de color debe aplicarse a cosas como las bandas para las tablas, el color de los enlaces, etc.
• Hay demasiados elementos visuales contrastantes. Por lo general, abogo por una mayor simplicidad y estandarización en el diseño. Sin embargo, en esta captura de pantalla, vemos:
  • El cuadro "Todo" es un cuadro duro en ángulo recto.
  • La navegación de la barra lateral utiliza esquinas redondeadas.
  • Los subtemas utilizan un gradiente radial.
  • Ninguno de los cuadros tiene suficiente "relleno": tenga en cuenta cuán apretadas aparecen las palabras en los enlaces de "subtemas"; se verían mucho mejor si hubiera espacio a su alrededor.

Entonces, definitivamente lea cuidadosamente la respuesta de @thebodzio , ya que es muy precisa: un nuevo visitante del sitio tendría dificultades para saber dónde buscar primero, y eso generalmente es una señal de diseño "malo".

Aquí hay algunas buenas respuestas, así que señalaré algunos ejemplos concretos. Para mí, la estructura básica de la página parece decente; Como otros han dicho, un diseño de tres columnas ha sido un elemento básico del diseño web durante años. La mayoría de los problemas están con el diseño gráfico.

Dicho esto, la importancia relativa de "Subtemas" parece extraña:

• ¿Debería ser el título algo así como "Subtemas"?

• Está a la derecha y parece más importante que el encabezado del tema; ¿quizás podría incorporarlo al cuerpo del tema principal para que se sienta más subordinado?

• El peso del encabezado "Subtemas" hace que parezca más pesado (más importante) que las migas de pan del tema.

Para el diseño gráfico, puede preguntarse sobre los principios básicos para cada elemento de la página:

• Contraste : los elementos que no son lo mismo deberían verse lo suficientemente diferentes como para que sus usuarios puedan distinguirlos inmediatamente.

• Repetición : los diseños solo se ven bien si las cosas son iguales. En otras palabras, apunte a la coherencia. Eso podría tomar la forma de que todos sus fondos tengan la misma saturación y luminosidad, pero que varíen en tono, o que usen gradientes en todos los encabezados (o que no usen ningún gradiente). Por ejemplo:

  • el fondo "Subtemas" es el único con un degradado (el botón es una cosa diferente, por lo que tener un degradado en él hace que se vea diferente, lo que hace que el contraste entre en juego)

  • el resaltado de navegación a la izquierda tiene esquinas redondeadas, mientras que la mayoría de los otros elementos tienen esquinas cuadradas afiladas

  • el color de "Preferencias de prueba" (deletreado incorrectamente) no aparece en el logotipo, en el que de otro modo estaba probando sus colores; intenta obtener el mismo tono para los elementos de la página que los colores del libro

(De hecho, hay una manera fácil de asegurarse de que los colores combinen: comience con un solo color y luego varíe solo uno de matiz, saturación o luminosidad. Todos los colores que genere mediante este método deberían verse bien juntos).

• Alineación : las alineaciones hacen que los elementos se conecten en un todo, en lugar de verse dispersos e incoherentes. Por ejemplo:

  • el cuadro "Recordarme" es más bajo que el otro texto al lado

  • "Preferencias de cuestionario" está más a la derecha que el tema migas de pan anterior

  • las preferencias están centradas, mientras que la mayoría del resto del texto del cuerpo está alineado a la izquierda

• Proximidad : acercar los objetos los agrupa en la mente de su usuario, aunque dejar muy poco espacio alrededor de los objetos los hace pequeños y difíciles de ver como elementos individuales. Por ejemplo:

  • no hay espacio alrededor de sus temas, migas de pan o subtemas (en mi opinión, esta es una de las características más comunes que me dice que el diseño gráfico no se ha desarrollado completamente)

  • el espaciado de sus párrafos debajo del encabezado del cuerpo principal es inconsistente

Hay mucho más sobre principios de diseño en la web, pero estos son cuatro de los más importantes.

Creo que el principal problema con el diseño de su sitio no es tanto con el diseño gráfico como con el diseño de la interfaz de usuario . Específicamente, cuando miro sus capturas de pantalla anteriores, la pregunta que me hago no es " Genial, ¿qué debería intentar primero? ", Sino " ¿Qué diablos es esto y qué se supone que debo hacer con él? "

Este es un problema común con los sitios web y otras interfaces de usuario diseñadas por ingenieros (u otros expertos en dominios): ya saben cómo se supone que se debe usar el sistema, por lo que para ellos, todo está bien siempre que todas las funciones que necesitan estén convenientemente accesibles . Por desgracia, esto a menudo hace que todas las funciones sean igualmente visibles y accesibles, lo que le da al nuevo usuario muy pocas pistas sobre dónde comenzar.

El diseño gráfico tiene algún efecto aquí, en la medida en que un mal diseño gráfico puede hacer que cualquier interfaz de usuario sea confusa, mientras que los buenos gráficos pueden mejorar la interfaz de usuario al aclarar el significado y las relaciones de los diferentes elementos de la interfaz y atraer la atención del usuario hacia los elementos más importantes. Pero fundamentalmente, el problema es más acerca de qué presentar al usuario y cómo estructurarlo que cómo hacer que se vea bien.

OK, vamos a ser un poco más específicos. Mi primer consejo sería: ¡simplificar! Es posible que desee inspirarse en el diseño original de la página principal de Google , que básicamente tenía tres elementos: el logotipo, el cuadro de búsqueda y dos botones (y uno podría argumentar que el segundo botón era un desorden innecesario). Ah, y algunos enlaces a otras páginas con más cosas, que se marcaron claramente como de importancia secundaria por estar más abajo, en una fuente pequeña y / o en gris, y un aviso de copyright, aparentemente agregado como una sutil pista para usuarios que la página realmente terminó allí.

O eche un vistazo a Doodle , otra compañía con un nombre ruidoso y un diseño de portada simple pero efectivo. Por comodidad, tomé una captura de pantalla de su página principal y agregué algunos garabatos rojos en la parte superior:

Doodle es un sitio bastante bueno para comparar el tuyo, ya que su sitio, como el tuyo, es básicamente un marco para permitir a los usuarios diseñar su propio contenido (cuestionarios para ti, horarios de eventos para ellos) e invitar a otros usuarios a interactuar con él. La gran diferencia es que, a diferencia de su diseño, las personas de Doodle dedican mucho esfuerzo a facilitar a sus usuarios la interfaz, en lugar de arrojarlos al fondo de la piscina y esperar a que se hundan o naden.

Mirando su página principal, especialmente sin mis garabatos, lo obvio es lo poco que hay en ella, especialmente cosas irrelevantes. Claro, hay un montón de pequeñas notas y enlaces en la parte inferior de la página, pero eso es todo "debajo del pliegue" y algo que los nuevos usuarios simplemente ignorarán. La segunda cosa más visible, en letras grandes y amigables justo donde es probable que el usuario mire primero, es una propaganda de ocho (!) Palabras que explica de qué trata el sitio. Lo más visible es el gran gráfico que muestra, en imágenes simples, los pasos principales del flujo de trabajo, lo que hace que todo parezca fácil y atractivo. Y justo entre ellos hay un gran botón que invita al usuario a hacer clic y comenzar.

De hecho, en la parte superior de la página, solo hay cuatro elementos en los que se puede hacer clic (excluyendo el logotipo, que se puede hacer clic, como los usuarios esperan que sea, pero solo lo lleva de vuelta a la página principal): dos enlaces al primer paso en el asistente de programación de eventos, uno para un ejemplo fijo para usuarios que no tienen la confianza suficiente para saltar directamente, y un enlace discreto en la esquina superior derecha que abre un cuadro de diálogo emergente para usuarios establecidos. Eso es todo.

Entonces, ¿qué pasa con su sitio como es? La primera hora de la captura de pantalla que salta para mí como algo que podría posiblemente ser vale la pena mirar son las partidas verdes, que al menos son cortos, en letra grande y en medio de lo que parece el "área de contenido". Por desgracia, no hay mucho interés allí: la sección "Información del tema" solo tiene algunos metadatos triviales que deberían estar en letra pequeña en alguna esquina, la sección "Subtemas" tiene un par de enlaces (a otras páginas similares) que aparecen duplicar los de la esquina superior derecha, y la sección "Recursos" simplemente está vacía. Y además, incluso después de leer todo eso, todavía no tengo idea de qué trata el sitio o qué puedo hacer con él.

Entonces, ¿qué puedo hacer con su sitio? Bueno, usted dice que puedo crear y responder cuestionarios, entonces, ¿qué tal si coloca algunos enlaces / botones grandes y atractivos en la página principal que dicen " Realice un cuestionario " y " Crear un cuestionario "? (El primero debería ser más prominente, ya que es probable que un nuevo usuario tenga más probabilidades de responder un cuestionario que de crear uno, pero incluir el segundo en la página principal al menos les permite a los usuarios saber que también pueden hacerlo). Una explicación breve, desde unas pocas palabras hasta un párrafo corto, de lo que trata su sitio también sería buena. (Ese también podría ser un buen lugar para agregar un enlace "leer más").

O, mirándolo desde el otro lado, ¿qué puede permitirse perder de su página actual? Bueno, realmente diría "la mayor parte", pero lo más obvio (además del volcado de metadatos) es el formulario de inicio de sesión en la parte superior. Claro, es bueno proporcionar a los usuarios establecidos una forma fácil de iniciar sesión, pero eso no significa que deba mostrar el formulario de inicio de sesión en cada página. En su lugar, hágalo como lo hace Doodle y solo tenga un formulario de inicio de sesión emergente accesible a través de un enlace. (Para los usuarios con JavaScript desactivado, es una buena idea tener también una página de inicio de sesión separada como objetivo alternativo para el enlace).

Hay muchas otras cosas que también podría perder: por ejemplo, como usuario nuevo y no registrado, ¿por qué veo lo que parece un enlace "eliminar"? ¿Realmente puedo eliminar la página? Si es así, ¿por qué ? Si no, ¿por qué está el enlace allí?

Del mismo modo, la nota "(703 preguntas disponibles)" es una distracción sin sentido donde está, ya que parece un elemento de interfaz. Si desea impresionar a los visitantes con la profundidad de su sitio, colóquelo en el lugar al que pertenece: en una publicidad adecuada y de aspecto impresionante en el área de contenido. (" ¡Ya tenemos 703 preguntas disponibles, y hay más por venir! ")

Finalmente, debo señalar que todo es relativo. TV Tropes , por ejemplo, tiene una interfaz de usuario horrible (muy parecida a la suya, en realidad), pero no importa, porque lo compensan con montones y montones de contenido excelente y densamente interconectado, de modo que la mayoría de los nuevos usuarios ganaron ' No es necesario tocar la interfaz de navegación. En realidad, eso es bastante común con los sitios wiki; Wikipedia no es realmente mucho mejor. El problema, sin embargo, es que ya debe tener esa carga de contenido (o una base de usuarios comprometida a crearlo) antes de que ese efecto pueda comenzar a funcionar para usted.

Su "diseño" sería bueno ... en 1995. De hecho, está desactualizado. Es un diseño que los ingenieros siempre inventan :-) Lo más fácil que puedes hacer es usar un marco css, es decir, Twitter Bootstrap , Zurb , lo que sea . Framework te ayuda a protegerte de tu propia "creatividad" ;-)

Desde el punto de vista del diseño, no hay nada realmente tan malo con su sitio web. Es un diseño estándar de 3 columnas con el logotipo en la parte superior izquierda. Este marco general ha estado en uso durante años, y eso es porque funciona. La mayoría de los sitios web modernos todavía usan principios similares, basados ​​en un puñado de diseños comunes, pero enterrados bajo gráficos mucho más elegantes. (Tenga mucho cuidado con las personas que critican por lo moderno que es algo, solo porque hayan pasado algunos años no significa que los humanos asimilen la información de repente es muy diferente).

Algunos pueden cuestionar si los enlaces de navegación principales deben estar en el lado izquierdo o en la parte superior, pero esas diferencias no hacen ni rompen un sitio.

No, el problema no es con tu elección de las posiciones de las cosas. Es con los gráficos, las opciones de color, el tamaño de las cosas, etc. Distingo los términos de diseño , que se trata de colocación, el diseño , que se trata de sentir y mirar. Sin embargo, no estoy seguro de si todos usarían los términos exactamente de la misma manera que yo.

Habiendo dicho que su diseño está esencialmente bien, pero su diseño es problemático, desafortunadamente, es la situación más difícil de resolver. Si su diseño fuera el problema, podríamos darle consejos más concretos, como "mueva sus campos de búsqueda aquí" o "coloque su logotipo allí". El diseño es realmente la implementación de la usabilidad .

Sin embargo, el diseño trata sobre la sensación y el estilo, que por supuesto es mucho más difícil de comentar. Si bien puedo decir que simplemente dejó muchas opciones de color predeterminadas (el fondo es blanco, los enlaces son azules, muy pocas imágenes de interfaz), es mucho más difícil decir qué colores y gráficos deberían estar allí. . Depende mucho de qué tipo de sensación quieres. Azules y grises aburridos y seguros para una sensación corporativa, rosas y amarillos para una sensación inocente e infantil, rojos y negros calientes para una emocionante sensación de club nocturno ... E incluso entonces, solo usando esos colores de ejemplo no necesariamente conducirá a la siente que me he apegado a ellos. El diablo está en los detalles.

Existe cierta superposición entre los problemas de diseño más concretos y los problemas de diseño más etéreos, como lo que dice thebodzio en su respuesta sobre los diferentes tamaños de fuente para encabezados y notas al pie de página, etc., para enfatizar la importancia y ayudar a guiar al visitante del sitio a través de la información que desea que tengan. Debes prestar atención a su consejo.

Sin embargo, me temo que si su objetivo es no asociarse con un diseñador, sino aprender a aplicar un diseño de sitio atractivo, no solo está obteniendo una respuesta, sino que está en un viaje. Hay tantas rutas para convertirse en un buen diseñador como diseñadores, y toneladas de recursos, por lo que no hay falta de oportunidades para aprender.

Para la ruta más corta para adquirir un poco de sentido del diseño para este sitio en particular, miraría otros sitios que le gustan y otros sitios que ofrecen un servicio similar al que está haciendo, y comenzaría a comparar y contrastar lo que le gusta y sobre esos y lo que falta en su sitio.

Desafortunadamente, eso es tan objetivo como uno puede ser, y solo el punto más alto de la punta del iceberg. Sin embargo, espero que algo de lo que he dicho ayude.

Aquí es por qué creo que la gente reacciona negativamente a su sitio: ¡Plantea demasiadas preguntas!

Como dijiste, antes de presentar la funcionalidad. Lo que me dice que la gente no entiende de qué se trata. Cuál debería ser la primera pregunta respondida por el sitio web. Porque si está en la web, no puedes pararte junto a ellos y explicarlo.

"Todo el conocimiento del mundo" no comunica exactamente lo que puede encontrar en el sitio (o no es muy creíble) o por qué debería iniciar sesión. Por lo tanto, su diseño se percibe mal porque no admite responder esas preguntas.

Entonces, primero debe responder "¿de qué se trata este sitio?". Por ejemplo, con una declaración de misión. Puede ser obvio para usted, pero no para todos los demás en la web. ¿Cuál es el propósito principal? ¿Tomar presupuestos o crear presupuestos? ¿Qué es lo primero que quieres que haga la gente? ¿Iniciar sesión? Responde un cuestionario? ¿Crea uno? Estas son cosas que debe responder si desea que las personas permanezcan en su página.

Entonces deberías organizar tu información. Qué es contenido, qué es meta (logotipo, navegación, inicio de sesión). Echa un vistazo a stackexchange. El contenido (claro) se distingue claramente del meta (oscuro).

Agrupe las cosas que van juntas. Tiene migas de pan que se desconectan de la navegación. Visualmente, así como la redacción. No encuentro "Todo" en la navegación principal. ¿Como puedo llegar allí?

¿Por qué todo esto? Cuanto más rápido entiendan las personas la información que se les presente, más probabilidades tendrán de permanecer e interactuar. Si están confundidos y confrontados con preguntas que no pueden responder, reaccionarán negativamente.

Porque lo hace Eso fue malo, ¿no? :) Fue solo una broma, mi mejor respuesta sería trabajar con alguien en la parte de diseño, si no tienes a alguien con quien trabajar, consigue un profesional independiente, si eso no funciona También comience nuevamente desde cero, pero trate de mantener las cosas más simples y permita que el contenido respire ...

Algunos consejos / consejos / recomendaciones de primer vistazo: Haga que las fuentes de las etiquetas h (Títulos) sean más grandes que las etiquetas p, mucho más grandes (algo en el rango de tamaño de fuente del título 30-48, y párrafo (11-max 13). Permita al menos Márgenes de 20 px o relleno entre bloques de contenido (por ejemplo, un fondo maring: 20px; para la barra de inicio de sesión permitiría que sea más separado y fácil de leer.

Haz que alguien te diseñe un logotipo adecuado, el que tienes ahora es ... no es bueno. Pruebe diferentes fuentes, tal vez una fuente sans-serif (como Open Sans, gratis en fuentes de google, o ... simplemente Arial-Helvetica).

No use degradados si no tiene sentido del color solo porque es genial o simplemente porque le parece mejor, trate de mantener los colores planos y tal vez al final, cuando haya terminado, intente experimentar con degradados solo en CTA ( Llamado a la acción) áreas (en los botones, por ejemplo).

Hay muchas cosas que puedes hacer ... pero estas cosas generalmente llegan con el tiempo, obtienes un ojo entrenado al mirar muchos diseños geniales y tratar de comprender cómo se produjo ese resultado ... la mejor manera de hacerlo es intente y vuelva a crear el mismo resultado usted mismo, en ese proceso obtendrá un poco de conocimiento y comprensión sobre por qué y cómo se hacen / hacen que las cosas se vean / interactúen y experimenten las IU.

Recomendación de libros: Smashing Book [el primer y el segundo libro] y el sitio web:

http://smashingmagazine.com

y otro: http://www.bamagazine.com/

¡Guauu! ¡Realmente generaste una respuesta! Al menos sabes que tu diseño no pasa desapercibido;)

Aquí está la respuesta breve a su pregunta: el sitio parece que fue diseñado por un ingeniero de software. Eso es lo que haces y estoy seguro de que lo haces bien. Ahora necesita a alguien que diseñe la interfaz de usuario para que su idea sea accesible. No hay forma de evitar eso. No vas a aprender diseño en un fin de semana y solucionar el problema.

Encuentre un estudiante o diseñador joven que busque completar su portafolio y darles algo de libertad. Desea que alguien que trabaje esté limpio y ordenado para este proyecto. Vea si puede encontrar un diseñador que favorezca el minimalismo.

No soy un diseñador profesional, así que desde el punto de vista de un usuario y de la experiencia de navegar por varios sitios web, ¿puedo señalar algunas cosas?

1. El color de fondo de la página es blanco, pero los encabezados / resaltados de las secciones están en tonos de amarillo o blanco, puede probar un poco de colores contrastantes , puede diseñar el nivel de contraste para que coincida con la jerarquía de su elemento (más encabezado de alto nivel = más contraste) o un esquema de color de contenido de encabezado fijo (por ejemplo, naranja profundo como en la segunda página del libro que se muestra en el logotipo para el encabezado, blanco para el texto del encabezado y gris oscuro para el texto del contenido).
2. Demasiado espacio libre en su página, el espacio libre es bueno para darles a los usuarios un lugar para respirar, pero demasiado espacio libre hace que su página se vea como back-office / bajo mantenimiento. por ejemplo, la sección "Subtemas" en la primera pantalla podría haber abarcado todo el espacio en la sección "Todo". Además, ¿por qué dos secciones de subtemas redundantes ?
3. La distribución de contenido de la OMI debe estar bajo una jerarquía . Si toma como ejemplo algunos de los sitios, como las páginas de códigos de Google (que se parece mucho a su sitio), Wikipedia o este sitio, todos pasan una cantidad significativa de espacio para el encabezado del sitio , luego viene el contenido. También hoy en día, muchas páginas usan una barra de herramientas como encabezado que tiene un color distinto, menús generales y el logotipo del sitio incrustado en él, pero puede decir que su logotipo es demasiado grande para hacerlo.
   Tome la sección del subtema en la parte más a la derecha de la página, por ejemplo, ¿realmente parecen una mayor especialización del contenido actual? Más bien se parecen más a etiquetas aleatorias o temas relacionados . Podrías reflejar su jerarquía haciendo unestructura en forma de árbol como en varias páginas de documentación, también haría innecesarias las migas de pan. También OMI, el lugar correcto para ese árbol (navegación) estaría en la barra lateral izquierda y el resto de las acciones irían en lugar de migas de pan.
4. La uniformidad es tan importante como la distribución. Sus botones pueden tener diferentes colores según su propósito / importancia. Pero su estructura debería seguir siendo la misma. Su botón "Iniciar sesión" tiene un borde afilado mientras que "Tomar cuestionario ahora" es una esquina redondeada. Es posible que desee deshacerse de cualquiera de esos enfoques.
5. Los enlaces y las acciones no son iguales , también debe nombrarlos en consecuencia. Al igual que el menú "Eliminar" a la izquierda refleja elementos eliminados o la acción de eliminar, no se puede decir. Proporcione a los usuarios un botón de eliminación y un menú / pestaña de elementos eliminados como en GMail.
6. Las fuentes son muy importantes para reflejar el propósito. Si está creando una página de arte o cualquier familia de publicaciones literarias es bueno para eso, pero para crear un sitio de aprendizaje electrónico debe elegir una fuente que sea cómoda de seguir en diferentes tamaños y que tenga menos aumento (como bordes alargados), Sans es bueno en eso. Wikipedia lo usa por ejemplo. La elección del tamaño y el peso también es importante. Cuando las estadísticas son importantes (y cambiantes), ponga los números en negrita (por ejemplo, 703 preguntas disponibles). Como lo has hecho para elegir el número de preguntas en la segunda pantalla. Las cursivas en encabezados IMO no se ven bien, ¿por qué no usar negrita en su lugar?
7. Esto es muy parecido a mi opinión personal, pero creo que algunas esquinas más redondeadas aliviarían a los usuarios de los sentimientos de caja.

Soy un diseñador y desarrollador profesional. Creo que lo más importante que hacer con un diseño es usar un programa de gráficos, como Fireworks, para crear un diseño antes de implementarlo. Eso hace que sea más fácil cambiar las cosas y experimentar fácilmente. Viniendo de un entorno de desarrollo, sé la importancia de eso.

No sé para qué puestos está solicitando. Si está solicitando un puesto de diseño gráfico, es posible que desee tomarse un tiempo para aprender diseño gráfico profesional. Si está tomando una posición de desarrollo, puede tener sentido pagar un poco a un diseñador profesional para que haga un diseño agradable, o hacer una solución rápida en lugar de tomarse meses para aprender.

Si desea hacer una solución rápida, intentaré darle algunos detalles para comenzar. Las respuestas aquí son buenas, pero no son muy específicas. Lo intentaré.

Tenga en cuenta que un diseño de ancho variable siempre es un poco más complicado que un diseño de ancho fijo. Creo que tienes razón al elegir un diseño de 3 columnas. El contenido es correcto, el diseño no es tan bueno (en mi opinión).

Esto es lo que haría (probablemente tomaría menos de un día):

1. Comience con el logo. Parece muy ocupado -> intenta hacerlo más simple. Usa colores más vibrantes; El amarillo está sucio. Prueba una fuente más simple.
   • Después de hacer el logotipo, puede hacer coincidir los colores del sitio con él.
2. Todo sobre el sitio web debe ser "aireado". Así que no hagas las cosas estrechas.
   • la columna izquierda debería ser mucho más ancha. 1.5 veces su ancho actual
   • la parte superior debería tener más espacio alrededor de los campos de inicio de sesión
   • el derecho debe tener los subtemas cada uno en una nueva línea. Haga que tengan un espacio más grande a su alrededor para que no se aplasten entre sí
   • la subtabla puede usar toneladas más de relleno en las celdas, los títulos del título se pueden rellenar más, etc.
3. Todo el contenido debe fluir en lugar de ser entrecortado. Esto significa alinear tanto como sea posible, usar fuentes uniformes y tamaños adecuados.
   • La columna central "Todo el conocimiento del mundo" parece fuera de lugar con el resto del contenido. Quizás flote hacia la izquierda, elimine el subrayado y, con seguridad, hágalo más pequeño que el título.
   • El contenido de la página no está alineado. Se vería mejor si dejaras alineado el contenido secundario con los títulos secundarios.
4. Los campos de inicio de sesión en la parte superior se pueden hacer mejor.
   • Puede colocar las etiquetas dentro de los cuadros de entrada de texto (en gris). Eso lo haría más limpio.
   • Puede hacer que la casilla de verificación recordarme / fuente sea mucho más pequeña. No es la característica más importante, por lo que no debería ser tan grande como la parte importante.

Esto no hará que su sitio sea el sitio más increíble en Internet, pero con suerte lo pulirá lo suficiente como para pasar las inspecciones. :)

wow ... eso es bastante malo jajaja.

No creo que pueda aprender a rediseñar algo en algunas sugerencias si no tiene ningún sentido del diseño, así que realmente creo que debería hacer que alguien más haga el diseño ... acérquese a una escuela de arte local y vea si clase lo tomará como un ejemplo del mundo real.

Pero en su defecto, aquí están mis pocas sugerencias. La página de índice / aterrizaje a pesar de su nombre, debe funcionar más como una valla publicitaria o un anuncio de revista. Necesita transmitir su mensaje RÁPIDO, en unos segundos. Tenga en cuenta que dije "mensaje" no información. La información debe estar allí para cuando el espectador la busque, pero no es necesario que se presente como una tabla de contenido ligeramente codificada.

Entonces, en cuanto al mensaje ... lo primero que hay que pensar es QUÉ están mirando ... página web, sí, pero ¿qué página web? Incluso leyendo sus categorías, no me queda claro cuál es esa página.

El 'qué' es se transmitirá por esquema de color, diseño general y títulos de encabezado.

Una vez que haya resuelto la pregunta de qué es, decida qué quiere que vean primero. Mi elección sería el logotipo Practica hace perfecto y aumentaría el tamaño de eso y lo sacaría del encabezado. Pero puede tener razones para que se concentren en otra cosa o en un llamado a la acción de algún tipo.

Supongo que lo más importante es "Todo el conocimiento del mundo" porque lo has centrado (¡mala idea!), Lo ha puesto en cursiva (¡mala idea!) Y le has dado mucho espacio a su alrededor (buena idea). Pero a excepción de palabras en sí mismas ... no está claro lo que ES o hace, prueba algo más descriptivo y menos tonto.

Intente dividir la página de destino general en 3 elementos de diseño Y 3 niveles de importancia de la información. Pregúntese qué es lo PRIMERO que deberían ver, lo PRIMERO que deberían hacer. ¿Qué es segundo, tercero? e intente rediseñar en consecuencia.

Usa menos colores y haz que tengan sentido ... ¿por qué 3 azules clash diferentes salpicados al azar alrededor del texto? Use más tamaños de fuente (!), Nuevamente dividir esto en 3s es un buen comienzo, fuente GRANDE para lo más importante, medio para secundaria, etc.

Mi última sugerencia es hacer su diseño PRIMERO y mucho antes de escribir el código. Sugiero comenzar con PAPEL y bolígrafos o lápices para bloquear una página ... solo bocetos rápidos, NO escriba las palabras reales cuando haga esto, solo bloquee las áreas mientras intenta decidir qué tan grande debe ser el área de contenido en comparación con el encabezado , qué tan grande es la barra lateral y así sucesivamente.

Luego haga un diseño más finalizado en un programa de gráficos. MOVER las cosas y experimentar con la colocación. Recuerde que está diseñando una página que debe funcionar como una página de revista. Haga que el espectador haga una pausa, trate de MOSTRARLE lo que quiere que vean, trate de llevarlo a HACER lo que quiere que hagan.

Y comience MIRANDO en y para el diseño. Solo mira. no evalúes el contenido, en cambio MIRA qué mensajes transmiten las páginas web. ¿Cómo usan el espaciado, el color y el tamaño de fuente? Intenta emular un buen diseño. buena suerte

y considere la sugerencia de la escuela de arte. Los programas de diseño gráfico con frecuencia buscan proyectos de rediseño del mundo real para sus estudiantes.

El principal problema que deduzco de este hilo es que está más interesado en debatir y defender su "diseño" que en aprender a crear algo que sea atractivo. Típico de un ingeniero de software. Cree que puede dividir la página en elementos componentes, probar y examinar estos elementos y luego, una vez que integre los componentes, cree que los elementos deberían enumerar matemáticamente un buen diseño. Luego, piensa que al publicar esta pregunta nuevamente puede cortar la página a los componentes y discutir los méritos de cada uno y discutir cómo sigue lo que el proveedor de respuestas ha dicho.

Hasta que esté dispuesto a aceptar que apesta en UX, continuará teniendo este problema. Como se dijo anteriormente, el diseño gráfico se trata de sentir. El diseño gráfico no es igual al diseño de ingeniería. No puedes construir algo matemáticamente, integrarlo con otras cosas "matemáticamente correctas" y esperar un buen resultado. Nunca serás bueno en UX (probablemente) porque simplemente no miras el mundo como lo ve un diseñador. Pero si deja de medir su página y la compara con otra cosa, ábrase por completo y aprenda que no sabe nada sobre diseño gráfico, entonces podría comenzar a obtenerla ...