¡Bienvenido a nuestra 25ª crítica de diseño! Cada semana echamos un vistazo a un nuevo sitio web y analizamos el diseño. Señalaremos tanto las áreas que se realizan bien como las que podrían ser útiles. Finalmente, terminaremos pidiéndole que contribuya y proporcione sus propios comentarios. ¡Vota en la encuesta al final de esta página y / o deja un comentario con tus pensamientos!
El sitio de hoy es Highwire.com, una plataforma de tienda en línea personalizada.
Si desea enviar su sitio web para que aparezca en una futura crítica de diseño, solo le llevará unos minutos. Cobramos $ 24 por criticar su diseño, ¡mucho menos de lo que pagaría por un consultor para que visite su sitio! Puedes encontrar mas aqui.
Acerca de Highwire
? Crear tu propia tienda de comercio electrónico nunca ha sido tan fácil y asequible. ¡Regístrate hoy para una prueba gratuita y comienza a construir tu tienda en solo minutos!
Aquí hay una captura de pantalla de la página de inicio:
Impresión general
Si se detuvo hoy para escucharme romper con un mal diseño, se sentirá decepcionado. Creo que este podría ser el mejor diseño de sitio web presentado aún para una crítica de diseño.
Highwire es simplemente un sitio magnífico y está tan bien hecho que nos veremos obligados a utilizarlo como una herramienta de enseñanza más positiva que negativa. Sigue leyendo porque hay una tonelada que podemos aprender al analizar este diseño. Y no te preocupes, hay algunas cosas pequeñas que sugeriré mejorar a lo largo del camino.
Paleta de color
La declaración más audaz hecha en este sitio es color. La calidad de las imágenes es excelente, pero es el color lo que realmente llama tu atención tan pronto como cargas la página. Los colores básicos utilizados aquí no son exactamente rompiendo el molde: verde, rojo, azul, gris y un poco de naranja, pero se mezclan de una manera muy atractiva.
Sin embargo, tenga en cuenta que han elegido un tono súper brillante de cada color que realmente salta de la página. Una mezcla de degradados radiales y lineales hace que los colores parezcan mucho más vibrantes y vivos a la vez que aportan una sutil sugerencia de textura.
Diseño y alineación
El diseño de este sitio es sólido como una roca y realmente utiliza el uso adecuado del espacio en blanco y la distribución visual del peso. Observe en la imagen modificada a continuación cómo se han establecido las líneas verticales fuertes para asegurarse de que todo esté bien y ajustado.
Observe también que el diseñador eligió una alineación a la izquierda y la mantuvo. Todo el texto está alineado a la izquierda e incluso los botones debajo de las miniaturas siguen esta tendencia. Sus diseños tienden a parecer mucho más cohesivos y consistentes cuando evita cambiar las alineaciones a inervales aleatorios en todo el diseño.
A pesar de ser diferentes secciones del código, el encabezado y el pie de página utilizan el mismo degradado para que se obtenga la ilusión de un fondo continuo en el que el contenido flota arriba. Esto se siente como si simplemente hubieran estilizado la etiqueta del cuerpo, pero tiene el beneficio semántico de mantener un encabezado y pie de página sólidos.
Sombras y reflexiones
Los reflejos, los degradados y las sombras suaves últimamente han dado paso a colores sólidos y, a menudo, sombras duras y sin plumas. Cuando comenzamos a dejar la web 2.0 maltratada y maltratada, mirar hacia atrás y pasar a nuestra próxima víctima, sigue siendo agradable ver a alguien tirando del estilo de la forma en que estaba destinado a ser.
Tanto las sombras como los reflejos aquí son bastante sutiles y se han estructurado con cuidado para parecer realistas y simplemente hermosos. Si va a agregar un toque visual a un elemento, vale la pena tomarse el tiempo para modificar y experimentar hasta que obtenga algo que realmente agregue delicadeza y brillo a una página en lugar de una capa de maquillaje descuidada.
La explosión: evolucionó
Una cosa que aprendes cuando diseñas para una importante empresa de mercadotecnia es que a los mercadólogos les encantan las explosiones. Algo grande y puntiagudo que viola el diseño y, por lo tanto, llama la atención del cliente. Si los departamentos de marketing, y de hecho muchos diseñadores se salieran con la suya, todo se vería así:
Para que sepas, desde una perspectiva de diseño, este es un cliché, feo, exagerado, obsoleto y cualquier otro adjetivo negativo que puedas imaginar. Como regla general, nunca pongas un Starburst en nada.
Este diseñador, afortunadamente, entendió esta regla y presentó una solución mucho más moderna y atractiva, que se muestra a continuación. Esta cinta 3D se envuelve alrededor de una barra que describe la nueva característica. Viola significativamente el diseño suficiente para captar tu atención, pero no lo suficiente para abaratar el aspecto de toda la página.
Mejora sugerida
Como ya lo he dicho varias veces, este es un diseño tan genial que es difícil encontrar algo malo en él. Sin embargo, hay un par de cosas que consideraría mejorar.
Para empezar, el sitio utiliza Cufon para la tipografía personalizada. Me quejé de esto en nuestra última crítica y continuaré presentando el mismo argumento donde veo que se usa Cufon. @ font-face es una mejor solución, punto. El texto de @ font-face es completamente seleccionable, Cufon no. @ font-face usa CSS puro, Cufon requiere que JavaScript esté habilitado. Como señalé la última vez, cuando el sitio web de Cufon sugiere usar @ font-face en su lugar, sabes que es hora de tirar la toalla y saltar a bordo.
La otra cosa que me molesta es la barra de Facebook en la parte superior. Si traza una línea a través del centro del texto en esta barra, como lo he hecho a continuación, puede ver que el logotipo de Facebook está incómodamente descentrado. No estoy seguro de si esto fue intencional o un accidente, de cualquier manera, lo golpearía cerca del centro.
Otras paginas
Cerraremos y le daremos un vistazo rápido a algunas de las otras páginas del sitio. Como pueden ver, son igualmente atractivos y están muy bien diseñados. Me gustan especialmente las tablas de precios!
¡Tu turno!
Ahora que ha leído mis comentarios, contribuya y ayude, dando al diseñador algunos consejos adicionales.Háganos saber lo que cree que es genial sobre el diseño y lo que cree que podría ser más fuerte. Como siempre, le pedimos que también sea respetuoso con el diseñador del sitio y que ofrezca consejos claros y constructivos sin ningún insulto.