Crítica: diseño del sitio web Tritium

En seguimiento a esta pregunta: Crítica: diseño del logotipo del software Tritium . Para revisar el código del sitio web (rendimiento, errores, experiencia de usuario relacionada), visite la pregunta hermana en Revisión de código .


Estoy buscando una revisión del diseño de mi sitio web Tritium ( código fuente ).

ingrese la descripción de la imagen aquí

Específicamente:

  • Uno de los objetivos del sitio web era mantenerlo simple. ¿He logrado eso?
  • ¿Los colores de mi paleta se complementan entre sí?

  • ¿Todas las críticas pasadas están implementadas correctamente en cuanto al diseño? ¿Me pasé de la raya?

  • ¿Mi elección de fuente funciona bien con el resto de la apariencia del sitio web?

  • ¿Hay algún concepto de diseño que pasé por alto y no he implementado?

Todavía soy algo nuevo en el diseño de sitios web, así que sea tan duro como sea necesario con esto.

Creo que los colores se ven bien. Obviamente, no sé mucho sobre el fondo o la consulta del diseño, pero personalmente uso el complemento Eye Dropper para Chrome junto con Paletton.com. Le brinda una gran variedad de flexibilidad para elegir los colores correctos. La herramienta Eye Dropper también le ofrece muchas opciones para declarar ese color en CSS/HTML.
Al hacer clic en "Visita la página de descarga", se abre una nueva pestaña, pero no me di cuenta de eso, porque apareció una ventana emergente y pensé que eso era todo lo que se suponía que pasaría... Si se abría la nueva pestaña y se enfocaba, el usuario no se lo perdería. El uso de target="_blank" debería funcionar (consulte w3schools.com/html/html_links.asp ). Si también hizo que pareciera un enlace ordinario (azul, subrayado o similar), creo que la gente supondrá que abre una nueva pestaña.
Estoy de acuerdo con la crítica sobre la ventana emergente. Agregaría un botón en la ventana emergente para hacer clic que luego continuará en la página de github, en lugar de abrir dos cosas a la vez. Por cierto, un gran trabajo en el sitio.
Le daría a la ventana emergente que aparece cuando se hace clic en el enlace Visitar página de descarga un poco más de relleno entre el borde y el texto, y probablemente también reduciría un poco el tamaño y el encabezado de la copia. Y agregue un detector de eventos para registrar los clics de escape para deshacerse del popover, mientras lo hace, los popovers que no reaccionan a los clics de escape son una molestia para el usuario. :-)

Respuestas (4)

¡Buen diseño! Me gusta especialmente la animación del átomo a la derecha.

Me gustan tus colores. Como alternativa, podría usar un azul oscuro para el fondo. Esto le da a la página una profundidad como el cielo azul de la noche:

Captura de pantalla de la página con paleta de colores alternativa

Usé Colorizr.js para jugar con tu paleta de colores. Si desea ajustar sus colores, use la siguiente configuración que se ajuste a su página:

Configuración de Colorizr.js

Los colores son de arriba a abajo: rgb(25, 33, 44), rgb(14, 191, 14), rgb(212, 212, 212), rgb(26, 40, 60), rgb(26, 40, 60)

Creo que el diseño del sitio web funciona. Me gustan tus transiciones para los enlaces de encabezado. Comunicación clara y concisa.

La paleta de colores me recuerda a una empresa de nutrición o similar.

Creo que la elección de fuentes funciona bien para sitios web relacionados con la tecnología. Probablemente desecharía la cara serif por una sans-serif complementaria, pero eso es un gusto puramente personal.

Además, noté que, en términos de capacidad de respuesta, un menú desplegable podría ser útil en sus encabezados cuando se ven en pantallas pequeñas (móviles). Como soy nuevo en el lado de la codificación del diseño gráfico, le agradezco por incluir los archivos fuente. Probablemente lo analizaré y aprenderé algunas de las transiciones de encabezado que implementó.

No es exactamente un problema de diseño, sino de usabilidad:
el sitio dice que es GRATUITO, pero cuando hace clic en 'VISITA LA PÁGINA DE DESCARGA', la ventana emergente solicita una donación. ¿Qué pasa si no quiero donar antes de probar el software? Debería haber otra opción como 'CONTINUAR' o 'CANCELAR' para que el usuario pueda visitar la página de descarga y descargar el software, si es que no dona.

Por lo tanto, recomendaría rediseñar el diseño de la ventana emergente e incluir otro botón como se sugiere.

No ganarás el premio al diseñador del año por eso. Pero cuanto menos hay, menos hay que disgustar, supongo.

Su versión amarilla del ícono tiene puntos suspensivos más altos que anchos:

ingrese la descripción de la imagen aquí

Tiene un aspecto extraño e incluso más extraño como una mostaza en gris cuando se coloca en el ícono de la pestaña del navegador. Si va a crear un ícono de pestaña del navegador, simplemente hágalo gris oscuro o negro.

Parece que solo hay una cosa en la que hacer clic, que es "visitar la página de descarga". Si eso es todo lo que tienes, ¿por qué no es la página?

Me pide dinero pero mi navegador no da nada más. Tal vez lo haga en su navegador, pero yo uso TorBrowser y todos ustedes también deberían hacerlo. La NSA es malvada. De todos modos, por lo que vale, simplemente aparece un cuadro de diálogo y no hace nada.