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)