1
00:00:00,390 --> 00:00:05,670
En el video anterior vimos lo que era el diseño de la interfaz del usuario hay técnicas que nos permiten

2
00:00:06,000 --> 00:00:08,000
realizar esta parte.

3
00:00:08,070 --> 00:00:12,370
Por ejemplo vamos a empezar con el Weyl framing que es el Guaire framing.

4
00:00:12,540 --> 00:00:18,150
Bueno es una forma de diseñar un producto ya sea una app una web app es una aplicación web una tienda

5
00:00:18,150 --> 00:00:24,420
virtual etc. o un sitio web en su forma estructural y del lado derecho.

6
00:00:24,420 --> 00:00:28,300
Tengo el ejemplo de un Warframe que acabo de realizar para un cliente.

7
00:00:28,300 --> 00:00:34,590
Un ejemplo muy sencillo puedes ver que no nos preocupamos por colores no nos preocupamos por tipos de

8
00:00:34,590 --> 00:00:35,750
fuentes.

9
00:00:35,850 --> 00:00:41,850
En esta etapa lo único que nos preocupa es el acomodo de los elementos de una forma muy estructural

10
00:00:42,110 --> 00:00:49,230
muy muy sencilla los Guaire frames se utilizan en las primeras etapas del desarrollo para establecer

11
00:00:49,230 --> 00:00:51,570
y mostrar la estructura básica del proyecto.

12
00:00:52,020 --> 00:00:57,180
Este es un Warframe de un sitio web pero de nuevo puedes hacer uno para una aplicación móvil para una

13
00:00:57,180 --> 00:00:59,160
tableta para un videojuego.

14
00:00:59,160 --> 00:01:05,430
Para muchos otros de una tienda virtual de un salón de clases etcétera de un salón de clases virtual

15
00:01:07,310 --> 00:01:13,310
muestran la estructura básica del proyecto antes de agregar elementos visuales Natta como lo que son

16
00:01:13,310 --> 00:01:15,910
estos cuadros con una X a medias.

17
00:01:16,100 --> 00:01:19,170
Son imágenes pero no muestra imágenes ni nada.

18
00:01:19,370 --> 00:01:26,960
Muestro cosas muy sencillas aún no me meto en colores y muestran únicamente una parte estructural del

19
00:01:26,960 --> 00:01:34,900
proyecto cuáles son las ventajas de crear un Warframe bueno puedes utilizarlo para mostrárselo a tu

20
00:01:34,900 --> 00:01:38,800
cliente o a tu equipo de trabajo.

21
00:01:38,800 --> 00:01:44,440
La ventaja que tienen es que los puedes mostrar sin haber escrito una sola línea de código o tampoco

22
00:01:44,440 --> 00:01:47,000
sin gastar minutos en una herramienta de diseño.

23
00:01:47,000 --> 00:01:53,410
Un Warframe puede ser muy sencillo que usualmente por ejemplo en mi caso iniciamos siempre en una hoja

24
00:01:53,410 --> 00:01:59,590
de papel una vez que se aprueban se comienza a desarrollar el proyecto de forma más detallada con otro

25
00:01:59,590 --> 00:02:06,640
tipo de herramientas los tenemos viendo en el siguiente video y un warfarina debe proporcionar la funcionalidad

26
00:02:06,640 --> 00:02:13,780
actual y el posicionamiento de los elementos tales como menús títulos imágenes videos etc. Pero no nos

27
00:02:13,780 --> 00:02:20,940
metemos en detalles cuáles son las desventajas del Warframe bueno al ser un diseño muy sencillo algunas

28
00:02:20,940 --> 00:02:28,410
veces en papel algunas veces con aplicaciones muy rudimentarias el cliente o el grupo de trabajo puede

29
00:02:28,410 --> 00:02:34,050
ser que no entienda bien la idea e incluso te digan en serio esto es lo que me vas a hacer tú puedes

30
00:02:34,050 --> 00:02:38,840
decir bueno no esto es un prototipo es un Warframe aún no está finalizado.

31
00:02:38,940 --> 00:02:46,860
Puede prestarse se va a necesitar la presencia del diseñador para explicar el diseño al cliente y algunas

32
00:02:46,860 --> 00:02:53,970
veces el Warframe tiene mucho o poco espacio que una vez que el cliente nos facilita el contenido resulta

33
00:02:54,630 --> 00:03:00,990
que el espacio que le hemos destinado resulta ser poco resulta ser mucho por lo tanto hay que realizar

34
00:03:00,990 --> 00:03:07,470
ajustes como se utilizan en las primeras etapas del desarrollo suele ser muy común que el cliente una

35
00:03:07,470 --> 00:03:15,660
vez que facilita el contenido el Warframe el espacio destinado simplemente no da la cantidad de contenido

36
00:03:17,480 --> 00:03:25,230
finalmente vamos a ver algunas herramientas de Warframe va a ser encontrar herramientas como Azure balsámica

37
00:03:25,280 --> 00:03:32,340
mock ups que para mí este es el mejor imagen proto punto aulló o Bespin.

38
00:03:32,540 --> 00:03:37,340
Si tienes experiencia con programas como Photoshop o como ilustrador también puedes hacer el Warframe

39
00:03:37,430 --> 00:03:41,800
con esas herramientas sin embargo suelen ser un poco más tardabas.

40
00:03:41,800 --> 00:03:48,260
Estas herramientas que muestro aquí son de pago en algunos casos por además yo recomiendo hacer el Warframe

41
00:03:49,010 --> 00:03:56,240
en papel y ese va a ser gratis te permite borrar y reescribir los diseños.

42
00:03:56,240 --> 00:04:02,300
Este es el Warframe que se utiliza únicamente al inicio en el desarrollo del proyecto en el siguiente

43
00:04:02,300 --> 00:04:06,570
video vamos a ver lo que es el prototipo que es la siguiente etapa y después de esta.