Aspectos del diseño responsive en la web que definieron el 2015

Hoy en Posicionamiento Web Systems queremos hablarte un poco sobre los diseño responsive en la web que definieron el año 2015, ya que sabemos que lo estético y las apariencias son muy importantes en el marketing digital, si quieres conocer mucho más acerca de este tema y de las tendencias que marcaronlos últimos doce meses, te invitamos a leer este post, tal vez te inspires un poco y saques algunas buenas ideas que podrás aplicar para el 2016 ¿te gustaría?

La importancia del storytelling bien diseñado

En un espacio de tiempo relativamente corto, el diseño responsive en la web ha evolucionado, desde ser una interesante y revolucionaria idea, hasta la aceptación por parte de la industria masiva que trabaja con elementos multidispositivos. Ya empezamos el año 2016, podemos observar una maduración en la forma en que se lleva a cabo este tipo de diseño, algunas prácticas interesantes valen la pena ser mencionadas, así como tendencias emocionantes, en este artículo haremos eso, un recuento de todos esos elementos que marcaron pautas para el futuro.

Mantener un storytelling cautivante es algo de lo más fundamental. La humanidad siempre ha usado a las historias para transmitir y compartir algunas ideas o información, estas siempre activarán partes de tu cerebro que hechos simples o datos no harán. En los sitios webs, el storytelling crea mayor engagement y por supuesto, contenido web más atrayente y entretenido. Uno de los sitios que usan este tipo de estrategia es Medium, así como algunos redactores que utilizan las historias para dar a conocer detalles importantes, información y datos convenientes. Si quieres contar alguna historia en tu web con diseño responsive, puedes seguir ciertos datos:

• Engancha a los lectores rápidamente y asegúrate de contar con una fuerte apertura que caiga encima de las miradas y que las personas la vean de inmediato.
• Asegúrate que las longitudes de línea para su historia sean óptimas para pantallas grandes y pequeñas. Las líneas muy grandes son difíciles de seguir, mientras que las que son muy cortas pueden cortar el flujo de lectura. Lo mejor es tener un rango entre 6 y 75 caracteres por línea y ajustar los tamaños de fuente según sea necesario para lograr mejores resultados.
• Usa elementos visuales para acentuar la historia, pero se conscientes de los tamaños de las imágenes y busca garantizar cargas rápidas en todos los dispositivas
• Debe ser fácil para los lectores compartir la historia con otros, puedes colocar un botón para compartir los contenidos. Esto es muy útil para las pantallas pequeñas que requieres un scrolling más elaborado, también asegúrate de que los botones respondan bien a las pantallas táctiles.

Algunos diseños que marcaron tendencia

¿Has escuchado el dicho de “menos es más”? esto es algo que debes tener en cuenta, aunque algunos profesionales de SEO o desarrolladores te digan lo contrario. El argumento que usan es que, un sitio con muchas páginas tiene más oportunidad de ser rankeados por mayor cantidad de keywords. El problema de crear webs densas es que pueden llegar a ser confusas para los usuarios y es complicado planificar optimizarlas a cada rato. Cuando piensas en cargar el contenido en dispositivos más pequeños, podrá imaginarse la pesadilla de usabilidad que conlleva.

Los sitios “más pequeños” están enfocados en temas específicos, eliminan cualquier página o contenido que no son críticos para la experiencia de usuario. La tendencia de “lo menos es más” puede ser vista en sitios web de una sola página, así como en lugares que han simplificado agresivamente sus sitemaps.

Cuando el enfoque que se le da a la web se vuelve popular y es muy usado, como suele suceder en el diseño responsive, emergen nuevos patrones, cómo se explica en el sitio UXPin, en un artículo llamado  “Web Design Trends 2015 & 2016”: “Un patrón de diseño web, llamado también ‘IU design pattern’, es una solución reusable a un problema que ocurre muy a menudo y puedes encontrarte todos los días”.  El valor de hacer uso de un buen diseño de patrón para resolver algún problema es que a los usuarios les resultará muy cómodo y familiar tu solución.

La desventaja de los patrones establecidos es que la gran mayoría puede usar el mismo enfoque y los otros sitios webs comenzarán a parecerse, poco a poco la singularidad se va perdiendo. Debes encontrar un buen equilibrio entre lo positivo y lo negativo, ¡es posible!, un patrón responsive muy común, por ejemplo, es el de “navegación off-canvas”:

• Ventana más pequeña: En la ventana de tu smarthphone, te brinda muchas opciones, un menú completo que se ve de la siguiente forma
• Ventana Mediana: La vista en la tableta expande la zona de navegación horizontal y puede agregar un aviso en el medio de la pantalla junto a otras CTAs (llamados a la acción= secundarias en la parte inferior de la pantalla
• Ventana más larga: La navegación y el diseño de contenido son del mismo tamaño que el de la tablet en donde se vea.

Al evaluar patrones, pregúntate lo siguiente:

• ¿Qué problema tratas de solucionar?
• ¿Cómo otros han resuelto este problema?
• ¿Hay patrones para mi problema o alguna metodología?
• ¿El patrón está muy usado?

¿Conocías el “diseño de tarjetas”?

Es importante que conozcas todo sobre los aspectos de diseño responsive en la web que definieron el 2015. Uno de los más populares fue el de “diseño de tarjetas”, muy popularizado por Pinterest, este es usado para presentar fácilmente el contenido de una página web. Estos son muy atractivos cuando se considera la UX para los sitios web de respuesta. Estas tarjetas convierten los bloques de información en formas más pequeñas que pueden ser reorganizados en distintos tamaños en la pantalla, puede usarse en ventanas pequeñas, así como también de mayor tamaño.

Otro diseño muy usado es el de grandes fotografías colocadas en la web, muchos sitios usan imágenes que abarcan el alto y ancho de la pantalla, otros han tomado el enfoque opuesto, evitando el uso de cualquier imagen y prefiriendo colores audaces y una rica tipografía en su lugar. Aunque como todo, esto tiene beneficios e inconvenientes.

En Posicionamiento Web Salamanca saben que el uso de imágenes ricas puede añadir un buen toque visual a tu diseño, pero las fotografías significan tiempo adicional para que el sitio cargue, al remover estas imágenes, el sitio perderá la riqueza visual del diseño, pero se acelerará el tiempo de carga, el punto medio es optimizarlas de la mejor manera.

Existen muchos otros aspectos de diseño responsive en la Web que definieron este 2015, te invitamos a hacer una investigación y enterarte de mucho más, puedes enviarnos tus comentarios hablándonos de estas tendencias, ¡también puedes compartir este post a través de tus redes sociales!