15/06/2016 -- Armenia, Quindío - Colombia

12 Tendencias de diseño web en el 2016

12 Tendencias de diseño web en el 2016

1.Flat design:

Utilizar el diseño plano y con iconos se ha vuelto popular entre diseñadores web, ya que resulta intuitivo, simple, llamativo y muy funcional a la hora de diseñar para distintos dispositivos móviles. El flat design ha evolucionado de dos maneras distintas:

a. Aquí el diseño hace un fuerte énfasis en el minimalismo sin ningún distractor visual, de colores muy planos, que en distinta tonalidad dan una sensación mínima de profundidad o sombreado. Ejemplo:

Flat Design web

Créditos: http://waaark.com/

b. Combinación del diseño plano con el realismo fotográfico o video. Ejemplo:

Diseño Gráfico Plano

Créditos: http://eng.getlost-getnatural.ru/

2. Iconografía:

Se han convertido en un componente importante dentro del diseño web, algunos más detallados y otros más simples. Ejemplo:

Iconos Flat

Créditos: https://www.serioverify.com/

3. Tipografía:

Cada vez se utilizan tipos de letra manuscritas o caligráficas, también se impone la tipografía de un solo tipo o similares entre sí y de gran tamaño. Ejemplo:

Diseño tipográfico

Créditos: http://www.filipnordin.com/


Créditos: http://www.sound-of-change.com/

4. Color:

El uso de colores brillantes que contrastan con fondos oscuros, utilizar paletas de un color en distintas tonalidades. Ejemplo:

tendencias de color 2016

Créditos: https://spotify-valentines.com/

Diseño color Web


Créditos: http://borisignatovich.com/

5. Hero Headers o Cabeceras Gigantes:

Utilizar imágenes realistas estáticas o en movimiento como centro del diseño, añade un toque creativo, de alta riqueza visual, conservando siempre el minimalismo en la composición, sin dejar de lado la visibilidad de botones y sistema de navegación en la web.

Hero Headers

Créditos: https://www.sweetpunk.com

6. Navegación Simple:

Navegaciones por medio de iconos, o textos simples , utilizar el llamado "hamburger menu" para reunir todos los elementos de navegación que se despliegan en los laterales de la pantalla generalmente, pero que también se usa en la parte superior de la página, si bien, es una tendencia recomendada, sobre todo porque ha solucionado problemas de navegación desde dispositivos móviles para diseñadores y desarrolladores web, resulta complejo especialmente para personas mayores de 44 años ya que dificulta el cómo navegar en el sitio, esto puede ser solucionado añadiendo la palabra "Menu" cerca del "hamburger icon". Ejemplo:

Navegación Página Web

Créditos: http://x.prvrt.me/

7. Espacio Negativo:

No necesariamente los espacios deben ser de color blanco, se utiliza principalmente para que la forma de un objeto en el diseño sea más fácil de apreciar y por lo tanto atraer la atención visual hacia ese punto. Siempre hay que tener en cuenta que los espacios en blanco se utilizan de distinta manera dependiendo del sitio web, es recomendable visitar varias páginas y ver como otros diseñadores lo hacen, por ejemplo, en una landing page o página de aterrizaje no es igual que para una tienda virtual.

Espacio Negativo Diseño Gráfico

Créditos: https://www.office.com/

8. Diseño Simétrico y Asimétrico:

Dividir la pantalla en partes iguales de manera vertical o horizontal, diseños donde predomine un elemento a gran escala y equilibre su peso frente a otros más pequeños de un lado de la pantalla, recurrir a la simetría radial donde los objetos gráficos siguen un patrón circular y por último recurrir a un diseño asimétrico no solo son tendencias para este año, sino una forma eficaz de mantener el equilibrio y la armonía en la web.

Simetría

Créditos: http://www.renaterechner.at/en/

9. El Contraste:

Utilizar colores, tamaños, formas o ubicación que contrasten en el espacio de forma creativa.

Contraste en el diseño

Créditos: http://tolia.ge/index.php

10. Fondos:

Experimentar con nuevas paletas de color, recurrir a fondos con animaciones sencillas que no saturen al visitante.

Fondos Web

Créditos: http://www.alaskavodka.com/

11. Contenedores:

Diseños donde predominan el estilo de tarjeta o para ser más claros el diseño basado en Pinterest, donde puede contener textos, imágenes o botones.

Contenedores HTML

Créditos: http://www.redsquarevodka.co.uk/

12. Imágenes y Video:

Usar fotografías y videos en HD como conectores emocionales entre la web y el usuario, sliders o collages cuando se cuenta con más de una imagen sigue siendo una muy buena opción, utilizar efectos sobre la imagen como desenfoque y filtros fotográficos.

Video Parallax

Créditos: http://outmonsterthemonster.com/