Faceta Gráfica

-|- Perfeccionado Ideas -|-

Tendencias Web 2013

Deja un comentario

Ahora que ya hemos consumido casi la mitad del año, y en base a mis investigaciones, y a la propia experiencia, ha llegado el momento de analizar las nuevas tendencias en diseño web que ya desde el año pasado los creativos y desarrolladores web venimos aplicando a nuestros proyectos.

Sin darnos cuenta y de manera natural hemos ido jubilando herramientas y procedimientos que hasta ayer eran un básico en nuestras creaciones, como en su día lo fueron aquellos applets de java que a mi tanto me gustaban cuando empecé allá por el 2001.
Nº1 Bienvenidos HTML5 y CSS3, adios Flash
 

Una de esas herramientas imprescindibles de las que hablaba hace un momento es Flash. Recuerdo que en 2007, en el keynote de Dani Granatta en la presentación de Adobe CS3 en el Live! de Madrid, estábamos todos los allí presentes hipnotizados con las creaciones de este maestro del diseño web, creaciones hechas 100% en Adobe Flash. Un mes después voy a un curso de Inteco sobre accesibilidad y usabilidad y me cuentan que Flash es el mayor enemigo de la accesibilidad y la indexación en los motores de búsqueda.

A día de hoy, sin haber rematado del todo a Flash, y sabiendo que con una optimización de las etiquetas meta, sigue siendo perfectamente indexable por Google, es cierto que HTML5 y CSS3 le han ganado la partida a al software de Adobe, que ha quedado relegado a la creación de banners, y creaciones más complejas y especializadas donde prima la animación y la interactividad sobre el contenido.
Las ventajas de HTML5, CSS3 y Javascript frente a Flash son notorias, en seguridad, accesibilidad, usabilidad, y sobre todo en compatibilidad, factores que a día de hoy priman sobre el aspecto visual a la hora de trazar la estrategia de creación de un nuevo proyecto.
Nº2 Un diseño para todos los dispositivos. RESPONSIVE
Responsive design o diseño adaptativo, es probablemente el mayor de los cambios a la hora de plantear la maquetación de una web.
Potenciado por HTML5 y herramientas como Adobe Dreamweaver, que en CS6 ya cuenta con un entorno de diseño adaptativo integrado, el diseño adaptativo permite, mediante la redistribución y la redimensión automática de los elementos de la web, la adaptación de un mismo diseño a distintos dispositivos mostrándose la página de la forma mas óptima para su visionado en los distintos dispositivos. Actualmente para los CMS mas difundidos, como WordPress o PrestaShop ya existen multitud de plantillas adaptarivas, donde en el comercio electrónico se muestra casi vital para el éxito de la página, en vista de las tendencias de uso de los smartphones y las tabletas.
Nº3 Mayor libertad en las tipografías.
Antes los diseñadores estábamos limitados a la creación con fuentes estándar, aquellas que sabes que va a tener todo usuario en su dispositivo, como Arial, Verdana, etc y sus sustitutas, como Helvética, Tahoma, era impensable querer poner una fuente no estándar  sino era en una imagen.
Con CSS3 llega la libertad creativa también a aspecto tipográfico. Aparte de la celebrada capacidad de ponerle un sombreado a la letra, nos encontramos con un nuevo código que nos permite, incluyendo el archivo .ttf de la tipografía en el proyecto, utilizar la fuente que queramos.
Nº4 Todo es más grande. Imágenes:
Las altas capacidades de la banda ancha de los hogares nos dan más juego a la hora de utilizar imágenes de alta resolución y gran tamaño, que cubran incluso todo el fondo. En páginas de aterrizaje, donde prima la imagen frente al contenido, es un recurso muy utilizado, creando composiciones mas de cartel publicitario que de página web, dando lugar a páginas impactantes u muy atractivas. El soporte para imágenes SVG, tambié ha permitdo a los creativos crear imágenes de alta calidad y bajo peso. Botones y controles más grandes: Pensando en los dispositivos táctiles, la tendencia en menús, botones, cajas de introducción de texto y demás controles aumentan de tamaño para ser pulsados con el dedo además del puntero del ratón.
Nº5 Colores sólidos y suaves, esquinas redondeadas y sombras.
Es curioso como a pesar de que CSS3 permite mediante código crear degradados, la tendencia en diseño se ha invertido dando paso de nuevo a los colores planos, tal vez influenciados por la simpleza visual y el minimalismo de Windows 8 se crean espacios planos, grandes cajas con un pequeño texto o icono. Algo que antes parecía simple ahora es bello. En lo referente a la gama cromática, se tiende al uso de tonos pastel, que resultan sin duda relajantes y el acompañamiento perfecto a las grandes imágenes y sobre todo en el uso de las grandes y diáfanas capas sin contenido. Por otro lado, y entroncando con la tendencia a las “gigantografías” en los backgrounds de nuestras webs, se tiende a crear espacios de contenido en capas con bordes redondeados, con sombras paralelas, y los más atrevidos, entre los que me incluyo, con fondos con cierto grado de transparencia, creando espacios flotantes. Todo ello gracias de nuevo a CSS3 que permite la creación de todos estos elementos mediante la introducción de líneas de código.
Nº6 Scrolls Infinitos y efecto parallax
Es una tendencia que reconozco que no me gusta, y más teniendo en cuenta que a muchos de mis clientes les aterra la posibilidad de que no se vea todo lo importante de su web de un primer vistazo. Tal vez propiciado por el uso de smartphones donde es mas cómodo deslizar el dedo que pulsar un botón de paginación, los nuevos sitios web , crean su contenido en un solo espacio vertical, creando largos scrolls, que se manejan mediante menús con anclas y efectos de scrolling automático.  Pongamos como ejemplo la página del Caldo Casero de Gallina Blanca o la de Belros. Junto a esta tendencia encontramos el menú siempre presente. Para no tener que volver a desplazarse al inicio de la página, el menú permanece en una capa flotante, siempre presente en la pantalla. El efecto parallax es el movimiento de objetos a distinta velocidad dentro de un espacio visible, de tal modo que haciendo scroll puedes ver los elementos de una página pasar ante ti, unos más lentos y otros más rápido. Como ejemplo maestro de este tipo de sitios está la web de Air Jordan 2012 de la marca Nike. En resumen, vemos que HTML5 y CSS3 han revolucionado nuestra forma de diseñar, y sobre todo de compaginar diseño y usabilidad y también que la llegada de los smartphones y tabletas han cambiado nuestra forma de enfocar los proyectos, de cara a que nuestras páginas ofrezcan una experiencia cómoda y atractiva a los usuarios de estos dispositivos que, como muestran las estadísticas crecen exponencialmente.
Fuente: Los Motores de la Creación.
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s