Diseño UX: una guía detallada. ¿Qué es el diseño UX y UI? Características y diferencias ¿Qué es el diseño ui ux?

Presentamos un nuevo artículo de la serie. En esta parte de la serie, consideraremos el puesto de un diseñador UX/UI: un especialista responsable de hacer coincidir la apariencia y la lógica de un producto.

Diseñador UX/UI- un especialista que diseña interfaces de usuario.

jornada laboral tipica incluye:

• trabajar en tareas prioritarias (diseño, dibujo);
• comunicación con el cliente;
• haciendo ediciones.

Ventajas y desventajas

La profesión atrae a los diseñadores por la oportunidad de hacer del mundo un lugar mejor, así como por su promesa y demanda en el mercado:

“Me gusta pensar que eres capaz de resolver un problema para una gran audiencia, o al menos hacer que el proceso de percepción del contenido sea más agradable e interesante. Es interesante hurgar entre las personas y tratar de entender lo que realmente necesitan y luego descubrir cómo implementarlo”.

“El área es muy interesante porque las decisiones correctas de un diseñador pueden simplificar y mejorar significativamente la calidad de vida de un grupo de personas para quienes se está desarrollando un determinado producto o proyecto. También puedes aprender mucho sobre los diferentes tipos de negocios en el mundo, lo que puede ser útil para iniciar tu propio negocio y tener una visión más global del mundo”.

“Personalmente, me molestan las aplicaciones estúpidas, la ubicación incómoda de los botones en los ascensores, los interiores de los automóviles mal diseñados; me gusta hacer algo que pueda mejorar esto. Este mundo es tan imperfecto (no la naturaleza, allí todo es perfecto y equilibrado) que siempre hay trabajo para un diseñador inteligente”.

“Estudié para ser programador administrador de sistemas, pero siempre fue interesante hacer algo en Photoshop. Anteriormente, no había tantos tutoriales, lecciones en vídeo y artículos como hay ahora, así que aprendí la mayoría de las funciones y características al azar. Luego decidí probar Illustrator, era mucho más complicado que Photoshop, pero excelente para crear vectores. Me gusta crear algo nuevo, algo útil y bonito, me gusta mejorar y ver el resultado conseguido. El campo de diseño le permite hacer todo esto. También es interesante cómo cambian las tendencias, aparecen nuevos programas y funciones, siempre hay que seguir todo esto y desarrollarse constantemente”.

“Me gusta el diseño UX/UI porque es una dirección muy prometedora. Las tecnologías se están desarrollando muy rápidamente, algunas interfaces están siendo reemplazadas por otras nuevas y es necesario diseñarlas todas. Aquí no solo puede pensar en si la interfaz se ve hermosa, sino también en qué tan conveniente es y en qué medida puede resolver el problema de una persona (ya sea para encontrar rápidamente el café adecuado, reservar una entrada para un concierto o ayudar a preparar su favorito). plato) . Las interfaces están en todas partes: desde equipos médicos hasta automóviles. Cuando los coches vuelen, será necesario que alguien piense en la interacción de su interfaz con una persona. Y seremos nosotros, los diseñadores de UX/UI".

Otra ventaja es la posibilidad de trabajar de forma remota (20% de todos los diseñadores), una gran selección de proyectos independientes.

Entre las desventajas Los diseñadores llaman a su profesión comunicación con clientes que no saben lo que quieren, además de ser subestimados por sus colegas de TI:

“En el 80-90% de los casos, hay que trabajar sin especificaciones técnicas con requisitos como: “Hazlo mega bonito y mega configurable”.

“Considero que la actitud hacia el diseño y los diseñadores en Ucrania es una desventaja de la profesión. Por alguna razón, todo el mundo piensa que si alguna vez abren Photoshop, automáticamente pueden ser diseñadores y decidir de forma independiente cuánto tiempo dedicarán al diseño. Los gerentes y programadores sin experiencia son especialmente culpables de esto (un gerente novato afirmó que podía completar la tarea en Paint en 30 minutos, pero no tiene tiempo para la creatividad)”.

“Las desventajas son la falta de una formación seria y la falta de comprensión de los procesos y metodologías competentes del mercado. En la subcontratación, es imposible realizar un seguimiento de los resultados y aumentar las mejores prácticas propias. El producto es algo monótono para personas maduras y un completo caos para las empresas emergentes”.

“Las desventajas, como en todo lo relacionado con TI, son el trabajo sedentario, los ojos doloridos y, a veces, un cliente que necesita hacer que el #ffffff blanco sea aún más blanco :)”

Cómo llegar a ser y hacia dónde moverse a continuación

La primera y principal habilidad de la interfaz de usuario es dominar un editor de gráficos. Las herramientas más populares son Adobe Photoshop, Sketch, Principio, Adobe Illustrator, After Effects. Para empezar, puedes intentar volver a dibujar capturas de pantalla de cualquier aplicación móvil o sitio web. Pero no se limite a copiar (aunque también debe poder hacerlo), observe algunos inconvenientes y ofrezca una solución sobre cómo hacerlo mejor.

También es importante comprender la teoría del color, la tipografía, la composición, la ergonomía del sitio web (principios de usabilidad de la interfaz), así como los conceptos básicos de marketing, análisis empresarial y psicología. Para una comunicación más eficaz con los desarrolladores, serán útiles las habilidades de diseño (HTML/CSS) y los conocimientos básicos de JavaScript y frameworks.

Puede comenzar a estudiar UX familiarizándose con la metodología leyendo libros de Nielsen Norman, Alan Cooper, Jeff Raskin, Steve Krug, Alistair Coburn. Más literatura aplicada es “The User Experience Team of One: A Research and Design Survival Guide” de Leah Buley.

“En el mundo moderno hay muchas oportunidades de implementación. He comprado y sigo comprando cursos en línea en plataformas como Coursera, Udemy, Edx. Veo conferencias en línea de Adobe, Google, leo literatura técnica, analizo trabajos en Dribbble, Behance, Awwwards”.

“Un diseñador UX/UI necesita estudiar los clásicos de la interfaz de usuario: “Don’t Make Me Think” de Steve Krug, “The Design of Common Things” de Norman, lee Luke Wroblewski. Es necesario practicar constantemente, ponerse en el lugar del usuario. Encuentre un mentor que le señale los errores, le dé consejos y fomente el crecimiento”.

Puedes comenzar tu carrera trabajando como autónomo en varias plataformas en inglés. También te resultará útil poner a prueba tus habilidades en campeonatos, por ejemplo, Dev Challenge. Esto le ayudará a construir su cartera.

Habilidades y competencias UX y UI ()

Las cualidades personales que son importantes son:

• perserverancia;
• perserverancia;
• pensamiento creativo;
• perfeccionismo;
• deseo de aprender y desarrollarse;
• capacidad de escuchar críticas.

“La persona que diseña interfaces es un ingeniero, debe tener un fuerte pensamiento analítico, habilidades de empatía muy desarrolladas y capacidad de penetrar en la esencia de las cosas. Por supuesto, también hay habilidades prácticas: el dominio de diversas tecnologías y herramientas, pero esto, por regla general, queda en segundo lugar, una persona debe ser ingeniero por naturaleza; Y no es difícil convertirse en uno si trabajas duro, lees libros y artículos sobre diseño (composición, ciencia del color, tipografía) y psicología (es necesario comprender cómo una persona toma decisiones y cómo funciona su cerebro), asistes a conferencias. y talleres y mucho para practicar".

Posibles trayectorias profesionales Diseñador UX/UI:

• mejorar como diseñador, aumentar tu tarifa (si eres autónomo);
• dominar áreas afines, desarrollándome como diseñador de producto, diseñador de VR, diseñador de VFX, diseñador de juegos;
• crecer hasta el puesto de Director de Arte (Jefe de Diseño);
• desarrollarse como si quisiera pasar del diseño a la gestión de productos en general;
• conviértete si estás interesado en coordinar personas;
• hazlo si estás más interesado en el aspecto técnico;
• dominar la programación y convertirse en desarrollador de UI;
• pruébalo tú mismo en marketing o .

“La tecnología se desarrolla muy rápidamente y constantemente aparece algo nuevo, todo requiere su propio diseño específico, tiene sus propios requisitos y características. Y nosotros, los diseñadores, ayudaremos a que todo sea mejor, más bonito y más cómodo :)"

Agradezco a Yulia Bondarenko, Maxim Palivoda, Marina Popovichenko y otros 25 diseñadores ucranianos que informaron a DOU sobre su posición por su ayuda en la redacción del artículo. Las citas dadas en el artículo están tomadas de sus historias.

Hay bastantes áreas relacionadas con el diseño en la industria de TI. Los más comunes son los diseñadores, escondidos detrás de las siglas UX y UI. Bueno, algunas personas incluso logran incluir desarrolladores front-end como diseñadores. Intentemos descubrir quiénes son los diseñadores en el mundo de TI, cuál es la diferencia entre UI y UX, y qué relación tienen los ingenieros de front-end con el diseño.

Diseñadores

Desarrollar la interfaz de aplicaciones, sitios web o juegos es un proceso bastante complejo y requiere la aplicación de conocimientos de diferentes campos: ingeniería, psicología y diseño. Los diseñadores de interfaces de usuario (en inglés - User Interface o UI) se centran en la forma en que se muestra la funcionalidad del sitio (búsqueda, pestañas, menús) y los detalles de la interacción entre el cliente y la interfaz. El objetivo del diseñador de UI es un diseño de producto moderno y estéticamente aceptable.. UX significa Experiencia de Usuario, que significa "experiencia de usuario". Un diseñador UX se centra más en la usabilidad y la comprensión de la interfaz por parte del usuario potencial. Un especialista de este tipo a menudo realizará investigaciones y estudios que formarán la base para crear un concepto de diseño y también probará conceptos durante y después del desarrollo. Por lo general, se centra en la estructura, el contenido, la navegación y cómo el usuario interactúa con estos elementos.

Produce mapas de sitio, prototipos, que son la estructura básica a la hora de crear software. El objetivo del trabajo de un diseñador de UX es que el usuario obtenga del sitio de forma rápida y sencilla aquello a lo que vino aquí. Sin embargo, hoy en día es muy común ver estas dos especializaciones escritas con una barra. Es decir, las tareas en ambas direcciones las realiza un solo especialista. Un diseñador UX/UI diseña la interacción del usuario con la interfaz, decide qué debe hacer exactamente y es responsable del aspecto que tendrá esta interfaz como resultado.

Lo que un diseñador UX/UI necesita saber

editor gráfico. Las herramientas más populares del mercado son Adobe Photoshop, Adobe Illustrator, así como Sketch, Figma. Elija un editor que le resulte conveniente y primero intente dibujar capturas de pantalla de un sitio web o aplicación, modernizándolas un poco.

Herramientas de creación de prototipos (Mockplus, Axure). Una herramienta de creación de prototipos es el vínculo entre una idea y su implementación. No importa qué herramienta uses. Puedes probar varios y decidirte por el que se adapta a tu estilo y preferencias.

Psicología del usuario. Ya en la etapa de diseño, debe pensar si será conveniente para usted o para otra persona utilizar esta interfaz. Ponte en el lugar del cliente, construye una conexión fuerte con él y esté atento a sus necesidades. Después de todo, un producto tendrá éxito si existe demanda.

También necesitarás conocimientos. teoría del color. Sabemos algunas cosas desde la infancia, especialmente aquellos que fueron a la escuela de arte. Sin embargo, existen ciertas particularidades con respecto al trabajo de los diseñadores. Los conocimientos básicos se pueden obtener de libros o artículos en Internet.

Es recomendable tener una idea sobre tipografía, un medio para combinar texto y componentes visuales.

Composición y usabilidad del sitio.

Dependiendo de los detalles específicos del trabajo, es posible que necesite conocimientos de HTML y CSS o (algunos) lenguajes de programación (los enlaces a los recursos se pueden encontrar a continuación, en la sección "Lo que debe saber un desarrollador front-end").

desarrollador front-end

La tarea principal de un desarrollador front-end es desarrollar la parte del cliente de la interfaz. Es decir, un especialista así "revitaliza" lo que diseñaron los diseñadores. Es responsable del funcionamiento y funcionamiento de la interfaz y menos del contenido visual. Un desarrollador front-end a menudo necesita encontrar una buena solución para la interfaz de usuario durante su etapa de desarrollo, por lo que a menudo colabora con un diseñador UX/UI. El código escrito por el desarrollador front-end se ejecuta en el navegador del usuario (como dicen, "en el lado del cliente"). Además, una de las tareas más importantes es comprobar que el sitio o aplicación web tenga el mismo aspecto en todas las plataformas y navegadores.

Lo que debe saber un desarrollador front-end

Como regla general, el front-end se basa en tres pilares: el lenguaje de marcado de páginas HTML, las hojas de estilo CSS y el lenguaje de programación JavaScript. Además, el desarrollador front-end debe comprender los principios de funcionamiento del protocolo HTTP, servidores y navegadores, y las características de visualización de la interfaz en varios dispositivos que se encuentran actualmente en el mercado. Las herramientas y métodos para crear interfaces web evolucionan y cambian constantemente, por lo que el desarrollador debe monitorear esto constantemente.

HTML y CSS (diseño)

Este es el diseño, los mismos ladrillos con los que se construye el sitio. El lenguaje de marcado HTML dicta la organización del sitio, el contenido y todas las interacciones entre ellos. Le permite designar la parte superior de la página, la parte inferior, los bloques laterales con contenido, títulos, visualización de texto y elementos multimedia. Las hojas de estilo CSS se utilizan para decorar elementos HTML. Determinan exactamente cómo se muestra cada elemento gráfico que se ubica en la página. Con las últimas versiones de HTML5 y CSS3, puede colocar componentes de video y audio en una página, crear imágenes y animaciones 2D e incluso escribir juegos simples. No es necesario que intentes recordar todas las etiquetas y estilos a la vez. Será útil aprender los conceptos básicos y ponerlos en práctica de inmediato. Un muy buen sitio donde puedes aprender los conceptos básicos de HTML y CSS: W3School. Pero sólo si tienes al menos conocimientos básicos de inglés. Además, el desarrollador front-end debe comprender el desarrollo entre navegadores y plataformas, así como el diseño adaptable y responsivo.

Oreja

Es un marco para HTML, CSS y JavaScript. Es decir, determinadas plantillas a partir de las cuales, como desde un constructor, se pueden montar sitios mucho más rápido que sin ellas. Pero, por supuesto, usted mismo debe personalizarlo para que se adapte a sus necesidades. Si sabes inglés te recomendamos la web getbootstrap y la misma w3schools.

javascript

Javascript es el núcleo del desarrollo front-end. Este es el primer y más extendido lenguaje de programación de interfaz. Puede agregar muchas funciones al sitio. En un nivel básico, este lenguaje te permite agregar elementos interactivos a una página. Se utiliza para crear mapas que se actualizan en tiempo real, juegos interactivos en línea y películas. En nuestros cursos senior de JavaRush, aprendemos un poco de JavaScript. También puedes estudiarlo en la misma W3School o leer sobre él en ruso en el sitio web javascript.ru.

jQuery

jQuery es una biblioteca de Javascript que contiene complementos y extensiones que pueden hacer que el desarrollo sea aún más fácil y rápido. En lugar de escribir código desde cero, las bibliotecas le permiten agregar componentes ya preparados, que luego se pueden personalizar para un proyecto específico. Puede utilizar las funciones de autocompletar formularios de búsqueda, reorganizar y cambiar el tamaño de la cuadrícula y configurar temporizadores de cuenta regresiva. Curso práctico de jQuery en w3school

Marcos de JavaScript

Hay diferentes tipos de marcos, pero puede elegir uno que le resulte más cómodo de usar. Los más famosos son Angular, Backbone, Ember y React. Representan una estructura preparada para el código. Ayudan a acelerar el desarrollo. Y en combinación con bibliotecas, pueden minimizar el desarrollo de un sitio web o una aplicación desde cero. Revisión de los 5 frameworks y bibliotecas de JavaScript más populares de 2017

Sistema de control de versiones Git

Los sistemas de control de versiones pueden rastrear los cambios realizados en el código a lo largo del tiempo. También le permiten volver a una versión anterior del proyecto. Git es el sistema de control de versiones más utilizado. Saber cómo trabajar con Git es una habilidad importante para todo desarrollador.

Breves conclusiones

UI significa interfaz de usuario, que significa "interfaz de usuario". Eso es, diseñador de interfaz de usuario es el principal responsable de cómo se presenta el producto al usuario. Desarrolla botones, íconos, selecciona fuentes y prepara un diseño. UX significa Experiencia de Usuario. Entonces diseñador de experiencia de usuario diseña el diseño de un sitio web, aplicación, o cualquier cosa, para que el usuario se sienta cómodo y comprenda qué es qué, y pueda obtener del sitio lo que necesita con el mínimo esfuerzo. Muy a menudo, ambos tipos de trabajo son realizados por un solo hombre: un diseñador UI/UX. El desarrollador front-end anima el trabajo de los diseñadores, introduciéndole dinámica: comienzan a presionar botones y la imagen comienza a cambiar. Debe conocer lenguajes de programación, aderezado con frameworks, preprocesadores y bibliotecas.

Diseño es un término bastante amplio y vago. Cuando alguien dice: "Soy diseñador", no queda inmediatamente claro qué hace en el día a día. Hay varias industrias diferentes que caen bajo este concepto.

Los trabajos relacionados con el diseño existen en una variedad de campos, desde diseño industrial (automotores, muebles), impresión (revistas y otras publicaciones) hasta diseño web (sitios web, aplicaciones móviles). Con la reciente afluencia de empresas de alta tecnología centradas en la creación de interfaces para pantallas, hay muchos trabajos nuevos en diseño. La posición de un diseñador UX o UI puede resultar incomprensible no sólo para los no iniciados, sino incluso para los propios diseñadores que provienen de otras industrias.

"No hay una respuesta correcta a esta pregunta".

Intentemos descubrir qué significa esto realmente en la industria de TI.

diseñador de experiencia de usuario

Los diseñadores de UX se preocupan principalmente por cómo interactúa el producto con el usuario. No existe una única respuesta correcta a esta pregunta. Los diseñadores de UX exploran diferentes enfoques para resolver un problema de usuario específico. El trabajo principal de un diseñador de UX es asegurarse de que el producto fluya de manera lógica de un paso al siguiente. Una forma en que un diseñador de UX puede averiguarlo es realizar pruebas con usuarios en persona y sacar conclusiones de sus sentimientos. Al identificar obstáculos verbales y no verbales, se ajusta y repite, creando así una "mejor" experiencia para el usuario. Un ejemplo sería crear una experiencia de incorporación increíble para un nuevo usuario.

“Definir modelos de interacción, flujo de tareas del usuario y detalles de la interfaz. Desarrollar scripts, interacciones de extremo a extremo, modelos de interacción, desarrollo de interfaz gráfica de usuario. Trabajando con nuestro Director Creativo y Diseñador Gráfico para fusionar el lado visual de Twitter con sus características funcionales. Desarrollar y mantener esquemas, maquetas y especificaciones según sea necesario”.

Ejemplo de pantalla de aplicación diseñada por un diseñador UX
Fuente: Kitchenware Pro Kit Wireframe de Neway Lau en Dribbble.

Tarea: Estructuras alámbricas de pantalla, guiones gráficos, planos del sitio.

Herramientas: Photoshop, Sketch, Illustrator, Fuegos artificiales, InVision

Lo más probable es que le hayas oído decir: “ El usuario debería ver la página "Gracias" una vez completado el registro.

diseñador de interfaz de usuario

A diferencia de los diseñadores de UX, que se preocupan por la experiencia general de un producto, los diseñadores de UI se preocupan por ¿Cómo se ve el producto?. Son responsables de diseñar cada pantalla o página con la que interactúa el usuario y de proporcionar la parte visual de la interfaz de usuario que diseñó el diseñador de UX. Por ejemplo, un diseñador de interfaz de usuario, al crear un panel de análisis, puede resaltar información más importante o decidir si un control deslizante o un panel de control es el más intuitivo para agregar a un gráfico. El diseñador de la interfaz de usuario también suele ser responsable de crear una guía de diseño completa, que garantiza un lenguaje de diseño coherente que abarque todo el producto. Mantener la coherencia en los elementos visuales y determinar en qué dirección trabajar. Por ejemplo, cómo mostrar errores o advertencias está dentro del alcance de un diseñador de UI.

“El concepto y la implementación del lenguaje visual de Airbnb.com. Creación de una guía de estilo ampliada."

Los límites entre diseñador de UI y UX son bastante borrosos y, muy a menudo, las empresas optan por combinar estos roles.

El diseñador de la interfaz de usuario determina la sensación y apariencia general de la aplicación.
Fuente: Metro Style Interface 4 de Ionut Zamfir en Dribbble.

Herramientas: Photoshop, Boceto, Illustrator, Fuegos artificiales

"Los campos 'iniciar sesión' y 'registrarse' deben moverse a la esquina superior derecha".

Diseñador grafico

"Los diseñadores gráficos analizan minuciosamente los pequeños detalles a los que otros no prestan atención".

Un diseñador gráfico es alguien que hace gráficos, que es lo que probablemente le diría alguien que no es diseñador si le preguntara qué hace un diseñador. A los diseñadores gráficos no les importa cómo las pantallas se refieren entre sí o cómo alguien interactúa con un producto. En cambio, su atención se centra en diseñar hermosos íconos, controles y elementos visuales, y en crear una apariencia consistente. Los diseñadores gráficos trabajan en pequeños detalles que otros no ven y, a menudo, trabajan en Photoshop con zoom de 4x y 8x.

“Produzca proyectos visuales de alta calidad desde el concepto hasta la ejecución, incluidos escritorio, web y dispositivos móviles en múltiples resoluciones (iconos, gráficos y materiales de marketing). Crear e iterar activos que reflejen la marca, embellezcan el producto y le den vida”.

Los diseñadores de UI a menudo también tienen que hacer no solo su propio trabajo, sino también crear un diseño con píxeles perfectos. Algunas empresas optan por no tener una persona dedicada al rol de diseñador gráfico.

Un diseñador gráfico diseña, dirige y ajusta cada píxel para garantizar el resultado final perfecto.
Fuente: Guía IOS 7 Freebie PSD de Seevi kargwal en Dribbble.

Herramientas: Photoshop, boceto

Lo más probable es que le hayas oído decir:"¡Reduzca el interletraje y mueva el botón 1 píxel hacia la izquierda!"

diseñador de movimiento

¿Recuerdas el movimiento sutil cuando arrastras la pantalla para actualizar el correo electrónico en tu iPhone? Este es el trabajo de un diseñador de movimiento. A diferencia de los diseñadores gráficos, que normalmente trabajan con objetos estáticos, los diseñadores de movimiento crean animaciones dentro de la aplicación. Ellos tratan con Qué hace la interfaz después de que el usuario la toca.. Por ejemplo, deciden cómo debe deslizarse el menú, qué efectos usar para las transiciones y cómo se presionará el botón. Cuando se hace bien, el movimiento se convierte en una parte integral de la interfaz y proporciona señales visuales sobre cómo utilizar el producto.

“Requiere conocimientos de diseño gráfico, diseño de movimiento, arte digital, sentido del color y tipografía, conocimiento general de materiales/texturas y una comprensión práctica de la animación. Conocimiento del firmware de iOS, OS X, Photoshop e Illustrator, así como familiaridad con Director (o equivalente), Quartz Composer (o equivalente), modelado por computadora 3D y gráficos en movimiento”.

Herramientas: AfterEffects, Core Composer, Flash, Origami

Lo más probable es que le hayas oído decir:"El menú debería aparecer a la izquierda después de 800 ms".

investigador de experiencia de usuario

Un investigador de UX sabe todo sobre las necesidades del usuario.

Un investigador de UX sabe todo sobre las necesidades del usuario. El objetivo del investigador es responder dos preguntas principales: "¿Quiénes son nuestros usuarios?" y "¿Qué quieren nuestros usuarios?" Por regla general, se trata de encuestas a usuarios, estudios de mercado y análisis de datos. El diseño es un proceso de iteración constante. Los investigadores pueden ayudar en este proceso realizando pruebas A/B para descubrir qué opción de diseño satisface mejor las necesidades del usuario. Los investigadores de UX tienden a ser el pilar de las grandes empresas, donde el acceso a grandes cantidades de datos les brinda amplias oportunidades para sacar conclusiones estadísticamente significativas.

“Trabajar en estrecha colaboración con los equipos de desarrollo para identificar temas de investigación. Diseño de investigación relacionado tanto con las acciones de los usuarios como con las percepciones de los usuarios. Realizar investigaciones utilizando y aplicando una variedad de métodos, como encuestas”.

El diseño es un concepto bastante amplio y vago. ¿Cuándo alguien habla? “Soy diseñador”, no queda inmediatamente claro qué hace realmente todos los días. Hay varios campos diferentes que se incluyen en el ámbito del diseño.

Las profesiones relacionadas con el diseño existen en una variedad de campos, desde el diseño industrial (diseño de automóviles y muebles, etc.), diseño impreso (revistas y otras publicaciones impresas) hasta diseño web (sitios web, aplicaciones móviles).

Sin embargo, recientemente han surgido muchas nuevas profesiones de diseño, centradas en desarrollar interfaces para diferentes tipos de pantallas. Los trabajos titulados diseñadores UX o UI son incomprensibles para los no iniciados e incluso, a menudo, para los propios diseñadores de otros campos.

Intentemos comprender qué significa cada uno de estos términos.

Diseñador UX (diseñador de EXPERIENCIA DE USUARIO)

Un diseñador de UX se centra principalmente en cómo el usuario "siente" y percibe el producto. La tarea encomendada al diseñador no tiene una respuesta correcta. Los diseñadores de UX prueban diferentes enfoques para resolver un problema de usuario específico. La amplia lista de responsabilidades de un diseñador de UX incluye asegurarse de que el producto lleve consistentemente al cliente de una etapa a la siguiente. Una forma de conseguirlo es realizar pruebas directas con un usuario real para poder observar su comportamiento. Al identificar barreras verbales y no verbales, los diseñadores de UX mejoran el producto y constantemente crean la mejor opción para la interacción del usuario con el producto. La versión de prueba es necesaria para garantizar el uso más conveniente del producto.

Un ejemplo de la descripción del trabajo de un diseñador de experiencias en Twitter:

“Defina modelos de interacción, flujos de tareas de usuario y especificaciones de interfaz de usuario. Presentar diversos escenarios para el desarrollo de eventos, describir el proceso de uso y modelos de interacción de principio a fin y demostrar muestras a los interesados. Trabaje con nuestro director creativo y diseñadores visuales para unificar la identidad visual y las características distintivas de Twitter. Desarrollar o mantener diseños, maquetas y estándares según sea necesario".

Resultados del trabajo: diseños de imágenes en pantallas, guiones gráficos, plano del sitio.

Herramientas: Photoshop, Sketch, Illustrator, Fireworks, InVision

Diseñador UI (diseñador de INTERFAZ DE USUARIO)

A diferencia de los diseñadores de UX, que son responsables de la experiencia general de un producto, el trabajo de un diseñador de UI gira en torno a cómo se diseña el producto. Estos especialistas son responsables del diseño de cada página o pantalla con la que interactúa el usuario y deben garantizar que la UI coincida visualmente con el camino trazado por el diseñador de UX. Por ejemplo, un diseñador de interfaz de usuario que crea un panel de análisis puede presentar el contenido más importante en la parte superior de la página o decidir que un control deslizante o un botón de control es más apropiado para la percepción del usuario sobre cómo ajustar el gráfico.

Normalmente, el diseñador de la interfaz de usuario también es responsable de crear un estilo coherente y debe garantizar que se aplique el lenguaje de diseño adecuado en todo el producto.

Mantener la coherencia en todos los elementos visuales y definir el comportamiento (como cómo mostrar errores o advertencias) es competencia de un diseñador de interfaz de usuario.

La línea entre estas dos profesiones es bastante borrosa y, a menudo, las empresas contratan a una sola persona para estos dos puestos.

Herramientas: Photoshop, Sketch, Illustrator, fuegos artificiales

Diseñador visual (diseñador gráfico)

Un diseñador visual es alguien que hace gráficos. Si le preguntas a alguien que no diseña qué es un diseñador, la primera persona que probablemente le venga a la mente sea un diseñador gráfico. Los diseñadores gráficos no tienen nada que ver con cómo se comunican las pantallas entre sí o con cómo alguien interactúa con un producto. En cambio, se centran en crear hermosos iconos, controles y otros elementos visuales y en elegir las fuentes adecuadas. Los diseñadores gráficos trabajan en los pequeños detalles a los que otros no prestan atención y, a menudo, trabajan en Photoshop con un zoom de 4X u 8X.

También es bastante común que los diseñadores de UI cumplan una doble función y creen la versión final de los elementos de la imagen. Algunas empresas deciden no contratar a un diseñador gráfico independiente.

Herramientas: Photoshop, Bosquejo

Diseñador interactivo (diseñador de movimiento)

¿Recuerdas esa animación de rebote casi imperceptible cuando actualizas tu correo electrónico en tu iPhone? Este es el trabajo de un diseñador de movimiento. A diferencia de los diseñadores gráficos, que trabajan con elementos estáticos, los diseñadores de movimiento crean animaciones dentro de las aplicaciones. Se ocupan de lo que hace la interfaz después de que el usuario la toca. Por ejemplo, deciden cómo deben expandirse los menús, qué efectos de transición deben usarse y cómo debe responder un botón en particular. Un diseño de movimiento bien ejecutado se convierte en una parte integral de la interfaz y ofrece indicaciones visuales sobre cómo utilizar el producto.

Descripción del puesto de Motion Designer en Apple:

“Alta cualificación en diseño gráfico, motion Graphics, conocimientos de arte digital, buena percepción de fuentes y colores, atención general a materiales y texturas, así como conocimientos prácticos de animación. Conocimiento de iOS, OS X, Photoshop e Illustrator, también familiaridad con Director (o equivalente), Quartz Composer (o equivalente), modelado 3D, gráficos en movimiento".

Herramientas: AfterEffects, Core Composer, Flash, Origami

Investigador UX (Investigador de Usuario)

El objetivo de un investigador de UX es responder dos preguntas: "¿Quién es nuestro cliente?" y "¿Qué quiere nuestro consumidor?" Por lo general, las responsabilidades de un investigador incluyen realizar entrevistas a los usuarios, investigar datos de marketing y, en general, recopilar análisis. El diseño es un proceso de mejora continua. Un investigador puede ayudar en este proceso realizando pruebas A/B para identificar qué solución de diseño satisface mejor las necesidades del consumidor. Un investigador de UX suele ser un pilar en las grandes empresas, donde el acceso a una gran cantidad de información le da el poder suficiente para llegar a conclusiones significativas.

Descripción del puesto de investigador de UX de Facebook:

“Trabajar en estrecha colaboración con los equipos de productos para identificar temas de investigación. Realizar investigaciones que aborden simultáneamente tanto el comportamiento como las opiniones de los consumidores. Realizar investigaciones utilizando una amplia gama de métodos cualitativos y cuantitativos, como encuestas”.

Los diseñadores de UX actúan periódicamente como investigadores de UX.

Resultados del trabajo: perfil de usuario, resultados de pruebas A/B, investigación/entrevistas sobre el comportamiento de los usuarios.

Herramientas: micrófono, papeles, documentos.

Desarrollador front-end (desarrollador de UI)

Los desarrolladores externos son responsables de la implementación funcional de la interfaz del producto. Normalmente, un diseñador de UI pasa una maqueta estática a un desarrollador externo, quien luego la transforma en un producto interactivo y funcional. Los desarrolladores externos también son responsables de la codificación y el diseño de los gráficos interactivos creados por el diseñador de movimiento.

Herramientas: CSS, HTML, JavaScript

Diseñador de producto

Diseñador de producto es un término que lo abarca todo para describir a un diseñador que generalmente participa en el proceso de creación de la imagen y percepción de un producto.

El papel de un diseñador de producto no está muy bien definido y varía de una empresa a otra. Un diseñador de producto puede realizar una codificación mínima, realizar investigaciones de usuarios, crear interfaces o crear elementos visuales. De principio a fin, un diseñador de producto ayuda a identificar el problema inicial, establecer algunos criterios para resolverlo y luego crear, probar y perfeccionar varias soluciones. Algunas empresas que quieren trabajar en una colaboración más "fluida" especifican esta vacante en particular cuando buscan un candidato, para en última instancia crear un equipo de diseñadores diversos y trabajar en la percepción del producto por parte de los usuarios, realizar investigaciones de usuarios y crear elementos visuales.

Algunas empresas utilizan "diseñador de UX" o simplemente "diseñador" como término general. Leer la descripción del trabajo es la mejor manera de determinar cuál será su experiencia.

Descripción del puesto de diseñador de producto para Pinterest

“Competencia en todas las áreas del diseño: interacción, parte visual, trabajo con el producto, maquetación. Creación de plantillas para elementos de imagen y su diseño”.

Se busca diseñador

La frase más común que escucho de jóvenes startups. Por lo general, buscan a alguien que pueda hacer todo lo anterior. Están buscando a alguien que pueda crear hermosos íconos, crear páginas de destino, ejecutar pruebas A/B, colocar elementos de la interfaz de usuario de manera lógica en la pantalla e incluso pueda realizar algunas de las tareas de un desarrollador front-end. Debido al carácter general de este puesto, a menudo escuchamos que una empresa quiere contratar simplemente a un "diseñador" sin profundizar en los detalles y especificidades de esta profesión.

Los límites entre cada una de estas tendencias de diseño son muy borrosos. Se espera que algunos diseñadores de UX también trabajen en la interacción con el consumidor y algunos diseñadores de UI también trabajen en gráficos. La mejor manera de encontrar un diseñador es describir en detalle lo que espera de él como parte de su trabajo para su empresa y elegir un puesto de trabajo que refleje más claramente las responsabilidades del diseñador.

Cuando se les pregunta cuál es la diferencia entre un diseñador de UX y un diseñador de UI, a la gente le gusta responder negativamente. Ya sabes, un recurso tan literario. Como "UX no se trata de interfaz, no se trata de diseño gráfico, no es usabilidad, no es análisis, no es un prototipo". Hoy mostraremos brevemente la diferencia, contaremos la historia de la aparición de los términos y explicaremos por qué los dos conceptos, incluso después de tantos años, se fusionan tan voluntariamente en uno: UX/UI.

Brevemente sobre la diferencia.

Un diseñador de UI (interfaz de usuario) es un diseñador de interfaces en un entorno ideal que dibuja botones, iconos, formularios, selecciona fuentes y crea un diseño armonioso y hermoso de todo. Un sitio web, una aplicación, cualquier cosa con la que el usuario interactúe, incluso la pantalla de la terminal de una estación. Y no piensa en nada más.

Un diseñador UX (experiencia de usuario) no es un diseñador, sino un diseñador (solo que en inglés la palabra diseñador tiene solo el segundo significado). Estudia las necesidades de los usuarios, construye diagramas lógicos de la interfaz, prueba prototipos en personas reales y redacta especificaciones técnicas para el diseño. En otras palabras, este es un ingeniero de marketing: la entrada es análisis, la salida son los principios de creación de una interfaz, la lógica del trabajo, el diseño y el contenido. No se trata del dibujo como tal.

Eso es todo.

¿Por qué tuvo que ser complicado?

Como era antes: el diseñador recibió la tarea de "dibujar un sitio web". Todos los sitios eran más o menos iguales: inicio, información sobre la empresa, catálogo y luego en la lista. El diseñador preguntó: “¿Cuándo nos darán el contenido?” Nunca, camarada espíritu, esto es un ejército.

Y al diseñador lo llamaban simplemente “diseñador”. Sin prefijos extranjeros.

Lo que sucedió después: las agencias querían recibir más dinero y el mundo comenzó gradualmente la transición de "simples sitios web" a servicios web complejos. Y un servicio no es sólo una interfaz única, sino que también hay un proceso de negocio especial detrás de él. Por ejemplo, recuerde el sitio web de Airbnb: sin un estudio profundo del tema, ni un solo diseñador gráfico podría crear una interfaz de inmediato.

Como había más trabajo, era necesario dividir una profesión en varias. Ahora el especialista en UX (llamémoslo así para evitar confusiones) investigó y diseñó la arquitectura de la información, el prototipador hizo la parte funcional y el diseñador gráfico (UI) creó el producto final: moderno y agradable a la vista.

Lo mismo ya ha sucedido en la industria. Por ejemplo, los "programadores" se dividieron simplemente en "frontend" y "backend". Y los fronterizos en verdaderos fronterizos y “simplemente diseñadores de diseño”. Por cierto, .

El motivo es siempre el mismo: una sola persona no es suficiente para un gran proceso. Vamonos.

¿Quién es un diseñador UX/UI?

Lo que es curioso: los puestos vacantes a menudo incluyen puestos de diseñador de UX/UI, así como así, con una barra. Incluso Tinkoff busca un especialista en combos de este tipo:

Al otro lado de las barricadas, todos los diseñadores comenzaron a referirse a sí mismos como UX/UI. Porque ser sólo un diseñador está pasado de moda.

¿Quién es UX/UI en un mundo ideal? Un superhombre que lleva a cabo todo el ciclo de trabajo de UX y luego aún logra dibujar todo con varias iteraciones de ediciones (crear la UI).

¿Qué es exactamente UX/UI? Simplemente un buen diseñador. Para quienes consideran que es su deber no sólo “hacer maquetas”, sino abordar cada proyecto de forma individual, empezando por análisis, preguntas, aclaraciones, bocetos, esquemas, etc. Este no es un examen de UX completo, pero, por regla general, es suficiente para respaldar un servicio ya preparado o desarrollar "simplemente un sitio web".

Entonces, si ves un mutante UX/UI sorprendente, debes saber esto:

• Este es un diseñador que aborda un proyecto con la cabeza, y no simplemente haciendo clic con el mouse y el pico.
• Este es un tipo que ha leído muchas palabras inteligentes y ahora se hace llamar UX/UI.

Se puede comprobar de forma sencilla: pídale al diseñador que le diga por qué eligió esta disposición particular de elementos, esta secuencia de pantallas, etc. Un buen diseñador no toma una única decisión sobre la interfaz así: todo tiene una justificación lógica.

Por cierto

Este artículo es el segundo de la serie "En qué se diferencia un especialista web de otro". Lo que nos impulsó a la idea de hacer un directorio de todas las profesiones de la web, con diferentes variaciones de sus nombres. Para hacer la vida más clara para el cliente (y para todos nosotros, de hecho).