Prototipado | Mediateca de EducaMadrid

y vamos a ver en este vídeo la importancia del prototipado como éste 00:00:13

pues bueno nos ayuda a hacer mejores trabajos trabajos mucho más coherentes y 00:00:18

a la vez bueno pues nos ayuda a ahorrar tiempo y por lo tanto dinero 00:00:23

en este caso vamos a utilizar la herramienta xd y vamos a hacer una 00:00:29

aplicación bueno para una para una tienda que vende huevos en este caso 00:00:34

una serie de tipos de huevos. Eso nos interesa mucho porque lo que nos interesa en realidad 00:00:40

es cómo esta herramienta nos puede llegar a facilitar nuestra comunicación con el cliente 00:00:46

y tomar decisiones mucho más consistentes. 00:00:54

Lo primero que tenemos que hacer es, como vemos aquí en la pantalla, una serie de wireframes. 00:00:58

¿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. 00:01:04

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. 00:01:14

Esto es imprescindible hacerlo porque es una referencia que vamos a tener durante todo el diseño del producto 00:01:28

Además es un trabajo que luego podemos ir copiando poco a poco en el producto final, como veremos más adelante 00:01:37

Bien, ¿y cómo se hace todo esto? 00:01:47

Pues lo primero que tenemos que hacer es el formato en el cual vamos a empezar a diseñar 00:01:50

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. 00:01:55

En este caso, empezaríamos aquí. 00:02:16

Bien, aquí estaría nuestra primera mesa de trabajo. 00:02:25

Tendríamos que poner en principio el nombre, en este caso sería nuestra página de inicio. 00:02:43

La filosofía de trabajo de Adobe XD es muy parecida a Illustrator. 00:02:52

bien, una vez que tenemos la mesa de trabajo creada 00:02:59

pues vamos a empezar a hacer nuestro primer wireframe 00:03:05

en este caso sería el de la pantalla de inicio 00:03:08

que es muy simple, yo lo que sí que os recomendaría 00:03:12

es que trabajaréis siempre con retícula 00:03:16

en este caso seleccionaríamos la página 00:03:19

la mesa de trabajo, clicamos aquí 00:03:22

y bueno, en este caso yo tengo puesto por defecto 00:03:25

estas seis columnas. ¿Por qué trabajar con retícula? Bueno, porque esto le va a dar 00:03:28

una coherencia a todo, una coherencia desde el punto de vista estético a todo nuestro 00:03:34

proyecto. Bien, en este caso empezaremos con la pantalla de inicio, nos iríamos aquí 00:03:39

a la herramienta de rectángulo y simplemente marcaríamos aquí, hemos quedado que vamos 00:03:47

se dice la entrada aquí tenemos las herramientas para asegurarnos de que está el elemento totalmente 00:04:01

centrado vamos a meterle un relleno gris vamos a indicar que esto va a ser una fotografía vale 00:04:07

entonces como se gris y ahora vamos a cruzarle unas líneas vamos a darle el blanco este caso 00:04:16

sería éste podemos ajustarlos aquí y luego ya llegará el momento de ajustar 00:04:29

todos los elementos en este caso digamos son una especie de bocetos para saber 00:04:56

dónde van a ir colocados todos nuestros todos nuestros módulos y de qué manera 00:05:06

que vamos a indicar que esto sería la foto que en este caso sería nuestro día 00:05:12

nuestro logo ya tendríamos creado en nuestro primer 00:05:23

web frente lo que vamos a hacer es agrupar esto estos elementos que son las 00:05:28

líneas y el rectángulo para ellos seleccionamos todo 00:05:32

botón derecho y decimos agrupar y vamos con el segundo web que sería tan fácil 00:05:36

como colocarnos en esta mesa trabajo control c y control v en este caso 00:05:43

igual sería un slide una página 00:05:50

que llevaría nuestra luego en este caso lo llevaría aquí arriba 00:05:56

ajustaríamos bien con si no hemos ajustado bien con las columnas 00:06:01

lo ajustamos ahora y en este caso igual, ajustamos a las 00:06:08

columnas y centramos 00:06:20

esto para verlo mejor es simplemente vamos aquí y vamos viendo cómo va 00:06:28

quedando para que no moleste la retícula 00:06:33

bueno en este caso en nuestra página 2 que sería nuestra página de 00:06:38

de ingreso o de registro iría una serie de datos, el nombre del usuario, el mail, la 00:06:42

contraseña, la posibilidad de registrarse, para ello vamos a coger las líneas, esto 00:06:57

lo vamos a hacer un poco rápido, bien y una vez que tenemos todos los elementos creados 00:07:06

pues lo mejor que podemos hacer para moverlos es agruparlos todos, que es seleccionándolos, botón derecho y agrupar. 00:07:28

Y entonces ya los podríamos mover y ajustar para que no se nos mueva nada. 00:07:41

Iríamos creando todos los demás elementos que vayan en nuestra página de registro. 00:07:51

y bueno, esto lo vamos a hacer de una manera rápida 00:07:57

bueno, una vez que tenemos todos nuestros 00:08:01

wireframes creados, todas nuestras páginas o sliders 00:09:07

de lo que se trata ahora es de ir incluyendo cada uno 00:09:11

de los elementos que hemos previamente 00:09:15

hemos pensado que va a ir en cada una de las 00:09:19

páginas, entonces bueno, se trata de que tengamos 00:09:23

muy a mano el 00:09:28

whiteframe 00:09:30

para ir copiando 00:09:30

incluyendo cada una 00:09:34

de las imágenes 00:09:36

vamos a ver como se hace 00:09:38

un par de ellas o tres 00:09:40

y continuamos con el vídeo 00:09:41

bien, una vez que tenemos 00:09:44

todas las páginas ya 00:10:03

compuestas 00:10:05

lo que tenemos que hacer ahora es 00:10:06

vincular unas páginas 00:10:09

con otras. Y para eso lo que tenemos que hacer es irnos a la página de prototipo y aquí 00:10:10

lo que vamos a hacer es decirle dónde queremos que nos lleve esa página, dónde queremos 00:10:17

que nos lleve ese recurso o ese botón que vamos a aplicar. Bien, en este caso la página 00:10:22

de inicio lo que queremos es que nos lleve a la de registro. Para eso cogemos, la seleccionamos 00:10:29

y vemos que nos sale aquí una flechita y es simplemente decirle a la flechita 00:10:36

donde queremos que nos lleve, en este caso ahí, al entrar pues queremos que nos lleve 00:10:41

a la siguiente página, en este caso el de registro, la letra de registro 00:10:46

queremos que nos lleven a la página de registro, la página 1 00:10:53

queremos que nos lleve a la página 2 00:11:00

la página 2 queremos que nos lleve a la página 3 00:11:05

y así sucesivamente. Para comprobar que 00:11:09

el prototipo funciona, pues bueno, seleccionaríamos en este caso 00:11:19

la página de inicio, nos iríamos al play 00:11:23

y lo comprobaríamos clicando. Bien, en este caso 00:11:26

vamos a ver si nos lleva a la de registro, nos lleva 00:11:31

hacia atrás, la de entrar, bien, y bueno, aquí si hubiéramos desarrollado más prototipo, 00:11:35

bueno, clicaríamos aquí y nos llevaría a una página nueva. Y bueno, este es el prototipado 00:11:57

que en este caso podemos conseguir con Adobe XD, que bueno, creo que es bastante intuitivo 00:12:06

y nos puede dar una idea muy aproximada de cómo será el producto. 00:12:15

Prototipado - Contenido educativo

Del mismo autor…

Día internacional de la discapacidad 25

TV MESONERO 1ER T 25-26

Mi ciudad en Navidad 2025

Campaña de Solidaridad Navideña 2025 - IES SAN NICASIO

Advent Calendar 2025

Infantil,1º y 2º "Teatro Rey de Pikas"Pereda_Leganés

1ºy2º"Visita a Lego"Pereda_Leganés