Documento de Identidade Visual
Clique Aqui para baixar o documento.
Nesta página, encontram-se artefatos relacionados à documentação da Identidade Visual e Padrões de Design dos Produtos. O objetivo de criar essa documentação é garantir uma padronização a ser seguida pelo grupo na criação de interfaces e seus subprodutos, com o intuito de estabelecer uma marca ou identidade visual coesa.
Visão Geral do Produto
A seção de Visão Geral do Produto fornece uma introdução à marca, descrevendo sua proposta de valor, os princípios de design e a essência que o produto busca transmitir visualmente.
Introdução à Marca
O SiDrone eVTOL é uma solução de drone elétrico que funciona como VANT e eVTOL, projetado para auxiliar no combate a incêndios, especialmente em focos menores. Com foco na eficiência, o SiDrone eVTOL opera em conjunto com uma aplicação, refletindo o compromisso com a segurança e a preservação ambiental. Sua missão é clara: prevenir o descontrole de incêndios, protegendo vidas, a natureza e as infraestruturas.
Proposta de Valor
O SiDrone eVTOL combina mobilidade aérea com equipamentos especializados para extinguir focos de incêndio rapidamente. Ele conta com uma aplicação que permite a geração de relatórios de voo e aprimoramento dos traçados de voo. Sua tecnologia garante um alcance excepcional, tempo de resposta ágil e capacidade de operar em condições extremas. É uma ferramenta indispensável tanto para forças estatais, como bombeiros e policiais, quanto para forças civis, na identificação e controle de pequenos focos de incêndio.
Princípios de Design
As heurísticas de Nielsen são essenciais para um bom design, tanto para a aplicação quanto para o produto em si. Com o objetivo de garantir uma boa usabilidade para o usuário, serão seguidas 4 das 10 heurísticas de usabilidade de Nielsen, conforme pode ser visto na Tabela 1. Esta tabela também indica onde as heurísticas serão aplicadas e serve como guia para o uso da aplicação. A aplicação será dividida em duas partes: uma embarcada no drone, chamada de Assistente de Voo, e outra em terra, chamada de Relatório de Voo, que gera os relatórios de voo, como mostrado na Tabela 1.
Tabela 1: Heurísticas a serem usadas.
| Nome Usabilidade | Descrição | Assistente de Voo | Relatório de Voo |
|---|---|---|---|
| Visibilidade do Sistema | O design deve sempre manter os usuários informados sobre o que está acontecendo, por meio de feedback apropriado dentro de um período de tempo razoável. | Avisos sobre os projeteis disponíveis, informações de mira, e de bateria de maneira constante ou menos de 10 segundos de resposta | Status dos relatórios, status do upload do log |
| Reconhecimento em vez de recordação | Minimize a carga de memória do usuário tornando elementos, ações e opções visíveis. Evite fazer os usuários lembrarem informações. | Ícones claros sobre mira, direção, projéteis e bateria disponível | Ícones e informações para deixar a interface mais inteligível sobre como certas ações, como carregar logs, ou mudar a estrutura do dashboard |
| Flexibilidade e Eficiência de Uso | Tenha atalhos, ocultos para usuários novatos, que podem acelerar a interação para o usuário especialista, de modo que o design possa atender tanto usuários inexperientes quanto experientes. Permita que os usuários personalizem ações frequentes. | Possibilidade de atualizar de projéteis mesmo não estando no canal de mira | Atalhos para mudar a visualização do dashboard ou realizar sua exportação |
| Ajude os usuários a reconhecer, diagnosticar e se recuperar de erros | As mensagens de erro devem ser expressas em linguagem simples (sem códigos de erro), indicar precisamente o problema e sugerir construtivamente uma solução. | Mensagem caso algo sensor falhe, a alguma informação não seja apresentada, dessa maneira retirando da tela ou apresentando outra alternativa para apresentação da informação. | Reconhecer quando um log não vem formatado, informar por meio de mensagem clara e sugerir reenvio de arquivo, ou para enviar outro arquivo |
Fonte: Autoria própria. Todos os direitos reservados.
Observação: Os princípios mencionados não se limitam apenas aos aplicativos. Eles também devem ser considerados por todos os membros de diferentes áreas de engenharia ao longo do desenvolvimento do projeto.
Slogan
O slogan do projeto SiDrone eVTOL transmite uma mensagem crucial sobre o propósito do projeto: ser um meio eficaz de combater focos de incêndios menores, que, se não controlados, podem evoluir para incêndios de grandes proporções, causando catástrofes e destruição material, além de afetar a fauna e a flora. O grupo reconhece que esta é uma tarefa desafiadora, mas acredita que, com empenho, é possível fazer a diferença.
"Onde o fogo encontra seu fim e a segurança começa."
Logo e Identidade Visual
Design do Logotipo
O logotipo foi desenvolvido a partir de uma série de testes e com base na ideia central de criar um drone capaz de apagar focos de incêndio identificados. O desenvolvimento da logo iniciou-se com uma mistura de badge, elementos de avião e inteligência artificial (IA), sendo a IA utilizada a Dall-E, que contribuiu na concepção das ideias. A seguir, é apresentada uma imagem/ícones do que foi utilizado, como mostrado na Figura 1. Foram criadas duas versões do logotipo: uma para aplicativos ou sites web em geral, chamada de logo resumida, e outra para outros usos. Vale lembrar que a logo completa (Figura 1) não deve ser usada em fundos pretos, embora ela ainda siga as mesmas regras da versão resumida.
Uso das Cores
Além disso, é importante conhecer as situações em que o logotipo pode ser utilizado, pois isso pode gerar certas conveniências ou o oposto, dependendo do plano de fundo utilizado ou da falta dele. Um usuário pode não entender o significado do logotipo ou não criar uma memória afetiva relacionada a ele, o que pode ser um problema.
Por isso, é essencial criar um ambiente de contraste ou harmonia para que o logotipo consiga ser visto, assim como todos os seus elementos internos. Isso pode ser um problema caso esse aspecto não seja pensado com atenção. A seguir, são apresentados alguns exemplos de uso do logotipo e cores de fundos que podem ser usados, como mostrado na Figura 2.
Mau uso da Logo
O mau uso do logotipo pode acarretar problemas de marca, sendo necessário atentar-se aos detalhes de como utilizá-lo. Em casos de falsificação, o logotipo pode se tornar um diferencial para identificar golpes. Outros efeitos causados pelo má uso incluem a criação de uma imagem de amadorismo, o que pode fazer com que a marca não pareça profissional. Como ilustrado no exemplo da Figura 3.
Cores
A identidade visual do SiDrone eVTOL evoca a intensidade e urgência do combate ao fogo, enquanto transmite a segurança e a eficácia da solução, como ilustrado na Figura 4.
A paleta de cores apresentada na Figura 4 é descrita na Tabela 2 abaixo, que detalha o significado do uso das cores primárias, secundárias e neutras/de apoio.
Tabela 2: Descrição do uso das Cores.
| Cor | Representação |
|---|---|
| FF8113 | O calor e a intensidade das chamas. |
| 441010 | A escuridão das cinzas e os perigos do fogo. |
| FFC212 | O brilho da ação imediata, do sol e da luz entre as sombras. |
| 99340B | A terra do cerrado que enfrenta os incêndios. |
| 90D4E4 | O céu claro e o cinza-azulado da fumaça. |
| 405F66 | O céu cinza-azulado da fumaça. |
| 000000 | A gravidade e a seriedade da missão. |
| FFFFFF | A esperança e a clareza trazidas pela segurança restaurada. |
Fonte: Autoria Própria. Todos os direitos reservados.
Essas cores criam um equilíbrio visual poderoso, simbolizando a luta contra o perigo e a calma que a solução traz. Trata-se do equilíbrio entre urgência e ação eficaz. A paleta de cores do projeto sempre remete ao seu propósito: um drone destinado a apagar focos de incêndio. Por esse motivo, as cores escolhidas, vistas na Figura 4, remetem ao fogo, à transição entre o fogo e o céu durante ou após o incêndio, tanto no período noturno quanto diurno, e à fumaça gerada. Somado a isso, serão usadas cores neutras para garantir o melhor uso de contraste, como o preto e o branco. Para atender às necessidades do grupo, foram feitas variações de cores, encontradas na Figura 5.
Essas variações foram desenvolvidas com maior ou menor proporção de cor branca ou preta, com base na ideia retirada do Coolors, mas sem copiar as cores geradas lá, devido a questões de licenciamento. Essas variações seguem uma fórmula descrita na Figura 6.
Tipografia
A tipografia é uma parte importante de uma marca; ela define não apenas a visibilidade de uma escrita, mas também o estilo da marca, transmitindo uma sensação de modernidade ou rústico. Pensando nisso, e para trazer algo mais moderno e direto, tanto em aplicativos quanto em relatórios, as fontes escolhidas foram Josefin Sans, para transmitir sofisticação, e Roboto, para dar um toque de modernidade, conforme ilustrado na Figura 7.
Os tamanhos, pesos e hierarquias são igualmente importantes para a tipografia de um sítio virtual, aplicativo ou marca. As regras a serem seguidas pela marca serão, conforme a Figura X: a fonte Josefin Sans será usada para títulos e subtítulos, enquanto o Roboto será utilizado para textos comuns e citações. Todos esses elementos abrangem os pesos: 700, 400 e 300, que são suficientes para as necessidades do grupo e para quaisquer atualizações futuras, que estão sendo planejadas.
Ícones e Elementos Gráficos
Os ícones são parte essencial do design. No entanto, eles precisam ser trabalhados para serem entendidos e vistos de maneira fácil, tanto pelo usuário quanto pelo desenvolvedor. A regra para desenvolver ícones é que eles devem sempre ser de uma cor primária que contraste com o fundo onde o ícone está alocado, seja esse fundo uma cor secundária, neutra ou gradiente, que são consideradas cores secundárias, assim como as variações de cores . Por fim, vale relembrar que que elementos ou ícones que são botões devem simular uma sombra, se possível. Conforme a Figura 8, estão ilustrados alguns ícones que estão sendo utilizados nos protótipos.
Layout e Grid
O layout e o grid não apenas fornecem diretrizes para a estruturação de conteúdo, mas também garantem o alinhamento e o equilíbrio visual entre os elementos. Com isso em mente, a Figura 9 demonstra os grids que serão usados para a construção das páginas.
O espaçamento no layout e grid é essencial para separar os elementos ou seções uns dos outros. No entanto, escolher o uso adequado para cada tipo de espaçamento pode ser um desafio. Para facilitar essa escolha, foram definidos três tipos de espaçamentos a serem utilizados. Para telas maiores, como notebooks em full screen ou ultrawide, o espaçamento de 8px será adotado. Para dispositivos menores, como aplicativos de desktop que não estão em tela cheia e celulares, o espaçamento será de 4px. Para casos especiais, como botões e seções pequenas, o espaçamento de 5px será utilizado. Seguindo esse padrão, espera-se trazer harmonia entre os elementos e o grid. Como ilustrado na Figura 10, esses são exemplos de tamanhos de espaçamentos que deverão ser seguidos para a construção do grid.
Protótipo de Alta Fidelidade
Nessa seção, encontra-se o protótipo de alta fidelidade, como pode ser visto no iFrame 1, o prótotipo de alta fidelidade do Aplicativo de Relatório de Voo e na aba Assistente está o prótotipo do Assistente de Voo, lembrando que seu uso é complementado pelo uso do FPV que já tem uma interface.
iFrame 1: Protótipo de Alta Fidelidade.
Fonte: Autoria Própria. Todos os direitos reservados.
Caso a visualização não seja possível, Clique Aqui!
Tela Inicial
A Tela Inicial serve como o ponto de entrada para o sistema, oferecendo acesso às principais funcionalidades de forma organizada e intuitiva. Nessa interface, os usuários podem navegar facilmente para outras seções do sistema, iniciar operações, ou visualizar informações importantes diretamente na página principal. Abaixo, na Figura 11, é apresentado o protótipo do aplicativo de Relatório de Voo Tela Inicial e na Figura 12, o prótotipo da Tela Inicial/Final de um exemplo da tela do Assistente de Voo.
Tela de Processamento
Protótipo da tela de processamento, mostrado na Figura 13, usada para informar o usuário sobre o andamento de uma ação ou tarefa.
Tela de Erro
Protótipo da tela de erro para o App de Relatório, demonstrado na Figura 14, exibida quando ocorre algum problema e a Figura 15 quando ocorre no assistente de mira. Estas telas devem seguir as diretrizes de identidade visual, garantindo clareza e empatia na comunicação do erro.
Sobre
A Página de Sobre, vista na Figura 16, apresenta informações sobre o aplicativo, e termos para mantendo o alinhamento com a identidade visual estabelecida.
Guia de Estilo
O guia de estilo desta página é um resumo de alguns elementos que a mesma apresenta, dentre as quais espera-se se uma ferramenta de fácil uso por parte desenvolvedores, ou pessoas que interessa no projeto ou marca, por esse motivo será disponibilizado um link de pdf referente a um guia de estilo básico para manter o projeto.
Para manter tal guia de estilo espera-se que o utilizador, conserve as cores sem mudá-las, assim como a tipografia e uso da logo, para outros casos como construção de páginas observa-se que a versão disponibilizada somente se preocupa com os espaçamentos a serem utilizadas na mesma, outros usos como grid e disposição de elementos ficam a cargo do utilizador.
Referências
MICROSOFT. Experiência de Branding.
Acesso em: 03 nov. 2024.DESIGN SYSTEMS. Space, Grids, and Layouts.
Acesso em: 15 nov. 2024.BRIX AGENCY. Figma Brand Book Template Kit | BRIX Agency.
Acesso em: 15 nov. 2024.ADOBE. How to Build a Brand.
Acesso em: 17 nov. 2024.COOLORS. Gerador de paletas de cores. [2024].
Acesso em: 13 nov. 2024.OPENAI. DALL·E. [2024].
Acesso em: 03 nov. 2024.CANVA. Ferramenta de design online. [2024].
Acesso em: 13 nov. 2024.NNGROUP. 10 Usability Heuristics for User Interface Design.
Acesso em: 15 nov. 2024.
Histórico de Versões
| Versão | Data | Descrição | Autor(es) |
|---|---|---|---|
| 1.0 | 03/11/2024 | Criação e estruturação inicial do documento | Gustavo Martins |
| 1.1 | 19/11/2024 | Adicionando Brands da Marca, Cores e Visões Gerais do Produto | Gabriel Ferreira |
| 1.2 | 19/11/2024 | Correções e Prótotipo de Alta Fidelidade | Gabriel Ferreira, Ana e Caio M. |
| 1.3 | 21/11/2024 | Revisão e correção geral e evolução do artefato | Gustavo Martins Ribeiro |
| 1.4 | 25/11/2024 | Evolução do artefato | Gabriel Ferreira da Silva |
| 1.5 | 27/11/2024 | Revisão | Gabriel Ferreira da Silva |