Blog de GoodBarber
Basketball
blog-goodbarber

Como crear una app turística de tu ciudad


Written by on Jueves, 24 de Marzo 2016 15:00


Hace ya algún tiempo que dejamos atrás los mapas de papel para explorar las ciudades y lugares de interés a través de nuestros smartphones. Hoy en día, todo tiene cabida dentro de una aplicación, ésta puede proporcionar al usuario un conjunto de información valiosa que este puede configurar según los lugares que quiera visitar, las actividades que quiere hacer y  mucho más. 

Hoy crearemos paso a paso una app para visitar y hacer turismo en una ciudad. En este artículo se tratará Barcelona, pero los pasos que se indicarán, se pueden extrapolar a muchas de las apps realizadas dentro de la categoría Viajes y Turismo de GoodBarber.  Como bien sabes, en nuestra plataforma todo se puede modificar y adaptar a tus necesidades. 

1. DISEÑO: DEFINE EL TEMA

Este es el primer paso para crear tu Beautiful App. En el back office de tu app encontrarás más de 50 temas creados por nuestros diseñadores que pueden servirte de gran ayuda para empezar tu aplicación y poquito a poco ir haciendo tus ajustes. 

Para la aplicación que he desarrollado a lo largo del artículo he decidido comenzar con el tema "Asian Touch ", pero como he dicho anteriormente, se puede elegir el tema que mejor encage con el diseño que tienes en mente.

2. MENÚ: SELECCIONA MODO DE NAVEGACIÓN

Del mismo modo que con los temas, hay 8 menús con plantillas predefinidas, pero si deseas puedes crear un nuevo modo de navegación desde cero. Es importante ajustar el menú de navegación de la app al número de menús y de contenido que tiene la app

En el caso de la app BCN, he seleccionado el menú de navegación "Little Swipe", para centrar la atención en el contenido de la app. 

*Cuando se empieza la creación de la app se muestra contenido, este es simplemente un ejemplo para ayudarte con la elección del diseño. 

Una vez que hayas elegido el modo de navegación, toca personalizarlo.

Los colores que se muestran por defecto, son los que se han elegido anteriormente al seleccionar el tema. Pero no hay problema, se pueden cambiar todos los colores y fuentes, simplemente tienes que hacer clic en el botón "Modificar".

Para la selección de colores en este ejemplo, he utilizado la herramienta gratuita Adobe Color Wheel, es una herramienta que ofrece combinaciones de colores harmonicas que te ayudarán a encontrar la combinación perfecta para tu app en unos minutos. 

3. 1 CABECERA- HEADER

Como en el caso del menú, puedes ajustar la configuración del diseño. Pero, más allá de eso, es necesario definir como se mostrará tu logotipo (texto o imagen), los efectos de la cabecera y los botones de la barra de herramientas.
 

3.2 CUERPO DE LA APP- BODY

En este paso, voy a cambiar el fondo de la aplicación, los separadores y los márgenes. Como en el caso de los colores, lo mismo sucede con el cuerpo de la app, este viene determinado por la plantilla que hemos seleccionado en el primer paso. 

Para crear un nuevo fondo para la aplicación he utilizado la herramienta gratuita Canva, eso sí, teniendo en cuenta las dimensiones de la imagen que indica el back office de la app. En este caso, la imagen creada es muy similar a la del tema, por lo que los colores preestablecidos encajan. 

4. AÑADE EL CONTENIDO

¡Ahora empieza la fiesta! Esta es la parte más importante de la aplicación, por lo que no es bueno escatimar esfuerzos y mucho menos la creatividad.

Para empezar, he creado un sub-menú dentro de la app, para organizar mejor cada tipo de contenido y actividad (Ej.: Ocio, cultura, eventos ...) que se mostrará en este submenú. Y dentro del menú original, se mostrará el resto de información (Ej.: Blog, favoritos, enviar sugerencias ...). 
 

Una vez que la estructura de aplicación está establecida, es hora de añadir el contenido dentro de cada sección. En el caso de la app Barcelona, me he centrado en la sección "Cultura", donde he colocado puntos relevantes a visitar dentro de la ciudad. 

Antes de empezar a añadir Puntos de interés, es interesante crear dento esta sección varias categorías para facilitar la navegación de los usuarios dentro de la aplicación y evitar la creación de muchas secciones. Este es un paso muy importante para ofrecer una buena experiencia de usurario, más clara, intuitiva y organizada. 

Una vez que las categorías predefinidas estén listas, podemos empezar a añadir puntos en el mapa, el contenido de la sección.

Puedes ajustar los detalles específicos en cada uno de los puntos (Ej.: Información, horarios de apertura, historia ...), añadir imágenes, botones de acción (teléfono y llamada), página web, etc.

Además, debes elegir la categoría a la que pertenece cada uno de los punto, en el caso de la imagen de muestra, la Fundación Joan Miró aparecerá en la categoría general y "Museos". Seguidamente, se puede ajustar el diseño.
 

No hay límite para el número de puntos de interés que quieras añadir en el mapa. Por lo que puedes crear tantos puntos de interés como desees dentro de tu proyecto. 

La creación de las categorías se puede realizar en diferentes secciones (artículos, videos ...) y es una herramienta muy eficaz para facilitar el uso la aplicación. En el caso de la sección de Gastronomía, por ejemplo, sería interesante crear categorías según el tipo de cocina (italiano, japonés, natural, pizzería ...) para mantener toda la información en una sola sección, y manteniendo la posibilidad de filtrar el contenido.

Para otras secciones es muy similar. Si el contenido se crea con una sección CMS, todo se puede hacer desde el back office de GoodBarber, desde la redacción de artículos para la creación de eventos hasta la subida de imágenes.

Si decides importar el contenido de fuentes externas (Wordpress, Facebook, Flicker ...), configurar la sección que es bastante simple - y si necesitas ayuda, siempre puedes revisar nuestros tutoriales o contactar con el soporte.

Atención: el límite de secciones (incluyendo sub-secciones) que puedes añadir en tu app es 60. 

5. PANTALLA DE BIENVENIDA E ICONO DE LA APP

Después de hacer los ajustes del diseño y entrar en el contenido, es el momento de hacer los ajustes finales ¡para el lanzamiento tan esperando en las tiendas de aplicaciones!

En el menú "APP" del back office, los pasos 6 y 7 están relacionados con la pantalla de bienvenida  (primera imagen que aparece cuando el usuario abre la aplicación y carga la información) y el Icono (se mostrará en las tiendas, en las notificaciones push y en la pantalla de inicio de los  usuarios).

En este punto es importante recordar que es necesario cargar imágenes específicas para los diferentes tipos de dispositivos y sistemas operativos, de ese modo se asegura una buena resolución y calidad de imagen de la aplicación se abra desde donde se abra.

Con Canva de nuevo, he creado el fondo de las pantallas de bienvenida de la app, para ello he utilizado la imagen de fondo anterior. Pero para acabar el diseño, he utilizado el asistente de diseño de GoodBarber, que me ha permitido darle los últimos toques a la pantalla. 

Para los iconos, también es necesaria la creación de imágenes con diferentes dimensiones, ya que serán utilizadas en varios casos (App Store / Pantalla de inicio/Push). Además, las dimensiones también variarán de acuerdo con el sistema operativo.

El campo que aparece debajo de la vista previa del icono, es el nombre de la aplicación que aparecerá en el menú de inicio de los usuarios de la app. En el caso de nuestro ejemplo será: Barcelona.

¡Hecho! Siguiendo estos pasos tu aplicación para promover tu ciudad o guía turística estará lista para ser todo un éxito.

Además, tenemos tutoriales que te ayudarán a enviar tu app a las tiendas de aplicaciones, tanto en Google Play Store como en el App Store. Puedes encontrar todo este material en la ayuda online que se encuentra en tu back office. 
Como crear una app turística de tu ciudad

Si te gusta lo que ves, no pierdas el tiempo y la oportunidad de crear tu app. Escucha este episodio con un experto de la geolocalización y usuario de GoodBarber ⬇️

Push Your App Podcast



Descubre otras Beautiful Apps creadas para encantar a los viajeros. 

Como crear una app turística de tu ciudad

Como crear una app turística de tu ciudad

Como crear una app turística de tu ciudad





Facebook
Twitter
Pinterest
Google+
Instagram


Apps fo


Subscríbete a nuestra newsletter

Para tener tu app siempre a punto




Para estar al día con las últimas novedades, escanea el código QR y descárgate la App GoodBarber News

Disponible en iOS & Android