15 tendencias de diseño web a tener en cuenta en 2012
Hasta ahora, el año 2011 ha traído algunos cambios sorprendentes en el diseño y la tecnología de Internet. El desarrollo web se ha convertido en un tema mucho más suave para saltar al aprendizaje, sin mencionar las innumerables bibliotecas de código abierto útiles para racionalizar el proceso. Y, sin embargo, parece que la comunidad de diseño global está lejos de tirar la toalla..
Quiero presentar 15 ideas que han crecido muy rápidamente en el último año. Estas tendencias abarcan las técnicas de diseño de gráficos y web que probablemente desempeñarán un papel importante en el proceso de 2012. Probablemente haya visto algunos de estos representados en muchos de sus sitios favoritos en línea..
Afortunadamente, los métodos para implementar estas funciones son cada vez más fáciles de entender y mucho más reducidos en código.
1. Diseño de interfaz sensible
La experiencia del usuario promedio es posiblemente el aspecto más importante a considerar al diseñar un sitio web. Desea que los elementos de la página respondan rápidamente a las entradas del teclado / mouse y se comporten como se espera. Algunos ejemplos pueden incluir menús desplegables laterales, cuadros desplegables y ventanas emergentes.
Incluyendo bibliotecas de JavaScript famosas como MooTools y jQuery, ahora es mucho más fácil animar estas funciones e incluso más. La mayoría de los navegadores modernos admiten este código e incluso se degradan cuando los scripts no están disponibles. En última instancia, desea que el usuario se sienta cómodo cuando interactúa con cualquier parte del diseño..
Del mismo modo, debe tener en cuenta la entrada de formularios y la verificación de datos. En muchas páginas de registro, recibirá pequeñas respuestas a medida que trabaje en cada área de entrada. Puede automatizar la comprobación de direcciones de correo electrónico válidas, nombres de usuario duplicados e incluso verificar las entradas de contraseña. Esto le ahorrará tiempo al usuario y proporciona una guía práctica durante todo el proceso de registro..
2. Dispositivos móviles con pantalla táctil
En los últimos años, se ha hecho evidente que los teléfonos inteligentes están ganando apoyo incluso entre los entusiastas que no son de la tecnología. Pero solo desde 2011 hemos visto una explosión de sitios móviles y plantillas específicas para dispositivos móviles..
La popularidad de los dispositivos iPhone y iPad junto con los teléfonos con Android significa que tendrá visitantes que interactúan completamente con sus páginas a través de comandos táctiles. Esto tiene que convertirse en una consideración realista con cada maqueta de diseño. Las tendencias en el diseño web móvil han demostrado que la creación de un tema móvil completamente separado a menudo proporciona los mejores resultados. De esta manera, puede mantener todo el contenido dinámico en su lugar en su diseño principal mientras sirve una versión reducida del sitio para usuarios móviles.
3. Toneladas de regalos!
¿Quién puede decir que honestamente no disfrutan de descargas gratuitas? Los diseñadores web han estado compartiendo su contenido en línea durante años, pero solo recientemente se ha convertido en una tendencia muy popular entre los artistas digitales. Se han construido algunas comunidades específicamente para ofrecer descargas gratuitas para diseñadores web y gráficos..
Dos de mis favoritos personales son Download PSD y Designmoo, los cuales se actualizan con frecuencia por miembros de alta calidad. Además, el archivo Hongkiat Freebies tiene un montón de golosinas dulces para revisar. En cualquier época anterior, literalmente, nunca ha sido tan fácil descargar interfaces web, diseños, logotipos, banners y prácticamente cualquier otro tipo de archivo PSD / AI.!
Algunas descargas ordenadas
A continuación, se incluyen algunos artículos interesantes que puedes ver a principios de 2011. Y si crees que esta lista tiene algunos archivos geniales, espera a que llegue el 2012.!
Mini Web UI Set
Dark Mini reproductor de música
Etiquetas deslizantes
Deslizador de foto oscura
Cuadros de búsqueda
Iniciar sesión / Iniciar sesión
Login Modal Box
Formulario de inicio de sesión limpio
Tablas de Precios
Barras de carga mínimas
Adjunto emergente
4. Normas HTML5 y CSS3
Estos dos nuevos arquetipos de diseño han acumulado un número cada vez mayor de seguidores a lo largo de 2011. Los diseñadores web semánticos han estado esperando años para producir diseños solo para CSS que muestren esquinas redondeadas y sombras. Además, el W3C ha avanzado mucho en la obtención de soporte de los navegadores más populares.
Solo puedo ver cosas buenas para el futuro del desarrollo web HTML5 / CSS3. Los diseñadores de aplicaciones para el usuario a menudo se pasan por alto en el campo de hoy, sin embargo, tienen una gran importancia para todo el proceso de composición. Trate de no meterse en ninguna 'etiqueta' de conjunto basada en las técnicas que conoce y practica a diario. Ofrecemos una guía de instrucciones para principiantes para la codificación HTML5 / CSS3 si siente la necesidad de ponerse al día..
Mantener estos nuevos estándares también hará que el desarrollo en JavaScript y jQuery sea mucho más fácil. Los desarrolladores ya han estado publicando y compartiendo su código de proyecto HTML5 / CSS3 en línea, y si las cosas continúan, seguramente notaremos mucho más al respecto el próximo año..
5. Cintas y pancartas.
Aunque esta técnica de diseño no es exactamente “nuevo” nunca se rompió realmente a través de la corriente principal hasta hace poco. Probablemente haya visto ejemplos de cintas de esquina, barras de navegación de banner y insignias de cinta pequeña. Estas tendencias probablemente han explotado debido a la acumulación masiva de tutoriales detallados que se pueden encontrar en todo Google..
Los diseñadores web son más competentes en estos días al lanzar sus propios blogs para compartir información. Ahora se pueden pasar técnicas simples entre los diseñadores para duplicar los efectos más populares. Incluso hay PSD gratuitos que puedes descargar para ahorrarte el esfuerzo.
6. Temas de WordPress Premium
La versión final de WordPress 3.0 incluía una serie de características tan esperadas como tipos de publicaciones personalizadas e imágenes de artículos únicas. Sin embargo, los cambios más profundos que he visto provienen de las tiendas de desarrollo de WordPress que se especializan en temas de WP premium.
Después de comprar tal tema, el proceso de instalación es similar a cualquier otro. ¡Sin embargo, ahora es posible incluir una funcionalidad de complemento personalizada, temas secundarios, nuevos menús de administración y muchas otras funciones desde el mismo tema! WooThemes, ElegantThemes y Rocket Themes son algunas de las marcas que más me destacan sobre el resto. Su calidad es impecable y siento que sus desarrolladores van más allá para crear las mejores plantillas y los menús de administración más intuitivos..
A partir de 2012, solo puedo imaginar que WordPress será aún más fácil de usar. Esto significa que se lanzarán más temas de alta calidad y se lanzarán más blogs sorprendentes..
7. Revistas en línea
Hablando sobre temas de WordPress, también deberíamos mencionar el éxito rápidamente adoptado de las revistas en línea. Estos sitios web no son tan diferentes de cualquier blog genérico de WordPress aparte de la estructura general y el diseño de la página. Puedes ver estas revistas más grandes por la presentación de su página de inicio y la colección de autores que escriben para el sitio..
A medida que las revistas comienzan a moverse en línea, se convertirán en una fuente de ingresos para muchos escritores. Concedido un tema como 'diseño web' se dirige a un nicho más pequeño que, por ejemplo, los juegos o la economía. Pero el hecho de que estemos viendo más revistas de diseño en línea que impresas sirve para mostrar hacia dónde se dirige el mundo en los próximos años..
8. Easy Drop Shadows
Como faceta de CSS3, ahora es más fácil que nunca para los diseñadores implementar una sombra paralela en cualquier lugar de la página. A los elementos de estilo de cuadro y texto de cuadro se les han otorgado propiedades respectivas para representar efectos de sombra claros.
La sintaxis de la sombra de texto es muy fácil de memorizar y sigue como cuadro de sombra. Ahora que las imágenes ya no son necesarias para representar estos efectos, los desarrolladores web pueden concentrarse en expandir aún más estas ideas básicas.
9. Tipografía dinámica.
Las fuentes son una gran parte de la esfera que abarca la tradición del diseño web. Las fuentes más notables, incluyendo Arial, Helvetica, Georgia y Trebuchet MS han existido desde hace años. A pesar de que continúan cumpliendo un propósito profundo en los estándares web, hay muchas opciones alternativas para la tipografía avanzada de páginas web..
Typekit, por ejemplo, solo requiere que se incluyan un par de líneas de código en el encabezado de su documento. Después de esto, puede especificar qué nombres de fuente incluir y agregarlos a su CSS. La mejor parte de esta técnica es que se basa principalmente en JavaScript, por lo que el usuario final no necesita tener las fuentes instaladas.
Otra alternativa es Google Web Fonts, que se comporta de manera similar a Typekit. Recomiendo a los diseñadores interesados que consulten la consulta de medios @ font-face de CSS3, ya que se les da mucha más creatividad. Este código se puede utilizar para importar un .ttf o .otf archivo de fuentes de su servidor web e inclúyalo como una fuente de hojas de estilo utilizable! Con tantos sistemas alternativos utilizados para crear fuentes dinámicas, espero que el 2012 tenga una oleada de innovación y talento de diseño en esta área.
10. Galería de imágenes presentaciones de diapositivas
Con la popularidad subsiguiente de jQuery, he visto cada vez más presentaciones de diapositivas de imágenes que se han colocado en los diseños web. Las galerías son perfectas para demostrar un vistazo rápido del contenido de la página interna. Esto podría ser un conjunto de entradas de cartera, fotografías, publicaciones de blog con imágenes destacadas, capturas de pantalla de demostración, etc..
Cuando considera las muchas animaciones únicas que se deslizan y se desvanecen, nunca ha sido tan fácil crear una presentación de diapositivas rápida para su página de inicio. Estoy seguro de que 2012 verá un aumento en estas tendencias, y no solo entre los diseñadores. Las aplicaciones web y las compañías de software en línea han estado utilizando presentaciones de diapositivas como tutoriales guiados para mostrar capturas de pantalla y características únicas.
11. Cajas emergentes modales
Siento que las cajas modales son todavía bastante nuevas en Internet, considerando que han estado apareciendo en el software de escritorio y las aplicaciones móviles durante años. El propósito de una ventana modal es ofrecer contenido de cuadro (como registro de usuario o inicio de sesión) en la parte superior de la página actual sin cargar en uno nuevo.
Muchos de los scripts de la galería de imágenes de código abierto utilizan un tipo de efecto lightbox donde el fondo se oscurece más que el cuadro emergente. Realmente disfruto esta característica cada vez que la veo, aunque aún no ha sido adoptada por muchos. Y aunque las cajas modales son atractivas y elegantes, también pueden ser muy difíciles de codificar y trabajar correctamente.
Para obtener ideas para sus propios sitios web, consulte algunas de las comunidades más populares para compartir noticias sociales. Reddit y Digg son los primeros dos que vienen a la mente, ya que ambos cuentan con cuadros modales de registro / inicio de sesión con un diseño típico. Además, los efectos de IU para Google+ cuentan con una cantidad considerable de funcionalidad modal.
12. Listas de inspiración
Las colecciones de elementos de la lista han aparecido desde los primeros días del diseño web. A medida que avanzamos en el nuevo siglo, los diseñadores comenzaron a utilizar listas ordenadas y desordenadas de HTML para alojar los menús de navegación. Pero hoy en día las listas pueden y están siendo usadas para mucho más..
En la mayoría de los temas del blog, encuentro que toda la barra lateral está cargada con listas. Sin mencionar a los diseñadores que han creado impresionantes estilos CSS para listas en las entradas de sus artículos. Cubrimos estilos de listas inspiradoras en otra publicación a principios de este año, lo que puede brindarle más información sobre el tema. De cara al 2012, espero algunos ejemplos realmente creativos, posiblemente a la par con el diseño personalizado de Flowapp para tareas y tareas pendientes.
13. Miniaturas de imagen generadas
En el universo web podemos estar de acuerdo en que el contenido es el rey. Pero la mayoría de los diseñadores también estarán de acuerdo en que una página de texto en blanco se vuelve aburrida rápidamente. Las imágenes pueden agregar esa especia extra si sabes cómo espolvorearlas suavemente. Uno de estos métodos es el uso de miniaturas dinámicas para proporcionar vistas previas de cada página o artículo..
Los blogs de hoy continúan adoptando la tendencia de la imagen destacada, así que, ¿por qué no aplicar también las miniaturas generadas en su tema? Estos a menudo atraen mi atención hacia el título del artículo y ayudan a dividir una página llena de enlaces de texto..
Como otro ejemplo, Dribbble proporciona una lista completa de las miniaturas de cada galería de diseño. En un diseño de estilo de fila de esta tabla, es muy fácil echar un vistazo a cada miniatura y desplazarse para encontrar lo que está buscando. ¡Esta táctica ha demostrado captar la atención de toda la comunidad del diseño! Er, al menos los miembros de Dribbble en el mejor de los casos. Solo puedo esperar que el 2012 verá un mayor esfuerzo de estas ideas basándose en ejemplos del pasado..
14. Iconos de gran tamaño
Esta tendencia única se origina a partir de la popularidad de los diseños de iconos de Mac OS X. Cuando los programadores comenzaron a lanzar sitios web para sus aplicaciones Mac, con demasiada frecuencia hemos visto los enormes tamaños representados en la marca. En consecuencia, esta tendencia también se ha recogido a través de los desarrolladores de iOS y ahora se apoya cómodamente en la cultura de diseño moderna..
Es difícil predecir cómo serán justas estas tendencias a medida que avanzamos hacia 2012. Por un lado, estos iconos pueden ser torpes y ocupar más espacio del necesario. Sin embargo, ni siquiera estamos cerca de encontrar una escasez de aplicaciones iOS / OSX y los diseñadores todavía están produciendo especificaciones de íconos de píxeles perfectos. ¡Sin mencionar que los diseñadores web ahora incluyen íconos de gran tamaño en casi cualquier marca de página! Es una buena manera de atrapar la atención directa de su visitante y crear un nombre para su empresa..
15. Hipervínculos exagerados
Los enlaces de anclaje están ciertamente dentro de los cinco elementos más importantes de cualquier sitio web. Obviamente, estos han recorrido un largo camino desde la década de 1990 y las tendencias de diseño popular solo han crecido de manera exponencial. Parece que nos estamos moviendo hacia una era donde el diseño exagerado tiene prioridad..
Echa un vistazo a algunos de los ejemplos de enlaces de Patterntap para ver si alguno salta y te llama la atención. Hay tantas ideas increíbles para el diseño de hipervínculos, tanto en el estándar como en los efectos de desplazamiento. Las esquinas redondeadas de CSS3, las sombras de texto y las familias de fuentes personalizadas agregan aún más ideas geniales a la mezcla. Uno de mis ejemplos favoritos es de SimpleBits, que utiliza una breve animación dinámica en cada uno de los enlaces permanentes de su blog..
Conclusión
Estas ideas son solo algunas de las tendencias más populares que he notado ganando prioridad a lo largo de 2011. El gran diseño web siempre se centra en mantener las intenciones de los usuarios como prioridad principal. Es poco probable que estas filosofías se diferencien a partir de 2012, pero la forma en que creamos diseños y presentamos datos siempre está cambiando. Háganos saber sus pensamientos o preguntas en el área de discusión de comentarios.
