Este documento describe la herramienta Balsamiq Mockups, la cual permite crear wireframes o bocetos para sitios web de forma sencilla. Explica que un wireframe es una representación básica de la estructura y contenido de un sitio antes de su diseño, lo que agiliza el proceso. También brinda consejos para el desarrollo de wireframes como simplificarlos y usar una paleta de colores limitada. Finalmente, detalla los pasos para crear un boceto en Balsamiq Mockups como definir la distribución espacial y

1. Balsamiq Mockups
Balsamiq Mockups

2. Balsamiq Mockups – ÁLVARO RÍOS 2
Contenido
INTRODUCCIÓN .............................................................................................................................................. 3
VENTAJAS DE USAR WIREFRAMES ................................................................................................. 4
ALGUNOS CONSEJOS ................................................................................................................................. 5
DESARROLLO DE UN BOCETO EN BALSAMIQ MOCKUPS ................................................ 6

3. Balsamiq Mockups – ÁLVARO RÍOS 3
Balsamiq Mockups
INTRODUCCIÓN
Balsamiq
Mockups
es
una
herramienta que nos permite
realizar
a
desarrollar,
como
la
distribución general de los
Wireframes
elementos,
para webs fácilmente.
jerarquías
y
la
navegación
de
los
Un Wireframe es una
sus
mismos.
representación tipo boceto
Balsamiq Mockups nos provee
de la información que va a
de representaciones de todos
estar
los
suministrada en
utilizados
el diseño de la
la
página web.
de
Nos
como
acordar
permite
con
el
cliente
aspectos claves de la solución
de
elementos
para
construcción
una
navegadores,
web,
Pantallas
títulos,
menús, imágenes, videos, etc.

4. Balsamiq Mockups
diseño
VENTAJAS DE USAR

Se basan solamente en
la
definir
la
estructura
contenido,
organización y estructura en
etapa
lo cual permite agilizar y
que
prematura
tipografías,
hay
realizar
cambios,
pueden
etc.
se
reducen

Permiten detectar los
contenidos,
necesarios
menúes,
accesibilidad
y
habrá
que contemplar en el
de
interacción, usabilidad y
podrían
elementos
que
Se pueden identificar
problemas
bloques de información,
demás
de
trabajo y costo.
esta instancia.
header,
los
tiempos
hacer
distintos
Se

rápidamente en

pueden
aspectos como el color,
ahorrar tiempo,
si
y
del
generar e incluir en una
etapas previas al diseño, con
porque
del
sitio.
WIREFRAMES
Permiten
posterior
que
presentarse
más adelante.
Los
contenidos
reales.
deben
ser

5. Balsamiq Mockups – ÁLVARO RÍOS 5
ontenido real
ALGUNOS CONSEJOS


En un wireframe todos
Explica

están
Simplifica lo más que
puedas
represent
En
de
sitio
esquemáti
La idea es no utilizar
A
lo
sumo
escala de grises

Utiliza
una
sola
tipografía

Usa la mayor cantidad
d
e
c
de
web
realizamos
ca.
colores.
cada
desarrollo
forma

distintas
áreas e interacciones
los elementos gráficos
ados
las
siempre el diseño
de los wireframes. Es un
excelente método que nos
permite agilizar los tiempos
de cada proyecto y entregar
un
mejor
resultado
nuestros clientes
a

6. Balsamiq Mockups – ÁLVARO RÍOS 6
DESARROLLO DE UN BOCETO EN BALSAMIQ MOCKUPS
Para empezar a desarrollar un
boceto lo primordial es tener
una idea clave de cómo va a
estar estructurada nuestra
página web
En la página principal
podemos observar las
herramientas para poder
empezar a desarrollar
nuestro boceto
Los siguientes pasos depende
de cómo vayamos a
establecer el uso de espacio
en cada página web, para lo
cual el primer paso sería
PASOS:
saber como va ir distribuido
los conceptos y toda la
Lo primordial es conocer
información que tenemos
como esta organizada nuestra
alojada en nuestra sitio
herramienta
En nuestra paginas están
plasmadas nuestros botones
con los cuales nos permitirán
dirigirnos a las diferentes
páginas y enlaces
Luego escoger la dimensión
de que va a tener nuestra
página web

7. Balsamiq Mockups – ÁLVARO RÍOS 7
Como podemos observar en
las siguientes graficas
Y nuestro resultado final ser as: