Contenido
Cuando comencé mi carrera, era diseñador web. Trabajé en diseño web durante cuatro años, comenzando con sitios de pequeñas empresas y eventualmente pasando a clientes más grandes. Descubrí que no era el diseño gráfico lo que me interesaba ni trabajar para marcas más importantes. Estaba más interesado en los patrones de paginación, la forma en que las personas interactuaban con los formularios y cosas como el rendimiento percibido, que en el diseño visual de una página web.
Cuando veía películas de ciencia ficción, miraba las interfaces. Y cuando jugaba videojuegos, observaba la forma en que estaban distribuidos los menús. Si alguno de estos rasgos le suena familiar, es posible que también sea un diseñador de interfaz de usuario en el fondo.
Dejé mi trabajo en la agencia y comencé mi propia empresa. En mi página de LinkedIn, traté de resumir mi nuevo objetivo profesional: hacer el mejor software posible. Han pasado cuatro años desde que comencé como autónomo y mi viaje no se ha detenido. En estos días ayudo a dirigir una pequeña empresa de diseño de interfaz de usuario llamada Mononucleosis infecciosa. Recientemente le dimos la bienvenida a nuestro cuarto miembro del equipo.
En este artículo, quiero describir lo que es ser un diseñador de IU, incluido lo que implica exactamente el trabajo, dónde encontrar los mejores recursos de aprendizaje y cómo mejorar en su oficio.
¿Qué hace un diseñador de UI?
Encuentro que, en general, se puede dividir el trabajo de un diseñador de interfaz de usuario en cuatro categorías. Te comunicas con el cliente, investigas, diseñas y prototipos, y te comunicas con los desarrolladores. Echemos un vistazo a cada una de estas fases con más detalle.
Comunicación con el cliente
La comunicación con el cliente se trata de comprender el problema del cliente. El objetivo es familiarizarse con el negocio de su cliente, por lo que el comienzo de un proyecto generalmente implica mucha conversación. Está bien no saber demasiado sobre el dominio de su cliente cuando comienza; puede ver su negocio de una manera nueva mientras visualiza posibles soluciones de diseño.
Para ser un buen diseñador de interfaces de usuario, debe poder pensar en conjunto con el negocio de su cliente. Por ejemplo, su cliente podría estar en la aviación. Trabajar para ellos eventualmente lo hará bastante conocedor de esa industria. Por lo tanto, un consejo para su propia felicidad aquí es elegir sabiamente las industrias para las que trabaja, de modo que no termine siendo un experto en algo que no le importa o en lo que no tiene interés.
Durante un proyecto, la comunicación no se detiene. Como diseñador, estarás presentando tu trabajo constantemente. En nuestra empresa somos un equipo remoto, por lo que no tenemos muchas reuniones en persona. En cambio, hacemos un uso intensivo del uso compartido de la pantalla a través de videoconferencias. Todos los días se utilizan herramientas de comunicación como Skype y Slack.
Es útil combinar métodos de comunicación sincrónicos y asincrónicos. Una llamada es excelente si necesita mucha información rápidamente, pero debe estar presente al mismo tiempo. Pensamos en Slack como nuestro "enfriador de agua virtual" y utilizamos Basecamp para gestionar proyectos de diseño complejos. Cuando diseñamos prototipos usando HTML y CSS, usamos problemas de GitHub para discutir el código directamente.
Investigar
Además de la comunicación con el cliente, investigarás mucho. Esto podría incluir estudios de campo, talleres con el cliente, analizar la competencia o definir una estrategia; básicamente, cualquier cosa que le ayude a comprender el problema en cuestión.
La investigación es lo que informa sus elecciones de diseño. Es un artículo que leíste una vez, o esa novedad que Apple acaba de publicar. Cuando llega el momento de explicar por qué eligió un diseño en particular, su investigación lo respalda.
La investigación puede ser muy amplia. A menudo pruebo nuevos dispositivos con fines de investigación o me registro en una nueva aplicación web para estudiar su interfaz de usuario.
Diseño y prototipos
Como diseñador, probablemente pasará la mayor parte de su tiempo haciendo trabajos de diseño y creación de prototipos. Un proyecto de diseño de interfaz de usuario puede avanzar de varias formas, desde el boceto hasta el diseño detallado y la codificación.
El método que utilice depende en gran medida del tipo de proyecto. ¿Qué estás diseñando? ¿Es un sitio web o prefiere llamarlo una aplicación? ¿Utiliza tecnología nativa? ¿Es un rediseño o estás empezando desde cero?
En nuestra empresa no existe un proceso fijo, pero la mayoría de los proyectos siguen el mismo orden: comienzan con bocetos y wireframes, continúan con un diseño visual y de interacción detallado y terminan con un prototipo.
Como diseñadores, pasamos mucho tiempo pensando en nuestras herramientas. Si bien las excelentes herramientas son importantes, no son lo más importante. Poder usar Adobe Creative Suite y aplicaciones como Sketch de manera competente es el equivalente a poder usar un lápiz para dibujar o un pincel para pintar. Todavía necesitas hacer la pintura.
Dicho esto, un interés saludable en las herramientas es algo bueno. Me encanta probar nuevas herramientas que pueden ayudarme a ser más productivo. Mi herramienta de edición de vectores favorita es Illustrator, pero la mayor parte de mi trabajo de diseño visual se realiza en Sketch en estos días. Otros miembros del equipo han cambiado a herramientas más nuevas como Affinity Designer.
Las herramientas son una elección muy personal. Siempre que podamos trabajar juntos fácilmente, todos son libres de elegir el suyo. Para que sea más sencillo hablar de nuestros diseños con los clientes, realizamos prototipos con InVision. Sin embargo, para la creación de prototipos más avanzada, utilizamos HTML y CSS. La herramienta que necesita depende del trabajo que desee hacer con ella.
Comunicación con el desarrollador
Una parte a menudo olvidada del trabajo de un diseñador de UI es la comunicación con el desarrollador. En estos días, no puede salirse con la suya enviando sus diseños a los desarrolladores con la esperanza de que se implementen correctamente. Los mejores diseñadores saben que el desafío no está en crear el diseño, sino en comunicarlo, no solo a las partes interesadas que deben dar su aprobación, sino también a los desarrolladores que deben implementarlo.
La comunicación de un diseño se presenta de muchas formas: especificaciones detalladas, suministro de activos, revisión del diseño en conjunto. Lo que tiene sentido entregar en cada instancia depende en gran medida de si el proyecto es una aplicación nativa o web.
El enfoque tradicional es entregar activos junto a diseños de pantallas. Los diseños de pantalla se pueden usar para ver cómo se verá el diseño en su conjunto, mientras que los activos son PNG y SVG de íconos listos para usar, por lo que los desarrolladores no tienen que lidiar con un editor de gráficos.
En nuestra empresa somos defensores de ofrecer más que eso. Utilizamos guías de estilo de componentes para ayudar a mantener la coherencia en nuestros diseños. Cuando se trata de un proyecto web, entregamos conjuntos detallados de HTML y CSS, documentados pieza por pieza, listos para su implementación. Creo que tener un ojo de diseño en cada fase del desarrollo de software es la única forma de alcanzar mi objetivo de crear software de clase mundial.
Aplicaciones web vs nativas
Cuando diseña una aplicación nativa para una plataforma (por ejemplo, iOS o Android), tiende a cumplir con ciertas pautas. Cuando diseñas para la Web, no hay tanta orientación. Lo que suele ocurrir es que su cliente tiene un conjunto de pautas gráficas para su marca que determina cómo deben verse las cosas.
Sin embargo, estas pautas tienden a adaptarse a los sitios web de marketing, y lo que contiene no siempre conduce a buenas decisiones de interfaz de usuario. Las fuentes tienden a elegirse por razones de marketing, no por razones de legibilidad. Los colores pueden ser llamativos y llamativos, lo que funciona en una campaña publicitaria, pero no en una aplicación que usa a diario. Estas guías deben interpretarse.
Hay algunas pautas de IU para la web. Se podría argumentar que la web es un crisol de diferentes estilos. Si está creando algo que se parezca más a una aplicación que a un sitio web, necesita conocer los frameworks más utilizados como Bootstrap y ZURB Foundation. El marco comienza a determinar cómo deberían verse las cosas, porque no quieres reinventar la rueda. Y eso probablemente sea algo bueno.
En nuestra empresa, nos gusta usar Bootstrap. Proporciona tamaños predeterminados sensibles para elementos comunes de la interfaz de usuario como botones, tablas de datos y modales.
En diseño web, estás más limitado por las capacidades técnicas de la web. Solía ser difícil implementar adornos visuales simples como esquinas redondeadas en un sitio web. Estos días han quedado atrás: ahora puede dibujar interfaces de usuario con muchas sombras, transiciones, animaciones e incluso 3D.
Como diseñador, es mucho más realista tomar el control del proceso y el diseño en el navegador. No he visto a muchos diseñadores de UI hacerse cargo de la programación de UI de una aplicación nativa, pero un diseñador que hace el HTML y CSS de una aplicación web es algo común. Si puede codificar sus propios diseños, tendrá una ventaja sobre sus compañeros que no codifican y, para mí, es la única forma de comprender realmente cómo funciona la Web.
Restricciones web
Pronto descubrirá que no todos los trucos interesantes que aprende son compatibles con todos los navegadores, y esa es la realidad del diseño para la Web. Es bueno seguir principios bien conocidos como la mejora progresiva, en los que carga contenido mejorado siempre que sea posible, pero también piensa en cómo se degrada el contenido.
Recientemente, "cortar la mostaza" se ha vuelto popular. Promovido por el equipo web de la BBC, esto implica diferenciar entre navegadores "buenos" y "malos" y proporcionar una experiencia limitada a los navegadores "malos". Sin embargo, en realidad solo funciona para sitios de contenido.
Cuando se trata de experiencias similares a las de una aplicación, muchas personas limitan el soporte a unos pocos navegadores líderes únicamente, para facilitar el desarrollo. Lamentablemente, esto nos devuelve a la situación de 1996 en la que necesita un determinado navegador para ver el contenido.
Mejorando su conjunto de habilidades
Entonces, ¿cómo puede mantenerse actualizado con la industria web en rápido movimiento y mejorar sus habilidades? Veamos algunos métodos diferentes para mejorar sus habilidades ...
Conocimiento de la plataforma
Una parte importante del arsenal de un diseñador es el conocimiento de la plataforma. Debe conocer los distintos sistemas operativos y cómo los utilizan las personas. Como diseñadores, tendemos a usar Mac, pero luego es fácil olvidar que la mayoría de la gente usa Windows Box para hacer su trabajo.
Siento que solo puedes entender algo de verdad si lo usas tú mismo. Prefiero usar mi Mac para diseñar, pero paso mucho tiempo poniéndome al día con la evolución de otras plataformas. Tengo varias copias de Windows instaladas en mi Mac como máquinas virtuales. He estado ocupado probando nuevas compilaciones de Windows 10 usando el programa Insider de Microsoft para verificar los diversos cambios en la interfaz de usuario.
También compro regularmente hardware nuevo para probar cómo funciona. Compré un Apple Watch solo para probar la plataforma. Luego lo vendí porque sentí que no estaba agregando mucho a mi vida.
Además de esto, la web puede verse como su propio sistema operativo. Está en constante evolución y cada semana se añaden nuevas funciones a todos los proveedores de navegadores. Vale la pena conocer los aspectos técnicos de los navegadores, especialmente en lo que respecta a CSS y capacidades gráficas. Necesita saber qué son SVG y WebGL, y cómo puede utilizar la API de animaciones web.
Cada plataforma evoluciona con el tiempo y, como diseñador de interfaz de usuario, es su tarea mantenerse actualizado. Después de todo, lo que esté diseñando no vive de forma aislada, sino que forma parte de un ecosistema de software más grande.
Regresar a lo básico
Lo que estamos luchando hoy no es tan diferente de lo que luchábamos hace 20 años. Hay un montón de buenos consejos en los libros. Para empezar, pruebe el diseño defensivo para la Web de Jason Fried y Matthew Linderman y Don’t Make Me Think de Steve Krug.
Si no conoce conceptos como modalidad y asequibilidad, debe leer más. Debería poder explicar qué es la ley de Fitts. ¿La ley de proximidad de la Gestalt? Este es el pan y la mantequilla del diseño de la interfaz de usuario.
Inspírate con juegos y películas
Como diseñador de UI, me baso en otras fuentes de inspiración para hacer mi trabajo. Encuentro mucha inspiración en los juegos. Algunos juegos son muy complejos y los diseñadores de UI han tenido que resolver los mismos problemas complejos de interfaz que el diseñador de UI que trabaja en proyectos empresariales.
Los juegos también pueden significar tendencias. El minimalismo que se encuentra en los menús de Colin McRae Rally me recuerda la dirección de iOS7. En cierto modo, el diseño de animación de la interfaz de usuario que ahora está de moda apareció en los juegos hace años y años. El paso del skeuomorfismo a las interfaces funcionales y desnudas y el "diseño plano" también ha sido evidente en los juegos. Compara Oblivion de 2006 con Skyrim de 2011. Ambos juegos son juegos de rol de la misma serie, pero la diferencia es sorprendente.
Las interfaces futuristas en películas de Marvel como Iron Man también han sido una inspiración para mí. No son exactamente ejemplos utilizables, pero me hacen pensar más en la informática como un todo. ¿Queremos un futuro de pantallas o queremos que las pantallas desaparezcan? Esta es probablemente una buena pregunta para plantear en un pub lleno de diseñadores.
Creces como diseñador a través del trabajo duro, la perseverancia, hablando con tus compañeros y leyendo muchísimo. Hace aproximadamente un año leí un artículo en el New York Times sobre personas de más de 80 años que continúan perfeccionando su oficio. Siento que solo estoy comenzando. ¿Y usted?
