Cómo crear una GUI en Visio

...

Microsoft Visio se puede utilizar para crear muchos tipos de diseños de GUI.

Microsoft Visio 2010 es una herramienta de diseño gráfico que se puede utilizar para crear diagramas, elementos de interfaz, menús de navegación y otros objetos visuales. Ofrece una amplia gama de herramientas para crear el diseño de una interfaz gráfica de usuario (GUI). El diagrama mostrará cómo aparecerá la aplicación o la interfaz web en su forma final. Desarrollar una GUI en Visio no es demasiado difícil y los diseños se pueden exportar como archivos PDF. Siga algunas pautas para aprender a construir una maqueta de estructura de alambre de GUI básica para un sitio web.

Paso 1

Abra Microsoft Visio. Cree un nuevo dibujo haciendo clic en el icono de dibujo en blanco. Haga clic en el botón "Crear".

Video del día

Paso 2

Haga clic en la ventana Formas en el lado izquierdo de la pantalla. Seleccione "Más formas". Seleccione "Unidades estadounidenses de formas básicas". Haga clic en "Formas rápidas".

Paso 3

Cree un cuadro de encabezado haciendo clic con el botón derecho en la forma del cuadro rectangular y arrastrando la forma al área de dibujo. Cambie el tamaño del cuadro para cubrir aproximadamente el 15 por ciento del área superior del dibujo.

Etapa 4

Cree un cuadro de menú de navegación haciendo clic con el botón derecho en la forma del cuadro rectangular y arrastrando la forma debajo del cuadro de encabezado. Cambie el tamaño del cuadro para que tenga una altura de aproximadamente media pulgada y el mismo ancho que el cuadro del encabezado.

Paso 5

Cree un cuadro de cuerpo principal grande haciendo clic con el botón derecho en la forma del cuadro de rectángulo y arrastrándolo debajo del cuadro del menú de navegación. Cambie el tamaño del cuadro para que tenga el mismo ancho que el encabezado y los cuadros del menú de navegación y para cubrir la parte inferior del área de dibujo.

Paso 6

Cree dos cuadros rectangulares haciendo clic con el botón derecho en la forma del cuadro rectángulo y arrastrando la forma al área de dibujo dos veces. Cambie el tamaño de cada caja para que quepa en la mitad de la caja del cuerpo principal. Mueva cada caja para que quepa adyacente entre sí dentro de la caja del cuerpo principal.

Paso 7

Cree campos de texto que representen enlaces de navegación haciendo clic en el botón "Un texto" en la parte superior de la barra de navegación. Seleccione un área dentro del cuadro de navegación para crear un pequeño campo de texto haciendo clic en el botón izquierdo del mouse. Mueva el mouse para cambiar el tamaño del campo a la longitud deseada. Escribe texto para decir "Inicio".

Paso 8

Cree cuatro campos de texto más con el botón izquierdo del mouse. Escriba "Elemento de menú" en cada cuadro. Cambie el tamaño de cada cuadro para que coincida con el tamaño del cuadro "Inicio".

Paso 9

Seleccione un área dentro del cuadro de encabezado principal y cree un campo de texto con la descripción "Encabezado principal".

Paso 10

Cree un cuadro de texto dentro de cada cuadro ubicado dentro del área del cuadro de contenido principal del dibujo. Asigne a cada cuadro de texto una descripción, como "Área de contenido". Cambie el tamaño de cada cuadro de texto para que tenga el mismo tamaño. Seleccione el botón "Puntero" en el menú de navegación superior.

Paso 11

Guarde el dibujo haciendo clic en "Archivo" en el menú de navegación superior y seleccionando "Guardar como".

Propina

Si bien Visio no viene con plantillas u objetos de prototipos de GUI, las empresas de terceros sí ofrecen este tipo de herramientas para su descarga. Si tiene la intención de utilizar Visio para crear un diseño colaborativo, tenga en cuenta que el formato de archivo de dibujo de Visio no es compatible con la mayoría de los paquetes de software de dibujo.

Advertencia

Los dibujos demasiado complejos pueden hacer que Visio ralentice la actualización de un dibujo después de realizar un cambio.