Diciembre está aquí y parece que finalmente estamos terminando 2011. Ha sido un año lleno de nuevas y emocionantes vanguardias para la web. CSS3, HTML5 y el diseño responsivo fueron los temas más discutidos. También marcamos el paso de los viejos caminos. Flash, Silverlight y complementos propietarios similares recibieron un asalto total en 2011, del cual nunca se recuperarán.
Para finalizar el año con una retrospectiva informativa, recorrimos la web en busca de patrones y tendencias que surgieron o se hicieron cada vez más populares a lo largo de 2011. Sigue a lo largo de más de cincuenta sitios web en un intento de detectar trucos y temas similares. ¡Le garantizo que será difícil de leer sin detectar algunas tendencias que aprovechó en sus propios proyectos este año!
Top Trend: Diseño responsivo
En 2010, Ethan Marcotte acuñó el término. Diseño de respuesta y escribió un artículo esclarecedor y persuasivo al respecto en A List Apart. A mediados de 2011, Responsive Design había despegado por completo como la nueva tendencia más novedosa en diseño web.
Esta no es una mera moda de estilo como las demás en esta lista, es un nuevo enfoque para crear contenido en la web destinado a crear la mejor experiencia posible para el máximo número de dispositivos. Si bien algunos diseñadores rechazan esta idea como un trabajo adicional, un número cada vez mayor va tan lejos como para decir que si su sitio no responde, lo está haciendo mal.
Aquí en Design Shack no hemos sido ajenos al tema de diseño responsivo este año, aquí están algunos de los artículos que hemos publicado sobre el tema:
- 20 ejemplos asombrosos del uso de consultas de medios para un diseño web responsivo
- Consideraciones prácticas de diseño para sitios receptivos
- Cómo construir un marco de Frankenstein sensible con MENOS
Fácilmente podría proporcionarle más de cien ejemplos de diseños receptivos que han surgido este año, pero muchos otros ya han trabajado duro durante meses para recopilar dichas colecciones. Mi galería de diseño de respuesta favorita actual es Media Queries, ¡que tiene más de 200 ejemplos!
Diseño responsivo definitivamente se destaca como la Tendencia de diseño de 2011, pero también hay otras tendencias mucho más pequeñas que vale la pena echar un vistazo. Lo siguiente representa algunos que he notado.
Líneas puntedas
Las líneas discontinuas recibieron una creciente atención por parte de los diseñadores en 2011. Aunque ocasionalmente son rectas, el caso de uso más típico es un camino sinuoso y sinuoso que atrae su atención y lo lleva a donde el diseñador desea que vaya.
He mencionado esta tendencia en varios artículos este año como una excelente manera de lograr una semejanza con el orden en un diseño orgánico. Proporciona la manera perfecta de convertir el caos en una línea de pensamiento fácilmente transitable.
Fundador de fondos
¡Sí!
Boo Bebe
Quartier Vier
AskLela.org
Círculos
Dudo en mencionar esto simplemente porque no estoy seguro de que pueda referirse a una forma básica como una tendencia de diseño. Después de todo, los círculos siempre han estado presentes en todos los tipos de diseño y siempre lo estarán.
Sin embargo, definitivamente noté un aumento en el uso de círculos como elementos primarios de diseño. Es muy evidente que muchos de los diseñadores a continuación eligieron intencionalmente los círculos como el quid de su tema y se construyeron a partir de esa idea simple pero elegante. El resultado es a menudo de naturaleza bastante orgánica, pero como se puede ver a continuación, varios de los diseños aún están bastante estructurados y usan círculos dispuestos en línea recta simplemente como una alternativa a la antigua miniatura del rectángulo.
Carnette
Lisi Design
Boceto de pistacho
Fundación TaosPuso
Taller de inglés Aprendizaje de idiomas
Protección del aire
Agncia iSee Grupo Interactivo
Descodificar
Diseño elegante
Rakesh
YO SOY ZAM
En mi burbuja
Limpio, sofisticado tipo retro
Estoy empezando a pensar que lo retro es una tendencia que nunca morirá. Siempre recordaremos los estilos de diseño de épocas pasadas con interés y nostalgia. La revelación realmente interesante es que los estilos de diseño moderno y retro realmente evolucionan juntos.
En años pasados, los diseños retro y específicamente la tipografía a menudo implicaban un aspecto muy sucio y angustiado, como el que se esperaría ver en una camiseta Old Navy. Sin embargo, a medida que los diseños limpios y mínimos comenzaron a afianzarse en el diseño moderno, el diseño retro dio un salto similar hacia la sofisticación. Estos días la tipografía retro es elegante y limpia, sin angustia. Las sombras casi siempre están presentes y están completamente vacías, muchas de ellas se componen de líneas diagonales o algún otro patrón simple en lugar de un color sólido.
Big Bite Creative
Fábrica de cerveza
Urbanoff
Noltedesign
Cintas
El elemento de diseño más importante en 2011 tiene que ser la cinta colgante vertical. Esto surgió absolutamente en todas partes como una forma muy bien integrada de sostener un logotipo, ícono o texto, mientras lo ayuda a destacar sobre el fondo.
La forma típica tiene dos puntos triangulares en la parte inferior, pero los diseñadores han experimentado con todo tipo de metáforas de cinta. Un ejemplo a continuación incluso toma una forma de cinta familiar y le da un giro inesperado al convertirlo en el bolsillo de una camisa.
Cambiar Nación
GiveBeyond.Me
Comunidad tao
Desafío del tazón de fuente rojo
Marisco gallego a domicilio
LoadUp 2012 por PuddleDrop
DigitalSafe
Anhalter des Jahres 2011
Perilla Joe
Jopp
Domingo mejores sitios web
HarryFord
Estudios de cocina en el fregadero
Tres cosas
Cada diseñador sabe que tres es un número mágico y esto fue muy evidente en el diseño web este año. Una técnica de diseño muy popular que se ve una y otra vez utiliza tres secciones u objetos prominentes para transmitir un proceso, una lista de características u otro concepto.
Realmente me gusta esta tendencia porque obliga al diseñador a simplificar la información presentada al usuario y dividirla en algunos fragmentos fácilmente digeribles. El resultado es a menudo una página muy atractiva que parece informativa y bien equilibrada.
Tabspresso
Casa del árbol
Shady Acres
Sellfy.com
Papel rizado / doblado
La sombra paralela ha evolucionado. Este truco de diseño utiliza la simple ilusión de una sombra curva para hacer que el objeto plano, por lo demás, se vea como papel enroscado. Es una mentira tan creíble que incluso cuando sabes lo que está sucediendo, es difícil hacer que tus ojos vean lo que realmente es un borde recto. La sombra instantáneamente hace que su cerebro perciba una curva, sin importar cuán recto sepa que es.
Es un efecto fácil de realizar ya sea en Photoshop o incluso en CSS. Aquí hay algunas páginas que usan esta tendencia efectivamente:
Alfabetización2030
Ediciones trimestrales
Trabajo verde
Rejillas sin fronteras
Otra tendencia visual en aumento es la desaparición de los bordes o márgenes en una cuadrícula de imágenes. Históricamente, más a menudo que no alineamos imágenes en una cuadrícula bien espaciada, pero en estos días es muy popular simplemente agruparlas todas juntas.
Me gusta mucho este aspecto porque le da a las imágenes separadas una sensación muy integrada. Es un ejemplo de sinergia en el trabajo donde el todo es algo mayor que la suma de las partes.
Fuzzco
Ignacio Macri
CARLOS5TO
ROA Produktion
Diseño diagonal
Nuestra tendencia de diseño final es la aparición de diseños de aspecto bastante caótico que aprovechan en gran medida las líneas diagonales. Espere ver que esta tendencia de diseño continúe en 2012. ¿Por qué? Porque representa un giro brusco lejos de los diseños limpios, fuertemente estructurados y mínimos que han permeado el panorama del diseño web en los últimos años.
Mirando hacia atrás a través de la historia, puede ver claramente que las tendencias de diseño son reactivas. Algo se vuelve genial porque es diferente de la norma, luego se vuelve tan popular que es la norma. Lo que una vez fue rebelde es ahora un lugar común, por lo que a alguien se le ocurre una respuesta que representa una salida clara. Por ejemplo, la moda mínima que acabo de mencionar surgió como una respuesta al diseño excesivamente loco, desordenado y colorido de la década de 1990 (consulte: Guardado por la campana). La tendencia diagonal actual se remonta a estos días al tiempo que mantiene una sensación atractiva y sofisticada.
Bleep-Radio
Piropixel
Festival de Kikk 2011
David Kopec
Centro Comercial Marshes
Wixel
Diseñador Gleb
¿Qué hemos echado de menos?
Esto representa solo un puñado de las muchas tendencias populares de diseño web en 2011. Ahora es su turno de ayudar. Deje un comentario a continuación y cuéntenos sobre cualquier tendencia que haya notado o que haya participado durante el año.
¿Qué tendencias fueron tus favoritas? Que odias Si es posible, ¡deja un enlace y muéstranos un ejemplo!