Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que...

37
Revisado em 04 de abril de 2018 BEM CARE Sistema de Identidade Visual

Transcript of Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que...

Page 1: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

Revisado em 04 de abril de 2018

BEM CARESistema de Identidade Visual

Page 2: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

3

Criação de sistema de identidade visual para “aplicativo que utiliza tecnologias avançadas - como inteligência artificial e geolocalização - para auxiliar a população brasileira à cuidar de sua saúde de forma rápida, prática e desburocratizada.” Trata-se de um novo negócio com sede em São Paulo, tendo a frente a mesma equipe responsável pela Proradis: um sistema de soluções para gestão de medicina diagnóstica por imagem, consolidado no mercado.

O produto irá se chamar Bem Care, Bem – “de modo saudável; que apresenta uma boa saúde: o paciente está bem”, “benefícios”; Care – palavra do inglês que significa cuidado, atenção, carinho. Foi escolhido para representar um serviço que possui como principal objetivo o cuidado com a saúde. Além de ser um nome forte, de fácil compreensão e possuir disponibilidade do domínio bem.care (já registrado).

“Com o Bem Care, usuários acessam uma extensa rede de benefícios em saúde de forma simplificada, através de uma interface única que preza pela experiência de uso e que não obriga o usuário a possuir dezenas de aplicativos para cuidar de sua saúde. Experiência tudo-em-um, sem curva de aprendizado. É instalar e usar.”

Para a criação deste trabalho, foi tomado como inspiração o caráter multidisciplinar do sistema que abrange uma ampla rede de serviços de saúde – da busca, agendamento e pagamento de procedimentos em clínicas e laboratórios à descontos em medicamentos e orientações sobre alimentação, atividades físicas. A ideia foi criar uma linguagem visual através de elementos que transmitam a sensação de “qualidade de vida” de forma ampla. Remetendo a felicidade e bem-estar em contraponto à uma obordagem mais fria característica de serviços médicos.

Além disso, a comunicação deve ser clara e objetiva, transmitindo a ideia de confiança, praticidade e simplicidade de uso.

Briefing

Page 3: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

IDENTIDADE VISUALBEM CARE

1. Logotipo

2. Grids

3. Assinaturas

4. Tipografias

5. Cores

6. Contraste

7. Redução

8. Ícones

Page 4: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

5

LogotipoDisposição vertical

Page 5: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

6

LogotipoDisposição vertical

Page 6: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

7

Logotipo

2x 2x 2x 2x3x 3x 2x

Kerning

Page 7: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

8

LogotipoDisposição horizontal

Page 8: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

9

LogotipoDisposição vertical

Page 9: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

10

LogotipoGrid vertical

Page 10: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

11

ÍconeAPP

Page 11: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

12

ÍconeGrid

Page 12: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

13

ÍconeAPP

Page 13: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

14

ÍconeFavicon

http://www.bem.care/

para você para sua empresa

Cuidamos bem de você. Sempre.Conheça o bem.care, o aplicativo que protege a sua saúde.

CONHEÇA NOSSOS PLANOS

* Simulação de interface

Page 14: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

15

TipografiaGilroy

Gilroy é a tipografia escolhida para compor todos os textos utilizados nas aplicações deste sistema de identidade visual. É uma fonte de estilo moderno, sem serifas e com traço geométrico. Foi construída em formato opentype e possui compatibilidade com diferentes plataformas e softwares. Inclui suporte extendido de idiomas, acentos, frações, tubulares, setas e ligaturas, permitindo a criação de layouts dinâmicos e com rítmo, de textos editoriais à sinalização informativa de espaços.

Para compra,clique aqui.

Page 15: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

16

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

TipografiaPesos

Gilroy Light

Gilroy Light Italic

Gilroy Medium

Gilroy Bold

Para compra,clique aqui.

Page 16: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

17

Ur audam aut aut labo. Min rem quiaere ptatur sit do-lorem endaecu ptatist qui imus eturi solore eos arum es conse ab is a digendel mi, sit harum iusamus, volorent apedi nobit, et estius.Itatur sita vollabo. Reprae pe volendigent volori ipsunt es-sum rem fugit perfero issum que omnima voloreped est quatem experro rionsed que doluptatet intiorepe por aut laut aceped qui optatem. Nemperum, sunt esequid en-imet odion conseni tassimus perovit alissit, nonet fuga. Tur, aut dolupta tionsed quatem

ipsam nullore mporior erem-possit everum, ut ad qua-tur? Taquiam as et dolorpo rerera corpor re, sinvellorem ipsam et, sit autem. Itas ant eossitat harum quias sum quis et, que atque imusaep tatus, voles doluptatem re-rumque nulparit accus mo-lenditaquo dererenda dolo occabo. Et por as maxime nonsequam cus eat od et prepudi sum sequis dipsunt.Pis rerunt ea volorer iberna-tium exceatate ommodi to-tae. Nam ipsame prepedit, consequ untion plibus pra venda veliquia con expel

iumquas nis derci illaborrum faccupidi ut am, am dolup-tati odi dolorem que pa sunt omnimus aliaept atenihicius eos duscit reicil ellab incilis rem escim faceptio iumetur, nonet volorio conectia ve-libus aut ulluptatio. Iduntur molor auditiis paribusdae est alissinctae velis quam invenis aborum atur, ut deni isciatur? Sed mintureicias voluptat eos et aliquia quis et, verchicatur? Otaquid iti-atem. Nem doloremquo be-rest, conseque prae aut dolecte mperum et rende-nem re latur sit, sumeSeque

Ti con nonsenda inimi, aspelici ven ecus. Harum se porum repudae cas dolent laudaere parum doloresecte omnimil enda comnimpossit liqui o ficta ernaturem arum autempoTem utem faccum quid escid qui nis sub

TipografiaPesos

Para compra,clique aqui.

Page 17: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

18

TipografiaVariação de pesos

Light ItalicLighT Medium BOLD

b b b bB B B B

Para compra,clique aqui.

Page 18: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

19

Pantone Pantone 280 C CMYK 100, 93, 34, 27sRGB 31, 41, 92Hex/HMTL #1F295C

Pantone Pantone 676 CCMYK 31, 100, 49, 16sRGB 156, 13, 79Hex/HMTL #9C0D4F

Pantone Cool Gray 3 CCMYK 0, 0, 0, 30sRGB 198, 198, 198Hex/HMTL #C6C6C6

Pantone Pantone 7687 CCMYK 100, 90, 13, 2sRGB 33, 61, 138Hex/HMTL #213D8A

Pantone Pantone 213 CCMYK 0, 96, 13, 0sRGB 252, 20, 130Hex/HMTL #FC1482

Pantone Cool Gray 1 CCMYK 0, 0, 0, 5sRGB 246, 246, 246Hex/HMTL #F6F6F6

Cores

Page 19: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

20

Page 20: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

21

sobre branco sobre preto

ContrasteLogotipo horizontal

Page 21: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

22

sobre branco sobre preto

ContrasteLogotipo vertical

Page 22: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

23

Utilize a escala abaixo para orientar a aplicação do

logotipo em tons de cinza.

ContrasteLogotipo horizontal

Page 23: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

24

Utilize a escala abaixo para orientar a aplicação do

logotipo em tons de cinza.

ContrasteLogotipo vertical

Page 24: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

25

Utilize a escala abaixo para orientar a aplicação do

logotipo sobre cores sólidas.

ContrasteSobre cores

Page 25: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

26

ReduçãoAs medidas apresentadas

nesta tabela devem orientar a redução mínima da marca tanto

durante a aplicação da marca, garantindo sua funcionalidade.

Digital: 50px Impressão: 2mm

Ícone

Digital: 80px Impressão: 7mm

Disposição vertical

Digital: 100px Impressão: 10mm

Disposição horizontal

Page 26: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

27

ÍconesGrid

Page 27: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

28

ÍconesExames

Mamografia

Page 28: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

29

ÍconesExames

Tomografia e Ressonância Densitometria óssea Mamografia Ultrassonografia Radiologia geral Radiologia odontológica

Exames laboratoriais Exames laboratoriais

Page 29: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

30

ÍconesConsultas

Nutricionista

Page 30: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

31

Ícones

Oftalmologista

Geriatra

Cardiologista

Ortopedista/traumatologista

Ginecologista/obstetra

Clínico Geral

Otorrinolaringologista

Homeopata

Dermatologista

Pediatra

Infectologista

Endocrinologista

Pneumologista

Neurologista

Fonoaudiologista

Psicólogo

Nutricionista

Gastroenterologista

Consultas

Page 31: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

32

ÍconesConsultas

Reumatologista UrologistaProctologista VascularPsiquiatra

Estética Odontológica

Page 32: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

33

ÍconesBenefícios

Concierge

Page 33: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

34

Ícones

Descontos Descontos Descontos Descontos Orientações de saúde Rede médica

Benefícios

Reembolso Reembolso Reembolso Concierge Assistência médica

Page 34: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

35

Notificações

ÍconesEstruturais

Page 35: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

36

Ícones

Dados pessoais

Ajustes/preferências

Senha

Ajuda

Senha

Sobre

Notificações

Termos de uso

Notificações

Meu Cartão

Sair

Minhas compras

Minha conta

Estruturais

Page 36: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso

© Todos os direitos reservados. Todas as aplicações da marca devem se restringir as orientações deste manual. Em caso de dúvidas, procure o responsável por este projeto de branding ou representantes da Bem Care.

O trabalho contido neste sistema de identidade visual não pode ser reproduzido sem autorização. Seu uso indevido implicará em sanções previstas pela legislação que protege os direitos autorais no Brasil.

IMPORTANTE

BRANDING ESTÚDIO DUNA / 2018. Designer responsável: Raimundo [email protected] duna.in

Page 37: Sistema de Identidade Visual · Criação de sistema de identidade visual para “aplicativo que ... praticidade e simplicidade de uso. Briefing. IDENTIDADE ... deste manual. Em caso