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 SuccessInc, un tema de Drupal de más de (solo) temas. ¡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 SuccessInc
? La mayoría de los temas están diseñados para parecer simples, limpios, mínimos. Este está diseñado para ayudarte a impresionar. Tanto en escritorio como en móvil. Success Inc. se ajusta de manera óptima al ancho del navegador en el que se ve. Como resultado, se ve increíble, independientemente de si se trata de una computadora de escritorio, teléfono inteligente o tableta que están usando los visitantes.
Aquí hay una captura de pantalla de la página de inicio:
Primera impresión
Mi impresión inicial de SuccessInc es bastante positiva. Es un tema muy atractivo que parece tener muchas características de primera categoría y áreas de contenido personalizables. Me encanta que sea receptivo y aprecio todas las opciones fáciles de modificar que están incorporadas. ¡Echemos un vistazo a cada sección individualmente y veamos lo que pensamos!
Esquema de colores
Uno de mis aspectos favoritos de este tema es la combinación de colores en negrita. Los reflejos brillantes están contrastados con el negro, lo que lo convierte en una experiencia llamativa que se siente con clase y moderna. El color naranja que ve arriba es simplemente el esquema de color predeterminado, puede cambiarlo fácilmente en la configuración.
Cambiar la combinación de colores es tan simple como hacer clic en un menú desplegable y elegir la opción que desee. Puede elegir uno de los siete esquemas: naranja, cian, verde, rojo, crema, púrpura y gris. ¿Solo pulsa el botón? ¿Guardar? botón y el nuevo esquema se aplicará instantáneamente.
Todas las opciones de color que han incluido se ven geniales, lo que hace que el tema sea bastante sencillo en términos de estética visual.
Contacto / Barra de búsqueda
La parte superior del sitio tiene una pequeña barra que contiene información básica de contacto junto con una barra de búsqueda. Aquí hay una foto de cerca de cómo se ve esto:
Hay varios tipos diferentes de sitios web en los que el motivo principal por el cual el usuario se detiene es encontrar algún tipo de información de contacto. Para este tipo de sitios, este es un gran elemento de diseño. Los usuarios no tienen que buscar una página o formulario de contacto, la información que realmente buscan es una de las primeras cosas que ven.
Como puede ver en la foto de arriba, también hay un campo de búsqueda en esta barra. El campo en sí es invisible, pero se indica mediante un texto de marcador de posición seguido de un pequeño icono de búsqueda. Cuando hace clic en este texto, se convierte más en un campo de búsqueda tradicional.
Esta es una pieza de diseño genial, pero me interesaría ver si los usuarios realmente responden tan bien. Tendemos a buscar señales visuales antes de leer, por lo que a alguien le puede tomar un tiempo averiguar cómo realizar una búsqueda. Una ruta rápida que un usuario puede tomar es ver el ícono de la lupa y hacer clic en él, que simplemente ejecuta una búsqueda vacía inútil.
Además, la sugerencia dice: ¿Ingresar términos y pulsar Buscar? ? ¿Pero no hay un botón que diga? ¿Buscar? así que de nuevo, es fácil ver cómo esto podría confundir a un usuario. Obviamente, cualquiera que sea medio competente con la web lo resolverá lo suficientemente rápido, aún así es una buena idea identificar los posibles obstáculos y frustraciones de los usuarios.
Navegación
La navegación es proporcionada por un menú de Superfish de roca sólida. Funciona perfectamente, tiene animaciones suaves y múltiples niveles, y se ve bastante elegante. Más adelante, analizaremos qué sucede cuando lo redimensiona para dispositivos móviles.
Diapositivas
Moviéndose hacia abajo en la página, lo siguiente es la presentación de diapositivas. Es un área de contenido agradable, grande y animada que trae algo de interés al principio de la página. Hay algunas características aquí que me gustaría señalar también que debe tener en cuenta al crear una presentación de diapositivas.
En primer lugar, hay múltiples puntos de navegación. Tanto las flechas como los puntos en la parte inferior sirven para avanzar la presentación de diapositivas o saltar a un punto específico. Además, los puntos proporcionan un punto de referencia donde se encuentra y cuántas diapositivas están presentes. Finalmente, hay leyendas que le permiten agregar mensajes personalizados.
En última instancia, estas no son solo buenas características. Aumentan la efectividad y la facilidad de uso de esta pieza de la interfaz de usuario, por lo que es más que simple ojo dulce. Si le interesan las opciones, incluso puede acceder a la configuración y cambiar las transiciones o la duración de la diapositiva.
Contenido y pies de página
El resto de la página es bastante básico. Comienza con un área de contenido secundaria y se mueve hacia abajo a un pie de página, los cuales están distribuidos en tres columnas.
Primero, tiene tres áreas de contenido, cada una de las cuales contiene una imagen con una descripción y un botón. Particularmente me gusta la sombra colocada en las miniaturas aquí. Es una bonita ilusión que le da cierta profundidad al diseño.
Si la información de contacto en el encabezado no era suficiente, el pie de página proporciona una funcionalidad realmente agradable. Hay un lugar para un mapa, un feed de Twitter y un formulario de contacto. Esto, además de una especie de pie de página secundario que contiene varios iconos sociales. Estos tienden a ser un desorden desordenado en un diseño como una idea de último momento, así que realmente aprecio lo bien integrados que están en el diseño.
Disposición Responsive
El diseño del sitio comienza como estático, luego, cuando la ventana gráfica se reduce a un cierto ancho, se vuelve fluido. A continuación, se muestran algunos de los pasos para el diseño a medida que cambia la ventana gráfica:
Me encanta que este tema sea receptivo, creo que esto se ha convertido en una necesidad más que en una amabilidad. Lo que realmente sacan del parque es que su diseño parece ser bastante independiente del dispositivo. Por más que lo intenté, no pude romper el diseño de manera significativa al experimentar con diferentes anchos. Todo, hasta en la barra de búsqueda, se reformatea muy bien sin importar el tamaño de pantalla que le lances.
En dispositivos móviles, la navegación se convierte en un cuadro de selección. Esto es fácil de usar, familiar y mantiene todas las opciones originales en su lugar. Existen algunas buenas alternativas a esta estrategia, pero esta es una de las soluciones más funcionales.
Pensamientos de cierre
Hemos visto antes que Más que (solo) Temas hace un gran trabajo Mi principal queja la última vez fue que el tema no respondía, pero definitivamente han abordado esa preocupación con SuccessInc. En general, es un gran tema y puedo ver que funciona muy bien para muchos tipos diferentes de sitios.
¡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.