Category: Web Design

Jakeliny Gracielly – Entrevista🎙Na mesa do Chief

Jakeliny Gracielly – Entrevista🎙Na mesa do Chief

Eae, tudo bele?
Hoje trago uma entrevista com a desenvolvedora Jakeliny Gracielly, do FCamara.
Além de desenvolvedora a Jake também é palestrante de tecnologia e participa da organização de Meetups como o Nerdzão, o NerdGirls e o WordPress SP.
Essa entrevista é diferente, pois foi gravada pessoalmente, AO VIVO literalmente, feito na empresa FCamara.
Nesse bate-papo nós conversamos sobre mercado de tecnologia, faculdade de tecnologia, posicionamento profissional entre outros assuntos. E também falamos sobre como é o mercado de tecnologia para mulheres. É fato que existem muito menos mulheres nesse segmento, por isso uma parte importante do vídeo é justamente sobre esse assunto.
Então senta, relaxa, pega um café e assista abaixo essa super entrevista.
Entrevista: David Arty e Jakeliny Gracielly

Conheça a Jakeliny Gracielly
Líder de desenvolvimento na FCamara e decodificadora da Matrix. Analista de sistemas e técnica em programação, trabalha há 5 anos em projetos de tecnologia e desenvolvimento. É co-organizadora de comunidades (WordPress São Paulo, Nerdzão e FC Tech), entusiasta de cyber security e inteligência artificial.
Siga a Jakeliny Gracielly:
Site: https://jakeliny.com.br/
Medium: https://medium.com/@jakeliny.gr
Twitter: https://twitter.com/jakelinygr
Instagram:
https://www.instagram.com/jakelinygracielly/
Gostou do vídeo? Eu gostei
Espero que o vídeo tenha sido útil para você, que você tenha gostado e que te ajude de alguma maneira, agregando conhecimento e informação para você seguir a sua trajetória profissional.
Aproveite que está aqui e deixe o seu comentário abaixo!
E não esqueça de ajudar o nosso canal curtindo e compartilhando com seus amigos o vídeo.
CLIQUEI AQUI e se inscreva no Canal do Chief e fique por dentro das novidades.
Forte abraço.
Até Mais.
The post Jakeliny Gracielly – Entrevista🎙Na mesa do Chief appeared first on Chief of Design.

Jakeliny Gracielly – Entrevista🎙Na mesa do Chief
Fonte: Chef of Design

Guia sobre Grid

Guia sobre Grid

Eae! Td bele?
Hoje vamos falar de Grids. Este artigo é um verdadeiro Guia sobre Grids.
Grids que são elementos fundamentais no design. Usamos eles para quase tudo: desde um cartão de visita até a criação de um site. Grid é o esqueleto dos nossos projetos auxiliando na criação, e por ter tal importância eu não poderia deixar de falar deles aqui no Chief, né?
Neste artigo vou falar do grid de uma forma mais ampla e que serve tão pro “online quanto pro gráfico”. Minha ideia não é ditar nenhuma regra e sim mostrar as principais possibilidades que temos, bele?
Então vamos começar!!
Neste artigo você descobrirá:

De onde vem os Grids
O que é um Grid
A anatomia de um Grid
A importância de se utilizar um Grid
Como criar um Grid
Como usar um Grid

Um pouco da história dos Grids
A utilização de grids é muita antiga, encontra-se casos de organização através de esquemas retangulares desde os  manuscritos. Com certeza Grids é mais antigo que o próprio design gráfico.

Nos primeiros impressos também encontramos grids definidos. E também é possível encontrar o termo grids na arte, na arquitetura, e na Gestalt.
Mas os grids ganharam mais força mesmo após a revolução industrial através de estudos como os de Theo van Doesburg , de  Jan Tschichold  no livro The New Typography (1928), e do movimento racional da Bauhaus.
Durante a Segunda Guerra, a Súiça, que era neutra, acolheu muitos refugiados intelectuais, incluindo nomes do design como o do próprio Jan Tschichold e Herbert Bayer. E esse grupo de artistas e designers refugiados ajudaram a formalizar e promover o uso da ferramenta que se tornou um ícone do design e do movimento suíço principalmente com seus cartazes famoso até hoje.
E toda essa racionalidade influenciou o design gráfico que a partir, principalmente dos anos 60, começou a usar largamente os Grids.

O que é um Grid
Grid é um elemento técnico-formal formado por um conjunto de linhas auxiliares na vertical e horizontal, ou de retângulos, que proporcionam uma estrutura para construção das nossas peças de comunicação visual, gráfico ou web, auxiliando na ordenação, distribuição, alinhamento e dimensão dos elementos gráficos (imagens, textos, formas).
A função principal do Grid é organizar as informações dentro de uma estrutura. É auxiliar o designer no sentido de conservar um padrão, uma consistência visual do layout  em  todas as suas telas, seja ela web ou gráfico.
A anatomia de um Grid
Cada parte de um grid tem um nome, uma função, por isso vamos conferir agora os elementos que compõem um grid. Vamos lá?
Margens
São os espaços negativos (em branco) entre o limite da página (borda) e o início do Conteúdo. As margens enquadram o conteúdo, auxiliam na questão do manuseio (quando se trata do impresso), dão “respiro” aos textos e imagens proporcionando também descanso dos olhos, além de servirem como um espaço para informações secundárias.

Guias horizontais
São os alinhamentos horizontais. As faixas quebram o espaço horizontalmente. São usadas para orientar os olhos na leitura e também para criar diferentes inícios, pausas, áreas de respiro (em branco) para os textos e imagens.

Colunas
São as estruturas verticais que criam divisões horizontais, delimitam o espaço a ser ocupado pelo conteúdo entre as margens. A largura e quantidade das colunas é indeterminado, depende do projeto e do que o designer definir ser o melhor.

Módulos
São unidades formadas através da junção da coluna com a linha base.

Zonas Especiais
São conjuntos de módulos, que formam uma unidade.

Calhas(gutters)
São os espaços em branco de separação entre colunas e linhas.

Marcadores
São elementos secundários localizados na parte externa (margem), como por exemplo, cabeçalhos, nomes de seções, paginação e etc.

A importância de se utilizar um Grid
Usar um sistema de “grid” permite projetar com mais facilidade, simplicidade, na organização dos elementos gráficos da peça, seja ela um site ou um cartaz.
Grid é tudo de bom, porque:
Podemos mais facilmente determinar o fluxo de leitura que queremos o nosso leitor tenha.
nos ajuda a projetar em proporções harmoniosas balanceando os pesos dos elementos gráficos do layout.
Permite criar peças mais eficazes.
Auxilia a posicionar os elementos com maior precisão.
Mas David, ele vai limitar minha criatividade?
Não!!! Relaxa, Galucho, não tem nada a vê isso.
Grid é usado há muitos anos pelos melhores designers do mundo.
Ele é uma ferramenta de suporte que nos ajuda na construção, no posicionamento dos elementos, etc.
O Grid não é limitador, pelo contrário, ele nos ajuda a dispor melhor o nosso layout.  Como já falei no artigo sobre Gestalt (veja aqui) é importante saber usar com parcimônia fatores variados como contraste, repetição, pregnância, etc. Não é porque você está usando um grid que precisa deixar tudo “alinhado a esquerda”, saka?
Ele será uma diretriz, mas um designer criativo saberá como “quebrar a regra” para atingir seu objetivo de comunicação.
Grid não é limitador para nada, seja um site ou um projeto gráfico, basta saber usar e “quebra-lo” quando precisar. Quebre as regras quando precisar.

Como criar um Grid
Primeiro você precisa saber qual será o suporte: Qual o tamanho da página, qual orientação, quais limitações. (você pode conferir mais sobre isso aqui).
Também precisa saber qual o conteúdo será diagramado e para que será diagramado?
É texto corrido de uma revista ou é uma capa de um livro? É um site portfólio de um fotógrafo com várias imagens grandes ou um portal de notícias com mais texto do que imagens?
A partir daí será possível definir a melhor maneira de organizar o conteúdo através do auxílio do Grid.
Existem várias formas de criar Grids, e o Indesign e o Photoshop (através de GuideGuide) fazem isso automaticamente.
Para web existem muitos Grids prontos (a maioria voltado para criação de websites) como o br.blurb.com, Modular Grid, Gridpak , Bootstrap responsive grid PSD .
E até Grids para a criação de ícone de IOS: Free App Icon Templates, iOS 7 Icon Template, iOS Icons Guidelines.
E você pode e deve criar o seu grid dependendo do projeto. Existem vários modos para isso.
Temos os famosos Grids de Villard e de  Jan Tschichold .

Mas uma dica útil e que serve para quase todos os caso é usar um grid modular através da  Proporção Áurea (um dia ainda escrevo sobre hehe). Existem outros modos de se alcançar essa proporção, mas o modo mais rápido é  dividir o seu layout em 3 partes iguais usando a regra dos terços e achar os quatros pontos áureos no layout.
E depois subdivido esses retângulos para achar mais pontos, subpontos, e assim  ganhamos inúmeras possibilidades.

Tipos de Grids
Existem várias maneiras de utilizarmos os grids. Irei mostrar a seguir os  modelos mais comuns.
Grid de uma coluna
É usado geralmente para textos grandes, corridos, contínuos, como livros, relatórios ,etc. Possui uma estrutura mais simples e basicamente é formado por apenas um bloco de texto.

Grid de duas colunas
Esse grid é mais flexível que a de uma coluna e normalmente é usado para conter grande volume de textos.

Pode ser utilizado para apresentar somente um texto ou textos independentes separados pelas colunas. Pode ser organizado com colunas de larguras idênticas ou diferentes.  Neste caso, normalmente para manter a proporção,  a mais larga tem o dobro da largura da coluna estreita.

Grid de múltiplas colunas
Nos dá mais flexibilidade que as anteriores. Também é usado para grande quantidade de conteúdo e pode utilizar colunas de larguras variadas. Websites, jornais, revistas, tabelas, etc; utilizam bastante esse tipo de grid.

Grid modular
Esse Grid utiliza colunas verticais mais múltiplas guias horizontais.
É geralmente utilizado em projetos mais complexos, como jornais, gráficos, etc. Os módulos proporcionam maior controle do conteúdo e dos espaços menores.

Grid hierárquico
O grid hierárquico é composto por zonas de hierarquias, como o próprio nome já diz, e dividi as telas, impresso ou online, horizontalmente.
É praticamente um grid de colunas horizontais com larguras diferentes.

Os sites na Internet utilizam bastante esse tipo de grid devido a estrutura usual e também ao conteúdo dinâmico e redimensionamento que ocorre por causa dos diferentes tipos de tela.
Mas não é somente para sites, esse grid se adapta às exigências do projeto, então podemos usá-los também em livros, revistas, cartazes, etc.
Como usar um Grid
Existem vários tipos de técnicas para a diagramação.  Irei mostrar as mais aplicadas no mercado.  Todas nós vemos no nosso cotidiano principalmente em revistas, jornais, anúncios e folhetos.  Porém cm o avanço da tecnologia e do design web, também é possível aplicar praticamente todas elas em interfaces web, claro que com alguns nuances hehehe.
Vamos conferir?
Técnica do “L”
Muito utilizado em diversas mídias, principalmente em revistas e jornais. Nessa técnica o posicionamento da mancha de texto, em relação a imagem acaba criando o formato da letra L.
A letra L pode ser usada em ambos os lados e de cabeça para baixo.

Técnica do “U”
O caminho por onde o texto corre, em relação a imagem acaba criando
a forma a letra U.

Técnica do “T”
Também temos a estrutura da letra T. Ela ajuda a dar sentido de continuidade.

Técnica do “H”
Também temos uma estrutura feita com a letra H. Podemos usar tanto o H maiúsculo quanto o minúsculo.

Técnica do “I”
Na estrutura da letra I criamos uma ou mais colunas. Ela é bem dinâmica e e pode conferir mais espaço para as imagens e por vezes até certa elegância ao layout.

Técnica de suporte
A estrutura de suporte é mais monótona e podemos colocar o texto tanto acima quanto abaixo da imagem. Apesar de um pouco “pobre”, na  web funciona bem, principalmente em blogs e sites com bastante texto.

Áreas de respiro e Ritmo de leitura
Precisamos dar atenção para as áreas de respiro que são as áreas brancas do layout que servem para deixa-la mais leve , clean, e menos cansativa. Por vezes, somente adicionando uma área de respiro você consegue modificar totalmente uma peça. Só basta saber usá-lo com coerência.

E também devemos prestar atenção no ritmo de leitura. Olhe o Primeiro exemplo como é confuso saber para onde devo seguir a leitura:

Já nesse outro caso é bem mais fácil saber para onde seguir, né?

É o Designer que determina o ritmo e direcionar a leitura, para onde ele quer que o leitor siga.
Vídeo – Grids no Design – O que é Diagramação? O que são Grids Design?
Abaixo deixo um vídeo que gravei para o meu curso Web Designer PRO sobre grids e diagramação. Nele falo tanto sobre grids para projetos digitais quanto gráficos.

Considerações Finais
Como podemos ver um sistema de grid é uma ferramenta que ajuda, e muitos os designers a organizar a informação de maneira coerente e harmoniosa.
Utilizar um grid com certeza é algo muito vantajoso, e de forma alguma vai prejudicar a sua criação, pelo contrário, vai ajudar para que suas ideias sejam postas de maneira mais clara e seu projeto mais estruturado.
Tudo isso que vimos até nesse post ainda é pouco comparado ao tanto de coisas que se tem para estudar e a para falar sobre Grids.
Então continue estudando aí que eu vou continuar daqui, bele?
E você, utiliza grids em seus layout? Comente abaixo!
Forte abraço.
Até mais.
Referências:
Livro: Crias Grids – 100 Fundamentos de Layout
http://blog.popupdesign.com.br/perguntas-frequentes-sobre-grids/
http://99designs.com/designer-blog/2013/03/26/history-of-the-grid-part-2/
http://www.graphics.com/article-old/brief-history-grids
The post Guia sobre Grid appeared first on Chief of Design.

Guia sobre Grid
Fonte: Chef of Design

Web designer vs Front-end

Web designer vs Front-end

Eae, tudo bele?
Web designer vs Front-end? O que faz um Web Designer e um Front-End? Quais as diferenças e semelhanças?
Essa dúvida é bem recorrente para os iniciantes e muitos acabam confundindo cada área e o que cada profissional faz. Por isso gravei um vídeo (ao final deste artigo) sobre o tema. Mas antes de você~e assistir ao vídeo (não ouse sair deste artigo sem ver o nosso vídeo, viu!) eu explicarei aqui mesmo neste artigo com detalhes sobre cada tópico.
Vamos nessa?
O que faz um Web Designer?

De forma sucinta, um Web Designer é um profissional que executa design para web. Por isso para compreendermos melhor sua função temos que conhecer o conceito de web design. Veja a seguir:
“Web design é uma área que executa processos que envolvem o planejamento, a criação e a manutenção de interfaces para websites, aplicações web e interfaces digitais em geral, levando em conta a arquitetura de informações, a navegação, a usabilidade e demais aspectos que devem envolver fundamentos de Design.”
Logo um Web Designer planeja, cria e mantém interfaces digitais para web considerando aspectos importantes do Design.
Precisa ser Designer para trabalhar com Web Design?
Se formar Designer será um diferencial para quem pretende criar interfaces para web, porém não acredito ser o primeiro caminho que você deva tomar levando em conta que muitos bons profissionais nem possuem essa formação.
É possível, portanto, se tornar Web Designer sem cursar Design Gráfico. Basta que você utilize todos os meios possíveis para aprender os conceitos de Design.
Pessoas trabalhando, conversando e sorrindo em uma reunião no escritório Por Morrowind /Shutterstock
Web Design é uma área que deriva em suma do Design gráfico, lógico que com suas particularidades que se refere a aplicação para dispositivos web, mas os principais conceitos, como Teoria das cores, Tipografia, Gestalt, Grid, Imagens, entre outros, são presentes para essa área.
Então você tem diferentes possibilidades de aprender esses conceitos. Você pode aprender em:

cursos onlines ou presenciais,
lendo livros,
consultando a web,
em contato com outros profissionais,
em congressos e palestras, etc.

Mais tudo isso só será tão forte quanto cursar uma faculdade se você pôr em prática no dia-a-dia.
Vale ressaltar que um curso superior em Design sempre será bem-vindo. A questão é que ele somente não é o suficiente para te tornar um profissional da área e nem tão pouco um Web Designer de sucesso.
O que é um Front-end?
É um profissional que trabalha com HTML, CSS e JavaScript, basicamente. Ele trabalha com a parte que o usuário “vê “na tela. É a “parte da frente” do site. Ele é responsável pelo “meio de campo” entre o usuário e o Back-End.
Caso não saiba o que é Back-End, trata-se do desenvolvedor ( ou programador) . Ele trabalha com, por exemplo, PHP, ASP, Java, entre outros. O “dev” trabalha com a parte que o usuário ” não vê “na tela. É a “parte de trás” do site.
Web designer vs Front-end?
Como vimos o Web Designer cuida da criação da interface gráfica, já o Front-End da codificação que tornará possível que a interface gráfica, feita no Adobe XD, Sketch ou Photoshop, por exemplo, seja acessada e utilizada.
Um layout em algum programa gráfico, como o Adobe Photoshop, é algo estático. Trata-se apenas de uma imagem. Então para que aquela interface se torne realmente algo utilizável com possíveis ações pelo usuário (como clicar em um botão, por exemplo) quando é implementado com códigos. Esses códigos sãos, no mínimo, HTML e CSS.
O profissional que faz essa implementação é o Front-End. Logo para isso ele utilizará de linguagens web como HTML, CSS e Javascript.
Para CSS e JavaScript existem várias bibliotecas e frameworks que muitos profissionais se especializam como: Angular, Bootstrap, Jquery, Sass, VueJS, entre outros.
Portanto, cada profissional tem seu papel dentro de um projeto de uma interface gráfica. Tanto o Designer, que planejará e construirá uma interface a fim de facilitar a utilização do sistema (e não só facilitar, mas também deixar mais bonito, por que não?) o Front-End developer será o profissional responsável por tornar realidade(realidade virtual no caso rsrsr) as funcionalidades e o todo o layout planejado e estruturado pelo Designer.
São áreas que se complementam, pois toda interface gráfica (ou quase todas) precisa de um Design, mas para esse Design funcione ele precisa ser implementado no código. Portanto um depende do outro e vice e versa. É óbvio que um site pode ser feito apenas por um Front-End, mas falando de sites profissionais e com objetivos comerciais e de comunicação, o Design se faz muito importante. Existem pesquisas que apontam que pessoas saem do site caso o layout não seja agradável, pois pode transparecer que a empresa é desleixada, que não é confiável ou até mesmo que é uma empresa antiquada.
Caso esteja a fim de fazer um curso online sobre Web Design e que também tem matérias de front-end como CSS3, HTML,CSS Flebox e CSS grid layout, WordPress, entre outros, eu te indico o nosso curso de Web Design: o Web Designer PRO (clique aqui para saber mais).
O curso é 100% online. Os conteúdos são disponibilizados em uma plataforma 24 horas no ar, sendo que você pode assistir as aulas a qualquer hora e qualquer lugar que tenha um dispositivo com acesso a internet. O acesso é ilimitado, você pode ver e rever as aulas quantas vezes achar necessário.
Já são mais de 100 vídeo aulas na plataforma divididas em módulos. A grande maioria do conteúdo está disponível em vídeos e contempla aulas teóricas e práticas com exercícios e exposições de temas sobre web design e outros relacionados. São também disponibilizados materiais extras para download que complementam as vídeo-aulas.
Como complemento das aulas oferecemos tarefas específicas para que observar o processo de seu desenvolvimento criativo.
Também disponibilizamos na plataforma um campo para você expor suas dúvidas.
Então se quiser saber mais sobre o curso, é só acessar http://www.webdesignercursos.com.br/
Vídeo Web designer vs Front-end?
Abaixo segue o vídeo que gravei para falar sobre esse tema. Nele falo sobre o que cada profissional faz e as diferenças entre cada área. Assista e confira:

Então é isso, Galucho! Se você gostou desse vídeo deixe o seu like e compartilhe com seus amigos eu tiverem interesse
E não esqueça de se inscrever em nosso canal no Youtube [CLIQUE AQUI ]
Deixe a sua opinião, dúvida e/ou experiência na área de Web design, nos comentários abaixo, bele?
Até mais.
Forte abraço.
Até mais.
The post Web designer vs Front-end appeared first on Chief of Design.

Web designer vs Front-end
Fonte: Chef of Design

O que é CSS?

O que é CSS?

Este artigo é dedicado a quem está interessado em trabalhar com o aspecto visual de sites através de códigos. E isso é possível através do CSS. Mas afinal, o que é CSS?
Possivelmente você está em suas primeiras pesquisas sobre desenvolvimento web, web design e afins, sabe que o CSS é um dos caminhos a se trilhar e precisa saber mais sobre essa linguagem. Portanto neste artigo você será apresentado a um conteúdo que vai te guiar para que você possa entender a sintaxe, criar os primeiros estilos e dar forma às primeiras páginas web.
Sem mais delongas vamos ver o que você verá neste artigo.

O que é CSS?;
O que é possível fazer com CSS?;
Requisitos para aprender CSS;
Benefícios da aplicação de CSS;
Regras CSS;
Tipos de seletores básicos;
Selecionando elementos aninhados;
Grupamento de seletores;
Declaração única;
Efeito cascata;
Herança;
Especificidade;
Vinculação das folhas de estilos ao documento HTML;
Como criar um arquivo CSS.

O que é CSS?

CSS, sigla em inglês para Cascading Style Sheet, que em português quer dizer Folha de Estilo em Cascata, é uma linguagem que cuida da apresentação visual de páginas web através de regras de estilos. Podemos resumir que é uma linguagem de estilização ou apresentação.
A história da Folha de Estilo começou a surgir quando seu criador Håkon Wium Lie constatou que não havia como estilizar documentos em uma plataforma para publicação eletrônica. Em novembro de 1994 em Chicago, Håkon apresentou a proposta inicial do CSS em uma Web conferência.
Esta linguagem consiste em dar forma aos elementos HTML presentes na página web. HTML e CSS são parceiros. O CSS só existe em função do HTML.
Ela pega uma página praticamente sem estilos e enriquece com cores, formas, tamanhos e até animações. E esta linguagem que define qual a cor de um texto, onde determinado bloco será posicionado, entre outros estilos.
E o que é muito bacana é que o CSS também é um recurso acessível para estilizar o que você projetou em seu editor gráfico através de suas propriedades.
Um dos maiores atrativos do CSS é separar a apresentação em um arquivo externo. Com isso o HTML, que antes estava com a função de marcar e apresentar visualmente o conteúdo, ficou responsável por somente estruturar o conteúdo através da marcação.
O que é possível fazer com CSS?
Com aplicação das folhas de estilos é possível fazer muita coisa. Só para citar algumas, você pode:

Estruturar o layout do site;
Posicionar elementos na página web;
Mudar a ordem de apresentação dos elementos HTML;
Colocar espaçamentos entre elementos;
Preencher com espaço vazio entre a borda de um bloco e seu conteúdo;
Colocar diferentes tipos de bordas de diferentes cores nos blocos;
Inserir bordas arredondadas aos blocos;
Colocar cor de fundo, gradiente ou imagem de fundo aos blocos;
Trabalhar com diversas propriedades para tipografia. Tanto que aqui no Chief tem um artigo dedicado a muitas delas. CONFIRA AQUI!;
Inserir sombras em textos e blocos;
Fazer pequenas animações, transições;
Ocultar elementos, entre tantas coisas.

Requisitos para aprender CSS
Para aprender CSS é necessário para você possuir boas noções de HTML. Se você não conhece nada de HTML aconselho ler esse artigo para introdução. Caso você queira se aprofundar tanto no HTML quanto no CSS sugiro adquirir o E-book Solidário de Fluência em HTML e CSS.
Você precisa também ter instalado em sua máquina um bom navegador tipo Mozilla Firefox ou Google Chrome e um editor para desenvolvimento web. Para começar a aprender o bloco de notas basta.
Benefícios da aplicação de CSS
Entre os principais benefícios destaco:

A separação da folha de estilo da marcação;
Facilidade de manutenção visual do site através de um arquivo externo;
Disponibilidade de diretiva para construção de layouts que atendam diferentes tipos de dispositivos.
Aumento na velocidade de carregamento de páginas.

Regras CSS
Através das regras CSS é que você vai conseguir dar forma as suas páginas web. Portanto a atenção nas informações que vêm a seguir é fundamental.
A regra CSS é um comando que serve para definir o estilo que um elemento HTML receberá. Ele é composto por um ou mais seletores, e uma ou mais declarações. As declarações estão contidas entre chaves e são formadas pela propriedade e o valor da propriedade. O seletor vincula um elemento do documento HTML a declaração CSS.
Uma regra básica segue o seguinte esquema:
seletor { propriedade: valor }
Na imagem a seguir você poderá os detalhes da regra.

Seletor: Ele é responsável por selecionar o elemento, ou elementos HTML que receberão determinado estilo.
Propriedade: Se refere às características visuais que um elemento pode possuir. Tomamos como comparação qualquer objeto que podemos medir suas dimensões. Altura e largura seriam propriedades deste objeto quando pensamos em tamanho. Os elementos HTML também possuem propriedades de altura e largura.
Valor: Corresponde ao produto da propriedade. Ou seja, ele define como o elemento será apresentado. Se um elemento tem uma altura, o valor corresponde ao seu tamanho seguida pela sua unidade de medida. Um bloco com 2 cm de altura possui a propriedade altura cujo valor é 2 cm.
Outro exemplo para fixar o conceito é selecionar um parágrafo (seletor) para que apresente no navegador uma cor (propriedade) e cujo valor desta cor é vermelha (valor). Veja na sequência como apresentaríamos esta regra para apresentar um parágrafo vermelho.p { color: red; }
“p” seleciona todo e qualquer elemento HTML <p> encontrado no documento.
A propriedade “color” define que queremos estilizar a cor dos parágrafos.
E “red”, que quer dizer vermelha, é a cor escolhida para os parágrafos.
Outro ponto importante a saber é que uma regra CSS pode ter mais que uma declaração. Veja:p {
color: red;
font-size: 14px;
}
Tipos de seletores básicos
Existem uma lista repleta de seletores com diferentes objetivos. Mas existem 3 tipos de seletores básicos cuja aplicação é constante e cujo conhecimento para iniciantes é obrigatório. São eles que apresentaremos aqui.
Para conhecer a lista completa visite o site da W3C.
Vamos agora aos 3 tipos básicos.
Seletor de tipo
Este seletor seleciona um elemento html específico para estilização. A sintaxe é bem simples. Depois de escolhido o elemento que você propõe estilizar basta digitá-lo antes da abertura de chaves da declaração, conforme exemplo a seguir para o elemento <h1>.h1 {
color: blue;
}
Como só deve existir um elemento <h1> por página somente ele recebe esta estilização. Mas caso o elemento estilizado aparece mais vezes no documento HTML todos receberão o estilo, a menos que um deles receba um seletor específico.
Seletor ID
Este seletor seleciona um elemento HTML cujo atributo id tenha o mesmo nome do seletor. Observe o seguinte elemento HTML:<div id=”wrapper”></div>
Acima vemos um elemento que possui o atributo id com o valor wrapper. O nome do valor é um nome de sua escolha que você acha melhor colocar. Você pode selecioná-lo digitando o nome do valor precedido por tralha (#). Veja a seguir:#container { background-color: yellow; }
Ao utilizar # estamos selecionando um elemento com atributo id. O elemento <div> que recebe o id com valor “wrapper” terá uma cor de fundo amarela.
Duas observações importantes. O valor do atributo id só pode ser usado em um elemento dentre todas as tags de uma página. E caso haja conflito entre duas regras o seletor ID prevalecerá. Entenda a seguir.
HTML:<div id=”container”></div>
CSS:div { background-color: blue; }
#container { background-color: yellow; }


/* Isso é um simples comentário em CSS */
O elemento <div> foi selecionado duas vezes para receber cores de fundo diferentes, mas ele somente receberá a cor amarela porque o seletor ID tem prioridade em relação ao do tipo que seleciona elemento.
Seletor class
Este seletor seleciona um ou mais elementos HTML cujo atributo class tenha o mesmo nome do seletor. O fato deste tipo de seletor poder selecionar mais que um elemento HTML torna-o mais vantajoso em relação o do tipo id. Com uma simples regra é possível definir estilos que poderão ser aplicados por todo documento HTML onde exista necessidade de repetir estilos. Com isso economiza-se código e tempo de desenvolvimento. Observe o código HTML a seguir.<header class=”container”></header>
<section class=”container”></section>
<footer class=”container”></footer>
Digamos que você deseja que ambos tenham um padding (propriedade esta que preenche com um espaço vazio entre a extremidade do elemento até a área do conteúdo) de 15 pixels. Em vez de você criar uma regra para cada elemento você cria uma para o valor do atributo class que é “container”..container { padding: 15px; }
Note que antes de colocar o nome do seletor ele é precedido por um ponto para que funcione.
Observação sobre nomes de IDs e classes
Os nomes de IDs e classes é algo que você “cria”. Mas não é indicado inventar números e caracteres especiais. Simplifica as coisas usando apenas letras.
Esses nomes não devem ter espaço em branco. Espaço em branco em um atributo de um elemento HTML indica que existem dois seletores. Veja:<div class=”bloco maior”></div>
Isso não indica que exista uma class com seletor .bloco maior, e sim que existem duas classes, .bloco e .maior.
Selecionando elementos aninhados
Em muitos casos você terá a necessidade de criar um seletor para um elemento aninhado e para isso você precisará indicar o caminho que indica os elementos antecedentes. Observe a lista com links a seguir:<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”sobre.html”>Sobre</a></li>
<li><a href=”contato.html”>Contato</a></li>
</ul>
Você quer definir um tamanho de fonte de 14 pixels e poderia simplesmente fazer da seguinte forma.a { fonte-size: 14px; }
Daria certo. Mas agora imagine que você tenha mais links na página onde não deseja esse valor. Então estilizar “a” não seria a melhor solução.
Poderia então criar uma class para o elemento da lista. Mas repare a seguir no HTML.<ul>
<li><a href=”home.html” class=”tamanho-fonte”>Home</a></li>
<li><a href=”sobre.html” class=”tamanho-fonte”>Sobre</a></li>
<li><a href=”contato.html” class=”tamanho-fonte”>Contato</a></li>
</ul>
É um pouco trabalhoso colocar um atributo class em cada elemento, imagine uma lista com muitos elementos. E também é uma decisão pouco inteligente.
A melhor forma nesse caso é indicar os elementos antecedentes do elemento “a”. Veja a seguir.ul li a { font-size: 14px; }
Simples assim. Você coloca os elementos que precedem o “a” antes dele e com espaço entre ambos.
A regra com aninhamento também pode ser aplicada quando presente os outros tipos de seletores. Veja:<ul class=”menu”>
<li><a href=”home.html”>Home</a></li>
<li><a href=”sobre.html”>Sobre</a></li>
<li><a href=”contato.html”>Contato</a></li>
</ul>
Agora o CSS:.menu li a { font-size: 14px; }
Grupamento de seletores
Um uso também comum em CSS é em uma mesma declaração você colocar mais que um seletor com separação por vírgula. Veja a seguir:article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
O código acima pega todos elementos acima e informa que eles devem ser elementos em bloco. Esses elementos foram introduzidos no HTML5 e este código é um recurso para que navegadores antigos os reconheçam como elementos em bloco.
Mas você pode utilizar mais que um seletor não só para elementos HTML mais também mesclando os outros tipos de seletores. Veja a seguir:span, a, #seletor-1, .seletor-2 { font-weight: bold; }
Este código acima negrita os textos dos elementos selecionados.
Declaração única
Existem alguns casos que temos propriedades que atuam separadamente para resultar em estilo, mas que podem estar reunidas em uma só declaração. É o que chamamos de declaração única. Este tipo abrevia declarações reunindo todos seus valores em uma só.
Isso é muito útil para diminuir código e ganhar tempo.
Podemos tomar como exemplo as seguintes propriedades que estilizam borda.
Border-width: Propriedade que define a espessura da borda;
Border-style: Propriedade que define o tipo de borda (contínua, tracejada, etc);
Border-color: Propriedade que define a cor da borda;
Para reunir os valores das 3 propriedades podemos utilizar uma propriedade única chamada border.
Veja as seguintes declarações para uma div:div {
border-width: 1px;
border-style: solid;
border-color: black;
}
Agora a junção de seus valores em uma declaração única usando border.div {
border: 1px solid black;
}
Efeito cascata
O efeito cascata estabelece qual regra é prioritária na aplicação de estilo de um elemento. Ela é importante quando um elemento está recebendo mais que um valor de uma determinada propriedade através de regras diferentes gerando um conflito.
Imagine que uma regra determine que um contêiner receba a cor de fundo amarela e outra regra determina a cor de fundo azul. Neste momento alguns fatores vão determinar qual estilo será aplicado, como a localização da folha de estilo, a ordem da declaração da regra e a especificidade.
Herança
Algumas propriedades quando aplicadas a elementos pais são herdadas por elementos filhos. A isso chamamos de herança.
Elementos filhos são os elementos contidos no elemento pai. Veja seguir:<div>
<p>Este é um elemento filho de “div”.</p>
</div>
Digamos que definimos um valor de font-size (tamanho da fonte) para a <div> (elemento pai). Automaticamente o elemento <p> (elemento filho) herdará esse valor caso não for especificado outro valor de font-size específico para ele. Veja:div {
font-size: 14px;
}
p {
color: red;
}
No exemplo vemos que além de receber a cor vermelha o parágrafo também terá 14 pixels de tamanho de fonte herdado automaticamente de <div>.
Logicamente que nem todas as propriedades são herdadas. Você pode usar o valor inherit para força a herança. Veja no exemplo a seguir:div {
border: 1px solid #000000 /* borda de um pixel de cor preta */
}
p {
border: inherit;
}
O elemento <p> herda a borda de <div>. Toda vez que alterar o valor da declaração do elemento pai a característica vai ser replicada no elemento filho que recebe o valor inherit.
Especificidade
Isso vai acontecer com você no futuro. Você vai ter um texto com uma cor, mas ao verificar seu CSS você está vendo que o valor está indicando outra cor. Isso vai fritar sua mente.
O porque disso é que em uma página web pode ser que um elemento HTML esteja vinculado a diferentes regras CSS ao mesmo tempo gerando um conflito. A especificidade pode atuar determinando qual regra é prioritária. Vamos ao código HTML a seguir.<p>Você está lendo um artigo sobre CSS.</p>
<p>Também conhecido como Folha de Estilo em Cascata.</p>
<div>
<p>Esses são seus primeiros passos sobre a linguagem.</p>
</div>
E agora o CSS.p { color: red; }
Sem segredos. Todos os elementos possuem a cor vermelha.
Mas em muitos momentos seu projeto precisará de um estilo específico e não depender de uma regra genérica. Agora vamos a novas regras.p { color: red; }
div p { color: blue; }
Agora inserimos um novo seletor que muda a forma de estilizar os parágrafos. Os parágrafos continuam recebendo a cor vermelha, menos o parágrafo dentro da div que recebe uma regra específica que determina a cor do parágrafo como azul. Essa regra tem prioridade sobre a regra genérica com seletor “p”.
Vinculação das folhas de estilos ao documento HTML
A vinculação das folhas de estilos ao documento HTML é uma forma de fornecer estilos à página web. Existem 4 formas de fazer essa vinculação.

Por folha de estilo externa;
Por folha de estilo incorporada;
Por folha de estilo em escopo;
e por folha de estilo inline.

Folha de estilo externa
Para se obter uma folha de estilo externa temos que declarar as regras CSS em um arquivo a parte com e extensão .css. Com este tipo de vinculação você pode mudar um estilo no site inteiro apenas com uma pequena alteração no arquivo CSS.
A vinculação da folha de estilo externa pode se dar de 3 maneiras. Vamos a elas:
Linkando o arquivo através do elemento HTML ‹link›<head>
<link rel=”stylesheet” type=”text/css” href=”estilos.css”>
</head>
Acima vemos a primeira e mais comum forma de vinculação de folha de estilo externa. Uma observação importante é que o código deve estar entre as tags de abertura e fechamento do elemento head.
Usar folha de estilo de forma externa traz a vantagem de você deixar a página HTML menor, com um carregamento mais leve e você pode usar o mesmo arquivo CSS em diferentes páginas.
Importando o arquivo dentro do arquivo CSS externo@import url(estilos-extras.css);
.um-seletor-qualquer {
margin: 0;
padding: 0;
background-color: #ff0000;
font-size: 18px;
}
Note que para fazer a vinculação utilizamos a diretiva @import e ela deve ser declarada na folha de estilos antes de qualquer regra.
Importando o arquivo dentro do HTML
Este tipo faz a vinculação dentro do documento HTML entre as tags de abertura e fechamento do elemento head, através do elemento ‹style›, mas usando a diretiva @import antes das regras CSS.<head>
<style type=”text/css”>
@import url(estilos-extras.css);
</style>
</head>
O uso da diretiva @import não é a mais indicada para incorporação de folha de estilo externa devida a problemas de performance. Procure, sempre que possível, usar o elemento ‹link›.
Folha de estilo incorporada
Folha de estilo incorporada também conhecida como folha de estilo interna é aquela que você vincula dentro documento entre as tags de abertura e fechamento do elemento head, através do elemento ‹style›. Veja como a seguir:<head>
<style type=”text/css”>
.um-seletor-qualquer {
margin: 0;
padding: 0;
background-color: #ff0000;
font-size: 18px;
}
<style>
<head>
Este tipo de vinculação é indicada para aplicar em uma página única, ou seja, somente a página que tiver a folha de estilo incorporada receberá os estilos.
Folha de estilo em escopo
A folha de estilo em escopo também é utilizada dentro do documento HTML, mas o que difere das incorporadas é que elas ficam dentro de um contêiner de marcação HTML e os estilos somente serão aplicados para os elementos dentro deste contêiner. Veja a seguir.<div>
<style type=”text/css” scopped=”scopped”>
/* Aqui vão as regras CSS */
</style>

<!– Aqui vão os elementos HTML que receberão os estilos

</div>
Folha de estilo inline
Folha de estilos inline é quando uma declaração CSS é incorporada dentro de uma tag de abertura de um elemento através do atributo style. Veja a seguir.<p style=”font-size: 14px; color: #ccc; text-align: center;”>Aqui está um parágrafo de cor cinza alinhado no centro.</p>
Este tipo de vinculação deve ser desencorajado por misturar marcação com apresentação onde se perde as vantagens de se utilizar o CSS.
Como criar um arquivo CSS
Quando os estilos CSS estiverem dentro do arquivo HTML, obviamente a extensão será .html. Agora um arquivo com estilos separados para ser vinculado ao site deve ser salvo com a extensão .css.
Você pode até criar logo de cara um arquivo CSS. Mas faz mais sentido antes de criar este arquivo ter acesso aos elementos que serão estilizados. Então você precisa primeiro de um arquivo HTML.
Vamos então a uma página básica com um simples parágrafo. E nele insira uma folha de estilo externa. Você pode nomeá-la como estilo.css ou outro nome que desejar e que seja relacionado com o projeto.<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Minha primeira página com meus estilos CSS</title>
<link rel=”stylesheet” href=”estilo.css”>
</head>
<body>
<p>Esta página possui a cor de fundo azul conforme valor declarado na regra CSS dentro do arquivo “estilo.css”</p>
<p>O texto usado possui a cor branca.</p>
</body>
</html>
Você pode salvar o documento com o nome que desejar desde que tenha a extensão .html. A imagem a seguir mostra uma página sem seus estilos CSS.

Com o HTML salvo você já pode estilizar os elementos.
Utilizando seu editor de códigos preferido abra um novo documento. Se ele permitir escolha que deve ser um arquivo do tipo CSS. Aqui no exemplo vou utilizar o bloco de notas.
Digite suas primeiras regras CSS. Como você ainda não conhece muito sobre propriedades copie o código a seguir:body {
background-color: #05a4e7;
margin: 0;
padding: 2em;
font-size: 1.2em;
}
p {
color: #fff;
}
Salve o arquivo com o nome do arquivo conforme está dentro da tag do elemento <link>. Você pode salvar na mesma pasta que salvou o arquivo HTML.
Não esqueça de digitar e extensão .css. Escolha também no bloco de notas o tipo como “Todos os arquivos” e a codificação UTF-8.

Vá para o local onde você salvou o documento HTML e abra o arquivo clicando duas vezes sobre ele.
Você verá a página aberta no navegador principal instalado em sua máquina.

Lógico que o resultado é simples porém é mais apresentável do que a página sem estilos.
Agora o próximo caminho é conhecer as propriedades CSS. Você pode começar aos poucos por aquelas com uso mais acentuado. Aqui no Chief você pode encontrar uma lista com explicação de propriedades bastante usadas que eu sugiro a leitura.
Conclusão
Este guia só foi o pontapé inicial para você começar aplicar as primeiras regras em CSS. A partir dele você já pode criar suas primeiras folhas de estilo, executar todos os tipos de vinculação e fazer pequenas estilizações.
Mas os estudos precisam avançar! Por isso deixo uma lista útil de artigos do Chief of Design sobre CSS para você consultar posteriormente.
CSS e suas Propriedades mais usadas!
Tipografia para web – Parte 01
Como usar o CSS3 media queries para que seu site atenda a diferentes resoluções de tela
Flexbox CSS3 – Guia para iniciantes
CSS Grid Layout – Guia introdutório
CSS3 Animation – Tutorial para iniciantes
Espero que este artigo tenha sido útil e esclarecido suas dúvidas iniciais. Quaisquer dúvidas deixe um comentário.
Abraço!
The post O que é CSS? appeared first on Chief of Design.

O que é CSS?
Fonte: Chef of Design

O que é HTML?

O que é HTML?

Se você chegou até este artigo é provável que no mínimo saiba que o HTML é uma linguagem para construção de websites. É bem possível também que tenha interesse em descobrir sobre o processo para desenvolvimento de websites.
Pois bem. Como iniciante, começar com HTML é o caminho mais indicado, pois te trará um resultado visual mínimo em pouco tempo de estudo e porque se trata da linguagem base para estruturação de páginas web.
Tá a fim de aprender a construir páginas web? Então te convido a continuar a leitura deste artigo que vai te mostrar os princípios básicos desta linguagem que foi o ponto de partida para muitos desenvolvedores e web designers de sucesso e que pode ser o seu também.
Neste artigo você encontrará a definição de elementos, atributos, tags, termos esses comuns e relacionados ao HTML. Conhecerá alguns elementos básicos e suas estruturas de marcação. E entenderá também a estrutura de uma página web comum construída com puro HTML.
Neste artigo você verá:

O que é HTML?
Para que o HTML serve?
O HTML integra as linguagens que formam as camadas de desenvolvimento web
Vale a pena aprender HTML?
Os requisitos para aprender HTML
O que são tags e o que são elementos HTML?
Sintaxe HTML
Elemento HTML

Elementos vazios
Elementos dentro de outros elementos
Atributos
Estrutura básica do HTML [Montando sua primeira página web]

O que é HTML?

HTML é um acrônimo para HyperText Markup Language, que em português quer dizer linguagem de marcação de hipertexto. Se trata de uma linguagem de marcação que usamos para publicarmos conteúdo (texto, imagem, vídeo, áudio e etc) na Web.
Para que o HTML serve?

Serve para que o navegador o interprete, informando-o como estruturar a página web, e exiba seu conteúdo quando você acessa essa página pela internet.
O HTML integra as linguagens que formam as camadas de desenvolvimento web
Quando acessamos uma página web a interface resultante, em grande parte dos casos, é obtida através de 3 camadas com funções diferenciadas. Cada camada é representada por uma linguagem específica.
É importante que você saiba da existência dessas camadas para entender que o HTML não trabalha sozinho. As outras linguagens que formam a camada de desenvolvimento são o CSS e o Javascript. Grande parte das páginas web são formadas por códigos das 3 linguagens.
HTML – A camada que apresenta o conteúdo
Podemos dizer que o HTML é a primeira camada. É nesta camada que atribuímos semântica ao conteúdo. É onde podemos dizer que determinada informação é um parágrafo, que determinado texto é um artigo, etc.
O HTML é responsável por exibir o conteúdo dando-lhe significado.
CSS – A camada que dá forma aos elementos do HTML
O CSS é uma linguagem de estilização, formatação. Quando você vê um texto com determinada estilo, uma página com determinada cor de fundo ou um bloco envolto a uma borda saiba que tudo isso foi obtido com CSS.
O CSS seleciona um elemento do HTML para estilizá-lo e apresentá-lo como nova forma no navegador.
Javascript – A camada que adiciona comportamentos dinâmicos
Quando o usuário está em contato com a interface de uma página pode a qualquer momento executar uma ação que resulte em um comportamento na página. Muitos desses resultados devem-se a acionamentos de scripts criado pela linguagem Javascript.
Um exemplo bem comum de comportamento dinâmico obtido com Javascript é quando ao preencher um formulário erramos o e-mail é o sistema nos avisa.
Mas o HTML é o fundamental
O HTML é a linguagem base e a primeira que acredito que deve ser aprendida. Ela é tão importante que tanto o CSS quanto o Javascript vinculam em seus códigos elementos, classes ou identificadores HTML para que uma ação seja executa dentro do arquivo HTML.
Entender as camadas de desenvolvimento web te ajudará na compreensão de como as linguagens se relacionam e também como a área de desenvolvimento atribuem as funções entre seus colaboradores.
A seguir deixo um material mais aprofundado em vídeo que ilustra bem as camadas web.

Vale a pena aprender HTML?

Se seu objetivo é mesmo construir sites, vale a pena aprender HTML. Mesmo que você tenha dúvida se é difícil ou trabalhoso, vale pelo menos começar a ter contato com a linguagem para você avaliar.
As opiniões são divididas sobre o nível de dificuldade em aprender o HTML. Lógico que a absorção de conhecimentos não é a mesma em todas pessoas, porém qualquer receio não te deve paralisar na meta de aprender.
Já nos primeiros contatos com o HTML você conseguirá visualizar resultados animadores em seu navegador com os primeiros conteúdos expostos. É isso te animará no decorrer dos estudos.
O que faz valer a pena começar a aprender esta linguagem são os fatos de você já começar a entender todo o funcionamento que envolve a confecção de páginas, a construir suas primeiras páginas, a entender e interpretar códigos para fazer a manutenção de sites e saber se comunicar com equipes de trabalho sobre detalhes que envolvem a codificação.
Sem contar que para aprender outras linguagens que envolvem a construção de sites é pré-requisito já dominar o HTML.
Requisitos para aprender HTML

Para que você aprenda HTML é suficiente ter conhecimentos básicos de informática. Também é necessário que esteja instalado em sua máquina um software que possibilite a manipulação de códigos. O bloco de notas consegue executar a tarefa e ele te força aprender por não ter nenhum recurso que autocomplete códigos.
Softwares são criados e descontinuados, por isso vou indicar dois que uso que estão ativos no momento que escrevo este artigo, e que você pode usar quando já tiver um bom domínio e quiser algo que agilize seu trabalho. São eles; o Sublime Text e o Notepad ++. Mas você é livre para pesquisar sobre editores HTML até encontrar aquele que te traga melhores benefícios.
O que são tags e o que são elementos HTML?
Quando se fala em trabalhar com códigos HTML temos em mente que existe uma forma lógica para dispor o conjunto de caracteres para construção desses códigos que mostrarão o conteúdo. Se trata da sintaxe. A forma trabalhada no HTML são através de tags.
Tags são marcas específicas, instruções que delimitam o conteúdo e informam ao navegador sobre que tipo de informação se trata (um título, um parágrafo, uma lista). Quando você enxerga um elemento visual em una página web, desde um texto, uma foto ou um vídeo, saiba que eles são inseridos através de tags.
Toda tag contém um nome (nome da marca) e este também dá designação ao elemento HTML. Elas são usadas para marcar o início e o final de um elemento. A partir daí podemos concluir que os elementos HTML são construídos por tags.
Elementos especificam como documentos HTML devem ser construídos. Através deles pode-se determinar qual tipo de conteúdo e onde ele, dentro do documento HTML, pode ser inserido e também transmitir significado semântico ao conteúdo inserido.
Vamos agora expor melhor na sintaxe HTML como as tags formam os elementos HTML.
Sintaxe HTML
Cada elemento é formado por uma tag de abertura e uma tag de fechamento. E entre essas tags é colocado o conteúdo.
Tag de abertura
A tag de abertura marca o início do elemento. Ela inicia-se com o sinal de menor <, seguindo pelo nome da tag que representa o elemento que queremos inserir no documento HTML e finalizando com o sinal de maior >.
Para exemplificar vamos usar a tag que instrui para inserção de um parágrafo (p).

Tag de fechamento
A tag de fechamento marca o fim do elemento. É similar a tag de abertura e se diferencia pelo uso de uma barra após o sinal de menor. Então, inicia-se com o sinal de menor <, seguido pelo sinal de barra ⁄, depois pelo nome da tag que representa o elemento que queremos inserir no documento HTML e finalizando com o sinal de maior >.

A seguir temos mais um vídeo que ilustra bem didática a sintaxe web. Confira!

Agora o que falta é entender como forma o elemento.
Elemento
Vamos continuar usando o parágrafo como exemplo. Para desenvolver o elemento primeiro colocamos a tag de abertura <p>, depois a informação que queremos exibir, e para encerrar a tag de fechamento </p>.<p>Este é um parágrafo.</p>

Elementos vazios
Existem alguns elementos que possuem apenas a tag de abertura. São chamados elementos vazios ou nulos. A tag de abertura destes elementos possuem fechamento automático.

Vamos ver um exemplo com a tag usada para quebra de linha em textos:<p>Av. Itaquera, 1000 – Itaquera<br>São Paulo – SP</p>
Neste caso vemos um parágrafo onde após o elemento <br>; a linha é quebrada e o conteúdo continua na linha seguinte.
O uso do elemento do vazio é simples assim com somente uma tag. Não existem conteúdos entre tags de abertura e fechamento como nos elementos comuns.
Em alguns casos você poderá encontrar elementos nulos com auto-fechamento. Eles geralmente são encontrados em uma versão extensível do HTML, o XHTML. O resultado das duas versões é o mesmo. Veja a seguir o resultado:<p>Av. Itaquera, 1000 – Itaquera<br/>São Paulo – SP</p>
Elementos dentro de outros elementos (Aninhamento)
Será comum para você, quando tiver lidando com códigos HTML, ver um elemento dentro de outro. A este comportamento chamamos de aninhamento, onde se costuma também dizer que o elemento que contém, que abriga o elemento interno é o elemento “pai” (elemento ancestral) e o abrigado é o elemento “filho” (elemento descendente).
Vamos a um exemplo:<p>O Web Designer PRO é <strong>o curso oficial de web design</strong> do Chief of Design. <strong>Não aceite imitações!</strong></p>
No exemplo acima temos um elemento pai (p) que contém dois elementos filhos (strong). Portanto strong, tag usada para enfatizar trecho de uma frase, está aninhada dentro de p.
Atributos
São instruções extras que damos a um elemento HTML para que se execute um comportamento específico. Estes atributos são inseridos nas tags de abertura.
Digamos que queremos que um texto venha a possuir uma cor vermelha. Podemos inserir na tag de abertura um atributo chamado “class”. Class se significa “classe”. Com essa classe podemos acionar a tag (que está com a determinada class) com a linguagem de formatação CSS e assim alterar a cor do texto para vermelho.
A inserção do atributo se dá da seguinte forma na tag de abertura:

Primeiro insira o sinal de menor < seguido do nome da tag do elemento a ser inserido.
Em seguida deixe um espaço vazio.
Depois coloque o nome do atributo a ser usado seguido de um sinal de igual ₌.
Logo após abra duas aspas e coloque dentro um valor para o atributo.
Para encerrar coloque o sinal de maior >.

Um exemplo da sintaxe:<p class=”altera_Cor”>Texto vermelho</p>
Nem todos os tipos de atributos são usados por todos elementos, alguns são específicos para cada tipo de elemento. Quando um atributo pode ser usado em qualquer elemento HTML ele faz parte dos atributos globais.
É importante conhecer os atributos, entretanto a princípio eu aconselho a focar em conhecer os elementos HTML para em segundo momento conhecer os atributos. Você pode consultar mais sobre atributos neste link.
Estrutura básica [Montando sua primeira página web]
Agora te explicarei em passos simples como montar sua primeira página web. Não espere nada avançado. É como aprender a dirigir: começamos pela primeira marcha. No nosso caso, uma página com conteúdo simples.
Vamos montar a estrutura mais básica usando elementos HTML estruturais comuns e fundamentais em qualquer página.
O que vamos precisar?
Você pode optar por fazer o que proponho a qualquer momento. Mas de toda forma vou te passar o processo em etapas, que no total nem leva 5 minutos para executar, e dentro das etapas explico a função de cada elemento usado.
Tudo que você precisa é abrir em sua máquina um editor de texto estilo bloco de notas ou seu editor favorito. Opcionalmente você pode até deixar preparada uma pasta para salvar este arquivo e possíveis arquivos que você venha a criar como forma de estudo.
Passo 1 – Inserção do elemento html
O elemento html é a raiz do documento. Ele é formado pela tag de abertura <html> e pela tag de fechamento </html>. Essas tags delimitam o documento.
Abra um novo documento em seu editor e digite as tags do elemento html da forma a seguir:<html>
</html>
No código acima podemos notar que iniciamos, na primeira linha com elemento raiz cuja abertura deu-se com a tag <html> e seu fechamento se concretiza na última linha com a tag </html>.
Passo 2 – Inserção do elemento head
O elemento head é responsável por abrigar elementos do cabeçalho. É comum encontras elementos para estilos, scripts e meta tags. Ele é formado pela tag de abertura <head> e pela tag de fechamento </head>. Essas tags delimitam o documento.
O elemento head é “filho” do elemento “html”.
Para esse segundo passo coloque as tags de head entre as tags de abertura e fechamento do elemento html conforme a seguir:<html>
<head>
</head>
</html>
OBSERVAÇÃO: Você pode notar que antes das tags de head existem espaços em branco. Esse comportamento é resultado da indentação. Indentação consiste em organizar seu código para que ele fique esteticamente agradável e principalmente legível.
Você pode indentar seu código usando a tecla TAB antes das tags.
Passo 3 – Inserção da meta tag que informa o formato de codificação de caracteres
Meta tags são responsáveis por fornecer informações importantes sobre o documento HTML. Com elas é possível passar informações que descrevem o conteúdo da sua página para os buscadores, informar qual o idioma usado na página, informar quem é o autor do código, entre outras funções.
Nesse passo vamos usar uma meta tag que informa o formato de codificação de caracteres. Isso para que sua página não fique com caracteres estranhos como na imagem a seguir.

Nesta meta tag usaremos o atributo charset e o valor utf-8.
Insira entre as tags de abertura e fechamento do elemento head a metag tag.
OBSERVAÇÃO: Esta meta tag é um elemento vazio.<html>
<head>
<meta charset=”utf-8″>
</head>
</html>
Passo 4 – Inserção do elemento title
Esse elemento é responsável pela exibição título que você vê na parte superior do seu navegador (barra de ferramentas).
Ele é formado pela tag de abertura <title> e pela tag de fechamento </title>. O conteúdo que você digitar entre essas tags será o texto que aparecerá na parte superior do navegador.
Insira entre as tags de abertura e fechamento do elemento head, e logo após a meta tag, as tags do elemento title conforme a seguir:<html>
<head>
<meta charset=”utf-8″>
<title>Minha primeira página web</title>
</head>
</html>
OBSERVAÇÃO: Você é livre para digitar o conteúdo que bem entender entre as tags de title. Faça o teste.
Passo 5 – Inserção do elemento body
Esse é um elemento fundamental dentro do documento HTML. Ele ilustra o corpo da página. E através dele que é possível exibir conteúdos na página. Entre as tags deste elemento é que vão ser inseridas outras tags específicas para inserção de conteúdo e divisão de seções.
O elemento body é formado pela tag de abertura <body> e pela tag de fechamento </body>.
Insira entre as tags de abertura e fechamento do elemento html, e logo após a tag de fechamento do elemento head as tags do elemento body conforme a seguir:<html>
<head>
<meta charset=”utf-8″>
<title>Minha primeira página web</title>
</head>
<body>
</body>
</html>
Passo 6 – Inserção do DOCTYPE
Prometi para você mostrar as tags fundamentais em uma página. Nos passos apresentados você teve contato com elas. Entretanto existem um elemento adicional importante, que não se trata de uma tag, e deve constar dentro documento HTML, Falo do DOCTYPE.
DOCTYPE é uma declaração responsável por dizer aos navegadores qual a versão do HTML que foi escrito o documento. Essa declaração deve estar posicionada no começo do documento.
A versão mais comum encontrada em sites no momento que escrevo este artigo é o HTML5. Também é a versão mais simples de declarar. Você pode conhecer os outros tipos de declaração neste link.
Aqui vou exemplificar uso do DOCTYE para o HTML5. Para declara basta que você digite o seguinte código na primeira linha de seu editor antes da tag de abertura do elemento html.<!DOCTYPE html>
Veja a seguir como deve ficar o código:<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Minha primeira página web</title>
</head>
<body>
</body>
</html>
Passo 6 – Salvar o documento HTML
Salve o arquivo no seu computador na pasta de seu escolha.
Caso use o bloco de notas, no menu selecione “Arquivo” e depois “Salvar como”.
Nomeie o arquivo “index.html”. Você pode definir até outro nome para o arquivo, porém a extensão deve ser .html.
Em tipo seleciona a opção “Todos os arquivos” e defina a codificação como “UTF-8”.

Passo 7 – Visualize a página no seu navegador
Vá para o local onde você salvou o documento HTML e abra o arquivo clicando duas vezes sobre ele.
Você verá a página aberta no navegador principal instalado em sua máquina.
Entretanto os passos NÃO PARAM por aí, porque apesar de termos uma página HTML pronta ainda não é possível ver o conteúdo. No exemplo, você somente verá o título da página no topo do navegador.

Mas não fique decepcionado. Mostrarei mais dois elementos HTML bastante usado em páginas web que mostrarão enfim sua página com conteúdo no próximo passo.
Passo 8 – Inserção dos elementos h1 e p
O elemento h1 é responsável por exibir o título mais importante no corpo da página. Não confundir este título com o título do elemento title. Como você já sabe o title exibe o título no topo do navegador.
O elemento p é um velho conhecido. Ele é responsável por inserir parágrafos.
Esses elementos serão inseridos entre as tags de abertura e fechamento de body. Proceda conforme o código a seguir. Você pode alterar os conteúdos entre as tags dos elementos se preferir.<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Minha primeira página web</title>
</head>
<body>
<h1>Minha primeira página web</h1>
<p>Aprendi a construir minha primeira página web com o Chief of Design.</p>
</body>
</html>
Salve o arquivo no mesmo local que você salvou a última vez. Seu sistema alertará se você quer substituir o arquivo. Substitua.
Após isso, vá até o arquivo e abra para visualizar no navegador. Você terá um resultado similar a este:

Lógico que é o resultado obtido foi algo simples. Ao adquirir o conhecimento sobre as outras tags existentes você pode evoluir e inserir diversos tipos de conteúdo. Com o HTML é possível inserir itens que você com certeza já interagiu navegando pela web como vídeos, imagens, listas, formulários, tabelas, áudios, entre outros.
Conclusão
Este guia só foi o pontapé inicial, mas o fundamental de uso mais constantes você já conheceu. O HTML é uma linguagem fantástica daquela que quando pegamos gosto se torna um conhecimento que sempre queremos aplica-lo e evoluir em saber mais.
Espero que este artigo tenha sido útil e esclarecido suas dúvidas iniciais. Outras virão. Então se sinta a vontade para expor suas dúvidas na seção de comentários.
Sugiro também a leitura do artigo “18 coisas sobre HTML que eu gostaria que tivessem me dito quando comecei a criar meu primeiro site”. E que também assista a playlist do Chief of Design sobre HTML e CSS. Você pode assistir o curso de fluência em HTML e CSS clicando aqui!
Peço também que compartilhe esta artigo com amigos que também queiram se informar sobre o HTML.
Abraço!
The post O que é HTML? appeared first on Chief of Design.

O que é HTML?
Fonte: Chef of Design

UI Design – O que é UI Design (User Interface Design)?

UI Design – O que é UI Design (User Interface Design)?

Eae! Td bele?
Não sei se você sabe, mas a área que eu mais gosto de atuar é na criação de interfaces, ou seja, UI Design. Na verdade eu comecei basicamente criando interfaces para web e só depois fui estudar outros assuntos.
A área de criação de interfaces também é muito promissora.  Existe uma boa demanda de empregos  para o Designer de interfaces, aqui no Brasil e no exterior. Tenho colegas que trabalham na europa, atuando na criação de interfaces.
E o UI Design pode ser uma boa opção para quem é designer gráfico, por exemplo, e deseja alçar novos vôos em busca de uma melhor qualificação profissional e melhores rendimentos.
Portanto neste artigo iremos falar sobre UI Design (Design de Interface do Usuário), beleza?
Siga-me os bons
Neste artigo você verá:

O que é UI Design?
Qual a diferença entre UX e UI Design?
Qual a diferença entre Web Designer e UI Designer?
Principais estilos de UI Design?
Dicas de Design de Interface

O que é UI Design?
UI Design ou User Interface Design (Design de Interface do Usuário) é área que estuda o meio pelo qual uma pessoa interage ou controla um dispositivo, software ou aplicativo. Essa interação pode ser feita através de elementos que forneçam ações entre o dispositivo e o usuário, como por exemplo, botões, links, menus e qualquer outro elemento que permita uma interação entre o dispositivo e o usuário.
É a parte ”visível” do projeto ou sistema em qual o usuário interage, ou seja, se refere a interface gráfica.
No nosso caso iremos focar  nas interfaces digitais, ou seja, nas interfaces gráficas de sites, aplicativos, entre outros.
Importante salientar que User Interface não se limita somente a parte visual do projeto. UI Design é sobretudo como será realizada interação entre o usuário e o meio (que no nosso caso é a interface gráfica), indo muito além da estética/aparência do projeto.
Um bom projeto de UI antecipa as necessidades do usuário e garante que a interface seja fácil de usar e de acessar. Ele garante uma boa experiência de interação evitando ou minimizando dificuldades de utilização e frustrações ao utilizador.
Qual a diferença entre UX Design e UI Design?
User Experience trata-se de como o visitante se sente ao usa o sistema, enquanto UI é o que projeta o  sistema proporcionando que ele interaja e chegue ao objetivo.
UI Designer é o profissional que desenvolve a interface e o UX Designer é o que planeja como o usuário vai se sentir ao utilizar determinada interface, como serão  as experiências e emoções ao interagir com o sistema.
O UI Design seria como uma ponte que liga o que foi planejado pelo UX com o Usuário.

Então enquanto o UI Design trata da  interação entre a interface e o usuário, o  UX lida com  o lado emocional do usuário e como será a sua experiência ao utilizar o sistema, capiche?
Qual a diferença entre Web Designer e UI Designer?
Um UI Designer normalmente projeta o layout e os elementos interativos prevendo os seus possíveis estados (on/off, por exemplo) e como eles funcionam juntos. Utilizando de conhecimentos e estudos sobre a interação humano-interface ele pode criar o layout do projeto. Sua  atuação pode ser um pouco híbrida.
Já o Web Designer também é um designer de interface, mas mais voltado a interfaces Web.  Na teoria o Web designer projeta o layout e os elementos da interface, mas normalmente não vai tão a fundo na questão da interação humano e interface como quem atua com UI Design. O foco seria mais na criação do layout, na parte visual e não tanto na interação. Em contra-partida o Web Designer tende a ir um pouquinho além incluindo o CSS, HTML, JavaScript, etc.
Porém tudo isso é na teoria. Na pratica é bem diferente. Na prática, na maioria das vagas, quase não existe diferem reças e ambos realizam praticamente as mesmas funções já que mais de 90% dos profissionais de UI Design atuam criando interfaces web, ou seja, web design.
Web Design e UI Design tem muitos pontos em comuns e é um pouco complexo diferenciá-los de forma definitiva. Em muitos casos isso se trata mais de uma terminologia de mercado do que qualquer outra coisa.Para saber mais sobre o Web Designer, você pode acessar esse outro artigo.
E em meu canal no Youtube, eu gravei um vídeo onde fala sobre a diferença entre as áreas e os profissionais. Veja o vídeo abaixo:

Principais estilos de UI Design?
Exitem alguns estilos principais quando se trata de UI Design. Você muito – mas muito mesmo – provavelmente já viu alguns deles por aí e também já utilizou alguns deles em seus projetos mesmo sem saber.  Veja a seguir os principais estilos de Design para interfaces.
Skeumorfismo
Trata-se de um estilo que faz referência aos objetos reais no meio digital/gráfico.
Utiliza-se muito de artifícios como texturas, sombras, gradientes, proporções, entre outros; para simular os objetos do nosso cotidiano.
Esse estilo foi disseminado pela  empresa Apple na década de 1980 ao criar para os seus “macintosh” interfaces gráficas em que o usuário pudesse interagir e executar comandos no computador sem a necessidade de digitar códigos. E para facilitar o entendimento e a assimilação, adotou-se este estilo que tenta reproduzir nas interfaces digitais coisas com as quias já estamos acostumados.

O Skeumorfismo foi muito utilizado por muito tempo nas interfaces digitais (os antigos sites feitos em “Adobe Flash” que o digam!). Hoje em dia esse estilo perdeu o seu status e já não é mais usado como antigamente (veja o infográfico interativo abaixo).

Via: TemplateMonster.com
Os principais motivos para isso acontecer  foram o avanço das tecnologias como HTML5 e CSS3, que vem proporcionando novas possibilidades de interação e de criação, e a disseminação do uso da tecnologia. As pessoas se acostumaram a utilizar interfaces digitais, com isso já não se faz tão necessário simular objetos da vida real no digital.
Flat Design
Flat Design significa “Design Plano”. Trata-se de um estilo minimalista que utiliza cores  e formas chapadas, com poucos (ou quase sem) efeitos de volume, sombras e texturas.
Como já citei em outras oportunidades o Design Web e Design de Interfaces “deriva do design gráfico”. Por isso quase tudo que vemos hoje em dia na Web e/ou digitais  deriva do impresso e também da arte em geral.

Não é possível se afirmar com certeza absoluta de onde vem e quando começou o movimento do Flat Design. Mas é nítido que o Flat Design tem raízes oriundas em movimentos anteriores como o Estilo Suíço de Design, Escola Bauhaus e no Movimento Artístico Minimalista.
Ao mesmo tempo que o avanço das tecnologias e do uso cada vez mais comum das interfaces digitais diminuiu a utilização do Skeumorfismo, aumentou a aplicação do Flat Design.

Hoje em dia não é mais preciso simular a textura, sombra e volume em elemento para incidcar ao usuário que “aquilo é um botão”. Um simples retângulo com uma cor chapada (ou até mesmo só o contorno) mais um texto descritivo já o suficiente para o usuário entender. Além disso o Flat Design por ser mais simples tende a ser mais leve melhorando assim também a performance da interface. Outro fator preponderante para a popularização do Flat Design foi o conceito de Design Responsivo, pois o Flat Design é muito mais maleável e adaptável que o Skeumorfismo.
Metro Design
Trata-se de um estilo minimalista com influência nítida do estilo Suíço criado pela Microsoft.
Possui esse nome porque  foi inspirado na sinalização do metrô de Londres. É muito parecido com o Flat Design, porém um pouco mais minimalista.

Material Design
É o estilo criado pelo Google que utiliza as características do Flat Design, porém adiciona outros artifícios como efeitos 3D. Ele utiliza a física e um pouco de Skeumorfismo para comunicar e criar o visual.

Nos dias atuais talvez seja o estilo mais utilizado em interfaces digitais. O trabalho feito pelo Google é de se tirar o chapéu. Você pode conferir como funciona este estilo acessando aqui: https://material.google.com/
E qual estilo é o melhor??
Aquele que atende adequadamente a proposta do projeto! Existem projetos que exigem o Skeumorfismo enquanto que outros tem o perfil mais para o Flat. O importante é não ser radical e acolher a um como se fosse um filho e desprezar o outro como se fosse um bastardo. Cada um pode ser utilizado em determinados momentos e diferentes projetos.
Dicas de para criar interfaces
A seguir seguem algumas dicas que podem te ajudar na criação de interfaces. Como você já deve saber, Galucho, não existe uma receita de bolo para isso (se existisse eu estaria vendendo e ficando rico :P). Acima de tudo use o bom senso e fundamentos do design para criar suas interfaces.
Designs podem ser testados. Não tenha medo de mudar caso precise
Não tenha medo de testar as suas interfaces. [Saiba mais sobre testes clicando aqui para ler um artigo do Chief sobre isso]. Se os testes indicarem que o design precisa mudar, mude. É preciso estar sempre aberto à mudanças para alcançar melhores resultados
Projete para os usuários, não para o você mesmo
A interface você cria (ou deveria) para o mundo e não para você. É preciso deixar o lado paternalista para sua interface evoluir e realmente alcançar o objetivo traçado. Para ter sucesso é preciso projetar para os usuários. Não tome decisões baseadas somente no seu gosto pessoal  e sem fundamentos e argumentos que justifiquem tal escolha.
A estética é importante, mas não é a principal medida
Sim, a estética tem grande influência no resultado final. Ninguém gosta de algo feio e desagradável. Contudo, temos que entender que a principal medida de sucesso é o desempenho e não somente o visual.
O objetivo é fazer a interação do usuário tão eficiente e simples possível. Não adianta você ter uma interface linda, se ela não proporciona uma boa a experiência.
Seja simples
Talvez o segredo da sofisticação esteja na simplicidade.  Pense simples e crie coisas simples de usar.Você não precisa criar coisas escalafobéticas para atingir o objetivo com beleza estética e funcional. Não confunda simplicidade com pobreza criativa. Você pode ser muito criativo pensando e criando soluções simples.
Estruture a informação
Organizar a interface de forma deliberada, de forma consistente, de forma reconhecível para os usuário. Junte os elementos relacionados e separe os não relacionados, distingua de forma clara as coisas  que são diferentes e equipare os semelhantes.Estruture o conteúdo de forma clara, concisa e coesa.
O princípio visibilidade
Seu projeto deve manter todas as opções primárias, fundamentais de forma visível sem distrair o usuário com informações irrelevantes ou redundantes. Bons projetos não sobrecarregam os usuários com muitos caminhos ou confunde-os com informações desnecessárias.
Dê feedback ao usuário
Seu projeto de UI Design deve manter os usuários informados sobre as ações da interface. Sejam interpretações, alterações de estado, condicionais, exceções ou erros.  Todas ações  que são relevantes e de interesse para o usuário devem ser explicitas de uma forma clara, com uma linguagem simples e inequívoca.
O princípio da tolerância
Seu projeto deve ser flexível e tolerante aos erros ou um possível mau uso, permitindo assim o usuário desfazer ou refazer ações. Tente reduzir ao máximo as dificuldades evitando os erros e caso eles ocorram sempre comunique ao usuário sobre o que está acontecendo.
Crie um padrão para interface
Seu projeto deve ter um padrão de componentes e comportamentos. Procure manter a consistência do layout com um propósito. Reutilize  os elementos e os comportamentos da interface. Com isso é possível reduzir a necessidade dos usuários de repensar e lembrar a passo na navegação.
A forma segue a função
Em um bom design de interfaces os elementos devem seguir a forma da sua função.
O usuário deve ser capaz de entender e/ou prever como um elemento na interface irá se comportar de forma intuitiva, clara, objetiva; apenas olhando para ele. Então se um elemento tem aparência de um botão, deve funcionar como um botão, por exemplo.
Mantenha a atenção do usuário
Hoje me dia temos muitas informações, muitas coisas acontecendo ao mesmo tempo,etc. Por isso se tornou muito mais difícil prender a atenção de alguém neste mundo tecnológico.
Portanto, evite elementos desnecessários que podem distrair o seu usuário. Toda interface é concebida com um objetivo e este é a real razão por ela existir. Não se esqueça disso!
Você pode conferir mais dicas sobre UI nesse outro artigo onde falo sobre os fundamentos do UI Design (Clique aqui).
Conclusão
Um bom design de interface de usuário (UI Design) facilita a vida do usuário e não o contrário, ela não chama atenção de forma desnecessária para si  e nem  se baseia somente na estética. Ele ajuda o usuário a efetuar a ação/tarefa planejada com um visual agradável e conciso.
Design de Interfaces é uma área muito promissora e com bastante oportunidades onde você, Galucho criativo, pode aplicar o seu talento criando interfaces diferentes e ainda ganhar uma boa grana com o seu trabalho.
E você gosta da área de UI Design?
Deixe o seu comentário, bele?
Até mais!
Abraço!
Referências
http://arquiteturadeinformacao.com/
http://www.uxdesign.blog.br/
The post UI Design – O que é UI Design (User Interface Design)? appeared first on Chief of Design.

UI Design – O que é UI Design (User Interface Design)?
Fonte: Chef of Design

Psicologia das Cores Design

Psicologia das Cores Design

Diversos tipos de profissionais se utilizam da Psicologia das Cores para prover significados e transmitir sensações cromáticas. A promessa é que cada cor possa gerar emoções específicas ao público exposto a ela.
Segundo estudo de Satyendra Singh da Universidad de Winneepeg, cerca de 62 a 90% da avaliação de um produto que as pessoas interagem é baseada apenas nas cores.
Com isso a indústria utiliza cada vez mais as cores como elemento visual de destaque para construção e divulgação de seus produtos. Acredita-se que o poder persuasivo que cada significado de cor pode gerar, é capaz de influenciar positivamente os consumidores.
Você chegou até aqui disposto a entender como a Psicologia das Cores pode te beneficiar nas suas decisões? Você precisa conhecer padrões de sensações e significados de cores para aplicar em seus projetos?
Pois bem. Neste artigo falaremos sobre os significados das cores mais utilizadas e em quais circunstâncias você pode aplicá-las. Também veremos a aplicação de cores considerando o contexto e o aumento do repertório semântico.
Neste artigo você encontrará sobre:

Padrões amplos de sensações e significados de percepção das cores;
Ponderações;
Significados da cor azul;
Significados da cor vermelha;
Significados da cor amarela;
Significados da cor verde;
Significados da cor laranja;
Significados da cor violeta;
Significados da cor rosa;
Significados da cor marrom;
Significados da cor preta;
Significados da cor branca;
Significados da cor cinza.

Padrões amplos de sensações e significados de percepção das cores
Já foi falado aqui no Chief of Design que as sensações causadas pelas cores podem nos remeter a valores simbólicos decorrentes de nossas experiências e do contexto cultural que vivenciamos. E que afirmações que determinam um significado hiper específico para uma cor são imprecisas quando desconhecemos o contexto.
Isso porque uma possível sensação, que é determinada por uma cor, pode ter seus efeitos confundidos com as preferências, experiências, a educação, as diferenças culturais e o contexto de quem está exposto a ela.
Apesar disso, existem alguns padrões amplos de efeitos e sensações cromáticas documentados na literatura que tentaremos expor neste artigo. Como explica a cientista Eva Heller, em seus estudos sobre Psicologia das Cores, cada cor pode produzir muitos efeitos, frequentemente contraditórios, e cada cor atua de modo diferente, dependendo da ocasião.
Portanto, vamos descrever os significados de cores mais difundidos, mas alertando para que cada devida aplicação leve sempre em conta o contexto cultural e experiência do usuário. Seria leviano de minha parte simplificar a Psicologia das Cores sem levar em conta tais fatores.
Ponderações sobre as informações que virão a seguir sobre Psicologia das cores

Esteja preparado para saber que  ascores podem expressar valores opostos;
Diferentemente do que é comumente propagado quando assunto é Psicologia das Cores, neste artigo você não encontrará uma coletânea boazinha só com significados positivos. A verdade é dura, mas sua cor favorita pode possuir conotações negativas;
Provavelmente este artigo não contempla todos os tipos de aplicações das cores. Se você sentiu falta de algo, você pode contribuir nos comentários;
O artigo também não contempla todas as áreas do estudo e segmentos profissionais. Se tem algo para acrescentar use a área dos comentários;
Grande parcela dos significados e associações apresentadas aqui foram baseados nas referências citadas no final deste artigo. Para um estudo aprofundado consulte as fontes;
Este artigo não encerra o estudo sobre Psicologia das Cores.

Significados da cor azul

A cor azul é a cor preferida tanto do público masculino quanto do feminino. Quando se trata de Psicologia das cores é praticamente uma unanimidade.
E a porcentagem de pessoas que não gostam desta cor também é muita baixa. Essa admiração pelo azul faz que essa cor seja uma escolha segura para diferentes objetivos. Ela transmite sensações de segurança e confiança.
É a cor mais fria. E se percebe também pela experiência da exposição da pele exposta ao frio que fica azulada e pela visualização da cintilação azulada do gelo e da neve. Em países tropicais azul pode causar a impressão de frescor.
Em algumas culturas o azul está relacionado a Divindades. É a cor do céu e associado a deuses em diversas religiões.
É cor da pele do Deus egípcio Amon e também do Deus hindu Vishnu.
Entre os romanos, Júpiter era o senhor dos céus, e azul era a cor de seu reino. Na religião dos judeus, o céu é o trono de Javé, e consiste de uma safira.
Na astrologia o azul pertence à constelação de Sagitário. Com isso é conferido aos nascidos sob esse signo o azul como cor típica.
Associações da cor azul
Confiança, segurança, verdade, serenidade, intelectualidade, inteligência, independência, espaço, estabilidade, poder, riqueza, superioridade, credibilidade, conservadorismo, harmonia, sinceridade, tecnologia, limpeza, céu, frio, gelo, águas tranquilas, montanhas longínquas.
Onde é aplicada a cor azul?
O azul é costumeiramente usado quando necessita-se transmitir confiança e segurança como prioridade. Grandes nomes do mercado utilizam desta cor com o propósito de comunicar que seus negócios oferecem produtos e serviços confiáveis.
E não tão somente seus produtos, mas também transmitir credibilidade de suas marcas.
Entre grandes marcas que investiram na cor azul se encontram a Dell, IBM, Intel, Nokia, Samsung, GE, Ford, HP e Facebook. Note que grande parte das citadas pertencem ao segmento da tecnologia que se associa-se muito bem como a cor azul.
Outras aplicações comuns do azul se encontram em boa parte dos produtos de limpeza, em serviços relacionados a tratamento e distribuição de água e também nas vestimentas com o jeans.
Marcas famosas com a cor azul

Algumas marcas que utilizam a cor azul:
Dell, IBM, Intel, Nokia, Samsung, GE, HP, Facebook, Ford, Wolkswagen, Hyundai, Unilever.
Significados da cor vermelha

Vermelho é a cor mais quente e carregada emocionalmente. Ela pode expressar valores opostos do bem e do mal, como o amor e a guerra, como a proibição e a transgressão.
É a cor mais intensa na Psicologia das Cores que remete as paixões, ao amor carnal, da atração, sedução e erotismo. Também ao amor Divino.
Na cultura cristã é o vermelho que dá vida, purifica, santifica. É a cor vermelha do Salvador. Símbolo de força, energia e redenção.
Na Igreja Católica o feriado de Pentecostes é celebrado com cores vermelhas pois ele simboliza a chama do Espírito Santo.
O vermelho pode ter conotações negativas como a ideia da Guerra. É a cor de Marte, Deus da Guerra. É a cor dos crimes de sangue e dos homens revoltados contra seu Deus e/ou outros Homens.
Associações da cor vermelha na Psicologia da Cores
Emoção, energia, vigor, calor, alegria, coragem, extroversão, excitação, intensidade, movimento, dinamismo, velocidade, paixão, impulso, fúria, amor, guerra, violência, ira, agressividade, perigo, poderio, glória, proibição, controle, sexualidade, erotismo, imoral, sedução, atração, sangue, fogo, chama, lábios, comunismo, inferno, conquista.
Onde é aplicada a cor vermelha?
A cor vermelha pode ser usada quando existe a necessidade de estimular algumas sensações e incentivar ações. Isso porque ela altera positivamente os ânimos das pessoas, impulsionando a atenção aos elementos em destaque.
Empresas do setor alimentício usam essa cor para estimular o consumo de seus produtos. Com intuito de gerar sensações estimulantes associadas ao paladar, o vermelho das embalagens confere o estímulo e sensação necessária.
Restaurantes e redes de Fastfoods utilizam a cor vermelha para aumentar o anseio de saciar a fome ou exterminar o desejo de satisfazer o paladar.

Quanto a incentivação de ações, a cor é bastante comum em interfaces digitais, como em botões de chamadas para ação.
Ela incentiva a compra em clientes impulsivos, por isso é usada em promoções e ofertas em lojas de departamentos.
Marcas famosas com a cor vermelha

Algumas marcas que utilizam a cor vermelha:
Coca-Cola, CNN, Adobe, Toyota, Mitsubishi Motors, Puma, Canon, Youtube, ESPN, Motorola, Santander, Texaco.
Significados da cor amarela

É uma cor quente que remete a coisas alegres. É a cor da jovialidade, do lúdico, da recreação e do otimismo.
Ela é bastante funcional quando utilizada para alertar sobre os perigos, informar sobre os cuidados em sinalizações, por ser uma cor chamativa. É a cor internacional das advertências.
Preto sobre amarelo são os sinais de advertência para materiais venenosos, explosivos e radioativos. Também servem para demarcar locais que exigem isolamento por motivo de segurança.
É uma cor que também possui conotações negativas como a inveja, o ciúme, avareza e o egoísmo. Esse amarelo “ruim” é o amarelo pálido esverdeado.
O amarelo tem velha tradição como cor dos traidores. Judas Iscariotes, em grande parte das vezes, foi representado em amarelo pálido nas telas.
O amarelo também é cor da inteligência. Mas, segundo estudos sobre Psicologia das Cores, de forma oposta quando combinado com o preto, se turva, transformando-se na cor da falta de discernimento.
Essa cor por ser associada ao dourado simbolizando riqueza e prosperidade.
Associações da cor amarela na Psicologia das Cores
Iluminação, conforto, inspiração, energia, perigo, alerta, aviso, emergência, felicidade, alegria, euforia, espontaneidade, adolescência, juventude, idealismo, expectativa, descontração, covardia, inveja, avareza, ciúmes, egoísmo, engano, animação, saúde, esperança, apoio, primavera, terra, calor, divertimento, sol, verão.
Onde é aplicada a cor amarela?
A cor amarela pode ser usada quando se tem a necessidade de transmitir alegria, otimismo ou quando precisa-se advertir sobre algo ou chamar atenção.
Como se trata de uma cor chamativa pode ser empregada com diferentes propósitos.
Em quaisquer situações que precise de cautela essa cor pode ser usada, como as sinalizações que alertam sobre riscos e perigos. Exemplo: Placas de advertência de trânsito.

É utilizada em projetos que precisam de atenção do público jovem e infantil. Como jogos educativos ou eventos de recreação.
De tão atraente que é, costumeiramente é utilizada em vitrines de lojas.
Redes de alimentação usam o amarelo em conjunto com o vermelho. Uma combinação que atrai e estimula para o consumo.
O amarelo também é bastante empregado em botões para chamada de ação em interfaces digitais.
Marcas famosas com a cor amarela

Algumas marcas que utilizam a cor amarela:
Mc Donald´s, National Geographic, Ferrari, Nikon, DHL, Pokémon Company, Habib´s, Post-it, Hertz, Star Wars, Goodyear, Shell.
Significados da cor verde

A cor verde simboliza a vida, é a cor da saúde, do saudável, de tudo que cresce, oposto do murcho, seco, morto. É a cor da vida vegetal, da natureza, da consciência ambiental.
A cor verde é considerada a cor do meio, cor intermediária em vários aspectos. Enquanto o vermelho dá impressão de proximidade e o azul de distância, o verde fica no meio. O vermelho é o quente, o azul é o frio. O verde tem temperatura agradável. O vermelho é seco, o azul é molhado. O verde é úmido.
O verde assume um papel de neutralidade entre os extremos vermelho e azul com isso transmite calma e segurança. É uma cor tranquilizadora.
É a cor da primavera e da fertilidade. Germinar, brotar, verdejar associassem com o verde. Trata-se da cor do crescimento, isso também no aspecto econômico e cultural.
A primavera significa renovação após um tempo de escassez. A cor verde remete a esperança porque esta, como a primavera, nos faz acreditar que os tempos de privação estão ficando para trás.
É a cor da juventude. O jovem é alguém cuja fisionomia ainda é imatura, como uma fruta verde.
Quando falamos em segurança a cor verde é a cor do acesso livre. Um “sinal verde”. O mesmo sinal verde da credibilidade em conseguir um Green Card norte-americano.
Verde é a cor sagrada do Islã. Por isso que a cor verde predomina em bandeiras de países de origem islâmica, como Arábia Saudita, por exemplo.
Associações da cor verde
Natureza, ambiente, dinheiro, riqueza, família, harmonia, saúde, paz, tranquilidade, segurança, abundância, serenidade, posteridade, suavidade, relaxamento, primavera, juventude, humor, divertimento, felicidade, vida, crescimento, amizade, frescor, ciúme, inveja, aprendiz, acalmar, repousar, equilíbrio, estabilidade, crença, firmeza, árvores, fertilidade, boa sorte, vigor, umidade, bosque, águas claras, mar, folhagem, planície.
Onde é aplicada a cor verde?
Verde é uma cor versátil, portanto pode ser aplicada com diferentes objetivos.
Como é uma cor que remete a ambiente é uma cor bastante utilizada em projetos envolvidos com questões ecológicas, sustentabilidade e de conservação do meio-ambiente.
A cor verde é uma cor suave, relaxante, transmite equilíbrio, harmonia e está associada a saúde. Ela é muito utilizada em ambientes hospitalares e na identidade visual de empresas que promovem a saúde.

No design de embalagens para a indústria alimentícia o verde é usado para óleos vegetais e legumes com a finalidade passar uma mensagem de aproximação a natureza desses produtos.
A cor verde tem sido frequentemente utilizado em web sites que tratam de dinheiro e questões relacionadas a finanças pessoais.
Marcas famosas com a cor verde

Algumas marcas que utilizam a cor amarela:
Acer, Animal Planet, Heineken, Android, Spotify, Subway, John Deere, Tic Tac, Nvidia, Starbucks, Lacoste, Consul.
Significados da cor laranja

A cor laranja desempenha um papel subvalorizado em nossas mentes. Antes de pensar no laranja lembramos do vermelho e do amarelo. O fato é que enxergamos menos cores laranja do que as que efetivamente nos cercam.
A cor laranja não existia antes da fruta laranja ser trazida para a Europa. A fruta é proveniente das Índias e chamada de “nareng”.
Quando as laranjas foram trazidas para e Europa e os franceses começaram a cultivá-las . De “nareng” ,a laranja, se tornou “orange”. Essa denominação dava a fruta reflexos dourando já que ouro em francês é “or”.
Na Índia e na China a cor laranja é o açafrão e não a fruta laranja.
No Budismo, a cor laranja representa o símbolo de iluminação, representa o grau supremo de perfeição.
A cor laranja remete ao lúdico, diversão e sociabilidade.
Goethe chamava essa cor de vermelho amarelado e considerava-a a cor em mais alta energia. Ele se admirava por ser a cor preferida das pessoas enérgicas, saudáveis e primitivas.
Associações da cor laranja na Psicologia das Cores
Desejo, excitabilidade, dominação, terra, calor, energia, estimulante, saúde, recreação, sociável, amigável, alegria, diversão, lúdico, cítrico, entusiasmo, fertilidade, vibração, fogo, luxo, calor, força, luminosidade, euforia, prazer, tentação, senso de humor, competição, ofensa, agressão, festa, raios luminosos, pôr do sol, chama, luz.
Onde é aplicada a cor laranja?
A cor laranja pode ser usada quando a intenção é transmitir vibração, entusiasmo, humor. Essas qualidades são características de quem é amigável. Marcas conectadas ao público jovem como Nickelodeon e Fanta Laranja procuram ser amigáveis a esse público.
Assim como a cor amarela, a cor laranja, por chamar atenção do público jovem e infantil pode ser utilizados em jogos educativos ou eventos de recreação.
A cor laranja é complementar do azul. Como disse Van Gogh: “Não existe laranja sem o azul”. E é quando acompanhada do azul que o laranja traz mais força. Está combinação é bastante eficaz sobre vários aspectos em aplicações no Design, Publicidade, Moda, Cinema e outras áreas. Entretanto, a cor laranja sozinha não é indicada para artigos de luxo e de prestígio.

Em alguns casos onde a intenção é precaver acidentes, sinalizar sobre o perigo, ou ação de salvar vidas a cor laranja pode ser utilizada, por ser uma cor chamativa. Exemplos: Roupas de operários que trabalham em vias de trânsito, cones, botes e coletes salva-vidas.

O laranja também é uma cor bastante usada em botões para chamadas de ação em interfaces digitais.
Marcas famosas com a cor laranja

Algumas marcas que utilizam a cor laranja:
Fanta, Harley Davidson, Amazon, Nicklodeon, Orange, TNT, Mastercard, Crush.
Significados da cor violeta

A cor violeta é a mistura do vermelho e azul. Lilás corresponde a mesma mistura mais com adição da cor branca. O violeta e o lilás são as cores mais raras da natureza. Ela simboliza valores opostos como espiritualidade e sensualidade.
Segundo estudos sobre Psicologia das Cores da cientista Eva Heller, na antiguidade a cor violeta era a cor do poder. A cor usada por quem governava. No caso, o tom de violeta é a púrpura. Vestir púrpura era um privilégio maior que usar ouro.
No império Romano quem usasse púrpura sem autorização era sentenciado à pena de morte.
Violeta é a cor usada pelo escalão de bispos e de prelados em suas batinas, nos atos oficiais.
No simbolismo cristão, a violeta é a cor da humildade. Entretanto a significação eclesiástica do violeta entra em contradição com o efeito do violeta profano. O violeta também pode ser é a cor da vaidade e dos pecados ligados à beleza.
Se opondo ao simbolismo cristão onde a violeta é a cor da humildade, essa cor pode remeter a extravagância. Quem quer usar essa cor, que a aprecia de verdade, não a usa de forma impensada. A escolha é consciente de quem quer distinguir-se da massa.
Quem usa violeta tem que saber o motivo porque o faz. Senão transmite a impressão de que a cor tem mais força do quem usa.
A cor violeta também é a cor da magia, da sexualidade pecaminosa e de quem foge as convenções.
Associações da cor violeta na Psicologia das Cores
Enterro, alquimia, engano, miséria, calma, dignidade, controle, violência, agressão, furto, humildade, recato, penitência, poder, luxo, nobreza, teologia, magia, extravagância, vaidade, sedução, sexualidade, erotismo, imoralidade.
Onde é aplicada a cor violeta?
Exceto em poucos períodos em que esteve na moda, a cor violeta nunca foi especialmente apreciada. Portanto deve se investigar bem o público-alvo e o contexto de sua aplicação.
Ela pode ser usada em projetos que necessitam se distinguir de outras ideias concorrentes ou que procura se fugir do convencional.
A violeta é cor da vaidade. Hoje a vaidade é pouca vista como pecado, portanto explorar a vaidade através da cor pode ser uma forma de atrair consumidores que se atraem por ideias de poder, luxo, e extravagância. É comum encontrar produtos e embalagens de produtos de beleza com a cor violeta principalmente para o público feminino. Qual mulher não quer se sentir bonita e poderosa?

A violeta também está presente na divulgação e confecção de produtos relacionados ao erotismo.
Marcas famosas com a cor violeta

Algumas marcas que utilizam a cor violeta:
Yahoo, Vivo, Fedex, Taco Bell, Hallmark, Whiskas, Craigslists, Milka.
Significados da cor rosa

As características gerais que são atribuídas a cor rosa são tipicamente femininas, conforme a Psicologia da Cores. O rosa é a cor da cortesia, da amabilidade, do charme.
É uma cor que quando acompanhada pelo branco sugere inocência. Mas pode ter um efeito adulto, erótico e de sedução, oscilando entre a imoralidade e a paixão, quando acompanhado de violeta e preto.
A cor rosa é a cor que simboliza a suavidade, maciez, a infância. Ela é considerada infantil e por isso pode desprezada pelos jovens de ambos os sexos.
Na tradição antiga a cor-de-rosa era uma cor masculina. Surpreso? Pois bem, em pinturas barrocas meninos aparecem vestidos de rosa. Em quadros antigos, o menino Jesus é retratado vestindo trajes cor-de-rosa.
Só em 1920, quando uma revolução na moda chamada de “Moda reformista” converteu-se a cor azul para os trajes dos meninos, é que a cor rosa foi destinada para as meninas.
Quando o rosa se tornou feminino, se tornou também a cor da discriminação. Na Segunda Guerra Mundial, os homossexuais que não preenchiam o ideal de masculinidade dos soldados eram obrigados a usar um triângulo cor-de-rosa costurado à roupa.
O rosa é a cor dos confeitos, que simboliza a delícia, o doce. É a cor que melhor combina com as sobremesas.
A cor-de-rosa possui essa doçura também em sentido figurado: um livro cuja capa seja dessa cor produz a impressão de ser um romance açucarado.
Associações da cor rosa na Psicologia das Cores
Encanto, amabilidade, inocência, feminino, suavidade, maciez, delicadeza, infância, charme, cortesia, doçura, doce.
Onde é aplicada a cor rosa?
A cor rosa é aplicada em uma variedade de artigos infantis para meninas e na publicidade desses. É uma cor bastante presente nos confeitos e sobremesas.
É um clichê para criação de objetos delicados, macios, doces, pequeninos e fofinhos.

Como é uma cor que representa o universo feminino e este universo está relacionado com beleza, esta cor é bastante usada em uma gama de produtos e serviços destinados a beleza da mulher e também na divulgação dos mesmos.
Costuma ser empregado na confecção e publicidade de produtos relacionados ao erotismo quando combinando com tons mais escuros.
Pode fugir do convencional para obter-se resultados intrigantes e destacar algo de forma inesperada. Imagine a combinação desta cor que é frágil com algo duro, rígido, grande ou ameaçador.

Marcas famosas com a cor rosa

Algumas marcas que utilizam a cor rosa:
Victoria´s Secret, Cosmopolitan, Marisa, Avon, InDesign, Barbie, DonutKing, Flickr.
Significados da cor marrom

Coitado da cor marrom! Segunda pesquisa sobre Psicologia das Cores realizada pela cientista Eva Heller esta é a cor que recebe maior rejeição entre as cores o que surpreende por ser uma das cores da moda.
É uma cor que resulta de outras combinações de cores. Como da mistura do verde com vermelho, do azul com o laranja, do violeta com amarelo.
O marrom é tido como feio e vulgar. É a cor da preguiça e da imbecilidade.
Isoladamente a cor marrom é muito desdenhado. Mas é muito aceito na moda por aqueles que não dão valor a elegância e que creem que ela combina com todas as outras cores e que as combinações são adequadas a todas ocasiões.
É cor do feio, do antiquado, do desagradável, do antipático, do antierótico e do intragável.
O marrom automaticamente é associado a sujeira e a excrementos. No marrom todas cores luminosas desaparecem. É a cor da decomposição, do que está murchando, definhando.
É a cor de muitos materiais naturais, como a madeira, o couro, a lã. Ela é bastante utilizada no âmbito residencial onde é muito apreciada. Sua falta de artificialidade faz do marrom a cor do aconchegante.
Espaços com móveis marrons, tapetes marrons, revestimentos de madeira nas paredes e no chão dão uma impressão de espaço reduzido transmitindo sensação de segurança.
A cor marrom é a cor dos sabores fortes, intensos. Café, chá, cerveja, cacau são marrons. É a cor dos alimentos cozidos. Quanto mais forte for a cor marrom, mais se dá a impressão que é a comida é “forte”.
Associações da cor marrom na Psicologia das Cores
Aconchego, terra, natureza, águas lamacentas, madeira, velho, aromas intensos, sujeira, outono, doença, desconforto, decomposição, feio, preguiça, imbecilidade, madeira, café, cacau, chocolate.
Onde é aplicada a cor marrom?
A cor marrom pode ser usada quando se tem a intenção de se associar a natureza. Pode ser usada em projetos relacionados a parques, hotéis fazenda, chácaras, sítios, atividades de buschcraft.
É uma cor bastante utilizada em decorações de ambientes com intuito de conferir sensações de aconchego e segurança através de móveis, tapetes, pisos e revestimentos.
Ela costuma ser encontrada em estabelecimentos gastronômicos e empórios.
A cor marrom também é encontrada nas embalagens de bebidas e produtos comestíveis com finalidade de dar mais aproximação a natureza desses produtos (café, chocolate, etc).

Como podemos ver o marrom está relacionado com algumas associações desagradáveis e pode ser utilizado, de forma a não agredir o público, quando o objetivo for propositalmente transmitir alguma informação importante.
Marcas famosas com a cor marrom

Algumas marcas que utilizam a cor marrom:
Hershey´s, Cacau Show, M&M´s, Cornetto, Magnum, Pilão, Nespresso, Nescafé Dolce Gusto.
Significados da cor preta

A cor preta é a cor mais admirada entre os jovens, segundo a pesquisa. Eles, quando pensam nesta cor, imaginam as roupas da moda, os carros caros. Já os idosos imaginam a morte.
O preto é a cor do luto. Na simbologia cromática cristã, o preto é a tristeza pela morte terrena.
O preto é a cor da magia, do misterioso e da introversão.
O preto transforma todos os significados positivos de todas as cores cromáticas em seu oposto negativo. Quando adicionado amarelo fortalece as sensações negativas como culpa, egoísmo, infidelidade e melancolia.
Num sentido figurado, “preto” significa mau e ruim.
O preto é garantia de elegância. Na moda conservadora para cavalheiros, isso se faz sentir de forma pronunciada: os ternos elegantes, os fraques e os smokings são sempre pretos.
Coco Chanel criou, em 1930, o “pretinho”, vestido curto, até hoje ideal para todas as ocasiões formais.
O preto é a cor que menos depende da moda, é a cor da individualidade e a que combina melhor com o rosto dos jovens.
Nos objetos de luxo, a renúncia às cores permite que o luxo se manifeste por si só. O preto é a cor com que mais se evidencia a essa renúncia. E por isso o preto é a mais nobre das cores.
A cor preta é mais objetiva das cores.
Associações da cor preta na Psicologia das Cores
Morte, luto, magia, mistério, mal, mau, azar, sujeira, egoísmo, culpa, infidelidade, rebeldia, anarquia, ilegalidade, noite, elegância, credibilidade, objetividade, sofisticação, conservadorismo, peso, dureza, violência, brutalidade, ódio.
Onde é aplicada a cor preta?
A cor preta pode ser usada em projetos gráficos quando a intenção é demonstrar sofisticação. Ela pode ser usada como protagonista ou para valorizar outras cores.

Ela é bastante funcional sendo utilizada na tipografia, em projetos gráficos, para contrastar com um fundo claro no intuito de prover boa leiturabilidade.
Acompanhado do branco, o preto reforça o conceito minimalista do design.
É uma cor utilizada em artigos de luxo e também na moda.
Preto é uma cor presente no universo do rock, portanto uma gama de produtos relacionados a ele podem utilizar esta cor. Muitos websites de rock alternativo e de EBM são construídos com predominância da cor preta.
Marcas famosas com a cor preta

Algumas marcas que utilizam a cor preta:
Adidas, BlackBerry, Citizen, Chanel, Nike, L’Oréal Paris, Louis Vuitton, MTV.
Significados da cor branca

A cor branca é a cor da perfeição, do bem, da verdade e da honestidade. Quanto mais pura a cor branca, mais perfeita ela é. Qualquer acréscimo só virá reduzir a perfeição.
É a cor que exprime clareza e exatidão, componentes da verdade.
O branco é a cor do princípio, do novo. A ressurreição é o incio do bem. Branco é a ressurreição. No batismo, o início da vida cristã, veste-se branco. No passado as jovens trajavam branco em suas festas de debutantes. Era o início da vida social. O primeiro alimento que o homem recebe é branco: o leite.
A cor branca representa o limpo, o esterilizado, o puro. A limpeza é externa, a pureza vai mais a fundo. O que precisa ser higiênico é branco. Qualquer mancha de sujeira é visível no branco facilitando a limpeza. Onde se produzem alimentos é obrigatória o uso de uniformes brancos.
Na Ásia o branco é a cor tradicional do luto por aqueles que creem na reencarnação.
É também a cor dos mortos, dos espíritos e dos fantasmas.
A cor branca é a cor da objetividade e neutralidade. Utilizada bastante no estilo minimalista. Também é utilizada como cor de fundo, sobre a qual as demais cores ganham destaque.
O branco puro simboliza a virgindade da noiva. Mas o vestido de casamento branco, com véu e grinalda, nada tem de tradicional. A moda da vestimenta branca para as noivas só surgiu no século XIX, quando a rainha Vitória da Inglaterra contraiu matrimônio com o príncipe Alberto de Saxe-Coburgo-Gotha em 1840.
Associações da cor branca na Psicologia das Cores
Bem, ordem, simplicidade, pureza, verdade, honestidade, perfeição, pensamento, limpeza, otimismo, inocência, paz, dignidade, afirmação, modéstia, alma, harmonia, infância, estabilidade, divindade, leveza, vazio, objetividade, neutralidade, clareza, exatidão, batismo, casamento, cisne, lírio, primeira comunhão, neve, nuvens, areia.
Onde é aplicada a cor branca?
A cor branca é muito utilizado onde precisa apresentar higiene. É uma cor utilizada nos uniformes de diversos profissionais com foco em executar seus procedimentos com higiene, como médicos, enfermeiros, dentistas e profissionais da indústria alimentícia.
Quando combinado com o azul, o branco costuma estar presente em produtos congelados e em algumas bebidas alcoólicas que devem ser consumidas muito frias. E quando se enfatiza a condição do frescor do produto, a combinação típica passa a ser branco e verde.
É muito utilizada no design com a função de ressaltar informações e elementos gráficos através do contraste. Com esta funcionalidade o branco é amplamente utilizada em websites como cor de fundo.

Também é a cor presente em projetos com estilos minimalistas.
Marcas famosas com a cor branca
Algumas marcas apresentadas no decorrer do artigo utilizam a cor branca, geralmente no tipografia e com contraste com outras cores. Destacamos: Facebook, GE, Subway, Starbucks, Tic Tac, Nvidia, Mastercard, Nickelodeon, Crush, Whiskas, Milka, Pilão e Cornetto.
Significados da cor cinza

De acordo com estudos sobre Psicologia da Cores, o cinza é uma cor sem força. Simboliza resignação e neutralidade.
No cinza, o nobre branco está sujo e o poderoso preto está enfraquecido. Nada é decisivo no cinza, tudo nele é vago. O cinza é a cor sem caráter.
Cinza é a cor dos sentimentos sombrios, como o tédio, a solidão e a sensação de vazio. Cinza é a cor de todas as adversidades que destroem a alegria de viver.
É a cor da insensibilidade, da insegurança.
Chuva e névoa, nuvens e sombras são da cor cinza. Quando o sol não brilha, quando o céu está cinzento, o mar fica cinzento também, as montanhas ficam cinzas.
É cor do esquecimento e do passado.
O cinzento dá a impressão de grosseiro, bruto. O cimento cinza dos prédios, da realidade sem enfeites.
Eventualmente a cor cinza pode determinar maturidade e também ser a cor da razão.
Nos últimos tempos está crescente a associação da cor cinza com inovação e tecnologia.
E o cinza também pode representar a prata, o aço, o cromado e outros metais nobres.
Associações da cor cinza na Psicologia das Cores
Tédio, tristeza, decadência, velhice, desânimo, sabedoria, seriedade, maturidade, passado, neutralidade, aborrecimento, modéstia, chato, solidão, sombrio, hostil, feio, reflexão, insegurança, insensível, indiferença, inovação, tecnologia, pó, chuva, ratos, neblina, máquinas, cimento, sujeira.
Onde é aplicada a cor cinza?
A cor cinza, por expressar seriedade, pode ser empregada na comunicação visual empresarial.
Vem sendo bastante empregada em produtos tecnológicos inovadores.
Costuma ser utilizada em sites cujo conteúdo é sobre tecnologia.

Exerce função coadjuvante ao contribuir para que outras cores se destaquem.
Ela é também bastante funcional sendo utilizada na tipografia, em projetos gráficos, para contrastar com um fundo claro no intuito de prover boa leiturabilidade, mas com menos contraste que o preto.
Marcas famosas com a cor cinza

Algumas marcas que utilizam a cor cinza:
Mercedes-Benz, Audi, Wikipédia, Jaguar, Apple, Renault, Mazda, Citroën.
Vídeo Psicologia das Cores – Significado das cores no design
O David Arty disponibilizou uma aula sobre Psicologia das cores. Sugiro que você assista o vídeo abaixo para complementar o que foi abordado neste artigo. Aproveite.

Conclusão
Durante este artigo sobre Psicologia das Cores tentamos expor significados que as cores transmitem baseado em estudos sobre psicologia das cores. Vimos que cada cor pode produzir muitos efeitos, frequentemente contraditórios, pois elas podem gerar tanto sensações positivas, quanto negativas. Por isso a importância de avaliar o contexto de cada aplicação para determinar quais sensações cada cor deve informar.
Por falar em contexto, aqui no Chief existe outro artigo sobre significados das cores com enfoque da aplicação considerando diferentes contextos que você pode consultar.
Abaixo você pode conferir o link da pesquisa utilizada com base neste artigo.
E você, o que achou do artigo? Você já estou  a séria a Psicologia das Cores?
Deixe sua opinião na seção de comentários. Quer contribuir com mais algo relacionado a sua cor favorita? Fique à vontade!
Compartilhe este artigo com os amigos!
Abraço!
Referências
A Psicologia Das Cores – Como As Cores Afetam a Emoção e a Razão – Eva Heller
Psicodinâmica das cores em comunicação – 5° ed. São Paulo – Modesto Farina
A cor como informação – Luciano Guimarães
As cores na Mídia – Luciano Guimarães
The Psychology of Color in Marketing and Branding – Gregory Ciotti – https://www.helpscout.net/blog/psychology-of-color/
Impact of color on marketing – Satyendra Singh – https://www.researchgate.net/publication/235320162_Impact_of_color_on_marketing
The post Psicologia das Cores Design appeared first on Chief of Design.

Psicologia das Cores Design
Fonte: Chef of Design

Faculdade de Web Design – Onde fazer? Como funciona?

Faculdade de Web Design – Onde fazer? Como funciona?

Eae, tudo bele?
Vamos falar sobre faculdade de Web Design?
Muitas pessoas, quando desejam iniciar uma carreira de Web Designer, começam a procurar por faculdade de Web Design. E nós aqui do Chief of Design recebemos várias questões a respeito disso.
Devido a essa demanda eu que eu decidi fazer um vídeo exclusivo sobre o assunto. O vídeo está logo ao final do artigo. Você pode conferir clicando aqui.
Mas antes de falar sobre faculdade de Web Design, vamos entender o contexto por trás. Tudo bem? Então vamos nessa!!
O que é Web Design e o que faz o o profissional Web Designer?
Web design é um fragmento do Design que deriva do Design Gráfico. A área é formada por profissionais que executam a criação, o desenvolvimento e a manutenção da interface web, como de sites, blogs e aplicativos.
Apesar da finalidade mor de um Web Designer ser a criação de interfaces Web, ele também está apto a realizar outros tipos de trabalhos como criação de artes paras redes sociais, tratamento de imagens, publicidade para Web e social advertising.
O profissional Web Designer precisa ter conhecimentos necessários para utilizar programas específicos da área para criação como Adobe Photoshop, Adobe Illustrator, Adobe XD, Sketch, entre outros que podem ser solicitados dependendo do Job. Além disso, também é necessário conhecimentos em linguagens Web como HTML e CSS, no mínimo. Por consequência também é necessário saber manusear softwares de edição de código como Sublime Text e Brackets.
Com tais conhecimentos o Web Designer estará apto para trabalhar tanto na criação de toda parte gráfica de interfaces web, e de outras peças aqui citadas, como na no desenvolvimento de linguagens de front-end.
Como é a área de Web Design?
A área de Web Design é bem nova. A sua história começa a partir de meados da década de 1990. Ao longo do tempo ela vem evoluindo e se transformando de acordo com o avanço das tecnologias e das novas necessidades.
No começo os trabalhos de Web Design eram executados, na grande maioria das vezes, de forma amadora principalmente por programadores que estavam começando a trabalhar com desenvolvimento Web. Com o passar do tempo, as áreas de desenvolvimento e design para web foram se consolidando como coisas separadas dentro do contexto de um desenvolvimento web.
Com isso, o design para web começou a ser executado por Designers, normalmente oriundos do design gráfico.
No mercado de trabalho, o profissional de Web Design pode atuar em empresas de diversos segmentos, desde de empresas de tecnologias até empresas de ramos distintos a web, tecnologia e design, mas que necessitam de criação e manutenção de sites e também da criação de artes para a web de uma forma geral.

Os tipos de empresas também é bastante variado podendo atuar em públicas e privadas, agências de publicidade, startups, entre outros. 
O Web Designer também pode atuar  como empreendedor individual, realizando trabalhos sob demanda, ou seja, sendo freelancer. E, claro, também pode abrir a sua própria empresa para atuar nesse segmento.
A área de web design é multidisciplinar que exige muito mais do que apenas conhecimentos técnicos e tecnológicos. Estude sempre e não se prenda apenas a questões técnicas da área. Você precisa também entender de gente, e de como as pessoas utilizam os serviços, produtos e tecnologias.
Cursos de Web Design?
Apesar de não ser obrigatório ter um curso de Web Design para atuar na área, existem algumas possibilidades para quem deseja se atualizar e aprender Web Design, como por exemplo:

Cursos Onlines
Cursos livres presenciais
Cursos técnicos

Cada tipo tem pontos fortes e fracos. Caso esteja decido a fazer um curso, o ideal é analisar o seu perfil e o investimento necessário para realizar o curso.
Também é preciso ficar atento ao conteúdo do curso. A matriz curricular pode variar bastante entre os cursos de Web Design. Caso queira saber mais, eu tenho um outro conteúdo sobre esse assunto aqui no Chief of Design.
No caso de curso online, sempre indico o nosso curso de Web Design: o Web Designer PRO (clique aqui para saber mais).
O curso é 100% online. Os conteúdos são disponibilizados em uma plataforma 24 horas no ar, sendo que você pode assistir as aulas a qualquer hora e qualquer lugar que tenha um dispositivo com acesso a internet. O acesso é ilimitado, você pode ver e rever as aulas quantas vezes achar necessário.
Já são mais de 100 vídeo aulas na plataforma divididas em módulos. A grande maioria do conteúdo está disponível em vídeos e contempla aulas teóricas e práticas com exercícios e exposições de temas sobre web design e outros relacionados. São também disponibilizados materiais extras para download que complementam as vídeo-aulas.
Como complemento das aulas oferecemos tarefas específicas para que observar o processo de seu desenvolvimento criativo.
Também disponibilizamos na plataforma um campo para você expor suas dúvidas.
Então se quiser saber mais sobre o curso, é só acessar http://www.webdesignercursos.com.br/
E talvez você esteja se perguntando: Mas e a faculdade de Web Design?
Calma! Tenha calma, Galucho
Falarei agora sobre essa questão no tópico a seguir.
Faculdade de Web Design: como funciona?
Infelizmente eu preciso te falar que não existe faculdade de Web Design. Sim, é isso mesmo! Não tem faculdade de Web design.
Você pode procurar no Google pelo termo Web Designer faculdade, faculdade de Web Designer…Enfim… Você não encontrará nenhum curso de bacharelado e nem tecnólogo com esse título.
E um ponto importante para lembrar, é que você não precisa de faculdade para ser um Web Designer. Logicamente, qualquer curso superior pode ajudar sim na sua carreira, mas no caso dessa área não é pré-requisito inquestionável.
Portanto você pode trabalhar na área mesmo que não exista uma faculdade de Web Design. O que você fizer de trabalhos na área e as provas que você tem competência para atuar com web design, ao longo da sua carreira, serão mais importante do que qualquer título.
Apesar de não ter, até o momento que estou escrevendo este artigo, faculdade de Web Design, você pode, caso ache necessário, fazer uma faculdade similar para ter uma graduação.
A opção que mais se aproxima é a faculdade de Design Digital. Infelizmente esse tipo de curso não tem disponível em todo o brasil. Aqui em São Paulo, onde moro, existem algumas universidades que oferecem esse curso, mas em outras regiões pode não ter.
Então outra opção que você tem é fazer um facul de Design Gráfico. Como citado aqui neste artigo, o Web Design deriva do Design Gráfico, logo os fundamentos e conhecimentos que aprenderá no curso de DG, serão aproveitados no Web Design.
Você também pode tentar fazer outros cursos que tem a haver com Design e Comunicação Visual como Publicidade e Propaganda ou até mesmo cursos mais voltados para tecnologia como Sistema da Informação e depois se especializar em Web Design.
Mas eu não indicaria essas opções, ao menos que não reste mais nenhuma outra. Se puder opte por Design Digital ou Design Gráfico, pois são cursos que se aproximam e tem mais matérias em comum com Web Design.
Abaixo deixo o vídeo onde falo sobre faculdade de Web Design com mais detalhes. Confira!!!
Faculdade de Web Design – Vídeo

Então é isso, Galucho!
Compartilhe a sua opinião, dúvida e/ou experiência deixando o seu comentário abaixo, bele?
Caso tenha mais dúvidas eu vou deixar abaixo alguns links com mais conteúdos esclarecedores sobre a área de Web Design:

Web Designer – Essa é a profissão certa para você?


https://www.chiefofdesign.com.br/web-design-e-desenvolvimento-web-50-perguntas-e-respostas/
https://www.chiefofdesign.com.br/o-que-um-web-designer-faz/

Vale a pena ser Web Designer?

10# excelentes razões para você se tornar um Web Designer!


E não se esqueça de assinar o nosso canal. Então inscreva-se em nosso canal no Youtube [CLIQUE AQUI ] Ajuda aí!!
Forte abraço.
Até mais.
The post Faculdade de Web Design – Onde fazer? Como funciona? appeared first on Chief of Design.

Faculdade de Web Design – Onde fazer? Como funciona?
Fonte: Chef of Design

O que faz um Web Designer? Saiba tudo sobre a Profissão Web Designer

O que faz um Web Designer? Saiba tudo sobre a Profissão Web Designer

E ae! Tudo bele?
Você sabe o que faz um Web Designer?
Com a popularização da internet cresceu a necessidade de se apresentar páginas web com um melhor aspecto visual para comunicar os objetivos das instituições. A preocupação era de aplicar os fundamentos de design para sanar essa necessidade. Foi a partir daí que começou a surgir a carreira de Web Designer.
O que vemos no cenário atual é que as pessoas cada vez mais utilizam-se da internet para não só buscar informações, mas para interagir socialmente, e também cada vez mais realizar compras pela praticidade que o sistema oferece.
As empresas investem cada vez mais em presença online porque isso é imprescindível para alcançar um público cada vez mais adepto por tecnologia e sedento por novidades. Com isso a procura por Web Designers qualificados para atender essas empresas têm gerado bastante oportunidades e crescimento profissional.
Você já deve estar percebendo que ingressar nesta área oferece um mundo cheio de possibilidades. Então para que você fique melhor informado neste artigo falarei para você sobre as dúvidas recorrentes que os seguidores do Chief of Design sempre me perguntam, como, o o que faz um Web Designer, onde ele atua, quanto ganha, qual faculdade é indicado fazer, entre outras coisas!
Portanto se você tem dúvidas sobre a área, se tem interesse em ingressar ou até migrar para o segmento web, te convido a continuar a leitura.
O que faz um Web Designer?

Na introdução deste artigo você ficou sabendo que para apresentar as páginas web com um melhor aspecto visual se viu a necessidade da aplicação de fundamentos de Design. Com isso o profissional responsável por projetar as páginas deviam possuir conhecimentos nesse fundamentos.
Portanto o que um Web Designer faz hoje é aplicar os fundamentos de Design para criação de layouts para sites. Ou seja, ele é um Designer que cria para web. Na prática ele utiliza de conhecimentos como Tipografia, Teoria das cores, Diagramação, Gestalt, entre outros para construir sites que consigam transmitir os objetivos de comunicação dos clientes e que facilitam sua utilização pelos usuários.
O Web Designer também é responsável por construir diferentes peças digitais utilizadas na web como banners para sites, imagens para mídias sociais e pequenas animações.
E sobre mais o que faz um Web Designer? Dependendo do projeto ele também pode ser requisitado para participar de diferentes etapas como decisões sobre a arquitetura de informação, construção de wireframes, codificações, etc.
Existe algum pré-requisito para ser Web Designer?
Querer se Web Designer é o principal requisito. Não considero ser uma questão de talento, mas sim a determinação para fazer as coisas a principal característica para atuar nesta área.
Logicamente que possuir algumas características ajuda, como:

Gostar de tecnologia;
Gostar de design;
Gostar de artes;
Ter empatia pelas pessoas;
Gostar de resolver problemas;
Ser criativo.

Web Designer precisa saber programar?

David, você citou mexer com codificação, em um tópico anterior, uma possível atividade do Web Designer. Quando eu estiver atuando na área eu precisarei programar?
Não! Definitivamente um Web Designer não precisa saber programar. Lógico que você tiver uma noção sobre linguagens de programação poderá trazer alguns benefícios, mas ter o domínio sobre os conhecimentos para atuar na área de web design já é o suficiente.
O que acontece é que cada vez mais o mercado entende que o Web Designer tem suas funções bem definidas e que não se devem confundir com funções de outros profissionais também responsáveis por um projeto web.
Pode até ser que ainda existem vagas requisitando que um Web Designer tenha além dos conhecimentos em sua área, também conhecimentos de programação. Mas não deveria ser assim.
A programação é de responsabilidade dos desenvolvedores, como também existem outros profissionais que são responsáveis pela a UX, pelo front-end, arquitetura de informação e por aí vai.
Mas caso você saiba programar, ótimo. Você terá uma ótima visão sobre o processo que envolve o projeto e poderá contribuir com as melhores práticas e quem sabe até utilizar deste conhecimento para assumir projetos freela.
Então o que faz um Web Designer que não é lidar com código? Bem, não é assim radical. Veremos a seguir como funciona essa parte de códigos.
O que faz um Web Designer com o HTML e CSS?

Ainda não nós livramos do assunto codificação. Mas calma! Isso não é o fim do mundo.
Eu sou um defensor de que Web Designers devem conhecer codificação referente a duas linguagens. Falo de HTML e CSS. E antes que você fique contrariado já afirmo que estas não são linguagens de programação.
O HTML é uma linguagem que marca o conteúdo. Portanto é uma linguagem de marcação. Esta é uma linguagem base para construção de sites e que tem a função de apresentar o conteúdo em páginas. Todo o conteúdo que você vê em uma página é inserido por códigos HTML.
Já o CSS é uma linguagem de estilização. Ela é responsável por formatar o conteúdo marcado pelo HTML. Através dela é possível que você realize tarefas como definir um tamanho e cor de um texto, posicionar um bloco da interface em algum lugar na tela, colocar uma cor ou imagem de fundo, entre outros tipos de estilizações.
E por que eu defendo que Web Designers devem conhecer HTML e CSS?
Eu defendo porque com isso o profissional vai entender quais as possibilidades e limitações seu layout poderá proporcionar nas próximas etapas do projeto sem necessariamente botar a mão nos códigos.
Ter esses conhecimentos também podem contribuir em uma maior integração entre as equipes de trabalho.
Onde encontro Faculdade de web design?

Não existe uma Faculdade de web design. E então o que fazer?
Como já falei um Web Designer precisa conhecer os Fundamentos de Design. Então um caminho interessante é fazer uma Faculdade de Design Gráfico.
Mas mesmo sendo um caminho não quer dizer que você deva começar em uma Faculdade. Para conhecer como funciona você pode começar a explorar conteúdos disponíveis na web gratuitamente ou em cursos pagos, como o Web Designer Pro, que costumam oferecer conteúdo mais organizado.

Também você pode se aperfeiçoar:

Lendo livros da área;
Participando de eventos;
Em cursos livres presenciais;
Ou em contato com outros profissionais.

Qual é o salário de um Web Designer? O que faz um Web Designer??

Vários fatores podem influenciar no salário de um Web Designer. Podemos levar em conta seu nível de experiência, a região do país, o segmento da empresa, etc.
Acredito que a média salarial de um Web Designer esteja entre 2.000 a 3.000 Reais. Mas é claro que existem casos que fogem desta média. Conheço profissionais que ganham valores superiores a essa média.
É possível sim existir pagamentos maiores sobre o que faz um Web Designer, quando ele atua por conta própria e tem um certo reconhecimento no mercado e um público-alvo diferenciado.
Onde um Web Designer atua? O que faz um Web Designer??

Imagine todas as possibilidades de lugares onde precisa-se construir e manter interfaces digitais para web. Todos esses lugares precisam de Web Designers.
Só para citar algumas temos departamentos de comunicação, marketing, em agências de publicidade, empresas de TI, lojas virtuais, startups, produtoras de vídeo, editoras de jornais e revistas on-line, ONGs, entre outras.
E caso você tenha espírito empreendedor você pode prestar serviços como Freelancer ou administrando sua própria agência.
Outros insights sobre a Profissão Web Designer
Procurei aqui (neste artigo) abordar sobre os principais aspectos que envolvem a profissão de Web Designer e o que ele faz. Também elaborei um vídeo que complementa o que foi abordado até então.
Nesse vídeo eu falo sobre o que faz um Web Designer e também sobre mercado, salário, faculdade, entre outros assuntos.
Portanto, para saber mais e de forma mais didática, confira o conteúdo do vídeo e, na seção de comentários, comente o que você achou, suas dúvidas e experiências na área! Bele?

Aproveita e assina o nosso canal no Youtube para você saber das novidades! [CLIQUE AQUI PARA SE INSCREVER NO CANAL]
Espero que tenha lhe ajudado a saber mais sobre a profissão Web Designer. As tarefas que um um Web Designer pode executar no dia a dia vão além de criar um site. Pode passar por todo o planejamento até pela criação de outras artes.
E você entendeu o que faz um Web Designer? Deixe o seu comentário abaixo. Se tiver alguma dúvida, deixe também.
Então é isso!
Até mais.
Forte abraço!
The post O que faz um Web Designer? Saiba tudo sobre a Profissão Web Designer appeared first on Chief of Design.

O que faz um Web Designer? Saiba tudo sobre a Profissão Web Designer
Fonte: Chef of Design

Arquitetura da Informação – Ciência para estruturar conteúdos

Arquitetura da Informação – Ciência para estruturar conteúdos

Eae, tudo bele?
Hoje vamos falar sobre Arquitetura da Informação.
Será que o público que acessa seus websites encontram a informação desejada? Será que os meios para encontrar as informações são adequados? Todos esses questionamentos podem vir à mente quando a Arquitetura da Informação não foi uma preocupação durante a fase de planejamento de um projeto de website.
Um projeto completo para o seu site ou aplicativo essencialmente deve garantir que todas as informações a serem transmitidas sejam acessíveis e fáceis para os clientes encontrarem. Isso é definido utilizando-se dos conceitos de Arquitetura da Informação.
Quando pensamos em AI (abreviatura de Arquitetura da Informação) estamos não tão somente contribuindo para que o conteúdo seja acessado mais também garantindo uma ótima experiência na utilização do sistema.
A Arquitetura da Informação é um assunto muito amplo, entretanto procurarei abordar nesse artigo os principais conceitos que norteiam esta matéria para que você possa compreender como podemos organizar e entregar nosso conteúdo da melhor forma.
O que é Arquitetura da Informação?
A Arquitetura da Informação visa organizar o conteúdo de sites e aplicativos através de uma estruturação que possibilite aos usuários  encontrar tudo o que precisam  afim de concluir tarefas sem muito esforço. Ela (a AI) ajuda os usuários a entenderem onde eles estão posicionados, o que eles encontraram, os caminhos possíveis a seguir e o que está por vir ao escolher um determinado caminho.
Podemos definir Arquitetura da Informação como um sistema que estrutura a forma como as informações devem ser acessadas, apresentadas e interligadas.E esta estruturação tem como objetivo facilitar o acesso do usuário ao conteúdo em um contexto de uso.
Pense agora em uma loja que venda camisetas de clubes, com muitas peças a venda. Esta loja corresponde ao sistema de informação. Considere cada informação como uma camiseta. O que a arquitetura de informação faz é estruturar a informação considerando os times, tamanhos, marcas, quantas peças estão no estoque, preço de cada modelo e demais possibilidades de categorização, visando fazer que o usuário percorra o caminho mais adequado que o levará para página de destino da camiseta desejada.
História da Arquitetura da Informação
Por milênios, e antes mesmo da internet, os seres humanos já utilizavam de meios para organizar as informações. Entretanto com os avanços e popularização das tecnologias de internet, houve uma aceleração no ritmo de publicação de informações com imensa quantidade de dados disponíveis, o que gerou uma necessidade maior de organização, tornando o acesso e a apresentação mais fáceis.

Em 1976, em uma conferência do American Institute of Architects (AIA), o Arquiteto, Designer Gráfico e um dos criadores das conferências do TED (Technology/Entertainment/Design), Richard Saul Wurman cunhou o termo Arquitetura da Informação devido sua preocupação em organizar de forma cuidadosa a quantidade enorme de informações que nossa sociedade cria diariamente.
Círculos conceituais
A Arquitetura da Informação consiste em encontrar o equilíbrio entre 3 dimensões: usuário, conteúdo e contexto. No livro “Information Architecture for the World Wide Web”, que é referência sobre Arquitetura da Informação, os autores Rosenfeld e Morville definem esse equilíbrio em 3 círculos conceituais ao que pode ser visualizado como um Diagrama de Venn.

Usuário: Necessidades, hábitos, comportamentos de busca de informações, expectativas, experiência;
Conteúdo: Objetivos de conteúdo, tipos de documentos e dados, volume, estrutura existente;
Contexto: Objetivos, cultura, tecnologia, política, restrições, etc.

Estes conceitos de AI conjugam para que um grupo específico de usuários busquem por um determinado conteúdo dentro de um contexto de uso.
Componentes
Agora vamos entender os componentes de AI. De acordo ainda com Rosenfeld e Morville existem 4 componentes principais dentro de um sistema de Arquitetura de informação. São eles: os sistemas de organização, os sistemas de rotulagem, os sistemas de navegação e os sistemas de pesquisa.
Sistemas de organização
São responsáveis por agrupar e categorizar a informação.
Um bom exemplo de organização é o site do Walmart que além de categorizar a informação agrupa as categorias distinguindo cada uma por cor.

Na imagem acima vimos que na interface do site do Walmart cada grupo de informação está categorizado por um nome, cada item de um grupo classifica uma categoria e possui um ícone próprio que o distingue dos demais, e cada grupo está caracterizado por uma cor.
Sistemas de rotulagem
São responsáveis por especificar formas para representar as informações. Eles servem para simplificar informações que possam confundir o usuário.
Qual a melhor terminologia de representar a página de about de uma empresa? Sobre? Quem somos? Institucional? O nome da empresa? Isso pode depender do resultado do equilíbrio dos círculos conceituais.
Uma página de contato com a terminologia “Contato” é de uso recorrente por representar as informações contidas na página de forma simples. Páginas de contatos de empresas geralmente fornecem informações de contato que incluem o número de telefone, ou números quando dispõe contatos de múltiplos, e-mails e contatos de redes sociaisl. A terminologia “Contato” que une estes dados de forma eficaz.

Outra forma eficaz de representar informações é através de ícones ou imagens. A representação através de ícones ajuda na compreensão de terminologias, mais complexas.

Na imagem anterior há o emprego do sistema de rotulagem através de ícones que representam cada ferramenta disponível pela plataforma.
Sistemas de navegação
São modelos de navegação responsáveis por orientar os usuários sobre como se movimentar pelas informações. Esses sistemas indicam a localização do usuário e o caminho correto a seguir para se chegar a um destino.
Para um sistema de navegação se tornar efetivo e funcional ele precisa:

Ser facilmente aprendido: Um website cujo sistema de navegação obriga o usuário a gastar muito tempo aprendendo sobre o funcionamento é desestimulante e rouba sua energia.
Dar retorno: O usuário espera uma resposta positiva a uma ação em algum sistema. No caso do sistema de navegação o que se espera é uma resposta que mostra ao usuário que ele foi bem-sucedido na navegação. Portanto para não gerar frustrações deve-se garantir a ausência de anomalias como links quebrados e rótulos que não correspondem com o conteúdo da página de destino.
Garantir economia de tempo e ações: Não podemos fazer com que as pessoas demorem muito a chegar a um destino. Prover atalhos de navegação são importantes em sites com muito conteúdo para que o usuário possa cortar caminho e chegar a informação desejada de forma mais rápida. Modelos de navegação que facilitam nestas tarefas são os mapas de sites, índices e breadcrumbs.
Utilizar nomenclaturas claras: Os nomes dos links devem comunicar de forma adequada para que o usuário não faça interpretações ambíguas sendo prejudicado na navegação.
Prover comunicação visual clara: Todo aspecto visual utilizado na navegação deve facilitar o processo. Formato de botões, links, utilização de ícones, posicionamento dos elementos devem ter o objetivo de ajudar o usuário.
Auxiliar na conclusão dos objetivos do usuário: Estudar o comportamento do usuário é ação importante para projetar uma navegação que garanta que o usuário conclua seus objetivos nos websites e aplicativos.

Existem muita técnicas que podem ser utilizadas em um projeto para orientar o usuário na navegação. Vou citar os modelos de navegação mais aplicados.
Navegação Global
Este é o modelo de navegação que oferece a visão macro de um website e que apresenta a instituição representada. É formado por um conjunto de links que aparecem em todas as páginas e que acessam informações de primeiro nível. Geralmente este modelo pode se tratar de um menu localizado no topo, ou como uma barra na lateral esquerda ou direita.

Navegação Local
A navegação local complementa a global e é destinada a orientar o usuário para se movimentar em uma seção específica do site. É uma navegação que destina o usuário para informações secundárias, mas importantes no contexto, cujos itens de navegação não caberia na navegação global por se tratar de um conteúdo volumoso e específico.
Um exemplo deste modelo pode ser usado em lojas virtuais para conhecer detalhes e especificações de um produto a venda. No exemplo a seguir a navegação é local porque expõe o menu específico, logo abaixo do menu principal, somente para usuários que acessam a página do produto iPhone.

Navegação Contextual
Este modelo de navegação oferece aos usuários acesso a conteúdos similares publicados no website. O intuito é dispor estrategicamente esta navegação para que o usuário perceba informações adicionais e similares ao que ele tinha buscado sem que ele tenha pensado em procurar sobre.
Você pode encontrar este tipo de modelo em alguns blogs no final de cada artigo na seção de artigos relacionados.

E seu uso também é muito comum em e-commerce ao fornecer informações adicionais ao item desejado. Percebe-se no carrinho de compra campos adicionais com títulos como; “Produtos visitados por quem procura este item” ou, “O que os clientes mais compram após ver esse item”. Os resultados exibidos nesses campos geralmente refletem produtos que foram consultados no calor do momento é que por isso podem estar relacionados com o item pesquisado.

Navegação Suplementar
A navegação suplementar disponibiliza caminhos alternativos de acesso a conteúdos fora da hierarquia estabelecida. Este modelo de navegação possibilita ao usuário ver a estrutura do site e conteúdo do site ou parte dele.
Entre as forma mais usadas se destacam:
Mapa do site:

Serve para apresentar as urls das páginas que constituem um site.
Índices:

É uma relação de temas apresentados de forma ordenada e que permitem acesso ao documento HTML de cada tema.
Breadcrumbs:

Breadcrumbs, ou breadcrumb trail, que pode ser traduzido por trilha de migalhas de pão, em alusão à história de João e Maria, servem para exibir o caminho percorrido pelo usuário até uma página de destino. Ajuda o usuário na sua localização.
Nuvem de tags:

Também conhecido como nuvem de palavras ou nuvem de etiquetas serve para apresentar termos mais acessados ou procurados através de uma estrutura visual que destaca em escala maior os termos mais importantes do site.
Sistemas de pesquisa
É um sistema com a função de ajudar o usuário a pesquisar uma informação no website ou aplicativo. É indicado quando existe muito conteúdo facilitando assim o acesso a rápido a informação.
O responsável por projetar o sistema de pesquisa deve pensar no mecanismo de pesquisa, filtro e demais ferramentas que facilitem a encontrar o conteúdo, na forma como os resultados da pesquisa serão apresentados e também como esses dados poderão ser utilizados após pesquisa.
A seguir mostro um sistema de pesquisa baseado em formulário que sugere antecipadamente termos relacionados com os primeiros caracteres digitados pelo usuário. Isso além de facilitar na busca possibilita maior rapidez na ação.

Outra forma de sistema que facilita pesquisa é aquele baseado em filtros e que oferece um resultado mais refinado.

Lista básica de entregáveis de Arquitetura da Informações
Dependendo da complexidade de um projeto haverá a necessidade de pesquisa e análise mais profunda o que poderá resultar na entrega de uma quantidade considerável de documentos com objetivos específicos.
Neste artigo vou listar os entregáveis de uso mais frequente. Vamos conferir?
Mapa do site

O mapa do site é um organograma que apresenta todas as páginas que o projeto terá e relação hierárquica entre elas.
Fluxograma

O fluxograma organiza o fluxo das informações. Com ele é possível compreender os melhores caminhos para seções do site.
Wireframe

Wireframe é um esboço que simula como a interface deverá funcionar. Ele possibilita mostrar a hierarquia das informações e o fluxo de navegação.
Protótipo interativo

É um wireframe com links que possibilita navegar entre as telas de forma que se avalie o funcionamento do sistema e analisar questões de usabilidade.
Persona

Persona é um formato para compreender o usuário de um público-alvo. Deve-se descrever características para a persona se aproximar de uma pessoa real.
Ao elaborar uma persona é interessante levar em conta características comportamentais do público-alvo, antever cenários de interação com o website ou aplicativo e levantar razões da importância do projeto para o usuário.
Conclusão
O conteúdo exibido aqui serve como uma introdução aos conceitos básicos da Arquitetura da Informação. É apenas um arranhão na superfície de camada espessa que é esta área, mas que acredito seja suficiente como apresentação inicial.
Há de se notar a preocupação desta ciência em descrever regras que resultam nos melhores métodos para que usuários atinjam seus objetivos em pesquisar e navegam entre interfaces. Conhecer e aplicar essas regras é o caminho comum para o profissional que quer se especializar sobre Arquitetura da Informação.
Espero ter contribuído com essa introdução. Caso tenha despertado seu interesse na área existem diversos caminhos para aquisição de conhecimentos a percorrer, inclusive pesquisando na internet.
Se você já iniciou na área ou atua há tempos, que tal contribuir com alguma observação sobre Arquitetura da Informação na seção de comentários?
Aproveite e compartilhe com amigos que possam vir a se interessar pela área.
Abraço!
Referências:
https://www.usability.gov/what-and-why/information-architecture.html
https://computer.howstuffworks.com/information-architecture.htm
https://irlabr.wordpress.com/apostila-de-ihc/parte-1-ihc-na-pratica/5-paradigmas-de-interacao/8-arquitetura-de-informacao/
Design para a internet – Projetando a experiência perfeita – Felipe Memória
Imagens:
http://jim-nielsen.com/blog/assets/img/2015/m2-flowchart.png
http://www.wireframeshowcase.com/images/uploads/100/wireframe11__sized.jpg
https://media.merixstudio.com/uploads/grafika1.jpg
http://www.christinanghiem.com/images/persona-01.jpg
The post Arquitetura da Informação – Ciência para estruturar conteúdos appeared first on Chief of Design.

Arquitetura da Informação – Ciência para estruturar conteúdos
Fonte: Chef of Design