Cómo crear una GUI en Visio

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 crear una maqueta básica de estructura de alambre de GUI 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".

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". Haz 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 alrededor del 15 por ciento del área superior del dibujo.

Paso 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 de encabezado.

Paso 5

Cree un cuadro de cuerpo principal grande haciendo clic con el botón derecho en la forma del cuadro rectangular y arrastrándolo debajo del cuadro del menú de navegación. Cambie el tamaño del cuadro para que tenga el mismo ancho que los cuadros del encabezado y 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 rectangular y arrastrando la forma sobre el área de dibujo dos veces. Cambie el tamaño de cada caja para que se ajuste a la mitad de la caja del cuerpo principal. Mueva cada caja para que quepa una al lado de la otra 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 "A 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 usando 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 del 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. Dé 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

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

Consejo

Si bien Visio no viene con plantillas u objetos de prototipos de GUI, las empresas de terceros ofrecen tales herramientas para descargar. Si pretende 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 se ralentice al actualizar un dibujo después de realizar un cambio.