¿Quieres una pagina web como esta? infórmate sin compromiso: 646 565 675 // hola@espinapez.com
¿Quieres una pagina web como esta? infórmate sin compromiso: 646 565 675 // hola@espinapez.com

Diseño de páginas web 10 tendencias a incorporar en 2015

Nuevas tendencias no tan dificiles de adivinar

  Si hablamos de diseño web lo primero que tenemos que tener en cuenta que no depende exclusivamente de la moda, de hecho lo que conocemos como diseño de páginas web en realidad va mucho más allá del diseño. En el caso de los diseñadores y creadores de sitios web es la tecnológia y los usuarios la que marca el camino a seguir. 


Desde el momento que se ha entendio que ya no valen los rotulitos de "pagina optimizada para 800 x 600", "por que yo lo valgo" y el "allá penas" cambiamos el paradigma y pusimos al usuario en el centro de todo, porque se ha comprobado una y otra vez que eso funciona


 Así es mucho más sencillo predecir y saber que es lo que se necesita y que es lo que no. En los 10 puntos que os presento a continuación hay un factor que destaca sobre los demás: son los dispositivos móviles y la adaptación de nuestro contenidos a su consumo en esos dispositivos, lo que está marcando más las tendencias en creación de páginas web.


En este nuevo escenario en mi opinión Google está consiguiendo desbancar a Apple como faro del diseño digital. La evolución de Flat Design a Material Design cada vez está más extendida, tanto en web como en aplicaciones y Material Desing parte de una iniciativa de diseño de Google para sus dispositivos Android.

1 Material design


Un diseño para unirlos a todos

Material Design es una línea de diseño creada por Matias Duarte para Google, incorporada en Android y  recomendada para aplicaciones Android en 2014.


En principio Material Design se ha creado para dispositivos moviles pero su intención es la de unificar el diseño sin importar donde lo vamos a aplicar (páginas web o aplicaciones), el diseño no cambiará independientemente del dispositivo con el que accedamos a la información ya sean móviles, tablets, smartwatchs o equipos de sobremesa.



Como se dice desde Google, Material Design "Permite una única experiencia a través de plataformas o tamaños de pantallas"

Representación del mundo real


La sensación que Material Design traslada es la representación de un mundo real y físico a las pantallas.
La solución la consigue estableciendo reglas físicas del mundo real a los objetos que se usan en un diseño de una página web, o una aplicación.


Los colores, la profundidad las luces y sombras, los movimientos de esos objetos por la pantallas, las escalas usadas, las zonas de interacción acentuadas, procuran representar las mismas características que encontramos en la realidad al manipular objetos, creando una experiencia coherente con el mundo real.

2 Animaciones e interacciones


Otro aspecto donde Material Design tiene que ver mucho


Como hemos leído Material Design hace hincapié en las animaciones, siendo una de las tendencias en diseño de páginas web que vamos a tener muy en cuenta a lo largo del 2015.


A las zonas interactivas habituales con animaciones que indican a nuestros usuarios una zona en la que pueden interactuar, generalmente con un clic, como son: enlaces, botones, imágenes que permitan su ampliación etc.

Vamos a sumar otro tipo de animaciones que van a reclamar la atención del usuario o bien le van a indicar sutilmente que una tarea se está realizando.

Microanimaciones


Esas animaciones a las que me refería serán microanimaciones de botones, bloques o zonas interactivas que nos ayuden a distribuir la información.


También pueden ser elementos en pantalla que al ser clicados se transforman, indicando así que se ha realizado una acción. Por ejemplo tendremos menús ocultos tras el típico icono de hamburguesa que al hacer clic sobre él y mostrar el menú se convierte en una flecha. Esa transformación nos ha mostrado claramente cual es el lugar en el que tenemos que interactuar para deshacer la acción y cerrar de nuevo el menú.

Cargando bloques, apariciones secuenciales


También las animaciones se van a usar en la carga de los bloques de información. Estos bloques irán apareciendo a medida que vamos bajando por la pagina.

Estas animaciones llamarán nuestra atención sobre el siguiente contenido que deberíamos leer, como capítulos de una historia que va avanzando. Esta secuencia facilita la lectura y compresión de los contenidos.


Os dejo un buen ejemplo que donde se usan técnicas como parallax o la aparición de textos al servicio de la narración de una historia.

Animaciones recurrentes y llamadas de atención


Las animaciones mostrarán las zonas donde el usuario va a poder interactuar, además de destacar gráficamente una zona interactiva, podemos atraer la atención de nuestros usuarios mediante ligeras animaciones que aparezcan de vez en cuando.

También se pueden usar para que ayuden al usuario en una acción que queremos que complete como el envío de un mensaje la aceptación de la política de cookies, o cualquier otra tarea.


Otro ejemplo de animaciones que ya vemos habitualmente, son las que se añaden en aplicaciones de uso cotidiano y que por cualquier motivo han modificado su funcionalidad.

Un ejemplo de ello son las animaciones que Facebook utiliza cuando realiza un cambio en el diseño o agrega una nueva funcionalidad mostrando una guía interactiva que nos enseña el uso de esas nuevas funcionalidades.

Gifs, vídeos y cinemagraphs, la dimensión peligrosa

 

Un modo de darle vidilla a nuestras páginas va a ser incorporando imágenes en movimiento con vídeos y recuperando antiguos formatos como el gif animado.

 

En ambos casos su uso es cada vez más creativo y encontraremos estos formatos no solo como vehículo de transmisión de contenidos, sino que también van a formar parte del propio diseño de nuestras páginas por las posibilidades que nos da HTML5, CSS3 y los navegadores que lo permitan.


Esos usos creativos de los que he hablado tienen en el gif animado un ejemplo perfecto.

Hace unos años el uso del gif animado podía ser peligroso  y en muchas ocasiones delataba al diseñador web aficionado, sobre todo cuando se usaba en fondos, viñetas o páginas en construcción.

Los diseñadores y programadores profesionales mantuvimos una distancia prudente con el uso del formato, pero bueno, quién no ha caído en la tentación alguna vez ;)


En cambio ahora creo que vamos a volver a utilizarlos de manera mucho más habitual gracias a técnicas como cinemagraphs un formato a caballo entre la imagen estática y el vídeo; algo más que un gif pero menos que un vídeo, como podéis ver claramente en este ejemplo perteneciente a phlearn.com

3 Tipografía


Más diseño tipográfico


Ya llevamos unos años con buenas noticias para los que nos gusta el diseño tipográfico y 2015 seguirá la línea ascendente en el protagonismo de tipografías y su uso a la hora de crear el diseño de una pagina web.
La tipografía siempre me ha parecido algo de capital importancia en una pagina web porque es un elemento que no solo apoya el diseño sino que da carácter al sitio entero y sin olvidar lo fundamental, es el soporte de nuestro contenidos, y estos han de favorecer lo máximo posible su lectura.

 

Técnicas maravillosas


Que os voy a decir,  yo soy feliz con las nuevas posibilidades que nos dan técnicas como @font-face, sitios como Google Fonts y la capacidad de los navegadores de interpretar correctamente todo esto.


Solo Google Fonts cuenta con un catalógo de 667 familias tipográficas de uso libre,  son muy sencillas de incorporar y  ofrecen un rendimiento espectacular, tanto si se usan en sitios web para pequeñas empresas o en una de las páginas web con más tráfico de España.


Y todo esto siendo accesible y por supuesto indexable por los buscadores, lo cual hace que podamos usar prácticamente cualquier tipografía en nuestros sitios webs.

En eltiempo.es nos vimos obligados a buscar una alternativa fiable y libre a Helvetica Condensed que aparecía en el genial rediseño original de Iván Santamaría (gran compañero y mejor persona) y la solución fue incorporar Ubuntu y Ubuntu Condensed desde Google Fonts

Lettering


Lettering es el dibujo de letras a mano.

La personalización de productos y contenidos es algo que cada día se usa más. En este sentido una de las tendencias donde se imprime una gran personalidad propia es en el dibujo de tipografías, algo que no solo se está usando en diseño gráfico digital sino que cada vez está más presente en diversos sitios como escaparates de comercios, rótulos, marquesinas, bares etc.

Tipografías bold, que se vea bien


Todos estos avances de los navegadores a la hora de renderizar nuevas tipografías junto con el diseño tipográfico han hecho que incorporemos tipografías con gran peso a nuestras páginas web.


Se busca ante todo legibilidad, para ello la tipografía gruesa en negrita y sin serifas nos da muchas ventajas.

Por una lado llama la atención de los usuarios gracias a su jerarquía visual y por otro es capaz de transmitir el mensaje, un beneficio o ventajas de un producto o servicio.

6 SVG


SVG son las siglas de Scalable Vectoral Graphics, imágenes vectoriales escalables.

 

Este tipo de imágenes son soportadas de manera nativa por la mayor parte de navegadores actuales, tanto en dispositivos móviles como los navegadores de escritorio. Únicamente Internet Explorer en su versión 9 y 8 requieren de un plugin especial para mostrar estas imágenes.

 

Las ventajas de uso de las imágenes SVG viene dada por su capacidad de adaptación a cualquier tamaño de contenedor sin perder calidad a la hora de ser ampliadas, cosa a tener en cuenta en nuestros diseños responsive.

Añaden otra ventaja más que el archivo resultante tiene un peso menor que otro tipo de imágenes.

 

Además el formato SVG no es otra cosa que un texto XML con lo cual permite su indexación por los buscadores, cumplen con las normas de accesibilidad web y podemos modificar su aspecto o su comportamiento con CSS o JavaScript entre otros.

7 Scroll mejor que click

 

En este año seguiremos con el crecimiento de los sitios web compactos donde el contenido se aglutinará en una única pagina.

 

Si anteriormente organizábamos el contenido en árboles de navegación amplios con muchos documentos distintos ahora el diseño de páginas se va a realizar pensando en crear contenidos mucho más condensados a los cuales se accederá haciendo scrolls amplios, como el timeline de twitter donde a medida que vamos bajando se va cargando el contenido y la influencia por la capacidad de conversión de las landing pages.


Este modo de navegación va a obligarnos a crear contenidos muy optimizados, pensados como una historia secuencial que nuestros usuarios han de seguir a base de scroll para cumplir con sus objetivos y como ya he descrito arriba.


Las páginas con grandes scrolls van a tener un impacto importante en la optimización de los sitios ya que reducirán las peticiones al servidor un problema en ocasiones de cara a la optimización de los sitios web de cara al SEO.

8 Sitios rápidos

Necesitamos sitios rápidos, eso es algo que tanto Google y el resto de buscadores, como los usuarios, han ido obligando a hacer a través de severas penalizaciones en los rankings y en los abandonos.

Uno de los factores que los buscadores establecen como punto clave a la hora de posicionar un sitio web es la velocidad de descarga de las páginas.


Por un lado dependen de la capacidad de los servidores en las que se alojen y de los planes contratados con los proveedores de hosting, pero por otro lado también aparece la optimización de las propias páginas.


    Luego están los usuarios. Es algo sabido que un usuario no espera más de dos o tres segundos a que una pagina se cargue en su navegador antes de abandonar el sitio web y visitar otro.


    Ahora cada vez más, el acceso a nuestras páginas web se realiza desde smartphones y tablets donde la velocidad de descarga de las páginas ha de ser mucho mayor. 

    Para los dispositivos móviles tenemos que hacer un trabajo especial ya que Google en sus directrices recomienda incluso crear una versión especifica de nuestro sitio web para el acceso desde los móviles.

    A tener en cuenta

    • imágenes optimizadas
    • sprites
    • gráficos SVG
    • reducción de tamaño de scripts
    • optmización código
    • configuración del servidor
    • contenido cacheado

    9 Lenguaje para humanos


    Es la hora de adaptar nuestro contenidos, hacerlos legibles y a poder ser amenos. Conectar con nuestro usuarios y clientes recurriendo a un lenguaje natural, directo...normal se hace imprescindible hoy en día.


    Los textos optimizados para los buscadores ya no son efectivos, ni siquiera para los mismos buscadores, mucho menos para la gente que a fin de cuentas nos va a leer.


    Los buscadores a cada actualización de sus algoritmos de búsqueda dan más valor a las páginas escritas para humanos. ¿Cómo pueden saber si un texto está mejor o peor escrito? Lo están haciendo si, pero también lo basan en la cantidad de veces que se comparte un contenido y los comentarios que generan (sí, por eso se recalca el "comparte gracias, comenta gracias").


    Repetir hasta la nausea palabras clave sin ton ni son afortunadamente se ha terminado para dar paso a la redacción de contenidos que sean fáciles de leer.

    10 Storytelling


    Como ya he dicho hay que escribir para las personas, pero aún es más difícil, tenemos que ganar su atención y poder transmitir los beneficios que les puede llegar reportar nuestro "maravilloso producto o servicio".


    Para ello tenemos que conectar con su parte emocional y fomentar la escucha activa y la mejor manera de hacerlo es a través de una historia.


    Las historias que podemos contar las podemos tomar de libros, películas, noticias, como de nuestra propia experiencia personal que incluso pueden ser más atractivas por ser inéditas y originales.


    El ser humano, pese a todos los avances, parafernalia y modas que pueda inventar e incorporar a su vida cotidiana, sigue siendo humano y una de las cosas que a lo largo de los siglos mejor han captado nuestra atención son las buenas historias.


    Para los que somos de Guadalajara esto ya no sorprende tanto pero sabemos desde hace más de 25 años como las historias enganchan a la gente y como son capaces de identificarse tanto con ellas gracias al Maratón de los Cuentos de Guadalajara.


    Esta definición es muy ilustrativa

    "A story is the shortest distance between two people." ~ Terrence Gargiulo via Lisa Rossetti.

    Conclusión: móviles y humanos lo primero


    Los puntos más importantes que he referido, como Material Design, microanimaciones y optimización de carga tienen como origen el nuevo concepto a la hora de diseñar de mobile first. Pensar en el móvil primero a la hora de diseñar, pero teniendo en cuenta a los usuarios que visitan nuestro sitio sirviéndoles un contenido ameno, útil y capaz de cubrir sus necesidades.

    Esta es mi clasificación, ¿te parece correcta? ¿Falta algo, sobra?. Si es así anímate a escribir un comentario con tu opinión, serás bienvenido.

    Gracias :)

     

    COMENTAR

    Yandex.Metrica