No me considero un buen diseñador. No es que no me guste el diseño, al contrario, me encanta y cada día intento aprender más trucos y técnicas que me permitan dar un aspecto más atractivo a mis aplicaciones, pero reconozco que lo mío es la implementación y el desarrollo de funcionalidades, y en muchas ocasiones cuando tengo que enfrentarme a cuestiones de diseño entro en modo bloqueo donde la falta de ideas me hace perder mucho tiempo.
Si a tí te pasa algo parecido y no puedes contar con los servicios de un diseñador profesional, quiero compartir contigo algunos trucos y recursos que yo utilizo y que me ayudan a coger ideas a la hora de definir el aspecto visual de una aplicación móvil.
Cuestiones a tener en cuenta
A la hora de diseñar una aplicación desde cero tendremos que centrarnos en dos aspectos principales:
- El aspecto visual: cómo se visualizarán los componentes, gama de colores principales, aspecto de los botones, menús, tipografía, etc.
- Arquitectura y navegación: cómo vamos a distribuir las secciones de nuestra aplicación, cómo será el menú de navegación, y en general todo lo que tenga que ver con la experiencia de usuario (UX).
Los recursos que voy a comentar en este post están más orientados al primer punto, es decir a la definición del aspecto visual. Sin embargo algunos nos darán ideas sobre elementos de interfaz de usuario que podamos utilizar para definir la arquitectura de la aplicación y mejorar la experiencia de usuario.
En general buscaremos un estilo y un aspecto visual que nos sea útil en cualquier plataforma sobre la que desarrollemos, pues somos multiplataforma y queremos que nuestra aplicación se vea igual de bien en cualquier dispositivo. Sin embargo, debemos intentar que nuestra aplicación haga uso en la medida de lo posible de los patrones de diseño recomendados en cada plataforma. Un ejemplo típico es el uso de botones explícitos para ir atrás en iOS que no deberíamos usar en Android, o el típico botón de “más acciones” representado por un icono de tres puntos verticales en Android, o que en iOS los paneles tabulados suelen incluir los iconos en la parte inferior de la pantalla y Android en la parte superior.
1. Galerías de patrones de diseño
Existen varias páginas web que recopilan distintos patrones de diseño agrupándolos por categorías y mostrando ejemplos encontrados en aplicaciones reales. Son una fuente de inspiración fenomenal pues nos permiten analizar las soluciones que han dado distintos diseñadores a distintas secciones típicas que podamos encontrar en una aplicación, como son los menús de navegación, las páginas de perfil, los listados o calendarios.
- iOS patterns: disponemos de más de 500 patrones encontrados en las versiones de iOS de numerosas aplicaciones. Están centrados en las versiones para smartphone, no encontrando ideas para aplicaciones de tablet.
- Android Niceties: parecida a la anterior pero centrada en Android. Es un tumblr que van actualizando con capturas de distintas aplicaciones. Se echa en falta un poco de categorización como hacen otras páginas similares pero podremos usar el sistema de etiquetas para ver ejemplos más segmentados.
- pttrns.com: Esta página me encanta. No solo podremos filtrar por elementos específicos de interfaz de usuario sino que podremos seleccionar la plataforma que nos interesa. Además, no solo se incluyen capturas de aplicaciones para smartphone sino que además podremos ver aplicaciones para tablets o incluso smartwatch (principalmente Apple Watch). Tremendamente recomendable.
- Mobile patterns: Aunque podemos seleccionar iOS y Android, básicamente encontraremos ejemplos de iOS, y una vez más solo contempla aplicaciones para smartphone.
- capptivate.co: como novedad esta página web ofrece algunas de las capturas con animación incluída, donde no solo podremos coger ideas sobre aspecto visual sino que además podremos cogerlas sobre animaciones y transiciones entre elementos.
- Pinterest: Si de coger ideas se trata, no podía faltar la red social “visual” más popular. En ella buscando con términos como “Mobile UI”, “iOS UI” o “Android UI” encontraremos muchos más ejemplos que nos puedan servir de inspiración.
2. Kits de diseño
Otra opción que podemos utilizar es buscar algún Kit UI destinado para móviles que nos den una solución completa a los elementos de interfaz más comunes de una aplicación móvil. Suelen ser diseños que vienen en en formato PSD (Photoshop) o para Sketch (SketchApp). Muestran pantallas completas a modo de capturas donde podremos ver cómo se muestran los elementos que componen el diseño y usarlos en nuestras propias aplicaciones. Muchos de estos kits ofrecen una versión gratuita donde limitan el número de elementos o un número reducido de pantallas, ampliándolas en las versiones de pago.
El problema de estos kits es que, al poder ser adquiridos ya sea gratuitamente o pagando por ellos, no se nos garantiza la exclusividad de los mismos, pudiendo darse el caso en el que nos encontrásemos otras aplicaciones haciendo uso de los mismos.
Por otra parte, hay que tener en cuenta que únicamente nos ofrecen las capturas y como mucho los elementos separados por capas para poderlos “trocear” y usar en nuestra aplicación, pero seremos nosotros quien finalmente los tengamos que “traducir” al lenguaje de maquetación de la plataforma de desarrollo que estemos utilizando. Si por ejemplo estamos haciendo una aplicación web o híbrida, tendremos que traducir todos esos elementos gráficos a HTML5 y CSS.
En las siguientes webs podremos encontrar Kits orientados a aplicaciones móviles:
- freebiesbug.com: en esta web encontraremos numerosos recursos de diseño gratuítos, donde cuentan con una sección específica de kits para aplicaciones móviles. La mayoría de estos kits ofrecen versiones ampliadas de pago y estan disponibles en PSD y/o Sketch.
- ui8.net: un buen repositorio donde no solo encontraremos Kits UI sino que disponen de fuentes, iconos y otros recursos de diseño. Son de pago pero muchos a un precio muy económico.
- sketchappsources.com: si trabajas con la aplicación de diseño SketchApp, encontrarás numerosos kits y recursos compatibles con esta aplicación.
- Recopilaciones realizadas en blogs: muchos blogs especializados en temas de diseño ofrecen recopilaciones de Kits UI gratuitos o de pago como son el caso de them, themefurnace.com, Envato, o speckyboy.com.
Por último, aquí tienes un video donde se puede ver algunas recomendaciones a la hora de utilizar los kits de diseño, en este caso con Photoshop.
3. Icono principal de la aplicación
El icono principal de la aplicación, aquel que la identifica y el cual aparecerá en la pantalla de aplicaciones de nuestro dispositivo, es de las partes más delicadas de toda la aplicación, al menos a nivel de diseño. Junto al nombre que le demos a nuestra aplicación jugará un papel crucial a la hora de realizar el marketing y la promoción. Sin embargo, una vez más existen sitios donde podemos recoger algo de inspiración, incluso comprar iconos ya hechos:
- iOS icon gallery: iconos de aplicaciones iOS, Mac y Apple Watch. Podemos buscar por categorías y por colores.
- iconsfeed.com: aunque también podemos buscar por categorías, la interfaz es mas cuidada que la anterior donde destaca el sistema de iconos relacionados que podemos ver según elegimos uno.
- iOSpirations: Otra página centrada en iconos de apps de iOS y Mac.
También tenemos algunas utilidades online que nos permitirán generar juegos de iconos para disponer de todos los tamaños necesarios para la publicación de la app.
4. Juego de Iconos de aplicación
Aparte del icono principal de la aplicación, normalmente necesitaremos juegos de iconos para usar dentro de la aplicación, aquellos que utilizaremos dentro de botones, pestañas, elementos de menú, etc. En algunas ocasiones si partimos de algún Kit UI, éste ya incorporará algunos que podremos reutilizar.
Yo recomiendo buscar juegos completos de iconos para asegurarnos de tener disponible una gama amplia donde elegir y poder cubrir todas las funcionalidades de nuestra aplicación, y así asegurarnos que siguen una línea de diseño homogénea.
Una vez más encontraremos catálogos de iconos gratuitos o de pago. A continuación indico unos cuantos ejemplos:
- Font Awesome: ampliamente conocida por cualquier desarrollador web, se trata de una fuente open source donde podremos encontrar un catálogo tremendamente completo de iconos para utilizar en nuestras aplicaciones.
- Recopilatorio de 30 packs de iconos gratis: esta recopilación de packs me parece muy completa. Échale un vistazo porque encontrarás packs realmente buenos
- flaticon.com: otra famosa web donde podremos descargar iconos por separado o por packs.
- icons8.com: buscador de con más de 30000 iconos. Podremos descargarlos gratuitamente en tamaño 100×100, tamaño normalmente suficiente para aplicaciones móviles si los utilizamos como complementos de elementos de interfaz (botones, menús, …)
5. Tipografías
Por último, y no por ello menos importante, debemos seleccionar la tipografía adecuada a utilizar en nuestra aplicación.
Un problema que solemos encontrar si utilizamos Kits UI es que éstos no suelen incorporar las tipografías, de forma que si realmente queremos trasladar esos diseños a componentes de aplicación funcionales (ya sean HTML5 o nativos) tendremos que buscar fuentes similares o directamente descargar las originales, ya sean fuentes libres o de pago.
A continuación muestro algunos repositorios de fuentes, algunas completamente libres y gratuitas y algunas de pago, donde podremos buscar aquella que más se ajuste al diseño que buscamos:
Conclusión
Como hemos visto, existen multitud de recursos para encontrar inspiración o directamente conseguir buenos diseños a bajo coste. Esta estrategia es ideal para aquellos proyectos propios o aplicaciones para terceros donde queramos reducir presupuesto. Sin embargo, siempre que puedas te recomiendo que uses los servicios de algún profesional que te permita dotar a tu aplicación de ese extra de calidad que aporta un diseño equilibrado y cuidado.
Post muy útil! Gracias por esta serie de truquillos o consejos!