Manual de marcas
software
v1.4
2
Logotipo
Marca Principal:
Variables de posición
Grilla de construcción
Área de resguardo
Submarcas:
Construcción
Variables de posición
Reducciones
Paleta cromática
Prohibiciones
Aplicaciones y tendencias 2017: Uso de paleta cromática, tramas y texturas, iconografía, imágenes, tipografía, botones, dispositivos, etc.
INDICE
04
04
05
06
07
08
09
14
15
19
21
3
Anexo 33
INDICE
4
software
LOGOTIPO
software
MARCA PRINCIPALVariables de posición
Referencias modulares:Se tomó como módulo base a la letra “O” del logo, por su sencillez geométrica y practicidad para fraccionarse. La distancia entre ambas palabras dependerá del contexto en favor a una mayor legibilidad.
software
software
x2/3x
2/3x
2/3x
1/2x
1/2x
1/2x
x
x
5
El módulo base para la construcción del logotipo origina en el círculo de la letra O mayúscula. Ese rasgo se tomó como referencia para generar el juego de proporciones. Esta relación modular ayuda a establecer jer-arquías y niveles de lectura. La palabra “Tango” sera la de mayor jerarquía. “Software” llave la tipografía Chalet Paris nineteen sixty.
LOGOTIPO
MARCA PRINCIPALGrilla de construcción
6
Continuando con la referencia modular, se utiliza para establecer el área de reguardo de otros elementos, como por ejemplo, otros logos que lo rodeen.El espacio mínimo es la mitad de un módulo, mientras que el ideal recomendado es de un módulo entero.
Área mínima
Área recomendada
software
LOGOTIPO
MARCA PRINCIPALÁrea de resguardo
x1/2x
7
x1/2x 2/3x
La jerarquía es dada por la palabra “Tango”, del cual salen submarcas de ahora en más llamadas “De primer nivel” (ver mapa de jerarquías en el anexo).
SUBMARCAS
CONSTRUCCIÓNPrimer nivel
gestión restô factura estudioscontables
puntode venta
8SUBMARCAS
CONSTRUCCIÓNPrimer y segundo nivel (de una o dos palabras)
Se definió por establecer un tamaño para las submarcas de nombre corto y largo (extendido a dos renglones).El logo de dos renglones establece la norma: Su punto medio indica el punto intermedio de los logos de una sola palabra.La distancia entre la palabra del producto y de “TANGO” puede ser de 1 módulo o de 2/3 del mismo.
x
x
x
x
x
1/2x
2/3x
2/3x
2/3x2/3x
2/3x
x2/3x1/2x
9
Se denominarán submarcas de segundo nivel a aquellas aplicaciones o servicios complementarios de las marcas de primer nivel.La siguiente proporción aplica tanto a submarcas de primer (Tango Gestión, Restô, Estudios Contables, Punto de Venta, factura) y de segundo nivel (Tango nexo, Tango net, etc.)
SUBMARCAS
VARIABLES DE POSICIÓNPrimer y segundo nivel
x2/3x1/2x
x
x
x
2/3x
2/3x
2/3x
university
x
2/3x
x
10
nubemonitoreo
La jerarquía es dada por la palabra “Tango”, del cual salen submarcas de ahora en más llamadas “De primer nivel” (ver mapa de jerarquías en el anexo).
SUBMARCAS
VARIABLES DE POSICIÓNSegundo nivel
nubenube
monitoreo
x
x
1/2x
2/3x
2/3x
2/3x
2/3x
2/3x
x
2/3x
x2/3x1/2x
11SUBMARCAS: CENTRO DE VENTAS Y SERVICIOS
VARIANTES DE COLORVersión en negro y en blanco (negativo).Debe incluirse el siguiente texto legal, con una referencia o asterisco: “TANGO software es marca registrada por Axoft Argentina S.A.”
12SUBMARCAS: CENTRO DE VENTAS Y SERVICIOS
FIRMA DE CORREOS ELECTRÓNICOSEjemplo de firma con logo propio de distribuidor + Firma de Tango Software
SU LOGO
13SUBMARCAS: CENTRO DE VENTAS Y SERVICIOS
EJEMPLO DE USOEJemplo de uso sobre fondos complejos: utilizar una placa blanca o negra con una opacidad no menor a 75% para separar el logo de fondos complejos como fotografías o de colores similares. Ver página con prohibiciones.
14REDUCCIONES
MARCA PRINCIPAL Y SUBMARCASDigital Impresa
La aplicación del simbolo de marca registrada (“®“) no es obligatoria, sino que está sujeta a la estrategia de comunicación y el medio.
En caso de tener que utilizar el logo en una tamaño que corra riesgo la legibilidad, se recomienda como única excepción la utilización de una variante de mayor grosor para la palabra “Software” (Chalet Lon-
68px 20mm55px 14mm
software
don Nineteen Sixty en vez de la Paris Nineteen Sixty, ver anexo con las tipografías).
207px / 73 cm
15PALETA CROMÁTICA
MARCA PRINCIPALInstitucional
PANTONE Black C PANTONE - PANTONE COOL GRAY 11C
Para los colores institucionales de la marca principal se aconseja utilizar colores neutros, como el negro, blanco y gris oscuro.Se acepta utilizar un color negro oscuro y saturado si se requiere lograr un
mayor contraste. También se acepta utilizar el color de uno de las submar-cas únicamente en el caso que el contexto y contenido lo requiera.
Hexa: #000000 Hexa: #FFFFFF Hexa: #555559
C M Y K62% 52% 46% 40%
C M Y K0% 0% 0% 0%
C M Y K0% 0% 0% 100%
R G B85 86 90
R G B255 255 225
R G B0 0 0
16PALETA CROMÁTICA
SUBMARCAS DE PRIMER NIVEL
PANTONE 2995 C
Hexa: #00A8E1
C M Y K79% 8% 1% 0%
R G B0 168 225
PANTONE 151 C
Hexa: #FF8300
C M Y K0% 59% 94% 0%
R G B255 131 0
PANTONE 361 C
Hexa: #3FAE2A
C M Y K73% 0% 100% 0%
R G B63 174 42
PANTONE 186 C 1
Hexa: #DD052B
C M Y K0% 100% 81% 4%
R G B221 5 43
PANTONE 541 C
Hexa: #003B71
C M Y K100% 75% 33% 21%
R G B0 59 113
gestión restô factura estudioscontables
puntode venta
17PALETA CROMÁTICA
SUBMARCAS DE SEGUNDO NIVEL - NEXO
Cada aplicación nexo tiene un color que lo identifica. En caso de usarse vinculado y relacionado a un producto tierra (Gestión, Restô, Punto de venta o Estudios contables), llevará el color de dicho producto en cuestión y no de la aplicación.
tablero
backup
reportesclientes
updateauditoría fichadas notificaciones
cobranzas tiendas
18PALETA CROMÁTICA
SUBMARCAS DE SEGUNDO NIVEL
Se opta por colores neutros como el negro, blanco y gris (gris neutro y de tonalidad fría-azul), por ser de la paleta institucional. Puede usarse en positi-vo y en negativo.
PANTONE -
CMYK: 0 / 0 / 0 / 0
RGB: 255 / 255 / 225
Hexa: #FFFFFF
PANTONE Black C
CMYK: 0 / 0 / 0 / 100
RGB: 0 / 0 / 0
Hexa: #000000
PANTONE 5415 C
CMYK: 66 / 42 / 36 / 6
RGB: 96 / 125 / 139
Hexa: #607D8B
PANTONE COOL GRAY 11 C
CMYK: 62 / 52 / 46 / 40
RGB: 85 / 86 / 90
Hexa: #555559
PANTONE 5415 CPANTONE 5415 C
Hexa: #607D8BHexa: #9575CD
C M Y K66% 42% 36% 6%
C M Y K47% 59% 36% 6%
R G B96 125 139
R G B149 117 205
universityzonasoporte
19
No rotar, no agrandar sin mantentener la escala, no utilizar variantes del logo en outline, no alterar la ubicación de los elementos, no modificar la tipografía.En el caso de ser necesario (por ejemplo, para banners impresos o señalética), se podrá rotar la tipografía completamente en 90º.
VARIABLES DE POSICIÓN
PROHIBICIONES
20
No utilizar colores de bajo contraste entre figura y fondo, no modificar los colores de los productos, no utilizar fondos o sombras con degradados.Los degradados deberán ser sutiles y mostrando un cambio de tonalidad, o por casos de extrema necesidad de legibilidad.En caso de necesitar mejorar la legibilidad por un fondo conflictivo (por su color, textura, saturación, etc.) y que no pueda ser alterado, utilizar un leve
PROHIBICIONES
PALETA CROMÁTICA
degradado de negro a transparente lineal en el lado donde se encuentra la zona conflictiva, y/o una leve sombra (de tamaño pequeño, opacidad baja y corta distancia). Ver aclaración y ejemplos sobre su uso en Aplicaciones y tendencias, Paleta cromática.
21APLICACIONES Y TENDENCIAS
PALETA CROMÁTICA
Se utilizarán colores llamativos, plenos en su gran mayoría, siguiendo el estilo Material propuesto por Google. Los fondos serán blancos y grises claros, tan-to como de colores para separar e identificar secciones. Se restringe el uso de degradados y sombras, salvo que sea de gran necesitad por una cuestión de legibilidad sobre imágenes conflictivas (Ej.: Slider de la web de Tango
restô, el cual lleva sombra en el texto y un degradado lineal para separarlo de la imagen de fondo). También para destacar elementos estableciendo una leve perspectiva con el uso de sombras muy suaves y de bajo contraste (Ej: tabla de planes de la web de Tango Restô).
22APLICACIONES Y TENDENCIAS
TRAMAS Y TEXTURAS PARA LA VERSIÓN T17 Y T18 (2017/2018)
Se permite el uso de iconografía lineal, simple y minimalista, con baja opacidad como textura o bajo contraste, como refuerzo informativo y conceptual. Se aconseja utilizar iconografía de estilo lineal, que se asemeje al estilo “pure” que lleva el software.A continuación se ejemplifica con la trama diseñada para cada producto.
Tango Software:
23APLICACIONES Y TENDENCIAS
TRAMAS Y TEXTURAS PARA LA VERSIÓN T17 Y T18 (2017/2018)
Tango gestión y Tango estudios contables:
24APLICACIONES Y TENDENCIAS
TRAMAS Y TEXTURAS PARA LA VERSIÓN T17 Y T18 (2017/2018)
Tango restô y Tango punto de venta:
25APLICACIONES Y TENDENCIAS
TRAMAS Y TEXTURAS PARA LA VERSIÓN T17 Y T18 (2017/2018)
Tango nexo y Tango university:
26
La iconografía utilizada es de estilo “Metro”: Formas simples, muchas veces conceptuales y simples. Monocromáticos, planos, lineales y con plenos de color llamativos. De uso mayormemente en negativo (fondo de color e
APLICACIONES Y TENDENCIAS
ICONOGRAFIA
icono blanco, pero puede utilizarse perfectamente en positivo (fondo claro con el icono en color).
27APLICACIONES Y TENDENCIAS
IMAGENES
Las imágenes y capturas de pantalla del software son llamativas, impac-tantes e informativas, y se mostrarán en el mayor tamaño que el medio o la calidad disponible lo permita, dentro de un dispositivo compatible,
escalado al corte o con un efecto de fondo con perspectiva en 3D (común-mente llamado “parallax”).
28APLICACIONES Y TENDENCIAS
TIPOGRAFIA
La tipografía será delicada y contrastante, haciendo uso de la tipología sans serif. El uso de titulares en mayúsculas y/o cambios de pesos tipográf-icos (bold, medium y light) se aconseja, para marcar jerarquías e interés visual. Para textos generales se usará, por ejemplo, un gris medio (#333), un gris oscuro (#999) o negro en caso de necesitar mayor contraste. Para destacar títulos, subtítulos, epígrafes y bajadas, etc., se podrán usar vari-
antes dentro de la gama del color del producto principal del que se hace mención.
Tipografías utilizadas: Open Sans, Segoe UI.Otras tipografías recomendadas (y aceptadas si el medio lo requiere): Ro-boto, Myriad Pro, Helvetica.
29APLICACIONES Y TENDENCIAS
TIPOGRAFIA
CHALET (PARIS NINETEEN SIXTY)ABCDEFGHIJKLMNÑOPQRSTUVWXYZabcdefghijklmnñopqrstuvwxyzÁ É Í Ó Ú Ô á é í ó ú ô1234567890 ., - @ ¿? ¡!
Variables: Chalet London Nineteen sixty
OPEN SANS (Regular)ABCDEFGHIJKLMNÑOPQRSTUVWXYZabcdefghijklmnñopqrstuvwxyzÁ É Í Ó Ú Ô á é í ó ú ô1234567890 ., - @ ¿? ¡!
Variables: Light, Semibold, bold.
SEGOE UI (Regular)ABCDEFGHIJKLMNÑOPQRSTUVWXYZabcdefghijklmnñopqrstuvwxyzÁ É Í Ó Ú Ô á é í ó ú ô1234567890 ., - @ ¿? ¡!
Variables: Light, Semibold, Bold
Muestras:
Se opta por tipografías de tipo sans serif tanto para producciones digitales como impresas, por ejemplo Open Sans, Segoe Ui, Roboto, Chalet, etc. En el caso de la últma mencionada, debe utilizarse con discreción: se empleará unicamente para titulares o para destacar un determinado ele-mento. No se aconseja usarla en demasía, para que los logos no pierdan jerarquía en comparación.
30APLICACIONES Y TENDENCIAS
BOTONES
Se utilizarán botones rectangulares, con bordes suavemente redondeados, del color pleno del producto en cuestión (o dentro de la gama). El texto en blanco (en mayúsculas, siempre que sea posible). Otra opción de botones
son los circulares. Todos poseen un efecto en el OnClick llamado Waves.
BOTÓN
31
Se intentará utilizar modelos de dispositivos tecnológicos actuales, dentro de lo posible, priorizando que sus formas sean sobrias (blanco, negro o plateado). Las marcas predilectas son:Apple: iMac, Macbook, Macbook Pro para software de primer nivel, iPad y Iphone para aplicaciones de segundo nivel por una limitación técnica).
APLICACIONES Y TENDENCIAS
DISPOSITIVOS
Samsung: Tablets, Galaxy S6, S7.Las imagenes de los dispositvos no poseen marcas ni logos de las em-presas.
32APLICACIONES Y TENDENCIAS
UNIVERSITY
Tango university (cursos y capacitaciones) utiliza su propio color (ver Paleta Cromática de submarcas, y Paleta cromática estilo Material Design en el anexo) y contempla el uso de los colores neutros institucionales (ver paleta
cromática de marca principal).
33ANEXO
Mapa de jerarquías
34
Referencia de colores del framework Materialize (basado en el diseño Material de Google).
Los mismos no suplantan a los colores propios de cada marca y submarca.
ANEXO
Paleta de colores estilo Material Design
35Ejemplos de iconos estilo Metro (muestras de Font Awesome)