logo ArDesignWeb

Página personal de Antonio Ropero

Tendencias de Diseño Web para el 2016

Reinventando el Diseño Flat

Google reinventó lo ya inventado. El diseño Flat llegó hace ya unos años para que luego el gigante de Internet decidiera reinventarlo y crear todo un universo.

Explotando el uso de la Tipografía

Otra de las tendencias es el uso de la tipografía como un elemento que también expresa información. Es posible que la veamos como forma y no exclusivamente como medio para comunicar o ilustrarlo con letras.

Sorprendiendo con nuevas animaciones

Las animaciones siempre nos sorprenden. Los vídeos son uno de los recursos favoritos para llamar nuestra atención. Utilizando la animación de forma sostenible podemos lograr una experiencia única y memorable.

Las nuevas etiquetas semánticas de HTML5

<header>
<section>
<article>
<article>
<aside>

Las etiquetas semánticas más importantes son:

<header>:
Es el equivalente a la cabecera de la página web. Contiene el título o nombre de la empresa/titular de la página, logo e información relacionada.
<nav>:
Contiene los enlaces (barra de navegación) externos o internos de la página.
<section>:
Es una gran caja que sirve para mostrar grandes bloques de contenido de la página. Puede contener diferentes subapartados de diferentes temas (de tipo <article>).
<article>:
Es una caja independiente de contenido que puede estar contenida (o no) dentro de un <section>. Normalmente utilizada para contenidos no demasiado extensos.
<aside>:
Define un bloque de contenido relacionado de manera indirecta con el contenido principal, pero que no es esencial para la compresión del mismo.
<footer>:
Equivale al pie de página de un apartado concreto (<section>, <article>...) o de la página web en general.

Imagenes en formato bitmap y en formato svg

Imagenes bitmap

Están formadas por una serie de pixeles o puntos coloreados y al redimensionarlas o aumentar el zoom se pixelizan y pierden calidad.

HTML5
Fig.1 - HTML5
The Pulpit Rock
Fig.2 - CSS3
The Pulpit Rock
Fig.3 - Javascript

Imagenes svg

Las imágenes vectoriales contienen las instrucciones para el navegador o programa de visualización de cómo crear la imagen. Es por eso que al aumentar el zoom siguen mostrándose nítidamente a cualquier resolución.

The Pulpit Rock
Fig.1 - HTML5
The Pulpit Rock
Fig.2 - CSS3
The Pulpit Rock
Fig.3 - Javascript

Imagenes responsive con picture

El nuevo elemento <picture> de HTML5 permite describir con todo detalle cómo deben cargarse las imágenes de tu sitio web. Además, los usuarios se aprovecharán de las ventajas de cargar solamente las imágenes optimizadas para el dispositivo que están utilizando, lo que es especialmente útil para usuarios con móviles y conexiones lentas a Internet.

Casa en paisaje nevado