Esta es la situación: eres un desarrollador y tienes todas las herramientas necesarias para codificar una aplicación increíble. Pero estás un poco atascado en cuanto al diseño. Sin el dominio de las herramientas de diseño estándar del sector, como Adobe Photoshop, ¿cómo puedes diseñar una aplicación móvil que refleje tu genio interior? ¿Cómo hacer una aplicación que sea visualmente impresionante y fácil de navegar para los usuarios?

No te preocupes, hay buenas noticias. Puede que no tengas mucha (o ninguna) experiencia en UX/diseño, pero no la necesitas necesariamente para crear un proyecto final visualmente impactante. Estas soluciones te ayudarán en el proceso de cómo diseñar una aplicación móvil – cada una cumpliendo esta promesa sin requerir que pagues un centavo.

Cómo diseñar una aplicación móvil

Wireframing implica la creación de un producto mínimo que esencialmente representa el esqueleto para el diseño de tu aplicación. Si compararas tu aplicación con una startup, podrías referirte a esta etapa de diseño como el producto mínimo viable (un concepto popularizado por el libro The Lean Startup).

El wireframing es una etapa esencial cuando se atraviesa el proceso de cómo diseñar una aplicación móvil porque te permite pensar en la estructura como algo separado de los elementos de diseño final. También hace posible que transmitas eficazmente tu concepto a cualquier parte relevante -colaboradores, diseñadores o inversores- sin que necesites personalmente ninguna experiencia en diseño para expresar con precisión estas ideas.

Las siguientes herramientas pueden ser útiles durante este importante paso fundacional de cómo diseñar una aplicación móvil.

Lápiz y papel

Para aquellos que realmente no quieren gastar un centavo, el viejo y confiable lápiz y papel es el camino a seguir para esbozar sus ideas iniciales de la aplicación como un borrador para su diseño. Aunque algunos prefieren ir directamente a Photoshop o a una herramienta de creación de prototipos, este método puede ser ideal para capturar las ideas rápidamente a medida que se producen. Como ventaja añadida, no necesitas ninguna formación especial o dominio de la herramienta para sacar el máximo provecho de este método de wireframing.

Android y/o iOS sketch paper

Para aquellos que están averiguando cómo diseñar una aplicación móvil, existe una herramienta de wireframing especializada con usted específicamente en mente. Por el módico precio de gratis, se pueden descargar papeles de croquis que tienen impresos los iPhones y los iPads. Esta es la solución de diseño ideal para los desarrolladores que necesitan una mejor visualización que la que puede proporcionar el lápiz y el papel. Este papel de boceto de iOS también es ideal para hacer storyboards o mostrar los distintos estados de cómo se verá tu aplicación en uso.

Este papel de boceto de iOS incluye líneas de cuadrícula para todos los elementos de interfaz de usuario por defecto en los dispositivos iOS mencionados. Para la versión de Android de este papel de boceto, el papel tiene 8 modelos de teléfono impresos en él. Sin embargo, a diferencia del papel de iOS (que tiene una cuadrícula de puntos), éste no tiene líneas en absoluto.

MockFlow

Si estás buscando una herramienta un poco más tecnológica para hacer tu wireframing de aplicaciones móviles, considera algo como MockFlow. Mockflow es una solución de wireframing en línea, con la flexibilidad para manejar cualquier tipo de proyecto de diseño – ya sea una aplicación móvil o web (o algo completamente diferente). Hay una versión básica gratuita que permite trabajar en un proyecto a la vez, con un máximo de 1 GB de almacenamiento y dos miembros de equipo. Puedes desbloquear funcionalidades adicionales (más proyectos, almacenamiento y miembros del equipo) cuando te actualizas a un plan de pago, que comienza en 14 dólares al mes.

WireframeApp es otra opción de wireframing basada en una aplicación web similar a MockFlow. Todos los planes son de pago, pero a menudo puedes encontrar una oferta asequible de por vida (menos de 49 dólares en total) si te suscribes a su boletín de noticias por correo electrónico o a AppSumo.

Prototipado

El prototipado es el siguiente paso para saber cómo diseñar una aplicación móvil una vez que has terminado el wireframing. El punto de esta siguiente etapa es crear una versión factible del diseño, similar a como quieres que sea el proyecto final.

Las siguientes herramientas se ajustan a cómo diseñar una aplicación móvil sin pagar un centavo, ya que todas son de uso 100% gratuito!

Marvel

Marvel es una aplicación web que también está disponible para iOS y Android. Además de la posibilidad de diseñar en cualquier dispositivo con el que te sientas más cómodo, esta herramienta facilita la conversión de tus bocetos en prototipos factibles. Además de la posibilidad de añadir elementos de diseño básicos, también puedes enlazar los diseños para crear un flujo. Marvel te permite crear zonas activas interactivas y transiciones realistas, y puedes elegir acciones como pasar el ratón, hacer clic, deslizar, pellizcar, etc. Con toneladas de integraciones de terceros, Marvel juega bien con muchas de las otras herramientas que ya utiliza, y los colaboradores en su equipo.

InVision

InVision es similar a Marvel, en que es una herramienta de prototipado web y móvil libre. Es una herramienta de prototipado perfecta para equipos, gracias a la funcionalidad que permite comentar y colaborar de forma sencilla. Lo que la diferencia de muchos tipos de herramientas similares es su función de control de versiones, que permite revertir los cambios a una versión anterior si es necesario.

InVision es utilizada por empresas innovadoras como Adobe, Zappos, AT&T, Dell y Sony, así como por startups de rápido crecimiento como Prezi, Soundcloud y Evernote. Usar InVision no te garantiza su éxito, ¡pero no puedes negar los beneficios de la asociación!

Axure

Para completar tus opciones sobre cómo diseñar una aplicación móvil sin pagar un centavo, aquí hay una opción que es de pago si se usa a largo plazo, pero completamente gratis para usar durante una prueba de 30 días. Axure permite crear fácilmente prototipos de aplicaciones gracias a diseños muy funcionales (similares a las transiciones de Marvel). Al igual que las otras opciones de este artículo, esta herramienta ofrece funcionalidades para facilitar la colaboración en equipo.

Proto.io

Proto.io se anuncia como una herramienta que puede ayudarte a crear «Prototipos que se sienten reales». Para un desarrollador de aplicaciones móviles que busca crear un prototipo realista y funcional, esto puede ser música para sus oídos. Proporcionan a los usuarios múltiples bibliotecas de interfaz de usuario, integraciones de terceros (con socios como Dropbox), e incluso pruebas de usuario para asegurar que la experiencia del usuario es perfecta en el lanzamiento. Una prueba gratuita le permite 15 días de acceso con acceso de por vida a las características limitadas, o la opción de actualizar a una cuenta totalmente funcional con múltiples proyectos y características, a partir de $ 24 / mes.

Si aún no has encontrado la herramienta de wireframing o prototipado perfecta, Developer Drive comparte algunas opciones genéricas adicionales a tener en cuenta.

Por supuesto, si este es el alcance de tu interés y habilidad cuando se trata de diseño de aplicaciones, tendrás que pagar a alguien para llevar tu wireframe o prototipo básico al siguiente nivel. Pero llegar con un plan básico puede ser una buena manera de ahorrar tiempo y dinero por adelantado. Cuanto mejor sea capaz de comunicar su visión a un diseñador, más fácil será hacerla realidad y menos dinero desperdiciará en versiones de diseño que no se ajusten a su visión.

Diseño visual

Ya sea que busque orientación sobre cómo diseñar una aplicación para iPhone, o cómo diseñar una aplicación para Android, estas herramientas gratuitas pueden ayudarle a envolver su cabeza en el diseño perfecto para cualquiera de los dos sistemas operativos móviles.

A veces, un poco de inspiración puede ayudar a eliminar un bloqueo creativo, y perderse en un tutorial de diseño puede ayudarte a averiguar cómo terminar el proyecto completamente por tu cuenta.

Laudable Apps

Laudable Apps es un sitio web/galería de aplicaciones sin publicidad que se centra específicamente en mostrar hermosos diseños para iOS 7. No hay texto ni otras distracciones, sólo diseños presentados sin comentarios.

Mientras piensas específicamente en iOS, es posible que también quieras tomarte el tiempo para revisar las estrictas directrices de presentación de la App Store de Apple. Dado que tienen una actitud «sin excepciones», tener estas directrices en mente mientras se determina cómo diseñar una aplicación móvil puede ayudarle a hacer las cosas bien a la primera, ahorrando tiempo y dinero a largo plazo.

Patrones de Android

Ya sea que esté diseñando exclusivamente para un dispositivo Android, o que esté creando dos versiones de su aplicación móvil (con una para la App Store de Apple), querrá familiarizarse con las entradas y salidas del diseño para un dispositivo Android. Puede que te sorprenda saber que esto es decididamente diferente (y significativamente menos rígido) que los estándares de diseño de aplicaciones para iOS. Puede ser útil leer los materiales de presentación de la tienda de Google Play, como esta lista de verificación de lanzamiento.

También puedes utilizar Android Patterns como tu curso intensivo de diseño de Android. Este sitio web es una biblioteca de patrones de interacción de Android que puedes utilizar al crear tu diseño. Los patrones de interacción están ordenados por tipo de aplicación e incluyen acciones como la navegación, las notificaciones y las interacciones en pantalla. Aunque estos patrones pueden ser útiles para un nuevo diseñador de aplicaciones móviles, deben tomarse como una guía, pero no como reglas absolutas.

Iconos

Añadir alguna dimensión a tus elementos visuales puede ayudar a que tu prototipo se parezca lo más posible al resultado final. Icons8 ofrece una biblioteca de más de 53.800 iconos de uso completamente gratuito. Además de este gigantesco recurso gratuito, también deberías echar un vistazo a estas herramientas de diseño de interfaz de usuario para conocer diferentes formas de buscar y utilizar iconos cuando estés determinando cómo diseñar una aplicación móvil.

Adobe Kuler

Adobe tiene un montón de recursos para aquellos que buscan diseñar una aplicación móvil, desde un nivel de diseño principiante hasta uno avanzado, pero uno de los más sencillos y útiles es su herramienta de combinación de colores. Kuler ayuda a los diseñadores y a los que no lo son a elegir esquemas de color basados en la rueda de color y en diferentes reglas de color: monocromático, complementario, tríada, etc. Puedes crear una combinación de colores a partir de una imagen, o navegar por las propuestas de combinación de colores de otros para inspirarte.

Mobile Design Inspiration

Según CSSWinner, Mobile Design Inspiration es la galería de inspiración más densa para el diseño de aplicaciones móviles, con inspiraciones de diseño de aplicaciones disponibles y organizadas específicamente por iPhone, Android, Apple Watch y iPad. Cada semana se añaden nuevos diseños, y su sección «Campos creativos» puede servir de inspiración adicional si también estás trabajando en el diseño del logotipo de una app.

Tuts+

Si realmente quieres saber cómo diseñar una app móvil sin pagar un céntimo, deberías considerar invertir tu tiempo en adquirir nuevas habilidades. Aprender a diseñar tu propia aplicación en lugar de contratar a alguien para que lo haga puede ahorrarte dinero Y también ganar valiosas habilidades que puedes monetizar más adelante.

Hay varios sitios web que ofrecen excelentes cursos en línea de diseño (Treehouse es un recurso de pago impresionante), pero Tuts+ ofrece una gran cantidad de conocimientos en profundidad, completamente gratis, sin sacrificar la calidad. Además de artículos útiles, también tienen recursos largos adicionales sobre diseño, como libros electrónicos.

Cómo diseñar una aplicación móvil sin pagar un centavo

Realmente no tienes que contratar a un diseñador para diseñar tu aplicación móvil, especialmente en las primeras etapas de wireframing y prototipado. Tómate un tiempo para llevar tu aplicación a donde quieres que esté en un nivel básico, entonces incluso si terminas contratando a un diseñador, el proyecto no será tan profundo (y costoso).

Con estas herramientas de diseño de aplicaciones móviles, puedes averiguar cómo diseñar una aplicación móvil por tu cuenta, y recoger algunas nuevas habilidades en el camino. Imagina las oportunidades de contratación para una persona que pueda demostrar su habilidad tanto en el diseño como en el desarrollo de una aplicación.

¿Qué consejos o herramientas añadirías a esta lista sobre cómo diseñar una aplicación móvil sin pagar un céntimo? ¡Nos encantaría escuchar tus opiniones! Tuitea tus ideas en @icons8, y compartiremos nuestros favoritos.

Acerca del autor
Maddy Osman ama WordPress y escribir. Cuando no está ocupada ayudando a organizar WordCamp Denver, comparte sus mejores consejos de marketing de contenidos/SEO en su blog, www.the-blogsmith.com. Manténgase al día con sus últimos artículos a través de la web en Twitter: MaddyOsman.