Sie sind auf Seite 1von 9

Actividad de Proyecto 4

AP4-AA8-EV3 - Desarrollar el prototipo funcional

Ferney Cruz Cuellar

Marisol Pedraza Runza

Sergio Pineda Ortiz

Ronald Romero Bernal

Servicio Nacional De Aprendizaje Sena

Tecnología En Producción De Multimedia

Ficha: 1749954

Junio 2019.
INTRODUCCION

Cuando queremos crear un proyecto nuevo, es normal que hagamos


sketches, bocetos o dibujos rápidos para tener una imagen visual de cómo
será nuestra interfaz. Esto nos ayuda a más adelante poder crear el proyecto
lo más semejante posible a nuestro boceto en papel. Mientras lo realizamos a
lápiz, hacemos cambios, tachamos, tenemos mejor ideas y estos sketches se
convierten en el prototipo del proyecto final, en definitiva en Mockups. A este
proceso se le denomina Wireframing que es la creación de la estructura de
una interfaz.

Una de las mejores herramientas para crear prototipos, bocetos o wireframes


es Balsamiq Mockups. Este programa tiene varias ventajas:

Es un programa de escritorio, es decir, solo tienes que registrarte para poder


empezar a utilizarlo sin ningún tipo de descarga. Programado en Flex y
AIR por lo que crea muy rápido Wireframes. Interfaz fácil de usar Como se ha
creado con AIR es instalable tanto en Windows como Linux y Mac OS
X.Balsamiq te permite escoger entre un montón de objetos
prediseñados como: barras de estado, menús, barras de progreso, etc.

Además, te permite exportar el diseño que realices en PNG, PDF e incluso al


portapapeles. Permite incrustar tus diseños en tu página web o en informes
de errores. Puedes compartir tus diseños a través de un sistema muy
parecido a Dropbox. Balsamiq funciona como cualquier aplicación normal, te
permite arrastrar, soltar, guardar mockups en un archivo, copiar y pegar,
deshacer, etc.
Para comenzar a utilizar esta herramienta, lo primero que hay que hacer es
acceder a la página principal de Balsamiq. Una vez en ella, registrarse con un
email, contraseña y usuario. Cuando ya has realizado el paso anterior, te llegará
un email para confirmar la cuenta y una vez realizado esto, ya podrás empezar a
utilizar la herramienta. Ventajas de Balsamiq Mockups

Desde mi punto de vista, la principal ventaja es la productividad, o dicho de otra


manera, lo rápido que se puede hacer cualquier cosa. El hecho que cuente con
tantos componentes ahorra mucho tiempo “de pintar”, asemejándose más a
colocar piezas de un puzzle.

Hay algunos componentes que están muy bien resueltos, y una vez que te metes
a editarlos te dan un buen número de opciones.

Como manejo general, permite algunas opciones sobre los controles como
agruparlos, bloquearlos o posicionarlos en función de otros componentes.

También se agradecen “detallitos” de la aplicación como su sistema de tabs para


los archivos, hacer/deshacer ilimitado o búsqueda rápida de componentes.

Desventajas de Balsamiq Mockups

Curiosamente, muchos de sus puntos fuertes se pueden ver también como


débiles.

Por ejemplo, la librería de componentes: el número, a pesar de ser amplio, es


limitado, y no tiene porqué ceñirse a lo que buscamos. Un caso claro lo
encontramos en el componente cowerflow (el famoso pase de imagenes que
utiliza iTunes). Está añadido porque está de moda, pero seguramente hace un
año no lo hubiera incluido. Lo mismo puede pasar con cualquier otro caso
específico de nuestro proyecto. Seguramente esto se hubiera paliado con una
herramienta de dibujo, pero no existe ninguna, y esto limita muchísimo.

Algunos componentes se quedan cortos en opciones.


Aunque el ajuste automático se agradece al principio, cuando trabajas con
muchos controles se echa en falta un sistema más preciso de ajuste (entrar
coordenadas, reglas, etc).

El canvas es dinámico, en función de lo que vas añadiendo utiliza scroll


horizontal y vertical, pero no puedes fijar de entrada el tamaño del documento.

El look and feel es cachondo y cumple con el cometido de evitar que nos
centremos en el diseño, pero para algunos clientes puede resultar demasiado
infantil o poco profesional, y no hay (por ahora) más alternativas.

Por el mismo camino, sólo se puede elegir entre una fuente de sistema.

Es imposible hacer una navegación mínima ya que no permite ningún tipo de


interactividad.

Una cuestión de enfoque

Balsamiq Mockup es un muy buen programa, pero en función de tú nivel de


exigencia a la hora de hacer wireframes puede quedarse corto.

Si se enfoca únicamente (que ademas ya lo indica el nombre) para hacer


bocetos estáticos, para una gran mayoría de interfaces, de forma rápida y ágil, y
estás contento con la estética que te proporciona, no te lo pienses dos veces.

Por contra, si hay uno o más puntos de las desventajas comentadas que
consideras vitales, seguramente hay otras opciones mejores (yo estoy bastante
enamorado de Fireworks)

Para acabar

Personalmente voy a utilizar Mockups. Para la gran mayoría de arquitecturas


creo que me funcionará. Lo único que realmente echo en falta, y aún sabiendo
que no es el enfoque de la aplicación, es que no funcione para hacer prototypes.
Esperemos que Peldi siga adelante con el programa y le vaya añadiendo nuevas
opciones, componentes, estilos, etc.
DESARROLLO

En nuestro proyecto de Blasamiq nos basamos en el boceto que teníamos


inicialmente, para la aprobación del cliente.

El programa nos facilita el uso de las diferentes herramientas, que nos ayudan a
tener más opciones y más claridad a la hora de llegarle a los consumidores.

Usamos opciones como:

Texto y los diferentes comandos de búsqueda, subtitulo, bloque de textos.

Comandos de inicio, barra de botones, cover flow entre otras, acontinuacion esta
el boceto inical.

Boceto Inicial
Proyecto Balsamiq Mockups

Vista completa
Para revisar el proyecto ingresen a https://balsamiq.cloud/st7p8jb/puc76ft/r2278
CONCLUSION

Cuando queremos crear un proyecto nuevo, es normal que hagamos sketchs,


bocetos o dibujos rápidos para tener una imagen visual de cómo será nuestra
interfaz. Esto nos ayuda a más adelante poder crear el proyecto lo más
semajante posible a nuesto boceto en papel. Mientras lo realizamos a lapiz,
hacemos cambios, tachamos, tenemos mejor ideas y estos sketchs se convierten
en el prototipo del proyecto final, en definitiva en Mockups. A este proceso se le
denomina Wireframing que es la creación de la estructura de una interfaz.
BIBLIOGRAFIA

https://balsamiq.cloud/st7p8jb/puc76ft/r2278

https://www.isdi.education/es/isdigital-now/herramienta-te-permite-realizar-
prototipos-de-tus-proyectos-balsamiq