Hola Habr

En los últimos 3 meses, aproximadamente el 40% de mi tiempo de trabajo se comunica con diseñadores. Gracias, pero no me arrepiento. Es una broma. Necesario. Diseñadores.

Ya me han demostrado que el diseño no se trata de dibujar, sino de diseñar. Y sobre por qué es así, encontré una explicación accesible de Kostya Gorsky , ex director de arte de Yandex. El video está disponible aquí .

Ilustración de Tanya Zadorozhnyaya .

Algunas diapositivas de presentación se adaptan / recrean para mejorar la calidad de la imagen.

Diseño para gerentes

Hola a todos. Mi nombre es Kostya, estoy haciendo un poco de diseño y te diré algo sobre el diseño. No tendré una conferencia, contaré 7 historias. No están relacionados entre sí.

No se puede hacer una presentación sobre diseño sin Steve Jobs, así que tuve que poner una diapositiva:

solía comenzar cualquier presentación diciendo por qué debería pensar en eso, ese diseño es muy importante, asegúrese de hacer el diseño y todo eso. Parece que es hora de dejar de probarlo, creemos que todos creen en el diseño como nosotros, por lo que podemos ir directamente al grano.

Muchos de mis amigos piensan que el diseño es como en la imagen. Algo como " WOW " , BRILLANTE , EXTRAORDINARIO , algún tipo de talento, creatividad.

Todas mis historias serán sobre el hecho de que esto no es así. Esta actividad es bastante simple, comprensible, absolutamente accesible para cualquiera de ustedes.

Al igual que todos los mitos y leyendas sobre el diseño en sí, muchas personas piensan que los diseñadores son algún tipo de personas especialmente creativas, que uno tiene que nacer con talento, que uno no puede aprender esto, o viceversa, que uno debe aprender durante años y preferiblemente en algún lugar de Londres.

Por supuesto no. De hecho, cualquier persona puede convertirse en diseñador, y me parece que cualquiera debería serlo, en un grado u otro.

Aquí están las historias de las que vamos a hablar:

Los dos primeros son largos, el resto son más cortos. No están conectados entre sí, están en orden aleatorio, tienen encabezados aleatorios.

1. ¿El diseño tiene un proceso?

Todo comienza con una hoja de papel blanco. Supongamos que tiene una tarea, por ejemplo, hacer la interfaz de un nuevo correo del futuro o hacer un navegador del futuro. He estado trabajando en un navegador recientemente, por lo que la mayoría de los ejemplos sobre mí serán sobre mí. ¿Cómo lidiar con tal tarea? Llegamos al trabajo a las 9 a.m., colocamos una sábana blanca frente a nosotros en la mesa, nos sentamos y comenzamos a dibujar el navegador del futuro ...

Pero si lo haces, entonces, por supuesto, necesitas talento, y todo lo que estaba en las primeras diapositivas no funcionará.

De hecho, si comienzas con una hoja en blanco, entonces ya estás haciendo algo mal. El diseño es un proceso muy simple que consta de varios pasos.

Su número exacto se dibuja de manera diferente en todas partes, hay 4-3 pasos o 5-6, no importa. Todo se reduce a 5 pasos básicos, y tienen diferentes nombres. Esto no es importante. Elegí promedios.

Siempre comienza con la investigación. Su significado es simplemente encontrar la información máxima sobre un objeto que ya existe. Hagamos lo que hagamos, alguien antes que nosotros ya ha hecho algo similar. La humanidad siempre se comunica de alguna manera, si hacemos un nuevo servicio sobre comunicación, o sobre correo, entonces podemos estudiar cómo se comunicaban las personas antes, cómo se comunican ahora y qué lograron las personas al respecto.

A continuación, interpretamos lo que hemos rastrillado. Es decir, simplemente estamos tratando de sacar algunas cosas interesantes de toda esta masa de datos, aferrarnos a algo y establecer la tarea con precisión.

Luego generamos ideas. Este es un proceso completamente diferente durante el cual se nos ocurren muchas cosas.

A continuación, desarrollamos algunas ideas que nos gustan con más detalle,
recopilamos prototipos, probamos algunos, los seleccionamos y mejoramos en el transcurso de un número infinito de iteraciones. Entonces, este proceso lleva a la solución del problema.

1. Investigación

Hay muchos diferentes, como dije, el significado de esto es entender lo que la humanidad ha logrado inventar.

En Rusia, por alguna razón, es costumbre saltarse esta etapa. Se cree que esto es aburrido o no necesario y "... en general, vamos a encontrar algo ahora, ya lo sabemos todo".

En Occidente, se acercan a esto de manera formal, y una persona simplemente no puede realizar la tarea si no ha presentado previamente una gran cantidad de informes sobre cuánto ha examinado. De hecho, cuando miras a tu alrededor, después de haber realizado la investigación, generalmente aparecen pensamientos en tu cabeza, algunas ideas, cómo resolver aún más el problema.

Déjame mostrarte un par de ejemplos de investigación en el navegador. Ahora sabes algo sobre los navegadores. Veamos qué sucede si revisamos brevemente la historia de los navegadores. ¿Cómo cambiará su comprensión de este tema? ¿Deseará pensar inmediatamente en algo sobre el navegador del futuro?

Por ejemplo, los navegadores masivos comenzaron en 1993 con el navegador Mosaic.

Como puede ver, ya es similar a lo que es ahora: ya tiene botones de retroceso / avance, tiene una dirección de página y una barra de direcciones, y un campo grande para mostrar la página. Han pasado 20 años, los navegadores son los mismos hasta el día de hoy, excepto por los detalles.

Luego Opera en 1994.

Esta es la empresa que presentó la mayoría de las innovaciones en los navegadores. Es cierto que estas innovaciones a menudo desaparecieron o aparecieron en los productos de los competidores, y luego se convirtieron en la corriente principal.

En 1994, se les ocurrió la idea de que era posible mostrar varias páginas en una ventana a la vez, de forma similar a como era en el entorno de desarrollo para programadores.

Esta idea no echó raíces, pero en el futuro llevó a pestañas. Todavía hay botones divertidos para construir estas ventanas de diferentes maneras.

Luego, en 1995, estaba Netscape Navigator 2, que ya es un navegador casi moderno.

Tiene toda una barra de herramientas con botones. Lo curioso aquí es el ícono a la derecha. La animación giraba aquí. No sé si lo recuerdas o no, pero solía ser que la página se estaba cargando durante mucho tiempo, tenías que entretener de alguna manera a la persona mientras se estaba cargando.
En esta ventana se mostró una breve animación, siempre la misma, naturalmente.

Luego Internet Explorer 3, en el que apareció CSS.

Sus imágenes han cambiado un poco, por ejemplo, los botones en Netscape eran convexos, pero aquí se convirtieron en una barra de herramientas plana, en la que la textura ya estaba dibujada contra el fondo: estaba de moda en ese momento. Aquí, también, hay un icono a la derecha, que gira animadamente mientras se carga la página.

A continuación, Internet Explorer 5, que difiere poco en apariencia del anterior. Hay cambios tecnológicos, ahora no es tan importante para nosotros (XMLHttpRequest → AJAX).

Y bang, Opera 5 en 2000, en el que 3 mega-innovaciones tienen lugar de inmediato.

En primer lugar, una pancarta. Lo pusieron directamente en el navegador, por supuesto, esto no se arraigó. Casi nadie lo vio en nuestro país, porque todos descargaron de inmediato la versión pirateada con el banner recortado. Pero los usuarios occidentales honestos, si descargaron Opera de forma gratuita, vieron un banner que siempre mostraba anuncios, y si pagaban dinero, el banner desaparecía.

Las pestañas también aparecieron aquí. Estan abajo. Los chicos de Opera solo miraron que en Windows hay un panel en la parte inferior, que muestra las ventanas abiertas en este momento: la barra de tareas. Tomaron todas las ventanas relacionadas con Opera, se mostraron dentro de sus ventanas, simplemente las agruparon de esa manera.

Esta cosa simple resultó ser muy conveniente, los botones para cambiar entre las ventanas se rediseñaron ligeramente, se colocaron en la parte superior, por lo que había pestañas, sin las cuales ahora es difícil imaginar el navegador.

Otra gran cosa: aquí, por primera vez, apareció un campo de búsqueda para buscar en Google sin acceder a la página de Google, e inmediatamente desde el navegador.

En 2007, Opera 9.2 ya tenía una función llamada marcación rápida cuando las capturas de pantalla de las páginas a las que voy aparecen con mayor frecuencia en la nueva pestaña.

En su caso, fue posible configurarme manualmente para varias de estas páginas, lo que quiero ver aquí, para que pueda ir a la página con un par de clics sin ingresar su dirección.

Y Chrome en 2008 hizo la última revolución poderosa hasta la fecha.

Si antes de eso el número de barras de herramientas se estaba extendiendo en los navegadores, había una barra Yandex, otra barra, una barra con marcadores, muchas barras diferentes, en general, el navegador se volvió grueso.
Chrome barre todo con una escoba de hierro, crea una interfaz minimalista muy delgada, combina la dirección y la barra de búsqueda en una, y la coloca en el centro.

¿Cuál será la próxima revolución interesante que pronto descubriremos? Aquí hay un
estudio tan simple.

Después de mirar las imágenes de lo que era, entendemos mejor por qué los navegadores son lo que son y dónde puede ir todo esto.

Investigación etnográfica

Tomamos a una persona, nos sentamos a su lado y solo miramos cómo trabaja. Lo hicimos muy barato. Dentro de la empresa, escribí una carta a la lista de correo sobre problemas que no funcionaban, había un texto como "si no eres un programador, tienes 5 minutos de tiempo libre y no te importa que te miremos, luego escribe".

Algunas personas respondieron, nos sentamos y observamos cómo usan los navegadores. Los programadores no pueden considerarse usuarios normales. Tienen hábitos y configuraciones completamente diferentes, pueden tener un montón de complementos allí, usan teclas de acceso rápido y todo tipo de otras cosas que no son características de una persona común. Por lo tanto, esta no es una audiencia relevante para nosotros.

En esta etapa, espiando a una persona, tratamos de entender algunas cosas interesantes que una persona no nota. Nadie puede decir lo que necesita, pero podemos espiar.

Por ejemplo, una persona inicia sesión en Facebook cada cinco minutos, y cada vez que realiza una compleja cadena de acciones: haga clic en el signo más, haga clic en el enlace de favoritos, abra la carpeta de redes sociales, haga clic en el enlace de Facebook allí y luego se carga Facebook. Sería posible para él poner este enlace en algún lugar inmediatamente encima. Este es un ejemplo descabellado, pero la conclusión es que, al mirar a la gente, puedes ver algunos caminos difíciles por los que caminan y pensar cómo puedes enderezarlos más tarde.

Y más sobre el estudio de los competidores. Cuando se nos ocurrieron los íconos, creamos una matriz, colocamos todos los íconos de las barras de herramientas de los navegadores y comenzamos a dibujar los nuestros.

Estos son algunos de nuestros intentos de colgar arriba y abajo. La final es la más alta. Hay detalles divertidos que estudiamos cuando pensamos en cómo dibujar íconos nosotros mismos.

Aquí hay un ejemplo de una lupa. Todos entienden que una lupa es un círculo y una varita. Pero, por cierto, es interesante que alguna nueva generación de niños que nunca hayan visto bucles físicos piensen que este es un símbolo de búsqueda: un círculo con una varita, y difícilmente imaginarán que detrás de esto, hay algún tipo de objeto de mundo real.

Pero todavía estamos imaginando cómo dibujar una lupa correctamente. Todos tienen un círculo en la parte superior, pero para algunos el mango se gira hacia la izquierda y otros hacia la derecha. ¿Cómo dibujamos? Sí, a la derecha lo sostienes con la mano derecha.

Sobre la opción, cuando la varita está a la izquierda, hay otra consideración interesante: en el mundo del diseño, se cree que la esquina superior derecha es la dirección más positiva. Y la lupa que mira hacia la esquina superior derecha, es muy positiva, es mucho más bonita que la lupa que se gira hacia la izquierda. Pero aún elegimos la lupa que sostienes con tu mano derecha.

Con los íconos de "actualizar página" fue más fácil, en primer lugar, se puede ver que para todos este ícono es un anillo abierto con una flecha, excepto IE, que tiene algo diferente allí.

La pregunta es, ¿en qué dirección debe mirar la flecha? Al principio, nos gustó la opción cuando miró hacia el ángulo más positivo, pero esta opción fue rechazada rápidamente, porque si imaginas que este ícono está fundido en metal y puesto sobre la mesa, con ese centro de gravedad, no podrá volcarse De esta situación, ella ya está bien, incluso puede retroceder por el contrario.

Por lo tanto, no hicimos esto, sino que elegimos uno que se ve en una dirección positiva, a la derecha, puede que no esté tanto en progreso, pero es fácil para ella darse la vuelta. Solo empújala un poco, ella se desplazará inmediatamente.

2. Interpretación

Cuando se realiza la investigación, comenzamos a interpretar los resultados y establecer objetivos

Volver a contar historias
Ordenar
Análisis
Conclusiones y conclusiones
Formulación del problema
Designación de marco

Esta será una historia separada, así que ahora no me detendré allí.

3. Formación de una idea.

Pero la formación de una idea es algo interesante.

Lluvia de ideas
Tecnicas creativas
Mejora

Probemos un ejercicio. Ahora debe tomar un trozo de papel y hacer que se vea así:

¿Sabes en qué se diferencia un chico diseñador de una chica diseñadora? Si le das una tarea ligeramente diferente, no solo dibujas círculos, sino que pides finamente, finamente, finamente sombrear toda la hoja A4, entonces las chicas pueden hacer esto, y los niños no. Según los estudios, la mujer promedio tolera el trabajo monótono mejor que el hombre promedio.

Ahora detectaré 1 minuto, y durante este tiempo debes intentar convertir tantos círculos como sea posible en diferentes objetos, pintando algo simple sobre ellos.

Por ejemplo, si dibujamos dos ojos y una boca, obtenemos una cara sonriente, si dibujamos una rama y una hoja, obtenemos una manzana, si dibujamos rayos, obtenemos el sol. Puede usar más de un círculo para un artículo, es decir hacer una cosa a partir de dos círculos, pero la tarea es obtener tantos objetos diferentes como sea posible. Un par de golpes son suficientes, pero para que sin su ayuda pueda entender lo que se dibujó.

Se da un minuto y ella dijo:

Por favor, deje a un lado las plumas. Casi todos pudieron extraer 5 ideas y más, pero más de 9 opciones atrajeron solo a 3 personas de la clase. Guau.

Podría resultar algo así, sin duda se dibujó en más de un minuto.

¿Cómo está el sentimiento general? ¿Qué sentiste ahora? ¿Estrés? ¿Fecha límite? Es interesante que cada uno de nosotros conozca decenas de miles de objetos redondos, ¿a dónde van todos en el momento en que necesita dibujarlos? Tenemos muchos bloqueos mentales y complejos en la mente que evitan que estas ideas salgan cuando sean necesarias.

En primer lugar, la situación me está poniendo de los nervios, el tiempo se acaba, la sensación de que ahora no tengo tiempo.

En segundo lugar, las personas suelen ser tímidas. Cuando se les da esta tarea a los niños pequeños, se les ocurren muchas más ideas. A pesar del hecho de que un director de arte experimentado debe tener tiempo para dibujar 15-20 ideas, para un diseñador 10 es un buen resultado, una persona genial puede lograr completar todos los círculos, creo que esas personas existen.

Pero los niños, especialmente si lleva niños pequeños, aproximadamente a la edad de una guardería, casi todos los niños llenan todos los círculos. Por supuesto, pueden estar atrapados con el hecho de que dibujan algo durante mucho tiempo, pero si la tarea se modifica ligeramente, por ejemplo, no es necesario dibujar, sino simplemente enumerar ideas, entonces obtienen una gran cantidad de ideas. Con la edad, esta capacidad se pierde, cuanto mayor es el niño, más difícil es para él pensar rápidamente en estas ideas.

Debido a la gran cantidad de complejos diferentes que tenemos, por ejemplo, la gente se avergüenza: "Maldita sea, bueno, parece que no soy capaz de dibujar, bueno, parece que se podría dibujar un perro allí, pero no es del todo redondo, y no soy muy Puedo dibujar perros, probablemente no valga la pena, sería posible tener un muñeco de nieve, pero debería tener tazas de diferentes tamaños, estoy solo aquí, bueno, entonces no me entenderán ... "Todo tipo de pensamientos estúpidos comienzan que bloquean el flujo de ideas y evitan que se presenten muchas ideas.

En principio, la humanidad ha ideado varias formas de eliminar tales bloqueos, por ejemplo, el uso de ciertas sustancias. Pero, por supuesto, este método no puede aplicarse industrialmente. Puedes empujarte una vez y pensar en algo, y puede resultar algún tipo de estupidez, no el hecho de que el pensamiento irá a donde debería. Todas las personas que intentaron jugar con esto de alguna manera en serio, en serio, terminaron mal.

La mayoría de los métodos para generar ideas y técnicas creativas se basan en eliminar bloques que interfieren. Por ejemplo, lo más simple es excluir las críticas.

Todas las sesiones de lluvia de ideas se basan en el principio de que no tenemos derecho a discutir y criticar ideas. Exactamente para que nadie se avergonzara, nadie tuviera miedo, y cualquiera de las ideas más estúpidas pudiera agregarse a la lista general, y luego llevaría a alguien a otro pensamiento, la idea comenzó a aferrarse el uno al otro y apareció un gran número. Y luego puedes sentarte y discutir todo por separado.

Puedes hacer esto incluso dentro de ti mismo, cuando tú solo conscientemente decides que ahora simplemente ofreces incluso cualquier tontería, y luego por separado te sientas para descubrir qué es una tontería y qué no es una tontería. No me detendré en esto por mucho tiempo, hay una gran cantidad de libros diferentes, artículos sobre el tema de los métodos creativos y, seguramente, muchos de ustedes saben, solo quería mostrar el principio general.

4. Experimento

Después de que generamos muchas, muchas ideas diferentes y elegimos las propias de ellas, aquellas con las que podemos ir más allá, comienza la fase de experimentos y creación de prototipos.

Prototipos
Prototipos
Clasificación
Pruebas de usabilidad

Todos los prototipos se muestran gráficamente aquí. El significado de esta imagen: se nos ocurrió algo, lo dibujamos y lo tiramos. Todo prototipo se reduce a esto.

Creamos un grupo de creación de prototipos en un navegador a partir de varios programadores que hicieron prototipos rápidos. Les dije cuál sería su trabajo, y debo decir que no todas las personas estuvieron de acuerdo con esto. Dije que todo lo que hagas será tirado, el 100% de tu trabajo irá a la canasta. No todas las personas están listas para aceptar esto.

Por un lado, parece malo, por otro lado, está claro que esto es creación de prototipos. Al igual que al diseñar un edificio, al principio el arquitecto pega su diseño de cartón, este es exactamente un diseño de cartón. O cuando se crea un automóvil, hacen un modelo en una escala de uno a uno de plastilina, lo soplan en un túnel de viento y luego el modelo de plastilina no entra en producción. Aquí es sobre la misma historia.

Pero las personas están en la cima de la ola, en términos de novedad, y pueden probar locuras. El 90% de estas cosas no conducirán a nada en absoluto, porque lo intentaremos y diremos: mierda / no funciona / no me gusta, pero el 10% puede ver a través de algunos proyectos reales.

Es imperativo que todo esto se haga muy rápidamente. La creación de prototipos no tiene sentido si crear un diseño lleva mucho tiempo. Debe hacerlo de la forma más económica y sencilla posible. Debido a que será desechado, no tiene sentido poner mucho esfuerzo, energía y atención.

Ejemplo. Los prototipos son diferentes. Puedes hacer un prototipo en papel. Cuando creamos el navegador, en algún momento decidimos su apariencia. Se dibujó una imagen en Photoshop, muestra aproximadamente cómo se ve el navegador, y luego determinamos, entre otras cosas, la forma de las pestañas, estudiamos cuidadosamente los matices, como la forma en que las sombras se encuentran allí. Aquí se dibuja que la pestaña que está más arriba arroja una sombra sobre la que está más abajo, pero ¿cómo será todo vida? ¿Qué pasará cuando cambies? ¿Cómo se proyectarán sus sombras? Decidimos intentar hacer un prototipo mínimo para sentirlo de alguna manera.

Dibujé una segunda imagen en Photoshop, en la que se abrió la pestaña vecina, y una tercera imagen, en la que se abrió la tercera pestaña. Solo tres imágenes, si las junta en una presentación, puede hacer clic entre ellas, ya vemos aproximadamente qué sucede al cambiar de pestaña, cómo se ve una persona. Algún sentido de la vida ya aparece.

Pero lo más interesante sucedió después. En cualquier programa para trabajar con una presentación, puede poner enlaces. Puede colocar un rectángulo transparente en la pestaña y poner un enlace a la siguiente diapositiva, y luego puedo mover el mouse a la imagen y cambiar la pestaña.

Esto es algo simple, tiene un efecto completamente mágico. Parece que esto no es mucho más que solo tres imágenes, pero el efecto es 10,000,000 veces mayor. Me acerqué a los programadores, puse una computadora portátil sobre la mesa con esta presentación, les mostré cómo cambia y me preguntaron: "Vaya, ¿está programado en Firefox o en Chrome?" Nunca se les ocurrió que esto era solo una imagen.

En general, el significado del prototipo es crear sensaciones de algún modo fraudulento, a menudo barato y simple, muy rápido, e intentar interactuar con ellos. Además, de manera evolutiva, se completa el prototipo. Naturalmente, al principio es muy áspero y áspero, gradualmente vemos que no nos gusta lo que nos gusta. Lo que nos gusta se bombea, lo que no nos gusta se pule, y él llega al producto real.

Cualquiera sea el problema que resolvamos, tenemos un proceso simple que nos permite llegar a una buena solución. Y como puede ver, este proceso es bastante formal, puede seguirlo sin inspiración, no necesita esperar un impulso creativo, simplemente siéntese, hágalo y resulta bien, todo es muy simple.

2. Cuando termina el diseño

Está estrechamente relacionado con la primera historia, y también se dibuja algún proceso en ella. Hubo algún tipo de proceso de trabajo del diseñador.

Todos hicimos lo que sucederá después con las ideas y los dibujos que dibujamos. Es interesante que aparezcan más enemigos.

De repente, surge un gerente de proyecto, que dice: "Esto, por supuesto, es genial, pero en realidad, no, no haremos eso". O los programadores vienen y dicen: "Es genial, pero nos llevará 10 años programar esto, así que seamos un poco más simples". Una gran cantidad de enemigos atacan al diseñador.

Sí, sigue siendo interesante que los diseñadores sean enemigos entre sí. Esto es algo diferente que quiero explorar, pero si tomas una foto, le muestras al diseñador y le ofreces rediseñar, primero regaña todo lo que se pintó, luego dibuja algo nuevo, y si luego tomamos el próximo diseñador, también regaña lo que pintaron los anteriores dibujará de una manera nueva, y este es siempre el caso. Incluso me parece que si el diseñador no regañó al anterior, entonces algo está mal con él y es mejor no meterse con él.

¿Qué hacer en esta situación? Un diseñador experimentado aprende a ingresar al mundo exterior. Realmente me gusta cómo esta imagen antigua ilustra esta idea:

Había un mundo tan agradable y acogedor donde hacía calor, era bueno, podías dibujar, inventar, a nadie le molestaba, y luego te metiste en este mundo extraño con otras personas que no quieren hacer algo así, pero también puedes estar de acuerdo con ellos, nosotros en una sola empresa, no competimos entre nosotros, queremos hacer un producto y, por lo tanto, debemos estar de acuerdo. Resulta que no da tanto miedo, y todo resulta.

Ahora el diseñador ya está mirando el ciclo de vida de todo el producto. Siempre me preguntaba dónde está el lugar del diseño, en qué punto debe comenzar el diseño, en qué punto debe terminar.

Al principio parecía que el diseño era sobre diseño. Todos los trabajadores independientes trabajan en este modelo. El gerente redactó la declaración de trabajo, se la entregó al diseñador, dibujó los diseños, los entregó, y luego los desarrolladores tomaron estos diseños, el producto se fue. En principio, es posible existir de esta manera, pero no suele pasar nada bueno.

Si conecta al diseñador antes, la situación es mejor. Ahora, desde el principio, participa en la invención, luego en la investigación, escribiendo ese mismo TK. Resulta mucho mejor, la persona ya está allí, comprende todos los detalles, participa, inventa algo.

Además, si después de que se dibuja la imagen, el diseñador no queda excluido del proyecto, pero continúa trabajando, resulta aún mejor, porque cuando los desarrolladores comienzan a darse cuenta de las imágenes, resulta que gran parte de todo se olvidó y no se tuvo en cuenta, y de lo contrario, los desarrolladores tenemos que averiguar cómo debe comportarse la página, qué debe suceder y estas son decisiones de diseño.

Resulta que el proceso se extiende por una capa delgada. Esto no quiere decir que el diseño sea una etapa, el diseño es solo un estado, es un rol que está en un equipo que está presente desde el principio del proyecto hasta el final.

Otros usuarios, más precisamente personas. Nos prohibimos usar la palabra "usuario" porque es un poco despectivo o algo así. Si una persona usa la palabra juzvere, no se le debe permitir diseñar interfaces.

La gente real comienza a usar el producto, resulta que todo lo que se le ocurrió no es exactamente lo que pretendíamos, que las personas no ven esto, no les gusta que quisiéramos y, en general, todo está mal.

Aquí nuevamente llega el momento en que necesitas salir de tu acogedor mundo cerrado al mundo exterior y comenzar a hablar con estas personas, averiguar de ellas, leer lo que escriben en apoyo, comunicarse en blogs y foros, ver lo que la gente escribe sobre el producto .

Hay dos momentos en los que el diseñador separa el próximo grande de un mundo pequeño. Quería pensar, pero ¿y si algún otro mundo? Aún más en lo que puedes atravesar después de que resultó estar en esto.

Supongo que si. Puede ver cómo este producto generalmente afecta a la sociedad, la historia del desarrollo tecnológico, otros productos y todo lo que lo rodea.

Me pregunto qué sigue. ¿Hay algún otro mundo externo más? No sé cómo pensarlo. Y esto es lo que sucede si los diseñadores simplemente dibujan un ícono, entonces deben comprender que este ícono, no solo algún tipo de ícono en el vacío, es parte de la interfaz, y esta interfaz es parte del producto, las personas reales usan el producto para resolver algunos de sus problemas reales. tareas, y todo esto sucede en la vida real y de alguna manera lo afecta.

Fue entonces cuando el diseñador pensó en esto para todos, puedes regresar y dibujar un ícono, luego todo saldrá bien

3. Miedo, contenido y forma.

Recibí esta historia de la conferencia de John Maeda sobre TED y te recomiendo encarecidamente que mires esta conferencia, es genial . En general, hay varias conferencias, puedes ver todo.

Mostraré una historia corta que encaja muy bien con lo que estamos hablando.

Tome la palabra "miedo", por ejemplo, y vea cómo cambia su percepción dependiendo de la forma en que ponemos este contenido.

La palabra miedo está escrita en sutil helvética. ¿Con miedo? No parece muy aterrador, una palabra tan pequeña.

Puede tomar una fuente ultra delgada y ahora no da miedo en absoluto. Algo así como algún tipo de mosquito, puede ser un poco desagradable, pero definitivamente no da miedo.

¿Y de ser así? Bueno, definitivamente peor que las anteriores. Al menos aquí estás esperando algo.

Pero asi?

Esto no da miedo, es ridículo, es una especie de pirata, tal vez un circo, pero no miedo en el sentido directo. Este es un miedo "gracioso", o una representación teatral.

Y este es un club nocturno:

Tal vez vamos a pasar el rato con miedo? Lugar de moda.

Y aquí parece una revista:

Se puede ver que las letras están muy llenas, sentimos físicamente cómo las exprimen, cómo quieren lidiar con ellas, se arrastran, pero están apretadas, y esto nos asusta un poco.

Y puede ser un restaurante muy caro, donde necesita reservar una mesa en dos semanas para obtener:

El significado cambia completamente, a pesar de que la palabra es la misma. Solo dependiendo de la forma que tome y cómo lo mostremos, el significado es completamente diferente.

Cambiemos un poco las letras, tenemos otra palabra, ahora esta palabra es libre: libertad. Y nuevamente, el significado del mensaje que transmite la diapositiva cambia completamente, dependiendo de qué fuente usar.

Por ejemplo, aquí está esta poderosa declaración gorda "¡Hurra, libertad", el lanzamiento de todos o algunos lo asocia con "¡Gratis! Freebie! ¡Venga! Mega-acción, todo está a la venta ".

Aquí hay un estilo diferente de la misma fuente, y aquí hay un efecto completamente diferente. Esto es espacio libre, algo de aire es fácil de respirar:

Puede mejorar este efecto extendiendo las letras:

Ahora, en general, todo está lleno de aire, las letras prácticamente despegan, nos parece que esta es una pieza libre de mega mega mega.

Dependiendo de cómo cambiemos la forma, nuestra percepción cambia, y el diseño siempre consiste en contenido sobre el cual hubo historias anteriores, pero todavía hay una forma, y esto también es una parte integral del diseño.

Por lo general, trabajamos en el contenido como un equipo completo, juntos, a todos se les ocurre lo que hace el producto, luego el formulario ya es dominio del diseñador.

Los diseñadores conocen diferentes secretos, y un buen diseñador sabe cómo usar los medios de expresividad que tiene para transmitir el mensaje correcto, transmitir el color correcto al contenido que tenemos.

4. ¿Es hermoso?

Todo habla de bellamente feo, al final, se reduce al concepto de "gusto". Esta es una definición de la gran enciclopedia soviética:

Gusto estético: la capacidad de una persona para distinguir, comprender y apreciar lo bello y lo feo en los fenómenos de la realidad y las obras de arte.

Los diseñadores pueden decir acerca de una persona que tiene un gusto o que no, o que tiene un mal gusto o uno bueno. ¿Pero pocos pueden decir qué hacer si el sabor es malo? Por ejemplo, ¿cómo educarlo? ¿De dónde viene el buen gusto? ¿De dónde viene lo malo?

Hay una respuesta general de que el gusto se ha ganado en mucho tiempo, si se mira mucho bien. Cuanto más mira una persona el trabajo, que se considera un modelo de buen gusto universalmente reconocido, más se forma su propio gusto en él, con el tiempo aprende a distinguir mejor lo bello de lo feo. Si esta habilidad no es suficiente o no hay tiempo, entonces las personas recurren a diferentes reglas y leyes. No puedo decir que sea bueno, te contaré más sobre las reglas.

El gusto a menudo se asocia con el tacto y el deseo de decir mucho o poco. En las imágenes a continuación, dos portátiles de dos sistemas operativos diferentes.

La imagen de arriba muestra que los diseñadores del bloc de notas se esforzaron mucho, hay reflejos, degradados, retroiluminación azul neón, claramente resaltados debajo del título de la ventana para que se pueda ver claramente. Se ha hecho mucho trabajo.

En el mismo tipo de pirateo. Solo un cuadrado blanco. ¿Dónde está el diseño?

Cuando miras un cuaderno simplemente como una diapositiva de presentación: esta es una historia, cuando comienzas a trabajar con una interfaz todo el tiempo, entonces una gran cantidad de brillo es bastante agotador. Puede ser interesante mirarlos una vez, pero cuando los encuentra todos los días, durante 8 horas al día, en algún momento se inclina a creer que un simple bloc de notas podría cumplir mejor su función. Esto se debe en parte al hecho de que en el Mac el menú está "clavado" en la parte superior de la ventana. Un momento complicado que facilita la vida de los diseñadores de aplicaciones de Mac.

Más sobre belleza. Tengo una pregunta para ti ahora. Aquí hay un rectángulo, ¿crees que es hermoso?

Para la mayoría de las personas, este rectángulo parece hermoso porque tiene proporciones. En este caso, ni siquiera importa cuáles, podría ser la proporción áurea, el número Pi, los números de Fibonacci o simplemente una proporción de enteros.

Es importante que cuando solo miramos la imagen, no la notamos, pero inconscientemente nuestro cerebro siente que hay algo no solo allí, que no es un rectángulo aleatorio:

Incluso puede probar, dibujar 100 rectángulos diferentes y entrevistar a miles de personas, pero no tenemos que molestarnos con esto ahora, es solo uno de los ejemplos que los diseñadores usan para hacer algo más hermoso desde el punto de vista de las personas.

El siguiente truco. Toma este rectángulo y multiplícalo a lo largo del plano de la hoja. Tenemos una grilla.

La cuadrícula se puede usar para organizar objetos en un plano. Combinamos varias celdas y las llenamos de contenido.

Por ejemplo, podemos poner la fila superior de celdas en el encabezado, llenar el texto en 9 celdas, poner una foto en cuatro celdas:

Cada uno de estos bloques ahora hereda la proporción que tenía el módulo original, es decir, la fotografía ahora también tiene las proporciones que tenía el rectángulo original.

La cuadrícula es un elemento secreto, ya no está en el diseño final, y la composición resulta armoniosa y hermosa, la gente aplaude al diseñador y se pregunta cómo sucedió tan fácilmente.

En la misma cuadrícula, organizamos los objetos de manera diferente, de nuevo simplemente colocamos el contenido en las celdas, ocultamos la cuadrícula, obtenemos una composición hermosa:

Los diseñadores conocen diferentes reglas de este tipo. Los diseñadores principiantes luchan por estas reglas, discuten, cumplen con ellas, exponen a colegas que no siguen las reglas.

Los diseñadores experimentados rompen las reglas y obtienen resultados incluso mejores que observar las reglas, porque entienden bien de dónde provienen estas reglas y en cuyo caso una violación puede generar algún beneficio.

No voy a entrar en esto en este momento, pero te lo digo para que entiendas que hay cosas que es mejor dejar al diseñador, de las cuales el diseñador es responsable y él puede hacerlo bien.

5. Cómo configurar una tarea para un diseñador

Mostraré cómo configurar la tarea usando el ejemplo de la página de autorización. Tal fue la página de autorización en el correo de Yandex hace algún tiempo, ahora no es así. Notamos que el 80% de las personas que acuden a ella, aparentemente no tienen correo, y abandonan esta página sin hacer nada. Fue sorprendente y extraño, ¿por qué fueron allí incomprensiblemente y quiénes son estas personas?

Pero una vez que estuvieran allí, sería genial atraerlos para que recibieran nuestro correo. Ahora solo hay un pequeño enlace azul para esto, y decidimos hacer algo para obtener más correo.

¿Cómo configurar una tarea para el diseñador en este caso? ¿Cómo establecerías la tarea? ¿Hacer el enlace dolorosamente atractivo?

Estas son las preguntas que debe responder al configurar la tarea:

¿Por qué necesitamos este proyecto?
¿Cómo entendemos que se alcanza el objetivo?
,

En primer lugar, debe responder la pregunta "¿por qué estamos haciendo esto?" No solo debemos entender esto, es importante transmitirlo al diseñador. El diseñador, como miembro pleno del equipo, debe comprender completamente todas las premisas iniciales.

Por lo tanto, la opción de "hacer un botón verde" como tarea para el diseñador no es buena, porque el botón ya es una solución. Cual es la tarea Para aumentar el número de registros en el correo.

====================================
¿Por qué necesitamos este proyecto?

Descubrimos que en esta página el 80% de los visitantes no tienen correo en Yandex, pero por alguna razón acudieron a él. No nos encontramos con estas personas de ninguna manera. Por lo tanto, queremos hacer posible que el correo sea más visible.

La página de inicio de sesión ahora es un poco vieja. No ha cambiado desde principios de 2000.

====================================
¿Cómo entendemos que se logra el objetivo?

Midamos el número de registros. Esperamos que cambiar la página de autorización conduzca a un aumento en el número de registros de nuevos usuarios. Consideraremos esta cantidad.

Nos gustará la nueva página.
Pongamos un experimento.
Chicos lo saben.

====================================
¿Qué queda por hacer?

Redibujaremos la página actual desde cero. Necesitamos un nuevo diseño y un nuevo diseño.

Pon un gran botón verde.
Rehacer todo
=====================================

En cuanto a la página re-página. Si de alguna manera sobresale este elemento, no saldrá nada bueno, porque el elemento completa el formulario de registro por correo. Si coloca un botón notable aquí, la gente matará la contraseña de inicio de sesión haciendo clic en ella. Nada bueno sucederá.

Quizás no sea necesario que el diseñador diga que todo debe rehacerse. Podemos decir que queremos aumentar el número de registros e invitarlo a decidir si cambiaremos la página actual o dibujaremos algo completamente nuevo.

No sé por qué me apegué tanto a la nueva página. Simplemente puede insinuar que la tarea no se limitará a la alteración de un elemento, ya que esto puede romper el comportamiento actual. Por lo tanto, uno debe repensar radicalmente este elemento, o generalmente repensar todo.

La pregunta importante es "¿Romperemos el comportamiento actual?" También debe tenerse en cuenta, y el comportamiento actual es que muchas personas usan este formulario para ingresar el correo, como se pretendía originalmente. Esta parte debe conservarse cuidadosamente, es imposible eliminar este formulario con un clic o hacerlo pequeño, debe ser notable, pero al mismo tiempo debe haber un elemento que llame la atención, lo que alentaría a las personas a iniciar el correo.

"¿Por qué haces esto?" Porque una gran cantidad de personas vienen a la página y no van a ninguna parte. Estas preguntas son especialmente relevantes para los gerentes de Yandex.

Casi siempre, si le viene a la mente alguna mejora, puede resultar que el equipo de servicio ya lo haya pensado. Fue un descubrimiento para mí, pero es verdad.

Si tiene alguna idea, por ejemplo, sobre el correo de Yandex, entonces con una probabilidad del 99%, los chicos del correo ya lo saben, incluso si no se les dijo nada al respecto. Solo porque lo piensan continuamente, monitorean una gran cantidad de fuentes diferentes, y tal vez su idea está en su trabajo. O tal vez puedan explicar razonablemente por qué esto no es genial, tal vez ya trataron de hacer esto, y resultó que algo estaba mal. Y tal vez no tuvieron tiempo, no pudieron o lo olvidaron, entonces hay que plantearlo y hacerlo.

Ahora omitiremos las preguntas aclaratorias de la lista.

Cuando el diseñador recibió una tarea tan detallada, decidió hacer un gran botón verde, pero en otro lugar de la página. Esto es lo que hizo:

Estábamos listos para inventarlo. El diseñador dijo que espera, no hay suficiente diseño, mejor hagamos esto:

Pensamos que, por un lado, todo es igual, en los mismos lugares el botón verde es grande, por otro lado, de alguna manera está obteniendo mail.ru, y nada en Yandex. En Yandex, esta es una fuente negra sobre un fondo blanco.

El diseñador dice que estás cansado, no puedo dibujar páginas blancas con letras negras toda mi vida, quiero belleza. Discutimos, discutimos, decidimos que deberíamos intentar ejecutar ambas opciones.
De acuerdo, si no puede encontrar la verdad en una disputa, analicemos ambas opciones. Para una persona que visita la página, durante las dos semanas del experimento, se muestra al azar una página en blanco o azul con una probabilidad del 50%. Páginas colgadas con contadores. Observamos cuidadosamente lo que sucederá en la conversión de todas las personas que aparecen en las páginas.

¿Qué página crees que ganó? Alrededor del 40% para el blanco, alrededor del 40% para el azul, el resto cree que no hay diferencia.

De hecho, de hecho, no hay diferencia. Ambas páginas funcionaron de la misma manera, con una precisión exacta. Parece que el gran botón verde pesaba más que el resto.

Hasta el día de hoy, ambas páginas en vivo, hay una pequeña bombilla que, en la esquina, si hace clic en ella, la página cambia, un truco secreto.

6. Qué hacer con la fecha límite

Una historia muy corta. Todo está bien, pero necesitamos tener tiempo para hacer el diseño en un momento determinado, no siempre podemos permitirnos trabajar sin cesar. Un reloj como una espada Damocles siempre cuelga sobre nosotros, y no está claro cómo ser.

Mi respuesta general es esta: de hecho, la fecha límite no existe. Más precisamente, todo el proceso de trabajo puede llevarse a la cantidad de tiempo que sea. De hecho, el problema se resuelve de inmediato cuando solo tenemos una idea general para una solución. Dependiendo de cuánto tiempo tengamos, solo aumentaremos los detalles.

Por ejemplo, si tenemos un mes, entonces podemos pasar la primera semana en investigación, la próxima semana en dos días para hacer una declaración exacta del problema, pasar otros tres días, por ejemplo, en una lluvia de ideas y otros métodos para generar muchas, muchas soluciones diferentes. Todavía tendremos dos semanas
para hacer algunos prototipos, probarlos y elegir algo bueno.

Si no tenemos un mes, solo tenemos una semana en absoluto, entonces el lunes llevamos a cabo todo tipo de estudios que se pueden hacer el lunes, el martes formulamos la tarea, por la tarde llevamos a cabo una serie de sesiones de lluvia de ideas, el miércoles hacemos un prototipo, el jueves hacemos pruebas, rehacer el viernes y todavía tenemos una solución lista para la semana.

Mientras más tiempo, mejor será el resultado, pero puede llegar a algún resultado cuando casi no hay tiempo.

Ejemplo de YouTube: la
decisión de diseño clave más importante que aseguró el éxito del servicio, ¿sabes? El bloque de videos relacionados, en el que puede ver otros videos relacionados con este. Este bloque que proporciona adherencia.

(esta es una versión muy antigua)

Miras un video, luego ves el siguiente, luego el siguiente, y ya está amaneciendo por la ventana. Youtube te chupó.

De hecho, todo el diseño de YouTube se reduce al hecho de que necesitamos mostrar videos relacionados con lo que estamos viendo, todo lo demás es secundario.

Hicieron un rediseño. Como vemos, las cosas principales ocupan un lugar aún más importante aquí. El video se ha vuelto aún más grande, el bloque con consejos se ha elevado aún más, pero son la esencia de la solución.

En principio, si se nos ocurrió esto y lo dibujamos simplemente en papel o en una pizarra, y no hay absolutamente ningún tiempo, puede dárselo inmediatamente al desarrollador, la salida será algún tipo de opción de trabajo. Si tienes tiempo, puedes dibujar hermosos botones.

7. Abrir

Creo que el diseño es un proceso abierto. El diseñador debe mostrar los resultados de su trabajo en cada etapa, incluso algunos borradores iniciales, a la mayor cantidad de personas posible e involucrar a un gran número de personas en el proceso.

Volviendo a este ciclo aquí, en cada etapa es útil que participen diferentes personas.

Cuando hicimos la investigación, a menudo invitamos a gerentes y desarrolladores a unirse. Si vamos a estudiar la historia del navegador, entonces a quién le importa: volar, descargar compilaciones antiguas, poner, probar, desenterrar capturas de pantalla. La gente está interesada en hablar, todos recuerdan sus historias sobre navegadores antiguos.

La lluvia de ideas es generalmente el suelo más favorable. para llamar a tantos participantes diferentes en el proceso como sea posible, no solo diseñadores, no solo gerentes, sino en general a todos los que puedan arrojar sus ideas a la hucha común.

Puede mostrar a toda la empresa lo que resulta. Este es un efecto interesante: la gente realmente mira. A menudo publicamos algunos diseños tempranos en blogs internos en Yandex. La gente mira, la gente comienza a hacer preguntas, a discutir.

Hay varios puntos positivos. En primer lugar, todos están a punto de entender lo que se está haciendo. Esto es muy importante para el equipo de servicio, porque cuando describe con palabras, imagina todo un poco diferente, cuando ve maquetas o incluso borradores, de repente todos comienzan a comprender en qué se está trabajando. Es igualmente importante para los equipos adyacentes o solo para los espectadores y observadores externos.

Por supuesto, esta es una gran corriente de críticas, los desarrolladores notan que no se puede hacer algo, alguien se aferra a algunas cosas, la gente encuentra significados en los que no podemos pensar, y esta es la primera prueba.

Dado que el diseñador organizó todo este proceso de comunicación, él, a su discreción, puede ignorar algunos comentarios y tomar algunos para trabajar.

Todavía hay un gran número de personas con la psicología "que no me preguntaron", aparecen en esta etapa, lo cual es muy bueno, porque si no le preguntas a estas personas de inmediato, estarán más cerca de lanzar el servicio e interferirán. Y para que tengan tiempo de hablar, tendremos tiempo para discutir con ellos, podemos ignorar lo que pidieron, pero luego, ya se sienten como algunos participantes en el proceso y se calman. Es importante.

Por supuesto, para que el diseñador organice un proceso de comunicación de este tipo, es necesario tener cierta resistencia moral, ya que las personas en Internet, que a menudo han visto lo suficiente sobre cómo discutir el diseño, comienzan a discutirlo de la forma en que lo vieron.

Esto, por cierto, es una cita real. Pasé mucho tiempo buscando una cita que pudiera insertarse en una presentación que fuera real.

Un diseñador experimentado entiende que no tiene mucho sentido detrás de una frase de este tipo. Puede preguntarle a una persona, averiguar qué es exactamente lo que no le gusta. A menudo esto no es lo que dice al principio.

Si necesita transmitirle al diseñador que algo está mal con el diseño, entonces intentaré explicarlo con el ejemplo de este diseño.

Digamos que el diseñador dice: Creo que el correo debería ser así.

Es posible que tenga pérdida de cabello por el horror / lo que está pintado allí, pero debe contenerse y decirle de la siguiente manera. Primero enumere los hechos que está observando. Puede describirlo como si le estuviera diciendo esto a una persona de otra habitación que no ve la imagen.

Por ejemplo, hay un fondo rosado, las letras se leen mal. Luego, si lo desea, puede agregar los sentimientos que tiene al enumerar estos hechos, por ejemplo, me resulta difícil creer que a muchos les gustará el fondo rosa. Y luego comenzar a discutir estos hechos.

No puede decirle al diseñador "bueno, usted es un imbécil" o cualquier otra pequeña y constructiva "basura completa / a nadie le gusta" y otras expresiones sin sentido.

Observamos siete historias cortas sobre cosas relacionadas con el diseño que me parecen importantes.

Una cita que concluye esta presentación:

La simplicidad es una condición necesaria para lo bello. L.N. Tolstói

No decida por el diseñador la tarea del diseñador