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 Quote Roller, una magnífica aplicación web para crear y enviar propuestas profesionales.
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.
Sobre Quote Roller
? Quote Roller ayuda a automatizar y agilizar el proceso de creación de propuestas. Olvídate del texto de rutina copiar y pegar en Word. Con Quote Roller, puede guardar y reutilizar información general sobre su empresa, los términos de servicio y otras cosas que utilizó para realizar propuestas manualmente. Quote Roller también viene con una interfaz amigable e intuitiva de arrastrar y soltar que ofrece capacidades de personalización ilimitadas.
Aquí hay una captura de pantalla de la página de inicio:
Impresión inicial
Desde el principio te puedo decir que realmente me gusta este sitio. Ejemplifica varias tendencias en el diseño web moderno, lo que significa que no es exactamente único, pero en realidad no tiene que serlo. El punto es comunicar que Quote Roller es una utilidad avanzada, moderna y de creación de presupuestos, y este diseño hace exactamente eso.
Es extremadamente importante tener en mente objetivos como este al crear un sitio web. Demasiados diseñadores arrancan en una dirección que se adapta a su estado de ánimo en un día cualquiera, lo que resulta en hermosos sitios web con mensajes confusos. ¡Los gráficos en un sitio son una fuente principal de comunicación y usted quiere asegurarse de que estén diciendo lo que usted quiere!
Colores
Lo primero que quiero discutir es el esquema de color porque usa una técnica muy popular que hemos discutido aquí anteriormente. La paleta principal utiliza varios tonos de azul, una opción para un aspecto limpio y profesional. Una vez que se establece ese estrecho alcance de colores, se pone un color de énfasis que realmente se destaca en la página, en este caso naranja.
Esto funciona realmente bien porque le da mucho poder para dirigir el ojo del usuario. A medida que se desplaza hacia abajo en la página, ve un montón de azul y blanco interrumpidos por muy pocos puntos brillantes de naranja. Tus ojos naturalmente gravitarán hacia esos puntos brillantes, donde verás y leerás exactamente lo que el diseñador quiere que hagas. Es una técnica super simple con fuertes resultados.
Tema gráfico
El contenido principal del sitio se mantiene en un rectángulo de esquina redondeada. Esto se coloca sobre un lienzo con textura de fondo. Esta textura atractiva pero sutil agrega mucha dimensión a la página y es realmente fácil de construir. Te enseñamos una técnica similar en este artículo.
El área de navegación tiene una cinta muy bonita envuelta alrededor de ella. Esto sirve tanto para ayudar a que el área de navegación se destaque como para dar un efecto tridimensional a la página en su totalidad.
Se agrega otra capa justo encima del pie de página donde residen las citas y recomendaciones de los clientes. Estos tipos de efectos solo le dan al sitio una sensación agradable y pulida. Se puede decir que los diseñadores en realidad pasaron un tiempo refinando la calidad estética.
Tipografía
¿No tiene el presupuesto para Typekit o un servicio de fuente web premium similar? Google Web Fonts ofrece una alternativa sorprendente, gratuita y sencilla de implementar. Quote Roller usa Google Web Fonts para el? Merriweather? Titular, un serif único y sofisticado.
Tenga en cuenta que la implementación de fuentes personalizadas aquí es bastante conservadora, solo los titulares usan Merriweather, el resto es Arial. Usar una fuente personalizada para la copia del cuerpo está bien, pero no siempre es la mejor opción debido a los tiempos de carga. Además, es bastante fácil volverse loco con las fuentes elegantes y lograr que el resultado final se vea como un desastre. Una ruta más segura es encontrar una fuente personalizada y dejar que sea el toque de diseño único.
Mensajería
El mensaje en el sitio es muy simple y claro: "Crear, rastrear y enviar propuestas". Es lo primero que lees. No hay que andar por las ramas, inmediatamente entiendes lo que está pasando.
Esto está reforzado por un montón de capturas de pantalla. No me gusta encontrar una nueva aplicación web y luego buscar minutos para encontrar una captura de pantalla. ¡A veces no hay ninguno en la página de inicio o incluso el video de introducción! Si está ocultando su interfaz hasta que un usuario realmente se registre, asumiré que se avergüenza de ello.
Yendo más allá en el frente de la mensajería, también me gusta cómo se presentaron las características en este sitio. El encabezado en negrita con un pequeño icono y un subrayado sólido, aparte del párrafo, se ve realmente nítido. Esta área es altamente legible y usa mucho espacio en blanco para dar a cada elemento espacio para respirar.
Página del tour
Si está buscando una inspiración de la página de productos sólidos, Quote Roller tiene uno excelente. Me gustan las capturas de pantalla grandes que alternan los lados de la página. Desplazarse por esta página realmente le brinda una visión rápida pero completa de lo que obtendrá al registrarse en la aplicación.
Conclusión
Quote Roller es un sitio realmente genial que cumple bien su propósito. Es limpio, moderno y profesional, una combinación perfecta cuando vendes un servicio web a profesionales de negocios.
El mensaje es muy claro con mucho refuerzo a través de iconos y capturas de pantalla. Los colores son perfectos y hay mucha atención al detalle.
En general, le doy un gran pulgar hacia arriba y realmente no puedo pensar en nada negativo que decir al respecto.
¡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.