1 00:00:13,740 --> 00:00:18,839 y vamos a ver en este vídeo la importancia del prototipado como éste 2 00:00:18,839 --> 00:00:23,879 pues bueno nos ayuda a hacer mejores trabajos trabajos mucho más coherentes y 3 00:00:23,879 --> 00:00:29,679 a la vez bueno pues nos ayuda a ahorrar tiempo y por lo tanto dinero 4 00:00:29,679 --> 00:00:34,159 en este caso vamos a utilizar la herramienta xd y vamos a hacer una 5 00:00:34,159 --> 00:00:40,240 aplicación bueno para una para una tienda que vende huevos en este caso 6 00:00:40,240 --> 00:00:46,380 una serie de tipos de huevos. Eso nos interesa mucho porque lo que nos interesa en realidad 7 00:00:46,380 --> 00:00:54,700 es cómo esta herramienta nos puede llegar a facilitar nuestra comunicación con el cliente 8 00:00:54,700 --> 00:00:57,740 y tomar decisiones mucho más consistentes. 9 00:00:58,960 --> 00:01:04,599 Lo primero que tenemos que hacer es, como vemos aquí en la pantalla, una serie de wireframes. 10 00:01:04,599 --> 00:01:14,579 ¿Esto qué es? Bueno, pues esto son una serie de cuadros que lo que nos ayuda es, bueno, pues al final a determinar los diseños. 11 00:01:14,760 --> 00:01:28,819 En este caso, lo único que colocaríamos serían nuestros módulos, nuestras cajas de texto, nuestras cajas de imágenes y nuestros recursos para tener una visión previa de cómo sería el producto. 12 00:01:28,819 --> 00:01:37,000 Esto es imprescindible hacerlo porque es una referencia que vamos a tener durante todo el diseño del producto 13 00:01:37,000 --> 00:01:47,459 Además es un trabajo que luego podemos ir copiando poco a poco en el producto final, como veremos más adelante 14 00:01:47,459 --> 00:01:49,099 Bien, ¿y cómo se hace todo esto? 15 00:01:50,019 --> 00:01:55,719 Pues lo primero que tenemos que hacer es el formato en el cual vamos a empezar a diseñar 16 00:01:55,719 --> 00:02:16,919 En este caso yo he cogido el del iPhone 14, nos iríamos aquí a inicio y aquí nos da una serie de formatos para página web, para redes sociales y yo tengo seleccionado el iPhone 14. 17 00:02:16,919 --> 00:02:24,159 En este caso, empezaríamos aquí. 18 00:02:25,460 --> 00:02:33,259 Bien, aquí estaría nuestra primera mesa de trabajo. 19 00:02:43,770 --> 00:02:50,509 Tendríamos que poner en principio el nombre, en este caso sería nuestra página de inicio. 20 00:02:52,409 --> 00:02:59,810 La filosofía de trabajo de Adobe XD es muy parecida a Illustrator. 21 00:02:59,810 --> 00:03:05,110 bien, una vez que tenemos la mesa de trabajo creada 22 00:03:05,110 --> 00:03:08,849 pues vamos a empezar a hacer nuestro primer wireframe 23 00:03:08,849 --> 00:03:12,110 en este caso sería el de la pantalla de inicio 24 00:03:12,110 --> 00:03:16,550 que es muy simple, yo lo que sí que os recomendaría 25 00:03:16,550 --> 00:03:19,169 es que trabajaréis siempre con retícula 26 00:03:19,169 --> 00:03:22,490 en este caso seleccionaríamos la página 27 00:03:22,490 --> 00:03:25,610 la mesa de trabajo, clicamos aquí 28 00:03:25,610 --> 00:03:28,330 y bueno, en este caso yo tengo puesto por defecto 29 00:03:28,330 --> 00:03:34,189 estas seis columnas. ¿Por qué trabajar con retícula? Bueno, porque esto le va a dar 30 00:03:34,189 --> 00:03:39,129 una coherencia a todo, una coherencia desde el punto de vista estético a todo nuestro 31 00:03:39,129 --> 00:03:47,669 proyecto. Bien, en este caso empezaremos con la pantalla de inicio, nos iríamos aquí 32 00:03:47,669 --> 00:04:01,840 a la herramienta de rectángulo y simplemente marcaríamos aquí, hemos quedado que vamos 33 00:04:01,840 --> 00:04:07,300 se dice la entrada aquí tenemos las herramientas para asegurarnos de que está el elemento totalmente 34 00:04:07,300 --> 00:04:16,500 centrado vamos a meterle un relleno gris vamos a indicar que esto va a ser una fotografía vale 35 00:04:16,500 --> 00:04:29,480 entonces como se gris y ahora vamos a cruzarle unas líneas vamos a darle el blanco este caso 36 00:04:29,480 --> 00:04:56,459 sería éste podemos ajustarlos aquí y luego ya llegará el momento de ajustar 37 00:04:56,459 --> 00:05:06,079 todos los elementos en este caso digamos son una especie de bocetos para saber 38 00:05:06,079 --> 00:05:12,800 dónde van a ir colocados todos nuestros todos nuestros módulos y de qué manera 39 00:05:12,800 --> 00:05:23,060 que vamos a indicar que esto sería la foto que en este caso sería nuestro día 40 00:05:23,060 --> 00:05:28,160 nuestro logo ya tendríamos creado en nuestro primer 41 00:05:28,160 --> 00:05:32,220 web frente lo que vamos a hacer es agrupar esto estos elementos que son las 42 00:05:32,220 --> 00:05:36,600 líneas y el rectángulo para ellos seleccionamos todo 43 00:05:36,600 --> 00:05:43,920 botón derecho y decimos agrupar y vamos con el segundo web que sería tan fácil 44 00:05:43,920 --> 00:05:50,279 como colocarnos en esta mesa trabajo control c y control v en este caso 45 00:05:50,279 --> 00:05:56,879 igual sería un slide una página 46 00:05:56,879 --> 00:06:01,740 que llevaría nuestra luego en este caso lo llevaría aquí arriba 47 00:06:01,740 --> 00:06:08,160 ajustaríamos bien con si no hemos ajustado bien con las columnas 48 00:06:08,160 --> 00:06:20,509 lo ajustamos ahora y en este caso igual, ajustamos a las 49 00:06:20,509 --> 00:06:27,839 columnas y centramos 50 00:06:28,439 --> 00:06:33,120 esto para verlo mejor es simplemente vamos aquí y vamos viendo cómo va 51 00:06:33,120 --> 00:06:37,240 quedando para que no moleste la retícula 52 00:06:38,300 --> 00:06:42,560 bueno en este caso en nuestra página 2 que sería nuestra página de 53 00:06:42,560 --> 00:06:57,019 de ingreso o de registro iría una serie de datos, el nombre del usuario, el mail, la 54 00:06:57,019 --> 00:07:06,079 contraseña, la posibilidad de registrarse, para ello vamos a coger las líneas, esto 55 00:07:06,079 --> 00:07:28,939 lo vamos a hacer un poco rápido, bien y una vez que tenemos todos los elementos creados 56 00:07:28,939 --> 00:07:38,500 pues lo mejor que podemos hacer para moverlos es agruparlos todos, que es seleccionándolos, botón derecho y agrupar. 57 00:07:41,800 --> 00:07:49,680 Y entonces ya los podríamos mover y ajustar para que no se nos mueva nada. 58 00:07:51,459 --> 00:07:57,360 Iríamos creando todos los demás elementos que vayan en nuestra página de registro. 59 00:07:57,360 --> 00:08:01,420 y bueno, esto lo vamos a hacer de una manera rápida 60 00:08:01,420 --> 00:09:07,250 bueno, una vez que tenemos todos nuestros 61 00:09:07,250 --> 00:09:11,870 wireframes creados, todas nuestras páginas o sliders 62 00:09:11,870 --> 00:09:15,970 de lo que se trata ahora es de ir incluyendo cada uno 63 00:09:15,970 --> 00:09:19,830 de los elementos que hemos previamente 64 00:09:19,830 --> 00:09:23,330 hemos pensado que va a ir en cada una de las 65 00:09:23,330 --> 00:09:28,049 páginas, entonces bueno, se trata de que tengamos 66 00:09:28,049 --> 00:09:30,129 muy a mano el 67 00:09:30,129 --> 00:09:30,649 whiteframe 68 00:09:30,649 --> 00:09:34,230 para ir copiando 69 00:09:34,230 --> 00:09:36,330 incluyendo cada una 70 00:09:36,330 --> 00:09:38,470 de las imágenes 71 00:09:38,470 --> 00:09:40,309 vamos a ver como se hace 72 00:09:40,309 --> 00:09:41,769 un par de ellas o tres 73 00:09:41,769 --> 00:09:44,490 y continuamos con el vídeo 74 00:09:44,490 --> 00:10:03,769 bien, una vez que tenemos 75 00:10:03,769 --> 00:10:05,629 todas las páginas ya 76 00:10:05,629 --> 00:10:06,889 compuestas 77 00:10:06,889 --> 00:10:09,409 lo que tenemos que hacer ahora es 78 00:10:09,409 --> 00:10:10,690 vincular unas páginas 79 00:10:10,690 --> 00:10:17,850 con otras. Y para eso lo que tenemos que hacer es irnos a la página de prototipo y aquí 80 00:10:17,850 --> 00:10:22,450 lo que vamos a hacer es decirle dónde queremos que nos lleve esa página, dónde queremos 81 00:10:22,450 --> 00:10:29,929 que nos lleve ese recurso o ese botón que vamos a aplicar. Bien, en este caso la página 82 00:10:29,929 --> 00:10:36,470 de inicio lo que queremos es que nos lleve a la de registro. Para eso cogemos, la seleccionamos 83 00:10:36,470 --> 00:10:41,210 y vemos que nos sale aquí una flechita y es simplemente decirle a la flechita 84 00:10:41,210 --> 00:10:46,730 donde queremos que nos lleve, en este caso ahí, al entrar pues queremos que nos lleve 85 00:10:46,730 --> 00:10:53,409 a la siguiente página, en este caso el de registro, la letra de registro 86 00:10:53,409 --> 00:11:00,409 queremos que nos lleven a la página de registro, la página 1 87 00:11:00,409 --> 00:11:05,389 queremos que nos lleve a la página 2 88 00:11:05,389 --> 00:11:09,970 la página 2 queremos que nos lleve a la página 3 89 00:11:09,970 --> 00:11:19,240 y así sucesivamente. Para comprobar que 90 00:11:19,240 --> 00:11:23,580 el prototipo funciona, pues bueno, seleccionaríamos en este caso 91 00:11:23,580 --> 00:11:26,659 la página de inicio, nos iríamos al play 92 00:11:26,659 --> 00:11:31,740 y lo comprobaríamos clicando. Bien, en este caso 93 00:11:31,740 --> 00:11:35,519 vamos a ver si nos lleva a la de registro, nos lleva 94 00:11:35,519 --> 00:11:57,179 hacia atrás, la de entrar, bien, y bueno, aquí si hubiéramos desarrollado más prototipo, 95 00:11:57,279 --> 00:12:06,179 bueno, clicaríamos aquí y nos llevaría a una página nueva. Y bueno, este es el prototipado 96 00:12:06,179 --> 00:12:15,539 que en este caso podemos conseguir con Adobe XD, que bueno, creo que es bastante intuitivo 97 00:12:15,539 --> 00:12:22,059 y nos puede dar una idea muy aproximada de cómo será el producto.