¿Son compatibles el bokeh y el diseño plano?


9

Me gustaría saber si es correcto usar un estilo bokeh de fondo y combinarlo con un diseño plano de contenido.

Algo como:

ingrese la descripción de la imagen aquí


44
Bienvenido a GD.SE. No creo que haya reglas estrictas.
joojaa

Jaja, gracias por tu increíble comentario: D ¿Te sorprende cuando lo ves?
Zooly

En este caso, realmente no funciona al 100%, pero diría que son más las imágenes particulares. Podría funcionar con un mejor combo y un campo de juego apropiado para el primer plano. Todavía no está tan mal. (por ne es más los colores)
joojaa

Claro, acabo de tomar el primer bokeh que encontré, y el primer color plano en mi mente ^^
Zooly

3
Esta es una pregunta puramente subjetiva en su mayor parte.
DA01

Respuestas:


5

Bokeh y diseño plano ciertamente pueden jugar bien. No es raro ver un diseño plano utilizado con imágenes con propiedades similares, como texturas sutiles o fotografías de enfoque suave.

Pero es algo con lo que debes tener cuidado, porque estás enturbiando la distinción de primer plano / fondo que de otro modo sería perfectamente nítida que obtienes con un diseño plano. Esto es particularmente cierto para el bokeh con sus grandes puntos potencialmente llamativos.

  • Parte del objetivo del diseño plano es que es simple, limpio, ordenado y claro dónde mirar. Debes tener cuidado de que los efectos bokeh no rompan eso. Asegúrese de que sea sutil y tenga aún más espacio en blanco del que normalmente tendría alrededor de los elementos que deben destacarse como primer plano. Hay aproximadamente la cantidad correcta de espacios en blanco en su ejemplo.
  • Deberá tener cuidado con el funcionamiento de las relaciones de color. El diseño plano tiende a necesitar colores simples y consistentes que se destaquen claramente , y deberá tener cuidado de que el colorido fondo bokeh no lo reduzca. Por ejemplo, en su ejemplo, reduciría el contraste y la saturación del fondo para que el primer plano sea más claro y nítido, y tenga cuidado con la ubicación de los puntos brillantes en relación con el contenido (teniendo en cuenta que tendrá un control limitado sobre esto en Un diseño receptivo).
  • Es bastante común ver grandes fotografías de bienvenida clara / "héroe" como contenido de primer plano utilizado en diseño plano. Si está haciendo esto, deberá tener en cuenta el hecho de que estos no se destacarán tan claramente como lo harían contra un fondo plano y limpio. Nuevamente, es porque está enturbiando la distinción de primer plano / fondo normalmente perfectamente nítida.
  • Todo buen diseño es impulsado por la función sobre la forma (el propósito de las cosas va antes que su estética) y el diseño plano se trata de esto. Asegúrese de saber por qué está agregando el bokeh para este diseño en particular y por qué vale la pena los pequeños compromisos.
    • "Se ve bien"? No es suficiente.
    • "¿Saca X característica de la marca que de otro modo se perdería"? Mejor.

Ciertamente se puede hacer que funcione, pero deberá tener en cuenta estas cosas.


Gracias por tu respuesta completa! Estoy de acuerdo con usted, necesitaría una discusión sobre por qué estoy usando este combo en lugar de solo plano. Y ... no tengo! Tienes razón, lo encontré bonito ... pensé que le da dinamismo a mi sitio web (patrón de una página), pero tengo que probarlo en condiciones reales y, como dijiste, pensar en las diferentes capas, y elige los colores perfectos para acentuar la información. Gracias por su punto de vista;)
Zooly

@HugoTor Como se observa en esta respuesta, el fondo bokeh puede ser una mala idea si está usando una gran foto de héroe. En ese caso, una buena justificación para el fondo bokeh puede ser si NO está usando héroes, y cree que su diseño plano sin fondo es demasiado visualmente soso. En ese caso, puede ser un buen sustituto de las fotos de primer plano, siempre que tenga cuidado de mantener el contraste de primer plano / fondo.
reconocedor

9

El diseño plano no es una religión.

El "diseño plano" se ha enlodado en el último año. Hay muchos diseñadores que lo sostienen como una especie de sistema dogmático de estándares. Y el éxito del diseño de Material (y el Metro de MS, en menor medida) ha creado líneas duras más imaginarias que realmente no existen.

Plano es lo que haces. El principio subyacente es evitar el uso excesivo de sombreado o modelado o un falso diseño visual realista , como vimos con el grotesco esceptomorfismo de Apple . Eso no significa que el sombreado, la textura, la fotografía o la decoración de cualquier tipo desaparezcan. Aún tiene que diseñar su interfaz.

Hazlo tuyo

En respuesta a su pregunta: no existe una regla contra el bokeh, o la fotografía con problemas de enfoque u otras texturas e imágenes de fondo en cualquier estilo de diseño. Es cómo interpretas las influencias estilísticas que hacen que una marca se distinga. Debería desarrollar un nuevo dialecto del lenguaje visual, no hablar el de otra persona.

La mayor consideración, como otros han señalado, es la usabilidad. Solo asegúrese de que su fotografía no haga que la interfaz sea un desastre confuso. En algunos casos, incluso está bien que el fondo se convierta en una parte muy dominante de la experiencia, solo asegúrese de obtener la "conversión" que está buscando, sea lo que sea.

En la naturaleza

Windows Metro es posiblemente uno de los ejemplos más planos de Flat en la memoria reciente. Y sin embargo, tiene cosas como esta.

Pantalla de clima de Windows 8

Google Material también es bastante militante sobre Flat, pero las imágenes grandes son fundamentales para atraer a la humanidad a su brillante paleta.

ingrese la descripción de la imagen aquí

El iOS 7 de Apple fue un intento apresurado de alcanzar a Flatness. Para bien o para mal, alguien allí hizo que el fondo difuminado fuera una metáfora central del sistema, que está directamente influenciada por la fotografía bokeh.

ingrese la descripción de la imagen aquí


1
Esta es una respuesta absolutamente excelente.
Carreras de ligereza en órbita el

1
Thx @LightnessRacesinOrbit! Creo que este tema merece algo de desmitificación (◠‿◠)
vestidos de civil el

Gracias por tu increíble respuesta. Me pregunto, si agrego un alivio a mi elemento plano, para distinguirlos, ¿se convertirá en algo así como Diseño de materiales? Lo que prefiero (en estos ejemplos) es la aplicación de Google: esto es claro, pero hermoso. Si hay una cosa que no me gusta en Flat Design sin fotografía de fondo es la sencillez. Creo que podría ser realmente aburrido para el usuario ver solo cuadrados y rectángulos.
Zooly

1
Estás en el camino correcto. Creo que esa misma preocupación es lo que el equipo de iOS estaba tratando de resolver con cosas como el desenfoque del fondo. Desafortunadamente, terminaron con una interfaz más desordenada y menos usable. Eso es contra lo que estoy advirtiendo.
vestidos de civil

1

Yo diría: Bokeh y bordes planos (sin relleno) funcionan bien. Pero debe restringir el uso a encabezados y elementos destacados.

Actualización (lo siento, estaba apurado y olvidé pegar el resto de la respuesta):

Como ejemplo, podemos tomar el siguiente encabezado: Dribbble Shot # 848287

A pesar del fuerte bokeh, las líneas finas del logotipo + hr no son demasiado agresivas y se ajustan bien. Un relleno no funcionaría bien (cubriría demasiado la foto).

Otro ejemplo: de @KinaoleCanada

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.