Diseño de la página de inicio

Step 1- Abra Balsamiq Mockups instalados en su computadora. Desde la biblioteca de la interfaz de usuario, en el control de adición rápida, escriba -Browser.

Step 2 - Una vez que seleccionamos Browser, el control estará disponible en el área de estructura alámbrica. Haga clic en el botón de alternarInspector para ver los detalles de los controles de la IU en el panel derecho.

En la sección del inspector, ingrese 0 (cero) para ambos Position X y Ycajas de texto. Esto llevará el control del navegador a la esquina del espacio de estructura metálica para una mejor visibilidad.

En el Size cuadros de texto, ingrese 1024 como el width y 768 como el height.

La ventana del navegador abarcará todo el espacio de la estructura alámbrica utilizando la opción de zoom sobre la sección de la biblioteca de la interfaz de usuario, establezca el nivel de zoom en “Fit in Window”.

Una vez configurados todos los parámetros anteriores, podremos ver la siguiente pantalla.

Step 3 - En el espacio en blanco debajo de la barra de direcciones en el wireframe, creemos el encabezado para el sitio web.

Para empezar con el encabezado, creemos un logo. En los wireframes, a menudo es suficiente representar el posicionamiento del control de pantalla. Por ejemplo, usaremos el control Image y lo nombraremos como“Logo”. En el cuadro de adición rápida, escriba“Image”. Se resaltará el control de imagen. Selecciónelo para colocarlo en el área de estructura alámbrica.

En el cuadro de diálogo de propiedades a la derecha, ingrese el tamaño - width 139 y height como 93. Coloque la imagen en X-eje a las 16 y en adelante Y-eje en 94.

Una vez hecho esto, deberíamos poder ver el espacio de estructura alámbrica como se muestra a continuación.

Step 4 - Debajo de la imagen, para una mejor comprensión del espectador, inserte un Labelde la biblioteca de UI; asígnele el nombre "Logotipo de la empresa". Desde la pestaña de propiedades a la derecha, configure la etiquetasize tener 15 años.

Una vez hecho este paso, debería poder ver la imagen y el texto como se muestra a continuación.

Step 5- Insertemos ahora el título de la Compañía, en una fuente relativamente grande. En el cuadro Quick Add con biblioteca UI, escriba“Title”. El título con“A Big Title”El texto se mostrará en la pantalla. Haga doble clic en el texto para cambiarle el nombre. Introduzca el texto "Nombre de su empresa".

Para el propósito de este tutorial, la posición exacta en X y Y-Se proporciona un eje. Puede arrastrar el texto a la posición que desee.

En la sección de propiedades a la derecha, actualice el valor debajo de la posición para X como 626 y para Y como 107.

Veremos la forma del encabezado como se muestra en la siguiente pantalla.

Step 6 - Agregue un separador horizontal debajo del texto y el título del logotipo para separar el encabezado del contenido del cuerpo de la página.

En el cuadro Agregar rápido, escriba “rule”. Te mostraráH.Rule y V.Rule. Significa regla horizontal y vertical. SeleccioneH.Rulee inserte la regla debajo del título y el texto del logotipo arrastrando el mouse. Usando los identificadores de la regla, puede aumentar / disminuir el tamaño de la regla.

Amplíe un nivel para ver la regla horizontal insertada. Colóquelo como se muestra en la siguiente pantalla.

Step 7 - Del mismo modo, inserte la sección Productos y servicios, utilizando los controles de la interfaz de usuario - block of text y title. Utilice la regla horizontal para separar la sección. Debería poder ver el espacio de estructura alámbrica como se muestra a continuación.

Step 8 - En las mismas líneas, agregue la sección Visión de la empresa utilizando los mismos controles de IU que arriba.

Step 9 - Agregar Link Baren esta página para fines de navegación. Hoy en día, es una práctica común utilizar Link Bars para facilitar la navegación. Utilice el cuadro Agregar rápido para insertar una barra de vínculos. Los valores se actualizan haciendo doble clic en la barra de pestañas insertada en la página. Agregue valores separados por comas para diferentes enlaces de página. Coloque la barra de enlace como se muestra a continuación.

Con esto concluye el diseño de estructura metálica de la página de inicio. Hemos visto lo fácil y simple que es agregar controles de IU y comenzar con el diseño de IU de un sitio web.

Guarde el archivo del proyecto Balsamiq yendo a Project Menu → Save Project.