Triunfa como diseñador: aprende a trabajar con desarrolladores

1. Introducción: Hola, soy Vincent. Soy diseñadora y desarrolladora. Como diseñador, entiendo la frustración que surge en algunos proyectos de diseño web, donde tal vez recuperas tu diseño de tu desarrollador y se ve mal. Pero como desarrollador, puedo entender la frustración de expectativas no comunicadas o imposibles de cumplir plazos. La buena noticia es que ambos son problemas solventes. Al comunicarnos de manera más efectiva, podemos colaborar de manera más efectiva. Nos convertimos en colaboradores y no en adversarios, y que es lo que a veces se siente. Esta clase es para ti si eres un diseñador que está asumiendo tu primer par de proyectos de diseño web y tienes curiosidad por cómo funciona el proceso moderno. O si eres un diseñador que nunca ha trabajado con un desarrollador y no sabes por dónde empezar, tal vez tengas un poco de miedo de preguntar. Pero también es para ti si eres diseñador web, estás insatisfecho con cómo han ido tus proyectos en el pasado. Para nuestro proyecto de clase, estaremos tomando un diseño existente y convirtiéndolo en un sistema de diseño desglosándolo en componentes. En el proceso, aprenderás algunas nuevas formas de pensar en el diseño, y aprenderás algunas nuevas formas de comunicarte con tu desarrollador también. En última instancia tendrás algunas herramientas para colaborar mejor, y se sentirá un poco menos como si estuvieras hablando dos idiomas diferentes. A mí me emociona empezar. Vámonos. 2. ¿Qué está malo de la forma que hacemos las cosas ahora?: ¿ Qué tiene de malo la forma en que hacemos las cosas ahora? Si llevas un tiempo en esta industria, ya sabes, las relaciones de diseñador y desarrollador pueden deteriorarse con el tiempo. Por ejemplo, dime si alguna vez te has sentido así. A lo mejor mandas tu diseñador, tu diseño a tu desarrollador, y lo recuperas y está completamente equivocado y eres como mi diseño fue genial hasta que el desarrollador llegó a ello. O tal vez dicen que podrían construirlo en tres semanas y han sido seis, como ¿cuál es el trato? ¿ Por qué no pueden hacer bien el posicionamiento? ¿ Es esto un problema con todos los desarrolladores, como todos estos problemas siguen subiendo. Lo que guarda, ¿por qué no pueden simplemente en blanco? Todas estas son cuestiones de comunicación. A modo de ejemplo, piensa en tu restaurante favorito. La mayoría de los restaurantes se dividen en el frente de la casa y la parte trasera de la casa, el frente de la casa es el camarero, anfitrión, anfitriona, etc. Parte trasera de la casa es personal de cocina. Ahora en un mal restaurante. Estas dos partes de la casa no se comunican, y como resultado obtienes mesero malísimo. No quieres mandar tu hamburguesa de vuelta porque podría volver con algo extra en ella, pero en un buen restaurante en tu restaurante favorito, esas dos mitades de la casa se comunican libremente. Podrían incluso saber algo sobre los trabajos de los demás como tal vez el personal de cocina a veces trae una comida a un cliente, o el camarero ensambla una ensalada. A pesar de que parece que deberían estar hablando dos idiomas diferentes, se comunican y colaboran eficazmente. ¿ Cómo podemos hacer más de eso en la industria del diseño y desarrollo? Bueno, primero echemos un vistazo a cómo se descompone. Eso lo veremos en la siguiente lección. 3. ¿Cómo se ve el proceso de diseño típico ahora?: ¿ Cómo es el típico proceso de diseño web? Está bien. Hora de la historia. Digamos que eres un diseñador freelance, si no lo eres ya, y acabas de aterrizar un nuevo cliente, tomémoslo de ahí. ¿Qué aspecto tiene eso? Debo señalar que esto se aplica con la mayor precisión a los equipos u organismos internos. También aplica al desarrollo de aplicaciones. Yo solo hablo de desarrollo web porque eso es lo que sé, pero este es probablemente un proceso similar a lo largo de todo. Han sido semanas de reuniones. Has estado de acuerdo en la dirección. Estás emocionado de empezar, el cliente está emocionado de empezar, y estás como, vamos a ir. Trabajas solo por un tiempo. Diseñas tu página de inicio, tus páginas internas, etc. envías al cliente. El cliente finalmente aprueba. Han pasado cuatro meses de revisiones y finalmente estás ahí. Ya casi es hora de lanzamiento y tienes un plazo de seis meses en este proyecto, así que te quedan dos meses. Ya casi estás ahí. Se lo mandas al desarrollador y el desarrollador dice: “No puedo hacer esto en dos meses”. Peor aún, te dicen : “No puedo hacer esto en cuatro meses. Necesito al menos otros seis meses para construir esto como está diseñado”. Eso son noticias terribles. No se puede volver al cliente con eso. ¿A qué se dedica? Dices: “Está bien, desarrollador, solo intenta lo mejor que puedas y volveremos a visitarlo en un par de semanas”. Comienzan, y te envían sus prototipos, ¿y adivina qué? Es un basurero en llamas. Hay titulares en el lugar equivocado, cosas en el color equivocado, nada funciona correctamente. Todo es buggy. Es como, ¿qué hicieron todo este tiempo? ¿ Ni siquiera les importa? ¿Qué da? Queda un mes en el proceso y el cliente repente se da cuenta de que olvidaron la página súper importante. Tiene que estar ahí para un lanzamiento. Has diseñado furiosamente una nueva página, y lo envías a tu desarrollador a pesar de que probablemente sea un poco áspera alrededor de los bordes. El desarrollador lo desarrolla furiosamente y vuelve, y de nuevo, todo está buggy, todo está mal. ¿ Cuál es su trato? Por último, es la semana del lanzamiento, los sitios buggy, nadie está contento, se ha estresado todas las nocheras, el cliente no está contento, y el sitio llega tarde. Este es un escenario exagerado, pero tal vez te suena un poco familiar. A lo mejor has vivido algo parecido. ¿ Dónde sale mal este proceso? Bueno, yo diría, justo aquí, al principio mismo. ¿ Qué podríamos haber hecho de manera diferente al principio para empezar a resolver estos problemas? 4. Imprimir a desarrolladores: Espero que no hayas experimentado un proyecto como el que acabamos de hablar en la última lección. Pero es probable que pudiera haber sonado un poco familiar. En serio, ¿por qué no debería? Es decir, ese es un proceso bastante común. Diseñas, envías al desarrollador, lo desarrollan y te lo sigues pateando de nuevo a ellos hasta que lo hagan bien y eventualmente lo lanzan. ¿Qué tiene de malo eso? Bueno, el problema es que el buen diseño lleva mucho tiempo, lleva un tiempo. Al acuñar el desarrollo en el último minuto posible así, los desarrolladores terminan corriendo y haciendo trabajo de mala calidad. Otro problema con él es que los desarrolladores carecen de contextos, como por qué estoy construyendo lo que estoy construyendo? ¿ Cuándo se tomó esta decisión y por qué? En el proyecto de ejemplo, el diseñador se fue durante meses. El problema con eso es cuanto más tiempo pasas diseñando sin ningún aporte del desarrollador, más lejos tu diseño tiende a apartarse de la realidad. Porque puede resultar meses después has diseñado algo que ni siquiera es posible implementar en el tiempo que has asignado para el proyecto. A lo mejor estás pensando, ¿qué pasa con el diseño por comisión? ¿ Estoy en riesgo de arruinar mis diseños dejando que un desarrollador entre en el proceso. El diseño cambiará. Pero eso no es malo. Por ejemplo, un desarrollador puede ayudarte a entender lo que es incluso posible implementar en el tiempo y presupuesto asignado. También pueden encontrar otros problemas, como los problemas de accesibilidad en un diseño. A lo mejor tu diseño es hermoso pero no da cuenta de los usuarios de baja visión y un desarrollador puede ayudar a detectar eso. Podrían incluso conocer alguna nueva tecnología o técnicas que pueden mejorar el diseño. Estos son todos cambios, pero todos son buenos cambios. Es importante que se descubran antes de que pases de cuatro a seis meses simplemente haciéndolo diseño pixel perfecto. ¿ Cómo involucramos a los desarrolladores de manera temprana? Hablemos de eso en la siguiente lección. 5. ¿Cómo me involucro a los desarrolladores antes?: ¿ Cómo involucro a los desarrolladores, temprano? ¿Qué significa eso? ¿ Cuándo debería involucrarlos? Bueno, cuando tienes un nuevo proyecto, ¿qué es lo primero que haces? ¿ Tienes una reunión de inicio? ¿ Tienes una reunión con el cliente, para simplemente averiguar exactamente lo que necesitan. ¿ Algún tipo de reunión? De verdad, en cualquier momento muy temprano en el proceso, es un buen momento para involucrar a los desarrolladores. Cuanto antes mejor. Muchos equipos involucraron a los desarrolladores, aquí, cuando realmente deberían estar involucrados, aquí, muy temprano. Eso significa que ningún gran diseño revela, sobre todo no al desarrollador. Por ejemplo, para muchas personas, el proceso de diseño, comienza con una reunión como esta, donde tal vez el entregable sea un diagrama de flujo. Estás tratando de mapear, cómo el cliente de la página web, pasa del punto A al punto B. Ahí es donde debe involucrarse el desarrollador. Muchas agencias de diseño, piensan que esto, se ve así, pero en realidad debería verse así, donde quien esté tocando el proyecto se incluye ahí temprano, en el proceso. Le consigues bosquejar en una pizarra si eso es lo que se necesita. Después a lo largo del proceso, mantenerlos involucrados. Hacer un montón de preguntas. Resiste la tentación de ir, y diseña por ti mismo durante meses y meses. Si no estás seguro de lo que necesitan, o si no estás seguro de lo que es técnicamente posible, pregunta aunque signifique que les estás enviando diseños inacabados, o activos en bruto como alambradas. Eso está bien. Cualquier información nos puede ayudar. Ahora, en última instancia, tus procesos depende de ti. No te voy a decir cómo trabajar, pero, si puedes involucrar temprano a tus desarrolladores, hazlo. El resultado es, el desarrollador está involucrado en el éxito del proyecto. El relato, es más colaborativo, más interactivo, menos adversarial, y en última instancia conduce a usuarios más felices, y clientes más felices, lo cual es importante. 6. Mejorar el proceso de Handell de diseño: El segundo que podemos hacer para mejorar nuestras relaciones con nuestros desarrolladores y nuestras colaboraciones es mejorar nuestro proceso de entrega de diseño. Ahora, el mano-off de diseño es el proceso que usas para conseguir tus diseños a tus desarrolladores para que puedan empezar a hacer su trabajo, y es un problema difícil. De hecho, recordarás ahí es donde el proceso desde la perspectiva del diseñador en nuestro proyecto imaginario, ahí es donde parecía salir mal. El desarrollador no estuvo de acuerdo sobre el alcance. No pudieron hacerlo a tiempo y cuando lo hicieron fue buggy y malo. Sentía que simplemente no les importaba. Pero, ¿cómo puede nuestro proceso de diseño hacer esto mejor? Bueno, creo que para entender esto es útil pensar en lo que realmente necesita un desarrollador de un diseño. ¿ Qué pasa por su mente cuando obtienen un diseño de un diseñador y empiezan a desarrollarse? Para darte una idea clara de eso, pasemos por un archivo de diseño que acabo de recibir. Digamos que soy el desarrollador en ese proyecto terrible imaginario y veo ahí mi proceso de pensamiento. Cuando recibo un diseño, una de las primeras cosas que empiezo a construir es lo que pienso como el marco del sitio. Estamos hablando de cualquier cosa que aparezca en cada página como tu encabezado, tu pie de página aquí abajo, y cualquier otra cosa que pudiera aparecer en todas partes del sitio. Entonces me mudaré a otras secciones importantes como esta imagen de héroe de aquí. Cualquier llamada de marketing común, cosas así, y me pondré cada vez más granular con el tiempo hasta el punto de que estoy construyendo cualquier pequeño módulo individual como este. Mi objetivo en última instancia es, tan fielmente como pueda, recrear este diseño pero hacerlo en código. En ocasiones el archivo de diseño, como verás, hace que esa tarea sea difícil o incluso en algunos casos, imposible. En un proceso más colaborativo hubiera estado ahí para todas las reuniones de diseño que llevaron a este diseño final aquí que acabo de obtener. Pero digamos por el bien del argumento que no tengo contexto, acabo de recibir este diseño del diseñador con la expectativa de que en un par de semanas tengan un sitio web de trabajo. Hablemos de algunas de las cosas de este diseño que lo dificultan y a su vez, aprenderás algunas de las cosas que tus desarrolladores necesitarán de ti cuando obtengan un archivo de diseño [inaudible] tú. De inmediato el eso, una de las primeras cosas que miro es la estructura de capas. Se puede ver en nuestro panel de capas, hay algunos nombres de capas que son útiles como tengo un logotipo aquí. También ahí, cada grupo de capas individual está abierto, lo cual es realmente agravante para trabajar con. Pero aquí tenemos algunos nombres de capas pero las capas principales, los grupos, son todos número uno, número dos. Tienes aspecto aleatorio, déjame encontrar un ejemplo, formas aquí. No sé qué forma dos, forma cuatro, forma tres. ¿Qué carajo es todo eso? Las capas están muy desorganizadas lo que hace de este un archivo realmente lento, difícil para mí trabajar con justo fuera de lo [inaudible]. Tengo que ir manualmente y seleccionar las cosas y juguetear hasta que consiga la parte correcta. Lo segundo que noto aquí es que en la navegación allá. 7. Introducción a los sistemas de diseño: Podrás estar acostumbrado a pensar en tu diseño web como páginas y diseños. A lo mejor es a lo que estás acostumbrado a entregar a tu desarrollador, estás acostumbrado a enviarles un gran PSD lleno de diseños de páginas enteras. Pero si lo piensas, realmente no estás diseñando una página entera, ¿verdad?. Estás diseñando un sistema, un sistema mediante el cual otras personas crean páginas. A lo mejor tu desarrollador crea estas páginas. Se trata de un sistema que está conformado por componentes modulares y reutilizables. Estamos hablando de titulares y videos y deslizadores y cualquier otra cosa que esté destinada a ser reutilizada en la página web y el diseño. Piensa en términos de LEGO, no de diseño. Por lo que aún tienes que hacer tus diseños de página completa, pero luego una vez ahí, una vez que estés contento con ellos, tal vez empieces a romper las cosas en componentes pequeños y reutilizables. También puedes pensar en términos de lineamientos para su uso. Por ejemplo, cuántos píxeles van entre este módulo y este módulo, este componente y este componente. ¿ Puede aparecer este componente alguna vez junto a este otro componente, cosas así. Ahora bien, esto no está destinado a ser una clase de sistemas de diseño. Hay mucho mejores clases para eso, algunas de las cuales tenemos aquí en Skillshare. Por lo que voy a enlazar con un par de ellos. Es realmente solo para que pienses en descomponer tus diseños y podemos hablar del “por qué” en el siguiente video. 8. Pero, pero, pero, ....: Al pensar en sistemas de diseño, es posible que tenga algunas objeciones en mente. A lo mejor estás pensando, ¿qué pasa con el diseño y la composición? Si rompo mi diseño en partes y piezas individuales que un desarrollador puede armar de alguna manera, ¿eso no va a arruinar mi diseño? Bueno, antes que nada, pensamos así de todos modos cuando nos estamos desarrollando. Cuando consigo un nuevo proyecto, una de las primeras cosas que hago es empezar a dividir las cosas en pequeños trozos reutilizables para que pueda construir cosas más adelante por el camino. Funciona así de todos modos, sea o no que el diseño lo contemple. Pero en segundo lugar, aún se puede diseñar en el navegador. Piensa en el navegador como otra herramienta de diseño. hecho de que el diseño no esté sucediendo en Photoshop, o Sketch, o cualquiera que sea tu herramienta, no significa que no esté sucediendo. Todavía puedes diseñar directo. Todavía nos puedes decir a los desarrolladores cómo armar las cosas para que se vea genial. También puede estar pensando, no me limitarán los componentes, qué tan creativos y hermosos pueden ser mis diseños? Bueno, no. Estos componentes, recuerden, se pueden armar. Se rompieron juntos como ladrillos de Lego. Echa un vistazo a este elefante. Se trata de un elefante gigante hecho de diminutas piezas de Lego. Tus componentes no te limitan. Además, es importante tener en cuenta que sus propios componentes pueden ser más elaborados. No estás limitado en términos de diseño. Puede que también estés pensando, pero esto no tiene sentido para mis clientes. Al igual que hay pequeñas empresas y simplemente no tienen el presupuesto para algo como esto. Yo argumentaría que el sistema de diseño no tiene que ser súper grande, y detallado, y elaborado. De hecho, incluso uno simple puede entregar mucho valor. Por ejemplo, si has dividido tu diseño en piezas individuales, puedes entregar una nueva página rápidamente. Eso habría ayudado mucho en nuestro proyecto de ejemplo, donde el cliente tenía esa solicitud de última hora para una página, y el desarrollador no pudo entregarla a tiempo. Si hubiera podido llegar a su papelera de pedacitos y piezas para juntarlo, el diseñador ni siquiera habría tenido que saltar a la herramienta de diseño. Los sistemas de diseño hacen para la entrega suave a los desarrolladores. No tienen que adivinar tanto. Una vez que el sistema está diseñado, puedes armar nuevas características y nuevas páginas sin demasiadas molestias. En última instancia, es menos frustración para todos los involucrados en el proceso. 9. Ejemplo de sistemas de diseño: Volvamos a visitar ese PSD desde antes. El que el diseñador centró al desarrollador y caminamos a través de él y todas las preguntas que tenían. Recuerda todas esas preguntas. Echemos un vistazo a cómo podría verse ese proceso si el diseñador hubiera diseñado con componentes en mente. ¿ Qué aspecto tiene tener un archivo de diseño que tome en consideración los componentes y los sistemas de diseño como parte del proceso de diseño Veamos este archivo. Este es un kit de interfaz de usuario de un diseñador llamado Meagan fishers, es diseñadora web. Esto es en Adobe XD. Si no estás familiarizado, es el programa de diseño de UI de Adobe. Es excelente si no lo estás familiarizado, adelante y descárgalo. Es gratis, es realmente bueno. Tienen un montón de kits de muestra. Ellos los llaman kits de interfaz de usuario, pero es algo así como un sistema de diseño. Aquí mismo bajo archivo, Obtener kits de interfaz de usuario. Puedes conseguir el con el que estoy trabajando aquí bajo más kits de interfaz de usuario. Echemos un vistazo a esto y veamos qué hace que esto sea diferente del PSD. A primera vista, eso parece muy parecido. Aquí está esta sección de marketing. Más secciones de marketing. Elementos básicos del sitio como tu nervio, tu logo, y eventualmente tu pie de página. Tengo un buen punto de partida aquí. Pero, ¿qué hace que esto sea diferente del PSD? Enseguida del bate, si alejamos un poco, se puede ver cómo tiene esta configuración de cartón. Tienes el principal el marketing de la página de inicio con la toda la información de marketing. Después te lleva con tableros de arte a través de un flujo de inscripción. Se pueden ver todos los pasos del proceso de inscripción para esta aplicación imaginaria que está diseñada. Después tienes tus pantallas de dashboard; Dashboard 1, Dashboard 2, Dashboard 3, etc todo el camino hasta el servicio de reservas. Todas estas cosas ya me dan un contexto más amplio de cómo encajan todas estas cosas. Te darás cuenta de que no hay estados de Hover ni nada por el estilo. ¿ Dónde está el sistema de diseño, dónde los componentes? Si alejamos un poco más, puedes ver que aquí tenemos varios tableros de arte más para considerar. Ahora, vamos a acercar este de aquí. Ella lo llama Kit UI aquí, pero es un sistema de diseño. Puedes usar esas palabras indistintamente. Ahora ya, tenemos ejemplos de estilos tipográficos basales. Tenemos nuestro encabezado es 1-4. Parece que tenemos algunas etiquetas de texto corporal y de forma y otros elementos menores. Si amplías un poco más, puedes ver que tiene estilos de fuente y nombres de fuente y exactamente dónde se usan. Textos de titular y cuerpo. Estas son cosas descriptivas que nos dicen cuándo usar qué. También tenemos muestras de color, cada una con el número hexadecimal del color. El siguiente tablero de arte se llama Llamadas a la Acción & Iconos. Ya se tiene una idea de para qué se va a utilizar cada uno de estos elementos. Es una especie de uso de los nombres de los tableros de arte, como se podría ver, nombres de capas en Photoshop. Son un poco más útiles porque dentro de este tablero de arte, se puede ver en base a estos titulares, cuál es la intención de cada uno de estos. Este es un llamado a la acción en la oscuridad o llamado a la acción de marketing. Podemos volver a nuestro tablero de arte de marketing aquí. Se puede ver que tenemos, llamado de marketing a la acción en la oscuridad y luego en la llamada de marketing a la acción en la luz. Corresponden perfectamente con el que ella ha diseñado. También tiene estados Hover. Se puede ver el estado Hover ilustrado con el icono del ratoncito. Después ves un producto CTA Primaria. ¿ Cuál es el producto primario? Vamos a alejar el zoom. Eso corresponde al producto real que estará utilizando el usuario. Se puede ver el botón coincidente justo aquí, Reservar un servicio. Eso ya me da mucha información solo en base a cómo se le nombra cosas sobre qué situaciones requieren el uso de cuál de estos botones. También está incluida Hover estados, lo cual es genial. Tenemos los estilos alternos en la luz y luego él o ella se incluye un estilo discapacitado. Ese es un estado del que no hablamos cuando estábamos mirando antes al PSD. Los estilos desactivados ocurren si no quieres que el usuario pueda hacer clic en un botón en cierta circunstancia. A lo mejor han introducido información inválida y no quieres que sigan adelante hasta que la hayan corregido. El estado de los discapacitados necesita un diseño. También tenemos un estilo CTA secundario aquí con el icono pequeño a la izquierda. Se ve eso repetido aquí. Aquí tenemos iconos, cuales están todos recogidos aquí mismo en un solo lugar, lo cual es impresionante. te puedo decir cuántos archivos de diseño he conseguido donde se dispersaron todos los activos por todo el disco duro de los diseñadores. Tenía que ir a perseguirlos y averiguar exactamente qué activos necesitaba. Además no sólo lo que necesitaba, sino los cultivos que necesitaba. ocasiones el activo no estaba preparado en el PSD de una manera que pudiera usar en la página web. Estos están todos listos para salir, listos para exportar aquí mismo. Que estamos hablando de activos, alejemos el zoom y miremos esto. Ella tiene todas sus imágenes aquí. Todo listo recortado y listo para salir. Estos son de todo lado, se parece a todas las imágenes de la barra lateral. Puedo ver exactamente dónde se usa cada uno y cuándo. Ya es solo sencillo para mí exportar y dejarlo caer en mi código. Hace mucho, mucho más fácil mi trabajo. Si nos fijamos en el siguiente tablero de arte, tenemos campos de forma. Parece que todo elemento de forma importante se contabiliza por ello. Tenemos nuestras entradas de texto aquí. Si hacemos zoom, puedes ver que tenemos colocado un texto de marcador de posición de muestra. Tenemos el estado activo donde desaparece el texto del marcador de posición. Tenemos un activo con el usuario habiendo puesto en texto y después tenemos un estado Error, que es impresionante. Es genial tener todo esto justo aquí listo para que empiece a convertir esto en código. También ha diseñado algunos toggles personalizados y elementos multi-selectos. Estos son elementos de forma más especializados que verás. Si hace clic uno el otro se apaga y si hace clic en el otro, el anterior se apaga. Tenemos todos nuestros estados Hover, todos nuestros estados activos presentes y contabilizados. Después, vamos, tenemos bajadas. ¿ Qué aspecto tiene cuando se cierra el desplegable? ¿ Cómo se ve cuando está abierto? ¿ Qué aspecto tiene cuando uno de los elementos del desplegable se coloca sobre. Entonces, ¿qué aspecto tiene el desplegable seleccionado? Ese es otro estado del que no hablamos una vez que el elemento está en su estado final. ¿ Qué aspecto tiene eso? Tengo algunos más personalizados select aquí con algunas imágenes y algún texto opcional aquí Entonces tenemos casillas de verificación, que de nuevo tenemos unas áreas de texto de estado Error. Esa es una que a menudo va sin estilo. Estos pequeños componentes de servicio que describen un servicio y tal vez estos son estados diferentes. Parece que se olvidó de actualizar la etiqueta aquí, pero está bien. Generalmente puedo tener una idea de cuál es su intención aquí desde el diseño y desde verlo tanto fuera de contexto. Al igual que ¿cómo se ve por sí mismo? Pero también en el contexto del diseño terminado. Lo siguiente que podemos ver es nuestros elementos de barra lateral. Es posible que recuerde la barra lateral que se está utilizando. Aquí tenemos no solo una barra lateral, sino también una segunda barra lateral que ocurre más adelante a medida que el usuario se adentra más profundamente en la aplicación. Tenemos ejemplos de cómo se ven esos, cómo se ve cada elemento en Hover, y cuando hiciste clic en él, lo mismo aquí, y luego hay otra pequeña barra de progreso aquí que está diseñada. Cada estado obtiene su propio diseño para que no haya duda de qué aspecto tiene. Cuando estos se inician, ¿cómo se ve cuando terminaron? Está bien ahí. Conseguimos todos los estados con esa barra lateral llena para nosotros. Ahora tenemos de nuevo componentes de marketing, basados en el nombre del tablero de arte. Puedo adivinar que esto sólo se usa en la sección de marketing del sitio web, por lo que tenemos este llamado a la acción con la navegación en la parte superior, otro llamado a la acción y apenas más componentes. Algo a lo que hay que prestar atención aquí es cómo, si vamos todo el camino de vuelta a la izquierda, comenzamos con algo sencillo como tipografía, colores, botones y sus estados. Nos hacemos cada vez más complejos gradualmente a medida que vamos a la derecha, y se puede ver que para cuando llegamos a los componentes de servicio, estamos hablando de elementos del sitio web que son bastante complicados, conformados por elementos más pequeños de pasos anteriores. Aquí puedes ver un ejemplo de nuestros botones de servicio, un pequeño componente de mapa aquí con todos nuestros iconos. Todos estos son ejemplos de componentes que se han extraído y son repetibles. Después podrás verlos más adelante utilizados en la aplicación real, en el contexto de la aplicación donde el usuario pasará a reservar un servicio para su patrón. A lo mejor esto parece complicado y es solo mucho trabajo, y lo es. Pero, ¿cuáles son las ventajas? ¿ Por qué lo harías así? Bueno, en primer lugar, hay muy pocas preguntas mientras estoy trabajando sobre dónde van las cosas y qué hacen. Entonces aunque tal vez algo no se contabiliza, como un estado estacionario de un determinado elemento, basado en toda esta información adicional, puedo hacer una conjetura más precisa si tengo que hacerlo. Reduce de manera significativa de ida y vuelta, y cualquier brecha que este archivo de diseño deje en mi conocimiento, puede llenarse mediante la comunicación. Puedo hacer preguntas, pero menos de ellas, así que es menos agravante para ti y toma menos tiempo para los dos. Al archivo parece faltar estilos móviles, pero está bien. Supongamos que me han incluido aquí en el proceso de diseño hasta este punto, y decidimos mutuamente que el cliente no necesita estilos móviles. A lo mejor el cliente explícitamente no quiere estilos móviles y porque sus clientes no lo usan. Eso está bien. Pero si resultó que el diseñador había olvidado por completo móvil y hay una revuelta para conseguirlo, aquí no hay tantas cosas que no pueda descifrar por mi cuenta. Hay ciertas partes de ella que definitivamente tendría preguntas sobre cómo podrían verse en el móvil. Al igual que este es un elemento bastante amplio. ¿ Qué aspecto tiene eso? ¿Cómo se descompone eso? ¿ Qué aspecto tiene esto en el móvil? Eso podría ser difícil para mí adivinar. Pero en su mayor parte, ya que estamos trabajando con componentes, básicamente puedo averiguar cómo se verá esto en el móvil y puedo ayudar al diseñador a lo largo y suavizar el proceso para ellos. Todo lo que necesitan hacer es proporcionarme lo básico y ciertos elementos que simplemente no lo dan cuenta. Entonces, ¿cuáles son algunas ventajas de Adobe XD o algo más parecido, como Sketch sobre algo como Photoshop? Bueno, si llevas tiempo trabajando con Photoshop y ahí es donde te sientes cómodo, está bien. Pero estas herramientas ofrecen algunas ventajas bastante significativas. Por ejemplo, cuando hablamos de componentes, veamos un ejemplo. Digamos que el cliente decide este color aquí, que podemos ver en uso en el sitio de marketing. Eso es justo aquí, creo. Digamos que deciden que eso es demasiado amplio y tenemos que cambiarlo. Bueno, abramos la barra lateral, porque XD ya tiene el concepto de componentes integrados, solo podemos cambiar esto una vez. Digamos que queremos estrechar ese llamado y queremos que esto sea más estrecho también. Ahora esto es obviamente un cambio feo pero como lo cambiamos una vez ahí, el cambio se propaga a cualquier otro componente que esté basado en el cual esté más cerca de cómo funcionan las cosas cuando estamos escribiendo código. Cambias las cosas una vez y se repite en todas partes. Otro ejemplo. Digamos que el cliente dice que solo necesito que todas estas imágenes sean redondas. Normalmente, en Photoshop tendrías que salir, vale, tengo que cambiar todas estas individualmente y se tarda para siempre, y luego si el cliente quiere que vuelva a cambiar, entonces hay que cambiarlas todas de nuevo. Lleva un tiempo. Pero aquí solo cambias a cualquiera de ellos porque todos están relacionados, porque todos están basados el uno del otro, todos cambian al mismo tiempo, lo que te facilita mucho las cosas. Otra cosa interesante que XD hace por nosotros es, digamos que el cliente sí decidió que querían móvil. Normalmente en Photoshop tendrías que entrar y simplemente posicionar manualmente todas estas cosas como tendrías que averiguar que este pájaro va aquí abajo y entonces ¿en qué orden se rompen estas cosas? Porque se van a mover en un orden específico en la web. Tienes que descifrar todo eso en tu expediente y hacerlo uno por uno, pero XD nos permite, si agarras ese mango, sabe que ahí son elementos individuales, y puedes ver que los descompone en su columnas propias. Entonces tenemos una versión móvil de este módulo que requiere muy poco trabajo extra de nuestra parte. Podrás recordar cuando miraba el PSD que tuve que sacar la pequeña herramienta de medición, yo por costumbre usé la herramienta de captura de pantalla en el Mac, y eso uso para medir píxeles entre elementos. Pero en XD y otras herramientas como Sketch y otra llamada Figma, puedes presionar la tecla Alt y te mostrará la distancia al borde del tablero de arte de lo que sea que acabe tu ratón. Si mantienes presionada la tecla Alt, si tienes un elemento seleccionado entonces mantienes la tecla Alt y mueves el ratón sobre lo que sea el siguiente elemento desde el que estás midiendo la distancia, puedes ver que me dice exactamente la distancia de píxel del siguiente elemento más. Se trata de 32 píxeles. Esta columna tiene 32 píxeles de ancho, y esta canaleta de aquí tiene 34 píxeles de ancho, lo cual es realmente conveniente para mí. Cuando estoy trabajando, no tengo que volver y preguntar una y otra vez. No tengo que abrir mi herramienta de medición una y otra vez. Simplemente presiono Alt y puedo ver ahí mismo cuál es la distancia exacta. Entraré brevemente a las capacidades de prototipado de XD, y hay otras herramientas por ahí que hacen esto. Pero si presiono aquí el botón de reproducción, obtengo una vista previa de la aplicación. En realidad puedes vincular los tableros de arte de tal manera que cuando golpeas el juego, obtienes un prototipo del sitio y en realidad es interactable. Puedes usar esto para crear marcas bastante detalladas que incluyen animaciones y cosas por el estilo. Entonces es desplazable. Puedo interactuar con él de una manera que pudiera interactuar con un sitio web real. Ver qué pasa cuando hago clic aquí. Sí, me lleva a la siguiente página en ese flujo. Entonces puedes hacer esto yendo a la pestaña de prototipos, y en realidad puedes crear enlaces entre tableros de arte y también entre elementos de tableros de arte, componentes individuales en los tableros de arte para que cuando pulsas el botón de reproducción, puedes hacer click en esa cosa y te lleva a la siguiente pantalla, entonces podemos enlazar. Si quisiéramos ir por uno más completo, podemos vincular eso a ahí y vamos a ver qué pasa cuando golpeo play y haga clic en eso y me lleva a la siguiente pantalla. Entonces te haces una idea aquí de que esto es realmente más propósito construido para la web y para las interfaces de una manera que Photoshop simplemente no puede seguir el ritmo. Simplemente no hace la mayoría de las cosas. Eso hace que tu trabajo sea más fácil como diseñador, pero también como desarrollador, hace que mi trabajo sea mucho más fácil. Hay tanto menos excavación y tanta menos frustración con el uso de estos programas en comparación con algo como Photoshop. Para su proyecto de clase, me gustaría que diseñara un sistema. Así que toma un viejo diseño tuyo o empieza de nuevo y desvíalo en componentes. Su sistema de diseño debe incluir una guía de estilo para la tipografía. Por lo que los encabezamientos niveles uno a tres, estilos de párrafo, estilos de lista, ambos están ordenados y desordenados. Elementos de forma como botones e entradas de texto, y enlaces. Incluir estados también como Hover y onclick en los estados para los botones y enlaces. Incluye algunas muestras de color, algunas guías de color para que el desarrollador sepa qué usar. Incluir al menos tres ejemplos de componentes distintos. Eso puede parecer mucho, pero tenemos una lista de chequeo para ti en los recursos de la clase, así que no estás volando a ciegas. Cuando hayas terminado, por favor compártelo. Me encantaría ver lo que se te ocurre y si tienes alguna pregunta, no dudes en preguntar. Estoy seguro de que o yo u otros en la comunidad de habilidades comparten pueden ayudarte. 10. Consejos de sistemas de diseño: Estos son algunos consejos para crear tus primeros sistemas de diseño. Una de las primeras cosas que puedes hacer es evitar hacer uno arbitrario fuera de los cambios. Entonces, por ejemplo, si ves ese titular y realmente deseas que fuera gorras pequeñas, se vería mucho mejor. Es importante preguntarte, ¿este estilo es reutilizable? Si cambio esto, ¿deberían cambiar todos los demás titulares? También, ¿cómo afecta a los elementos que lo rodean? Tendrán que cambiar porque si éste cambia de diseño? No digo que no hagas la cosa gorras pequeñas, solo considera todo el sistema antes de hacerlo. Otra cosa que puedes hacer que le facilitará la vida a tu desarrollador es ser lo más detallada posible. Incluye cosas como valores de color hexadecimal para tu esquema de color, distancias de píxeles entre elementos, cosas así. A modo de ejemplo, aquí hay una captura de pantalla de Polaris. Es el sistema de diseño de Shopify. Se puede ver no sólo incluyen los colores principales de la marca, también incluyen varios tonos de los colores también, todo en hex. Incluyen alguna información detallada de espaciado, pero no sólo el espacio en sí, cómo elegir espaciado, enseña su guía de estilo. Si no has pensado en detalles como estos, tu desarrollador va a tener un montón de preguntas. Te hará las cosas un poco molestas, o peor que eso, empezarán a diseñarse ellos mismos y todos sabemos cómo eso puede terminar. También podrían adivinar mal y dar la impresión de que no les importa tu diseño y no les importa si se ve mal. Así que se detallen. Si no sabes lo que necesitan, entonces pregunta. Otra cosa que puedes hacer es solo explorar más allá de photoshop. Photoshop es una herramienta antigua y hace mucho de esto de lo que estamos hablando, muy difícil y lento. Realmente no se construyó para diseñar interfaces, pero hay herramientas construidas con propósito que fueron, por ejemplo, una de las más populares se llama sketch. Se usa en todas partes de esta industria, pero Adobe tiene una herramienta que es gratuita llamada XD. Va característica para característica con boceto realmente bueno. figma es otro que es excelente. la pena probar todas las tres herramientas, vale la pena dar tu tiempo si lo tienes. Aquí te damos un ejemplo de lo que podría parecer un XD. Esto es de nuevo diseño de pescadores de Meghan. Aquí puedes ver lo que incluye en su expediente XD. Las herramientas de entrega también son súper útiles. Hay otra herramienta diseñada a propósito que solo están ahí para el traspaso del desarrollador del diseñador. XD tiene esta característica incorporada, puedes hacer clic en compartir y puedes compartir tu diseño con tu desarrollador, pero también hay un par de otras herramientas que están construidas a propósito para esto. El más popular se llama Zeplin. Es impresionante. Si subes archivo de diseño muy bien estructurado, en realidad puede escribir código para tu desarrollador y sacar algunas de las molestas tareas de trabajo ocupadas fuera del camino para ellos, lo cual es impresionante. Avocode es otro que hace algo parecido. En última instancia, estas herramientas de diseño hacen que la colaboración sea mejor. Hacen que sea más fácil de diseñar, nos hacen más fácil construir. Las herramientas de entrega te harán la vida y la vida de tu desarrollador más fáciles. Nuevamente, sólo conduce a relaciones más colaborativas, menos adversarias, lo cual es genial. Entonces, por favor, dale una oportunidad a las nuevas herramientas, y si aún no lo has hecho, estoy seguro de que tu desarrollador te lo agradecerá. 11. Construir confianza con tus Devs: El último y probablemente el mayor problema que tuvo ese proceso de diseño imaginario fue la relación adversarial entre el diseñador y el desarrollador. Tal vez recuerden que el diseñador era como, ¿Por qué no pueden simplemente hacer esto bien? Este es un problema difícil de resolver, pero también es bastante importante. ¿Cómo empezamos? Una de las primeras cosas que podemos hacer los diseñadores es asumir una intención positiva. Sé lo frustrante que puede ser trabajar tan duro en un diseño, enviarlo al desarrollador, y vuelve y todo es adicto y mal. Gran parte de eso puede ser ayudado por las cosas de las que hablamos antes, los ejercicios colaborativos y el diseño y el sistema. Pero aún invariablemente, habrá inconsistencias, habrá bichos, simplemente no hay forma de evitarlo. Mantén la cabeza fría, evita culpar. Hay algo que pudiera haber causado que el diseño volviera de una manera inesperada. No menos importante de los cuales a veces es como desarrollador, es todo lo que puedo hacer para que la cosa funcione. Por supuesto, parte del diseño va a estropear. Por supuesto que las cosas se van a resbalar por las grietas. El punto es que nadie quiere hacer cosas feas. Es un trabajo duro y a menudo estresante. Asumir intención positiva y ser paciente. Si el desarrollador tiene preguntas, conteste con facilidad y si tiene preguntas, pregunte por favor. Otra cosa que puedes hacer es renunciar al control. Tengo un secreto para ti. Es algo que no todos los diseñadores quieren escuchar, pero tu diseño está terminado en el navegador. No está terminado en Photoshop, no está terminado en boceto. Nosotros los desarrolladores estamos tomando decisiones de diseño todo el tiempo. No se puede evitar. Simplemente siempre hay algo que el diseño no da cuenta y tenemos que tomar una decisión. Se puede pensar en ello de esta manera. Si fueras a contratar a un arquitecto y un constructor para construir tu casa, detallado que fuera ese arquitecto en sus diseños, los constructores van a tener que cambiar el diseño aunque sea solo un poquito, lo hacen para dar cuenta ya sea terreno inesperado o lo que sea, simplemente es imposible que el arquitecto dé cuenta de todo, y eso está bien. Otra cosa a tener en cuenta es que los dispositivos tienen limitaciones. Ahora puedes mirar sitios web en relojes y refrigeradores, pantallas estrechas, pantalla ancha, computadoras lentas, rápidas y lentas, conexiones rápidas. Hay un sinfín de variables que pueden afectar el producto final, y el desarrollador a menudo tiene tomar decisiones de diseño para acomodar esas y eso es realmente algo bueno, porque esas son decisiones de diseño que no tienes que hacer. Si toman la decisión equivocada, está bien. Es sólo el momento de iterar en él. Hazlo mejor. Hacer un montón de preguntas. Si ves algo que es raro o si no estás seguro de dónde se va a usar la cosa. Si no estás seguro de si algo que estás diseñando lo más posible, haz preguntas antes. Pero al trabajar de manera colaborativa e iterativa así, podemos hacer cosas que funcionen para la mayoría de las personas la mayor parte del tiempo. Perdón por decirlo. Pero no se va a quedar genial para el 100 por ciento de la gente, el cien por ciento del tiempo, así que hay que renunciar un poco de ese control. El tercero que puedes hacer es aprender un poco sobre lo que hacemos los desarrolladores. No te voy a decir que aprendas a codificar, es tu vida. Haces lo que quieras. Pero voy a decir, es bastante útil. Puede hacer las cosas más fáciles. Te ayudará a tomar decisiones de diseño más informadas. Por ejemplo, y ya no te sentirás como si tú y tu desarrollador hablaran dos idiomas diferentes. No estoy diciendo que tendrías que ser un desarrollador pro. Simplemente podría ser útil empezar con como algunos HTML y CSS como algunos conceptos básicos. Skillshare es un gran recurso para eso. Piensa en el código es solo otra herramienta de diseño y tu cinturón de utilidades. Esas son algunas buenas maneras en las que puedes empezar a confiar un poco más en tu desarrollador. 12. Reunirlo todo: Muy bien, echemos otro vistazo a ese proceso de diseño que pasamos antes, ese proyecto realmente malo. ¿ Cómo podría verse eso con estas nuevas técnicas e ideas en su lugar? Bueno, de nuevo, eres un diseñador freelance, acabas de aterrizar un nuevo cliente. Estás teniendo tu reunión de inicio pero debido a que los desarrolladores en la sala, como estás hablando a través de ella, se dan cuenta de que han trabajado en un proyecto muy similar en el pasado, y ofrecen una sugerencia sobre cómo podría funcionar esta cosa. Al cliente le encanta así que ahí es donde empiezas. Ambos empiezan a crear prototipos de ideas y eventualmente después de crear prototipos y tirar ideas y mantener las buenas, aterrizas en una dirección realmente sólida y comienzas a diseñar. Por fin es hora de las comps de alta fidelidad. Hablas con los desarrolladores sobre lo que podrían necesitar, ¿para qué estás diseñando? Cuáles dispositivos son tus dispositivos de destino, y lo trabajaste juntos una vez que se hayan hecho las comps para descomponerlos en más componentes. Al tener los componentes y las guías de estilo, su desarrollador puede desarrollarse más rápidamente de lo que podrían haber tenido de otra manera. El cliente puede de repente tener una página súper importante una vez más pero el desarrollador puede simplemente construirla, porque tienen esta caja de piezas de Lego de donde sacar. Ni siquiera tienes que abrir tu herramienta de diseño. Nadie tuvo que quedarse despierto hasta tarde antes de que el lanzamiento y el lanzamiento ocurra a tiempo. A lo mejor ves algunos errores, pero está bien porque tu proceso es iterativo y puedes sacarlos rápidamente del camino. Se puede incluso después del lanzamiento, seguir agregando y mejorando en el sitio. A lo mejor el cliente tiene otra solicitud de una característica. Puedes agregarlo con bastante facilidad porque solo estás agregando un componente, no estás diseñando un diseño completo. Obviamente, se trata de un proceso idealizado, al igual que el ejemplo anterior se idealizó en la dirección opuesta. Siempre va a haber baches en la carretera, pero con la comunicación y algunas buenas herramientas, lanzarás mejores proyectos. Ahora que ya sabes cómo puede funcionar esto, tu proceso mejorará. 13. Conclusión: Esto realmente está destinado a ser solo una imprimación, solo para que empieces a pensar en estas cosas. De verdad, es una práctica de larga trayectoria trabajar en tus relaciones con tus colaboradores, y mejorar tu proceso. Lo mejor que puedes hacer, es seguir leyendo y probar cosas nuevas. Pero en resumen, hablamos de tres cosas que realmente pueden mejorar, mejorar dramáticamente tu relación con tus desarrolladores. Lo primero: involucrarlos temprano, luego mantenerlos involucrados durante todo el proceso. Eso significa que no más diseñar en un vacío. Haz muchas preguntas sobre lo que necesitan de ti para ejecutar correctamente el diseño. No más diseño grande revela, porque a veces pueden descarrilar un proyecto. Sistemas de diseño, no páginas. Descomponer las cosas. Incluir reglas de topografía y colores y cosas así, pero también desglosar las cosas en componentes. Piénsalo como piezas de Lego que se juntan. Estos son más rápidos y fáciles de construir, que realmente imitan cómo construimos en la web de todos modos. El tercero de lo que hablamos es confiar en tu desarrollador. No puedes controlar el 100 por ciento el resultado de tu diseño en este medio. Simplemente hay demasiadas variables. Una vez que sale de Sketch o Photoshop, está fuera de tus manos. Además, los desarrolladores tienden a tomar decisiones de diseño, por lo que van a cometer errores. El clave es ser pacientes y ayudarlos. Ahora bien, este proceso no funciona para todos. Probablemente tendrás que adaptarlo a tu propio proceso, en tu propio equipo, a tu propia forma de trabajar. Pero de nuevo, esto es solo para que empieces a pensar en estos conceptos y mejorarlo, mejorar tu proceso con el tiempo. El resultado son mejores, más relaciones de colaboración con tus desarrolladores, y en última instancia mejores proyectos y cliente más feliz. Espero que esto te ayude. Salir y construir algo impresionante.