15 Tendencias de Diseño Web a tener en cuenta en el 2012

Hasta el momento el 2011 ha traído increíbles cambios en los diseños y tecnología en Internet. El desarrollo web se ha convertido en un tema más accesible para aprender, sin mencionar las incontables bibliotecas de códigos abiertos útiles en la racionalización del proceso. Y sin embargo parece ser que la comunidad de diseño global está muy lejos de tirar la toalla.

Quiero introducir las 15 ideas que han crecido rápidamente en el pasado año. Estas tendencias abarcan diseños web y técnicas de diseño de gráficas que jugarán un papel importante en el 2012. Probablemente ya ha visto algunas de estas ideas en sus sitios favoritos.

Implementar estos métodos cada día es más fácil y entendible para los usuarios.

 

La experiencia del usuario promedio es tal vez el aspecto más importante a considerar cuando se diseña un sitio web. Necesitará elementos que respondan rápidamente a acciones por medio del teclado o mouse y que se comporten como debe ser. Algunos ejemplos pueden incluir menús desplegables y cuadros drop-down.

Incluyendo las famosas bibliotecas de JavaScript como por ejemplo MooTools y jQuery, se ha hecho más fácil animar estas características y más. La mayoría de los browsers actuales respaldan este tipo de código e incluso se degradan si el script no está disponible. Últimamente lo que se busca es hacer sentir cómodo al usuario cuando interactúa con cualquier diseño.

Del mismo modo debe tomar en cuenta el input y la revisión de datos. En muchas páginas de registro recibirá pequeñas respuestas mientras trabaja en cada área de input. Puede automáticamente validar correos, usuarios duplicados e incluso revisar nuevamente las contraseñas. Esto ahorrará tiempo del lado del usuario y le proveerá una útil guía a través del proceso de registro.  

 

En los últimos años se ha hecho evidente que los teléfonos inteligentes están siendo apoyados incluso por lo no entusiastas de la tecnología. Pero sólo a partir del 2011 se ha visto una explosión de sitios móviles y diseños específicos para los mismos.

 La popularidad de dispositivos iPhone e iPad así como Android significa que tendrá usuarios que interactuarán todo el tiempo con su página a través de ordenes táctiles.

 

¿Quién puede decir que no disfruta de descargas gratis? Los diseñadores web han compartido por años su contenido, pero hasta hace poco esta práctica se ha hecho popular entre los artistas digitales. Han habido algunas comunidad específicamente creadas para ofrecer descargas de diseños web y gráficas.

Dos de mis favoritas son Dowload PSD y Designmoo, ambas son actualizadas frecuentemente por miembros de alta calidad. Adicionalmente los Hongkiat Freebies archive tienen una amplia gama para revisar. En épocas anteriores nunca, literalmente, ha sido tan fácil descargar interfaces web, logos, banners, temas y prácticamente cualquier tipo de archivo PSD/AI gratis.

Algunas muy buenas descargas

 A continuación encontrará algunas de las más interesantes descargas de principios del 2011. Y si cree que esta lista tiene buenos archivos, espere para ver que trae el 2012. 

 

Ambos de estos arquetipos de diseño han acumulado muchos seguidores durante el 2011. Los diseñadores semánticos de la web han esperado años para producir diseños CSS sólos con esquinas redondas y caída de sombras. Adicionalmente W3C ha avanzado mucho en el soporte para los buscadores más populares.

Sólo puedo ver buenas cosas para el futuro desarrollo web de HTML5/CSS3. Los diseños Front-end son comúnmente pasado por alto hoy día, sin embargo son de gran importancia para toda la composición del proceso. Trate de no encasillarse en cualquier técnica que sabe y practica diariamente. Le ofrecemos una guía para principiantes si cree necesario ponerse al día.  how-to guide for HTML5/CSS3 coding 

 Mantenerse con estos nuevos estándares permitirán que el desarrollo en JavaScript y jQuery sean más fáciles. Los desarrolladores han estado publicando y compartiendo sus códigos de proyectos HTML5/CSS3 en el internet, y si las cosas continúan así definitivamente veremos más cosas para este año. 

 

A pesar que está técnica de diseño no es exactamente “nueva”, realmente nunca tuvo un gran auge hasta hace poco. Probablemente ha visto ejemplos de cintillos, banners de búsqueda y pequeñas cintillos con insignias. Estas tendencias probablemente explotaron debido a la gran cantidad de tutoriales que se pueden encontrar en Google.

Los diseñadores web son más eficaces hoy día en lanzar sus propios blogs para compartir esta información. Ahora técnicas simples pueden compartirse entre diseñadores para duplicar los efectos más populares. Incluso hay psd. gratis que puede descargar para ahorrarse el esfuerzo.

 

La versión final de WordPress 3.0 incluye un host de características esperadas por mucho tiempo como tipos de mensajes personalizados e imágenes únicas de artículos. Sin embargo, los cambios más profundos que he visto se están dando desde las tiendas de desarrolladores de WordPress que se especializan en temas de WordPress Premium.

Después de comprar cualquier tema el proceso de instalación es similar a cualquier otro. Sin embargo ahora es posible incluir funciones personalizadas de plug-in, temas para niños, nuevos menús para administradores y muchas otras características que se pueden encontrar directamente en el tema. WooThemes, ElegantThemes y Rocket Themes son algunas de las marcas que sobresalen para mí en comparación con el resto. La calidad es implacable y siento que sus desarrolladores van más allá para crear las mejores plantillas y los más intuitivos menús para administradores.

En el 2012 sólo puedo imaginarme que utilizar WordPress será mucho más fácil. Esto significa lanzamiento de temas de mayor calidad, así como blogs.

 

Hablando de temas en WordPress es importante mencionar el rápido éxito que han tenido las revistas en línea. Estos sitios no son tan diferentes de cualquier blog genérico de WordPress con la salvedad de su estructura general y la vista de las secciones.  Puede reconocer a las revistas más grandes por la presentación de su página de inicio y los autores que escriben para las mismas.

Con el movimiento de la revistas hacia el ámbito online estas se convertirán en una fuente de ingresos para mucho escritores. Por supuesto, un tema como diseño web tendrá un nicho más pequeño que por decir, juegos o economía.

 

Como una faceta de CSS3 ahora es más fácil para los diseñadores implementar drop shadows en cualquier página. Han sido asignadas las respectivas propiedades para cuadros de texto y estilos para hacer más claros los efectos de las sombras.

La sintaxis para la sombra de texto es muy fácil de memorizar y seguir junto con la sombra del cuadro de texto. Las imágenes ahora son innecesarias en la presentación de estos efectos, por lo que ahora los desarrolladores web pueden centrarse más en la expansión de estas ideas básicas. Personalmente me gusta Matt Hamm´s page curls que fueron desarrolladas en su totalidad con CSS3. Puede encontrar el código en su sitio web para duplicar el efecto e implementar un estilo similar en su página.

 

La tipografía es una gran parte de la esfera que abarca la tradición del diseño web. Las más notables con Arial, Helvetica, Georgia y Trebuchet MS. Aunque continúan sirviendo un profundo propósito en los estándares web, hay muchas alternativas tipográficas para sitios web avanzados.

Typekit por ejemplo sólo requiere de unas cuantas líneas de códigos para poder ser incluidas en el documento. Después de esto se puede especificar que tipos de nombres de fuentes incluir y añadir dentro de su CSS. La mejor parte de está técnica es que se basa mayormente en JavaScript por lo que el usuario final no debe tener este tipo de fuentes instalados.

 Otra alternativa es Google Web Fonts que es muy similar a Typekit. Le recomiendo a los diseñadores interesados revisar CSS3 @font-face ya que brinda más creatividad. Este código puede ser usado para importar archivo de fuentes de formatos .ttf o . otf desde su servidor web e incluirlo como un estilo de fuente usable. Con tantos sistemas alternativos para crear fuentes dinámicas espero que el 2012 traiga una ola de innovación y talento en esta área.

 

Con la popularidad subsecuente de jQuery he detectado más y más presentaciones de imágenes insertadas en los páginas web. Las galerías son perfectas para demostrar una vista rápida del contenido interno del sitio. Esto puede ser una serie de imágenes de portafolio, fotografías, blogs con imágenes, demos, etc.

Cuando considera la cantidad de animaciones para las dispositivas nunca ha sido tan fácil crear una presentación para su página de inicio. Estoy seguro que en el 2012 veremos un crecimiento en estas tendencias, y no sólo entre diseñadores. Las aplicaciones online para sitios web y las compañías de software han estado utilizando presentaciones como guías tutoriales para mostrar imágenes y características únicas de su producto. 

 

Siento que los cajas flotantes son todavía muy nuevos para Internet, considerando que han aparecido en el software de escritorio y aplicaciones móviles por años. El propósito de una ventana cajas flotantes es ofrecer un cuadro de texto (como registro de usuarios o inicio de sesión) en la página actual sin la necesidad de cargar una nueva página.

Muchos de los scripts de las galerías de imagen abierta utilizan un tipo de efecto de luz donde el fondo se hace más obscuro que el popup. Realmente disfruto de este efecto cuando lo miro, aunque todavía debe ser adoptado por muchos. Y aunque los lightbox son sexys y elegantes, son muy difíciles de codificar y hacerlos funcionar correctamente.

Para obtener ideas para su propia web revise algunas de las comunidades sociales más populares. Reddit y Digg son las primeras que me vienen a la mente ya que ambas presentan lightboxes para registrarse e iniciar sesión con una layout típico. Adicionalmente los efectos UI para Google+ cuentan con una considerable cantidad de funcionalidades para lightbox. 

 

Colecciones de listas de artículos han aparecido desde los inicios del diseño web. Mientras nos acercamos al nuevo siglo los diseñadores empezaron a utilizar las listas ordenadas y desordenadas para menús en HTML. Pero ahora las listas son y están siendo utilizadas para mucho más.

En la mayoría de los temas para blog encuentro que toda la barra del lado está cargada con listas. Sin mencionar a diseñadores que han elaborado increíbles estilos CSS para listas en sus artículos. Hablamos sobre los estilos de las listas de inspiración en un artículo anterior que le puede explicar más sobre el tema. Espero que en el 2012 encuentre algunos ejemplos creativos.

 

En el universo de la web estamos de acuerdo que el contenido es el rey. Pero la mayoría de diseñadores también están de acuerdo que una página con contenido en blanco puede ser muy aburrida. Las imágenes pueden agregar un elemento extra si se sabe como utilizarlas. Un método es utilizar miniaturas dinámicas para proveer vistas previas para cada página o artículo.

Los blog hoy día continúan adoptando las imágenes y características de tendencia, así que ¿por qué no aplicar estas miniaturas ya generadas en su tema? Estos a menudo atraen más atención hace el encabezado del artículo y ayudan a romper la vista de una página cargada de enlaces.

Otro ejemplo es Dribbble, que provee una galería de miniaturas para cada diseño. En este estilo es muy fácil ver cada miniatura y desplazarse para encontrar la que busca. Se ha comprobado que esta táctica ha atraído la atención de toda la comunidad de diseñadores. Bueno, por lo menos a los miembros de Dribbble. Sólo espero que en el 2012 veamos mayor esfuerzo de estas ideas. 

 

Esta única tendencia se semi-originó de la popularidad de los diseños de gran tamaño del sistema OS X de Mac. Conforme los programadores empezaron a lanzar sitios para sus aplicaciones de Mac hemos visto frecuentemente las enormes imágenes de las marcas representadas en estos sitios. Esta tendencia también ha sido tomada en cuenta por los desarrolladores de iOS y ahora descansa cómodamente en la cultura moderna del diseño.

Es difícil predecir como estas tendencias se comportaran durante el 2012. Por un lado, estos íconos pueden ser torpes y ocupar más especio del necesario. Por otro lado no estamos ni cerca de quedarnos sin aplicaciones para iOS/OSX y los diseñadores todavía siguen produciendo íconos perfectos por medio de pixeles. Sin mencionar que los diseñadores web ahora están incluyendo iconos de gran tamaño en casi cualquier página. Es una buena manera para direccionar la atención de los usuarios y crear un nombre para su empresa. 

 

Los vínculos de anclaje están con certeza entre el top cinco de los elementos más importantes dentro de un sitio web. Estos obviamente han recorrido un largo camino desde la década de los 90 y los diseños han ido creciendo exponencialmente. Parece ser que nos estamos moviendo hacia una era en donde los diseños exagerados tienen prioridad.

Revise algunos de los ejemplos de Patterntap para ver si alguno le llama la atención. Hay tantas increíbles ideas para el diseño de hipervínculos, tanto estándar como con efectos. Las esquinas redondas, las sombras en los textos y la personalización de familias de fuentes por parte de CSS3, agregan aún más ideas. Uno de mis ejemplos favoritos es de SimpleBits que utiliza una corta dinámica de animación en cada una de sus entradas. 

 

Link de referencia: http://www.hongkiat.com/blog/web-design-trend-2012/