Consejos de estilo/diseño en un sitio web de isótopos/mampostería

Estoy experimentando con un sitio web de diseño de mampostería que trae noticias de nicho e información cultural sobre el este de Asia a una audiencia occidental. Elegí un diseño de mampostería para la página de inicio porque el sitio funcionará como una plataforma de microblogging que generará varias actualizaciones pequeñas diariamente (imágenes, videos, tweets, textos, listas, citas). El diseño de mampostería funciona bien, el único problema que tengo es que no puedo crear un diseño minimalista y discreto que no se vea aburrido y aburrido al mismo tiempo. Actualmente, creo que más o menos lo hace. Aquí hay un elemento (que representa una publicación o un artículo) del diseño.ingrese la descripción de la imagen aquí

La fuente sans-serif es Ubuntu y la serif es Droid Serif . Los colores son negro #333, gris #999 y el color de acento es morado #939. Tenga en cuenta que los elementos no tienen planos gráficos o bordes separados, es decir, se colocan directamente en el fondo de la página (blanco continuo #fcfcfc). El único separador visual entre los elementos es un borde inferior punteado #999 de 1 px y unos pocos ems de espacio en blanco. (ver enlace de captura de pantalla a continuación)

Si echas un vistazo a toda la página (sin encabezado ni pie de página, solo el área de contenido principal) verás que no es muy espectacular.

He revisado muchos diseños de mampostería, pero no encuentro ninguno que no separe las publicaciones del fondo con diferentes colores o bordes (como Pinterest) y aún se ve increíble.

¿Cómo podría ajustar la tipografía, el contraste o la separación visual de los elementos para que las cosas sean un poco más impresionantes sin agregar demasiado desorden?

Recomiendo agregar un poco de color bien usado para agregar algo de variación.
@ZachSaucier Gracias, ese es un punto válido.

Respuestas (1)

Tengo algunos problemas para entender cuál es su principal problema con el diseño, ya que me parece bastante limpio y ordenado.

El sitio es sobre "noticias" después de todo, ¿verdad? Por lo tanto, debe mostrar las descripciones. Creo que hiciste un muy buen trabajo en este sentido, tu diseño funciona bien como resumen de noticias.

Un par de observaciones:

  • Realmente no entiendo la necesidad de la etiqueta "Noticias" en la parte superior de cada artículo. Ya tiene una etiqueta de Categoría debajo de la descripción, ¿no es redundante el título superior?

  • Encuentro Droid Serif un poco estrecho, pero esto puede ser subjetivo. Debido a que la descripción es corta, puede usar fácilmente un sans-serif allí y no comprometerá la legibilidad. Las serifas son excelentes para textos largos, pero algo que debe tener en cuenta es el tamaño de la fuente. Cuanto más pequeña es la fuente, más difícil se vuelve leer serifas.

  • Si le preocupa el desorden, podría considerar mover la descripción a una superposición en la parte superior de la imagen, que solo aparece cuando pasa el mouse sobre ella:

ingrese la descripción de la imagen aquí

Recomiendo encarecidamente que el texto sea parcialmente visible si lo está superponiendo a la imagen. Esto se debe a que si no lo hace, muchas personas asumirán que son solo imágenes. Codrops tiene algunos buenos ejemplos de cómo hacer esto, aunque es cierto que son más artísticos que para este propósito.
@Yisela Gracias por tu respuesta. El título "Noticias" es solo un marcador de posición para varias secciones diferentes del blog. Decidí dejar Droid Serif en favor de algo más legible, tal vez Noto Sans. Creo que necesito agregar más "estilo" visual y colores, estoy ejecutando algunas iteraciones sobre el diseño y podría volver a pedir comentarios.
Consejos de estilo/diseño en un sitio web de isótopos/mampostería
RespuestasAquíPolítica de privacidad1y, 0v