Software Branding

Observação

Este guia de design foi criado para Windows 7 e não foi atualizado para versões mais recentes do Windows. Grande parte das diretrizes ainda se aplica em princípio, mas a apresentação e os exemplos não refletem nossas diretrizes de design atuais.

A identidade visual é o posicionamento emocional de um produto, conforme percebido por seus clientes. A identidade visual bem-sucedida requer a criação habilidosa de uma imagem de produto e não é obtida apenas por meio de logotipos de produtos e esquemas de cores.

A identidade visual é o posicionamento emocional de um produto, conforme percebido por seus clientes. A identidade visual do produto é obtida por meio de uma combinação de fatores, incluindo o nome e o logotipo do produto, o uso de cor, texto, elementos gráficos e som, o estilo de vários outros elementos de design, marketing e, o mais importante, os atributos da própria experiência do produto.

A identidade visual bem-sucedida requer a criação habilidosa de uma imagem de produto e não é obtida simplesmente colocando um logotipo de produto em cada superfície e usando o esquema de cores do produto em todas as oportunidades. Em vez disso, a identidade visual significativa e de alta qualidade que aprimora a experiência dos usuários será muito mais bem-sucedida.

Nota: Diretrizes relacionadas a ícones, fontes, cor, animação , som e quadros de janela são apresentadas em artigos separados.

Conceitos de design

Em um marketplace competitivo, as empresas marcam seus produtos para ajudar a diferenciá-los da concorrência. Seria ingênuo sugerir que a identidade visual do produto em geral está errada ou deve ser evitada, mas é justo dizer que a identidade visual de software é muitas vezes executada mal. O objetivo da identidade visual de software é associar a marca ao estilo e à qualidade do produto e sua experiência. Muitas vezes, os desenvolvedores tentam fazer isso chamando a atenção para o próprio programa. O resultado é distrair os usuários em vez de encantá-los.

Atributos de boa identidade visual de software

Quando bem feito, a identidade visual de software tem estes atributos:

  • Estabelece um estilo e personalidade claros e distintos.
  • Cria uma conexão emocional.
  • Tem alta qualidade.
  • É estrategicamente colocado e executado consistentemente.
  • Alinha-se à estratégia geral da marca.
  • É duradouro... tão agradável da milésima vez como foi a primeira.

Por outro lado, tentativas ruins de identidade visual de software têm esses atributos:

  • Não tem nenhum tema ou ponto óbvio.
  • Está na cara do usuário.
  • É irritante.
  • Está em toda parte.
  • Tem uma aparência personalizada sem nenhum benefício do usuário.
  • Torna-se rapidamente cansativo.

Comece com o produto em si

A identidade visual de software bem-sucedida começa com o design do próprio produto. Um programa bem projetado criou funcionalidades cuidadosamente voltadas para um público-alvo apropriado. Funcionalidade exclusiva e atenção extraordinária aos detalhes fazem instruções de identidade visual poderosas. Para obter mais informações, consulte Como criar uma ótima experiência do usuário.

Escolha cuidadosamente o nome do produto

Grandes nomes de produtos impulsionam marcas fortes. Um grande nome de produto de software é memorável e transmite concisamente o benefício do produto, fornecendo distinção em um mercado lotado. Contrate um profissional de identidade visual para ajudá-lo a escolher o nome certo do produto. A longo prazo, um nome bem escolhido é muito mais importante para seu esforço de identidade visual do que detalhes como logotipos, esquemas de cores e temas de controle.

O que marcar

Os elementos de identidade visual de software podem ser categorizados da seguinte maneira:

Primário

  • Nome do produto
  • Logotipo do produto
  • Esquema de cores do produto
  • Sons específicos do produto

screen shot of windows logo screen shot of windows themes

Alguns elementos de identidade visual primários do Windows Vista.

Elementos de identidade visual primários tendem a chamar muita atenção, portanto, devem ser usados com contenção. Limite o uso de elementos de identidade visual primários a algumas experiências estratégicas. Sons específicos do produto não são recomendados para a maioria dos programas.

Secundário

  • Formas de elemento
  • Ícone e estilos gráficos
  • Elementos gráficos secundários
  • Cores de ênfase
  • Animações
  • Transições
  • Sombras
  • Planos de fundo e transparência

figures of stamps and calendars used for branding

figure of design in solid, primary colors figure of blue and green ribbon-like design

Alguns elementos de identidade visual secundários do Windows Vista.

Elementos de identidade visual secundários tendem a ser mais sutis e, por isso, podem ser usados com mais frequência. Embora alguns desses elementos de identidade visual secundários possam não ter muito impacto individualmente, quando juntos eles podem dar ao seu caráter e estilo de produto. As transições podem ter mais impacto do que os gráficos fixos, que os usuários aprendem a ignorar ao longo do tempo. Prefira o nível secundário de identidade visual em relação ao nível primário.

Terciário

Por fim, há outra categoria de elementos de identidade visual a serem informados.

  • Quadros de janela personalizados
  • Controles personalizados

Embora seja apropriado que determinados tipos de programas (como jogos) criem uma experiência completamente distinta e imersiva com base em controles personalizados e janelas, a maioria dos programas deve usar as variedades padrão. Ter seus programas parecendo e agindo estranho não faz com que uma identidade de marca forte. Em vez disso, sua meta deve ser criar um programa com caracteres , um produto que se destaca ao se encaixar.

Onde marcar

Nem tudo precisa ser marcado. Alguns elementos de identidade visual estrategicamente colocados podem causar uma impressão mais poderosa do que bater elementos de identidade visual descoordenados em todos os lugares.

Concentre seu esforço de identidade visual nas experiências especiais em seu programa. Estes são os lugares que têm o impacto mais emocional, como:

  • As primeiras experiências, especialmente quando o programa é usado pela primeira vez.
  • A janela principal ou home page.
  • O início e a conclusão de tarefas importantes.
  • Transições importantes entre tarefas ou áreas de programa.
  • Tempo de espera durante tarefas de longa execução.
  • Faça logon e faça logon.

Onde não marcar

Embora você possa potencialmente usar qualquer elemento em seu programa como uma oportunidade de identidade visual, não use a área de trabalho Windows (incluindo a área de trabalho, a barra de Início Rápido ou a área de notificação) para identidade visual.

A área de trabalho é o ponto de entrada do usuário para Windows. Deixe o usuário no controle. Use esses pontos de entrada adequadamente , nunca os veja como maneiras de promover a conscientização do programa ou de sua marca. Para obter mais informações, consulte Área de Trabalho.

Usar profissionais de identidade visual

A identidade visual é uma habilidade especializada melhor feita por profissionais experientes. É muito melhor expor seus usuários a uma identidade visual mínima do que usar uma identidade visual extensa que seja irritante e ineficaz. Trabalhe com sua equipe de identidade visual e marketing para criar uma boa experiência de identidade visual de ponta a ponta.

Se você fizer apenas cinco coisas...

  1. Comece com o design do produto. A instrução de identidade visual mais poderosa é atender especialmente às necessidades dos clientes.
  2. Escolha um bom nome de produto que seja memorável, distinto e conciso transmita o benefício do produto.
  3. Pense em identidade visual em termos de experiências e fazer uma conexão emocional, não logotipos de produto e esquemas de cores.
  4. Prefira elementos de identidade visual secundários. Limite o uso de elementos de identidade visual primários a algumas experiências estratégicas.
  5. Obtenha ajuda de um profissional de identidade visual.

Diretrizes

Geral

  • Escolha um bom nome de produto que seja memorável, distinto e conciso transmita o benefício do produto. Essa será a base da sua marca.

  • Concentre seu esforço de identidade visual nas experiências especiais em seu programa, como:

    • As primeiras experiências, especialmente durante a instalação e quando o programa é usado pela primeira vez.
    • A janela principal ou home page.
    • O início e a conclusão de tarefas importantes.
    • Transições importantes entre tarefas ou áreas de programa.
    • Faça logon e faça logon.
  • Prefira elementos de identidade visual secundários. Limite o uso de elementos de identidade visual primários a algumas experiências estratégicas. Por exemplo, considere usar elementos gráficos secundários, transições e cor em vez de logotipos. Além disso, evite elementos de identidade visual primários proeminentes em locais onde os usuários passam muito tempo porque podem ser percebidos como desordem.

    Aceitável:

    screen shot of control panel with windows logo

    Melhor:

    screen shot of control panel without logo

    No melhor exemplo, um elemento gráfico secundário é usado em vez do logotipo do produto para Windows itens do painel de controle.

  • Não use identidade visual que distraia ou prejudique a usabilidade ou o desempenho.

  • Não use a área de trabalho Windows para identidade visual. Para obter mais informações, consulte Área de Trabalho.

Nomes e logotipos

  • Limite o uso de logotipos do produto e da empresa na interface do usuário. Não engessar logotipos de empresa ou produto em todas as superfícies da interface do usuário.

    • Limite os logotipos do produto e da empresa para, no máximo, duas superfícies diferentes, como a janela principal ou home page e a caixa Sobre.
    • Limite os logotipos do produto e da empresa para, no máximo, duas vezes em qualquer superfície única.
    • Limite os nomes de produtos e empresas a, no máximo, três vezes em qualquer superfície.

    Incorreto:

    screen shot of graphic overusing company name

    Neste exemplo, o nome da empresa é sobreutilizado.

    Incorreto:

    screen shot of windows with several logos

    Neste exemplo, embora individualmente o uso dos logotipos seja aceitável, o efeito geral é esmagador.

  • Use pequenos logotipos de produto e empresa. Coloque o logotipo fora do fluxo de trabalho do usuário e escolha um tamanho apropriado para sua localização.

  • Use logotipos gráficos. Os logotipos gráficos são mais estáveis do que os logotipos de texto porque não são afetados por alterações de fonte, tamanho do texto, pacote de idiomas ou tema.

  • Não use logotipos animados.

Controles

  • Não use controles personalizados para identidade visual. Em vez disso, use controles personalizados quando necessário para criar uma experiência imersiva especial ou quando a funcionalidade especial for necessária.

    Incorreto:

    screen shot of sign-in button with branding

    Este exemplo mostra um controle personalizado usado incorretamente para identidade visual.

Telas iniciais

  • Não use telas splash para identidade visual. Evite usar telas insatisfatórios porque elas podem fazer com que os usuários associem seu programa a um desempenho ruim. Use-os apenas para fornecer comentários e reduzir a percepção de tempo para programas que têm tempos de carga extraordinariamente longos.
  • Não use telas animadas. Os usuários geralmente assumem que a tela inicial animada é o motivo de um longo tempo de carga. Muitas vezes, essa suposição está correta.

Som

  • Geralmente, o som não é recomendado apenas para identidade visual. Se você usar som para identidade visual:
    • Reproduza um som somente na inicialização do programa, mas somente se o programa tiver sido iniciado pelo usuário.
    • Sincronize o som com um evento visual, como uma transição de interface do usuário como a exibição de uma janela de programa.

Para obter mais informações, consulte Som.