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 2018Header 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.
Componentes
Elementos combinados con funcionones especiales, de Bootstrap y exclusivos.
Header
Tanto para Android como para iOS, el header debe llevar siempre un borde amarillo (#fdd306) de 3px de alto.
Header Android
Header iOS
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
Cards
Una tarjeta sirve como punto de entrada a una información mucho más detallada. Pueden contener imágenes, textos y links.