Tendencias de diseño web para 2010
Los puristas dirán que el gran diseño es intemporal. Sí, en un mundo ideal, deberíamos ignorar las tendencias.
Pragmáticamente hablando, sin embargo, hay un gran valor en el monitoreo e incorporación de tendencias de diseño, especialmente con respecto a los sitios web.
Seamos realistas: la web cambia a un ritmo rápido. A diferencia de otros medios, las tendencias de diseño en la web no solo son impulsadas por la estética.
La tecnología está cambiando y puede alterar drásticamente las capacidades del medio.
En 2010, vemos a los diseñadores continuar empujando los límites del diseño web, estableciendo las siguientes tendencias claras ...
Diseño de impresión
El diseño de impresión siempre ha sido una fuente de inspiración para la web. El diseño web ha existido lo suficiente como para cultivar un núcleo fuerte de diseñadores que nunca han trabajado en la impresión. Como resultado, estamos viendo más inspiración extraída de la impresión, ya que estos diseñadores miran más allá de la web.
Fuentes Serif
Uno de los problemas más importantes de la tipografía es la legibilidad. Los diseñadores de impresión siempre han preferido las fuentes serif debido a que los bordes mejoran la visibilidad y hacen que las formas de letras sean más fáciles de reconocer.
Las fuentes Sans-serif generalmente se han considerado más fáciles de leer en la pantalla. Pero con más usuarios navegando a alta resolución y las mejoras en la tecnología de suavizado de fuentes, las fuentes serif se han vuelto muy legibles para el texto del cuerpo.
Grandes encabezados
Los diseñadores de impresión han estado utilizando grandes títulos para llamar la atención durante siglos. El material impreso tuvo que ser de alto impacto si se esperaba que se leyera. Si vieras un folleto aburrido sentado en un escritorio, ¿te molestarías en recogerlo? Probablemente no.
Esta tendencia comenzó en 2009 y solo ha crecido en popularidad. Los títulos grandes han demostrado llamar la atención y comunicarse con claridad.
Diseños de múltiples columnas
Los diseñadores tienen que trabajar dentro de las limitaciones de su medio. A diferencia de la web, la impresión no ofrece ninguna opción para desplazarse, ya que está limitada por las dimensiones del papel. El uso de varias columnas le permite ajustar más contenido en el mismo espacio.
Ahora, con el aumento de las resoluciones de pantalla y el advenimiento de los diseños de cuadrícula, más diseñadores están adaptando este método a la web para hacer que los sitios web sean más fáciles de usar y que quepan en más contenido.
Big Lead Image
Una imagen vale mas que mil palabras. Si bien puede pasar un tiempo antes de que una fotografía tenga el mismo impacto en la web que en la impresión (que tiene una resolución mucho mayor), la adopción del acceso de banda ancha ha hecho que las grandes fotografías sean más factibles.
Estamos viendo más sitios web que utilizan imágenes grandes y de alto impacto para atraer a los usuarios y crear una experiencia inmersiva.
Diagramas e infografías
Los diseñadores de impresión han usado gráficos para transmitir información compleja durante años. Esto se ve más comúnmente en revistas e informes anuales.
Los gráficos pueden comunicar relaciones y relaciones complejas de una manera que es demasiado difícil de hacer con texto sin formato. Las infografías tienden a tener una apariencia simple pero visualmente rica, y cada vez más diseñadores adoptan la infografía o imitan el estilo de sus diseños.
Sencillez
Antoine de Saint-Exupery dijo una vez: "La perfección se logra no cuando no hay nada más que agregar, sino cuando ya no queda nada por quitar". Las ventajas de la simplicidad en el diseño son muchas.
La ley de Hick nos dice que el tiempo requerido para tomar una decisión aumenta con cada opción. Además, la teoría de la señal al ruido nos dice que cualquier cosa que no agregue al mensaje o función de un sitio web (la señal) se interpondrá en el camino y hará que el diseño sea menos efectivo (el ruido).
Los diseños simples son más fáciles de usar y comprender, y permiten una mayor claridad en la comunicación de mensajes.
Diseño minimalista y de cuadrícula
El minimalismo es poderoso pero difícil de dominar. No contiene nada más que lo esencial. Todo lo demás se elimina, lo que resulta en un impacto máximo de los elementos que están presentes.
Los diseños minimalistas requieren un sistema de grilla fuerte para ser efectivo. Naturalmente, tendrán mucho espacio en blanco, y sin esa cuadrícula, un diseño minimalista se sentiría desconectado y descuidado. La grilla le da organización y estructura.
Diseños de una página
Hay varias formas de simplificar. Un diseño de una página muestra dos de estas formas: ocultar y eliminar.
Los diseños efectivos de una página ocultan cualquier elemento que no sea una prioridad. Si un usuario desea ver uno de esos elementos, puede hacer clic para descubrirlo. Esto es mucho más efectivo que dejar todo visible, lo que haría que la página sea complicada y abrumadora.
Del mismo modo, el principio detrás de los diseños de una página hace innecesarias las páginas adicionales. Con la disponibilidad de poderosas bibliotecas de JavaScript y conexiones más rápidas, muchos sitios web ahora tienen poca necesidad de varias páginas. Los diseñadores pueden ajustar fácilmente la información en una página, sin molestar al usuario con una jerarquía.
Espacio blanco masivo
En los comienzos del diseño web, no teníamos mucho espacio en pantalla para trabajar, por lo que no mostramos mucho espacio en blanco. Si alguna vez ha intentado diseñar un sitio web con una resolución de 640 × 480, sabrá exactamente de lo que estoy hablando.
Ahora que tenemos resoluciones más altas y la capacidad de ocultar y revelar elementos con JavaScript, aprovechar el espacio en blanco es mucho más fácil.
El espacio en blanco es fundamental para un buen diseño. Le da al ojo un lugar para descansar. Mejora naturalmente la calidad de un diseño. Y muestra qué elementos están relacionados entre sí por medio de la proximidad.
Diseños tipográficos
Mientras que solíamos estar confinados a unas pocas "fuentes web seguras" con muy poco control sobre cómo se mostraban, ahora tenemos una amplia gama de herramientas para enriquecer nuestra tipografía.
Los diseñadores web han disfrutado mucho tiempo usando el tipo como una herramienta sutil para comunicar mensajes. Con el aumento del control y las capacidades, vemos que más diseñadores se centran en la tipografía como elemento de diseño principal.
Técnicas CSS3
¿Aún no estás seguro de poder aprovechar CSS3? Piensa otra vez. Los pioneros de la web como Andy Clarke y Jeremy Keith han predicado durante mucho tiempo sobre la "mejora progresiva" en el diseño web.
La mejora progresiva consiste en diseñar sitios web para que se puedan usar en navegadores antiguos, mientras se "potencian" para los usuarios que se comprometen con la última tecnología.
Diseñar en este campo le permite aprovechar las propiedades de CSS3, como esquinas redondeadas, fondos de bordes y sombras de texto y caja. Los usuarios de los navegadores modernos verán la versión más agradable, y aquellos con tecnología más antigua ( tos | IE6 | tos ) verán la versión básica.
Animación CSS3
La animación en la web ha pasado por muchas etapas. Inicialmente, solo podíamos animar con archivos de imagen GIF. Entonces, estábamos más o menos limitados a Flash. Ahora, podemos seleccionar entre Flash, Silverlight, GIF, JavaScript e incluso CSS3. La animación sutil puede ser memorable, y CSS3 lo hace liviano y fácil.
Esquinas redondeadas
El estilo Web 2.0 de 2005 y 2006 hizo que las esquinas redondeadas fueran populares, hasta el punto de ser molestas. En ese momento, crearlos fue difícil. No había una forma establecida de crear esquinas verdaderamente redondeadas. En su lugar, se simularon con CSS, JavaScript hacks y archivos de imagen.
CSS3 ahora nos permite generar esquinas redondeadas directamente en el navegador, lo que hace que no solo sean más fáciles de crear, sino también mucho más eficientes, ya que el usuario no tiene que descargar imágenes adicionales o archivos JavaScript.
Los diseñadores aprovechan cada vez más esta nueva capacidad de navegador en 2010.
Sombras de cuadro y texto
El uso de sombras para crear una sensación de profundidad se ha realizado (y, a veces, exagerado) desde los primeros días de la web. Pero no siempre fue práctico. Para agregar sombras al texto, tenía que usar imágenes, lo que aumentaba el tiempo de carga y dificultaba el mantenimiento. Las sombras de caja requerían varias imágenes y trucos de CSS como "puertas correderas".
CSS3 tiene capacidades de sombra altamente personalizables, que permiten una amplia gama de efectos creativos, que incluyen no solo sombras paralelas sino también sombras internas. Los diseñadores creativos ya han estado utilizando estos efectos CSS3 para simular los efectos tanto en relieve como impresos.
RGBa y Opacidad
Durante años, trabajar con opacidad y transparencia en la web fue casi imposible. Tenía tres opciones: simular transparencia usando imágenes planas, lidiar con las incompatibilidades entre navegadores de PNG o luchar con los filtros y selectores de transparencia básicos de CSS.
CSS3 ofrece a los diseñadores mucha mayor consistencia y libertad para usar la opacidad con la propiedad RGBa. Si bien puede aprovechar la transparencia de innumerables maneras, un área que ha ayudado particularmente es con fondos complejos superpuestos con colores semitransparentes. Anteriormente, este efecto no era práctico o imposible de crear sin recurrir a imágenes PNG complejas.
Diseño compatible con dispositivos móviles
La web móvil le ha dado a millones de usuarios la posibilidad de consultar su cuenta bancaria mientras hacen cola, buscar los últimos puntajes en el metro y actualizar su estado de Twitter mientras conducen. (¿Cuál de estos es un hábito peligroso?) Y la web móvil continúa creciendo rápidamente.
Hemos llegado al punto en el que cada empresa debe considerar si su sitio web se utilizará sobre la marcha y, de ser así, cómo. Las empresas innovadoras ya han invertido mucho en versiones móviles útiles y fáciles de usar de sus sitios web.
Creatividad
El crecimiento explosivo en el uso de las redes sociales es una prueba de que la gente quiere conectarse y compartir cosas que les apasionan.
En el campo del diseño, hemos visto un gran crecimiento en el intercambio y navegación del trabajo de otras personas. Como diseñadores, ahora somos bombardeados por la creatividad de todos los demás. Esto no solo eleva el estándar de calidad del diseño, sino que alienta a que las ideas se compartan, lo que contribuye a una cultura de creatividad e innovación.
Ilustraciones limpias
Si eres como yo, creciste viendo películas de Disney, admirando todo el esfuerzo que se hizo para crear cada cuadro de animación. Ya pasamos los días en que se hizo la ilustración en tinta y marcadores, y esta evolución en las herramientas ha dado lugar a enfoques de diseño muy creativos.
Muchos diseñadores están aprendiendo que las ilustraciones nítidas, limpias y nítidas crean una sensación distintiva que no puede ser replicada por la fotografía o las imágenes prediseñadas. El resultado es una amplia gama de diseños profesionalmente ilustrados que son interesantes y atractivos.
Fondos texturizados
Los fondos texturizados no son nada nuevo en la web. Pero esta técnica ha visto una variación interesante en los últimos meses. Me refiero a ella como "micro-texturas" que son texturas sutiles, apenas perceptibles en el fondo.
Miniaturas
Usted puede estar diciendo: "Las miniaturas han existido desde el comienzo de la web. ¿Cómo es esto una tendencia? "Es cierto, siempre se han usado, pero solo de manera muy simple. Tendría una miniatura en la que podría hacer clic para obtener una imagen más grande. Hizo el trabajo, pero fue aburrido.
En los últimos meses, los diseñadores comenzaron a preguntar: "¿Cómo podemos hacer que las miniaturas sean más emocionantes?" Esto ha llevado a un aumento en las miniaturas que son inteligentes y utilizables.
Acuarela
A medida que la web evoluciona, vemos que más diseñadores se inspiran en una variedad de fuentes y medios. No es de extrañar que las bellas artes estén entre estas fuentes.
Uno de los estilos que ha surgido es la simulación de acuarelas. El aspecto suave y elegante de este estilo es distinto y calmante.
Escritura
Las fuentes escritas a mano y escritas son las más abusadas. Por esta razón, muchos diseñadores se mantienen alejados de ambos tipos, ya sea por disgusto o por temor a parecer un aficionado. Pero últimamente, muchos diseñadores han descubierto que, cuando se usan correctamente, el estilo manuscrito transmite un sentido de artesanía y planificación. Utilizado en el contexto correcto, es una forma poderosa de comunicarse.
Medios de comunicación social
Dado que las personas pasan más tiempo en Facebook que en Google ahora, no es de extrañar que los diseñadores busquen formas innovadoras de integrar las redes sociales en sus sitios web.
Algunos diseñadores han llegado a publicar su contenido en las redes sociales y luego usan sus sitios web para agregarlo.
Es seguro decir que a medida que avance el año 2010, veremos a más diseñadores encontrar formas creativas de integrar las redes sociales en sus sitios web para atraer mejor a los usuarios.
Elementos fijos
Ahora que los navegadores soportan mejor el position: fixed elemento, estamos viendo usos más inteligentes de él.
Hay muchas situaciones en las que un elemento fijo (como la navegación persistente) podría cumplir los objetivos comerciales del propietario y hacer que el sitio web sea más útil.
Los elementos fijos son memorables y mejoran la experiencia del usuario. Tienen innumerables usos creativos, y seguiremos viendo que los diseñadores se aprovechen de ellos.
Esta publicación de invitado es una colaboración entre los buenos amigos de Web Hosting Search y el diseñador y desarrollador Ross Johnson. Echa un vistazo a la búsqueda de alojamiento web alojamiento web y 3point7designs para más maravilla de diseño web por Ross
¿Cuál de estas tendencias sigue más? ¿Cuáles son algunas otras tendencias emergentes?