SOFTWARE PARA LA REALIZACIÓN DE MAQUETAS

Transcripción

1 SEPTIEMBRE DE 2015 SOFTWARE PARA LA REALIZACIÓN DE MAQUETAS Control de proyectos CUCEI UNIVERSIDAD DE GUADALAJARA HEIDY TATIANA TOVAR PULIDO

2 SOFTWARE PARA REALIZAR MAQUETAS Actualmente evidenciamos que el uso de los computadores se ha vuelto imprescindible como instrumento que facilita la realización de nuestras actividades diarias, si bien existen aplicaciones innecesarias de igual forma encontramos muchas herramientas de asistencia para el ingeniero y/o el diseñador en el desarrollo de sus proyectos que pretenden mostrar el estado en que se encuentran. Si nos enfocamos en la actividad de los diseñadores o desarrolladores web, cuando se inicia un nuevo proyecto es de vital importancia lograr una buena comunicación con el cliente para detectar sus necesidades, sin embargo éste puede ser un proceso confuso si el cliente no sabe lo que necesita realmente o no puede explicarlo de manera adecuada. Para mostrarle una visualización del proyecto, surge la idea de los mockups, maquetas o wireframes. El cual debería ser la primera fase de cualquier proyecto web, en ésta etapa se define un boceto con los elementos esenciales de la página web convencional o esquemas de diseños para plataformas móviles, la navegación en el área de contenido y su posible interacción con el usuario. Sin duda es una de las etapas más importantes de cara a la usabilidad del proyecto en curso. Algunas herramientas útiles para la realización de maquetas son las siguientes: 1. Proto.io 2. Balsamiq 3. HotGloo 4. Mockup Builder 5. Moqups 1

3 1. PROTO.IO Es una herramienta pensada específicamente para hacer prototipos de aplicaciones para plataformas móviles como iphone, ipad, Android u otros. Es muy sencilla de usar gracias a su gran biblioteca de elementos, y permite controlar no solo el diseño general sino también los colores y las fuentes. Permite compartir los proyectos y trabajar en equipo junto a otros diseñadores. El Proto.io web player, permite ver las maquetas directamente en el dispositivo móvil para tener una noción más clara de cómo se vería y funcionaría la aplicación en la vida real. Imagen N. 1 Interfaz de proto.io.com Ventajas: Tiene una amplia galería de imágenes predefinida. Se pueden animar los prototipos y añadir pequeñas funcionalidades, esto permite ir más allá de los prototipos de manera que la app se parecerá mucho a la aplicación final ya programada. Desventajas Es una web app, se depende de una conexión estable a internet para su óptimo funcionamiento. Planes El plan gratuito es ideal para familiarizarse con la plataforma, sólo permite tener 1 proyecto en activo con 5 pantallas y 10MB de hospedaje. No permite utilizar la opción de publicar y, por lo tanto, no se puede enviar a clientes/equipo/posibles betatesters un enlace de la app para que prueben en sus dispositivos. 2

4 Freelancer: Este plan permite tener hasta 5 proyectos en activo, también permite tener a personas que prueben y comenten la app y permite publicarla El precio es de 24$/mes. Startup: Por 40$/mes se puede tener dos usuarios en activo asociados a la cuenta y hasta 10 proyectos en activo. A partir de aquí, las siguientes tarifas de precios incluyen más usuarios y proyectos en activo. Sitio web Video tutorial Ejemplos 3

5 2. BALSAMIQ Es una aplicación muy fácil y divertida de usar, sirve para crear prototipos de páginas web y aplicaciones para dispositivos móviles, se caracteriza por su diseño con íconos que parecen dibujados a mano y que se arrastran de un lugar a otro. De esta forma se pueden crear croquis de los proyectos interactivos y focalizarse en la interfaz del usuario. También posee la función de colaboración. Imagen N. 2 Interfaz de Balsamiq versión escritorio. Ventajas Brinda bibliotecas reutilizables y gran cantidad de componentes arrastrables. Además de ser web app tiene una versión descargable en plataformas Windows y Mac. Es una aplicación multi-plataforma que permite trabajar desde cualquier computadora con asistencia online permanente. Desventajas El look and feel cumple con el cometido de evitar centrarse en el diseño, pero para algunos clientes puede resultar demasiado infantil o poco profesional, y no hay (por ahora) más alternativas. Solo se puede elegir entre una fuente del sistema o la Comic Sams. No se puede hacer una navegación mínima ya que no permite ningún tipo de interactividad. 4

6 Planes Tanto en la aplicación de escritorio, como en la nube, ofrece una versión de prueba de 30 días, es ideal para conocer la plataforma, sin embargo no se pueden guardar documentos ni exportar a imagen. Los planes de pago, según la cantidad de usuarios inician a partir de $89 el mes en la aplicación para escritorio e incluye actualizaciones, de $12/mes en la nube y de $5/mes en Google Drive. Sitio web Descarga: Video tutorial Ejemplos 5

7 3. HOTGLOO Es una web app desarrollada en flash diseñada en función del usuario ya que permite trabajar de forma muy sencilla gracias a una biblioteca rica en componentes y una plataforma muy amigable, cuenta con funciones como arrastrar y soltar elementos, capas y más, además recibes una URL para compartir tu trabajo con tus colegas, también consta de herramientas para crear plantillas, organizar la interfaz del usuario e incluso dar diferentes niveles de acceso a los colaboradores o clientes. Imagen N. 3 Interfaz de Hotgloo.com Ventajas Fácil e intuitivo para el usuario Desventajas Es una web app, dependemos de una conexión estable a internet para su óptimo funcionamiento Planes El plan gratuito ofrece 15 días con una licencia trial para utilizar sus funciones, es útil para familiarizarse con la plataforma. El plan para grupo cuesta $14/mes, se pueden crear 2 proyectos y pueden acceder 10 colaboradores. El plan para equipo cuesta $28/ mes, se pueden crear 5 proyectos y puede acceder un número ilimitado de colaboradores. El plan para agencia cuesta $54/mes, se pueden crear 20 proyectos y puede acceder un número ilimitado de colaboradores. 6

8 Sitio web Video tutorial 7

9 4. MOCKUP BUILDER Es una herramienta muy versátil para desarrollar prototipos que permite crear maquetas de interfaz de usuario, wireframes interactivos, diseños web y móviles (IOS y Android), prototipos para software de escritorio e incluso mapas de sitio y árboles de navegación. Esta herramienta también permite exportar los proyectos en formato PNG o PDF, además de compartir las maquetas con clientes y colaboradores que, si tienen acceso, incluso podrán dejar comentarios. Imagen N. 4 Interfaz de Mockupbuilder.com Ventajas Cuenta con una versión descargable. Esta aplicación ofrece una variada biblioteca de elementos disponibles, desde componentes para ios o Android a buscador y aplicaciones de escritorio. Desventajas Los elementos disponibles pueden ser limitados Requiere de instalar software extra para su funcionamiento (Microsoft Silverlight) Planes Gratis las primeras dos semanas, ideal para conocer la plataforma. Standard: $63/año (3 evaluadores, 1 editor, 1 proyecto, 15 pantallas) Premium light: $121/año (10 revisores, 1 editor, 5 proyectos, 30 pantallas) 8

10 Premium pro: $243/año (20 revisores, 3 editores, 15 proyectos, 60 pantallas, colaboración en línea y soporte premium). Team pro: $891/año (100 revisores, 15 editores, 50 proyectos, 60 pantallas, colaboración en línea y soporte premium) Sitio web Video Tutorial Ejemplos 9

11 5. MOQUPS Es una aplicación web para crear diagramas, mockups y wireframes de forma muy fácil e intuitiva en la cual se presenta la posibilidad de exportar los proyectos a formato pdf o png. Permite visualizar la estructura y el funcionamiento de las webs o las app a través de una gran cantidad de diseños predeterminados de vectores, incluye variedad de imágenes por defecto y tiene la opción de incluir imágenes del ordenador para trabajar más cómodamente. Acceder a mockups es muy sencillo ya que funciona en todos los navegadores actuales y en los dispositivos móviles Android e IOS, sin necesidad de ningún plugin adicional usuarios se encentran realizando sus bocetos en ésta plataforma y lo recomiendan por la calidad de sus resultados. Imagen N. 5 Interfaz de moqups.com Ventajas Se puede trabajar en capas como en Photoshop, también superponer varios elementos si así se requiere. Otra de las utilidades a la hora de diseñar es la opción de alinear los elementos en la ventana, agruparlos, ordenarlos entre otros. Desventajas Es una web app, dependemos de una conexión estable a internet para su óptimo funcionamiento. Planes La versión gratuita no exige que el usuario se registre e incluye 2 proyectos (limitado a 300 objetos) y 5 MB de almacenamiento sin límite de tiempo, ideal para empezar a conocer la plataforma y familiarizarse con ella. 10

12 Standard: $9/mes contiene 10 proyectos activos, 1GB de almacenamiento, además, proyectos archivados y usuarios ilimitados. Professional: $15/mes contiene 50 proyectos activos, 5GB de almacenamiento, además, proyectos archivados y usuarios ilimitados. Ultimate: $29/mes contiene una cantidad ilimitada de proyectos activos, 20GB de almacenamiento y proyectos archivados y usuarios ilimitados. Sitio web Video tutorial pulsando la opción Quick tutorial. Ejemplos 11

13 Glosario Wireframe: Es un prototipo visual de baja calidad, un armazón o esqueleto de lo que puede ser un sitio web o una aplicación web. En inglés son sinónimos de Wireframe: skeleton, blueprint, outline. Sirve para darnos una idea de que áreas van a conformar el sitio, su layout, jerarquías y esquemas de navegación. No deben tener elementos finalizados de diseño (colores o tipografías) Deben estar en blanco y negro o máximo en escala de grises, no deben tener color porque sirven más para validar la arquitectura, el layout y los colores pueden suponer distracciones. Mockups: (Maquetas) Es un prototipo si proporciona al menos una parte de la funcionalidad de un sistema y permite pruebas del diseño. Los mockups son utilizados por los diseñadores principalmente para la adquisición de comentarios por parte de los usuarios. Anexo Otras alternativas, muy completas y también gratuitas son: Lumzy MockupBuilder Para dispositivos móviles y tablets se puede iniciar probando Fluidui. Webgrafía

14 Bibliografía Responsive Web Design using _ Ethan Marcotte X Heidy Tatiana Tovar Pulido Estudiante de intercambio - Colombia 13