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.
Hoy vamos a estar buscando en el sitio RoyalSlider, un popular control deslizante de contenido de JavaScript. ¡Saltemos y veamos lo que pensamos!
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 RoyalSlider
? Conozca la nueva versión del control deslizante más popular en CodeCanyon. Desde julio de 2011, se han vendido 4637 licencias. Hemos recibido, 5 de 5 estrellas basado en 378 comentarios.?
? Cada plantilla de control deslizante es sensible. Míralo en tu dispositivo móvil o intenta redimensionar tu navegador para ver el efecto.
Aquí hay una captura de pantalla de la página de inicio:
Primera impresión
Me encanta bucear en sitios web que están realmente enfocados de esta manera porque podemos desarrollar un conjunto claro de objetivos y comparar el éxito del diseño con esos objetivos.
Entonces, ¿de qué se trata este sitio? Su único propósito es vender un producto: el? RoyalSlider? que es en realidad un artículo muy popular en CodeCanyon. Con este mini sitio, el desarrollador realmente puede entrar en grandes detalles sobre qué tan impresionante es el control deslizante y qué hace.
Como se puede ver en la captura de pantalla anterior, ha hecho exactamente eso. El sitio en sí es muy atractivo, por lo que, desde un punto de vista puramente estético, no tendré mucho más que decir que “¡un gran trabajo!” Sin embargo, desde el punto de vista de la organización de contenido, creo que podríamos ver algunas mejoras.
? Desde el punto de vista de la organización de contenido, creo que podríamos ver alguna mejora. ?Dado que educar a los visitantes sobre este producto es un objetivo primordial, creo que podemos reestructurar parte de la información para que se adapte mejor a nuestras necesidades.
Vamos a acercarnos y echar un vistazo a algunas áreas específicas para ver cómo podemos hacer algunas mejoras.
El encabezado
El encabezado es definitivamente la mejor parte de la página. El diseñador usó esta área para mostrar su producto, que es perfecto, ¡especialmente porque es tan hermoso y altamente funcional!
El diseño aquí y en otros lugares es super minimal. Blanco, gris y negro son los colores primarios que llenan la página con un rojo llamativo y llamativo que se usa en áreas que merecen atención especial.
La navegación es fácil de usar, el logotipo es simple pero atractivo, y hay un vínculo obvio para comprar el artículo en CodeCanyon. Honestamente no hay mucho que cambiaría aquí.
Lo único que consideraría es lanzar un encabezado en negrita encima de los dos párrafos de la derecha. En este momento, el control deslizante atrae tanto su atención (algo bueno) que sus ojos permanecen anclados a él sin hacer necesariamente el viaje al pequeño texto de la derecha.
Ver un trozo de texto grande y en negrita, casi sin importar lo que dijera, ayudaría a atraer la atención del usuario. ?Ver una porción de texto grande y en negrita, casi sin importar lo que diga, ayudaría a atraer la atención del usuario hacia la información importante en esa porción de contenido. Aquí hay una maqueta rápida y sucia de lo que quiero decir:
Las características
El resto de la página está ocupado con texto puro: ¡más de veinte párrafos! Cada uno de ellos es breve, está bien formateado y contiene un encabezado, lo que hace que la página sea bastante fácil de navegar.
A pesar del hecho de que el texto está bien formateado, creo que esta área podría tener una gran renovación. El objetivo principal con este paso sería dividir todo el contenido de este texto para que sea más fácil de analizar y más atractivo para ver. Esto se puede lograr con una combinación de dos técnicas diferentes.
Añadir imágenes de apoyo
Lo primero que me gustaría ver en esta área son algunas imágenes. Siempre que tenga grandes porciones de contenido de texto, es una buena idea trabajar en algún tipo de imágenes para ayudar a llevar ese contenido y agregar cierto interés visual a la página.
Veintiún párrafos es mucho contenido y sin alguna ayuda visual perderás a tus lectores. Recuerde siempre que las personas que navegan en la web tienen ADD, rara vez centramos nuestra atención en una cosa.
Sus visitantes están leyendo a través de Twitter, revisando su correo electrónico y actualizando Facebook, ¡todo mientras mira su sitio! Si vas a competir por la atención en ese entorno, debes traer más a la mesa que unos pocos párrafos.
? Sus visitantes están leyendo a través de Twitter, revisando su correo electrónico y actualizando Facebook, ¡todo mientras miran su sitio!Una solución fácil sería asociar algunos de los párrafos con miniaturas. Los titulares aquí, como 'Touch-friendly'? y? soporte de video? se prestan perfectamente a las vistas previas en miniatura, por lo que esto no debería ser demasiado difícil.
Crear secciones claras
La siguiente estrategia que me gustaría ver aquí es tomar todo el contenido de este texto y dividirlo más claramente en distintas secciones. En este momento hay dos secciones, pero no son visualmente distintas de ninguna manera.
Recomiendo dividir el contenido en al menos tres o cuatro secciones, crear titulares más grandes y prominentes, y posiblemente variar el color de fondo de cada sección para ayudarlos a destacarse (alternar entre blanco y gris).
Inspiración: Squarespace
Un sitio que creo que saca los consejos que estoy dando aquí muy bien es Squarespace. Estéticamente, este sitio es muy similar al de RoyalSlider, pero la forma en que han presentado sus características es mucho más atractiva e impresionante.
Observe las imágenes ricas, los titulares grandes y el color de fondo variable.A medida que se desplaza por la página, las secciones son claramente distintas y tan atractivas que la información no es abrumadora.
No estoy sugiriendo que nadie debe copiar el diseño de Squarespace, pero puedes aprender algunas lecciones valiosas al analizar lo que han hecho y por qué.
FTW responsivo
El número de sitios de respuesta en la web está aumentando constantemente. Estoy encantado de ver a los desarrolladores web de todo el mundo, desde grandes corporaciones hasta operaciones de un solo hombre, lo que hace que la capacidad de respuesta sea una prioridad en sus diseños.
? No solo el sitio RoyalSlider responde bien, sino que también el control deslizante responde. ?Este sitio es un brillante ejemplo de esta tendencia. No solo el sitio RoyalSlider responde bien, sino que también el control deslizante responde. Esto no es una hazaña pequeña y felicito al desarrollador por su dedicación a hacer de la web un poco más de una experiencia agnóstica de dispositivos.
¡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.