Las tendencias en diseño web pueden cambiar y desaparecer casi tan rápido como se ponen de moda. Pero en lo que va de 2013, parece que un puñado de tendencias han tomado el diseño web por sorpresa, y parecen mantenerse.
Hoy, examinaremos diez tendencias en elementos web modernos y mostraremos algunos ejemplos excelentes de cada uno: todo, desde tipografía y círculos clásicos, hasta colores vibrantes y vCards útiles. Aún mejor para usted es que todos los ejemplos a continuación están disponibles para descargar (algunos gratuitos, otros pagados).
1. tipografía vintage
El estilo grande y audaz de estilo retro es extremadamente popular en este momento. El estilo funciona de maravilla para proyectos en los que carece de imágenes fuertes, o en combinación con imágenes nítidas al crear interés con las letras.
Esta tendencia es una que ha existido durante bastante tiempo y parece que nunca envejece. Lo que cambia es la forma en que vemos que se usa el estilo de tipo clásico.
En este momento, la tipografía vintage suele ser un punto focal en un esquema de diseño minimalista. Además, los diseñadores están realmente jugando al estilo vintage y muy poco color, como las paletas en blanco y negro o un puñado de colores apagados. (Hace unos años, la tipografía vintage era popular en combinación con colores llamativos).
Insignias tipográficas retro y distintivos: Con seis estilos, todos con tipos de letra gratuitos, crear el aspecto vintage nunca ha sido tan fácil. Cada estilo también viene con una imagen de fondo de coordinación. ($ 5)
2. Efectos realistas
Mientras que el debate entre el plano y el skeuomorphism continúa enfureciéndose, los diseñadores aún están adoptando efectos tridimensionales y reales. Desde sombras, a esquinas elevadas, a texturas, al igual que muchos diseñadores todavía están usando estas técnicas. (Aunque la mayor parte de la conversación se centra en los méritos del diseño plano).
La clave para un buen conjunto de efectos realistas es la sutileza. Los efectos deben reflejar la realidad. Las sombras deben seguir los patrones de luz en el diseño, los biseles deben agregar textura y los gradientes deben cumplir un propósito.
Sombras realistas de la web moderna: Este kit contiene elementos con bordes elevados, sombras y efectos 3D. ($ 6)
3. Color vibrante
El diseño plano ha inspirado muchas tendencias secundarias, incluido el uso de paletas de colores brillantes con más tonos de lo que algunos diseñadores están acostumbrados. Las tendencias ahora son las paletas de colores súper brillantes, vibrantes y saturadas para el diseño web y las aplicaciones. En lugar de seleccionar dos o tres colores sobre los que construir, los diseñadores están creando amplias paletas de colores con más de cinco colores.
Estas paletas tienden a usarse en una de dos formas: gran cantidad de colores brillantes en todo el diseño. Piense en un tono de rojo, amarillo, naranja, azul, verde y púrpura, además del blanco y negro. O estas paletas se centran en tintes de un solo color vibrante. Ambas opciones son especialmente populares.
El color vibrante emana un tono que los diseñadores deben tener en cuenta. Mucho color intenso puede parecer ligero y divertido, y podría no funcionar para algunos tipos de proyectos. El color vibrante de estilo monótono es más atenuado.
Colores de uiGo: El kit de IU de iOS plano contiene una variedad de elementos en el estilo plano, usando mucho color. ($ 8)
4. Cintas
Las cintas son un elemento que los diseñadores han usado durante mucho tiempo. Pero parecen estar haciendo una especie de regreso. Especialmente popular en los diseños de sitios de una página, las cintas son la herramienta para anuncios simples, como "¿Próximamente?" - o para mostrar un premio o reconocimiento.
80 cintas web premium: Este kit de cintas contiene cintas en casi todas las formas, formatos y direcciones que pueda imaginar, con opciones de colores personalizables. ($ 2)
5. Iconos planos
Con la plana como la principal tendencia de facto de 2013, la mayoría de los diseñadores están aprovechando la posibilidad de usarlo de alguna manera. Los iconos son una de las opciones más populares debido a su flexibilidad. Un diseñador puede usar elementos planos en combinación con otros "menos planos". Elementos en el diseño general del sitio, algo que se está volviendo cada vez más común a medida que el diseño plano se extiende a "diseño casi plano".
Además de los iconos planos, los botones planos también son populares para los diseñadores que buscan incorporar un toque de la tendencia a los proyectos. Incluso Yahoo incluye botones e íconos de estilo plano en el marco de su sitio, que no es innato plano.
Iconos de clima plano: Nueve iconos meteorológicos simples y bien dibujados. ($ 3.99)
6. Logotipos vintage o insignias
Los logotipos e insignias vintage imitan la tendencia de tipo vintage con una capa adicional de estilo. Las insignias son especialmente modernas cuando se trata de sitios que utilizan herramientas y efectos de gamificación. Estos logotipos simples no solo parecen clásicos, sino que el estilo simple puede ser fácil de crear y replicar de varias maneras. Solo se necesita un puñado de tipografías agradables y formas básicas.
La tendencia actual, como la tipografía vintage, se centra en los efectos mínimos de estas insignias con poco color o estilo adicional. Formas fuertes y letras en negrita son populares.
Insignias Vintage Logo Set: Este paquete contiene ocho logotipos de dos colores de estilo vintage diferentes. La variedad de estilos incluidos ofrece mucha flexibilidad. ($ 4)
7. Tarjetas
Aunque muchas de las tarjetas o mosaicos de sitios web que estamos viendo no están necesariamente diseñadas en un estilo plano, han evolucionado desde el concepto de diseño plano de metro.
Estas cajas simples se están utilizando de varias maneras. Las tarjetas o mosaicos también son una técnica popular para organizar contenido en proyectos de diseño receptivo porque se organizan y apilan muy bien en una variedad de tamaños.
Una vez que se diseña un estilo, es fácil usarlo de otras maneras. Tarjetas para información de contacto (casi con una apariencia de tarjeta de presentación digital), tarjetas para enlaces u otra información, tarjetas para resaltar carteras o imágenes. La tendencia funciona porque es muy flexible.
Interfaz vCard: Agregue una biografía, trabajo, información de contacto y enlaces a redes sociales en un formato de tarjeta simple.Este kit viene como una descarga de PSD o CSS. (Gratis)
8. círculos
Círculos, botones y diales han hecho una reaparición real. Mientras que muchos diseñadores se han alejado de formas redondeadas en el pasado, cada vez más círculos se están adoptando como una forma divertida de construir botones y otros elementos de la interfaz de usuario.
Parte del atractivo es que pueden diseñarse para que parezcan algo que se supone que debes tocar, imitando la acción de presionar un botón. Este concepto funciona de maravilla para el diseño móvil y de aplicaciones donde se espera que los usuarios toquen o toquen elementos para que algo suceda. El efecto también se está extendiendo a los sitios web de tamaño completo, controlados por escritorio.
Botón de compra simple: Anime a los compradores a realizar una compra con un botón de compra distinto. (Gratis)
9. Gradientes simples
La evolución del diseño plano a? Casi plano? ha puesto un nuevo énfasis en gradientes simples. Los diseñadores quieren el cambio de tono, pero quieren que sea súper sutil.
Este efecto funciona para fondos, botones, iconos y una variedad de otros elementos. Los gradientes simples a menudo no son molestos y pueden ser una buena forma de crear profundidad.
Conjunto de degradado CSS: Este kit contiene gradientes simples en ocho colores listos para usar como punto de partida para elementos más grandes o conjuntos de iconos. Disponible como descarga de PSD o CSS. (Gratis)
10. deslizadores
Cuando se trata de mostrar una fotografía o un portafolio, es difícil encontrar un sitio que no use algún tipo de control deslizante. (Cada vez más, también se están volviendo populares con el video). La mayoría de los controles deslizantes funcionan en un desplazamiento automático que los usuarios pueden detener o pausar y mostrar una imagen de pantalla grande e imágenes más pequeñas o botones que avanzan a través de las imágenes.
Los controles deslizantes funcionan con una variedad de otros estilos de diseño: el estilo presentado aquí tiene tres versiones que pueden funcionar para proyectos planos o skeuomorphic. Esta herramienta es una forma simple y efectiva de mostrar mucho trabajo, mientras se mantiene el dominio visual.
Limpia Sliders: Este kit contiene tres estilos para deslizadores de fotos sorprendentes y fáciles de usar y utiliza fuentes gratuitas. ($ 3)
Conclusión
Ver tendencias es una gran fuente de inspiración para el diseño web. Nada puede estimular la creatividad como ver otros procesos creativos en acción. ¿Qué otras tendencias emergentes conoces? ¿Que sigue? Comparte tus ideas en los comentarios.