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 Capital Teas. ¡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.
Sobre Capital Teas
Capital Teas es una quinta generación, comerciante de té especializado de propiedad familiar. Ofrecen más de 175 variedades de té de hoja suelta e infusiones de hierbas de la mejor calidad de los países y regiones de mayor crecimiento del mundo, como Sri Lanka, India, China, Japón, Malawi y Kenia. Sus productos de vajilla incluyen teteras, cerveceros e infusores tradicionales y modernos, y muchos otros artículos especializados. También ofrecen miel artesanal, mermeladas, chocolate con infusión de té y otros alimentos envasados gourmet que acompañan a sus tés.
Aquí hay una captura de pantalla de la página de inicio:
Primera impresión
Mi primera impresión de un sitio se basa en gran medida en la idea de si puedo decir exactamente de qué se trata en los primeros tres segundos de ver la página de inicio. Así es, tres segundos. Tienes que llamar mi atención, decirme quién eres y de qué tratas en menos tiempo del que le toma a una persona promedio atarse un zapato.
En el caso de Capital Teas, pasan esta prueba con gran éxito. Este sitio grita tienda de té en línea (de una buena manera). Veo fotos de té por todas partes, ¿la palabra? ¿Té? Aparece varias veces, los colores sugieren té; Al instante estoy bien orientado y sé que si estoy buscando comprar algo de té, estoy en el lugar correcto.
En cuanto a la estética visual y el diseño del sitio, diría que tiene buenos huesos. Hay una estructura sólida y atractiva estética visual iniciada. Necesita un poco de trabajo, pero nada demasiado importante. Comencemos y veamos algunas de las áreas específicas para ver si podemos encontrar algunas sugerencias para mejorar.
Encabezamiento
Una de las áreas donde veo más problemas es el encabezado. Parece que fue diseñado para ser simple, pero el departamento de mercadeo lo consiguió y lo desechó. Hay tantas cosas apiñadas en él que se siente desordenado y se mantiene como una contradicción absoluta con la estética bastante limpia establecida por el resto de la página.
Los íconos sociales en particular podrían usar alguna limpieza importante. El diseño de cada uno es inconsistente, los elementos múltiples de Facebook parecen redundantes, hay problemas de superposición, y todo en este lugar está abarrotado con muy poco espacio para respirar.
¿El trato del día? y el registro de boletines en el otro lado también está fomentando el aspecto desordenado. Estos elementos no están alineados particularmente bien con cualquier otra cosa en la página y parecen lanzados como una idea de último momento.
Como arreglarlo
Algunas decisiones difíciles deberán tomarse aquí porque algo tiene que suceder. De hecho, varias cosas tienen que irse. Se siente como si alguien intentara meter un montón de elementos de pie de página en un encabezado solo para obtener un mejor lugar en la página, pero recuerde que si todo es especial, nada es especial. Tienes que elegir lo que tiene más importancia y dar a tus artículos una jerarquía visual clara.
Recomiendo mover la mayor parte del contenido en el encabezado a otro lugar. Intenta identificar los elementos absolutamente críticos. Comience con el logo. Es una pieza de aspecto agradable que crea una gran sensación del viejo mundo para el sitio, preste más atención al quitar los elementos circundantes. El otro artículo necesario es el carrito de compras. Si puedes reducir el encabezado a estos dos elementos, lo estás haciendo muy bien. Si no, permitiré la inclusión del trato del día. Todo se mueve al pie de página o mejor integrado al resto de la página.
Mientras lo hace, encuentre un conjunto de iconos sociales simple que tenga iconos coincidentes para cada red social que necesite.
Navegación
Bajando por la página, a continuación llegamos a la navegación. Lograr una navegación doble efectiva y sin complicaciones es un asunto delicado, pero en realidad me gusta la forma en que se ha manejado aquí. Se combinó un menú de texto puro con un cuadro de búsqueda y se apiló en un menú colorido basado en íconos, y el resultado es una gran oferta de formas para que encuentre lo que estoy buscando.
Una cosa que me parece un poco incómodo es el diseño de los menús desplegables en la navegación principal. Tienen una sensación desconectada y flotante que hace que parezca que algo no está funcionando del todo bien.
Recomiendo repensar esto y experimentar con diferentes ideas visuales que hagan que los menús desplegables se vean más integrados y conectados al menú principal.
Contenido principal
El área de contenido principal consta de tres cajas. Estos son una buena combinación de formatos y consisten en un control deslizante grande, una imagen estática y una pequeña película (que afortunadamente no se reproduce automáticamente). Esta área es genial. Me encanta que haya sido emparejado en tres cajas, el diseño se ve bien y limpio y realmente enfoca los productos y la información que se muestra.
Fotografía
Como fotógrafo, me encantan las buenas fotos y este sitio se entrega con éxito en esta área. Parece que los propietarios realmente han invertido en fotografías de calidad y se ven recompensados al hacer que sus productos parezcan muy atractivos y de alta calidad.
Tipografía
Después del encabezado, la segunda área importante que necesita atención inmediata es la tipografía. La mayoría de los diseñadores recomiendan que elijas uno o dos tipos de letra sólidos para un proyecto completo, tal vez tres si te sientes aventurero y tienes suficiente habilidad para lograrlo.Perdí la cuenta de cuántos tipos de letra vi en la página de inicio solo en este sitio.
Su tipo es uno de los indicadores más fuertes del estilo de su sitio. Establece un estado de ánimo, un período de tiempo, un tono de profesionalidad y mucho más. Si es inconsistente y disperso, también lo son los mensajes que está transmitiendo.
Definitivamente recomiendo eliminar todos los diversos tipos de letra, luego elegir uno o dos con un alto grado de legibilidad y un tono que coincida con las intenciones del diseño. El resultado será una sensación mucho más consistente y profesional para el sitio en su conjunto.
Contenido secundario
Hay una tira de cajas en la parte inferior del sitio que llamaré "contenido secundario". para nuestros propósitos. Este diseño combinado con los tres cuadros anteriores es simple y sólido. Me recuerda algunos de los diseños de nuestro artículo 10 Ejemplos de diseño de sitios web de Rock Solid.
Mi único problema real con esta área es la tipografía, que ya he revisado. Específicamente, el problema aquí es que el tipo de letra en "ver este producto" es tan delgado que es casi ilegible.
Conclusión
En resumen, Capital Teas tiene un gran comienzo para un sitio súper atractivo. La estructura básica del diseño es sólida, las fotos son hermosas y la navegación dual funciona bien aunque normalmente desaliento esa ruta. Algunas áreas para enfocarse en mejorar incluyen el encabezado, que debe ser desordenado, y la tipografía, que debe emparejarse con unos pocos tipos de letra seleccionados.
¡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.