Manual de marcas. software. v1.3

Transcripción

1 Manual de marcas software v1.3

2 INDICE 2 Logotipo Marca Principal: 04 Variables de posición 04 Grilla de construcción 05 Área de resguardo 06 Submarcas: 07 Construcción 08 Variables de posición 09 Reducciones 11 Paleta cromática 13 Prohibiciones 14 Aplicaciones y tendencias 2017: Uso de paleta cromática, tramas y teturas, iconografía, imágenes, tipografía, botones, dispositivos, etc. 18

3 INDICE 3 A 31

4 logotipo 4 MARCA PRINCIPAL Variables 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 conteto en favor a una mayor legibilidad. 1/2 software software 1/2 1/2

5 logotipo 5 MARCA PRINCIPAL Grilla de construcción 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 jerarquías y niveles de lectura. La palabra Tango sera la de mayor jerarquía. Software llave la tipografía Chalet Paris nineteen sity.

6 logotipo 6 MARCA PRINCIPAL Área de resguardo software Área mínima Área recomendada 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. 1/2

7 SUBMARCAS 7 CONSTRUCCIÓN Primer nivel gestión restô factura estudios contables punto de venta 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 a). 1/2

8 SUBMARCAS 8 CONSTRUCCIÓN Primer y segundo nivel (de una o dos palabras) 1/2 Se definió por establecer un tamaño para las submarcas de nombre corto y largo (etendido 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. 1/2

9 SUBMARCAS 9 VARIABLES DE POSICIÓN Primer y segundo nivel university 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, Tango net, etc.) 1/2

10 SUBMARCAS 10 VARIABLES DE POSICIÓN Segundo nivel nube nube monitoreo 1/2 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 a). 1/2

11 REDUCCIONES 11 MARCA PRINCIPAL Y SUBMARCAS Digital Impresa software 68p 55p 20mm 14mm La aplicación del simbolo de marca registrada ( ) no es obligatoria, sino que está sujeta a la estrategia de comunicación y el medio. don Nineteen Sity en vez de la Paris Nineteen Sity, ver a con las tipografías). En caso de tener que utilizar el logo en una tamaño que corra riesgo la legibilidad, se recomienda como única ecepción la utilización de una variante de mayor grosor para la palabra Software (Chalet Lon

12 PALETA CROMÁTICA 12 MARCA PRINCIPAL Institucional PANTONE Black C PANTONE PANTONE COOL GRAY 11C C M Y K 0% 0% 0% 100% C M Y K 0% 0% 0% 0% C M Y K 62% 52% 46% 40% R G B R G B R G B Hea: # Hea: #FFFFFF Hea: # 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 submarcas únicamente en el caso que el conteto y contenido lo requiera.

13 PALETA CROMÁTICA 13 SUBMARCAS DE PRIMER NIVEL gestión restô factura estudios contables punto de venta PANTONE 2995 C PANTONE 186 C 1 PANTONE 541 C PANTONE 151 C PANTONE 361 C C M Y K 79% 8% 1% 0% C M Y K 0% 100% 81% 4% C M Y K 100% 75% 33% 21% C M Y K 0% 59% 94% 0% C M Y K 73% 0% 100% 0% R G B R G B R G B R G B R G B Hea: #00A8E1 Hea: #DD052B Hea: #003B71 Hea: #FF8300 Hea: #3FAE2A

14 PALETA CROMÁTICA 14 SUBMARCAS DE SEGUNDO NIVEL NEXO clientes reportes tablero ecommerce delivery auditoría update fichadas backup notificaciones cobranzas tiendas Cada aplicación 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.

15 PALETA CROMÁTICA 15 SUBMARCAS DE SEGUNDO NIVEL Se opta por colores neutros como el negro, blanco y gris (gris neutro y de tonalidad fríaazul), por ser de la paleta institucional. Puede usarse en positivo y en negativo. PANTONE PANTONE Black C PANTONE 5415 C PANTONE COOL GRAY 11 C CMYK: 0 / 0 / 0 / 0 CMYK: 0 / 0 / 0 / 100 CMYK: 66 / 42 / 36 / 6 CMYK: 62 / 52 / 46 / 40 RGB: 255 / 255 / 225 RGB: 0 / 0 / 0 RGB: 96 / 125 / 139 RGB: 85 / 86 / 90 Hea: #FFFFFF Hea: # Hea: #607D8B Hea: # zona soporte PANTONE 5415 C C M Y K 47% 59% 36% 6% R G B university PANTONE 5415 C C M Y K 66% 42% 36% 6% R G B Hea: #9575CD Hea: #607D8B

16 PROHIBICIONES 16 VARIABLES DE POSICIÓN 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º.

17 PROHIBICIONES 17 PALETA CROMÁTICA 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 etrema necesidad de legibilidad. En caso de necesitar mejorar la legibilidad por un fondo conflictivo (por su color, tetura, saturación, etc.) y que no pueda ser alterado, utilizar un leve 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.

18 Aplicaciones y tendencias 18 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, tanto 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 teto 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ô).

19 Aplicaciones y tendencias 19 TRAMAS Y TEXTURAS PARA LA VERSIÓN T17 (2017) Se permite el uso de iconografía lineal, simple y minimalista, con baja opacidad como tetura 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:

20 Aplicaciones y tendencias 20 TRAMAS Y TEXTURAS PARA LA VERSIÓN T17 (2017) Tango gestión y Tango estudios contables:

21 Aplicaciones y tendencias 21 TRAMAS Y TEXTURAS PARA LA VERSIÓN T17 (2017) Tango restô y Tango punto de venta:

22 Aplicaciones y tendencias 22 TRAMAS Y TEXTURAS PARA LA VERSIÓN T17 (2017) Tango y Tango university:

23 Aplicaciones y tendencias 23 TRAMAS Y TEXTURAS PARA LA VERSIÓN T17 (2017) Ejemplos de placas con trama:

24 Aplicaciones y tendencias 24 TRAMAS Y TEXTURAS PARA LA VERSIÓN T16 (2016) El uso de formas geométricas acompaña perfectamente al logotipo, en especial figuras delicadamente curvas. Se promueve el uso de formas tales como cuadrados, rectángulos, rombos, círculos y líneas, las cuales pueden dar origen a tramas y teturas que, sin opacar, den un conteto armónico al sistema de marcas. El estilo que se busca inspirar es el del minimalismo, la sobriedad, la seguridad, situándola en un ámbito contemporáneo actual acorde al rubro de la tecnología. También se permite el uso de iconografía con baja opacidad como tetura, como refuerzo informativo y conceptual. Para la anterior versión, T16, se utilizaron las siguientes placas:

25 Aplicaciones y tendencias 25 ICONOGRAFIA 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 icono blanco, pero puede utilizarse perfectamente en positivo (fondo claro con el icono en color).

26 Aplicaciones y tendencias 26 IMAGENES Las imágenes y capturas de pantalla del software son llamativas, impactantes 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únmente llamado paralla ).

27 Aplicaciones y tendencias 27 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áficos (bold, medium y light) se aconseja, para marcar jerarquías e interés visual. Para tetos 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 variantes 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): Roboto, Myriad Pro, Helvetica.

28 Aplicaciones y tendencias 28 TIPOGRAFIA Muestras: CHALET (PARIS NINETEEN SIXTY) ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwyz Á É Í Ó Ú Ô á é í ó ú ô Variables: Chalet London Nineteen sity OPEN SANS (Regular) ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwyz Á É Í Ó Ú Ô á é í ó ú ô Variables: Light, Semibold, bold. SEGOE UI (Regular) ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwyz Á É Í Ó Ú Ô á é í ó ú ô Variables: Light, Semibold, Bold 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 elemento. No se aconseja usarla en demasía, para que los logos no pierdan jerarquía en comparación.

29 Aplicaciones y tendencias 29 BOTONES Se utilizarán botones rectangulares, con bordes suavemente redondeados, del color pleno del producto en cuestión (o dentro de la gama). El teto 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

30 Aplicaciones y tendencias 30 DISPOSITIVOS 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). Samsung: Tablets, Galay S6, S7. Las imagenes de los dispositvos no poseen marcas ni logos de las empresas.

31 Aplicaciones y tendencias 31 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 a) y contempla el uso de los colores neutros institucionales (ver paleta cromática de marca principal).

32 ANEXO 32 Mapa de jerarquías software NIVEL 2 Servicios y aplicaciones complementarias NIVEL 1 Productos con identidad propia clientes ecommerce delivery reportes tablero fichadas backup update notificaciones tiendas cobranzas portal factura gestión estudios contables punto de venta restô factura

33 ANEXO 33 Paleta de colores estilo Material Design 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.

34 Ejemplos de iconos estilo Metro (muestras de Font Awesome) 34