Diseño plano puede ser visto como el más sofisticado primo del minimalismo — todos los elementos de diseño se centran en la idea de la simplicidad. Sin embargo, la simplicidad de diseño plano es difícil de lograr — todo debe ser diseñado con el mismo objetivo en mente para crear un grupo cohesivo visual y funcional diseño.

Diseño Invisible

Eliminar innecesario estilo

Es mejor practicar el "diseño invisible " — tomar decisiones de diseño que los usuarios no se den cuenta. Su objetivo es ayudar a los usuarios rápida y fácilmente a comprender ciertas acciones y mensajes. Por lo tanto, su diseño debe tirar hacia abajo los elementos visuales para exponer su funcionalidad esencial.

Dropbox plano de diseño del sitio web se enfoca exclusivamente en el contenido.

Colores Vibrantes

El Color es una parte importante de la eficacia del diseño plano

El color es una parte grande de diseño plano — básicamente, establece todo el sentir de su sitio, página o aplicación. Los planos de diseño de las paletas de color son a menudo mucho más brillante y más colorido que los de otras aplicaciones y sitios.

Créditos: Rovane Durso

Consejos:

- Material de Diseño y los colores de interfaz de usuario, ofrecen una buena guía para la elección de los colores.

- Los colores planos de interfaz de usuario, son un gran lugar para empezar a la hora de elegir el plano en el esquema de color.

- Es mejor utilizar colores que sean un poco desaturados, ya que tienden a agregar belleza estética de su página, sin hacer que los ojos del lector sangren debido a un exceso de brillo.

- Colores suaves le dan un sabroso elemento visual sin robar el show desde la página principal del mensaje. Créditos: thehypeagency

- Los colores brillantes pueden ser utilizados como acentos en contra de un fondo más tenue. Observe cómo los colores de acento hacen que las imágenes parezcan populares fuera de la página en el siguiente ejemplo.

- Imágenes brillantes sobre un fondo oscuro son capaces de hacer una impresión dramática. Créditos: triplagent

- Asegúrese de que los colores en la interfaz de usuario sean accesibles para los usuarios, es un aspecto muy importante de un bien ejecutado diseño visual. Haga la prueba en su paleta de color para asegurarse de que tenga suficiente contraste de color.

Enfoque en la Tipografía

Diseño para el centrado de la estética

El tipo debe indicar a los usuarios qué es lo más importante en la página y cómo utilizar el diseño. Es mejor el uso sencillo de la tipografía, porque es más fácil de leer y mejor para la carga, por no hablar de que es una necesidad para estilos minimalista.

La tipografía simple transmite confianza y claridad. Créditos: Cienne

Consejos:

- Considere un simple sans serif (del tipo familia) con muchas variaciones y pesos para la tipografía primaria en un sitio con diseño plano. Esta familia de fuentes da un ambiente limpio, fresco y un sentimiento moderno.

- El tono de tipos de letra debe coincidir con el diseño general del esquema. Una muy adornada fuente podría parecer extraña en contra de un diseño simple.

Movimiento

El movimiento hace que los planos de diseño sean más centrados en el usuario.

El plano visual de la simplicidad funciona bien junto con el movimiento. Cuando los usuarios interactúan con tu aplicación o sitio web, se les podría pedir las siguientes preguntas:

Diseño plano

"¿Qué es lo más importante aquí?"

"¿Cómo puedo saber qué hacer a continuación?"

"¿Cómo sé que he completado mi tarea?"

Preguntas como esta puede revelar oportunidades para utilizar el movimiento para mejorar la experiencia. El movimiento optimizado percibido en UX, responde a las preguntas:

- Estas unidades de atención del usuario, dan pistas de lo que va a suceder si un usuario completa un clic/gesto.

- Le ayuda a orientar a los usuarios dentro de la interfaz y provee guía de enfoque entre los puntos de vista.

- Proporciona una retroalimentación visual.

Basados en el movimiento de los elementos de diseño puede ser visto en una variedad de formas, incluyendo transiciones, animaciones, e incluso en la textura, para imitar la profundidad del 3D.

El movimiento es lo que nos permite comunicar mejor la interacción, lo que es más fácil de entender para el usuario. Créditos: Anish Chandran

Ilustraciones

Las ilustraciones son grandes extensiones en el diseño plano

Con el estilo de diseño plano cada vez más y más capas, naturalmente se incorpora más a la ilustración.

Las imágenes hablan más que las palabras y hacen que la experiencia vaya más rápido

Las ilustraciones correctamente creadas, aclaran la mensajería de conceptos que son fácilmente comprensible, a efectos visuales.

Intercom usa ilustraciones informativas que guía al ojo a la información importante sin opacarse.

Diseño Plano 2.0

La interacción debe ser intuitiva para los usuarios sin ningún tipo de explicación adicional

Los mayores problemas que se enfrentan a la hora de diseñar un plano de interfaz de usuario son los elementos interactivos. Los usuarios necesitan saber qué zonas de la página se llenan de contenido estático, mientras que otras áreas son accesibles. Recientemente, los diseñadores han comenzado a darse cuenta de este problema. Como resultado, hay una interpretación más madura y equilibrada de planos de diseño han surgido en el diseño Plano 2.0.

El diseño Plano 2.0 toma los mejores aspectos del minimalismo y las técnicas de diseño skeuomorphism, y los hace trabajar juntos

El diseño Plano 2.0 de uso sutil de las sombras y los efectos de borde, implican esta interactividad. Las sombras y gradientes le dan las pistas necesarias para informar a los usuarios de lo que se puede hacer y lo que no puede ser en una interfaz. Como resultado, la comprensión del usuario mejora.

Las sombras ayudan al usuario a diferenciar entre dos objetos y, en algunos casos, entiende que uno está por encima de otro objeto. Créditos: Google

En el siguiente ejemplo se puede ver cómo el uso sutil de bellas sombras alrededor de los bordes de los botones CTA, le da a los botones una impresión planteada.

Tanto en primaria como en secundaria, los botones CTA de la página de inicio se plantean contra el fondo.

Recuerde siempre contar con un paquete de iconos para tenerlo listo para su proyecto ilustrativo.

Conclusión

EL diseño plano cuenta con todos los atributos clave que hacen que un sitio sea tan funcional como hermoso. Nos lleva un paso más cerca de un nuevo paradigma de diseño digital, donde la funcionalidad y la estética están en completa armonía.

La aplicación del diseño plano

Sobre el Autor

Nick Babich es un desarrollador de software y autor de un blog dedicado a la usabilidad.