El estado de las tendencias de diseño web Edición anual 2011

2010 ha sido un año increíblemente verde para los diseñadores web. Mobile ha llegado a la corriente principal; La tipografía web ha alcanzado nuevos niveles de sofisticación; Las nuevas técnicas de codificación han mejorado enormemente nuestra capacidad para ser creativos con el diseño (sin comprometer la estabilidad). En general, ha sido un año que se ha movido rápido, incluso para los estándares de la web, por lo que vamos a profundizar en nuestra primera publicación anual que cubre el estado del diseño web cuando 2010 se convierta en 2011..


La muerte del doblez

El tradicional "pliegue" (la línea imaginaria en una pantalla que designa qué contenido es visible antes de que el espectador deba desplazarse) se volvió vago, sin importancia y casi irrelevante en 2010.

¿Por qué? Debido a que la "pantalla" tradicional a través de la cual la gente ve la web ha sufrido una explosión de variedad ... ya no podemos esperar que los internautas estén en algo cercano a un monitor de 19 "con una resolución de entre 1024x768 y 1280x700. Todas las formas y tamaños, desde iPhones (y teléfonos más pequeños) a HDTV de 60 ". Sin embargo, no solo la resolución puede variar enormemente; La relación de aspecto de una pantalla (incluso en el mismo dispositivo como el iPhone) puede cambiar con el movimiento de la muñeca. Claro, siempre se recomendará a los diseñadores web que mantengan los mensajes más importantes de un sitio cerca de la parte superior, pero con tantas nuevas formas para que los internautas puedan ver la web, ya no hay una altura definida donde el contenido debe estar arriba..

Discutiremos este tema con mucho más detalle este mes, así que suscríbete (es gratis) para estar atentos :)


Sitios móviles

Los sitios se han diseñado para escenarios móviles desde el inicio de los dispositivos móviles ... pero 2010 ha visto un gran impulso hacia subsitios completos que están diseñados específicamente para ser vistos en pantallas pequeñas y de mano. Puede agradecer al iPhone por iniciar esta tendencia, pero la ola de sitios "mobificados" se está extendiendo como un incendio forestal ... y en esta misma época el año que viene, estoy seguro de que será difícil encontrar un sitio de publicación importante sin un sitio de compañero móvil.

Lo bueno de las pantallas móviles es que obliga a los diseñadores a ser creativos con una cantidad relativamente pequeña de bienes raíces. Tener éxito en el entorno móvil no es difícil si se tienen en cuenta algunas reglas: los mensajes deben transmitirse con mayor rapidez y eficiencia; Los enlaces deben estar diseñados para un entorno de pantalla táctil; y el texto debe ser legible (o, al menos, con zoom). Aquí hay algunos ejemplos de sitios móviles:

Puede leer MUCHO más sobre el diseño móvil en nuestro sitio asociado: Mobile.tutsplus.com!

Subtendencia: Sitios Tabletificados

Al igual que el 2010 vio una explosión de diseños de sitios móviles, se puede esperar que a medida que los consumidores compren tabletas con más frecuencia, los principales sitios web seguirán su ejemplo al crear sitios (y aplicaciones) diseñados específicamente para un entorno de pantalla táctil de tamaño mediano.


Una explosión tipográfica

Muy bien, supongo que podría hacer la afirmación de que "la tipografía explotará" cada año ... pero 2010 ha visto algunos cambios importantes en la tecnología subyacente que hacen que esta afirmación sea legítima. Principalmente, la enorme cantidad de crecimiento de la tecnología de reemplazo de fuentes en el último año y la adopción masiva de "fuentes como servicios" donde empresas de terceros alojan fuentes (y licencias) que los diseñadores pueden usar en entornos de desarrollo en vivo. También se podría decir que los diseñadores se están volviendo mucho más audaces con typogrpahy también ... con más y más diseños que están apareciendo últimamente y que borran la línea entre print-4design y web design..

Puede leer más sobre esto aquí para navegar por la amplia variedad de estas nuevas y sorprendentes soluciones de tipografía. Echemos un vistazo a algunos ejemplos (algunos usando reemplazo de fuente, otros usando otros métodos):

Subtendencia: Sitios inspirados en el diseño de impresión

Esto causó furor en 2009-2010, pero la "revolución de la impresión" está viva y bien en la web, y se están diseñando cada vez más sitios para imitar diseños de grandes impresiones, como revistas, carteles, folletos y más..


Aplicación de escritorio Influencia de la interfaz de usuario

Si yo fuera un apostador en 2009, habría puesto todo mi dinero en aplicaciones ... aplicaciones de iPhone, aplicaciones de Android, aplicaciones de PC, aplicaciones de PC ... el entorno del software parece haberse vuelto completamente loco en el último año o dos . Toda esta emoción sobre la creación de aplicaciones se ha filtrado en el estilo de léxico del diseño web de una manera interesante: donde una vez la web se veía, bueno, como un sitio web, hoy en día a menudo se parece más a una aplicación. Todo, desde ventanas modales, menús contextuales, botones inspirados en el sistema operativo, y más, se incorporan al entorno de diseño web de formas nuevas y emocionantes ... el resultado final: sitios que se sienten más amigables y naturales..


Grilla de diseños intensivos

Los diseños de cuadrícula no son nuevos en 2010 (ni siquiera en 1980), pero los diseñadores web están comenzando a separarse de los diseños web tradicionales (encabezado, columna de contenido, barra lateral, pie de página) en favor de diseños más únicos y controlados por cuadrícula. Lo que comenzó con el movimiento 960.gs se extendió rápidamente a los sistemas de cuadrícula que pueden realmente adaptarse a la resolución de pantalla de los espectadores..


Imágenes masivas

Aquí hay otra tendencia que ha estado ocurriendo por más que este último año. Las imágenes masivas fueron una vez tabú para los diseñadores web, pero gracias a una mejor optimización de la imagen, conexiones más rápidas a Internet y métodos de carga más inteligentes, los diseñadores pueden ganar mucho en algunos sitios al aumentar el tamaño de las imágenes al máximo..

Más que solo "imágenes grandes", estamos empezando a ver más tendencias hacia sitios que utilizan vastos fondos ilustrativos (y fotográficos) que son parte de la experiencia real, ya que son simplemente ilustraciones adicionales..


Integración Script Inmersiva (jQuery Sliders, etc.)

Los complementos codificados solían ser una idea de último momento en la mayoría de los diseños web ... usted terminaría una maqueta y luego reemplazaría una imagen con un control deslizante si pudiera encontrar un gran complemento. Hoy en día, los diseños completos pueden basarse en scripts y complementos que hacen más que "agregar algo" a un diseño ... Pueden definir toda la experiencia del sitio web..

Aquí hay solo un par de ejemplos de sitios que no solo agregan interactividad de script, Lo hacen la base del sitio.:

Puede leer mucho más sobre jQuery y otros trucos de integración de scripts en nuestro sitio asociado: Net.tutsplus.com!


CSS3 golpea la corriente principal

Si tuviera un centavo por cada artículo de CSS3 que vi en 2010, estaría nadando en un grupo de ellos. Si bien la adopción masiva de CSS3 aún está un poco lejos (aquí hay un enlace útil para ver qué navegadores han adoptado qué partes de CSS3), los diseñadores no han dudado en comenzar a usar algunas de las fantásticas características nuevas. Todo, desde esquinas redondeadas, sombras de cuadros, efectos de brillo, animación CSS3, @ font-face y más, ha comenzado a aparecer en diseños por todos lados. Aquí hay algunos ejemplos:

Puedes leer mucho más sobre los trucos de CSS3 en nuestro sitio asociado: Net.tutsplus.com!


Textura, Textura, Textura

Las texturas no son nuevas, pero a medida que pasa el año vemos que se integra de formas nuevas e interesantes. El 2010 vio gran parte de la textura del "ruido sutil", pero más que nada, estamos comenzando a entrar en una fase de estilo donde más diseños comienzan a sentirse "tocables". Esto no significa necesariamente que se estén utilizando grandes texturas de archivos pesados ​​... en cambio, estamos viendo texturas más sutiles y bien diseñadas que se repiten naturalmente.


Diseños impulsados ​​por infografía

Siempre he sido un gran fanático de la infografía, así que es bueno que comencemos a ver que se integran en los diseños web como algo más que adjuntos. Creo que hay muchas oportunidades para nuevas y emocionantes formas de integración de sitios de infografía, así que esté atento a estos diseños en 2011.


Sitios de una sola página


Entornos 3D

Esto es más una novedad que una tendencia ... Los sitios basados ​​en 3D son divertidos de usar, pero no son completamente accesibles desde algunos navegadores y dispositivos. Dicho esto, hay cosas nuevas y divertidas que ocurren en entornos tridimensionales, por lo que vale la pena echarle un vistazo, incluso si no las verás en tu iPhone pronto;)


Convergencia de las redes sociales

La última tendencia que voy a mencionar no es una que requiera muchas capturas de pantalla ... principalmente porque el cambio es más estrategia que sustancia. Si bien esta tendencia ha estado ocurriendo durante años, las cosas parecen estar llegando a un punto crítico en este momento ... y el destino del futuro de Internet se decidirá..

De lo que estoy hablando es "convergencia de las redes sociales", o, más bien, el patrón de marcas y negocios que centran sus esfuerzos en los sitios de redes sociales (en lugar de sus propios sitios independientes). En lugar de dominios individuales, estamos empezando a ver que más y más empresas se están moviendo hacia estrategias que se basan en sitios como Facebook o, al menos, están integrando características sociales de una manera que depende 100% de los sitios de redes sociales..

... en lugar de una Internet compuesta por millones de sitios diferentes y únicos, podríamos terminar con un puñado de "mega sitios" en los que todos (individuos y empresas) simplemente tengan una página en ...

Esto tiene sentido para una serie de empresas; es mucho más fácil hacer que las personas descubran y visiten tu página de Facebook o Twitter que hacer que tropiecen con tu propio dominio (por ejemplo: myownawesomewebsite.com/me). Los ganadores de esta tendencia son, por supuesto, los grandes sitios de redes sociales que reúnen cada vez más tráfico. ¿Los perdedores? Bueno, si esta tendencia continúa, los perdedores podrían ser cualquiera que no se suba al carro ... así que en lugar de una Internet compuesta por millones de sitios diferentes y únicos, podríamos terminar con un puñado de "mega sitios" que todos (individuos y empresas) simplemente tengan una página en.


Que comience la discusión!

Muy bien, así que acabo de llegar a la punta del iceberg por todas las grandes tendencias que están ocurriendo en 2010, y seré el primero en admitir que estoy seguro de que me he perdido algo. Publique sus comentarios, pensamientos, tendencias y cualquier otra cosa en la sección de comentarios y tendré en cuenta cualquier comentario realmente bueno cuando llegue el momento de editar esta publicación más adelante.!

Feliz 2011!