El diseño plano ha sido una opción de diseño estándar desde hace un tiempo, y hay una buena razón para ello. Es aerodinámico, moderno y, quizás lo más importante, entrega información rápidamente, todo mientras se ve limpio y fresco.
Por todo lo que el buen diseño plano puede hacer por las marcas, es fácil mirar una imagen plana y pensar que crear una tú mismo es simple, que no requiere habilidad ni esfuerzo.
Pero ese no es el caso. Esta tendencia tiene una larga historia y hay una gran cantidad de pensamiento de diseño que se necesita para darle sustancia a tu diseño plano.
Ahí es donde entra esta guía, para ayudarlo a comprender la psicología que dio lugar al diseño plano y la mejor manera de aplicar la estética a sus proyectos futuros.
Aquí hay algunos consejos que no querrá perderse, porque a pesar de cuánto tiempo ha existido el diseño plano, no parece que vaya a desaparecer pronto.
¿Qué es el diseño plano?
El diseño plano es lo que parece: un estilo de diseño bidimensional y orgulloso de él. No hay sombras, reflejos adicionales ni luces altas para que las imágenes se vean en 3D. Más bien, el diseño plano adopta un estilo 2D para comunicar información rápidamente.
Eche un vistazo a algunas capturas de pantalla de la serie “Paper Mario” para ver el diseño plano en contraste directo con el diseño 3D. A través de Nintendo.
El diseño plano eficaz es discreto por naturaleza, y esto significa que a menudo incorpora elementos de diseño “invisibles”, opciones de su parte que el usuario no notará. Los usuarios sienten e interactúan con estos elementos, pero en realidad no los “ven”, incluso cuando son parte del diseño visual. Echemos un vistazo a algunos ejemplos:
- Usar un icono de carrito de compras para comunicar dónde tiene que hacer clic el usuario para finalizar su transacción. Sí, el icono está visible, pero no hay una llamada a la acción de “haga clic aquí”.
- Dividir información en una página con diferentes colores de fondo. Dale un toque diferente a cada párrafo mostrándolo sobre su propio color.
- Usar combinaciones de colores específicas para decirle al espectador cómo relacionarse con ciertas imágenes e información. Cuando algo sea urgente, resalte con texto rojo brillante.
Así es como funciona el diseño plano en el diseño web: todo el diseño web está diseñado para guiar al usuario a través del sitio o la aplicación, y el diseño plano aborda esta función de una manera muy diferente a su predecesor, el diseño esqueuomórfico .
Mientras que el diseño esqueomórfico utiliza señales visuales y auditivas para decirle al usuario cómo funciona comparándolo con un elemento analógico que logró la misma tarea, el diseño plano toma al usuario de la mano y lo guía a través de la aplicación / sitio, haciéndolo sentir como un experiencia inmersiva e intuitiva.
La historia del diseño plano
El diseño plano se creó en respuesta al diseño esquemórfico, pero esa no es toda la historia. Como la mayoría de los demás movimientos de diseño, el diseño plano tiene sus raíces en otras tendencias de diseño, especialmente el estilo suizo, el modernismo y la Bauhaus.
Estéticamente, el diseño plano se inspiró en gran medida en el estilo suizo , también conocido como estilo tipográfico internacional. El estilo suizo es atrevido, directo y no incluye ningún elemento de diseño que no sea completamente necesario. Algunos elementos de diseño de ascensores de diseño plano directamente del estilo suizo son:
- Alto contraste
- Minimalismo
- El uso del color y el contraste para crear profundidad.
- Uso eficiente del espacio
- Uso de símbolos, en lugar de representaciones precisas, para transmitir ideas.
El diseño plano surgió cuando el skeuomorfismo dejó de ser necesario. El eskeuomorfismo es el estilo de diseño que utiliza imágenes realistas de objetos analógicos para mostrar a los usuarios cómo funcionan los programas que se aproximan a estos objetos analógicos.
El eskeuomorfismo también puede involucrar señales auditivas y táctiles para lograr este mismo objetivo. Dos ejemplos de estos son un sonido de obturador programado en una aplicación de cámara y el proceso de resaltar texto en una pantalla al pasar el dedo por él como si estuviera usando un resaltador en papel.
El diseño eskeuomórfico facilita que las personas criadas en el mundo analógico naveguen por el mundo digital. Cuando necesite descartar un archivo en su computadora, simplemente arrástrelo hasta el ícono de la papelera de reciclaje; eso es un diseño esqueomórfico que hace lo que fue creado para hacer.
Cuando desee realizar una llamada telefónica, toque el icono de su teléfono que parece un auricular de teléfono antiguo. Pero en la década de 2010, la mayoría de nosotros habíamos usado computadoras durante más de 20 años.
Algunos de nosotros nunca habíamos conocido un mundo sin computadoras omnipresentes y acceso a Internet, e independientemente de en cuál de estas categorías se encuentre, probablemente ya no necesite un diseño esqueomórfico para enseñarle cómo usar las aplicaciones. ¡Ingrese al diseño plano!
Diseño plano en la era digital
La apariencia plana de Windows 8 se creó para que el sistema operativo se traduzca a tabletas con mayor facilidad. A través de Microsoft.
Aunque los movimientos de diseño mencionados anteriormente sentaron las bases, fue necesario Internet y la competencia de la industria para llevar el diseño plano a la corriente principal.
En el pasado, la estética general de Apple era esquemórfica, y esto llevó a Microsoft a liderar el camino en otra dirección, comenzando con las interfaces Windows Media Player y Zune de principios de la década de 2000.
Para cuando Windows 8 se estrenó con una interfaz completamente plana en 2012, Microsoft se había establecido como el líder de la tendencia.
Era solo cuestión de tiempo antes de que otras marcas hicieran lo mismo y actualizaran sus viejos diseños esquemórficos, como el cambio de marca polarizador de Instagram . Finalmente, incluso Apple se subió al tren del diseño plano en 2013 con iOS 7 y, a mediados de la década de 2010, el diseño plano estaba en todas partes.
Hoy en día, ves el diseño plano en tantos lugares que probablemente ni siquiera lo notas, que es el punto. La tendencia ha ido más allá del diseño de interfaces para abarcar la ilustración, la publicidad, el diseño de logotipos y más.
El diseño plano está intrínsecamente vinculado con el minimalismo, lo que lo hace útil para una serie de necesidades de diseño gráfico y marca. Eche un vistazo a los diseños que le gustan y probablemente verá un montón de diferentes versiones del diseño plano.
El diseño semiplano, también conocido como flat 2.0, es un diseño plano con algunos toques realistas añadidos, como sombras. Es un medio feliz entre el diseño plano y tridimensional, una elección que debe tomar cuando le gusta el aspecto del diseño plano, pero no puede comprometerse totalmente a eliminar todos los detalles estéticos que hacen que sus imágenes salgan de la página.
Una razón sólida por la que utilizaría el diseño semiplano es para sortear los inconvenientes del diseño plano, como tener que reducir la cantidad de información que puede comunicar porque está encerrado en su diseño y arriesgarse a que los usuarios no se den cuenta de dónde hacer clic. o desplazarse porque no podía hacer que sus pistas fueran lo suficientemente obvias.
Desde una perspectiva menos utilitaria, el diseño semiplano agrega interés visual a la imagen. El diseño plano tradicional es eficiente, pero el diseño semiplano permite a los diseñadores lograr un efecto similar sin sacrificar todas las sutilezas y toques especiales que le dan a los diseños un toque estilístico o le permiten aprovechar tendencias como las transiciones de color.
Cuándo usar el diseño plano
Utilice el diseño plano siempre que tenga mensajes que necesite comunicar de manera eficiente. Los mensajes como “toca aquí”, “desliza el dedo hacia aquí” y “así es como funciona el producto” son todos los tipos de mensajes que el diseño plano comunica bien. A continuación se muestran algunos casos comunes:
- Infografía, donde el objetivo es destilar un tema complicado en ejemplos fácilmente digeribles.
- Manuales y páginas de cómo funciona en sitios web que guían al usuario a través de instrucciones paso a paso.
- Publicidad, donde el espectador no buscó el material y definitivamente no quiere hacer el trabajo mental extra para entenderlo.
- Diseño de logotipos y branding donde el concepto de negocio puede resultar desconocido y necesita comunicar su vibra de inmediato.
- Iconos de aplicaciones y otros diseños que son demasiado pequeños para ser demasiado detallados
- Interfaces de juegos móviles donde los usuarios tienden a ser jugadores casuales que buscan una distracción, no una simulación demasiado compleja.
- Para interfaces donde el usuario necesita saber qué hacer a continuación de inmediato. Si tiene un sitio web denso y de varias páginas que tiene muchas características, es posible que el diseño plano no sea para usted. Pero si su objetivo es ser el “Uber de [inserte aquí la industria que desea revolucionar]”, Flat es el camino a seguir
Si bien estos son los sospechosos habituales cuando se trata de diseño plano, el estilo tiene carácter por derecho propio, ¡y nada le impide aprovecharlo por razones puramente estéticas!
Cuándo no usar el diseño plano
No utilices el diseño plano cuando tu imagen venda realismo o cuando dependas de los detalles para contar toda la historia. Aquí hay unos ejemplos:
- Las portadas de libros tienden a favorecer imágenes más realistas ya que venden mundos y personajes ficticios. Los tomos emprendedores y de autoayuda, sin embargo, pueden depender de forma segura del diseño plano, ya que tienden a estar escritos en un formato de ‘cómo hacer’
- Diseños de ropa y camisetas a todo color donde los compradores querrán algo detallado que muestre su estilo
- Para las mascotas y el diseño de personajes, a menudo se necesitan detalles para darle personalidad al personaje.
- El empaque del producto generalmente utiliza ilustraciones más elaboradas y llamativas para competir en los estantes
- Imágenes sociales y sitios web de servicio público: aquí es donde desea resaltar la humanidad y la diversidad.
Obtener un diseño plano correctamente con estos pasos
Entonces quieres usar un diseño plano. A continuación, se indican algunos pasos que debe seguir si desea asegurarse de hacerlo bien:
No confundas plano con aburrido
El diseño plano es inherentemente minimalista. Pero el hecho de que un diseño no sea detallado no significa necesariamente que sea aburrido. Por lo general, los diseños minimalistas son fáciles de escanear y tienen una sensación elegante y moderna. En lugar de ponerte a dormir, van directo al grano. Si son aburridos o no, depende en última instancia del diseñador.
La clave para hacer que un diseño como este funcione es utilizar el espacio en blanco para guiar la mirada del espectador hacia los elementos más importantes. De esta manera, puede crear significado y atractivo estético en su diseño plano sin caer, bueno, plano.
El color, el contexto y el contraste son tus amigos
Elegir un aspecto plano significa que perderá algunos de los elementos clave que normalmente componen un diseño, como el sombreado alrededor de un botón para indicar que se puede hacer clic en imágenes realistas o que pueden generar empatía en el espectador.
Con esta caja de herramientas más limitada, debe ser creativo con las herramientas que tiene, como el color, el contraste, el contexto y la escala.
Esto significa usar un tono más saturado para enfatizar cierto texto o botones y brindarle al usuario pistas de contexto para ayudarlo a comprender cómo usar ciertos elementos, como colocar una flecha en los lados derecho e izquierdo de la página para decirle a los usuarios que se deslicen hacia la derecha y la izquierda para obtener más contenido u organizar enlaces horizontalmente como una barra de herramientas. Elecciones estéticas deliberadas como estas le dicen al espectador cómo usar su diseño en ausencia de elementos de diseño esquemórfico.
Dale vida a tu diseño plano con animación
La animación y el diseño plano son amigos naturales. Esto se debe a que los dibujos detallados requieren mucho más trabajo para hacer que el movimiento sea convincente (como volver a dibujar la figura en varias poses), mientras que el diseño plano puede salirse con la suya con animaciones simplificadas.
Aunque puede usar esta técnica para contar historias o agregar algo de dinamismo a su logotipo , la animación de elementos de diseño plano también puede ser una forma de compensar lo que pierde al eliminar el sombreado y la textura. Haga que los elementos de diseño que desea resaltar se muevan para mostrar a los usuarios dónde dirigir su atención.
Elija una fuente plana
Debido a que tiene menos con qué trabajar visualmente, cada elección de diseño que haga cuenta incluso más de lo que normalmente lo haría, y la tipografía es una elección que no debe pasar por alto.
Pruebe su fuente en estilo plano para ver si funciona. Juega con los colores y la escala para ver si hay una manera de hacer que funcione con tu diseño plano.
Una buena regla a seguir al elegir una fuente es que debe seguir el ejemplo del diseño plano, es decir, mantenerlo simple y omitir elementos decorativos como las serifas.
Aunque algunas fuentes novedosas funcionan en formato plano, otras, como las fuentes ajustadas y cualquier cosa que incorpore muchas imágenes pequeñas, pueden resultar difíciles de renderizar bien en un diseño plano.
Flat es donde está
En estos días, la mayoría de la gente está mirando tu diseño en una pantalla plana, así que en lugar de pretender que la imagen es algo que no es, acepta la planitud.
El diseño plano todavía puede considerarse una “tendencia”, pero el hecho de que haya existido durante casi una década solo demuestra lo versátil y valioso que es.
Si tienes miedo de que este estilo haga que tu diseño se vea idéntico a todos los demás, no gastes dinero en algo genérico. Trabaje con un diseñador cuyo portafolio está lleno de diseños planos únicos que dicen exactamente para quién son y qué hacen sus dueños. Con el diseñador adecuado, su diseño plano podría saltar de la pantalla.