Você está na página 1de 41

Livro da Marca

onde o seu projeto


encontra espaço
sumário

6 Sobre a marca 20 Aplicação sobre imagens


13 Assinaturas 21 Sistema de imagens
14 Versões em uma cor 22 Fotografia de espaços
15 Grid e proporções 24 Fotografia de pessoas
16 Redução máxima 26 Guia de estilos para interfaces
17 Restrições de uso 36 Papelaria institucional
18 Tipografias
19 Cores
Abrindo as portas para
todos os tipos de negócio
Em um mundo onde a informação Com a promessa de revolucionar a
flui cada vez mais rápido por meio experiência de locação de salas, escritórios,
da internet e dos smartphones, a auditórios e muito mais, da busca até
experiência na contratação de serviços o pagamento, o BookOffice conecta
já não é mais a mesma nos últimos anfitriões e convidados de forma
anos. As pessoas desejam agilidade simples e intuitiva, descomplicando todo
em suas rotinas e produtos digitais o processo em um só lugar. Assim, ele
nascem todos os dias com o objetivo de possibilita que locador e locatário foquem
estreitar contatos e quebrar barreiras. seu tempo e energia naquilo que realmente
importa: fazer suas ideias acontecerem.
Na locação de espaços corporativos,
isso não é diferente (e talvez, ainda mais Com a ambição de inovar e oferecer
importante). Com os novos modelos de experiências surpreendentes aos usuários
trabalho em constante transformação, do BookOffice, apresentamos, portanto, a
esse mercado tem a necessidade de palavra-chave que nos guiou através de
inovar para se adequar ao que os usuários toda a criação do produto: possibilitar.
exigem: flexibilidade e praticidade.

Isabela Morais
O BookOffice surge, então,
Lead Project Designer
determinado a surpreender o
Guidance
mercado de aluguéis corporativos.

6
Os pilares da construção
da marca e do produto
Conexão Realização

Conectar é ligar pontos. Pontos que antes Muitas vezes, a dependência de um espaço
estavam isolados por uma distância físico se torna uma barreira na hora de
aparentemente insuperável agora podem se unir, tirar ideias do papel. Agora, isso não é mais
formando uma relação que gera novos frutos. É um problema: qualquer ideia, projeto ou
este o objetivo do BookOffice: criar a conexão negócio poderá encontrar o seu lugar
entre espaços, pessoas, negócios, ideias. para ganhar vida e se tornar realidade.

Flexibilidade Experiência

A liberdade e a autonomia estão no poder de Chegaram ao fim a burocracia e a morosidade


escolha mas, para escolher, é necessário que na locação de espaços corporativos. Em vez de
várias opções estejam disponíveis. Por isso, fazer diversas cotações e passar horas ao telefone,
um dos pilares do BookOffice é a variedade anfitrião e convidado poderão agora interagir
de espaços em um só lugar, de forma que o através de uma interface fluida e intuitiva,
usuário tenha a flexibilidade para decidir aquele vivendo uma experiência ágil e confortável
que melhor se encaixa às suas necessidades. do início ao fim do processo de locação.

7
Contato Praticidade
Tecnologia Facilidade
Relacionamento Agilidade
Compartilhamento Eficiência
Aproximação Oportunidade

Conexão Realização

Flexibilidade Experiência
Versatilidade Novidade
Criatividade Confiabilidade
Dinamismo Modernidade
Autonomia Segurança
Escolha Centralização

8
oportunidades,
lugar, espaço, negócios, sonhos,
localização possibilidades

a experiência
completa de
Onde o seu projeto encontra espaço “achar lugar”
para os negócios
acontecerem

conexão com metáfora com modelo de negócios,


objetivos pessoais verbo de ação, realização

9
O espaço
Não há uma clara definição dos
limites do espaço em relação à Terra,
ou mesmo de sua extensão.

O tamanho do Universo é um pouco difícil


de definir. De acordo com uma definição
restritiva, o Universo é tudo dentro do
nosso espaço-tempo que poderia ter uma
chance de interagir conosco e vice-versa.

Um conceito, várias possibilidades.

10
Construção o espaço o local a ideia

geométrica

a conversa o destino

11
Guia de uso da
identidade visual
Branco Cinza claro

Assinaturas Marinho Salmão

A marca deve ser aplicada


preferencialmente em duas
cores, quando não houver
prejuízo de contraste entre os
elementos do logotipo e o plano
de fundo. Ao lado, seguem as
suas aplicações ideais sobre
as cores institucionais.
Tons de cinza positiva Tons de cinza negativa

Versões em
uma cor
Quando necessário, poderão ser
utilizadas as versões em uma Monocromática negativa Monocromática positiva
cor do logotipo, dependendo do
contexto de aplicação e do plano
de fundo onde ele será inserido.
A versão em tons de cinza
consiste na aplicação de uma
única cor chapada sobre todo o
desenho da marca e opacidade
de 55% no desenho da porta. Já
a versão monocromática não
tem distinção de transparência
entre os elementos.

14
Grid e
proporções

Construção do grid
3x x

É expressamente proibido o
3x
redesenho deste logotipo. As
proporções e a estrutura do
desenho original, conforme grid
demonstrado ao lado, devem ser
seguidas em todas as aplicações.

Área de segurança

A área mínima de segurança para


aplicação deste logotipo corresponde
à distância de “3x”, sendo “x” a largura
da haste da letra B - assim como
demarcado na representação ao lado.

15
60 px

Redução
máxima
15 px
Para evitar a distorção e a perda da
qualidade dos elementos visuais
da marca, ela não deverá ser
aplicada em tamanhos menores
em relação aos definidos ao lado.

16
Não altere a proporção entre os elementos Não incline o logotipo

Restrições
Não modifique a posição dos elementos Não utilize a marca sem o símbolo

de uso
Para evitar a distorção e a perda da
qualidade dos elementos visuais
da marca, ela não deverá ser
aplicada em tamanhos menores
em relação aos definidos ao lado. Não achate nem alongue o logotipo Não aplique em cores ausentes neste manual

17
Made Tomy
Esta é uma frase escrita com a tipografia Made Tommy
Regular, usada com adaptações no logotipo BookOffice.

Light | Regular | SemiBold

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo
Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

. , ; : ! ? / \ | “ ‘ # $ % & * ( ) [ ] { } ^ ~ `´ ° + =

Lato
Tipografias
Esta é uma frase escrita com a tipografia Lato Regular, principal
fonte que deve ser utilizada na comunicação BookOffice.

A tipografia Made Tomy foi Light | Regular | Bold | Black


utilizada com adaptações no
logotipo, e não deve ser usada Light | Regular | Bold | Black
em nenhum contexto além
dele. A fonte para uso primário Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
e secundário em textos e peças
gráficas deverá ser a Lato. . , ; : ! ? / \ | “ ‘ # $ % & * ( ) [ ] { } ^ ~ `´ ª ° + = 1 2 3 4 5 6 7 8 9

18
Cores
No uso, o marinho e o salmão
devem ser aplicados em menor
proporção que as demais, em
áreas e elementos estratégicos
com maior hierarquia visual,
sendo essas as cores de destaque
da identidade. Em equilíbrio, os
tons de cinza e o branco devem
ser utilizados em maior proporção,
porém em elementos de menor
ênfase, como em grandes blocos
de texto e planos de fundo.
Dessa forma, a identidade Marinho Salmão Cinza escuro Cinza claro Branco
transmitirá leveza através do uso
majoritário de tons neutros e CMYK (100, 93, 20, 22) CMYK (0, 70, 55, 0) CMYK (84, 69, 47, 48) CMYK (9, 3, 2, 0) CMYK (0, 0, 0, 0)
terá detalhes significativos que RGB (5, 15, 110) RGB (254, 110, 101) RGB (45, 55, 72) RGB (237, 242, 247) RGB (255, 255, 255)
atraem o olhar para as duas cores Pantone 2748 C Pantone 2345 C Pantone 4140 C Pantone 649 C Pantone Bright White
primárias: marinho e salmão. Hex #050F6E Hex #FE6E65 Hex #2D3748 Hex #EDF2F7 Hex #FFFFFF

19
Aplicação
sobre imagens

Para aplicação sobre imagens, deverá


ser observado o contraste com o plano
de fundo e escolhida a versão com
maior destaque. Quando necessário,
deverão ser aplicados filtros sobre a
imagem, de forma que a marca não
perca visibilidade nem legibilidade.

20
Sistema de
imagens

Com o objetivo de manter unidade


visual na comunicação da marca, é
ideal que sejam utilizadas imagens com
uma consistência visual, ou seja, que
mantenham uma linha padronizada de
iluminação, enquadramento e cores.

Preferencialmente, as imagens escolhidas


deverão possuir cores não muito quentes
nem frias, pouco saturadas, luz natural,
com alto contraste e médio para alto
brilho, assim como a imagem ao lado.

21
Fotografia
de espaços

O que deve ser feito

As fotos mais indicadas para BookOffice


são aquelas com iluminação mais
próxima possível da natural, sem edição
exagerada, apresentando espaços
organizados, limpos e amplos. Deve-
se dar preferência a fotos que trazem
ambientes bem iluminados, de forma a
trazer a sensação de clareza e conforto.

22
O que não deve ser feito

Fotos que apresentam espaços de forma


artificial devem ser evitadas. Fotos feitas
em estúdios, com tons muito escuros
ou enquadramentos que focam em
detalhes ou pessoas também não são
indicadas, pois podem criar a sensação
de espaços pequenos e desviar a atenção
para detalhes pouco importantes.

23
Fotografia
de pessoas

O que deve ser feito

Devem ser escolhidas fotografias com


cenários espontâneos e pessoas em
posições descontraídas, de preferência
que apresentem traços brasileiros. É
indicado o uso de médio contraste,
médio para alto brilho e média
saturação, de forma que a fotografia
não apresente tons excessivamente
saturados. Essas escolhas irão
garantir que o público se identifique
com os personagens da foto e crie
a sensação de afeto pela marca.

24
O que não deve ser feito

Não devem ser utilizadas fotos com


cenários metodicamente organizados,
elementos alinhados e personagens
fazendo poses artificiais para a
foto. Saturação, brilho e contraste
exagerados também não são indicados
para a comunicação do BookOffiice.
Essas características podem causar
distanciamento do público.

25
Guia de estilos
para interfaces
Para desenvolvimento da plataforma BookOffice,
foram utilizados componentes e estilos criados com
o objetivo de criar uma comunicação direta e eficaz
com o usuário, de forma a aprimorar ao máximo a
sua experiência durante a navegação no site.
Lato

Esta é uma frase escrita com a tipografia Lato, que foi


utilizada na construção da plataforma BookOffice.

Light | Regular | Bold | Black

Light | Regular | Bold | Black

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo
Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

. , ; : ! ? / \ | “ ‘ # $ % & * ( ) [ ] { } ^ ~ `´ ª ° + = 1 2 3 4 5 6 7 8 9

Tipografia para telas

Para a construção da interface, foi


escolhida a fonte Lato, que está
disponível no Google Fonts e tem
grande aplicabilidade e características
ergonômicas no uso de interfaces.

27
White Gray / 50 Gray / 100 Gray / 200 Gray / 300 Gray / 400
#FFFFFF #F7FAFC #EDF2F7 #E2E8F0 #CBD5E0 #A0AEC0
Cores padrão

As cores básicas utilizadas para o


desenvolvimento da plataforma estão
listadas ao lado. Elas consistem em
tons de cinza frios e cores de alerta,
atenção e sucesso (que já estão
consolidadas na memória do usuário,
Gray / 500 Gray / 600 Gray / 700 Gray / 800 Gray / 900 Black
devido à semelhança com situações
#718096 #4A5568 #2D3748 #1A202C #171923 #000000
cotidianas, como os semáforos).

Network 400 Orange 400 Yellow 400 Green 400 Cyan 400 Pink 400
#B8283C #C15715 #ECB246 #328535 #2275C9 #D14256

28
Cores identitárias Marinho 700 Marinho Marinho 300 Salmão 700 Salmão Salmão 300
#000745 #050F6E #B2B7DF #A03E31 #FE6E65 #FFCFBA
Para as cores identitárias do BookOffice,
foram desdobradas as cores marinho
e salmão em tons mais claros e
mais escuros, possibilitando seu
uso de forma mais abrangente em
botões, tags e outros elementos.

29
Botões primários

Ações principais
Os botões em marinho são utilizados na
interface para ações principais, como
“Iniciar”, “Confirmar” e “Continuar”.

CTAs (call to actions)


Os botões em salmão são utilizados
prioritariamente em CTAs (call to actions).
Botões secundários

Os botões secundários são utilizados


para ações de fluxos alternativos e
casos de contorno, como “Voltar”.

31
Botões de alerta

Os botões de alerta aparecem no


site em momentos de decisão
irreversível e que possam trazer
consequências indesejáveis para o
usuário, como “Excluir” ou “Cancelar”.

32
Botões ghost

Estes botões são utilizados para oferecer


opções pouco desejáveis para o usuário,
de forma que estejam presentes mas
chamem menos atenção que demais
botões. Dentre os botões, é o de
menor hierarquia da informação.

33
Inputs

Os inputs são quaisquer campos


em que o usuário insira dados
em formulários ou buscas.

34
Ícones
Foram utilizados ícones simples, em uma cor,
que facilitam o reconhecimento do usuário.

Todos os ícones utilizados fazem parte do


pacote de ícones Font Awesome 5, que pode
ser acessado em www.fontawesome.com.

35
Papelaria
institucional
Papel timbrado: papel offset 90g,
impressão offset 2x0 cores Pantone,
formato 210x297mm, refile.

Envelope saco: papel offset 150g, impressão offset


2x1 cores Pantone, formato aberto 500x416mm,
formato fechado 240x340mm, faca especial, cola.

Pasta: papel chouché 220g, impressão


offset 2x1 cores Pantone, formato aberto
450x370mm, formato fechado 220x310mm,
laminação fosca frente, faca especial, cola.

37
Cartão de visitas: papel couché 280g,
impressão offset 2x1 cores Pantone, formato
90x50mm, laminação fosca frente e verso,
verniz localizado frente e verso, refile.

Envelope ofício: papel offset 120g,


impressão offset 2x1 cores Pantone,
formato aberto 263x286mm, formato
fechado 230x115mm, faca especial, cola.

38
Assinatura de email: modelo de
assinatura a ser utilizado para
envio de emails institucionais,
com adaptação de nome,
cargo, email e telefone.

39
Desenvolvimento Realização
Guidance Experts ® 2020 BookOffice ® 2020
www.guidance.dev www.bookoffice.com.br

Direção Direção
Geraldo Franciscani Diretor e Líder Back-End Guilherme Tanure CEO e Co-Founder
Thiago Costa Porto Líder de tecnologia Betania Tanure Co-Founder
Pedro Bernardina Líder Front-End Luisa Tanure Co-Founder
Igor Antoine Líder de Design e Branding David Travesso Chairman

Gestão do projeto BookOffice


Isabela Morais Líder de Design
Thiago Costa Porto Líder de Tecnologia

Design e Branding
Isabela Morais UiUx Design e Design Gráfico
Elton Ribeiro Apoio UiUx Design e Design Gráfico

Desenvolvimento Front-End
Diego Kfuri, Jeann Carlos Batemarque, Genísio
Alcântara, Paulo Vaz e Rhayana Barbosa

Desenvolvimento Back-End
Arthur Ferraz e Gustavo Avelar

40
suporte@bookoffice.com.br
www.bookoffice.com.br

Você também pode gostar