Empezamos un nuevo año, y eso sólo puede significar una cosa. Es hora de mirar hacia adelante y ver cómo podría ser el diseño de un sitio web en este año.
Como cada año, en prositiosweb presentamos las nuevas tendencias más prometedoras que podríamos empezar a ver más en los sitios web lanzados en 2019. A continuación se presentan las diez tendencias de diseño que podrías empezar a ver más en la web en este año 2019.
1. Rejilla rota y disposiciones asimétricas
El concepto de la cuadrícula en términos de diseño es un plano imaginario con líneas horizontales y verticales, utilizado para ayudar a los elementos de diseño en la página o pantalla.
Para la mayoría de los sitios web, la cuadrícula es fácil de señalar – usted puede mirar hacia abajo en el lado izquierdo del sitio web, por ejemplo, y ver el logotipo, el título y el contenido, alineados, en su mayor parte. Cuando tienes una cuadrícula rota, tienes objetos que son empujados alrededor de este plano de una manera que hace que la cuadrícula se sienta menos rígida o rota.
El sitio web de Times Talks (arriba) muestra una cuadrícula rota en la mayor parte de su sitio web, especialmente en el área de héroes (mostrada arriba) y en diferentes secciones de su sitio.
Este tipo de diseño – uno que favorece lo inesperado, empujando los límites y experimentando con la asimetría – ha existido por un tiempo. Se ha utilizado como una técnica para ayudar a destacar entre la multitud, llamar la atención o experimentar con el diseño.
Studio Revele experimenta con una estética de diseño de páginas web asimétrica y de cuadrícula rota con su diseño de página de inicio (los círculos se pueden mover alrededor de la pantalla para ayudar a facilitar más este concepto de cuadrícula rota).
2. Diseño y elementos fluidos/orgánicos
Poco a poco nos estamos alejando cada vez más de las líneas rectas que venían con el diseño plano y comenzamos a experimentar con formas y líneas más fluidas. Estos tipos de formas, en las que no son las típicas formas circulares, cuadradas, rectangulares o de lados rectos, a menudo se denominan formas fluidas u orgánicas.
Una pequeña parte de la página de inicio de Wandering Aimfully, con formas y líneas orgánicas que se ven detrás de las imágenes circulares y como un sutil fondo detrás del encabezado debajo de ellas.
Al eliminar las líneas rectas y casi clínicas que estamos acostumbrados a ver online, y reemplazarlas con elementos extraídos de la naturaleza y la vida (como formas de estanques y lagos, trozos de papel rotos), estas formas y líneas orgánicas pueden hacer que los diseños se sientan más accesibles y en línea con la naturaleza humana.
El sitio web de Mawla utiliza formas y líneas orgánicas en su página principal, específicamente aquí en su área de héroes en su sitio.
Pasando al 2019, las formas típicas que han sido usadas en el diseño web durante tanto tiempo como círculos y cuadrados, comenzarán a ser reemplazadas por formas y líneas más orgánicas.
3. Estética de diseño retro
Lo que es viejo es nuevo otra vez. A medida que nos movemos más allá del diseño plano, donde la experimentación parece no tener límites, el tiempo parece maduro para traer de vuelta elementos de diseño antiguos con un toque de nostalgia.
El diseño del sitio web de Statamic incluye un esquema de colores retro que recuerda los colores brillantes y las imágenes de la década de 1980.
La experimentación con la nostalgia y los estilos de diseño retro puede crear una buena yuxtaposición entre el diseño de entonces y el actual. Lo que hace esto aún más interesante, es que podemos esperar ver más estilos de diseño retro que reflejen períodos de tiempo antes de que los sitios web fueran fácilmente accesibles para las masas; haciéndolo sentir “nuevo” para mucha gente.
El sitio web de Great Jones presenta la tipografía y el esquema de color característicos de los años 70, una estética de diseño que era común mucho antes de ARPANET en 1983.
4. Tratamientos de imagen más realzados/aumentados
Las imágenes siempre han presentado oportunidades únicas de diseño, especialmente en la web. Poner las imágenes en círculos, hacerlas en blanco y negro, añadir una sombra detrás de ellas – todas estas son técnicas que los diseñadores han estado utilizando para mejorar y / o llamar la atención a las imágenes en los sitios web (y casi cualquier otro tipo de diseño).
El sitio web de KOBU presenta imágenes que tienen los sujetos recortados en lugar de una imagen estándar, permitiendo que el diseño fluya entre los “recortes” de los miembros de su equipo.
Llevar el tratamiento de las imágenes un paso más allá puede llamar la atención sobre una imagen, o incluso desviar la atención de una imagen.
El sitio web de Drip muestra imágenes que han sido recortadas y han añadido dibujos y formas para mejorar aún más la imagen, lo que también pone más énfasis en el diseño del propio sitio.
En lugar de ejecutar un tipo de tratamiento de imágenes, espere ver sitios web de tratamiento de imágenes de capas para empujar la imagen hasta donde pueda ir, ya sea para atraer más atención a ellos o para alejar la atención de ellos. Apilar tratamientos de diseño como hacer una imagen monocromática, recortar el tema, o añadir un patrón en la parte superior para hacer una nueva imagen, probablemente será más prominente en el diseño web en 2019.
5. Monocromática y ausencia de color
Tener millones de colores en la punta de los dedos es genial y todo eso, pero ¿qué pasa si te limitas a un solo color, o si no tienes ningún color? Si se hace bien, ese tipo de restricción de diseño puede ayudar a mejorar un diseño y hacerlo más memorable.
El sitio web de Digital Bro se adhiere a un esquema de color muy monocromático utilizando un tono de amarillo y muy raramente se aleja de esa variante del amarillo (el blanco y el negro se consideran neutros). El sitio web de Climate se adhiere a un esquema de color en escala de grises, ausente de cualquier otro color, incluso haciendo que sus videos en el sitio sean todos en escala de grises.
Limitarse a un solo color puede ayudar a solidificar su marca al tiempo que añade restricciones en términos de flexibilidad de diseño.
Llevarlo un paso más allá y eliminar el color en su totalidad es definitivamente una opción si estás buscando simplificar tu paleta de colores (en el arte y en el diseño, el negro, el blanco y el gris no se consideran colores tanto como se les conoce como neutros). En 2019, espero que más sitios web usen menos color o ningún color.
6. Elementos de diseño superpuestos
Al estar en línea con los diseños de cuadrículas rotas y la asimetría, el hecho de que los elementos se superpongan entre sí puede aportar interés visual a tipos específicos de contenido en una página. Esto puede traer un elemento de lo inesperado ya que nos hemos acostumbrado a que los elementos de una página web tengan su propio espacio y estén separados de los elementos que los rodean (generalmente no se tocan entre sí).
El sitio web de Mad Studio presenta elementos que se superponen como la principal estética de diseño en todo el sitio, realzados por sutiles animaciones que hacen que el sitio web se sienta tridimensional.
Cuando se hace con una cuidadosa consideración, la tendencia de superposición de elementos en una página puede ayudar a mejorar la estética general del sitio. Esto también puede ser bastante difícil de llevar a cabo, ya que la superposición de elementos, si no se hace bien, puede causar confusión y frustración a los usuarios cuando los elementos se superponen de forma incorrecta.
El sitio web de Her muestra elementos que se superponen en partes de su sitio web, incluyendo su área de héroe principal en la página de inicio.
7. Áreas de héroe/cabeceras reimaginadas
Como se ha indicado anteriormente, la mayoría de las áreas de héroes presentan una imagen de gran tamaño que abarca la mayor parte del mirador, a menudo con algún texto en la parte superior para enfocar la atención del espectador. Y en los últimos dos años, no ha habido mucha experimentación con esta área de un sitio web (posiblemente la más importante).
Un acercamiento único a un área de héroe utilizado por Zoo Creative (tratando el área de héroe como una valla publicitaria, y el uso inteligente de la animación).
Mientras que algunos sitios web han comenzado a traspasar los límites de lo que es posible con sus áreas de cabecera en sus sitios web, a medida que nos alejamos de los típicos héroes de tipo full-width-image-with-text-overly, espero empezar a ver más y más experimentación por parte de los diseñadores web en cuanto a lo que es posible en esta área.
El sitio web de Andreas Nymark presenta un área de encabezado pesado en blanco con un simple encabezado en la parte inferior del área.
8. Menús de Navegación grandes y experimentales
Parece que cada año hay una tendencia que tiene que ver con la navegación en un sitio web. Probablemente porque es uno de los elementos más difíciles de diseñar en la página. Tan esencial para la forma en que usamos la web, pero un dolor para mantenerla funcional y a la vez estéticamente atractiva.
El sitio web de 56Digital muestra una navegación bastante grande, lo que lo convierte en el centro de su sitio web en lugar de una parte más pequeña de su sitio.
En 2019, es probable que la tendencia siga siendo la de experimentar más con las navegaciones. Pero en lugar de simplemente cambiar algunas cosas, como la ubicación en la página, el tamaño de la fuente o incluso el diseño en sí, es probable que la experimentación vaya más allá de lo que es posible en 2019, como hacer de la navegación la parte principal del sitio web o convertirlo en un punto central y muy grande.
El sitio web de Gander tiene una navegación bastante grande en las cuatro esquinas de su sitio en lugar de la típica barra de navegación en la parte superior o lateral.
Con las navegaciones experimentales cada vez más de moda en 2019, podemos esperar ver navegaciones muy grandes, páginas web que no son más que su navegación, y navegaciones con sofisticadas animaciones.
9. Espacio en blanco más que suficiente
El uso eficaz del espacio en blanco es una herramienta de diseño utilizada por los diseñadores durante décadas. Sin embargo, lo que puede no ser tan común es la cantidad de espacio en blanco utilizado o incluso hacer que el espacio en blanco sea el punto focal en lugar del contenido en sí.
El sitio de Daniel Boddam utiliza un espacio en blanco adicional en el encabezado de su sitio, lo que está llamando la atención sobre el espacio que de otro modo estaría lleno de contenido.
El uso de espacio en blanco extra de esta manera contrasta con la razón por la que normalmente utilizamos el espacio en blanco: añadir márgenes o espacios para que nuestros ojos descansen. La adición de espacio en blanco adicional ahora ayuda a moverlo para que sea un punto focal o una parte más notable de la estética del diseño. Al elegir añadir espacio en blanco adicional en áreas que no necesariamente lo necesitan, se convierte en una parte importante del diseño y es más notoria para los visitantes.
10. Empujando los límites de la tipografía
Aunque experimentar con la tipografía siempre es algo que se puede esperar de los diseñadores, es un poco más difícil traspasar los límites de la tipografía en la web que en la versión impresa. A medida que la codificación se hace más sofisticada, la experimentación con la tipografía en la web se ha vuelto un poco más fácil con el tiempo.
El sitio web de Kurppa Hosk experimenta con la tipografía añadiendo animación e interacción con el usuario. El texto explota y forma un círculo alrededor del cursor del usuario.
Experimentar y empujar los límites de la tipografía podría incluir cortar o restar a propósito partes de letras y palabras (confiando en el espacio negativo para rellenar el resto de las letras), fotografía dentro de la tipografía, escribir en una línea o forma diagonal, animar la tipografía, etc.