Diseñador de interfaces de usuario. El color tiene sentido. Experiencia Investigación

En esta publicación hablaré sobre mis observaciones sobre cómo nace y madura la interfaz de un producto en Sketch. Estas ideas se pueden aplicar a un proyecto front-end de cualquier tamaño, ya sea una página de destino o un sistema operativo.

Pensar estratégicamente  - significa mirar el diseño en perspectiva. Esto significa que es óptimo hacerlo para ahorrar tiempo de trabajo en largas distancias.

Niveles de detalle en el diseño de interfaces

El diseño de la interfaz del producto nunca está terminado y está en constante evolución. Distingo cuatro niveles:

• lógico
• nivel de diseño
• visual-emocional
• nivel de zoom

Una base correctamente colocada a nivel lógico ayuda a construir un proyecto como se deseaba originalmente. La interfaz hace que el diseño sea comprensible y conveniente. El nivel visual agrada a la vista y da la sensación adecuada. Luego, unas reglas de diseño bien escritas ayudan a ampliarlo a cualquier tamaño.

Los diseñadores no utilizan Sketch en todo su potencial

Los diseñadores que he conocido intentan utilizar Sketch como Photoshop o Illustrator. Pero Sketch no es una moda más. editor de vectores. Esta es la primera herramienta exitosa creada específicamente para trabajar con interfaces. Usando los símbolos en en manos capaces le permite crear un proyecto de diseño infinitamente escalable. No es justo comparar Photoshop e Illustrator con Sketch porque no fueron creados para el diseño de interfaces. Nadie puede negar su grandeza, pero es una estupidez ir a la batalla armado con un microscopio si puedes elegir un rifle de asalto Kalashnikov.

El diseño de un gran proyecto evoluciona suavemente desde bloques grises incompletos hasta un sistema bien desarrollado que se asemeja a un sitio web diseñado. Un boceto le permite pasar de un nivel de detalle a otro.

¿Qué diseño está mejor organizado?

Aquí hay dos externamente. diseño idéntico:

El de la izquierda no utiliza símbolos y el de la derecha se compone únicamente de ellos. ¿Qué diseño está mejor organizado? La respuesta se sugiere por sí sola: correcto. Pero no. Están diseñados para diferentes propósitos.

Izquierda: fácil de cambiar, difícil de escalar

Si este diseño se convierte en la base para otras 100 pantallas, con cada nueva copia habrá objetos duplicados mal gestionados en el proyecto. Deben ser idénticos de una pantalla a otra. Cuantos más haya, más difícil será mantener el orden. Si cambia un solo ícono o barra de pestañas, los 100 diseños quedarán obsoletos.

Derecha: Caro de crear, ideal para escalar

Sin embargo, no se apresure a convertir todo en símbolos. Si el estilo recién se está formando y necesita rehacer radicalmente esta pantalla, luego de dibujar la pantalla nuevamente, todos los símbolos de la versión correcta quedarán obsoletos. El tiempo dedicado a crearlos no dará sus frutos. Una pantalla de este tipo con sus símbolos es incómoda de reorganizar entre otras pantallas; no es fácil escalarla.

Símbolos — pegamento de interfaz

Entiendo el enorme potencial escondido en los símbolos. Se parecen a una pequeña civilización en la que los organismos nacen y mueren. Usando símbolos y formas simples Cultivo estructuras. Se destruye el tejido muerto. Los creo y los envío a la guerra, sabiendo que puede haber una situación en la que tendrán que ser separados.

Ciclo de vida de un símbolo.

Después de la muerte, los símbolos se convierten en grupos y con la siguiente acción se pueden desagrupar, arrastrando su contenido a la superficie del diseño: capas simples de trama, vectores y texto, u otros símbolos. Así es como cambian los niveles de detalle a través de los átomos individuales.

Dependiendo de si creo nuevos símbolos o fotografío los viejos, puedes entender en qué dirección me estoy moviendo estratégicamente: estoy detallando o destruyendo la estructura del diseño.

Ambas direcciones de movimiento tienen sus ventajas:

si detallamos

la estructura se vuelve más formal y compleja. Aparecen la armonía y la lógica, se esfuerza por describir sus partículas más pequeñas y sigue el principio de programación DRY (no te repitas). La formalización conduce al orden y salva objetos, pero inevitablemente burocratiza el sistema. Las piedras de los cimientos son más caras de mover que las piedras del tejado. La formalización es amigable con la cuadrícula, asegurándose de que todas las sangrías sean iguales. Así es como consolidamos la interfaz, haciéndola menos flexible, pero elegante.

Ejemplo interesante: Me encontré con un proyecto de Sketch que pesaba 600 MB. Casi no usaba símbolos y tenía muchas pantallas. Cuando lo limpié y lo convertí en símbolos, el peso del archivo se redujo a 150 MB.

Si más de dos objetos en el sistema parecen idénticos y el número de ellos solo aumentará en el futuro, puede que sea el momento de crear un símbolo común para ellos.

si simplificamos

Si cortamos la estructura simbólica con detalles, esto conduce a un diseño más delgado y se acerca más al principio KISS (mantenlo breve y simple). El cemento fresco es más fácil de impartir. el formulario requerido. Las partículas que contiene no tienen enlaces fuertes entre sí y no resisten.

Diseño en pedazos

No hay nada más molesto que las estructuras simbólicas cuando es necesario cambiar rápida y drásticamente el diseño, hacer nueva lógica interacciones. En este caso, constantemente tropezarás con ellos. Si no disparas los símbolos, tendrás que formar en tu cabeza todas las relaciones que forman el diseño final. Entramos en cada símbolo y lo cambiamos para influir en el diseño final. Si los elementos son pequeños y variados, es extremadamente difícil hacerlo dentro de un mismo diseño. Tratar de seguir las reglas del sistema formal cuando se necesita una revolución es un lío inútil que ralentiza el trabajo. Es como si intentaras pintar un cuadro no como un todo, sino en fragmentos, sin ver el lienzo en su conjunto.

Cuando una interfaz está llena de símbolos, está fragmentada. Si necesitas crear fundamentalmente nueva pantalla, se interpone en el camino.

Ahora hablemos de niveles con más detalle.

1. Nivel lógico de diseño.

Este nivel más alto abstracción, estratosfera. Mayoría nivel general interfaz — esta es la lógica de las acciones del usuario, . Qué hacen los diseñadores de UX: ¿Qué canales se utilizarán para interactuar con el sistema? ¿Cuál es el objetivo del usuario? ¿Cómo ayudar a conseguirlo en un mínimo de clics? El boceto se convierte en un programa para crear diagramas lógicos:

En este nivel solo hay un símbolo: una tarjeta gris que indica una acción. Es perjudicial simbolizar flechas y es recomendable ni siquiera hacer firmas aclaratorias. La estructura apenas se está formando. Algunos diseñadores no trabajan en este nivel en absoluto y prefieren visualizar los viajes de los usuarios como pantallas en lugar de acciones lógicas. Este nivel no contiene ningún diseño visual.

2. Nivel de diseño

Cuando aparecen más detalles, pasamos al nivel de flujo de usuarios. ¿Qué botones presiona el usuario para lograr su objetivo? En esta etapa, es conveniente utilizar el complemento User Flow, que le permite mostrar qué botones conducen a dónde.

En aplicaciones y sitios web, este es el nivel de interacción con la pantalla. vamos a dibujar formas generales, a grandes rasgos. Esto también nivel lógico, sin detalles de dibujo. ¿Dónde estará el botón de llamada a la acción? ¿A qué pantalla conducirá? ¿Qué debemos hacer si el usuario es ciego o tiene otras discapacidades?

Móvil primero

Los pasos se convierten en pantallas con ciertos tamaños, para el cual diseñamos. Siempre comenzamos con la versión móvil, ya que es más fácil concentrarse en el significado que en el diseño visual. Expandir versión móvil en pantalla grande mucho más fácil que meter una computadora de escritorio en un móvil. Lea primero el móvil.

Primeros personajes

Aquí ya podemos empezar a realizar los símbolos más comunes, si estamos seguros de que los objetos serán típicos. Pueden aparecer símbolos de encabezado, menú principal y pie de página. Parecen rectángulos grises con capas de texto. Dado que no estamos limitados por una fuerte fragmentación, también es fácil realizar cambios de diseño significativos en este nivel.

Prototipo lo antes posible

Aquí ya es útil crear el primer prototipo en Invision, que no es muy bonito, pero funciona según lo diseñado. En este nivel, puedes probar ideas: ¿la lógica es clara o es necesario rehacer todo desde cero? Es una pena tirar a la basura un diseño dibujado con tanto cariño. Tirar una servilleta pintada no es ofensivo.

3. Nivel de emociones: representación y contenido.

Una vez que haya surgido la imagen lógica, puedes trabajar en el diseño en detalle. Este es el territorio de la inspiración y los artistas. Los fanáticos de Dribble y Behance se concentran en ello, olvidándose a veces del resto. Los cuadrados grises están siendo reemplazados por elementos reales de la interfaz de usuario, buena tipografía, íconos e ilustraciones. Es hora de elaborar cuidadosamente la redacción de los textos. Esto también incluye la animación. Cuando se utiliza adecuadamente, incluso el diseño más simple cobra vida.

Juntos, el contenido y las imágenes dan forma a la percepción de todo el producto.

4. Nivel de zoom

Cuando se ha formado el estilo del producto y ha aparecido un conjunto de reglas según las cuales se forma el diseño, llega el momento de que madure el sistema de diseño. También me gustaría llamar a esta etapa formalización.

Quienes organizaron esto saben mucho sobre escalamiento. Los símbolos son la herramienta ideal para escalar el diseño.

La gran mayoría de los símbolos se crean en este nivel. Este es el momento de bajar a la tierra y dejar de iniciar revoluciones. Es hora de empezar a fijarse en los detalles y practicar el perfeccionismo. El propósito del nacimiento de símbolos en esta etapa es dividir el sistema en partes más pequeñas para que pueda escalarse sin problemas.

¿Por qué escalar?

Un sistema bien formalizado es fácil de mantener.

Incluso proyecto importante Puede permanecer en el nivel de renderizado. Dado que el aumento en el número de diseños es inevitable, con él también es inevitable el crecimiento del desorden que lo acompaña. Si el diseño cambia, el diseñador tiene que actualizar todos los diseños manualmente (lo cual es imposible), o mantener actualizados solo los diseños más recientes, ignorando todos los demás. Me volvería loco si tuviera que lidiar con que el 90% de mis nuevos diseños estuvieran desactualizados.

Ejemplo de un problema de escala

Si surge la tarea de volver a pintar todos los íconos rojos en un tono diferente, será fácil hacerlo, ya que están agrupados en un kit de interfaz de usuario, desde el cual se traducen a todos los diseños. Si cambiamos un símbolo, todas sus copias en 600 diseños cambian. Este diseño ya huele a maquetación.

Que escalar

No sólo los iconos, sino también cualquier elemento repetido deben convertirse en símbolos. Todos los campos de entrada, menús, ilustraciones, botones, pestañas, ventanas emergentes y algunos bloques de texto.

Todos los niveles se contradicen entre sí. Para que un proyecto se desarrolle, es necesario maniobrar constantemente entre ellos, y esta es la habilidad de un diseñador de interfaces.

Esta publicación no trata sobre la necesidad de dividir la interfaz en un montón de símbolos, ni tampoco sobre el hecho de que los símbolos interfieren con el dibujo de un diseño como ilustración. Éstas son sólo consecuencias de algo más profundo. Mira tu interfaz en absoluto. cuatro niveles y decidir qué hacer con él en este momento para resolver el problema de la manera más efectiva.

En este artículo, doy ejemplos de los principios o conceptos básicos que guían el diseño de interfaces de escritorio. No planeo ser un innovador ni un maestro, pero estaré feliz de compartir un conjunto de entornos que me ayuden en mi trabajo.

Por cierto, si usas Figma, recomiendo prestar atención a nuestra sistemas de diseño listos para usar. Ayudan a los autónomos a completar más trabajos por mes y permiten a los programadores crear hermosas aplicaciones de forma independiente, y los líderes del equipo “ejecutan” los sprints más rápido, utilizando sistemas de diseño ya preparados para el trabajo en equipo.

Y si tiene un proyecto serio, entonces nuestro equipo está listo para implementar un sistema de diseño dentro de la organización basado en nuestros desarrollos y adaptarlo a tareas específicas usando Figma. Web/escritorio y cualquier móvil. También estamos familiarizados con React/React Native. Escribe a T: @kamushken

Énfasis y prioridades

Cada vez, al diseñar una interfaz, me pregunto a mí mismo o al cliente: "¿Qué información es ahora importante para usuario final? ¿Cómo distribuimos su atención en un caso particular? Para ello, nuestras armas incluyen el color y sus matices, el tamaño de la fuente y su intensidad. Juntos, utilizando correctamente estas herramientas, “dejamos un mensaje” al usuario, guiándolo por el camino que necesitamos, concentrando su atención en lo más importante.

Un buen ejemplo es cuando el diseñador le dio al usuario el entendimiento de que es importante ver al remitente, luego el tema, y ​​solo luego el contenido o su @nick en el sistema:

Un mal ejemplo donde el diseñador “afirma”: lo más importante son los avatares, y el resto lo descubrirás de alguna manera:

Sangrías y su proporcionalidad

El diseño moderno es ligero, sencillo y “saturado de aire”. Está lleno de aliento. Y las hendiduras desempeñan un papel importante en la formación de estas sensaciones. Las sangrías significativas ayudan a simplificar el flujo de material. Pero deben estar sujetos a cierta regularidad y proporcionalidad. Defino N píxeles como mi relleno base cuando empiezo nuevo proyecto. Luego uso la proporcionalidad 2N, 3N, etc. para crear un equilibrio visual si se necesita más relleno en alguna parte.

Un buen ejemplo cuando un diseñador respeta más o menos la proporcionalidad de las sangrías:

Un mal ejemplo donde la sangría se basa prácticamente en un generador de números aleatorios:

El texto del botón siempre aparece primero que el icono

No olvide que es el texto el factor determinante en la expectativa o reacción que tendrá el usuario cuando vea el botón. Y sólo la imagen del icono complementa el significado de forma secundaria. La imagen de la campana con las palabras “notificaciones” nos da una idea del propósito de esta funcionalidad antes de hacer clic. Un timbre similar sin firma en otra aplicación nos conducirá al despertador, aunque lo más probable es que esperemos que aparezca la pantalla de notificaciones. Te aconsejo que siempre le des más “peso” a la inscripción que a los iconos. Generalmente los considero una estafa. Muchos interfaces modernas Son bastante capaces de prescindir de ellos. ¡Sería demasiado aburrido!

Bueno en general:

Pero puedes hacerlo mejor:

Tiene buena pinta también:

Y aquí hay margen de mejora:

No intentes ser demasiado claro

No todas las interfaces diseñadas tienen que ser intuitivas. Hay muchos sistemas complejos con los que hemos estado aprendiendo (!) a interactuar durante algún tiempo. Quizás ahora nos parezcan simples, pero no nos damos cuenta de que fuimos investigadores pioneros durante los primeros minutos, horas o más. Y si seguimos trabajando dentro de algunos inicialmente sistema complejo Al parecer, nada obstaculizó nuestro camino hacia las primeras investigaciones. Lo más probable es que el diseñador haya hecho tan bien su trabajo que lo dominamos fácilmente. nuevo entorno. Un ejemplo vívido de la vida: intenta por un momento imaginar que no sabes el significado. signo matemático"iguales". De acuerdo, estas dos líneas, una encima de la otra, no parecen nada intuitivas. Es que una vez en el colegio un profesor de matemáticas nos enseñó esto. Les insto a que no intenten ser más claros de lo que se requiere en el nivel mínimo necesario.

En este ejemplo, el diseñador fue demasiado claro con el botón de cerrar:

Y en este ejemplo, el diseñador resultó ser demasiado claro con la capacidad de agregar:

Mover el cursor requiere energía.

No debemos obligar al usuario a llegar a otra parte de la pantalla para obtener funciones avanzadas. Si el usuario está trabajando con una lista, entonces el botón para crear un nuevo elemento debería estar cerca. O si generamos una nueva ventana emergente haciendo clic en el botón de abajo a la izquierda, entonces es absurdo obligar al usuario a arrastrar el cursor en diagonal hacia la derecha hacia arriba para cerrar la ventana.

Un buen ejemplo es cuando un diseñador sugiere cerrar una ventana emergente en la misma área que provocó su aparición:

Un mal ejemplo cuando un diseñador distancia la funcionalidad de agregar un elemento a una lista de la lista misma:

Relaciones de ubicaciones o de un solo plano.

Esta es otra técnica de equilibrio de interfaz. Una especie de cuadrícula, si se quiere. Por ejemplo, digamos que está utilizando un diseño de tres columnas. ¿Están sus títulos en el mismo plano a lo largo del eje X? O la disposición de iconos con botones. ¿Es posible dibujar un eje Y imaginario y encontrar que ambos encajan perfectamente a lo largo de él? Si las respuestas son sí, las cosas van bien. Esto se debe al hecho de que a una persona le resulta más fácil percibir visualmente. vista tabular debido a la estructura de los datos. Y al desarrollar una interfaz, debemos organizar los elementos con cierta lógica de tabla.

Mal ejemplo con inconsistencias:

Un buen ejemplo con armonía y correspondencia:

El color tiene sentido

Derrotado por última vez. Rojo - alarma, verde - todo está bien. Desde tiempos inmemoriales, lo mejor para una persona es la percepción. información de texto, está en blanco y negro. Si usas muchos colores sin razonar, creas caos. Si coloreas elementos con significado, creas aún más orden.

Un ejemplo de caos: (¿172 votos en verde significan un estado positivo? Si es así, ¿entonces 280 visitantes en naranja significan negativo según la lógica? ¡En absoluto! El diseñador solo dividió los números entre sí usando colores)

Un ejemplo de creación de orden y justificación del color (acabo de agregar gráficos encima del trabajo de otra persona)

Un buen ejemplo de no abusar de los colores:

A modo de epílogo....

Me gustaría expresar mi gratitud a los miembros de la comunidad de dribbble por su acuerdo informal para proporcionar su trabajo para esta revisión. Me gustaría recordarles que los principios anteriores en diseño de interfaz son los principales para mí. Siempre los tengo en cuenta al diseñar interfaces. Decide de qué lado estás... ¿Quieres crear interfaces para diseñadores y trabajar para obtener Me gusta (por ejemplo, el 98% de los trabajos con Behance) o te esfuerzas por resolver los problemas de los usuarios (dribbble)? Por cierto, en mi opinión. gran ejemplo¡Cómo el carácter cerrado de la comunidad te permite mantener el enfoque en el propósito principal de las interfaces!

A pesar de la abundancia de materiales educativos, los profesionales principiantes año tras año se preocupan por la misma pregunta: cómo dar los primeros pasos en el diseño.

Después de recibir muchas preguntas de jóvenes diseñadores, decidí escribir el material que soñaría leer al comienzo de mi carrera. Se basa en experiencia personal y lecciones aprendidas al comunicarse con diseñadores exitosos de grandes estudios y equipos de productos.

En la primera parte hablaré de las habilidades básicas de un buen diseñador y, en la segunda, de cómo utilizarlas para construir una carrera.

La base del diseñador.

En cualquier ámbito existen una serie de habilidades básicas, sin las cuales no hay nada que hacer en la profesión. Sólo adquiriendo estas habilidades podrás contar con un ascenso en puesto e ingresos.

Enfoque, metas y objetivos.

Todo diseñador debe saber para qué se crea la interfaz y qué tareas debe resolver.

El sitio web de la aerolínea está destinado a personas cuyo objetivo es trasladarse de una ciudad a otra y su tarea es ayudarles a encontrar un vuelo que satisfaga sus necesidades.

Metas y objetivos no son lo mismo. Quizás tengas el objetivo de pasar una buena velada y la tarea sea elegir entre una película, un restaurante y fútbol.

El diseñador siempre debe tener en cuenta los objetivos de los usuarios y resolver sus problemas en la práctica. Seguramente, actualmente estás trabajando o empezando a trabajar en algún proyecto. Piensa en cuáles son sus objetivos y qué tareas debe resolver.

El servicio puede tener muchas tareas y algunas entrarán en conflicto entre sí, por lo que es necesario elegir una principal y hacer que su implementación sea lo más cómoda posible, sin sacrificar el resto.

¿Cómo funcionaría si fuera sencillo?

Regularmente me hago esta pregunta cuando me enfrento a un nuevo desafío. Él me ayuda a distraerme plantillas existentes y encontrar una solución que coincida con el problema actual.

Al inicio de mi carrera, como muchos otros, lo primero que hice fue lanzarme a diseñar recursos en busca de “inspiración” y tratar de encontrar una solución que pudiera aplicarse a mi problema. Aunque en realidad no buscaba inspiración, solo intentaba forzar menos mi cerebro.

Es tentador copiar la solución de otra persona, pero no olvide que cualquier patrón puede funcionar bien en un caso y no funcionar en absoluto en otro. ¿Y en quién te convertirás sólo con imitar el trabajo de los demás? Después de todo, un buen diseñador siempre se distingue por su capacidad de pensar.

Es útil adoptar la experiencia de otras personas al examinar conceptos y servicios en funcionamiento, pero cuando nos enfrentamos a nueva tarea No olvides girar la cabeza.

Estética de la interfaz

Me encanta Medium por su buena tipografía y facilidad de escritura, aunque en otros sitios mis artículos a veces obtienen entre dos y tres veces más visitas. Pero no se trata sólo de belleza.

Una buena imagen facilita la lectura y elimina la necesidad de cambiar la escala de la página. Un buen artista visual se centra en elementos importantes¿Qué tiene de bueno? redes sociales y de importancia crítica en los servicios empresariales.

Instagram cambió su interfaz de negro y azul a blanco por una razón. Su objetivo era centrarse en el contenido generado por el usuario.

De vez en cuando escuchamos sobre errores que la gente comete debido a una interfaz compleja. Por supuesto, que te guste algo accidentalmente no es un problema, pero un error al volar un avión o una central nuclear puede provocar una tragedia.

La forma más sencilla de mejorar las habilidades visuales es adoptar la experiencia de otras personas, copiar interfaces y leer materiales explicativos. Las pautas de diseño de Google me ayudaron mucho.

Otra cosa muy importante es una perspectiva exterior. Siempre trabajé en startups donde era el único diseñador, lo que me dio mucha libertad para actuar, pero me privó de la retroalimentación de colegas experimentados.

La mayoría de los diseñadores comienzan sus carreras en casa, por lo que la única manera de conseguirlo comentario para ellos es establecer una relación con un diseñador experimentado y pedirle periódicamente comentarios sobre su trabajo.

¿Qué necesita?

Buen diseñador piensa en guiones, no en pantallas.

Un script es una secuencia de acciones que un usuario debe realizar para completar una tarea específica. Por ejemplo, elija el vuelo óptimo. El escenario se puede resolver en una pantalla o puede contener tantos como quieras. La tarea del diseñador no es reducir el número de pantallas, sino hacer que la tarea del usuario sea más cómoda e intuitiva.

A veces una tarea requiere una lógica paso a paso, donde cada paso se pagina separada, como en registro complejo. Algunas tareas son más cómodas de resolver en una sola pantalla (ejemplo: crear una publicación en las redes sociales).

Los escenarios son el núcleo de cualquier diseño de interfaz, por lo que cualquier diseño debe comenzar con ellos.

Diseño sistemático

Todas las empresas que se preocupan al menos un poco por el diseño llegan a la idea de que volver a dibujar los mismos componentes y organizarlos de una manera nueva es una idea bastante estúpida. Entonces todos empezaron a crear. sistema unificado componentes, y un poco más tarde la lógica de su colocación.

Después de un poco más de tiempo, los diseñadores se asociaron con los desarrolladores, vinculando sus elementos en los diseños con los componentes dispuestos en el frente. Gracias a esto, el diseñador tiene que dibujar cada vez más y utilizar cada vez más sus dos herramientas principales: el cerebro y el desarrollador front-end.

Los desarrolladores deben ser respetados y al menos comprender lógicamente la esencia de su trabajo. Sin esto será difícil encontrar lenguaje común y crear un gran producto.

Teniendo listo listo elementos necesarios y estilos, puedes pensar más en resolver los problemas del usuario y menos en dibujar.

Incluso una buena idea es fácil de matar

Recuerdo cómo al comienzo de mi carrera, al presentar una solución de diseño, me confundía fácilmente al hacer una pregunta simple, por ejemplo, por qué algún elemento era así. Luego traté de dar una respuesta razonada a la pregunta de por qué surgió el diálogo sin sentido que influyó en la percepción de toda la obra.

Sólo con experiencia entendí que las preguntas no relacionadas con el tema principal debían ignorarse. Por ejemplo, decir: "Estos son sólo detalles, así que analicemos los principales aspectos que afectan al negocio y al final volveremos a su pregunta". Sorprendentemente, esta respuesta elimina conversaciones innecesarias y lo presenta como un profesional que se preocupa por el negocio del cliente, no por su ego.

Para que se tomen sus decisiones de diseño, debe vincularlas con los análisis que realizó antes de tomar esa decisión. Al demostrar que su decisión fue el resultado de un trabajo analítico serio, en el que estudió a la competencia y probó varias soluciones, será difícil estar en desacuerdo con usted.

Libros para diseñadores.

Periódicamente me preguntan qué libros me ayudaron a convertirme en un mejor diseñador.

Ninguno.

Sólo la práctica regular y la comprensión del negocio me ayudaron a aportar mayores beneficios a la empresa y aumentar mi valor en el mercado.

donde conseguir un trabajo

Hay tres opciones populares: estudio, producto o startup.

El estudio es ideal para principiantes, ya que hay muchos diseñadores a tu alrededor de los que puedes aprender algo. El ritmo es más rápido aquí, ya que hay fechas claras de inicio y finalización del proyecto. Debido a que el costo del proyecto está ligado a las horas de trabajo, los estudios generalmente ganan menos que el producto.

El producto tiene un ritmo más tranquilo, ya que el beneficio de la empresa no depende directamente del trabajo del diseñador. A menudo, el equipo de diseño se ocupa de la funcionalidad que aparecerá en el futuro, por lo que para ellos la calidad suele ser lo más importante. más importante que la velocidad. Especialmente para proyectos que son utilizados por millones.

En las startups, el aporte de cada empleado es sumamente importante, ya que los equipos son pequeños y muchas veces el departamento de diseño está formado por una sola persona, por lo que es mejor ir allí con plena confianza en tus capacidades.

Toda mi carrera, sin contar el trabajo independiente, trabajé en startups donde era el único diseñador. La desventaja de este trabajo es que no hay un mentor cerca, por lo que hice mucha autoeducación y análisis de mi trabajo. La ventaja es que puedes tener la máxima influencia en el producto final trabajando junto con los fundadores.

generando suerte

[parte muy importante]

Muchas personas limitan su comprensión del mundo a las habilidades profesionales, aunque sean sólo lo mínimo. Puedes ser un gran diseñador, pero ¿de qué te sirve si nadie sabe de ti (ni los clientes, ni la comunidad)?

Algunas personas tienen suerte y sus carreras se construyen de manera favorable, pero no porque hayan nacido con suerte, sino sólo porque inconscientemente realizaron acciones que aumentan sus posibilidades de éxito.

Entre estas acciones hay activas y pasivas.

Entre los pasivos se encuentra la presencia de currículum, portafolio y perfiles prolijos en las redes sociales. Estas cosas aumentan la probabilidad de que accidentalmente te noten y se te ocurra un proyecto interesante.

Acciones activas — responder a las vacantes de otras personas, publicar artículos y casos, comunicarse con profesionales de diferentes áreas, cartas directas a empleadores y creando tu propia comunidad. Gracias a esto, no esperas hasta que te encuentren, sino que por tu cuenta aumentas la probabilidad de recibir una oferta prometedora.

Conozco a un diseñador de la región que se reunió con los principales profesionales de nuestra industria y se reunió con ellos a su llegada a Moscú. Gracias a esto logró conseguir buena oferta sobre el trabajo y después de un año y medio, cambiar de un estudio superior a otro, ocupando el lugar de socio.

Una opción popular ahora es tomar un curso de empresa famosa o participar en una competición.

Pavel Shumakov, después de ganar la Copa de Diseño de Rusia, recibió una oferta de VKontakte y poco después se mudó a la oficina de Badoo en Londres. Algunos chicos, después de realizar un curso en Skillbox, recibieron una oferta de trabajo en AIC.

Una opción conocida desde hace tiempo es hacer un proyecto falso, poniendo todo su esfuerzo en ello y publicándolo en un portafolio de calidad. El ejemplo más famoso es el rediseño de Google News de Georgy Kvasnikov, que le valió numerosas ofertas de grandes empresas.

Bueno, una última cosa.

Es importante comprender que detrás de la pantalla de cualquier marca hay personas adecuadas que están dispuestas a considerar un candidato ambicioso en cualquier momento. Tu tarea es sólo presentarte correctamente. A veces todo lo que se necesita es una carta competente a un buzón común y una carpeta ordenada.

Una de las cosas más importantes que he aprendido en mi carrera es la capacidad de seguir adelante a pesar de los reveses. Los errores no se pueden evitar, por eso es necesario tratarlos bien.

Esta es la lógica básica:

El éxito no lo logran quienes no cometen errores, sino quienes avanzan a pesar de ellos.

Mi camino, que describí en gran historia“Convertirme en diseñador” contenía una serie de fracasos que podrían haberme costado mi trabajo, pero incluso al comienzo de mi carrera, mi intuición me decía que preocuparme no ayudaría a nadie y que la única manera de lograr algo era simplemente seguir adelante.

Así que no te preocupes si encuentras problemas en tu nuevo trabajo. Todo el mundo ha pasado por eso, incluido Steve Jobs, quien cometió una serie de costosos errores durante los primeros 15 años de su carrera que llevaron a muchos a considerarlo un fracaso a finales de los noventa. Y sólo la confianza arrogante en su misión le permitió seguir adelante y, una década después, convertirse en un ícono de la industria.

Sea abierto, establezca relaciones con colegas, interese por las experiencias de los demás y, cuando tenga la oportunidad, tome la iniciativa.

Resultado inevitable

Quizás sea demasiado pronto para que los especialistas novatos lean sobre el resultado, pero una diseñadora me escribió que no quiere simplemente "mover píxeles", sino esforzarse por participar en la creación de un producto. Por lo general, los diseñadores llegan a estos pensamientos después de varios años, cansados ​​de ofrecer el mismo tipo de servicios a los clientes.

La opción de crecimiento más lógica es el puesto de director de arte, lo que significa que estás cerrando para siempre. editor gráfico y hacer sólo trabajo intelectual, corrigiendo la dirección de otros diseñadores.

Otra opción es trasladarse a una empresa de productos, donde usted y sus colegas tendrán la oportunidad de trabajar para mejorar un producto.

Una buena opción es unirse a una startup y ser responsable del diseño de todo el proyecto. Si tiene éxito, comenzará a reclutar y capacitar a otros diseñadores, formando un departamento.

Quizás algunos de ustedes quieran pasar al puesto de gerente de producto y ser responsable de la comunicación entre equipos y la estrategia de desarrollo de proyectos.

Pues la opción más ambiciosa es empezar tu propio proyecto. Un buen diseñador comprende cómo funcionan el marketing y el desarrollo, qué necesita la gente y sabe cómo utilizarlo.

Hacer la transición desde un puesto de diseñador no es tan difícil. En lugar de esperar un ascenso, comience a asumir usted mismo nuevas responsabilidades.
Llevo aplicando este principio desde hace bastante tiempo y, como demuestra la experiencia, si cuentas con los compañeros adecuados, tu iniciativa se notará.

La clave de todo

Un joven diseñador me hizo una pregunta:

¿Es mejor continuar con la autoeducación o conseguir un trabajo lo antes posible?

Siempre y en todo, practica - mejor manera Estudia cualquier disciplina y, si la combinas con la retroalimentación adecuada, no podrás encontrar nada mejor.

Por lo tanto, si quieres lograr algo en diseño, entonces comienza a trabajar lo antes posible y es muy bueno si tienes colegas con experiencia a tu lado. Si no hay ninguno, realice los proyectos usted mismo y busque comentarios de los diseñadores en las redes sociales.

Al comienzo de su carrera, concéntrese en la calidad más que en la cantidad de proyectos. No es necesario buscar nuevo trabajo Buscando vida mejor. Primero aprende a hacerlo bien.

Y no olvide que las habilidades de diseño son sólo la mitad de la batalla. Además de ellos, es necesario poder comunicarse con la gente, comprender los principios de los negocios y ser activo en la búsqueda de ofertas interesantes.

Trabaja duro todos los días y no olvides que cualquier éxito requiere tiempo.

La paciencia y la perseverancia son la clave de todo.

Haga de esta su semana de gran avance.

Este artículo explica qué papel diseño de interfaz juega en condiciones mercado moderno. Y también, lo que distingue buena interfaz de malo ( UI = interfaz de usuario, es decir, interfaz de usuario). También veremos un par de nuevos modelos de diseño de interfaz de usuario, incluidos google fucsia Y Diseño fluido de Microsoft.

¿El papel del diseño de UI hoy?

Los diseñadores modernos desarrollan interfaces de usuario para aplicaciones que se ejecutan en un sistema operativo específico. Por lo tanto, muchos parámetros de la interfaz están fuera del control de los desarrolladores. Por ejemplo, si un diseñador está diseñando una interfaz para una aplicación de Android, no conoce el tamaño ni la resolución de la pantalla. dispositivo de usuario. Y también sobre cómo el usuario ha configurado las notificaciones para esta aplicación, si hay instalados otros programas que afecten perfil de color pantalla.

Creatividad de los desarrolladores. interfaces de usuario limitado a un dispositivo y sistema operativo específicos. Su funcionamiento a menudo debe cumplir con las recomendaciones del fabricante. Sistema operativo (Google para Android, Apple para iOS). Apple publica qué es posible y qué no también para la interfaz de usuario lista detallada recomendaciones para la interfaz de usuario. Google también tiene sus propios estándares diseño de materiales.

Debido a estas limitaciones, la atención de los modernos diseñadores de interfaz de usuario centrado en pequeños detalles. Por ejemplo, sobre cómo están ubicadas las ventanas, si la navegación por la aplicación o el sitio es conveniente para el usuario. Por falta de tiempo, el usuario no tiene tiempo para lidiar con una interfaz compleja, engorrosa y lenta.

Estas son algunas de las características de las interfaces de usuario de nuestro tiempo.

Percibimos muchos elementos de la interfaz de usuario como invitaciones a interactuar con una aplicación o dispositivo:

El campo de entrada de texto y el cursor solicitan al usuario que ingrese texto y se hace clic o se toca el botón "Confirmar" para continuar:

El interruptor, representado aquí como un control deslizante, invita al usuario a habilitar o deshabilitar una opción:

Un icono invita al usuario a hacer clic en él para iniciar una aplicación o función:

Cuando presionas el botón de la hamburguesa...

...aparece un menú que invita al usuario a seleccionar opciones adicionales:

Un control deslizante invita al usuario a tocarlo, hacer clic y arrastrarlo para cambiar la configuración, como el brillo de la pantalla:

Un menú desplegable solicita al usuario que seleccione la opción correcta de la lista.

Estos son sólo algunos ejemplos de elementos. diseño de interfaz de aplicación. Pero a todos les une la idea de mejorar la eficiencia de la experiencia del usuario.

Interfaz: lo bueno, lo malo y lo feo

Un buen diseño de interfaz de usuario no se trata sólo de verse bonito. El diseño de la interfaz de usuario puede tener éxito sin ser muy bonito.

Echemos un vistazo a algunos ejemplos de buenos y malos diseños de interfaz de usuario. Entonces veamos el terrible, que también es importante.

Buena interfaz de usuario

Diseñado con un profundo conocimiento del usuario, sus necesidades y cómo navegará por la aplicación o el sitio. Por eso decimos que el diseño de UI es uno de los aspectos del diseño de UX ( UX = User eXperience, experiencia de interacción).

Una buena interfaz es lo más sencilla posible y al mismo tiempo tal que el usuario tenga a mano todo lo que necesita. La navegación es corta y poco profunda ( sin subsubsecciones ni menús), requiere un número mínimo de pasos para completar la tarea y las opciones disponibles para seleccionar en cada ventana son claras:

En esta aplicación, la interfaz ofrece al usuario tres opciones: buscar restaurantes usando ubicación actual, busque “manualmente” por código postal y un botón de hamburguesa para ver más opciones.

Mala interfaz

Este tiene diseño de interfaz de sitio web Lo primero no son las necesidades del usuario, sino la importancia de la aplicación o del desarrollador. Los signos de una mala interfaz de usuario incluyen íconos que son demasiado pequeños para tocarlos cuando se presionan con un dedo.

Esta interfaz tiene mucho texto pequeño que es difícil de leer. Además, una interfaz deficiente se caracteriza por el uso de jerga ( incluyendo profesional) en lugar de lenguaje claro. Por ejemplo, dice: “Datos incorrectos”. Y necesitas - “ Nombre de usuario y contraseña incorrectos" Una mala interfaz también puede incluir el uso de molestos cuadros de diálogo en lugar de la barra de notificaciones:

En el ejemplo anterior, puede ver que el cuadro de diálogo aplicación en segundo plano interrumpe el trabajo aplicación activa y exige urgentemente una respuesta, impidiendo al usuario continuar. Si una persona está escribiendo texto y no mira la pantalla en este momento, puede perder fácilmente los datos no guardados. Se puede observar que los botones son pequeños y difíciles de alcanzar con el dedo. Y el mensaje " Error desconocido "no tiene ningún sentido, ya que no le da al usuario la oportunidad de estudiar o eliminar la causa de su aparición.

Interfaz terrible

Algunos exitosos proyectos y diseños de interfaces, a primera vista, destruyen las ideas de los diseñadores de que la simplicidad debe ser lo primero. Consideremos como ejemplo el sitio web de Amazon, que tiene una apariencia ligeramente tensa:

Pero el éxito Amazonas, por el contrario, demuestra la eficacia de su interfaz de usuario. ¿Por qué? Uno de los secretos radica en el hecho de que la apariencia de la página se fue mejorando gradualmente y, por tanto, no obligó a los usuarios a adaptarse a cambios bruscos en la interfaz. Esto es conveniente para los visitantes del sitio.

Como usuario de Amazon desde hace mucho tiempo, realmente no noté ningún cambio en apariencia o método de interacción. Pero así es como era Amazon hace 10 años:

¿Qué le depara el futuro al diseño de interfaces de usuario?

Lo más probable es que los cambios más dramáticos estén relacionados con el desarrollo interfaces de voz. Esta función ya está disponible en todos los principales sistemas operativos, pero aún no podemos decir que la gente la use regularmente en sus teléfonos y computadoras.

Aparecen nuevos enfoques de diseño de interfaz, pero parece que la interfaz visual seguirá siendo la forma principal en que los usuarios interactúan con los dispositivos. Pero hay mucho margen para la innovación, así como para la optimización de interfaces antiguas. No sorprende que grandes actores como Microsoft y Google estén invirtiendo importantes recursos en experimentar con nuevas estéticas de interfaz de usuario y modelos de interacción.

EN últimos meses Cada vez escuchamos más sobre el "Diseño fluido" de Microsoft. Se dice que tiene como objetivo integrar una mayor profundidad visual y movimiento. Lo mismo ocurre con el sistema operativo experimental de Google con nombre en clave "fucsia", en el que los desarrolladores intentan prescindir de escritorios e iconos.

Diseño de interfaz mi principal especialización. A lo largo de muchos años de trabajo, me he dado cuenta de algo importante que a veces hay que transmitir incluso a los clientes. Lo más importante en el diseño de interfaces no es el diseño en sí. Lo principal es estudiar y comprender cómo interactúan las personas con él. Es necesario analizar constantemente qué funcionará y qué no.

Hay un gran chiste sobre la mejor interfaz del mundo: pecho femenino. Cada niño sabe cómo interactuar con ella desde que nace. Me esfuerzo por lo mismo.

Es por eso que divido deliberadamente el diseño de interfaz en desarrollo de UX y diseño de UI.

diseño de experiencia de usuario

El diseño UX se puede llamar diseño en términos de su significado original. diseño de palabras. El diseño es, ante todo, desarrollo, diseño y el resultado de trabajar con la cabeza.

diseño de experiencia de usuario comienza con la investigación y el análisis. Antes de diseñar cualquier cosa, estudio la empresa, su producto, sus competidores y su industria. Punto importante: sin buen producto No sirve de nada hacer un buen diseño.

Aplicación de escritorio, interfaz AWS, terminal de efectivo, interfaz de cajero automático, diseño de intercambio de criptomonedas: todo desarrollo de interfaz debe comenzar con la recopilación de información. Como mínimo: el público objetivo, los motivos de su insatisfacción, cómo el producto puede resolver los problemas de las personas.

Tuve que desarrollar interfaces para Smart TV y servicios de geonavegación. Es necesario comprender muy bien dónde y cómo se utilizará la interfaz y qué limitaciones tiene la plataforma.

Por otro lado, esta es la mejor manera de aplicar las habilidades de un diseñador y analista.

Creación de prototipos de interfaz

Realizo prototipos de interfaces en Axure RP. Este es el estándar actual de la industria del diseño UX. Al mismo tiempo estoy aprendiendo Figma.

Sketch resultó ser un inconveniente para mí personalmente. Figma tiene exportación directa de diseños a Zeplin. Para la mayoría de los desarrolladores de servicios digitales, esta es la opción más conveniente.

Si Sketch/Figma no son importantes, trabajo en el editor Xara Designer Pro X. Es capaz de generar. páginas dinámicas basado en diseños.

A veces muestro diseños en el servicio InVission. Puede mostrar una animación mínima de componentes y transiciones. Estos prototipos de interfaz dan al cliente una buena idea del producto final.

diseño de interfaz de usuario

Presto mucha atención a los detalles y la malla. Estructura suave y pequeñas cosas bonitas llama la atención y crea grata impresion de sus visitantes.

Dibujo las interfaces de servicios digitales complejos varios estados para botones. A veces creo un kit de interfaz de usuario independiente para proyectos particularmente grandes.

Plan de trabajo de diseño de interfaz.

1. Mira mi trabajo y asegúrate de que te guste.
2. Solicitud y traslado de materiales.
3. Pago anticipado 50% (en algunos casos 100%).
4. Entrevistas, recopilación de información y análisis.
5. Desarrollo de prototipos de interfaz en blanco y negro.
6. Diseño de interfaz en color.
7. Después de la aprobación de todos los diseños: el saldo del monto.
8. Preparación y transferencia de archivos fuente en formato *.PSD.

Lo que hago y no hago

Auditoría del recurso actual.

Como parte del rediseño del proyecto, primero realizo una auditoría de su recurso. Describo los pros y los contras desde el punto de vista del diseño y UX.

Resultado: documento con descripciones y recomendaciones.

Investigación

La investigación es una parte muy importante del proyecto. Antes de iniciar cualquier negocio, ya sea construir una casa o comprar coche nuevo, es necesario recopilar información, comparar características importantes y verificar sus suposiciones.

Resultado: perfil público objetivo y una descripción de los propósitos de los visitantes.

Diseño

Por supuesto, puedes construir una casa sin un plano. Puedes descargar algo de Internet. Pero cuando pagas mucho dinero, quieres conseguir algo más individual y reflexivo. Esto es exactamente lo que hago: desarrollo una estructura individual de páginas y bloques.

Diseño la estructura en prototipos interactivos en blanco y negro. Por cierto, a diferencia de los dibujos de la misma casa, ya se pueden utilizar prototipos del sitio: recorrer las páginas y estudiar las rutas de los visitantes. y eso también gran manera ahorrar tiempo y a veces dinero.

Resultado: prototipos de páginas ordenadas que puedes recorrer.

Diseño

En realidad, en esta etapa se elabora todo el componente visual del proyecto. Desarrollo lenguaje visual. Es como una habitación de estilo loft o una cocina de estilo provenzal: ya comprende aproximadamente qué elementos se utilizan y cómo reaccionará la gente ante ellos.

Resultado: después de aceptar el diseño de la página, me preparo archivos fuente. Y no de todos modos, sino con conocimiento del asunto. Todas las capas se colocan en carpetas y se etiquetan. Limpio y eficiente. Así sus desarrolladores quedarán gratamente sorprendidos.

Apoyo

EN grandes proyectos A menudo es necesario completar algunos pequeños detalles una vez aceptado el diseño. Mantengo una pequeña reserva para tales casos.

A veces se hace necesario desarrollar más bloques de funciones. En este caso es posible que necesite tiempo extra y presupuesto. Es como si hubieran planeado construir un garaje como un edificio separado, y luego pensaron que sería bueno pasar directamente del garaje a la casa en invierno.

Resultado

Si ya tienes prototipos de la futura interfaz, realizaré un examen, ofreceré opciones de mejora y desarrollaré una interfaz moderna, cómoda y hermoso diseño interfaz. Incluyendo iconos, parte visual del instalador, etc.

Si solo tienes una idea, un equipo de programadores y un presupuesto, te ayudaré a diseñar y prototipar la interfaz. En este caso es posible opciones no estándar resolviendo tu problema. Al mismo tiempo, intentaré preservar la experiencia del usuario tanto como sea posible para que los usuarios no tengan problemas para dominar el diseño de la interfaz.

De este modo, obtendrá un producto completo con una estructura claramente pensada y una interfaz intuitiva.