Cómo diseñar una app tú mismo: 6 decisiones, no 40 pantallas

1. ¿Puedes diseñar tu propia app?
2. Lo que cuesta diseñar una app, y cuánto tarda
3. Las seis decisiones que sí son tuyas
4. Lo que no tienes que decidir
5. Android, iPhone y la web
6. ¿Y Figma?
7. La checklist antes de empezar
8. Preguntas frecuentes
9. Por dónde empezar

Casi todos los consejos sobre diseñar una app dan por hecho que ya eres diseñador. Investiga a tus usuarios, dibuja los flujos, haz wireframes, pasa a alta fidelidad, entrega a desarrollo. Es un proceso real y es el correcto para un equipo de diseño.

No es una respuesta para quien tiene un proyecto de app, un presupuesto y ninguna formación en diseño.

La pregunta de fondo es más sencilla. ¿Puedes diseñar tu propia app o necesitas pagar a alguien? Las dos respuestas se defienden. Lo que viene a continuación es lo que cuesta cada una, y en qué consiste realmente el trabajo de diseño una vez quitas las partes de las que un sistema puede encargarse por ti.

Esto es lo que queda del trabajo de diseño una vez el sistema se lleva su parte. Seis decisiones. Puedes tomarlas todas en una tarde, y puedes cambiar cualquiera de ellas más adelante sin rehacer la app.

1. Qué contiene la app

Tus secciones, y su orden. Es una decisión de contenido antes que de diseño, y la que más determina si la app se siente bien. Cinco secciones que se ganan su sitio valen más que quince que no.

Parte de aquello para lo que la gente va a abrir la app. Todo lo demás es navegación secundaria.

2. Cómo se navega por ella

Una barra de pestañas abajo, un menú lateral, o una mezcla. Es la decisión más visible de una app móvil, y la que el usuario siente antes de fijarse en nada más.

La regla práctica: barra de pestañas para tres a cinco destinos entre los que la gente alterna constantemente, menú para todo lo que se visita de vez en cuando.

3. Qué aspecto tiene una lista

Es la decisión que más trabajo hace, y la que más se subestima.

Casi toda una app de contenidos son listas. Listas de artículos, rejillas de producto, listas de episodios, listas de eventos. Elige cómo se presenta una lista y habrás elegido el aspecto de la mayor parte de tu app: imagen a la izquierda o a todo ancho, una columna o dos, título encima o debajo, cuánto texto se ve antes de cortar.

GoodBarber trae más de 100 layouts ya construidos, y eliges uno por sección. Una rejilla de revista para tus reportajes, una lista compacta para las noticias, un carrusel de imagen grande para la portada. El mismo contenido, tres apps distintas según lo que elijas.

4. El color

Eliges cuatro colores, no treinta.

Un tema de GoodBarber define cuatro roles de color semánticos, aplicados de forma coherente en todas partes. Semántico quiere decir que cada color tiene una función y no una posición: uno es el color de tus acciones, otro el de tus superficies. Cambia el rol y todas las pantallas que lo usan se adaptan.

Si elegir cuatro colores que funcionen juntos es justo la parte que te daba pereza, Genius Palette es una IA propia entrenada específicamente en color legible para apps. Y si tienes claro lo que quieres, puedes forzar cualquier color de forma individual, hasta elemento por elemento.

5. La tipografía

Una tipografía, o dos si quieres que los titulares contrasten con el texto.

No estás eligiendo tamaños. La tipografía de GoodBarber es un sistema de 18 niveles semánticos, desde los titulares de display hasta las etiquetas, cada uno calibrado por dispositivo para móvil, tablet y escritorio, con una altura de línea de 1,2. Tú eliges la tipografía. La escala ya está construida.

6. Tu icono y tu pantalla de inicio

Las dos imágenes que ningún sistema puede decidir por ti, porque llevan tu identidad y no tu interfaz.

El icono es lo más difícil de esta lista, y en lo que merece la pena invertir tiempo de verdad o dinero de verdad. Tiene que funcionar a 60 píxeles, al lado de Instagram, en la pantalla de inicio de alguien. Forma sencilla, pocos colores, sin texto, reconocible de un vistazo.

Todo lo que viene ahora lo resuelve el sistema, en cada pantalla, sin un ajuste que aprender.

Los espaciados. Un sistema de gutters escala por dispositivo a partir de un valor base: 16px en móvil, 20px en tablet y escritorio, con niveles a la mitad y al doble, y pasos verticales. Una sola configuración produce espaciados correctos en todos los formatos.

La jerarquía tipográfica. Los 18 niveles mantienen sus relaciones entre sí sea cual sea la tipografía que elijas.

La legibilidad. Las paletas se construyen pensando en el contraste, y cada control conserva un área de pulsación cómoda aunque el elemento parezca pequeño.

Formas, sombras, bordes y estados. Definidos una vez como átomos y reutilizados en todas partes, para que un botón se comporte como un botón en toda la app.

La coherencia entre pantallas. Esta es la que separa una app que parece diseñada de una que parece montada, y es también la que un diseñador humano tiene que mantener a mano. Aquí se sostiene por construcción.

Diseñas una vez. Una configuración produce tres salidas: una app iOS nativa, una app Android nativa y una progressive web app.

Lo que cambia entre ellas pertenece a las plataformas y no a ti. Las dos tiendas tienen sus propias convenciones, y el sistema las respeta. No mantienes tres diseños, y no eliges entre una app que se ve bien en iPhone y una que se ve bien en Android.

Una cosa que conviene prever: añadir una funcionalidad o cambiar tu diseño exige recompilar, y eso vale para las tres salidas, la web app incluida. Es una sola acción, pero no es instantánea.

Ocho respuestas, y ya tienes tu diseño.

1. ¿Para qué sirve la app, y quién la abre? Todo lo demás depende de esto.
2. ¿Qué secciones se ganan su sitio, y en qué orden? Cinco que hagan un trabajo cada una, no quince que llenen un menú.
3. ¿Cuáles van en la barra de pestañas? De tres a cinco destinos entre los que se cambia constantemente. El resto, al menú.
4. ¿Qué layout usa cada sección? Una elección por sección, y decide el aspecto de casi toda la app.
5. ¿Qué colores ocupan los cuatro roles semánticos? Empieza por el color de tus acciones y el de tus superficies.
6. ¿Una tipografía, o dos? Dos si quieres que los titulares contrasten con el texto. No estás eligiendo tamaños.
7. Tu icono, y tu pantalla de inicio. ¿El icono aguanta a 60 píxeles, al lado de Instagram? Forma simple, pocos colores, sin texto.
8. ¿Hay aquí algo realmente a medida? Si una parte necesita un desarrollador y un diseñador, mejor saberlo ahora que después.

¿Se puede diseñar una app uno mismo sin ser diseñador?

Para una app de contenido o de comercio, sí. Esas apps están hechas de piezas que todo el mundo reconoce: listas, páginas de artículo, fichas de producto, un carrito, un perfil, una búsqueda. Un design system se encarga del trabajo repetitivo, los espaciados, la jerarquía, el contraste y la coherencia entre pantallas, y te deja seis decisiones. Para un juego o un marketplace, no. Esos productos tienen su valor en una lógica de negocio a medida, y necesitan un desarrollador y un diseñador.

¿Cuánto cuesta diseñar una app?

Las tarifas publicadas por los estudios sitúan una app sencilla entre 5.000 y 15.000 dólares con un freelance, y entre 15.000 y 40.000 con una agencia. Una app compleja sube de 40.000 a 80.000. Son cifras de diseño solamente. El desarrollo, las pruebas, la publicación y el mantenimiento son presupuestos aparte. Cuando el design system forma parte de la herramienta que construye la app, no hay factura de diseño por pantalla.

¿Cuánto se tarda en diseñar una app?

De cuatro a ocho semanas para un MVP acotado, de seis a doce para algo mayor. Y eso es solo la fase de diseño, antes de que se construya una línea de la app. Elegir dentro de un design system que ya existe se hace en una tarde, porque las fundaciones y los componentes ya están ahí.

¿Cuáles son las seis decisiones del diseño de una app?

Qué entra en la app y en qué orden, cómo se navega por ella, el aspecto de las listas, el color, la tipografía, y tu icono con tu pantalla de inicio. Todo lo demás, los espaciados, la jerarquía tipográfica, la legibilidad, las formas y los estados, la coherencia entre pantallas, lo resuelve el design system en lugar de decidirlo tú.

¿Qué es un design system?

Un conjunto de fundaciones, componentes y reglas que producen pantallas coherentes sin que nadie las vuelva a dibujar cada vez. Apple tiene uno, Google tiene otro, y también cualquier equipo de producto serio. Cuando el design system vive dentro de la herramienta que construye la app, y no en un archivo que se entrega al final, la mayoría de las pantallas no se dibujan nunca.

¿Hace falta Figma para diseñar una app?

No. Figma es excelente y es lo que te entregará un diseñador, pero produce un archivo de diseño, no una app. Alguien tiene que construir después lo que ese archivo describe, y ese segundo presupuesto suele ser mayor que el primero. Para una app hecha de listas, artículos, productos y un carrito, un design system integrado en el constructor produce directamente las pantallas terminadas.

¿Cuántos colores debe tener una app?

Menos de los que se cree, y lo que importa no es la cantidad sino que cada color tenga un trabajo. Un tema de GoodBarber define cuatro roles de color semánticos aplicados igual en todas partes: uno es el color de tus acciones, otro el de tus superficies. Cambia el rol y todas las pantallas que lo usan van detrás. Treinta colores elegidos uno a uno no son riqueza, son treinta cosas que mantener coherentes a mano.

¿Qué diferencia hay entre diseñar y desarrollar una app?

El diseño es el conjunto de decisiones que dan a la app su organización y su aspecto: las secciones, la navegación, los layouts, el color, la tipografía, el icono. El desarrollo es construir el software: el código, el back end, las integraciones, las pruebas, la publicación en las tiendas. Las cifras de este artículo son cifras de diseño. El desarrollo es un presupuesto distinto.

¿Se puede cambiar el diseño una vez construida la app?

Sí. Las seis decisiones se apoyan en un design system, así que cambiar un layout, un rol de color o una tipografía se propaga a todas las pantallas que lo usan. Aplicar el cambio exige recompilar la app de iOS, la de Android y la web. Es una sola acción, pero no es instantánea.

¿Cuándo conviene contratar a un diseñador profesional?

Cuando el valor de la app está en algo que todavía no existe: interacciones inéditas, flujos complejos, lógica de negocio pesada y a medida. Un juego, un marketplace tipo Airbnb o Booking. Para una app construida sobre patrones convencionales, encargar fuera el diseño de pantallas sobre todo paga un trabajo que el design system ya hace.