Colores planos. El diseñador dio consejos sobre cómo elegir una paleta para infografías.

Consejo practico y herramientas.

Los colores, como todo lo demás, se utilizan mejor con moderación. Obtendrá los mejores resultados si utiliza un máximo de tres colores primarios en su combinación de colores. La efectividad de la combinación de colores en el diseño se basa en gran medida en el equilibrio, y cuantos más colores, más difícil es lograrlo.

El color no determina la calidad de un diseño, lo realza.

Pierre Bonnard

Si necesita colores adicionales a los que eligió originalmente para su paleta, use tintes y sombras. Proceda dentro del rango elegido.

Regla 60-30-10

Esta regla de diseño le ayuda a crear rápidamente una combinación de colores. La proporción 60% + 30% + 10% refleja el equilibrio de colores. Esta fórmula funciona porque crea una sensación de equilibrio y permite que los ojos se muevan cómodamente de un punto a otro. También es extremadamente fácil de usar.

El 60% es su color dominante, el 30% es su color secundario y el 10% es su color de acento.

El significado de los colores

Los científicos han estudiado los efectos psicológicos de ciertos colores durante siglos. Más allá de la estética, los colores crean emociones y asociaciones. Los significados de los colores pueden variar según la cultura y las circunstancias. Por eso ves boutiques de moda en blanco y negro. Quieren verse elegantes y nobles.

• rojo: pasión, amor, peligro
• Azul: tranquilidad, responsabilidad, seguridad
• Negro: misterio, elegancia, maldad
• blanco: limpieza, silencio, pulcritud
• Verde: novedad, frescura, naturaleza

Puede aprender más sobre el significado de los colores de la cultura del color.

Escala de grises primero

Nos gusta jugar con los colores y los tonos en las primeras etapas del desarrollo del diseño, pero este comportamiento puede decepcionarte muy rápidamente: puedes matar 3 horas eligiendo el color principal y luego cambias de opinión ... Por supuesto, seductora, pero no muy eficaz.

En su lugar, esfuércese por trabajar en la estructura: el relleno y la ubicación de los elementos en su diseño. Esto te ahorrara mucho tiempo. Este trabajo es muy productivo. Por otro lado, no debería ser aburrido. Prueba diferentes tonos para una apariencia agradable.

Evita los grises y negros puros

Uno de los trucos de color más importantes con los que me he encontrado es evitar los grises sin saturación. V vida real no hay grises puros. Lo mismo ocurre con los negros.

Recuerda agregar siempre un poco de saturación al color. Subconscientemente, se percibirá de forma más natural y cercana a los usuarios.

Cree en la naturaleza

Las mejores combinaciones de colores ya las ha inventado la naturaleza. Siempre lucen naturales. Lo mejor es simplemente observar la naturaleza circundante y extraer paletas de allí para tus diseños, en la naturaleza siempre cambian.

Para inspirarse, solo necesita mirar a su alrededor.

Mantener el contraste

Algunos colores funcionan bien entre sí y otros no. Existen reglas que gobiernan la interacción de tonos, que se demuestran mejor con la rueda de colores. Debe conocer estos métodos, pero no es necesario que los utilice manualmente.

Inspírate

Al buscar ejemplos de IU, dribbble es uno de los mejores lugares para hacerlo. Tiene una herramienta de búsqueda de colores. Entonces, si necesita hacer una investigación visual sobre el uso de un color en particular por parte de otros diseñadores, vaya a

Vídeos, diseño de estampados, interiorismo, moda ... hay muchísimos lugares en los que inspirarse. Guarde los hallazgos interesantes para futuras ideas.

A menudo me gusta robar colores de los videoclips de KPOP. Son hermosos.

Instrumentos

Para facilitarme las cosas, estas son algunas de las mejores herramientas para elegir paletas de colores. Te ahorrarán mucho tiempo.

Indiscutiblemente mi selector de color favorito. Puede elegir un color y generar una paleta presionando la barra espaciadora. Coolors te permite cargar una imagen y crear una paleta a partir de ella. No está limitado a un resultado: el selector le permite cambiar el punto de referencia original.

Kuler

Esta herramienta de Adobe ya está por mucho tiempo ayuda a los diseñadores. Funciona en un navegador, también hay una versión de escritorio. Si está utilizando la versión de escritorio, puede exportar el esquema de color a Photoshop.

Es similar a Kuler, la diferencia es que no está limitado a 5 tonos. Genial si tienes colores primarios y quieres jugar con tonos adicionales.

Designspiration.net

Imagina que tienes una idea para una paleta de colores, pero necesitas comparar visualmente diferentes opciones. Designispiration es ideal para este propósito. Eliges hasta 5 colores, busca imágenes que combinen con tus tonos. El servicio no solo busca con éxito imágenes en una paleta determinada, sino que también ayuda a elegir los gráficos adecuados para integrarlos en el diseño.

Puede preguntar: ¿qué pasa si quiero buscar una foto en el color seleccionado? Shutterstock tiene una herramienta llamada Spectrum donde puede encontrar una foto de un tono específico. Ni siquiera necesita una suscripción para esto, porque una vista previa de imágenes con una marca de agua será suficiente para generar una paleta.

Tineye Multicolor

Pero si necesita encontrar una foto con varios colores específicos, o incluso especificar una cantidad específica de cada tono, use Tineye. Este sitio utiliza una base de datos de 10 millones de imágenes Creative Commons de Flickr.

Ultimos pensamientos

El color es un recurso muy difícil de aprender, especialmente en la era del diseño digital. Los consejos que he proporcionado en esta publicación facilitarán la búsqueda de los tonos que desea. La mejor manera de aprender a crear combinaciones de colores impresionantes es practicar, así que juegue mucho con los colores.

Ya hemos hablado mucho de diseño plano. Se muestran muchos casos de uso diferentes. este método... ¿Qué tal si desarrollas tu propia versión? Una de las partes importantes de este método, si no la más importante, es la paleta de colores.

Diseño plano - preparación

El diseño plano es un método que no utiliza efectos adicionales, ni los más simples, y tampoco contiene elementos tridimensionales. Los efectos como sombras paralelas, biseles, relieves y degradados no se utilizan en el diseño plano.

Algunas personas consideran simple la apariencia del diseño plano, aunque no siempre es así. Apariencia en sí mismo es simple, directo y fácil de usar, lo que lo convierte en una opción cada vez más popular para las interfaces de usuario móviles, así como una apariencia moderna para el diseño web.

Definiendo una paleta de colores

El diseño plano funciona con colores vibrantes y atrevidos y cuando se trata de paleta de color, luego, la mayoría de las veces los diseñadores prefieren usar una amplia variedad de colores.

Otra cosa que hace que el diseño plano se destaque en términos de color. Los diseñadores utilizan paleta de color solo un tono y agregue dos, tres, cuatro o más colores. La mayoría de estas opciones son tonos brillantes y completamente saturados que son opuestos, como el gris y el negro.

Cuando se trata del diseño de colores planos, se ignoran muchas de las reglas tradicionales sobre combinaciones y combinaciones de colores, y se utilizan paletas que cubren un arco iris con muchos colores.

Todo lo que vemos en los diseños de colores planos es una combinación de tono y saturación. Los diseñadores pueden usar bastantes tonos que se complementarán entre sí en la cantidad de profundidad de color establecida, ya sea que este color sea el color principal o sea el resultado de una combinación de colores secundarios, o tal vez este color sea de una parte completamente diferente. paleta de color y contiene colores que son negros o blancos.

Cuando se trata de paleta de color El diseño plano suele estar supersaturado con colores vibrantes, retro o monotonía. Esto no quiere decir que estos sean los únicos opciones, pero como hoy la tendencia solo se está desarrollando, estas opciones son ahora las más populares.

Colores brillantes

Brillante paleta de color a menudo caracteriza el diseño plano ya que evoca diferentes sentimientos. Los colores vivos funcionan especialmente bien sobre colores normales, también contra fondos oscuros, creando contraste y atrayendo los ojos de los usuarios.

Entonces, ¿por dónde empiezas?

FlatUIColors.com tiene una excelente lista de inicio de algunos de los tonos más populares en diseño plano. De azul brillante y verde a amarillo y naranja. El sitio es un gran comienzo para utilizar el diseño plano en su proyecto, porque puede seleccionar y descargar colores y diferentes combinaciones de colores de forma gratuita. (Personalmente, me gustan los tonos grises y tranquilos).

Si desea combinar sus propios colores vibrantes en un diseño plano, elija simplicidad y colores que tengan el mismo tono y saturación.

Ejemplos sorprendentes: Pruebe estas combinaciones de colores juntos o por separado en grupos para crear una paleta de colores más plana. Cada uno de estos colores se contrastará con un fondo blanco o negro para lograr el máximo impacto.

Colores populares: azul, verde y violeta

Colores retro

Los colores retro también son una opción popular cuando se trabaja con diseños planos.

Estos tonos menos saturados se basan en el brillo paleta de color pero con la adición de blanco para hacerlos más tenues. La paleta de colores retro a menudo contiene mucho naranja y amarillo y, a veces, rojo o azul.

Es más común ver colores primarios y secundarios usados ​​en paletas retro cuando se trabaja con diseños planos, debido al suavizado del tono de color.

Ejemplos retro: Los colores retro funcionan mejor cuando se destacan como colores dominantes. Combínalos con imágenes o colores apagados para obtener mejores resultados.

Colores populares: naranja, melocotón o azul oscuro.

Colores monótonos

Los colores monótonos combinados con diseños planos están ganando popularidad a un ritmo rápido. Estos paletas de colores confíe en colores únicos, blanco y negro, para crear una paleta vibrante pero distinta.

La mayoría de los esquemas de colores monótonos utilizan dos o tres colores como base. La elección de color más popular parece ser el azul, pero muchos diseñadores optan por un esquema monótono basado en el negro (gris, por ejemplo) o como el rojo para los botones.

Otra opción es crear un efecto con pequeñas variaciones de color monótonas. Si comienza con azul y agrega tonos de verde y crea un esquema azul-verde.

Los colores monótonos son especialmente populares para aplicaciones móviles y diseños móviles.

Ejemplos monótonos: Al igual que con otras paletas de colores, el contraste también debe usarse en esquemas monótonos. Mezcle tonos distintos al color base. Comience con Saturado (100%) y tonos de 50%, 20% y 8%.

Conclusión

Lo único que realmente hace que el diseño plano funcione es que la tendencia es nueva e interesante.

Creación paleta de color que coincide con el tono de su proyecto, muestra a los usuarios cómo usar su sitio, es visualmente interesante y divertido. Preste atención no solo a algunas de las reglas tradicionales de combinación de colores, sino también a sus propios gustos al crear paletas de colores planos.

En este artículo, te presentaré el diseño plano. Probablemente ya hayas escuchado algo sobre esto, ya que el flat se ha convertido en una de las principales tendencias en la web durante los últimos años.

Hoy veremos qué es el diseño plano, cómo surgió y qué necesita para crear un diseño limpio, vibrante y receptivo.

Puede encontrar buenos ejemplos de diseño plano en http://market.envato.com/. Hay toneladas de diseños, íconos y plantillas para brindarle una comprensión sólida de cómo se ve el diseño moderno. .

1. ¿Qué es el diseño plano?

Diseño plano - estilo moderno interfaz de usuario, así como diseño gráfico, caracterizado por el minimalismo. El diseño plano se caracteriza por el uso de un mínimo de elementos y la ausencia de diferentes texturas, sombras y efectos de luz, por ejemplo: colores mezclados, degradados, reflejos, etc.

Flat se opone al skeuomorfismo( El esqueuomorfismo es un principio de diseño cuando a un producto se le da la apariencia de otro, es decir cuando se copian varios elementos de la interfaz de objetos reales - traducción aprox.) así como un diseño rico Sin embargo, hay que decir que el diseño plano no es en absoluto tan simple como parece a primera vista. Incluye algunas características del esqueuomorfismo, pero hablaremos de eso un poco más adelante.

En general, flat ayuda a mantener al usuario concentrado en el contenido sin distraerse con imágenes. El diseño plano enfatiza la simplicidad de los elementos al tiempo que hace que la interfaz sea más receptiva, agradable y más fácil de usar.

2. Un poco de historia

Se sabe que el diseño plano existió mucho antes de que se convirtiera en una tendencia global en la web. El diseño plano fue bastante popular en los años 80 debido al hecho de que la técnica en ese momento aún no estaba lo suficientemente desarrollada para soportar efectos complejos, texturas y sombras. Sin embargo, incluso entonces, el diseño se esforzaba por lograr el escepticismo, tratando de hacer que los elementos de la interfaz fueran lo más realistas posible.

El diseño plano, en la forma en que lo vemos ahora, comenzó a ganar popularidad después de que Microsoft comenzara a producir productos en el llamado estilo metro. Metro es un diseño de interfaz de usuario de Microsoft que sorprende por su estilo y simplicidad.

En 2010 año Microsoft lanzó Windows Phone 7, que utilizaba un diseño plano con bordes afilados y gráficos simples heredados de uno de los primeros productos. Microsoft (Zune). Más tarde, inspirado por el éxito, Microsoft lanzó el sistema operativo Windows 8 basado en el mismo estilo plano de Metro.

Después de todo, el diseño plano alcanzó su punto máximo en 2013 cuando Apple lanzó iOS 7, con un diseño completamente nuevo con elementos de interfaz de usuario completamente rediseñados, incluidos iconos y fuentes. Apple ha creado principios visuales de la interfaz de usuario y el diseño de iconos .

Poco después, Google también comenzó a usar el estilo plano en sus aplicaciones y páginas web, llamándolo Diseño de materiales... Google incluso tiene una sección completa dedicada a este estilo, que incluye una descripción de los objetivos del diseño web, sus principios y pautas para crear varios objetos de diseño: iconos, diseños, etc.

Desde entonces, el plano se ha convertido en una tendencia clave en el diseño web, haciendo que los sitios web, las aplicaciones y los elementos de la interfaz sean elegantes, limpios y con estilo.

Así, existen tres ejemplos globales de diseño plano de empresas, sin los cuales es difícil imaginar mundo moderno tecnologías:

Diseño de Metro de Microsoft

Diseño de Apple iOS 7

Diseño de materiales de Google

3. Recuerda la limpieza

El diseño plano, aparentemente, se denomina “plano” por la falta de elementos tridimensionales y efectos realistas como: degradados, texturas, reflejos, medios tonos, sombras. Recuerde, el estilo plano es una forma bidimensional (plana) de representar objetos.

Además, en el diseño plano, los objetos se representan de forma muy simplificada y estilizada.

Y a veces incluso se usa solo una silueta o los contornos de un objeto, es decir, lo suficiente para que el objeto sea reconocible, pero sin sobrecargarlo con detalles menores.

El minimalismo se ha convertido en una tendencia mundial en estos días: la simplicidad de las formas y el uso de bordes afilados crean un diseño limpio y agradable a la vista. Los formularios simples son más fáciles de entender y comprender. Esto mantiene el diseño minimalista, limpio, sin darle un aspecto ajetreado y desordenado.

4. Perfección

Sepa que cuando se trata de crear íconos planos y elementos de interfaz de usuario, debe hacer que se vean nítidos, ordenados y perfectos en píxeles. cuanto más se pueda. Además, esto se aplica tanto a los gráficos de trama como a los vectoriales.

Todo está claro con Adobe Photoshop: funciona con gráficos de mapa de bits, que se basan en píxeles.

Sobre Programas de Adobe Illustrator, luego usa gráficos vectoriales, que consisten en curvas y líneas llamadas vectores, que vienen dadas por fórmulas matemáticas.

Érase una vez, Adobe Illustrator no era mucho programa conveniente para crear gráficos de píxeles perfectos. La buena noticia es que Últimas Versiones Los ilustradores se han convertido en una gran herramienta para crear buenos gráficos.

Debo decir que los gráficos vectoriales implican principalmente trabajar con formas simples y planas, colores sólidos y cuadrículas. Adobe Illustrator es muy flexible en la configuración y le permite adaptar la cuadrícula a sus necesidades, alinear objetos y usar diferentes tipos chasquido. Esto facilita la creación de un diseño perfecto que se vea limpio y elegante en cualquier pantalla. Si desea aprender a crear gráficos perfectos, debe leer el artículo: Cómo crear ilustraciones con píxeles perfectos con Adobe Illustrator .

5. Color

Una de las características más específicas del diseño plano, además de las sombras, es el uso del color. La mayoría de los colores que utiliza el diseño plano en sus elementos se componen de unos pocos colores base.

El color en el diseño plano se distingue por el brillo, la saturación y la riqueza.El esquema de color plano no se limita a unos pocos colores especiales; contiene muchos tonos, y su elección depende solo de lo que está representando, ya sean iconos de dulces u objetos de estilo retro en una paleta retro sofisticada.

Supongamos que es un diseñador de interfaces con un buen conocimiento de las paletas de colores y está experimentando con la barra de colores en Photoshop e Illustartor, mezclando colores a su gusto. Sin embargo, este proceso es bastante complicado y requiere mucha intuición, experiencia y habilidades. Aquí hay algunas herramientas que pueden ayudarlo a crear su propia paleta de colores.

Algunos son adecuados para todo tipo de diseños e ilustraciones, no solo para diseños planos. Por ejemplo, Adobe Color CC, más conocido como Cooler. Hoy en día se puede acceder tanto a través del sitio web como directamente a través de los productos de Adobe. Cooler es una herramienta muy flexible que le permite crear su propia paleta de colores o elegir paletas personalizadas de la biblioteca.

Otro generador de paleta de colores simple y útil es Coolors. Simplemente presione la barra espaciadora y el programa generará una paleta de colores, puede corregir los colores, también hay una función de exportación.

Hay varios otros servicios similares con paletas personalizadas que pueden resultarle útiles. Sin embargo, hay una herramienta creada específicamente para el diseño plano, FlatUIColors.com por Designmodo - un servicio con un conjunto de colores "planos", muy conveniente para trabajar. Este sitio se ha vuelto muy popular entre los diseñadores que buscan buenas soluciones de color para diseños perfectos. ¡Intentalo!

Y también puede encontrar una variedad más amplia de colores y paletas en Guía de diseño de materiales de Google.

6. Sombras largas

Como se mencionó anteriormente, el diseño plano se caracteriza por la simplicidad, una gran cantidad de espacio libre, por eso Flat rechaza el uso de cualquier efecto. Sin embargo, hay un efecto típico del diseño plano. Este efecto se ha convertido en tendencia y en un rasgo característico del piso.

Estamos hablando de sombras largas ahora. Tienen algunas características típicas que hacen que este efecto sea reconocible, a saber, inclinación de 45 grados y talla grande(La sombra puede ser varias veces más larga que el sujeto mismo. Como resultado, las sombras largas dan al plano un efecto de profundidad.

Este efecto hace que el objeto parezca más tridimensional, pero al mismo tiempo lo deja en un contexto de diseño plano.

7. Trabajar con fuentes

La tipografía juega un papel importante en el diseño plano. A menudo, el texto se convierte en el elemento principal de la composición.

Flat generalmente usa tipos de letra simples que hacen que todo el diseño sea limpio y legible. Puede encontrar muchas fuentes gratuitas en Adobe Typekit si utiliza productos de Adobe. También encontrará muchas buenas fuentes gratuitas en Font Squirrel. Pero recuerde leer la licencia si tiene la intención de utilizar la fuente comercialmente.

La mayoría de las veces, en diseño plano, se acostumbra usar mayúsculas y colores contrastantes, esto hace que el texto sea más legible.

Use las fuentes con cuidado, recuerde que debe enfatizar y coincidir con el diseño, no aparecer como un elemento separado, esto no significa que no pueda usar fuentes serif o fuentes complejas escritas a mano. Simplemente manténgalo mínimo y mantenga todo en equilibrio. Sin embargo, flat todavía usa fuentes sans-serif con más frecuencia, ya que se ven más estrictas y ordenadas.

8. Pros y contras del diseño plano

A pesar de que el diseño plano se ha vuelto tan popular debido a sus muchas ventajas, todavía tiene desventajas que enfrentan los diseñadores al usar este estilo. Echemos un vistazo a los pros y los contras.

pros

Popularidad

El diseño plano se ha convertido en tendencia, recogiendo cada vez más comentarios positivos / de diseñadores y diseñadores web, y no parece que esté perdiendo terreno en absoluto. Al contrario, se está difundiendo cada vez más, adquiriendo algunas formas y características nuevas, volviéndose cada vez más creativo.

Sencillez

El diseño plano es simple, minimalista y limpio. Flat on the web ayuda a los usuarios a concentrarse en el contenido en lugar de distraerse con imágenes. Esto también funciona para interfaces de aplicaciones móviles: el diseño limpio con botones grandes hace que la experiencia móvil sea perfecta.

Brillo

El color es otra ventaja interesante en el diseño plano. Los colores brillantes y saturados se ven atractivos y limpios, y la ausencia de degradados hace que el diseño sea elegante. Además, estos colores puros lo hacen más positivo, presentable y el diseño plano crea el estado de ánimo adecuado.

Defectos

El plano tiene muchas más ventajas, pero ningún diseño es perfecto y no podemos idealizarlo. Estas son algunas de las desventajas del diseño plano que debemos mencionar:

Falta de respuesta

A veces, la falta de detalles o elementos visuales importantes dificulta el proceso de creación de una interfaz fácil de usar, y esto generalmente hace que todo el diseño no responda. No todos los usuarios encuentran cómodo el piso, porque puede ser difícil encontrar elementos en una página web en los que tenga que hacer clic o tocar en la pantalla. teléfono móvil porque no son interactivos.

Problemas de impresión

Como se mencionó anteriormente, no todas las fuentes pueden ajustarse a un diseño plano. A veces, un tipo de letra tan rico y afilado parece realmente equilibrado y elegante. Sin embargo, si la fuente se elige incorrectamente, puede arruinar todo el diseño. Tienes que tener una idea clara de qué fuentes son buenas para flat y cuáles no. La falta de experiencia hace que elegir una fuente sea muy difícil.

Efectos visuales débiles

Debido a las limitaciones en el uso de efectos, colores y fuentes, el plano puede parecer demasiado simple y frío. Su minimalismo también puede ser su principal inconveniente: otros diseños planos terminan luciendo exactamente como el tuyo. Por lo tanto, es muy difícil hacer que sus íconos o páginas web sean diferentes del diseño de otra persona, porque está utilizando las mismas formas simplificadas, paletas de colores limitadas y fuentes similares. Como resultado, el diseño plano puede volverse aburrido con el tiempo.

9. Tendencias futuras del diseño plano

Esto no quiere decir que el diseño plano se haya formado completamente y se haya detenido a su manera, tal vez sea debido a sus deficiencias, mencionadas anteriormente, que el plano tiende a desarrollarse y cambiar, adquirir nuevas características y mejorar la expresividad visual.

Si te fijas bien ultimo ejemplo diseño plano, puedes ver que realmentepoco a poco a partir de sus rigurosas herramientas y comienza a agregar efectos sutiles como: degradados, sombras, iluminación y otros efectos visuales.

Estas pequeñas cosas le dan al diseño plano algo de profundidad sin sobrecargar los detalles como un diseño esqueuomórfico. Estas pequeñas mejoras hacen que el piso sea más receptivo y cómodo, además de brindar un aspecto fresco, lo que hace que el piso sea más flexible y versátil.

Así, el piso no pierde sus características, pero se vuelve más interesante y flexible.- realmente se pone mejor.

conclusiones

Por lo tanto, discutimos algunos hechos de la historia del diseño plano y hablamos sobre colores, formas y tipografía. Examinamos diferentes puntos de vista, hablamos de las ventajas y desventajas de los planos y aprendimos algunos de los principios fundamentales para crear un buen diseño.

Espero que haya aprendido algo de información nueva de este artículo, o al menos lo haya encontrado interesante. Debes probar el diseño plano si no lo has hecho antes.

Después de todo, ¿qué más debería mencionarse sobre el diseño plano?

Si realmente te gusta el plano con sus bordes afilados, colores intensos y fuentes nítidas, su pureza y minimalismo, ¡adelante!

Es tendencia, pero como con cualquier estilo gráfico, no se limite a una técnica. Si el plano está de moda, esto no significa que no pueda utilizar otros estilos en su proyecto. El esqueomorfismo, con sus pequeños detalles y texturas, también puede ser una buena solución. Lo más importante es recordar que el diseño es diferente para cada proyecto, debe expresar su espíritu, propósito, esencia, sin dejar de ser conveniente y funcional. ¡Adelante!

El diseño plano es una de las tendencias en diseño web que se ha mantenido relevante durante un tiempo sorprendentemente largo. En los últimos años, este diseño se ha utilizado activamente en el desarrollo de interfaces para aplicaciones de escritorio, web y móviles. También el diseño plano se utiliza activamente en la creación de materiales gráficos impresos. Obtenga más información sobre el diseño plano en esta guía en línea. Hoy, el tema de nuestra conversación no será el diseño plano en general, sino su parte específica: los colores planos.

El diseño plano obtuvo su nombre por una razón: su concepto excluye el uso de elementos tridimensionales, sombras profundas y degradados brillantes (del inglés “flat” significa “flat”). Los botones, iconos y otros elementos gráficos se ven simplistas y claros, pero siguen siendo atractivos.

No es tan fácil desarrollar un diseño de sitio web plano. Las principales dificultades surgen con los elementos interactivos, porque el diseño debe enfatizar la diferencia entre contenido estático y dinámico. Solo las sombras y los marcos sutiles pueden indicar a los usuarios qué elementos son interactivos. Por lo tanto, para crear un diseño plano "equilibrado", debe pensar en cada elemento hasta el más mínimo detalle, y esta no es una tarea fácil.

Elegir colores planos para la combinación de colores.

Es difícil sobreestimar la importancia de los colores en el diseño web. Por ejemplo, una buena puede atraer a más lectores. Debe decirse de inmediato que el diseño plano es único en todos los aspectos relacionados con el color. Los colores vibrantes del diseño plano captan inmediatamente la atención de los usuarios. A diferencia de los esquemas de color tradicionales de dos o tres tonos, los diseños planos están diseñados en cuatro o más colores. Muy a menudo, estos son tonos saturados combinados con gris o negro.

Las reglas tradicionales de combinación de colores apenas se aplican a los diseños planos. En el diseño plano, no son los colores en sí los que son importantes, sino su tono y saturación. A pesar de que se pueden usar varios colores completamente diferentes en el diseño de un diseño, deben combinarse en profundidad. Por sí mismos, los colores planos pueden ser primarios o secundarios. Incluso puede ser una combinación contrastante de blanco y negro.

Pasando de la teoría a la práctica, me gustaría hablarles sobre un conjunto de colores planos de W3.CSS. Esta colección contiene varios esquemas de color para crear sitios web. Aquí encontrará colores para diseño de materiales, colores planos, colores metro de Windows y Windows phone 8. Esta colección se acompaña de ejemplos de código HTML y CSS para que pueda aplicar rápidamente la combinación elegida.

Si eres un principiante y no sabes por dónde empezar, echa un vistazo a Flat UI Colors. En este sitio, puede copiar el color que desee y luego encontrarlo en un editor de gráficos pegando el valor apropiado. Como puede ver, la selección está dominada por tonos brillantes, desde verdes y azules hasta amarillos y naranjas.

Sin embargo, incluso en el diseño plano, existen restricciones en la elección de colores. Por ejemplo, es poco probable que vea una combinación de rojo, amarillo y azul en el mismo diseño. Los diseñadores prefieren tonos más ricos y mezclados.

¿Quieres desarrollar un diseño de sitio web plano? Echa un vistazo a las plantillas de MotoCMS 3.0 que están diseñadas pensando en el diseño plano. Comparamos las plantillas con varios esquemas de colores planos para mostrar cómo afectan las propiedades de la interfaz de usuario.

Colores brillantes. Los azules, verdes y púrpuras vibrantes se destacan bien sobre fondos blancos o negros. Estos son los colores que se utilizan a menudo en los diseños de sitios web planos.

Plantilla MotoCMS 3.0 para sitio web de servicios de impresión

Plantilla MotoCMS 3.0 para sitio web de servicios de impresión- una excelente solución para un proyecto relacionado con la impresión y la impresión. Sin embargo, el tema de la plantilla se puede cambiar fácilmente. El diseño de la plantilla está diseñado con principios de diseño plano en mente. A los usuarios se les ofrecen 8 opciones para controles deslizantes y galerías junto con 20 widgets y módulos. Todo esto te ayudará a crear un proyecto online popular y original.

Colores retro. Suelen ser naranjas y amarillos pastel combinados con rojos y azules vibrantes. La mayoría de las veces, los colores planos primarios en un estilo retro se combinan con los secundarios, lo que facilita lograr un efecto de mezcla.

Una publicación con algunos consejos y pautas para elegir la paleta adecuada para infografías.

“Si bien es fácil encontrar buenas paletas en estos días, aún es difícil encontrar la combinación de colores adecuada para la visualización de datos”, escribe Zheng. En su búsqueda de colores para infografías, identifica tres problemas principales.

Paleta de colores de interfaz de usuario plana
Paleta de colores de interfaz de usuario plana en protapony
Paleta de colores de interfaz de usuario plana en blanco y negro

Primero, no todas las paletas están diseñadas para renderizar. Por ejemplo, los colores de las pautas de diseño de la interfaz (como Google Material Design) pueden ser difíciles de percibir para las personas daltónicas y diferir ligeramente entre sí.

4 paletas de colores de Color Hunt

En segundo lugar, no hay suficientes colores en muchas paletas existentes. Como ejemplo, cita el sitio web Color Hunt, donde puede encontrar combinaciones exitosas de cuatro colores. Pero las infografías suelen necesitar de 6 a 12 colores.

Paletas de degradado del sitio web Color Hunt, cuyos colores serán difíciles de distinguir en las infografías.
La diferencia entre una paleta de degradado de cuatro colores y de 12

En tercer lugar, los colores de algunas paletas difieren ligeramente en brillo, por lo que será difícil distinguirlos entre sí, especialmente si están uno al lado del otro.

Para elegir lo bueno combinación de colores para la infografía, Zheng aconseja utilizar tres reglas.

De izquierda a derecha: paleta azul de material design, también en protapony, también en blanco y negro
La proporción de brillo y cromaticidad para daltónicos y personas con visión normal.

Primero, debe verificar si los colores de la paleta tienen una diferencia de brillo suficientemente fuerte. "La diferencia de brillo será universal", escribe el diseñador. Además, una gran diferencia de brillo ayudará a adaptar la paleta para personas daltónicas. Puedes ver cómo lo percibirán las personas con protaponia (disminución de la sensibilidad al rojo), deuteranopía (disminución de la sensibilidad al verde u otro color), así como si lo traducimos a blanco y negro.

En segundo lugar, es mejor usar combinaciones naturales para la paleta. Como ejemplo, Zheng cita la transición del amarillo claro al morado oscuro y del morado claro al amarillo oscuro. “Desde un punto de vista puramente matemático, deberían verse más o menos iguales”, escribe, señalando que la primera combinación parece más natural que la segunda. El diseñador conecta esto con el hecho de que una persona está acostumbrada a ver combinaciones de la primera paleta en la naturaleza, por ejemplo, al atardecer.

Malla para trabajar con degradados

En tercer lugar, al dar forma a la paleta, es mejor utilizar un degradado para sentir mejor la diferencia de color. Para facilitar las cosas, Zheng recomienda hacer una malla con flores en Photoshop, como la de la captura de pantalla anterior. Los degradados, dice, son efectivos para elegir dos y 12 colores.

Paletas exitosas para infografías
Paletas exitosas para infografías

Además, el diseñador recomendó 12 recursos útiles para trabajar con colores y paletas. Su lista se puede ver