Primeiras aulas do curso Iconografia I: desenvolva representações gráficas a partir de uma identidade

Iconografia I: desenvolva representações gráficas a partir de uma identidade

Compreendendo os ícones e conhecendo o material - O que é um ícone?

Bem-vindo ao curso de Iconografia I: desenvolva representações gráficas a partir de uma identidade!

A primeira parte do curso consiste em aprender conceitos relacionados ao universo da Iconografia!

Observe a imagem abaixo:

mostrando a imagem do play

A primeira ideia que vem à mente ao observar a imagem é que algum tipo de mídia será executada, seja uma música, seja um vídeo. O símbolo central, um triângulo apontando para a direita, indica a reprodução de algo. Normalmente, ao clicar neste símbolo, ele converte-se na seguinte imagem:

Mostrando a imagem do Stop

Este símbolo, que consiste em duas linhas paralelas, indica a função de pausar.

Outro exemplo:

Mostrando as imagens do tempo

Estes ícones representam tipos diferentes de clima e sua função é transmitir uma informação. Por exemplo, o sol indica um tempo ensolarado e a imagem da nuvem com riscos embaixo determina um tempo chuvoso.

Um terceiro exemplo:

Mostrando ícones distintos

Estes ícones representam aplicativos e pastas dentro de um sistema operacional. Vamos analisar a bússola, que é o logo de acesso do navegador Safari. A figura da bússola remete aos navegadores antigos que utilizavam esse instrumento como guia no mar. Não por coincidência, este foi o símbolo escolhido para representar um navegador de Internet.

A imagem da engrenagem representa as preferências e configurações do sistema operacional de um celular, esta forma lembra ajustes. E, o ITunes, aplicativo de música, por sua vez, possui como símbolo uma nota musical.

Neste exemplo, os ícones representados (a bússola, a engrenagem e a nota musical) possuem uma função distinta dos demais exemplos. Além de informar, eles também auxiliam o usuário no acesso a aplicativos e pastas dentro do sistema operacional.

Portanto, a pergunta é:

O que é um ícone?

A palavra ícone abrange uma grande quantidade de imagens, desde as mais simples e monocromáticas até as compostas por diversas formas geométricas, construídas em 3D ou responsáveis por executarem determinados comportamentos.

Ícone é uma imagem que representa algo e que possui algum tipo de significado. É uma representação gráfica dotada de significado e função.

Segundo Jon Hicks, em The Icon Handbook:

"O coração de um ícone é a metáfora que ele usa, a funcionalidade implícita pela representação visual".

Observe o seguinte grupo de ícones:

mostrando outro grupo de ícones

É fácil compreender que a primeira imagem indica a realização de chamadas, a segunda remete a música, a terceira acessa uma câmera fotográfica e a quarta envia e-mails. Portanto, todas as imagens possuem significados bem descritos.

O que estes ícones possuem em comum? A forma e as cores são parecidas. Isto é, este grupo de ícones possui padrões visuais semelhantes, ou seja, eles respeitam uma identidade visual.

Isso também ocorre na Iconografia dos ícones do Google:

mostrando a iconografia do Google

O estilo destes ícones é um pouco mais plano, trabalhado no 2D.

A Iconografia de uma identidade é um conjunto de representações padrão utilizadas para informar, acessar ou localizar dentro de um mesmo sistema.

A Iconografia pode respeitar tanto a identidade do sistema operacional quanto a identidade da marca. Por exemplo, observe os ícones do Whatsapp:

mostrando a diferença entre ícones do whatsapp

O ícone do Whatsapp varia conforme o sistema operacional. Ele é de uma maneira no IOS, no Android é de outro e no Windows Fone o usuário pode, inclusive, personalizar a cor do símbolo.

Outro exemplo de Iconografia está presente nos ícones da Alura:

mostrando a iconografia da Alura

A iconografia da Alura foi desenvolvida pelo Designer Fábio Gushiken. Observe os ícones acima, eles também respeitam uma identidade visual coesa e, por isso, são harmônicos entre si.

A proposta deste curso é desenvolver quatro novos ícones para o site da Alura e fazer isso respeitando padrões visuais já estabelecidos.

Na primeira atividade, disponível aqui, é possível baixar o arquivo que será utilizado ao longo do curso. É um arquivo do Illustrator com especificações e regras sobre os ícones que serão elaborados.

Compreendendo os ícones e conhecendo o material - Alterando a cor de um ícone

O documento do Illustrator está disponível para download aqui.

Ele contém as especificações necessárias para a elaboração dos ícones.

Ícone: Design de Apresentação II

O primeiro ícone que desenvolveremos é para o curso de Design de Apresentação II. O logo representará a segunda parte de um curso já existente, portanto, a exigência é de que o ícone seja igual ao da primeira parte, alterando-se apenas a cor.

A feitura deste ícone será muito mais simples, pois ele já está pronto.

Observe, no arquivo do Illustrator, as especificações de tamanho dos ícones:

Especificações do Desenho

Mais abaixo encontramos as instruções sobre as cores:

Paleta de cores

Mais abaixo, estão alguns ícones já prontos:

ícones já protos

Ao mover um dos ícones é possível perceber que a parte aparentemente branca é, na verdade, transparente. Note também que existem dois tons de cores, a parte de cima é mais clara e a de baixo mais escura. A cor mais escura predomina em relação a tonalidade mais clara:

mostrando a transparência

Nessa aula a tarefa é duplicar o ícone e alterar sua cor.

Para duplicar um objeto basta selecioná-lo, copiá-lo e colá-lo em um dos retângulos vazios. Vamos fazer isso primeiro na primeira linha e repetimos o procedimento na segunda. Na segunda linha estão as versões em preto e branco dos ícones:

ícones já protos

É preciso aplicar uma cor de preenchimento, então, selecionamos a seguinte ferramenta:

ícones de mudança de cor

Outra opção é fazer a alteração de cor clicando nas camadas e redefinindo o tom. Para facilitar, existe um menu de amostras disponível na seguinte grade:

mostrando o ícone de paleta de cores

Mas, qual cor deve ser escolhida?

Lembre-se que o ícone refere-se a parte dois de um curso já existente. Nesse caso, a regra é fazer uso da cor menos utilizada na categoria na qual enquadra-se o curso. Para nos auxiliar nessa tarefa vamos observar, no site da Alura, a carreira de Design & UX:

carreira de design

Aparentemente a cor menos utilizada é o vermelho. Outra regra é que um mesmo curso pode ter até três versões de uma mesma cor. Não sabemos se haverão mais versões deste curso, portanto, vamos optar por seguir a primeira regra!

A imagem terá o preenchimento em vermelho:

ícone na cor vermelha

Assim, temos o primeiro ícone finalizado! Basta salvar o arquivo e por hora é só!

Compreendendo os ícones e conhecendo o material - Como surge a ideia de criar um ícone?

Vamos observar algumas representações gráficas simplificadas:

imagem de uma calculadora

A primeira forma, desenhada de maneira bastante simples, é uma calculadora. A segunda imagem representando algumas fotos juntas remete as polaroides antigas. A terceira imagem são discos rígidos e lembra armazenamento.

Note que todas as representações gráficas da imagem acima possuem características visuais muito próximas aos seus significados e, por isso, são chamadas de pictogramas.

Os pictogramas são desenhos figurativos, normalmente simplificados, mas que possuem características visuais muito semelhantes a seus reais significados.

A escrita cuneiforme, sistema de escrita talhada manualmente, e os hieróglifos egípcios são considerados as origens dos pictogramas. O sistema pictorial moderno teve os primeiros desenhos projetados por Otto Neurath e Gerd Arntz entre 1925 e 1934 em Viena. O sistema ficou conhecido por ISOTYPE - International System of Typographic Picture Education ou Sistema Internacional de Educação Tipográfica Pictória.

Vamos analisar mais alguns exemplos:

mostrando a calculadora

Os símbolos matemáticos do primeiro ícone transmitem a ideia de calculadora. A segunda figura lembra o obturador de uma máquina fotográfica, portanto, estabelece relação com fotografia. A terceira imagem é uma nuvem e remete a ideia de armazenamento virtual, isto é, "guardar na nuvem".

Essas imagens representam, respectivamente, as ideias de uma calculadora, fotos e armazenamento. Isto é, as mesmas concepções das representações que vimos nos primeiros ícones. A diferença é que, agora, são usadas ideias e conceitos para criarem as formas. Esse tipo de imagem é conhecida como ideograma.

Ideograma, são representações gráficas de ideias e conceitos. O termo também é utilizado para descrever caracteres de sistemas de escrita.

Mais alguns exemplos:

mais ícones

O primeiro símbolo, embora difícil de reconhecer, faz referência a uma famosa calculadora disponível online. A segunda imagem corresponde ao ícone de fotos do Iphone, por meio dele podemos acessar fotos armazenadas no celular. A terceira forma refere-se ao Google Drive que é uma ferramenta disponível para armazenamento online.

Esses três últimos ícones representam as mesmas ideias dos símbolos anteriores, isto é, uma calculadora, fotos e armazenamento virtual. A diferença é que eles não possuem significados atrelados as suas representações gráficas, na verdade, o significado foi atribuído as imagens. É por conhecermos os aplicativos que sabemos que eles possuem estas propriedades. Quando o significado é atribuído posteriormente a uma imagem e ele não possui relação com a forma chamamos de símbolos arbitrários.

Símbolos Arbitrários partem de um conceito abstrato ou de um conceito que não possui relação nenhuma com o significado. o significado é atribuído posteriormente ao símbolo.

Vamos observar os Pictogramas, Ideogramas e Símbolos arbitrários juntos:

mostrando ideogramas, símbolos arbitrários e pictogramas

A conclusão que chegamos é que existem maneiras diferentes de representar cada ideia. Na primeira coluna estão retratadas calculadoras, na segunda fotos e na terceira armazenamento. O que muda entre elas são as maneiras de simbolizar as ideias.

Sobre o curso Iconografia I: desenvolva representações gráficas a partir de uma identidade

O curso Iconografia I: desenvolva representações gráficas a partir de uma identidade possui 119 minutos de vídeos, em um total de 38 atividades. Gostou? Conheça nossos outros cursos de UI - User Interface em Design & UX, ou leia nossos artigos de Design & UX.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda UI - User Interface acessando integralmente esse e outros cursos, comece hoje!

  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?

Acesso completo por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas