balsamiq M.
7
Balsamiq Mockups Balsamiq Mockups
-
Upload
marielas-cyber-cafe -
Category
Technology
-
view
268 -
download
5
description
Revista sobre como crear bocetos de paginas web
Transcript of balsamiq M.
Balsamiq Mockups
Balsamiq Mockups
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
Balsamiq Mockups – ÁLVARO RÍOS 3
INTRODUCCIÓN
Balsamiq Mockups es una
herramienta que nos permite
realizar Wireframes
para webs fácilmente.
Un Wireframe es una
representación tipo boceto
de la información que va a
estar
suministrada en
el diseño de la
página web.
Nos permite
acordar con el cliente
aspectos claves de la solución
a desarrollar, como la
distribución general de los
elementos, sus
jerarquías y la
navegación de los
mismos.
Balsamiq Mockups nos provee
de representaciones de todos
los elementos
utilizados para
la construcción
de una web,
como Pantallas
de navegadores, títulos,
menús, imágenes, videos, etc.
Balsamiq Mockups
Balsamiq Mockups
VENTAJAS DE USAR
WIREFRAMES
Permiten definir la
organización y estructura en
etapas previas al diseño, con
lo cual permite agilizar y
ahorrar tiempo,
porque si hay
que realizar
cambios, se
pueden hacer
rápidamente en
esta instancia.
Permiten detectar los
distintos contenidos,
bloques de información,
header, menúes, y
demás elementos
necesarios que habrá
que contemplar en el
diseño posterior del
sitio.
Se basan solamente en
la estructura del
contenido, y pueden
generar e incluir en una
etapa prematura
aspectos como el color,
tipografías,
etc.
Se
reducen los
tiempos de
trabajo y costo.
Se pueden identificar
problemas de
interacción, usabilidad y
accesibilidad que
podrían presentarse
más adelante.
Los contenidos deben ser
reales.
Balsamiq Mockups – ÁLVARO RÍOS 5
ALGUNOS CONSEJOS
En un wireframe todos
los elementos gráficos
están
represent
ados de
forma
esquemáti
ca.
La idea es no utilizar
colores. A lo sumo
escala de grises
Utiliza una sola
tipografía
Usa la mayor cantidad
d
e
c
ontenido real
Explica las distintas
áreas e interacciones
Simplifica lo más que
puedas
En cada
desarrollo de
sitio web
realizamos
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 a
nuestros clientes
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
PASOS:
Lo primordial es conocer
como esta organizada nuestra
herramienta
Luego escoger la dimensión
de que va a tener nuestra
página web
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
saber como va ir distribuido
los conceptos y toda la
información que tenemos
alojada en nuestra sitio
En nuestra paginas están
plasmadas nuestros botones
con los cuales nos permitirán
dirigirnos a las diferentes
páginas y enlaces
Balsamiq Mockups – ÁLVARO RÍOS 7
Como podemos observar en
las siguientes graficas
Y nuestro resultado final ser as:
