Cada semana echamos un vistazo a un nuevo sitio web y analizamos el diseño. Señalaremos las áreas que se realizan bien además de las que podrían ser útiles. Finalmente, terminaremos pidiéndole que proporcione sus propios comentarios.
El sitio de hoy es Optimization-World.com, sede de Optimized Cable Company.
Si desea enviar su sitio web para que aparezca en una futura crítica de diseño, solo le llevará unos minutos. Cobramos $ 49 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 Optimized Cable Company
Todos los cables vendidos en Optimized Cable Company tienen una garantía de por vida. Si su cable falla, devuélvalo para un reemplazo sin problemas. Estamos orgullosos de ofrecer cables de alta calidad a precios muy razonables. No pague demasiado por sus cables en los grandes almacenes. Ordene de nosotros y aproveche nuestro envío gratuito especial. Nosotros no te cobramos ni un centavo. El precio que ves es el precio que pagas.
Aquí hay una sección de la página de inicio:
Impresión inicial
Hay algunas buenas ideas en funcionamiento aquí, sin embargo, en general, el diseño refleja muy de cerca algo que hubiera sido bastante común hace unos diez años. Las tendencias de diseño web son algo que merece atención cuando se propone diseñar un sitio web. No para que pueda estafar las ideas de otros, sino para asegurarse de que su producto final se sienta moderno y relevante.
Como diseñadores, es demasiado fácil para nosotros quedar estancados en la forma en que abordamos un proyecto. El efecto negativo de esto es que el mundo cambia mientras permanecemos igual. Tener un sitio web que se sienta desactualizado es especialmente peligroso para las tiendas en línea porque puede relacionarse directamente con menores ventas. Los visitantes se detienen y de repente no están seguros de si el sitio es un lugar seguro para gastar dinero. ¿Es esta una corporación legítima que protegerá la información de mi tarjeta de crédito? ¿O es que la seguridad de su sitio está desactualizada? En este caso, podría pasar a Best Buy sin importar el costo y la calidad de los productos solo porque el sitio se sienta más seguro.
Es cierto que es difícil identificar exactamente qué distingue un diseño moderno de uno obsoleto, por lo que hoy vamos a analizarlo y ver si podemos identificar qué aspectos afectan directamente nuestras impresiones sobre el período de tiempo.
Encabezamiento
Lo primero que llama nuestra atención aquí es el logo. Es un elemento muy brillante que se siente como si fuera del período temprano de la web 2.0. El brillo aún puede funcionar en muchos diseños web si se realiza correctamente, pero aquí este elemento en particular se siente fuera de lugar. Prácticamente nada más en la página coincide con este aspecto, incluido el texto del logotipo, que se parece más a un anuncio de automóvil antiguo (más confusión en el período).
A continuación, nos movemos hacia el gradiente amarillo. Este color realmente viola el esquema del resto del sitio. A los mercadólogos les gusta esto porque se destaca, pero desde una perspectiva de diseño, se siente mal. Los colores que se complementan pueden destacar y llamar la atención sin chocar. Además, incluso sin tener en cuenta el resto del sitio, el gradiente amarillo es otra cosa que no refleja las tendencias actuales.
Para ver lo que quiero decir, comparemos el banner de envío en el sitio anterior con el mismo elemento en el sitio web de Staples.
Podemos aprender mucho de esto. Primero, el diseño es mucho más espacioso y espacioso, todo no está tan apretado. También vemos algunas alineaciones izquierdas fuertes, en lugar de alineaciones centrales comparativamente débiles. Note que la clave aquí es sutilmente. Hay degradados e incluso una textura creada a partir de líneas finas, las cuales vemos en el sitio web Optimizado. Sin embargo, en el sitio de Staples, estos elementos son mucho más tenues. Tanto los gradientes como las líneas son fáciles de perder si no estás prestando atención, lo que significa que se suman a la estética sin distraerte.
Colores y texturas
A medida que avanzamos en el sitio, podemos ver más de esta idea de que los colores y las texturas juegan un papel importante en la impresión de un período de tiempo. En la captura de pantalla a continuación vemos esto en juego junto con un fuerte uso de esquinas duras con trazos negros de un solo píxel que las bordean. Esto crea una sensación de caja que me recuerda a un trabajo que hice para un cliente una vez en un CMS llamado Plone.
Nuevamente, comparemos esto con algunos de los tratamientos que vemos en un área similar del sitio de un competidor importante. La siguiente captura de pantalla muestra la barra lateral de la página de inicio de Radio Shack. Esta empresa no es exactamente una imagen perfecta de las prácticas comerciales modernas, pero están intentando mantener su sitio con un aspecto fresco y relevante.
Fotos y texto
Junto con los elementos gráficos en la página, también debe observar cómo estructura los tratamientos de imagen. La foto de abajo realmente no tiene una buena área de color sólido en la que colocar el texto, por lo que se le dio un incómodo tratamiento de sombra fantasma para que destaque.
A veces tienes una foto que realmente no funciona con texto. En lugar de intentar unir los dos cuando simplemente no funciona, considere una ruta alternativa. Tenemos un artículo completo dedicado al diseño con fotos que comparte algunos trucos increíbles sobre cómo combinar texto y fotografía de una manera atractiva y legible.
Texto y Logos
La parte final de esta página que quiero abordar se muestra en la imagen a continuación. Aquí tenemos toda una manada de logotipos, algunos de los cuales son posiblemente necesarios, pero definitivamente no estoy convencido de que todos deban estar allí. La acreditación del BBB es buena, pero ¿realmente necesito saber que el sitio utiliza el Servicio Postal de los Estados Unidos? Es casi un hecho que si compro un producto en línea, me lo enviarán de alguna manera y la mayoría de nosotros tomamos el Servicio Postal de los EE. UU.
Además, los logotipos de las tarjetas de crédito probablemente podrían trasladarse a la página de pago. La mayoría de los consumidores lo suficientemente cómodos para hacer una compra en línea asumirán que usted acepta las principales tarjetas de crédito.
Finalmente, lo que sigue es un enorme bloque de texto uniforme. No hay encabezados, íconos, tratamientos de texto diferenciados (aparte de los enlaces) ni ningún otro truco utilizado para dividirlo y hacerlo más legible. De un vistazo, ni siquiera sé de qué trata este trozo de texto, ¿por qué me tomo varios minutos leerlo?
En diseño web, simplemente no puede esperar que los visitantes aborden una parte del texto puro como este. Uno de cada cien visitantes podría pasar por el primer párrafo, pero eso es ser optimista. ¿Eso significa que no puedes tener mucho texto en una página web? Absolutamente no. Solo tiene que aprender a dividirlo en partes significativas y manejables que se puedan examinar rápidamente para obtener información relevante.
Los diseñadores de MailChimp son estelares en esto y siempre me refiero a su trabajo al discutir este tema. Su reciente rediseño de tackles del sitio tiene una página de características que está llena de texto, pero echa un vistazo a cómo lo manejaron:
Aquí se utilizan encabezados sólidos, bloques breves de texto e imágenes que hacen alusión al contenido para hacer que todo este contenido sea fácilmente digerible.
Recomendaciones
Para llevar este sitio a 2011, recomiendo que los diseñadores miren detenidamente otros sitios web, tanto en su campo como fuera (nuestra Galería de diseño se creó exactamente para este propósito). Investigue más sobre qué diferencia a los sitios modernos de las tendencias y tácticas observadas en el sitio optimizado.
Incluso podría considerar comprar un tema de tienda en ThemeForest para obtener un buen comienzo en un buen diseño. El tema a continuación solo cuesta $ 15 y se ve genial.
¡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 constructivos claros y sin insultos severos.