BA Apps


Este sitio funciona como guía básica para que tu app forme parte de la familia de BA. Vas a encontrar los elementos necesarios para poder diseñar tu aplicación.

Actualmente versión 1.0

Formar parte de la familia de BA



(+) Importante

Todas las apps deben respetar los puntos mencionados en este checklist para formar parte de la familia BA. Si tu aplicación no utiliza alguna de las formas de header y footer provistas o no responde a los requerimientos básicos y obligatorios de tipografía y color, realizá los ajustes correspondientes para poder llevar a cabo la revisión solicitada.

¿Tenés una idea para un sitio nuevo dentro de Buenos Aires o ya lo tenés armado y necesitas una revisión? Te proponemos esta guía con los lineamientos básicos que deben estar contemplados en el diseño de tu página para que forme parte de la familia de los sitios de Buenos Aires.

Tener en cuenta estos estilos y elementos mínimos va a agilizar tu proceso de trabajo y la revisión por parte de la Dirección General de Gobierno Digital, parte de la Subsecretaría de Ciudad Inteligente.

¿Qué lineamientos debe respetar mi app para pertenecer a la familia de aplicaciones de Buenos Aires?


Fuentes y usos tipográficos

Todas las apps de Buenos Aires utilizan dos familias tipográficas: Roboto y San Francisco, cada una con sus usos.


Roboto

Se usa para aplicaciones con sistema operativo Android. Para ver tamaños y usos de variable, podés visitar este link


San Francisco

Se usa para aplicaciones con sistema operativo iOS. Para ver tamaños y usos de variable, podés visitar este link

Paleta cromática

BA apps dispone de una amplia paleta en dos versiones, una principal y una ampliada que recomendamos utilizar sólo en casos necesarios.
Cabe recordar que el amarillo (#fdd306) y el celeste (#19c3e3) son los colores marca, por lo que su presencia en la aplicación son importantes para construir su identidad y su pertenencia a la familia de sitios de Buenos Aires.

Colores claros

#e76056

#f3a32d

#fcda59

#2ebc98

#99c25f

#19c3e3

#0389d1

#3e4f5e

#9d6db6

#f562a2

Colores oscuros

#e74c3c

#f39c12

#fdd306

#18b596

#88bf48

#00b3e3

#037dbf

#34485e

#9b59b6

#f54789

Grises

#1d1c1a

#333

#717170

#a6a4a4

#c5c3c2

#e5e5e5

#f3f0ed

#f5f5f5


Paleta iOS

#007aff

#ff3b30

Paleta Android

#009688

#F44336

Descargas disponibles

Descargá la paleta cromática en formato .ase para editar tus archivos en Adobe Illustrator y en .css para tu hoja de estilos link

Header institucional

Cada app debe utilizar, según corresponda, uno de los siguientes headers en los cuales la marca de Buenos Aires, la marca secundaria (la de tu sitio) y los links tienen un lugar predeterminado y responde a estilos correspondientes a la identidad de Buenos Aires y Bastrap.

Header Android
Última actualización Enero de 2018
Header iOS
Última actualización Enero de 2018



Cuando la marca lo requiera y sea necesario agregar un color en el header este lo hará formando un gradient con el amarillo (#fdd306)


Descargas disponibles

El header para Android y para iOS se encuentran disponibles en este link .
Están en formato Illustrator y Sketch.

Iconos

Se recomienda utilizar los iconos disponibles en los Lineamientos de Material y iOS , en caso de no contar con los necesarios, diseñar siguiendo los criterios estéticos de la propuesta.

Fotografías / Ilustraciones

Las imágenes deben ser de producción propia, sea por el área encargada del proyecto o por el área de banco de imágenes de gobierno (en este caso podemos hacer el pedido de imágenes, aunque puede demorar hasta un mes).

Se busca no utilizar imágenes de sitios de stock porque se corren ciertos riesgos:
• que las imágenes no responden al clima estético comunicado institucionalmente,
• que se despeguen de la gráfica institucional,
• que no estén diseñadas para comunicar al público al cual nos dirigimos: los vecinos de la Ciudad de Buenos Aires.

Introducción



Antes de comenzar el proceso de diseño de tu app o necesitar una revisión por parte de la Dirección General de Gobierno Digital y Sensorización te recomendamos leer las distintas secciones de estos lineamientos donde vas a encontrar, entre otras cosas, todas las herramientas para diseñar y maquetar tu aplicación.

Recomendamos tener presentes los lineamientos de Material Design y iOS .

Light Design



Light design vs Dark design.

¿Porqué a la hora de diseñar una app elegimos un estilo antes que el otro?
Las asociaciones de colores oscuros y claros pueden crear sentimientos inmediatos en el usuario. Los colores claros crean una sensación de más espacios y hace al contenido mucho más legible.

Recursos


Te ofrecemos las principales herramientas y recursos a tener en cuenta al momento de diseñar e implementar tu aplicación.

Componentes



Elementos combinados con funcionones especiales, de Bootstrap y exclusivos.

Tab Bars

Los tab bars funcionan como organizadores de contenido. En Android se muestran en la parte superior de la app, mientras que en iOS aparecen en la parte inferior.

Tab bars Android
Tab bars iOS

Toolbars

En Android, los toolbars se muestran en la parte superior de la pantalla y un paso por encima del contenido que estan mostrando.

En iOS, en cambio, se muestran en la parte inferior de la pantalla y contienen botones para realizar acciones relevantes a la pantalla que estamos viendo.

Toolbar Android
Toolbar iOS

Botones y Alertas

Proporcionan feedback actualizado sobre el progreso de un flujo de trabajo o acción con barras de progreso simples pero flexibles.

Botones Android

Para ver más estados y comportamientos podes visitar este link

Botones iOS

Para ver más estados y comportamientos podes visitar este link

Alerta Android
Alerta iOS

Selectores

Estos selectores permiten al usuario elegir diferentes opciones. Existen tres tipos de selectores para Android

Selectores Android


Para ver más estados y comportamientos visitar este link

Selectores iOS

Para ver más estados y comportamientos visitar este link

Cards

Una tarjeta sirve como punto de entrada a una información mucho más detallada. Pueden contener imágenes, textos y links.

Cards Android


Para ver más estados y comportamientos visitar este link

Cards iOS

Formularios

Una tarjeta sirve como punto de entrada a una información mucho más detallada. Pueden contener imágenes, textos y links.

Formularios Android


Para ver más estados y comportamientos visitar este link

Formularios iOS

Para ver más estados y comportamientos visitar este link