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


9

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:
ingrese la descripción de la imagen aquí

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:
ingrese la descripción de la imagen aquí

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.


66
+1 Siempre es agradable ver una pregunta sobre el diseño, en lugar del uso del software y la búsqueda de fuentes, pero para obtener una respuesta definitiva (que es lo que buscamos en StackExchange) necesitaremos un poco más de información para que haya algunos criterios para evaluar las respuestas, y así estamos resolviendo un problema de diseño general que puede ser relevante para los demás y no simplemente actuando como una consultoría de diseño gratuita para una persona;). ¿Quién es el público objetivo del sitio, cuál es la interacción prevista y qué comentarios ha recibido hasta ahora? ¿Parece un sitio similar a StackExchange?
user56reinstatemonica8

@ user568458: Muchas gracias por el comentario. Se agregó "Editar 1" y "Una nota al margen:".
Oren A

55
Probablemente deberías conseguir un diseñador real para hacer el diseño. Seguramente ha hecho algunos contactos durante su carrera que podrían conectarlo. Consejo rápido: no use fuentes serif para otra cosa que no sean encabezados enormes, no son excelentes en tamaños bajos en pantallas. Las etiquetas de subtemas también se ven realmente horribles, debe agregar algo de relleno y elegir mejores colores para ellas, el púrpura sobre el naranja no funciona tan bien.
kotekzot

1
Blimey, hay muchas respuestas y no todas son muy útiles ... Si quieres entender algunos principios básicos de diseño sólidos y relevantes, aquí hay una respuesta clásica a una pregunta relacionada que vi hace un tiempo y que podrías encontrar útil stackoverflow. com / a / 58947/568458
user56reinstatemonica8

@ user568458 esa publicación se ha eliminado ... ¿está en alguna parte?
Abe

Respuestas:


9

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 :).


Gracias por tu respuesta. Sin embargo, me parece muy desafortunado que a todos les guste tu respuesta, dice exactamente lo que dicen los libros, ¡y TODAVÍA NO LO OBTENGO! como probablemente notaron, mi sitio trata sobre eLearning. No entiendo cómo hay "puntos de referencia" y "clientes potenciales" en Wikipedia, por ejemplo, o en este sitio, pero no en el mío. Tengo una barra de navegación izquierda (completamente estándar), una barra de inicio de sesión superior, un título obvio e información ordenada dentro de la página. ¿Qué es más estándar, obvio y ordenado que eso? ¿Cómo es esto tan difícil? Por cierto, dado que una página puede ser confusa, agregué otra printscreen.tnx nuevamente
Oren A

3
A juzgar por su comentario, me temo que simplemente está "cansado de morir" al tratar de mejorar su diseño. Yo mismo he experimentado ese sentimiento un par de veces :). La cuestión era que estaba tan concentrado en mi propia forma de ver las cosas que perdí completamente mi perspectiva. Todo parecía simplemente "en el lugar correcto", "obvio" y "claro". Pero no fue :). Solo después de un tiempo, cuando olvidé por completo mis ideas iniciales, pude decir :). Mi consejo es: dejar reposar durante un tiempo, “olvídalo” y luego empezar de cero, lanzando su diseño anterior de distancia por completo .
thebodzio

Me doy cuenta de que mis consejos son bastante generales y generales, pero, por lo que pude entender, quieres aprender a "diseñar" por tu cuenta y esa es la forma en mi opinión. Es por eso que no le diré: "mueva su logotipo aquí, coloque su menú allí". Eso sería diseñarlo todo en tu lugar. ¿Quizás sería mejor si primero intentaras hacer un diseño para un proyecto completamente desconocido para ti antes? Pero ese sería un proceso más largo, más adecuado para PM que este servicio.
thebodzio

8

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".


¡Muchas gracias por tu comentario! ¡Es muy educativo! Sin embargo, me gustaría responder :) 1. Es un sitio de eLearning, pensé en un diseño cercano al de Wikipedia. Entonces no es "backoffice", pero quería que fuera simple y llanamente. ¿Lo llevé demasiado lejos? :) 2. ¡Eso es exactamente lo que intenté hacer! el logotipo es azul y amarillo, ¡y casi todo lo que tenía para seleccionar colores! ¿No se nota? 3. Ese es un gran consejo! ¿Todos los elementos con fondo deben tener un fondo de forma similar? Por último, también respondí a @thebodzio :) puedes verlo si quieres :). ¡Gracias!
Oren A

8

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.


hacer que +2 ...
Oren A

7

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:

Captura de pantalla de la página principal de Doodle.com con anotaciones

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.


Wow, esos son algunos comentarios geniales allí :). Sin embargo, me gustaría mencionar que está comparando páginas de destino de otros sitios con páginas de contenido de mi sitio (probablemente debería haberlo mencionado en la pregunta). Si hubiera puesto mi página de destino ... Ustedes, los diseñadores, no serían tan pacientes con mi diseño, por decir lo menos. ¡Pero me diste algunas ideas geniales sobre cómo mejorar mi página de destino! En segundo lugar, mi inicio de sesión es como el inicio de sesión de este sitio (y al igual que este sitio tengo un esquema de puntuación, y la barra de inicio de sesión se convierte en "Oren A. tal y tal puntaje y medallas ..."), así que no estoy seguro sobre eso ..
Oren A

Y en cuanto a mostrar enlaces que no se pueden hacer clic ... ¿No ayuda a los usuarios a entender lo que podrán hacer después de registrarse? Y lo último: sugiriendo que debería agregar el botón "crear cuestionario" demuestra su punto de que mi sitio no transmite el mensaje: los usuarios realmente no pueden crear cuestionarios, simplemente agregan preguntas y el sitio mismo crea los cuestionarios para ellos ...
Oren A

Mi punto sobre el formulario de inicio de sesión es que sus capturas de pantalla muestran todo el formulario incrustado en la barra superior. Eso es un montón de desorden innecesario allí mismo, cuando todo lo que realmente necesita es un solo enlace que dice "iniciar sesión".
Ilmari Karonen

En cuanto a los enlaces que no se pueden hacer clic, normalmente diría que no, al menos para acciones como "eliminar" que presumiblemente se aplican solo a un conjunto limitado de usuarios. (Observe cómo Stack Exchange también oculta la mayoría de las características de la interfaz si no tiene el representante para usarlas). Si la característica es algo que espera que muchos usuarios quieran usar, y si todo lo que se necesita para usarla es iniciar sesión, luego lo convertiría en un enlace de trabajo real, pero primero haría que aparezca un formulario de inicio de sesión / registro.
Ilmari Karonen

PD. Realmente debería escribir algo más detallado sobre su segunda captura de pantalla, pero permítame sugerirle rápidamente que, si el cuestionario está listo para tomar, moviendo el botón arriba (o al lado) del formulario de preferencias y quitando el énfasis de la última, Lo aclararía. Tal como está, parece que se supone que el título de la página es "Preferencias del cuestionario" (sic), lo que hace que parezca una especie de página admin / prefs, no el lugar donde normalmente iría para realizar el cuestionario. .
Ilmari Karonen

3

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" ;-)


1
No estoy seguro de por qué esto está siendo rechazado. No es muy útil, pero tampoco es exactamente incorrecto . Mi primera impresión del diseño fue que era más del tipo de diseño que esperaríamos de un desarrollador de software que podría estar más interesado en asegurarse de que todo funcione, en lugar de un diseñador que quiere asegurarse de que todo se vea bien. Entonces, +1 por ser lo suficientemente adelantado como para escribir esta breve respuesta.
Ananda Mahto

1
... Pero bueno, escribimos un gran código :). En cuanto a los marcos, aunque miré muchos sitios, también los echaré un vistazo, gracias.
Oren A

Claro que sí, yo también soy un tipo de desarrollador :-) El marco debe protegerlo y guiarlo, por lo que no hay necesidad de opciones de color (ya preestablecidas), arquitectura de página / información (ya preestablecida), etc. Simplemente siga el preajuste camino. Lo único que tiene que hacer es decidir qué información en la página es importante, qué es menos importante, etc. Ejemplo: en ambas capturas de pantalla está visualmente mezclando dos partes diferentes de la página web: pan rallado y encabezado. El marco CSS debería evitar que haga esto porque estos elementos ya están preestablecidos.
nubm

3

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.


Ese es "suyo" en mi caso;)
thebodzio

1
Creo que lo implicaste en el quid de la cuestión: el sentimiento. He visto muchos sitios, y en mi opinión, mi diseño no es muy diferente al de ellos. Supongo que solo me falta "la sensación" de cómo todo se verá bien juntos. Lo que me hace perder la esperanza :( :). Puedo jugar con los colores todo el día, y todavía no sabré cuál encaja mejor ... Tal vez mirar más en otros sitios y tratar de "sentir" cómo los colores encajan entre sí me ayudará. Sin embargo, como nota al margen, los colores que elegí estaban destinados a encajar con el logotipo (azul y amarillo). Supongo que eso no funcionó :) Me da la sensación de que el amarillo es ... demasiado fuerte
Oren A

@OrenA blog.visual.ly/the-use-of-yellow-in-data-design : más información sobre el diseño de la información, pero los principios aún se aplican. Básicamente, el amarillo es ruidoso: úselo con cuidado. Es ideal para salpicaduras sutiles y resaltados
user56reinstatemonica8

1
@OrenA: No quise que mi publicación fuera desalentadora, y lo siento si salió de esa manera. Por favor, no entienda que "sentir" es algo con lo que necesariamente tendrá que luchar porque no es cuantificable. Quise decir más solo para enfatizar que debido a que el diseño del aprendizaje es en gran medida un proceso de experimentación práctica, debe estar preparado para no hacer clic con una o dos explicaciones en un foro de soporte. Si es algo que disfruta y quiere hacer, simplemente le advierto que se necesita un poco de paciencia y no se frustre demasiado pronto.
Interlocutor

2

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.


1

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/


Muchas gracias por los consejos específicos! Son de gran ayuda. Y por cierto, conseguí que alguien (un profesional independiente) creara mi logotipo para mí :)
Oren A

1

¡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.


0

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.

0

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. :)


-1

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.


-2

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 ...


1
Oh, acepto completamente que soy un asco en UX. Pero para cambiar mis percepciones actuales con otras nuevas, necesito entender por qué están equivocadas. No puedo decirme a mí mismo "mis fuentes no se ven bien porque un diseñador profesional lo dijo". Eso no es aprender. Prefiero una buena explicación de qué hice exactamente mal y POR QUÉ me equivoqué antes de poder adoptar una nueva forma de ver las cosas. No estoy "defendiéndome", solo estoy tratando de entender ..
Oren A

Oren Todavía estás usando el mismo pensamiento. Dígame cómo algo está mal para que pueda medir y calcular el error: cuantificar y corregir. ¡INCORRECTO! NUNCA puedes pensar en tus limitaciones sin aceptar una entrada externa a tu problema que no eres. Toma una clase de pintura. Toma algunas drogas. Sufrir. Deja que otras personas elijan lo que experimentas. No puede ver la respuesta dentro de un cuadro sin ventanas.
VariableLost

considera tu comentario como la respuesta aceptada.
Oren A
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.