Diseño y desarrollo web: todo lo que tienes que saber para el 2016

Ya pisamos el 2016 así que es momento de sumergirse en las tendencias desarrollo y diseño web que estarán liderando la experiencia de usuario este año, o mejor dicho, que ya están siendo aplicadas. ¡Da un paso adelante! Y perfecciona tus websites para lograr conversión y crear experiencias geniales.

¡El menú hamburguesa continua en boga!

Es uno de los menús más geniales para la apariencia minimalista que exigen los websites actuales. En este post te explicamos mejor de qué se trata.

Una recomendación muy importante que tenemos que darte en relación a este menú, es que debes tratar de no esconder todos los elementos de la página web dentro de él. Crea secciones genéricas para el home o landing page y usa el menú hamburguesa para una navegación más profunda.

Diseño-y-desarrollo-web-todo-lo-que-tienes-que-saber-para-el-2016-1

Diseño-y-desarrollo-web-todo-lo-que-tienes-que-saber-para-el-2016-2

Foto: Maecia

PHP 7 viene con mejor rendimiento ¡Aprovecha!

Esta actualización del lenguaje viene con características de programación y seguridad mucho más avanzadas. En esta guía puedes encontrar todas sus nuevas características.

Diseño-y-desarrollo-web-todo-lo-que-tienes-que-saber-para-el-2016-3

Foto: konstantinfo

Minimalismo = funcionalidad

Mientras menos elementos estén presentes en la pantalla, más poderosos serán los que sí aparezcan. Esto no significa que la página web tenga que ser simplona y poco atractiva, se trata de trabajar con los elementos necesarios a través de una composición que enganche al usuario. Recuerda el dicho “menos es más”.

Un consejo: usa máximo 4 elementos centrales en el diseño, si tienes más, el usuario perderá la concentración.

Diseño-y-desarrollo-web-todo-lo-que-tienes-que-saber-para-el-2016-4

Foto: Gitman

Cuidado con el Parallax Scrolling, descubrimos algo triste

Ya habíamos recomendado el Parallax Scrolling como un efecto genial para las páginas web, y aunque lo es, parece que no para todos los casos.

  1. Es malo para el SEO. Sí, es la desventaja más triste y por una razón muy simple, y es que hay muy poco texto en los diseños, porque el mismo suele estar incrustado en los gráficos. En otras palabras, a los motores de búsqueda les cuesta mucho más trabajo encontrar la página web.
  2. Reduce el rendimiento de la web. Sobre todo cuando se trata de conexiones lentas debido a que sus gráficos JavaScript son muy pesados. Toma en cuenta esto, si quieres que la web funcione en dispositivos móviles.
Diseño-y-desarrollo-web-todo-lo-que-tienes-que-saber-para-el-2016-5

Se ve genial pero hay que pensar en los puntos anteriores. Puedes aplicarlo según el alcance que desees lograr con la web.

Foto: Rimmel London

Las animaciones siguen liderando

Interactividad + entretenimiento + storytelling =  mejor experiencia de usuario ¿cómo puedes reunir los tres elementos? Usando animaciones. Si bien no se trata de llenar toda la web con solo animaciones, tiene que ver con utilizarlas estratégicamente. Algunos ejemplos son:

– Animaciones de carga: son ideales para entretener al usuario mientras espera que cargue una función para que la experiencia no sea tediosa. Se usan en diseños planos y minimalistas.

Diseño-y-desarrollo-web-todo-lo-que-tienes-que-saber-para-el-2016-6

– Animaciones Hover o flotantes: ofrecen un recorrido fluido a través del contenido y mantienen la apariencia minimalista. El usuario debe pasar el cursor por determinada zona para que aparezca la información (y no te preocupes, esto ocurrirá de manera intuitiva).

Diseño-y-desarrollo-web-todo-lo-que-tienes-que-saber-para-el-2016-7

– Galerías y presentaciones: sí, también son animaciones. Ideales para portafolios e incluso catálogos.Diseño-y-desarrollo-web-todo-lo-que-tienes-que-saber-para-el-2016-8

Foto: Heart Kids

– Animaciones en movimiento: funciona muy bien para mostrar las partes y funcionalidades de un producto en específico. También puedes jugar aplicándolo a llamados a la acción y menús que desees destacar.

Diseño-y-desarrollo-web-todo-lo-que-tienes-que-saber-para-el-2016-9

Foto: Riiotlabs

Flat y Material Design

Ya te habíamos hablado un poco sobre el diseño plano (Flat Design), básicamente se trata de una tendencia que se enfoca en el diseño minimalista y deja de lado los adornos y efectos innecesarios, como fondos pesados, imágenes sobrecargadas y biseles que distraen a los usuarios.

Recuerda que minimalista no significa simple o mal diseñado, significa atractivo  y usable.

Según el libro de tendencias de UXPin, los 5 componentes del Flat Design son los siguientes:

  1. Sombras largas. Pero muy muy disimuladas.
  2. Colores dinámicos. Brillantes y energéticos combinados con colores más suaves y claros.
  3. Tipografía simple. Fácil de leer, sobre todo de la familia sans serif con bordes mínimos.
  4. Botones fantasmas. Tranquilo, no se trata de usar el logo de Snapchat. Son botones transparentes que se mezclan con la imagen del fondo y solo se reconocen por un borde unicolor y la palabra o llamado a la acción que contiene.
  5. Todo se reduce a diseño concentrado en el contenido.

Google apoya este estilo de diseño así que crearon una guía llamada Material Design que enriquece totalmente el concepto, ya que su objetivo es ofrecer diseños más realistas al usuario, una apariencia más limpia y estética, basándose en el diseño plano. Sin embargo, juega en gran medida con la profundidad de los elementos.

Diseño-y-desarrollo-web-todo-lo-que-tienes-que-saber-para-el-2016-10

Foto: Take it app

Diseño-y-desarrollo-web-todo-lo-que-tienes-que-saber-para-el-2016-11

Foto: Android

Vienen más One Pages o aplicaciones Single-page 

Las tendencias en experiencia de usuario se han inclinado a websites de una sola página, que se encuentran divididos por vistas o bloques y no por secciones propiamente dichas, es decir, toda la información necesaria se ubica en una sola página.

Lo anterior significa que el usuario no debe cargar nuevamente la web para acceder a una sección diferente, únicamente hace scroll para desplazarse de un contenido a otro.

Esta técnica aplica para páginas web de contenido reducido y minimalista. Por supuesto, no funcionaría bien para una página web de noticias, por ejemplo.

Diseño-y-desarrollo-web-todo-lo-que-tienes-que-saber-para-el-2016-12

Foto: McWhopper

Por último, se expandirá el uso de Polymer de Google, un kit genial para developers que permite desarrollar aplicaciones a través de una amplia gama de componentes web, personalizables.

LEER TAMBIÉN: Las 4 tendencias más cool en diseño web para el 2016

Por Marlis Mejías

Comentarios

comentarios