web

Tendencias de diseño web de 2020 que se mantendrán en 2021

por con Sin Comentarios Diseño Web

Cada año, las tendencias en diseño web se ajustan a las nuevas necesidades del mercado. Si deseas que tu marca y su imagen sean un referente en la industria o tu nicho, debes conocerlas y aplicarlas. Toma nota, que hoy te hablaremos de las tendencias en diseño web que se quedarán para 2021. 

Modo oscuro

Sí, no es una tendencia tan innovadora, pero a los usuarios les encanta. Está en casi todas las redes sociales, aplicaciones, páginas web, plataformas de servicios, entre otros. Así que, si deseas ganar puntos extras con tus usuarios, o atraer la atención de nuevos leads, esta configuración puede ser una gran opción.

Diseño simple

El diseño ya no es tan riguroso, formal o estrictamente simétrico como antes. Ahora, todo lo que se haga para darle más personalidad a las marcas será bien recibido, siempre y cuando no luzca sobrecargado.

En esta nueva era, la simplicidad encanta, porque luce más elegante y mejora la experiencia de usuario. Por ejemplo, en los newsletter y post de redes sociales, no es un secreto que son más los usuarios que prefieren contenido preciso, sin adornos.

3D 

Los diseños 3D ya están en todas partes. Inicialmente comenzó a ser útil para la promoción de productos, pero ahora, entramos a Facebook y también podemos ver fotografías, imágenes o ilustraciones 3D. 

Seguimos siendo curiosos y gracias a la tecnología digital, ahora podemos ver productos desde todos sus ángulos, en tiendas online; también podemos conocer espacios cerrados, o visualizar cómo se verían productos con diversos colores o apliques.

Animaciones 

Estas se han vuelto la favorita de muchos, y con toda la razón, pues son prácticas, lindas y representativas. 

Pero lo mejor de todo es que no son tan complicadas de construir. Tener un buen diseño hoy en día es muy fácil. Tan solo hay que descargarse los vectores o plantillas en alguna de las cientos de webs que hay en el mercado, y por supuesto, darle movimiento con el programa de tu preferencia.

Sin embargo, diferenciarse es vital, y por eso debemos evitar estándares y repetir fórmulas. Hay que sorprender a nuestra audiencia desde el primer segundo.

Explosión de color

Atrás han quedado los tonos apagados. Estamos viviendo un auténtico renacimiento de la creatividad en cuanto a colores,  formas y animaciones se refiere. 

Mobile First

Estudios han señalado que ahora los usuarios navegan más desde sus teléfonos inteligentes; por lo tanto, la idea es que el diseño de la página se se centre en el contenido de un producto, para que resulte limpio y práctico.

Partir del móvil y luego agregar más funciones (interacciones, efectos más complejos) para dispositivo tipo tablet o escritorio, te permitirá captar más leads y mantenerte actualizado. 

One-page 

Los sitios web de una sola página llevarán la delantera por un buen tiempo; y ahora no solo verticales, sino también con funciones de scroll horizontales. 

¿Te gustaría aplicar alguna de estas tendencias a tu sitio web? Contáctanos y conversa con nuestros especialistas en desarrollo y diseño web.

qué son las Breadcrumbs

¿Qué son las Breadcrumbs y cómo influyen en el SEO web?

por con Sin Comentarios Diseño Web

¿Cuántas veces has navegado en un sitio web y terminas perdido, sin saber cómo regresar al menú o la página en la que estabas?. Tal vez muchas, o puede que a los usuarios en tu web les suceda lo mismo; por eso, hoy conversaremos sobre las breadcrumbs y cómo benefician la experiencia de usuario de tu website. 

Las migas de pan, en inglés breadcrumbs, directa e inequívocamente, proporcionan cierta información que necesita el usuario para navegar en una página web sin problemas.

Aunque sea intuitivamente, todos tenemos una idea muy aproximada de lo qué es Breadcrumbs o rastro de migas de pan. Al fin y al cabo, también somos usuarios de Internet y navegamos asiduamente, por lo que a menudo lo hemos encontrado.

Su propósito principal es contestar a la preguntas “¿Dónde estoy, cómo he llegado hasta aquí y cómo puedo volver atrás o ir a otras páginas similares?”.

Para conseguir esta funcionalidad, las migas de pan “marcan” el camino que se debe seguir, a través de la arquitectura del sitio web, para llegar desde la página principal hasta la página que está visualizando el usuario.

Para hacernos una idea, la estructura de un rastro de migas de pan (breadcrumbs) tendrá un formato parecido al siguiente: Portada > Página nivel 1 > Página nivel 2 > … > Página actual

qué son las Breadcrumbs

Habitualmente, como observarás en las buenas prácticas, cada nivel incluye un enlace a la página principal de ese nivel.

Si te preguntas el porqué de la expresión “migas de pan”, está basado en la historia de Hansel y Gretel, que utilizaron un trozo de pan para desmigarlo y dejar un rastro por el camino, que les permitiera volver a casa. También se puede encontrar la expresión “hilo de Ariadna”, basado en la mitología griega del laberinto del minotauro.

Ventajas de las Breadcrumbs

  • Mejora la experiencia de usuario. Junto con los menús, ofrece una visión de la estructura del sitio web; por sí mismo, ubica al usuario en un lugar dentro de esa estructura, facilitando el acceso y la navegación a sus niveles superiores.
  • Reduce la tasa de rebote. Si el usuario no sabe dónde se encuentra dentro del sitio web o la página que está viendo no satisface su inquietud, el rastro de migas le guía y le da la opción de navegar directamente a otras páginas de temática o contenido similar que sí podrían ser de su interés.
  • Favorece el SEO, desde dos perspectivas: como consecuencia directa de la mejor experiencia de usuario (fundamental en los algoritmos de búsqueda actualmente), y por la colocación en el breadcrumbs de enlaces y textos-ancla que los rastreadores de Google pueden utilizar para evaluar el posicionamiento de esas páginas.
  • Mayor visibilidad en los SERP’s; es decir, en los resultados de búsqueda. Si el rastro de migas está bien implementado, utilizando datos estructurados, Google puede incorporarlo en los resultados de búsqueda, haciéndolo más visible.
  • Aumenta el control de navegación del usuario, pues dispone de una herramienta adicional, además de los menús, para navegar a través del sitio web. Con la ventaja añadida de que parte de un punto conocido.
  • El coste de implementación es bajo y no usarlos no aporta ninguna ventaja, salvo casos excepcionales. Dicho de otra forma, añadirlos a las páginas “no molesta” al usuario, que solo los utilizará cuando los necesite (idealmente, casi nunca).
qué son las Breadcrumbs

  Tipos de Breadcrumbs

Según cómo interpretemos e implementemos la estructura del rastro de migas, dispondremos de varios tipos de breadcrumbs:

  • Basados en la estructura de directorios del sitio web; donde cada miga del rastro se corresponde con un directorio físico en el sistema de ficheros o, en el caso de WordPress, con las categorías de las entradas del blog. Es el tipo más utilizado con diferencia.
  • Basado en el historial de navegación del usuario; donde no hay una verdadera estructura, sino que las Breadcrumbs referencian a las últimas páginas que el usuario ha visitado. No suele ser muy útil porque un usuario puede seguir varios caminos para llegar a una misma página y tampoco se tienen los beneficios para la optimización SEO.
  • Basado en atributos asociados con el contenido de la página. Muy utilizado en sitios de comercio electrónico, donde un producto tiene distintos atributos, entre ellos el tipo de producto, su categoría, su marca, su modelo, su función, etc. Cada uno de ellos, constituiría una miga del rastro. Este tipo de Breadcrumbs tiene la ventaja que productos que pertenezcan a varias categorías puedan buscarse en cada una de ellas, quedando reflejado en las migas de pan. 

¿Deseas activar tus migas de pan en tu sitio web? Contacta a nuestros expertos

Paleta de colores

Cómo elegir la paleta de colores adecuada para tu web

por con Sin Comentarios Diseño Web

Elegir los colores de tu página web es un proceso que podría parecer complicado, pues debe guardar estrecha relación con el logo de tu marca, pero evita saturar al usuario con sus colores. Es por ello que existe la paletas de colores, una herramienta que te permitirá crear la combinación perfecta. 

Para elegir la paleta de colores ideal lo más recomendable es consultar con un experto del diseño gráfico. Sin embargo, con algunas consideraciones básicas, también podrás crear una propia. 

¿Cómo construyo mi paleta de colores?

Lo primero que debes entender es que esta herramienta gráfica es para captar la atención del consumidor. Por ende, no solo debes considerar tus gustos personales, sino lo que deseas transmitir con tu marca. 

Antes de seleccionar cualquier color, es necesario realizar un pequeño análisis, el cual puede responder a las siguientes preguntas: 

  • ¿Qué personalidad tiene mi marca? 
  • ¿Cuál es el color que más la representa? ¿cuáles usaría mi marca si fuera una persona?
  • ¿Qué gama de colores representa más a mi marca? 
  • ¿Qué colores gustan más a mis consumidores?
  • ¿Cuáles son los tonos menos atractivos para ellos?
  • ¿Cuáles son los colores que representan al rubro que pertenece mi marca?
  • Paleta de colores

Probablemente en tu proceso de branding ya te habrás hecho preguntas similares, pero acostúmbrate, son datos que deberás tener presente en cualquier decisión que involucre la imagen de tu marca. 

Para alinear tu paleta de colores a tu público objetivo es necesario crear a tus buyer persona, y comparar el significado de los colores con su perfil. Si todavía no has creado tu buyer persona, te invitamos a visitar nuestro blog, allí encontrarás información al respecto. 

¿Cuáles son las combinaciones que nunca fallan?

En este punto nos gusta resaltar mucho el ejemplo de Apple: sus colores son el negro, blanco y gris; al ser colores neutros pueden combinarse con infinidades de tonos, y además expresan justo lo que son (elegantes, simples y eficientes).

Si tu marca no posee logo, recomendamos diseñarlo antes de pensar en la página web. Pero si ya está establecido, tienes casi la mitad del camino hecho. 

No quiere decir que utilices únicamente esos mismos colores, pero sí puedes tomar otros similares o que le complementen. Siempre pensando en armonía. 

En caso de que tu logo solo esté compuesto de un color, puedes hacer uso de gamas cromáticas. 

Si tienes muchas dudas y no sabes por dónde empezar, puedes guiarte o elegir cualquiera de estas combinaciones básicas: 

– Monocromáticas

Es un color con sus diferentes graduaciones de valores hacia tonos claros u oscuros. Blanco y negro son el ejemplo más clásico.

  • Paleta de colores

– Complementarias

Buscan crear el equilibrio perfecto. Se emplean dos tonos distintos. Por ejemplo: el rojo con el azul, el rosa con el verde o el morado con el amarillo. Para saber cuál es el complemento de cada color, puedes guiarte en internet con la rueda de color, o rueda cromática.

  • Paleta de colores
  • Rueda cromática
    Rueda Cromática

– Análogas

Se utilizan de tres a cuatro tonalidades cercanas en la rueda cromática. Estos, al ser similares generan tranquilidad.

  • Paleta de colores

– Adyacentes

Esta combinación se logra eligiendo un tono más dos colores terciarios adyacentes de su complemento. Por ejemplo: el amarillo con dos tipos de violetas. Estos se eligen de acuerdo a la rueda de color. 

¿Qué herramientas podría utilizar para generar paletas de colores?

Si a pesar de estos métodos, la elección de la paleta de color para tu sitio web se te hace muy difícil, puedes recurrir a otro comodín. 

Existen muchas páginas web generadoras de paletas de color automáticas. Ellas te facilitarán la tarea respecto a las combinaciones. Pero para saber si es o no la más adecuada, es necesario que realices un análisis de branding más profundo.

A continuación te dejamos las páginas generadoras de paletas de colores más famosas: 

1. Color Picker

2. Coolors

3. Adobe Color

4. Color Hunt

5. Colourlovers

¿Te gustaría recibir asesoría especializada para generar una página web o seleccionar los colores que realmente beneficiarán visualmente a tu marca? Contacta ahora al equipo de Emsek.

sitio web

¿Conoces la importancia del color en tu sitio web?

por con Sin Comentarios Diseño Web

Dentro de todos los parámetros del diseño web, la elección del color juega un rol esencial; ayuda a expresar mejor la personalidad de tu marca, sirve como elemento diferenciador e identificador para el usuario y tiene el poder de volver adictos a tus visitantes, o también de espantarlos. En otras palabras, el color en nuestro sitio web es un factor decisivo que puede transformar la Experiencia de Usuario (UX).

En el marketing digital y áreas afines como el desarrollo web existe un término llamado Experiencia de Usuario (UX), que se refiere al desempeño y calidad de un sitio web y la percepción que el visitante tiene sobre él. Por ende, además de poseer importancia visual, el color será fundamental para obtener más visitas y conversiones; nadie vuelve a visitar páginas mal diseñadas.

  • Sitio web
    Sitio web

Indica emoción

Seguramente habrás oído hablar acerca de la psicología del color, pues bien, esa asombrosa técnica no solo aplica para logos o banners. En las páginas web sus efectos también pueden sentirse, incluso con mayor intensidad.

Los colores en el landing page de tu sitio web hacen que los usuarios reciban un primer estímulo, y aquí aplica aquel viejo dicho: la primera impresión es la que cuenta. 

En este caso, debes tener en cuenta el sentimiento o valores que deseas expresar, para elegir el color más propicio para evocarlo. Si, por el contrario, se escoge al azar es probable que la conexión entre el sitio web y el usuario no se de.

La gama de colores es muy amplia y su significado también, pero para tener una idea genérica, los colores pasteles remontan a la tranquilidad y tonos más fuertes a sentimientos más intensos.

Combina con lógica

Si durante la creación del logo de tu marca se utilizó un solo color o una gama monocromática, debes tener cuidado de no saturar al usuario con este. Lo más recomendable entonces sería elegir una familia de colores que hagan juego.

Otro error garrafal ocurre cuando no se utilizan recursos apropiados para diferenciar botones, texto u otros elementos del color de fondo del sitio web. En este caso la sensación de la UX será confusión total y abandono automático.

La elección de colores no debe ser subjetiva, sino basado en el análisis de lo que representa tu marca, los gustos de tu target y del uso que le vayas a dar al sitio web.

  • Sitio web

¿Qué detalles debes tener en cuenta al elegir el color de tu sitio web?

  • Identificación de la identidad, valores, público objetivo y función del sitio web.
  • Crea paletas fijas de color que tengan variedad y límite.
  • Piensa en el usuario: dónde coloca la mirada, qué elementos no se entienden por sí solos, y en qué zonas deseas que se concentre mejor su atención.
  • Incluye espacios en blanco.
  • Elige colores e imágenes en función de la edad y sexo de los usuarios (El Público femenino se identifica con colores pastel, y de tonalidades magentas; el público joven se identifica con colores vivos.

Si necesitas asesoría para el color que acompañará el diseño de tu página web, puedes hacer click en nuestra sección de contacto para comunicarte con el equipo de diseñadores de Emsek.