EXPLICACIÓN DEL SOFTWARE BALSAMIQ MOCKUPS 3 SIGUENOS EN :) : ➤ FACEBOOK : https://www.facebook.com/Dise%C3%B1o-... ➤ BLOGGER: http://dwujfsc2018.blogspot.com/2018/... ➤ YOUTUBE : https://www.youtube.com/watch?v=2awq_BT4Oko&feature=youtu.be

1. Diseño de páginas Web
SESIÓN 02
BALSAMIQ MOCKUPS 3

2. Contenido
 ¿Qué es Balsamiq Mockups 3 ?
 Extensión Balsamiq
 Interfaz de Usuario
 Barra de Herramientas
 Biblioteca
 Lienzo
 Panel de Navegación
 Panel de Propiedades
 Ejemplo

3. ¿Qué es Balsamiq M. 3 ?
 Es una herramienta de diseño de interfaz
de usuario para crear wireframes (también
llamados maquetas).
 Puede usarlo para generar bocetos
digitales de sus ideas de productos para
facilitar la discusión y comprensión antes
de escribir cualquier código.

4.  Cada archivo de maquetas
Balsamiq (con una extensión
de archivo .bmpr) representa
un proyecto y puede
contener muchas maquetas
e imágenes, que se
almacenan juntas en un solo
archivo .bmpr.que se
identifica
Extensión Balsamiq

5. Interfaz de Usuario
B A R R A D E H E R R A M I E N T A S
P
A
N
E
L
D
E
P
R
O
P
I
E
D
A
D
E
S
L I E N Z O
B
I
B
L
I
O
T
E
C
A
P A N E L D E N A V E G A C I Ó N

6.  La barra de herramientas contiene una serie
de iconos para realizar acciones en otras
áreas de la interfaz de usuario.
 El primer conjunto de iconos se describe a
continuación.
Barra de Herramientas
1.Navega entre maquetas
2.Mostrar / Ocultar el panel izquierdo
3.Vea sus maquetas como una
cuadrícula de miniatura
4.Crear una nueva maqueta
5.Acciones de maqueta
6.Ir a la maqueta siguiente o anterior

7.  El grupo de iconos en el centro de la barra
de herramientas es para funciones
de lienzo realizadas comúnmente . Estas
son acciones a las que probablemente esté
acostumbrado desde editores de texto u
otras herramientas de dibujo, como copiar,
pegar, agrupar , alinear y ampliar. El último
ícono es para alternar el marcado.
Barra de Herramientas

8.  La sección final de la barra de herramientas
en el extremo derecho contiene
la herramienta Agregar rápido , los iconos de
alternar para la Biblioteca de UI ,
el Inspector de propiedades y el Panel de
información del proyecto , y un ícono para
ingresar al Modo de presentación de
pantalla completa .
Barra de Herramientas

9.  Esla larga franja de controles de UI justo
debajo de la barra de herramientas. En él se
enumeran todos los tipos de control de
interfaz de usuario
Biblioteca de UI

10.  Esta es el área de trabajo principal de las
maquetas de Balsamiq, donde su maqueta
de interfaz de usuario cobra vida.
Lienzo

11.  El panel de navegación de la izquierda
muestra la lista de maquetas, activos o
símbolos en su proyecto.
Panel de Navegación

12.  El panel en el lado
derecho de la aplicación
(cuando se muestra)
muestra las
propiedades del control
u objeto seleccionado.
Panel de Propiedades

13. Ejemplo