Explicacion de los 4 principios de diseno web mas importantes

Explicación de los 4 principios de diseño web más importantes

Hay muchos factores que contribuyen a crear un sitio web maravilloso. En este artículo, he seleccionado los cuatro principios de diseño web más importantes que contribuyen en gran medida a crear un sitio web hermoso y exitoso. Para cada principio, voy a entrar en detalles sobre lo que significan y proporcionar algunos ejemplos diferentes para ayudar a entender cada uno.

No creo que ninguno de los principios sea más importante que el otro. Al seguir los cuatro, demuestran ser útiles y exitosos para el diseño web.

Principio # 1 - Utilidad

Todo sitio web debería ser útil para sus usuarios y visitantes. Por ejemplo, a todo el mundo no le gusta el clickbait porque es inútil. Cuando un sitio web demuestra ser útil, también resulta valioso. Un sitio web bien diseñado satisfará las necesidades del usuario y tendrá un propósito sólido más allá de verse bien. Además, un sitio web útil proporcionará información relevante para el usuario. Puede satisfacer las necesidades de un usuario o visitante proporcionando información relevante. Ese es el gran círculo de la vida.

Ejemplo # 1 - Infermedica

Inicio de Infermedica

Echemos un vistazo al sitio web de Infermedica. Lo primero que ve en su página de inicio es un gran encabezado que dice "Inteligencia artificial para empresas de atención médica". Es un poco vago, pero afortunadamente, pero el producto se explica con más detalles más adelante en la página.

El enfoque principal del sitio web es doble. Primero, compartir lo que Infermedica puede hacer por la industria médica. En segundo lugar, tiene como objetivo que la gente programe una demostración. Todo el sitio web explica la facilidad y la mejora del flujo de trabajo médico con la ayuda del producto de inteligencia artificial de Infermedica.

Además, la llamada a la acción para programar una llamada es bastante repetitiva. Esto es genial porque no hay llamadas a la acción contradictorias en este sitio web, como instar a los visitantes a registrarse para recibir un boletín informativo o una prueba gratuita. El propósito del sitio web de Infermedica es claro como el día.

Infermedica proporciona una explicación de cómo funciona su producto y casos de uso específicos como parte de su información relevante.

Ejemplo n. ° 2 - Multiplicidad Leeds 2016

Otro ejemplo de un sitio web útil es la página de inicio de Multiplicity Leads 2016. Es una página de inicio para un evento de una sola noche organizado por la empresa de láminas de estampado Foilco. El evento está dirigido a artistas gráficos en Leeds. La página de destino está llena de información útil, como dónde se lleva a cabo el evento y cuándo.

Detallan los tres diferentes ponentes que aparecen en el evento y por qué fueron elegidos. Además, la página web también explica un poco sobre el anfitrión y por qué les resulta importante organizar el evento en primer lugar. En este punto, la página ha terminado. Sin embargo, antes de que ese fuera el caso, también podía reservar boletos.

Aunque no hay mucho texto en este sitio web, hay una gran cantidad de información. La copia es muy concisa y al grano. Eso hace que aprender sobre el evento como un potencial sea emocionante, pero también útil. Ninguna información parece fuera de lugar o irrelevante.

Principio # 2 - Comunicación

Todo en un sitio web es comunicación. Desde la copia de los botones hasta la forma en que un usuario interactúa con el flujo de pago. Es importante que un sitio web tenga instrucciones claras sobre cómo completar un formulario y brindar comentarios al usuario cuando algo sale mal o necesita su atención.

Una explicación de por qué un formulario solicita algo extraño, como su apellido de soltera, mientras intenta comprar un libro, ayuda a mejorar la comunicación entre el sitio web y el usuario. El lenguaje claro es la clave. Además, la jerarquía juega un papel importante. Cuando la jerarquía es extraña, confusa o simplemente mala, el usuario quedará confundido. Eso es mala comunicación.

Ejemplo n. ° 1: marco icónico

Marco icónico

Para tener una idea de lo que una buena jerarquía puede hacer por la comunicación, revisaré la página de inicio de Iconic Framework. De arriba a abajo, la información se vuelve cada vez más detallada.

Comienza con una descripción breve y clara del producto: es un marco de código abierto para crear aplicaciones móviles. Si lo encuentra interesante, comenzará a desplazarse. Digamos, un visitante sigue desplazándose. La siguiente sección habla sobre el producto con un poco de detalle e incluso más detalles en la siguiente sección y aún más en la siguiente.

Todas esas cosas, toda la información permitirá al visitante juzgar si este producto es útil para ellos o no. Solo después de intentar vender el producto con el mejor pie adelante, la página web detalla cosas menores como las integraciones.

Las características principales, como las capacidades multiplataforma, no importan tanto como la función de creación de aplicaciones. Además, la prueba social tampoco es tan importante. Solo ayuda a convencer a los usuarios que están más seriamente interesados ​​en el producto y que será alguien que se haya molestado en desplazarse hasta el final. Es una forma de comunicar información en momentos relevantes.

Ejemplo # 2 - Banco

Banco

Otro ejemplo que debemos observar si queremos juzgar la comunicación efectiva es la interacción dentro de un sitio web. Esta vez, quiero mostrarles la incorporación de Bench, una aplicación financiera para empresas más pequeñas. El proceso tiene cuatro pasos. La primera te presenta a Lars y Brittany; ahora son parte de tu equipo.

Hay hermosas fotos y algunos fragmentos de información sobre ellas e incluso sus firmas únicas dentro del mensaje de bienvenida. Eso comunica cuidado. Comunica que, de hecho, hay humanos detrás de la aplicación. A medida que avanza en el proceso de incorporación, Lars está allí para ayudarlo, un buen toque.

Las pequeñas colas en el diseño también recorren un largo camino. Por ejemplo, al completar la información de la tarjeta de crédito, aparece una imagen de la tarjeta de crédito que completa la información tal como la vería en su tarjeta. Incluso se voltea hacia atrás al completar el código de seguridad, como lo hace con una tarjeta real.

Cuando ingresa información, el formulario le indica cómo formatear la información. Pero, si hace algo mal, proporciona información clara sobre cómo corregirlo. Bench se ha preocupado claramente por prestar atención a cada detalle para asegurarse de que no confundan a los usuarios, sino que brinden una comunicación clara durante todo el proceso de incorporación.

Principio # 3 - Sencillez

Cuando las cosas son simples, significa que toda la jerga, el contenido y la información innecesarios se eliminan. Eso es algo fantástico de lograr con cualquier sitio web. Cuando se simplifica un diseño, significa que conserva solo el contenido necesario y relevante.

Eso, nuevamente, significa que el sitio web también es útil. Si aún no lo ha notado, los cuatro principios del diseño web son diferentes pero funcionan juntos. Lograr uno ayuda a lograr el otro. Los diseños simples usan espacios en blanco para hacer que los diferentes elementos de la página sean legibles, legibles y digeribles. Pero los diseños simples también están libres de desorden. Además, el diseño simple requiere solo las interacciones necesarias y el esfuerzo de los usuarios. Todo eso hace que un diseño sea mucho más evidente.

Ejemplo n. ° 1: aplicación Surge

Aplicación Surge

El ejemplo perfecto de un sitio web de diseño simple debe ser Surge App. Eche un vistazo a la captura de pantalla anterior. Es una sección un poco más abajo de la página de inicio. Tiene tan poco que hacer, pero sigue siendo útil. Tiene una hermosa foto de una pareja gay; es lo principal que ves.

Luego, se le presenta un título y un subtítulo cortos que explican, muy rápidamente, que esta es una aplicación de citas para hombres homosexuales. Lo asombroso es que no hay nada más allí. Esta sección es un ejemplo de hermoso diseño web.

¿Qué más podemos decir sobre esta sección? Si desea obtener más información sobre la aplicación, debe hacer clic en el enlace. La sección no contiene nada que sea necesario para hacer clic. Sin embargo, permite al visitante obtener la información necesaria si la desea.

¿Notaste también la navegación? Es el ícono del menú de hamburguesas en el lado izquierdo. Nuevamente, la navegación no se interpone. No hay innumerables enlaces que intenten llevarte a otro lado.

Cada sección tiene un propósito y hay muy poco que lo distraiga, como visitante. Este ejemplo solo cubre todos los conceptos básicos del diseño simple: uso de espacios en blanco, libre de desorden, evidente por sí mismo, que contiene solo la información necesaria. A su vez, el diseño es útil y útil tanto como puede ser.

Principio # 4 - Coherencia

Cuando hablo de coherencia me refiero a dos cosas distintas. Primero, está la consistencia de las páginas web y la presencia general en línea. El mismo sitio web, aplicación web o producto debe tener el mismo estilo visual en cada página y en varias plataformas o dispositivos.

Todos hemos estado allí donde compramos en un sitio web de comercio electrónico, decidimos comprar un producto y llegamos a la página de pago que no se parece en nada al resto. Es confuso y, francamente, desagradable. No es nada tranquilizador saber que estamos en el lugar correcto, haciendo lo correcto.

El segundo tipo de coherencia se trata de seguir convenciones, como hacer que se pueda hacer clic en el logotipo, colocar enlaces de inicio de sesión y registro en el lado derecho de la navegación superior o colocar enlaces de redes sociales en el pie de página.

Ejemplo # 1 - Vero

Vero
Usaré Vero como un gran ejemplo de estilo visual consistente. A medida que navega por las diferentes páginas, todo el aspecto del sitio web es el mismo, también conocido como coherente. Desde la página de inicio hasta las funciones, los precios o la página de carrera, el estilo visual es el mismo.

Esto mejora la experiencia del visitante y hace que la empresa se vea mucho más profesional también. Lo he comprobado y sus páginas de registro e inicio de sesión también siguen el mismo estilo. Parece un poco tonto, pero como dije, todos hemos visto un sitio web donde su estilo visual está por todas partes.

Además, Vero sigue las convenciones típicas de diseño web. Por ejemplo, el logotipo tanto en el encabezado como en el pie de página lo lleva a la página de inicio. Los botones de inicio de sesión y registro se encuentran en la esquina derecha de su navegación. El pie de página es la puerta de entrada a todo tipo de información adicional que puede ser irrelevante para un usuario nuevo. Cuando ingresa información en los campos de entrada, el marcador de posición se convierte en una etiqueta. Y así.

Ejemplo # 2 - MailChimp

MailChimp

MailChimp es otro ejemplo asombroso de un estilo visual consistente en muchos canales. Son meticulosos en mantener su diseño detallado. Desde la página de inicio hasta la página de registro y la aplicación web, todo parece coherente porque sigue el mismo estilo.

Sus páginas de soporte y recursos adicionales también son fantásticos. La empresa también sigue las convenciones web típicas que ayudan a que su sitio web y su producto sean altamente utilizables.

La comunidad de diseño celebra enormemente a MailChimp por sus esfuerzos para preocuparse por la calidad de los diseños de su empresa que brillan en cada detalle. Es por eso que a tantas personas les encanta usar su producto y les encanta estar asociados con la empresa.

Conclusión

Hay muchas cosas diferentes que contribuyen a la creación de un sitio web exitoso. Estos cuatro principios de diseño web son los más importantes. Como mencioné en la publicación, se ayudan mutuamente. Cuando tiene un diseño simple, es más probable que solo proporcione la información más relevante, lo que a su vez hace que el sitio web sea utilizable, etc.


La guia para el diseno inteligente de ventanas emergentes

La guía para el diseño inteligente de ventanas emergentes

Los usuarios a menudo se molestan con molestar ventanas emergentes que requieren que llenen formularios o respondan preguntas, pero ¿son todos tan malos? Hay ventanas emergentes que ayudan a los usuarios, dan consejos u ofrecen descuentos en productos.

Entonces, un surgir suele ser una pequeña ventana que aparece repentinamente en primer plano de la interfaz visual de una página web. Las ventanas emergentes pueden ser un anuncio, un bloque de información, un formulario de contacto, etc. Es más probable que sean pequeñas y con colores contrastantes, pero definiremos todos los elementos del diseño de las ventanas emergentes y los factores que influyen en cómo los usuarios las perciben en secuencia. no todo a la vez.

Ventanas emergentes

Apariencia brillante

Las ventanas emergentes pueden servir para diferentes objetivos y esto influye en la forma en que se inicia una ventana emergente. Si es un anuncio o un banner promocional, aparecerá sin acciones, solo en un período de tiempo determinado después de que abra una página web. El otro caso es una ventana emergente informativa. Debe iniciarse con un clic. Una ventana emergente informativa tiene una función explicativa, por ejemplo, ayuda a completar un formulario. Las ventanas emergentes también pueden ser un bloque de contenido adicional con información secundaria sobre este o aquel punto, para que solo los usuarios interesados ​​lo lean. Esto puede ayudarlo a organizar el contenido y mantener las reglas de espaciado en su sitio web. Es mejor una ventana emergente con un formulario de contacto que no aparezca de repente, porque los usuarios no la tratarán bien. El pop de contacto debe abrirse con un botón específico, esto sería perfecto.

El Mundo al Revés con Pop Ups simples
Hay cuatro bloques de colores con descripciones de servicios en esta página web. Cada bloque se complementa con una sección informativa emergente. Es fácil iniciarlo haciendo clic y cerrarlo con un botón de cruz.

El Mundo al Reves

El Mundo al Reves

¿Cuanto más grande, mejor?

El tamaño es importante para muchos elementos de diseño de sitios web, ¿hay ventanas emergentes en esta lista? Definitivamente están ahí, pero la pregunta es si una ventana emergente debe ser pequeña o grande. Para comparar: una pequeña ventana emergente, digamos 30-40% de una página web completa, será precisa, atractiva y no bloqueará visualmente el resto del contenido. Aún así, si desea que su ventana emergente capte la atención de todos los usuarios y haga que el contenido sea altamente visible, es mejor que haga que esta ventana sea enorme y ocupe aproximadamente el 80% del espacio de la página web. Un truco más para usar: si una ventana emergente es bastante pequeña, difumine u oscurezca el fondo. Conducirá a una mejor exposición visual de una pequeña ventana.

Blog de Photodoto con un bonito diseño emergente
Lo que vemos aquí es una ventana emergente bastante buena hecha en las proporciones correctas al tamaño de la página web. Destaca sobre el fondo gracias a su elección de colores brillantes y al efecto de fondo oscurecido.

Photodoto

Juego de colores

El color es una parte esencial en todos los aspectos del diseño web, es cierto. Pero, ¿qué elección de color está ganando para las ventanas emergentes? La mejor paleta de colores es la que se basa en el contraste. Finalmente, el objetivo de cualquier ventana emergente es hacer que la gente actúe, por lo que debe diseñar un botón de CTA / código de promoción o cualquier otro detalle que lleve a acciones en colores brillantes. En este caso, el color principal de la ventana emergente debe ser neutro, como blanco, gris o marrón.

Diseño de sitios web agrícolas con pop-up amarillo brillante
Este diseño emergente contrasta, pero de una manera ligeramente diferente a la que discutimos. No usa dos colores opuestos, es monocromático con un tono amarillo pegadizo. Se ve muy bien contra un fondo oscuro.

Diseño de sitios web agrícolas

Contenido

El contenido de una ventana emergente es muy pequeño, por lo que su tarea principal es ser convincente y muy sabio. Estas 2 o 3 líneas de texto que escriba en esta sección decidirán el futuro de su campaña online. Algunas palabras convincentes que puede usar son: guardar, gratis, resultados, querer, listo, necesitar, obtener, probar, negociar, rebajar, negociar, rápido, ahora, apúrate, ser la primera, la última oportunidad, etc.

Me encanta el sitio web de Lou con el concurso emergente
La ventana emergente de este sitio web francés tiene un botón CTA persuasivo. Significa "jugar y ganar" en inglés.

Amo a Lou

Dar una opción

Es muy bueno crear una ventana emergente que haga una pregunta y ofrezca dos respuestas simples "sí" o "no". Por ejemplo, desea que sus visitantes prueben una versión de demostración gratuita de su nuevo producto y tiene la pregunta "¿Le gustaría probar nuestro nuevo producto de forma gratuita?". Por supuesto, puede crear un solo botón de llamada a la acción con el texto 'sí', 'probar', 'probar ahora', 'probar', 'obtener una prueba', etc. Pero puede hacer dos botones (preferiblemente de diferentes colores) con el siguiente texto: 'Sí, lo quiero' y 'No, no quiero nada gratis'. Estas son solo variantes aproximadas, pero el sentido es claro. En este caso, es necesario que los usuarios comprendan que ahora tienen una oportunidad, luego no habrá nada gratis.

La elección limitada incita a los usuarios a actuar y no dudar.

Formulario de entrada

Cualquier tipo de formulario es sospechoso para los usuarios porque solicita datos personales. No se trata de ventanas emergentes de formulario de contacto, donde los usuarios se guían por su decisión. Ahora, estamos hablando de los formularios que ofrecen a los usuarios suscribirse a un boletín informativo, obtener un libro electrónico o un curso gratis, obtener un descuento, etc. Existe la posibilidad de que las ventanas emergentes de 2 pasos funcionen mucho mejor. Usted hace una pregunta en la primera ventana emergente (como en el ejemplo que mencionamos anteriormente) y luego hay 2 escenarios para continuar. Abrirá otra ventana emergente con un formulario de entrada para aquellos que respondieron positivamente y simplemente cerrará la ventana para los usuarios que eligieron la respuesta negativa.

Sitio SentinelOne con formulario emergente rápido
El formulario web en una ventana emergente le permite solicitar un servicio de la empresa muy rápidamente con solo hacer clic en un botón y algunos campos vacíos para completar. Por cierto, revisa el botón CTA: ¡su color es realmente pegadizo!

SentinalOne

Sitio web de Hatteras con ventana emergente de formulario de contacto simple
Presione el botón 'Contáctenos' en la página de inicio o en la página de contacto, y verá este diseño emergente mínimo con un formulario para completar. Haga clic en la cruz, si cambia de opinión.

Hatteras

Alternativa

Todo usuario tiene derecho a elegir y debes respetarlo. Mientras trabaja con la creación de ventanas emergentes, debe pensar en todos los resultados posibles. A algunos les gustará que aparezca tu ventana emergente, otros la odiarán, habrá algunas personas que la cerrarán automáticamente y luego buscarán dónde encontrarla nuevamente. Debe hacer que su ventana emergente sea fácil de cerrar (sin dar ninguna respuesta) para los usuarios que desean volver al sitio lo más rápido posible, ya que no están interesados ​​en ofertas y anuncios.

Entonces, el tiempo es un problema muy importante al que puede enfrentarse: cuándo hacer que aparezca la ventana emergente, ¿debería aparecer nuevamente después del cierre? La media dorada es hacer que aparezca una ventana emergente en aproximadamente 5 segundos después de que se abre un sitio web y si un usuario lo cierra, no debería aparecer nuevamente. Aún así, si el cierre fue accidental y la ventana emergente brinda información / descuento exclusivo, asegúrese de que aparezca con la frecuencia suficiente, por ejemplo, cada vez que un usuario abre el sitio (o una página determinada).

Sitio web de Xchop con una ventana emergente de chat en vivo
El chat en vivo es una buena manera de conectarse con sus usuarios, y este sitio web muestra cómo aprovechar al máximo el diseño emergente para comunicarse con los clientes. La ventana aparece automáticamente, pero puede usar una flecha hacia abajo para ocultarla.

Xchop

La creatividad mata con una ventana emergente de Facebook
Esta variación del diseño emergente (que surge inmediatamente después de que se abre el sitio web) está destinada a llegar a más seguidores nuevos en Facebook. En caso de que no desee seguir a esta comunidad, use el botón de cruz en la esquina superior izquierda.

La creatividad mata

¿Que sigue?

Las ventanas emergentes no deberían alterar la experiencia del usuario. Lleve a los usuarios al lugar donde habían estado antes de que apareciera la ventana emergente. No se comprometa a reenviar a los usuarios a una página o sección que desea que visiten.

Conclusión

El diseño emergente tiene muchas reglas, pero la decisiva es hacerlo efectivo. Efectivo sería cuando se diseña, escribe y coloca correctamente. Haga que su ventana emergente sea un elemento útil del sitio web, ¡no destructivo!


Que hace que un sitio web de comercio electronico sea

¿Qué hace que un sitio web de comercio electrónico sea excelente?

Cuando se trata de hacer un sitio web de comercio electrónico, es posible que se enfrente a algunos desafíos relacionados con el diseño y la usabilidad del sitio. Los sitios que venden productos en línea necesitan un sitio web que promocione sus productos y sea amigable para todos. Hay una serie de atributos que tienen los sitios web de comercio electrónico exitosos; por lo tanto, si recién está comenzando, es posible que desee incorporarlos a su diseño.

No espere hacerse rico de la noche a la mañana. De hecho, Amazon comenzó en 1995, pero ni siquiera alcanzaron un pedido promedio de 47,31 dólares hasta 2012, según Internet Retailer. Por lo tanto, implemente estos consejos y sea paciente. Al tener un gran sitio de comercio electrónico, eventualmente verá las ganancias.

Consejos para crear un excelente sitio web de comercio electrónico

Navegación

Cuando vende productos o servicios a los visitantes en línea, estos deben poder encontrar los productos, leer la información y pagar rápidamente con ese producto. Si los clientes no pueden navegar por su sitio web o encontrar su camino, se irán. Visitantes perdidos significa ventas perdidas; por lo tanto, necesita un sitio web que sea fácil de navegar por encima de todo. Pídale a alguien que navegue por su sitio web y vea lo que piensa. Utilice grupos de prueba para probar su nuevo diseño antes de lanzarlo al público. Si puede, resuelva los errores o problemas de usabilidad de antemano. Debido a que la usabilidad también afecta la clasificación de su motor de búsqueda, es importante solucionar rápidamente cualquier problema de experiencia del usuario.

Navegación

El diseño simple pero eficaz es lo mejor

Su sitio web debe tener un diseño simple que se pueda construir con Shopify, pero que sea impactante. Vende productos, no el diseño de su sitio web. Por lo tanto, su diseño y plantilla no deberían afectar sus productos de ninguna manera. Debido a que se espera que el comercio electrónico crezca un 9 por ciento en 2016, según eMarketer.com, tener un diseño efectivo significa que su negocio también crecerá. Lo mejor es tener un diseño minimalista. Algo que sea decorativo, pero muy sencillo. Las únicas imágenes que tiene son las de los productos, de modo que la mente de los visitantes siempre esté en lo que pueden comprarle.

Muestre lo mejor primero

Todas las empresas de comercio electrónico tienen algún tipo de producto que se considera el "mejor". Asegúrese de tener una forma de presentar este tipo de productos en su sitio web. Estos productos también pueden llevar a los clientes a otros productos relacionados en el sitio web. La sección destacada debe actualizarse periódicamente y adaptarse a las estaciones. Entonces, si tiene artículos de temporada o tiene artículos que está promocionando para un día festivo en particular, asegúrese de que estén en su sección de destacados.

Muestre lo mejor primero

Sistema de pago fácil

La experiencia del usuario es crucial para su clasificación y el éxito de su sitio web en general. Si su proceso de pago implica varios pasos que confunden a los compradores, abandonarán su carrito y pasarán a otra cosa. Considere no hacer que las personas se registren para obtener una cuenta solo para pagar. El 26 por ciento de los carritos que se abandonan lo hacen porque los compradores no quieren crear una cuenta solo para comprar en un sitio web de comercio electrónico.

Promocione siempre sus productos relacionados

Cuando alguien ve un producto en su sitio web, también debería ver productos relacionados en algún lugar de la misma página. Esto puede alentar al cliente a permanecer en su sitio por más tiempo, lo que aumenta la probabilidad de que le compren, pero también es una forma sin presión de vender más productos. Por ejemplo, ofreces ropa de cama. Cuando un cliente ve un edredón, puede ver productos relacionados como cortinas, sábanas o almohadas decorativas a juego.

Promocione siempre sus productos relacionados

Utilice un logotipo claro e identificable

Necesita un logotipo que la gente pueda reconocer y asociar instantáneamente con su marca. Un logotipo fácilmente reconocible ayuda a los clientes a sentirse más seguros comprando con usted, porque conocen su marca. Cree o establezca el logotipo de su marca antes de iniciar un sitio web. Luego, use ese logotipo en las redes sociales, sus impresiones y publicaciones, así como su sitio web de comercio electrónico para ayudar a los clientes a generar confianza.

Fotos de calidad

Las fotos borrosas o inexactas nunca deben usarse en un sitio de comercio electrónico. Utilice siempre fotografías claras y cautivadoras. Puede mostrar el producto con un modelo o solo. Cuanto más detalles pueda ver un cliente sobre el producto que está a punto de comprar, más probabilidades hay de que lo compre. Un 15 por ciento más de personas comenzará a comprar en línea. Debido a que están en línea y no en persona, querrán ver fotos claras e identificables de los productos que están comprando.

Fotos de calidad

Elija un diseño de sitio web que coincida con lo que está vendiendo

El diseño general de su sitio web debe coincidir con los productos que vende. Por ejemplo, aquellos que venden productos para bebés usan diseños lindos y coloridos que esperaría encontrar en una guardería o guardería. Aquellos que venden equipos electrónicos o tecnológicos a menudo usan diseños mínimos y limpios. Su diseño debe seguir siendo profesional, incluso si su nicho es para personas más jóvenes. Recuerde atraer al comprador que comprará sus productos, no a la persona que usará sus productos. Por ejemplo, si vende ropa para bebés, no desea crear un diseño que atraiga a los bebés (no los compran), pero sí desea un sitio que atraiga a los padres que estén interesados ​​en sus productos.

Blogs de funciones

Utilice blogs para ayudar a generar más tráfico a su sitio de comercio electrónico, pero también enlace desde su sitio de comercio electrónico al blog. Las guías del comprador son muy populares entre los compradores en línea, porque les dice exactamente qué buscar y cómo comprar lo que quieren. Agregue guías para compradores a su sitio de comercio electrónico para ayudar a impulsar a los clientes en la dirección correcta. A veces, el simple hecho de ofrecer información gratuita a través de una guía del comprador convencerá a un comprador en línea de comprarle a usted frente a la competencia.

Blogs de funciones

Haga claras sus promociones

¿Ofrecen envío gratuito o tienen promociones en curso? Sus promociones deben ser claras y fáciles de encontrar en la página de inicio y en cada página de la experiencia de compra de su cliente. Si hay condiciones para su promoción, déjelas claras también, como el envío gratuito en pedidos superiores a $ 50. Los clientes se sienten atraídos por las promociones, las rebajas, las ventas y, sobre todo, el envío gratuito. Por lo tanto, utilícelos para fomentar más conversiones en su sitio.

Conclusión

¿No le gustaría que su sitio web se viera bien, atractivo y atractivo? ¿Qué tal aumentar el tráfico a su portal comercial en línea? ¿Está interesado en aumentar las ventas del producto que ofrece y duplicar o triplicar sus ganancias?

¿Quiere recibir una opinión positiva sobre su sitio web y el boca a boca? Siga los consejos mencionados anteriormente y todos apreciarán su sitio web de comercio electrónico.


El boton de accion flotante una proxima tendencia de diseno

El botón de acción flotante: una próxima tendencia de diseño popular

los botón de acción flotante es un asistente ligero, elegante, dinámico, rápido y eficiente que tiene como objetivo apoyar la navegación principal y mejorar la experiencia del usuario. Al ser solo un pequeño elemento circular que se mueve junto con el usuario, se eleva de forma independiente por encima de todo y, por regla general, se adhiere al lado derecho, es capaz de extender la funcionalidad de cada pantalla así como hacer un programa más manejable.

Como implican las especificaciones de Google, el botón debe tener un tono constructivo y proporcionar un acceso rápido solo para instrumentos importantes. La guía lo alienta a equiparlo con transiciones elegantes y cambios suaves y agradables a la vista entre varios estados, optar por gráficos intuitivos y claros y un diseño vibrante y llamativo, así como evitar usarlo para funciones menores o destructivas. Hemos recopilado una pequeña colección de nuevos conceptos de interfaz de usuario móvil que han dominado esta nueva tendencia.

Botones de acción flotantes

Rediseño de material de Instagram

Instagram Material Rediseño (Parte 1) de Chris presenta un pequeño botón circular con una sombra sutil que está pintada en un color azul oscuro correspondiente. Permite tomar fotos rápidas y proporciona a los propietarios una funcionalidad adicional. Acompaña a la mayoría de pantallas.

Rediseño de material de Instagram

Ecosistema de aplicaciones Android y Wear

Stephan Castro aprovecha un botón flotante redondo que gracias al tono rojo contrasta fuertemente con el contenido. Abre cinco pequeños íconos con títulos de apoyo elaborados en colores brillantes. Están dispuestos de abajo hacia arriba.

Ecosistema de aplicaciones Android y Wear

Magnet.me

Jules Holleboom apuesta por el mismo enfoque que en el ejemplo anterior. Al principio, es solo un botón circular normal que se adhiere al final de la página. Cuando el usuario lo golpea, revela suavemente otros tres iconos que se colocan verticalmente uno tras otro.

Magnet.me

Interfaz de usuario para colorear

Lois Yang hace un excelente trabajo al elegir la paleta de colores, ya que la interfaz de usuario tiene bastante contenido. El fondo rojo sólido brillante en conjunto con una sombra sutil distingue a los íconos del flujo de contenido, llamando la atención discretamente.

Interfaz de usuario para colorear

Babeo de Henrique Ferreira

Aquí, el botón flotante se ve reforzado por la elegante pantalla superpuesta semitransparente. Este último es necesario para proporcionar a los iconos y títulos una base sólida, ya que la aplicación está repleta de imágenes deliciosas. Una pequeña desviación en la trayectoria agrega entusiasmo al diseño.

Babear

Botón de acción flotante - Agregar medios de Eric Azares

El botón de acción en forma de O se encuentra en la parte inferior de la página e incluye cuatro CTA que están organizados en un círculo. De tal manera, son rápidamente accesibles. Cada icono tiene un tamaño relativamente enorme, un color brillante y un glifo nítido e inteligible.

  Botón de acción flotante

UI diaria 010 por Ben Transue

Aquí, el botón flotante está vinculado a un gran panel de barra lateral que emerge del lado derecho y desplaza ligeramente el contenido hacia la izquierda. Al estar asociado con las redes sociales, incluye todos los portales populares: Pinterest, Twitter, Facebook, Google y otros.

UI diaria 010

Adjunto de Alex Riabushko

El botón y sus CTA están diseñados en un estilo plano ingenioso y en un solo color. Sin embargo, el estado de desplazamiento cambia el azul predeterminado a naranja vibrante. Los glifos enormes dentro de los círculos son intuitivos y legibles. El elemento ofrece a los usuarios señales visuales para lograr rápidamente sus objetivos.

Adjunto archivo

Plantilla PSD de la aplicación de diseño de materiales por Daniele De Santis

La interfaz de usuario se crea siguiendo las mejores tradiciones de las especificaciones modernas de Google. El clásico botón flotante llama a un gran panel que ocupa casi toda la pantalla y cubre las acciones necesarias para trabajar en la sección 'Bandeja de entrada'. Además, este es un obsequio, descárguelo y póngalo en acción.

Aplicación de diseño de materiales PSD

Interfaz de usuario móvil de Smiley

El artista muestra numerosas pantallas funcionales del concepto. Como puede ver, casi todas las páginas tienen su botón de acción. Este último evoca un panel pequeño pero de altura completa que se encuentra a la izquierda y ocupa aproximadamente el quince por ciento del espacio.

UI móvil

Botón de acción flotante

El botón de acción flotante de Tyler Berry rompe con la mayor parte de los que figuran en nuestra colección. No solo elimina colores jugosos y sombras encantadoras, sino que muestra los iconos en una línea en la parte superior de la interfaz de usuario.

Botón de acción flotante

Botón de acción flotante de Giulio "bart172" Smedile

Si bien la mayoría de los botones están relacionados con otros botones, este está conectado al excelente teclado. El autor aprovecha al máximo este pequeño asistente flotante. También ofrece un efecto de transición perfecta entre dos estados.

Botón de acción flotante

Exploración UX - Gooey FAB por Paul van Oijen

El botón flotante muestra un conjunto de llamadas a la acción en una fila. Ocupa la parte inferior de la pantalla y se coloca de lado a lado. Los colores de dos tonos, los lienzos monocromáticos sólidos, los glifos y las sombras de píxeles perfectos crean la estética.

Exploración de UX

Interfaz de usuario para el pulgar de Jochem van der Veer

El concepto utiliza un botón de acción flotante que se parece a la mayoría. Se adhiere al lado derecho, tiene un aspecto sencillo y directo y llama la atención. En algunos casos, va de la mano con una versión en miniatura del logo.

UI para el pulgar

Botón mágico flotante

Floating Magic Button de Lee Giles es muy minimalista en cuanto a funcionalidad. Se usa solo para brindar a los usuarios acceso rápido al espacio de trabajo donde pueden crear su libro. El diseño cumple con los estándares de materiales y cumple con el estado de ánimo de la aplicación.

Botón mágico flotante

theScore Android de Matt Legaspi

Aquí el botón con los CTA se ve elegante, sofisticado y refinado. Estilo de línea combinado con hermosos colores de dos tonos, donde el azul se roba el espectáculo, logra una estética sobresaliente y transforma las acciones en puntos focales.

theScore Android

FAB para la participación del usuario de Parallel Labs

El artista emplea un botón de acción, cuyo diseño resuena suavemente con la barra de navegación superior. Su objetivo es involucrar a los usuarios y hacerlos sentir cómodos dentro del proyecto. Está vinculado a una ventana emergente que aparece en la esquina inferior derecha y ocupa toda la pantalla.

FAB para la participación del usuario

Alternacare de mayur karodia

El autor se esconde bajo los filtros de botones de acción flotantes que permiten a los usuarios clasificar la información redundante y alcanzar el objetivo en segundos. Gracias a un aspecto atrevido y un color brillante, no se mezcla con el contenido y llama la atención de inmediato.

Alternacare

Concepto de aplicación Swipii

Swipii App Concept de Sarah Ahmad se basa en varias soluciones nuevas. El botón flotante es uno de ellos. Cumple bien su propósito, facilitando la vida del usuario. Se coloca en la esquina de cada página y muestra una página emergente con código QR para escanear y recolectar los puntos tan rápido como siempre.

Concepto de aplicación Swipii

Botón de acción flotante líquido de Shu Makino

Este es un pequeño gif animado que demuestra el flujo de trabajo estándar del botón de acción flotante. Está impulsado por transiciones suaves. Incluye siete artículos con una forma elegante que van apareciendo uno a uno y se adhieren al lado derecho.

Botón de acción flotante líquido

Conclusión

Los botones de acción flotantes pueden convertirse fácilmente en imprescindibles, ya que son una forma elegante y bastante simple de mejorar la interfaz de usuario y la experiencia de usuario. Al proporcionar a los usuarios acceso rápido a funciones vitales, van directamente al grano y hacen que el uso de la aplicación sea rápido, efectivo y productivo.

¿Cómo encuentras esta nueva tendencia? ¿Es una mejora real?


Las 7 mejores alternativas de MailChimp para sus campanas de

Las 7 mejores alternativas de MailChimp para sus campañas de correo electrónico

MailChimp ha sido la estrella del marketing por correo electrónico durante bastante tiempo y no sin una razón. Le permite crear campañas de correo electrónico completamente únicas para su marca. MailChimp también ofrece un plan gratuito hasta 2.000 suscriptores y 12.000 correos electrónicos al mes, por lo que su popularidad no sorprende en absoluto. Sin embargo, MailChimp no es la única herramienta de marketing por correo electrónico del mercado. Hay muchas alternativas excelentes de MailChimp, por lo que puede encontrar fácilmente una que sea aún mejor para su negocio.

Por qué es posible que necesite alternativas de MailChimp

Cada empresa se conecta con su audiencia de diferentes formas. Para crear una campaña de marketing por correo electrónico exitosa, debe comprender en detalle las necesidades de sus clientes. Una estrategia de marketing que funcione para una empresa puede resultar totalmente ineficaz para otra. Las diferentes herramientas de marketing por correo electrónico sirven a diferentes tipos de negocios. Lo más importante es encontrar el que mejor se adapte a tus necesidades.

Características unicas

Las alternativas de MailChimp que puede encontrar en este artículo tienen muchas características similares, pero cada una tiene su estilo único. Muchos de ellos proporcionan características novedosas que otras herramientas aún no han adoptado. Por ejemplo, si desea diseñar sus propios boletines, un editor de arrastrar y soltar puede ser una bendición. Sin embargo, si trabaja con diseñadores externos o usa plantillas prediseñadas, probablemente no encontrará esta característica tan importante.

Si echas un vistazo a las listas de funciones de las alternativas de MailChimp, puedes encontrar fácilmente la que puede llevar tus campañas de correo electrónico al siguiente nivel.

Modelos de precios

También puede encontrar un modelo de precios que puede ahorrarle mucho. Por ejemplo, algunas herramientas calculan los precios en función del número de suscriptores, mientras que otras utilizan el número de correos electrónicos salientes como base. Dependiendo de la estructura de sus campañas (correos electrónicos frecuentes a una pequeña cantidad de suscriptores versus campañas ocasionales a una gran cantidad de suscriptores), puede haber una gran diferencia en los precios.

Las mejores alternativas de MailChimp

Ahora, veamos las mejores alternativas de MailChimp actualmente en el mercado. Tenga en cuenta que los precios están vigentes en el momento de redactar este artículo y pueden cambiar con el tiempo, por lo que siempre debe consultarlos antes de realizar una compra.

1. SendInBlue

SendInBlue

SendInBlue es una herramienta de automatización de marketing y marketing por correo electrónico basada en la nube. Le permite crear boletines informativos personalizados por correo electrónico con solo unos pocos clics. También puede segmentar su audiencia y enviarles diferentes correos electrónicos en función de sus necesidades.

Además, SendInBlue le proporciona plantillas de flujo de trabajo de automatización listas para usar. Puede utilizarlos para configurar un mapa de recorrido del cliente eficaz para poder enviar un correo electrónico dirigido a sus clientes en cada hito.

Principales características:

  • editor HTML de arrastrar y soltar
  • galería de plantillas responsive gratis
  • formularios personalizados con segmentación de contactos
  • flujos de trabajo de correo electrónico automatizados
  • estadísticas en tiempo real y mapas de calor
  • integraciones con WordPress, PrestaShop, Magento, Shopify y otras plataformas

Modelo de precios:

  • Es gratis hasta 300 correos electrónicos al día.
  • Los planes premium comienzan en $ 25.00 / mes. El precio depende de la cantidad de correos electrónicos enviados en un mes.

2. MailerLite

MailerLite

MailerLite es probablemente la mejor alternativa a MailChimp si desea crear campañas de correo electrónico para su sitio de comercio electrónico. Es compatible con varias plataformas de comercio electrónico como Shopify, WooCommerce, EasyStore y CouponCarrier. Además, te da acceso a herramientas indispensables en la gestión de tiendas online para que puedas atraer a más clientes.

Las páginas de destino prediseñadas, los formularios integrados, las ventanas emergentes y una herramienta de gestión de suscriptores incorporada son solo algunos ejemplos de las soluciones de comercio electrónico de MailerLite. También puede personalizar correos electrónicos, segmentar campañas, crear grupos de interés y automatizar la entrega de correos electrónicos.

Principales características:

  • editor de correo electrónico de arrastrar y soltar
  • edición de fotos incorporada
  • Plantillas prediseñadas de boletines de comercio electrónico
  • integración con plataformas de comercio electrónico populares
  • automatización de correo electrónico y pruebas de división A / B
  • Soporte 365/24/7

Modelo de precios:

  • Es gratis hasta 1,000 suscriptores y 12,000 correos electrónicos por mes.
  • Los planes premium comienzan en $ 10.00. El precio depende del número de suscriptores.

3. Monitor de campaña

Monitor de campaña: las mejores alternativas de MailChimp

Campaign Monitor le ayuda a crear boletines de correo electrónico efectivos y llamativos con facilidad. Su mayor fortaleza radica en la herramienta de segmentación inteligente incorporada que le permite profundizar en los datos sobre sus clientes y crear campañas altamente segmentadas.

También tiene un genial diseñador de viajes visuales con el que puede configurar viajes de clientes completamente personalizados. Con Campaign Monitor, puede personalizar literalmente cualquier aspecto de sus campañas, incluidas las cosas que con frecuencia se olvidan, como el diseño de correos electrónicos transaccionales.

Principales características:

  • generador de correo electrónico de arrastrar y soltar
  • plantillas de correo electrónico prediseñadas
  • segmentación de campañas
  • formularios de registro listos para usar
  • suite analítica integrada completa
  • múltiples integraciones de terceros como Shopify, Salesforce, WordPress, Magento, WordPress y otros

Modelo de precios:

  • No es un producto gratuito, pero viene con una prueba gratuita ilimitada con la que puede configurar campañas de prueba.
  • El plan básico comienza en $ 9.00 / mes y le permite enviar 2500 correos electrónicos por mes.

4. Contacto constante

Contacto constante: las mejores alternativas de MailChimp

Con Constant Contact, puede crear campañas de correo electrónico profesionales en cualquier industria, desde minoristas hasta publicaciones y organizaciones sin fines de lucro, sin ningún conocimiento de programación. Constant Contact automatiza el marketing por correo electrónico para que pueda establecer una relación sólida con sus clientes.

También puede configurar flujos de trabajo automatizados para lograr diferentes objetivos comerciales. Por ejemplo, puede enviar correos electrónicos de bienvenida oportunos, activar una serie de correos electrónicos prefabricados cuando el usuario hace clic en un enlace determinado y entregar diferentes mensajes a diferentes segmentos.

Principales características:

  • editor de correo electrónico de arrastrar y soltar
  • plantillas de correo electrónico optimizadas para dispositivos móviles
  • herramienta de gestión de listas de contactos
  • herramienta de seguimiento en tiempo real
  • prueba de línea de asunto A / B
  • integración perfecta con muchas plataformas de terceros como Facebook, Shopify, WordPress, QuickBooks Outlook, Hootsuite y otras

Modelo de precios:

  • Viene con una prueba gratuita durante los primeros 60 días (no se requiere tarjeta de crédito).
  • Después del período de prueba gratuito, los precios comienzan en $ 20.00 / mes y se basan en el tamaño de la lista.

5. EmailOctopus

Pulpo

EmailOctopus utiliza Amazon SES (Amazon Simple Email Service) para brindarle un servicio de marketing por correo electrónico altamente escalable. Envían sus correos electrónicos a través de Amazon SES para asegurarse de que no lleguen a la carpeta de correo no deseado de los clientes de correo electrónico de sus suscriptores.

Con EmailOctopus, también puede automatizar completamente sus campañas de correo electrónico. Por ejemplo, puede configurar un flujo de trabajo de bienvenida personalizado, crear secuencias de incorporación y goteo basadas en el tiempo, y más. EmailOctopus es una buena opción tanto para los especialistas en marketing sin conocimientos de programación como para los desarrolladores experimentados. El primero puede crear sus campañas haciendo uso de toneladas de plantillas listas para usar, mientras que el segundo puede crear funciones personalizadas utilizando la API de desarrollador.

Principales características:

  • múltiples plantillas de correo electrónico receptivas prediseñadas
  • formularios de registro personalizados
  • manejo profesional de rebotes
  • seguimiento y análisis de campañas en tiempo real
  • API de desarrollador enriquecida
  • Más de 500 integraciones a través de Zapier, como Eventbrite, Shopify, SurveyMonkey, WooCommerce y Salesforce

Modelo de precios:

  • Es gratis hasta 2500 suscriptores.
  • Los planes premium (con una prueba gratuita de 14 días) comienzan en 19.00 / mes y el precio se basa en la cantidad de suscriptores.

6. GetResponse

Obtener una respuesta

GetResponse es una plataforma de marketing con todas las funciones con herramientas integradas para marketing por correo electrónico, automatización de marketing, gestión de páginas de destino, CRM, creación de listas y otras tareas. Puede utilizar todas estas soluciones juntas para crear campañas de marketing dirigidas con precisión para cualquier tipo de negocio.

Con las herramientas de diseño de correo electrónico de GetResponse, puede crear plantillas de correo electrónico de aspecto profesional con gráficos únicos y marcas personalizadas. También puede agregar contenido dinámico a sus correos electrónicos para personalizar su mensaje y configurar flujos de trabajo automatizados que pongan su marketing por correo electrónico en piloto automático inteligente.

Principales características:

  • creador de correo electrónico de arrastrar y soltar y editor de código HTML
  • Más de 500 plantillas de correo electrónico prediseñadas
  • Más de 5000 imágenes de Shutterstock con licencia
  • optimización de la entrega de correo electrónico
  • panel de análisis y seguimiento de actividad en tiempo real
  • pruebas A / B incorporadas
  • Más de 100 integraciones como Google AdWords, Magento, OpenCart, PrestaShop, Shopify, WordPress y más

Modelo de precios:

  • Obtiene una prueba gratuita de 1 mes (no se requiere tarjeta de crédito).
  • Después del período de prueba, los planes comienzan en $ 15.00 / mes y los precios dependen de la cantidad de suscriptores.

7. Omnisend

Omnisend

Omnisend es una plataforma omnicanal para la automatización del marketing que le permite aprovechar el poder de varias herramientas de marketing para crear una experiencia de cliente avanzada. Puede comunicarse con sus clientes a través de diferentes canales, como correo electrónico, notificaciones automáticas, SMS, mensajes de WhatsApp y muchos otros.

Con Omnisend, también obtiene acceso a soluciones únicas de marketing por correo electrónico. Por ejemplo, la popular función Campaign Booster le permite reenviar su boletín a los usuarios que no lo abrieron por primera vez. De acuerdo con las mediciones de Campaign Booster, si elige el momento con cuidado, esta función puede aumentar las ventas hasta en un 30%.

Principales características:

  • editor de contenido de arrastrar y soltar
  • elementos prediseñados como recolectores de productos, cajas de regalo y cupones de descuento
  • flujos de trabajo de automatización personalizados
  • segmentación y herramientas analíticas integradas
  • Prueba de división A / B
  • múltiples integraciones de terceros como OpenCart, WooCommerce, Drupal Commerce, PrestaShop y muchos otros

Modelo de precios:

  • Obtiene una prueba gratuita durante 14 días (no se requiere tarjeta de crédito).
  • Después del período de prueba, los planes comienzan en $ 16.00 / mes y los precios se basan en la cantidad de suscriptores.

Conclusión

Vale la pena investigar el mercado si está buscando una plataforma de marketing por correo electrónico, ya que estas herramientas satisfacen diferentes tipos de necesidades comerciales. MailChimp es definitivamente una gran solución para muchas empresas, sin embargo, es posible que aún descubra que algunas de las alternativas de MailChimp mencionadas en este artículo se adaptan mejor a sus necesidades.

Configurar un flujo de trabajo de marketing por correo electrónico ganador no es fácil de ninguna manera. Si está interesado en más consejos de marketing por correo electrónico, eche un vistazo a nuestra guía sobre cómo usar el servidor SMTP de Google para enviar correos electrónicos también de forma gratuita.


Sorprendentes patrones de HeatData en el diseno web movil

Sorprendentes patrones de HeatData en el diseño web móvil

En HeatData hemos explorado comportamiento del usuario móvil mucho. Han surgido patrones en varios tipos de productos que deberían informar cómo diseñamos las propiedades web móviles. Específicamente, hemos descubierto que en sitios móviles como Pandora, Pinterest y la NHL, algunos comportamientos de los usuarios están frenando las tasas de conversión más altas y las interacciones esperadas.

Descubrimos que las páginas intersticiales que promocionan descargas pueden disuadir las descargas con sus diseños. Descubrimos que los usuarios tienden a interactuar con ciertas áreas "calientes" de las páginas web móviles en función del contexto y el factor de forma, y ​​las llamadas a la acción se pueden optimizar en torno a este comportamiento. Además, descubrimos que los siempre populares carruseles móviles a veces pueden ser menos atractivos de lo que mucha gente cree.

Estudios de caso

Pandora: Haga que las páginas intersticiales sean atractivas pero no distraigan

Pandora

Arriba está la página que Pandora muestra a los visitantes de su sitio web móvil. Muchas empresas tienen esta página intersticial antes de permitirle ingresar a su sitio móvil, promocionando sus aplicaciones nativas. La llegada de los banners de aplicaciones inteligentes puede reducir la necesidad de estos, pero en este momento prevalecen estos intersticiales de descarga de aplicaciones.

Lo fascinante de Pandora.com en el iPhone fue con lo que los usuarios no se involucraron: el llamado a la acción principal 'Descargar ahora' (CTA).

La gente tocaba y pasaba el dedo por todas las atractivas imágenes de teléfonos inteligentes, pero apenas tocaba el botón "Descargar ahora". Sin embargo, esas imágenes no fueron objetivos de clics.

Esas imágenes no iniciaron una descarga. Pero sin HeatData, ningún rastreador de eventos u otro conjunto de análisis habría sugerido convertir esas imágenes en un objetivo de clic que también lanzó una descarga, atenuando las imágenes u otros cambios como curso de acción. Con un cambio tan alineado con el comportamiento del usuario, el sitio web móvil de Pandora podría aumentar su métrica clave: las descargas.

Pinterest: enfoca tus acciones más valiosas en áreas con las que las personas se involucran naturalmente

El móvil es muy importante para Pinterest. A finales de 2012, Pinterest aumentó un 1,698% en el uso de aplicaciones móviles (el siguiente crecimiento más alto fue Twitter + 134%) y un enorme 4,225% en la web móvil '.

Audiencia única de EE. UU.

Así que estábamos interesados ​​en ver qué pasaría si recopilamos HeatData en el sitio web móvil de Pinterest. Lo que descubrimos fue que Pinterest ha posicionado con éxito su llamado a la acción más importante donde las personas están tomando otras acciones relevantes pero no capturadas.

En otras palabras, 'Repin' es la acción más importante (genera un mejor ciclo de participación por menos costo para el usuario que Comentar o Dar Me gusta). La gente se desplaza, toca y hace zoom alrededor de 'Repin' más que en cualquier otro lugar de la página. El comportamiento continúa en esas áreas incluso cuando 'Repin' no está presente. Tiene sentido colocar la acción más importante cerca de donde esta otra actividad ocurre naturalmente a un ritmo elevado.

Pinterest

Es cierto que aquí no podemos desentrañar la correlación y la causalidad. Es posible que las personas realicen acciones que no sean 'Repin' en torno a 'Repin' independientemente de la posición, por lo que no importaría dónde se colocara. También es posible que Pinterest supiera que las personas tienden a realizar acciones en el lado que corresponde a su mano derecha y simplemente optimizadas para la mano dominante (aproximadamente el 90% de las personas son diestras).

Sin embargo, ahora tenemos datos empíricos para respaldar este diseño. Además, para los desarrolladores y diseñadores que no tienen los números o la investigación que tiene Pinterest, esta sigue siendo una lección importante: averigüe dónde están mirando y actuando sus usuarios de forma natural, y considere colocar acciones importantes cerca.

NHL: Separar el carrusel y el indicador del carrusel puede disminuir el compromiso con el carrusel

En el caso del sitio móvil de la NHL, estábamos interesados ​​en ver si la gente realmente se involucró con el carrusel / presentación de diapositivas en el área de contenido principal. No desencadena eventos únicos o cargas de página, por lo que HeatData fue realmente la única herramienta para el trabajo. Si las personas no interactúan mucho con él, puede valer la pena considerar un diseño diferente. Este contenido ocupa casi la mitad de la pantalla de los teléfonos inteligentes, por lo que es importante comprenderlo.

NHL

Según los HeatData que recopilamos, parece como si el contenido del texto estuviera realmente involucrado con mucho más que el carrusel. Y cuando la presentación de diapositivas estaba realmente activa, era alrededor de sus componentes de texto (por ejemplo, "Rompevientos"). Observe cómo apenas se toca el indicador de progreso del carrusel. Si bien es raro que las personas realmente lo toquen de todos modos, solo podemos especular que el contenido del carrusel no requiere interacción física, no era atractivo o la gente no podía decir que era una presentación de diapositivas con la que se podía interactuar.

Lo ideal sería ejecutar una prueba A / B en la que hubiera flechas superpuestas en el carrusel o algún otro indicador de que el elemento principal era de hecho un carrusel con el que un visitante podría interactuar. Nuestra prueba buscaría ver si podemos mover métricas de nivel superior como el compromiso, así como métricas locales como la cantidad de veces que las personas interactúan con el carrusel. Esta es la única forma en que podríamos probar si la gente entiende suficientemente el carrusel o no.

Resumiendo

Entonces, ¿dónde nos lleva esto? Sería un error generalizar ciegamente lo que aprendemos de Pandora, Pinterest y la NHL a todos los demás sitios móviles que existen.

Sin embargo, al usar HeatData, descubrimos que priorizar las llamadas a la acción frente al resto del diseño, aprovechar los comportamientos naturales de los usuarios para mejorar la conversión y explorar suposiciones en torno a diseños móviles comunes son patrones útiles.

¿Qué pasa con su sitio móvil? ¿Puede aprender de estos productos líderes?


El uso de filtros y capas de transparencia en el

El uso de filtros y capas de transparencia en el diseño de sitios web

Parece que con una tendencia en el diseño de sitios web, los diseñadores casi tienen otra tendencia impuesta. Este es el caso de las imágenes de fondo grandes: usar una presentación de diapositivas con una variedad de fotografías diferentes significa que el texto en color que elija se verá mejor en algunos que en otros, por lo que la solución ha sido colocar un filtro o capa transparente entre la imagen y el texto, lo que significa que el texto se mostrará con la misma claridad en cualquier imagen.

Esta tendencia de diseño no solo se aplica a las imágenes de fondo fotográficas, algunos sitios utilizan medios tonos o transparencias sobre fondos de colores sólidos, y la adición de una sombra paralela muy pequeña hace que el texto blanco se vea extremadamente nítido y nítido. Aquí mostramos una selección de sitios web que utilizan este método para mantener su texto fácil de leer sin comprometer la calidad de las imágenes.

Cómo trabajan ellos

Me imagino que casi todos los diseñadores saben cómo funcionan los filtros y la transparencia cuando se colocan entre una imagen y el texto, pero para mostrar la increíble diferencia que puede hacer una capa de este tipo, ¡he producido algunas imágenes para demostrarlo!

Imágenes con texto blanco
Imágenes con texto blanco

Capa transparente negra al 25% de opacidad agregada
25% de transparencia

Pequeña sombra negra en el texto
Sombra paralela en texto

Capa de medios tonos al 40% de opacidad
Capa de medios tonos

Cómo crear un patrón de semitonos con Photoshop

Este método funcionará para cualquier versión de Photoshop y es simple en sí mismo. La imagen de abajo tiene un fondo relleno de degradado con la capa de patrón de semitonos encima.

Cómo crear un patrón de medios tonos

Transparencia y filtros en acción

Delegados del CICR en acción

Este sitio utiliza una capa transparente negra entre la presentación de diapositivas en pantalla completa y el texto del título en blanco. Como puede ver en la captura de pantalla a continuación, el texto se destaca incluso contra la camisa blanca del hombre.

Delegados del CICR en acción

Luz y sombras

Este sitio utiliza una transparencia muy oscura que se aclara ligeramente al pasar el mouse. También aparece un toque de color al pasar el mouse, diferentes colores para cada panel.

Luz y sombras

Petr Novikov

Este sitio usa una transparencia ligera sobre un video de fondo, nuevamente usando un título de texto blanco.

Petr Novikov

Ndoto

Este sitio tiene una presentación de diapositivas a pantalla completa con 3 imágenes, cada una de las cuales tiene una transparencia de color diferente. La siguiente captura de pantalla muestra parte de cada imagen.

Ndoto

MVMT

Con un diseño de cuadrícula, esta página de inicio utiliza una transparencia muy oscura que se elimina por completo al pasar el mouse, revelando la fotografía a todo color debajo.

MVMT

Cloudways

Aquí hay un efecto único y sofisticado en la página de inicio. La imagen de fondo está animada, muestra al tipo escribiendo en su teclado, y el texto del título se presenta en forma de cinta de teletipo para que podamos imaginar que está escribiendo la oración, borrando, escribiendo ... etc. La transparencia sepia ayuda al texto negro delgado para destacar.

Cloudways

Louise Bradley

Este sitio web utiliza un bloque de transparencia sobre la presentación de diapositivas de fondo en pantalla completa, un enfoque algo diferente y creativo.

Louise Bradley

DraughtMaster

Este sitio utiliza una variedad de estilos de capa para ayudar a que el texto del título en blanco se destaque. La captura de pantalla a continuación muestra 4 de sus páginas usando diferentes capas: transparencia negra, textura de gota de agua, textura bokeh y textura de hielo.

DraughtMaster

Recuerdos mundiales

Este sitio dedicado al Torneo de la Copa del Mundo de Brasil 2014 utiliza un patrón cuadrado de semitonos proporcionalmente grande sobre la imagen de pantalla completa.

Recuerdos mundiales

Toca en

Otro sitio que es una guía de los partidos del Torneo de la Copa del Mundo de Brasil 2014. Este sitio utiliza una capa transparente sepia sobre la imagen de pantalla completa ligeramente animada.

Toca en

Yunik

Esta página de inicio tiene una transparencia con un tinte azulado en su presentación de diapositivas de fondo de pantalla completa que solo consta de 2 imágenes. A medida que se desplaza hacia abajo en la página, hay más variedades de transparencias que incluyen negro, azul y una imagen con una capa de semitonos.

Yunik

Códigos inteligentes

Este sitio utiliza una capa de trama de semitonos para resaltar el texto. La siguiente captura de pantalla muestra una parte del texto a tamaño completo, ya que la reducción de tamaño ha afectado un poco el efecto.

Códigos inteligentes

Tinybigstudio

Aquí el diseñador (Pablo Domínguez) ha utilizado una transparencia roja muy caliente sobre una imagen de pantalla completa de sí mismo en el trabajo. Un elemento amarillo en forma de lágrima contiene una imagen en miniatura de él también.

Tinybigstudio

La Ferme de Biarritz

Aunque el diseño de este sitio no es necesariamente de alta moda en este momento, la transparencia negra del área de contenido hace que el texto blanco se pueda leer sobre el fondo arenoso.

La Ferme de Biarritz

Diseño Fresco

Este sitio utiliza una capa negra transparente con la opacidad perfecta para que el texto blanco se destaque en todas sus imágenes de presentación de diapositivas. El texto también tiene una pequeña sombra negra para una mayor claridad.

Diseño Fresco

Dr. Laffourcade

Para los diseñadores de este sitio, el negro es el nuevo negro, y han utilizado una capa blanca transparente para enfatizar el texto del título en negro.

Dr. Laffourcade

Creer en

Este sitio utiliza una capa de medios tonos con la opacidad ideal para mantener el texto del título blanco nítido y claro, sin distorsionar las imágenes de fondo animadas.

Creer en

Adveris

Este diseño no tiene una imagen de fondo de pantalla completa, tiene un fondo azul sólido con un patrón de estilo bokeh. La capa de estilo de malla entre el fondo y los elementos de la página le da un borde muy nítido a todo. El texto blanco se realza con una pequeña sombra paralela.

Adveris

Yin + joven

Esta es la página Acerca de del sitio de Yin + Young. Usando un estilo tipográfico muy vintage, la antigua calle que forma la imagen de fondo de esta página tiene un filtro similar a Instagram para proyectar una luz brillante y permitir que el texto negro se destaque. Este sitio utiliza bastantes efectos de transparencia y estilo de filtro y, curiosamente, si hace clic en el botón Inicio, se encontrará en una de las dos pantallas de inicio diferentes.

Yin + joven

Conclusión

El efecto dominó de una tendencia que crea otra parece estar ocurriendo con más frecuencia con la llegada del diseño plano. Muestra claramente cómo se inician las tendencias al encontrar soluciones a los problemas creados por otras tendencias: el diseño plano en sí se inició por necesidad, para resolver el problema de la claridad y la facilidad de uso de las pantallas pequeñas.

¿Ha encontrado algún otro método para hacer que el texto se destaque en imágenes de diferentes colores y contrastes? Comparta sus opiniones y enlaces con nosotros en la sección de comentarios a continuación.


La definicion de disenos en el diseno web y cuando

La definición de diseños en el diseño web y cuándo usarlos

Hay bastantes diseños en el diseño web. Los más comunes incluyen diseños fijos, líquidos y elásticos. Este artículo describe las principales diferencias en términos utilizados para describir diseños en diseño weby cuando cada diseño en particular requiere un diseño específico. Entonces, si este problema lo ha confundido o frustrado en el pasado, siga leyendo ...

Layouts en Diseño Web

Disposición fija

En el diseño web, los diseños fijos son aquellos que utilizan una unidad de medida específica para definir el ancho de la página web, independientemente de todos los demás factores, incluidas las dimensiones de la ventana del navegador y los tamaños de fuente. En otras palabras, la página web / sitio tendrá el mismo tamaño fijo independientemente del tamaño de la ventana del navegador o del tamaño de fuente en el que esté escrita la página.

Diseños fijos

Por ejemplo, la columna principal de una página web / sitio se puede fijar en 740 píxeles. Si un espectador accede a esa página web en una ventana del navegador minimizada, la columna principal aún tendría 740 píxeles de ancho, y esto no cambiaría independientemente de cuán grande o pequeña sea la ventana del navegador. Esto implica que si la ventana del navegador es más pequeña que el ancho fijo de la página, un espectador no podrá ver todo en la página a la vez.

Por lo tanto, el diseño se llama así porque la página se fija en un ancho de píxel constante. Varias columnas dentro de la página web generalmente se definen usando una unidad de medida elegida, más comúnmente el píxel.

Diseños relativos

Un diseño relativo se refiere a un diseño que define el ancho de una página web utilizando alguna unidad de medida relativa. En este caso, el contenido de la página cambiará de tamaño de acuerdo con el tamaño de la ventana del navegador en la que acceden los usuarios.

Diseños relativos

Con diseños relativos, los anchos de columna se definen para llenar una cierta fracción de la ventana del navegador, independientemente del tamaño real de la ventana en la que se ve la página. Si un espectador expande o contrae el sitio web para que sea más grande o más pequeño, las columnas cambiarán de tamaño automáticamente para que su tamaño, en relación con el tamaño de la ventana del navegador, siga siendo el mismo.

Dentro de límites específicos, no tendrá que desplazarse horizontalmente para acceder a todo el contenido con diseños relativos. Los diseños relativos en el diseño web también se denominan 'líquido' o 'líquido' diseños, porque la página se estira o se contrae para llenar todo el espacio del contenedor disponible, en este caso la ventana del navegador. El diseño relativo también se conoce como 'elástico' o 'flexible' diseño.

Entonces, ¿por qué se le da tantos nombres al mismo diseño?

La breve explicación es que los nombres surgieron porque diferentes webmasters de diferentes ubicaciones estaban tratando de describir un fenómeno que no tenía una descripción técnica en ese momento. El diseño web en sí mismo es relativamente nuevo; habiendo comenzado en la década de 1990, no existía un vocabulario definido para cada fenómeno encontrado. Por lo tanto, los webmasters simplemente dieron un nombre que pensaban que se ajustaba a lo que estaban tratando de hacer.

Los elementos en diseños relativos se definen en unidades relativas, como porcentajes o 'ems'. Un 'em' se refiere a las alturas de fuente de los tipos de letra que se encuentran en la página. Se toma como una medida relativa ya que los tamaños de fuente también tienen diferentes alturas. Los porcentajes funcionan de la misma manera que en cualquier otro lugar, es decir, si una columna está configurada para ser el 60% de la página, ocupará el 60% del espacio disponible, por ejemplo, la ventana del navegador.

Dreamweaver: líquido, elástico e híbrido

Dreamweaver

La forma en que se utilizaron los términos durante las implementaciones iniciales de Dreamweaver puede generar cierta confusión en la comprensión de los diseños, como se explicó anteriormente. Dreamweaver es un editor web WYSIWYG (lo que ve es lo que obtiene) que permite a los webmasters crear sitios web utilizando interfaces visuales similares en funcionamiento a los programas de procesamiento de texto.

Este editor web también proporciona algunas plantillas en blanco que se pueden utilizar para el diseño web. Para satisfacer las diversas necesidades de diferentes webmasters, también incluye plantillas para manejar diseños tanto fijos como relativos.

En Dreamweaver (solo antes de CS4 e incluido), los diseños se definen como "fijos", "elásticos", "líquidos" o "híbridos". Los diseños fijos en Dreamweaver se definen utilizando píxeles como unidad de medida. Esta es la misma definición que se dio anteriormente.

Los diseños líquidos y elásticos en Dreamweaver son esencialmente diseños relativos. Probablemente, los desarrolladores de Dreamweaver solo querían permitir a los webmasters la libertad de definir el ancho de sus páginas mediante porcentajes o ems, que se utilizan para diseños fluidos. Aquí, el diseño elástico usa el em como unidad de medida, mientras que el diseño líquido usa 'porcentaje'.

El diseño híbrido utiliza una combinación de 'porcentaje' y 'em' para definir los anchos de página. Entonces, ¿cómo sabe qué unidad de medida debe usarse para qué diseño de página?

Cuando usar diseños fijos

Los diseños fijos son útiles para diseños que incluyen múltiples elementos que deben tener una alineación perfecta en la página. Por ejemplo, puede tener una imagen en una columna que necesita una alineación perfecta con el texto u otra imagen en una columna diferente. Los diseños fijos ofrecen una mayor medida de control, lo que garantiza que todos los elementos se mostrarán de la manera exacta que pretendía en el momento del diseño.

Cuando se deben usar diseños relativos que usan Em

Es lo mismo que los diseños elásticos si se usa Dreamweaver CS3 y CS4 y ajusta el tamaño de las columnas de acuerdo con los tamaños de fuente utilizados en la página. Ahora, esto todavía se considera relativo, aunque teóricamente un diseñador puede definir tamaños de fuente, por lo tanto, fija de manera efectiva el ancho de las columnas. Esto se debe a que los espectadores pueden reemplazar su configuración en sus navegadores. Por lo general, esto lo hacen aquellos que deben usar fuentes más grandes, por ejemplo, si les falla la vista.

Por lo tanto, si un usuario especifica fuentes más grandes, esto hará que las columnas de la página sean más anchas. Lo contrario también es cierto: las fuentes más pequeñas reducirán el ancho de las columnas. El diseño elástico es ideal si solo muestra texto, ya que el texto aparecerá exactamente en la misma posición cuando la columna cambie de tamaño según los cambios de fuente.

Sin embargo, está limitado en el sentido de que un usuario puede especificar un tamaño de fuente mayor que el que puede permitir el ancho de la ventana de su navegador sin necesidad de desplazarse. Esto creará automáticamente una barra de desplazamiento horizontal que resultará molesta para los usuarios. Sin embargo, con un diseño adecuado, debería poder satisfacer las necesidades de la mayoría de sus usuarios.

Cuando se deben usar diseños relativos que usan porcentaje

Especificar el ancho de la página como porcentaje lo vincula al ancho de la ventana del navegador del espectador. Siempre que se asegure de que el ancho total de todas las columnas juntas no exceda el 100%, la mayoría de los usuarios nunca encontrarán la barra de desplazamiento horizontal. Sin embargo, las imágenes aún presentan un desafío ya que tienen anchos fijos, definidos en píxeles. Puede crear un diseño que no muestre barras de desplazamiento horizontales para la mayoría de los usuarios en circunstancias normales.

Conclusión

Con esta información, ahora está lo suficientemente armado para tomar una decisión informada sobre la mejor opción de diseño, dados los objetivos finales de su sitio web o el de su cliente.


El uso de la emocion en el diseno web

El uso de la emoción en el diseño web

Poniendo emoción en el diseño web Puede parecer un concepto extraño, pero muchos sitios lo han estado haciendo durante años, y recién ahora estamos comenzando a reconocerlo y hablar de ello. Los sitios que promueven viajes, salir a comer, entretenimiento, etc., han estado usando la emoción en su diseño durante mucho tiempo para atraer visitantes y hacer que se queden un rato y echen un vistazo.

La única forma de atraer a los visitantes es a través de la emoción, simplemente no hay nada más ... no puede hablar con ellos, por lo que podría ser el mejor vendedor del mundo, pero no tendrá ningún efecto en su sitio web, por lo que retratará su producto o servicio. de una manera que atraiga al visitante significa hacerlo emocionalmente de acuerdo con lo que esté tratando de promover.

Emoción en el diseño de sitios web

¿Por qué utilizar la emoción en el diseño de sitios web?

Los visitantes que se sientan conectados emocionalmente a un sitio web recordarán su visita y probablemente volverán al sitio. Si el sitio los aburre o crea algún otro tipo de emoción negativa, ignorarán el sitio para siempre y solo volverán a visitarlo si fue por accidente, básicamente porque no han recordado su experiencia anterior. Por lo tanto, podría tener un SEO súper duper, su sitio podría navegar a través de pruebas A / B, y podría ser extremadamente funcional, y todos estos factores atraerán visitantes, pero sin crear una conexión emocional, esos visitantes probablemente no se quedarán ni regresarán. en el futuro.

OurBabyBox
OurBabyBox

¿A qué tipo de emoción debes apuntar?

La conexión emocional a la que debe aspirar depende de su producto o servicio. Algunas formas positivas de crear emociones en su sitio web son lindas, desgarradoras, divertidas, orgánicas, felices, brillantes, soñadoras, cálidas, por nombrar solo algunas. Si está promocionando refrescos de verano, debe apuntar a un diseño de sitio web alegre y brillante, mientras que si está promocionando licores después de la cena, la dirección a seguir es soñadora y cálida. Realmente no es ciencia espacial, pero lo es importante, y puede pasarse por alto fácilmente cuando se intenta construir sitios de acuerdo con las tendencias actuales en lugar de priorizar el producto / servicio real.

Coca Cola
Coca Cola

VSOP de McDowell
VSOP de McDowell

Ejemplos de diseño de sitios web con un toque emocional

Casa Negra

Esta cadena de restaurantes ofrece comida sencilla y sencilla, y su página de destino es una toma de un filete chisporroteante con utensilios de metal ... no puede ser más simple que eso, y si ese es el estilo de comida que le gusta, buscará más en sitio para ubicaciones de restaurantes e incluso tal vez hacer una reserva en línea.

Casa Negra

Tostado de café Soyuz

Este fabricante de café de especialidad ruso utiliza una imagen muy relajante en su página de destino para promocionar sus productos. El agua tranquila es relajante, y la taza de café "especial" en la mano del hombre "común" se suma al efecto emocional.

Tostado de café Soyuz

Campamentos WinShape

Este proveedor de campamentos de verano tiene un video en su página de destino, superpuesto con un degradado transparente de colores. Los niños realizan todo tipo de actividades divertidas, además de algunas tomas de lecciones; sin duda, para el beneficio de los padres, definitivamente puede conectarse con este sitio si está buscando un campamento de verano para su hijo.

Campamentos WinShape

Gorros de natación Speedo

¿Busca un gorro de baño? La página de inicio de Speedo muestra a cinco personas con sus gorras, luciendo felices, informales, seriamente profesionales, así que sea cual sea su motivo para querer un gorro de baño, esta página debería ser atractiva.

Gorros de natación Speedo

Cerveza Austral

Este sitio intenta transmitir tranquilidad, sencillez, tradición y pureza, y lo hace con un conmovedor telón de fondo de agua y montañas. El agua tiene un efecto calmante, mientras que las montañas dan la sensación de pureza. La imagen de la botella muestra su forma tradicional y las gotas de agua en la botella transmiten simplicidad: ¡trabajo hecho!

Cerveza Austral

Bicicletas Juliana

¡Tan pronto como llegue a este sitio, querrá subirse a su bicicleta y montar hacia la puesta de sol!

Bicicletas Juliana

querida mamá

Este sitio demuestra que la emoción no tiene por qué crearse con fotografías. Sus tonos de rosa y formas de corazón retratan bellamente el sentimiento de amor.

querida mamá

CorteJago

Este sitio web para un B&B italiano no muestra la casa o las habitaciones en la página de destino, o incluso los huéspedes que se divierten o se relajan ... muestra las puertas abiertas, lo que da una maravillosa sensación de bienvenida.

CorteJago

Booking.com Embrujado

Esté preparado para tener miedo ... esta página de destino muestra una imagen oscura y espeluznante, pero el toque de rojo oscuro da la sensación de lujo y comodidad.

Booking.com - Embrujado

Hallazgos de Westin

Esta empresa de vacaciones tenía una presentación de diapositivas de imágenes impresionantes de lugares hermosos para visitar, y las mezclan: hay imágenes de campo, edificios, agua y ciudades. Donde quiera que desee visitar, se conectará con la página de destino de este sitio.

Hallazgos de Westin

Los siguientes sitios se explican por sí mismos en su atractivo emocional.

Demasiado joven para casarse
Demasiado joven para casarse

Planta con Propósito
Planta con Propósito

ASPCA
ASPCA

Esperanza ilimitada
Esperanza ilimitada

Nutrir
Nutrir

WWF - Especies en peligro de extinción
Especies en peligro de extinción de WWF

St. Regis
St. Regis

Destino holístico de Leonia
Destino holístico de Leonia

Conciencia del tigre
Conciencia del tigre

Centro de asesoramiento - Universidad de Hawái
Centro de asesoramiento - Universidad de Hawái

Le 28 Thiers
Le 28 Thiers

Conclusión

Fueron algunos de los mejores diseños de sitios web emocionales que pudimos encontrar, pero tal vez nos perdimos algunos que usted conoce ... si es así, deje un enlace para compartir sus hallazgos con nosotros.

¿Diseña sitios web de acuerdo con las tendencias actuales o prestando más atención al producto o servicio a promocionar? ¿Crees que es necesario inyectar algo de emoción en el diseño de un sitio web? Comparta su opinión con nosotros.


Barras de navegacion optimizadas compactas y elegantes perfectamente integradas

Barras de navegación optimizadas, compactas y elegantes, perfectamente integradas

El clásico nunca pasa de moda. Aunque el botón de menú de hamburguesas figura en las tendencias de diseño de sitios web de este año y otras soluciones dinámicas impulsadas por multimedia están ganando cada vez más popularidad, una forma probada de organizar las opciones del menú en una línea horizontal y colocarlas de forma compacta en la parte superior de la página sigue siendo una de las opciones favoritas de los diseñadores.

Además de su tamaño compacto, tiene otra gran ventaja sobre los demás: todo el mundo sabe cómo utilizarlo. Es simple, sencillo, transparente y obvio. Aunque está privado de un comportamiento inesperado o del factor sorpresa, es una forma viable y factible de hacer que los visitantes sientan que tienen el control. Más aún, también puede agregar un poco de guinda al pastel transformándolo en un elemento integral de un tema.

Eche un vistazo a nuestros veinte ejemplos nuevos y destacados de diseños de sitios web que optaron por barras de navegación compactas y optimizadas y no salió mal. Tal vez encuentre un acicate para su próximo proyecto.

Barras de navegación compactas y aerodinámicas

Omeals

La página de inicio de Omeals está enriquecida con fotos de paisajes, por lo que no es de extrañar que el diseño del menú principal también tenga algunos toques sutiles del tema natural. La parte superior está marcada por una delgada línea en zigzag que imita montañas. El truco ayuda al componente a integrarse en la composición.

Omeals

Ricanza

Ricanza tiene una página de destino vibrante y enérgica. Aquí no solo juega un papel vital el color, sino que también la organización asimétrica pone su granito de arena al inculcar una sensación de movimiento. En un entorno tan complejo, la barra de navegación compacta, elegante y primitiva parece ser una decisión inteligente que no distrae la atención de la escena y, al mismo tiempo, ofrece a los visitantes una forma intuitiva de moverse.

Ricanza

Mebsa

Mebsa apuesta por una generosa cantidad de aire fresco que naturalmente dirige la atención hacia la imagen central y el título. Al igual que el logotipo, la navegación ocupa solo una pequeña franja en la parte superior de la pantalla, pero gracias al sorprendente contraste permanece enfocada.

Mebsa

Cólicos

El equipo toma la ruta tradicional con respecto a su menú relativamente pequeño que incluye solo cuatro elementos. Se ha colocado en el medio de la sección del encabezado, junto con el logotipo, el carrito de compras y varios botones adicionales. Aunque es bastante compacto, llama la atención.

Cólicos

Schoffa

Schoffa irradia una imagen de lujo y refinamiento; también lo hace la navegación. Es elegante, delicado y tiene una tipografía elegante pero nítida. A diferencia de la mayoría mencionada anteriormente, se encuentra en el lado izquierdo, cerca del logotipo.

Schoffa

Schwarzhaupt

Schwarzhaupt utiliza un espléndido fondo de imagen de alta calidad que apunta a agarrar la mayor parte del pastel. Sin embargo, el contenido, así como la identidad de marca y la navegación, se destacan naturalmente. El menú está situado en la esquina superior derecha y deja espacio para otras cosas vitales.

Schwarzhaupt

Carcaj

Quiver tiene un diseño limpio, ordenado y minimalista que, gracias a un magnífico degradado azulado, sobresale de los demás. Como corresponde, la sección del encabezado está reservada para una barra de navegación elegante y optimizada que ocupa la esquina superior izquierda y complementa muy bien el resto de la escena.

Carcaj

Le 28 Lille

Le 28 Lille tiene una gran barra de navegación que ocupa casi todo el ancho de la pantalla del navegador. Se coloca tradicionalmente en la parte superior de la página y contrasta con el fondo. Aunque cada opción está configurada en un tamaño de fuente pequeño, este hecho no afecta su legibilidad.

Le 28 Lille

Creaciones de Ray

Ray Creations da preferencias a su gama de servicios en lugar de un menú principal. Este último está perfectamente integrado en el diseño y no llama la atención. Las opciones del menú están muy juntas y organizadas en una línea en la parte superior.

Creaciones de rayos

HKG

HKG se caracteriza por la coherencia del estilo. Cada detalle contribuye al sentimiento general; y el menú principal no es una excepción. Apoya el tema, se ve elegante pero formal y sirve como parte integral de la composición.

HKG

Ciudadano

Con un fondo de imagen tan impresionante, es bastante difícil dar prioridad a otros detalles, como la navegación. Sin embargo, el equipo ha logrado superar este obstáculo y hacer que el menú sobresalga del flujo dotándolo de una base firme y sólida. Un tipo de letra delicado y exquisito que se utiliza para mostrar enlaces combina perfectamente con el ambiente lujoso del sitio web.

Ciudadano

Liechtenecker

Liechtenecker irradia un sutil ambiente geométrico. La página se siente espaciosa y accesible. La barra de navegación compacta que se encuentra en la esquina superior derecha cumple con el tema y encaja aquí como un guante.

Liechtenecker

Luks Vier

Luks Vier es una web bastante original que no deja indiferente a nadie. La página de inicio incluye varios menús de navegación: el primero es una presentación clásica de enlaces en línea, mientras que el segundo es un botón de menú de hamburguesa de moda. Juntos cubren toda la estructura.

Luks Vier

Makia

Makia tiene un entorno complejo que ofrece una estética artística. Hay representaciones realistas que se encuentran dispersas por toda la escena, una escritura de pincel impresionante pero suave y elegante que se usa para mostrar títulos y contenido, botones brillantes de redes sociales y algunos otros. Sin embargo, la navegación ocupa su lugar particular. No solo refuerza la atmósfera general, sino que también se ve prominente y robusto.

Makia

Natan

Natan intenta establecer un lenguaje informal y el menú principal ayuda a lograr esta tarea. Es refinado, pulido y crujiente. Se divide en dos partes para formar con el logotipo un solo espacio. Aunque es superligero y pequeño, es exactamente lo que se necesita para esta interfaz.

Natan

El diario del skater

El equipo ha proporcionado mucho espacio a la navegación. El componente ocupa una franja relativamente ancha en la parte superior que se basa en un fondo oscuro sólido limpio. Como resultado, los enlaces tienen más peso e importancia visual.

El diario del skater

Cosas amorosas

El proyecto tiene un fuerte carácter artístico. Nada se ha quedado atrás: cada detalle aporta una contribución significativa. Incluso el menú de navegación relativamente compacto está condimentado con un atractivo garabato encantador y una apariencia esquemática. Cada opción se presenta como un icono con su título adjunto.

Cosas amorosas

Habanero

El equipo ha ampliado visualmente el menú principal y lo ha puesto en un color de contraste y un tipo elegante. De esa manera, se siente más importante y pesado, captando tanta atención como el contenido en la parte inferior.

Habanero

GenteFirma

PeopleFirm tiene una barra de navegación optimizada y alineada correctamente. Completa el tono del proyecto y se ve ordenado y ordenado. Aunque carece de contraste y nitidez, aún es legible.

GenteFirma

David Bastian

David Bastian se pone manos a la obra y bombardea a la audiencia online con su increíble portafolio. Dado que todo gira en torno a la exposición de la obra, es previsible que la navegación desempeñe un papel secundario, ocupando poco espacio en la esquina superior derecha. Sin embargo, en este caso, tales sacrificios están justificados.

David Bastian

Conclusión

Puede parecer que una barra de navegación simplificada es una reliquia del pasado. Como muestra su uso continuado, esta solución de "talla única" va perfectamente bien con numerosos proyectos y encuentra el lugar que le corresponde en varias composiciones. Tal vez sea un poco aburrido, sin embargo, brinda a los visitantes una forma práctica y natural de moverse y esta característica vale mucho.

¿Qué opinas de este tipo de navegación? Es genial? ¿Es amigable? ¿Está sin vida y rancio? Comparta con nosotros su opinión.