Blog

Como adicionar ícones e imagens SVG no Elementor

30 de agosto de 2019

Como adicionar ícones e imagens SVG no Elementor

Hoje, neste artigo, você vai aprender a adicionar arquivos SVG no WordPress especificamente usando Elementor.

O que você acha de utilizar imagens que podem ser redimensionadas infinitamente sem perder qualidade ou nitidez? Você consegue imaginar como isso é útil para o design responsivo? Isso é o que o SVG tem de melhor podemos implementar este recurso dentro do WordPress.

Olá! Ed Francisco aqui e mostrarei a você como utilizar a biblioteca de arquivos SVG do Elementor para inserir ícones e gráficos SVG no WordPress contrapondo ao uso das tradicionais imagens bitmap na web.

Mais antes de qualquer coisa vamos entender o que é SVG.

O que é SVG?

O Scalable Vector Graphics (SVG) é um formato de imagem vetorial baseado em XML para gráficos bidimensionais formados através de expressões matemáticas cuja as instruções inseridas produzem formas preenchidas e que oferece suporte para interatividade e animação.

Se você trabalha com Adobe Illustrator, Inkscape ou Corel Draw você sabe que eles geram arquivos do tipo vetor e o SVG é um deles.

Diferentemente dos arquivos de imagens bitmap (como JPG, PNG, GIF, etc) os vetores não são formados por pixels. O pixel, como tem dimensão física, perde a nitidez quando redimensionado. Coisa que não acontece com o SVG e arquivos vetoriais. Você pode aumentar ou diminuir o tamanho sem perda de resolução ou desfocagem. Eles são extremamente leves e mantêm suas páginas enxutas.

Diferença entre imagem Bitmap e Vetor – Por Wikipédia

As imagens SVG poder ser usadas em logotipos, como ícones até como background e podem ser modificados através de CSS e Javascript.

Inserindo gráficos SVG através do Controles do Widgets de ícones do Elementor

A partir da versão 2.6 do Elementor se tornou nativo o suporte para inserção de gráficos vetoriais sem a necessidade da utilização de plugins para isso.

Com isso você pode usar qualquer widget para inserção de ícones que através de seus controles você poderá inserir em seu site Elementor dois tipos de recursos SVG:

ícones;imagens SVG.

Vou mostrar como proceder começando com as imagens.

Inserindo imagens SVG no Elementor

Para inserir uma imagem SVG no Elementor você pode utilizar qualquer dos widgets nativos de ícones da plataforma (ícones, lista de ícones, ícones sociais), mas se for a primeira que você for inserir será necessário habilitar o upload. Veja como proceder.

1 – No campo de busca de widget digite “ícone” depois escolha qual widget você quer escolher arrastando-o para a interface da página.

2 – Depois coloque o Mouse em cima do símbolo do ícone na área de edição do ícone e clique na opção “Upload SVG”.

3 – Aparecerá uma mensagem de alerta sobre os riscos de usar arquivos SVG mesmo o Elementor executando processos para eliminação de códigos maliciosos (falarei mais sobre segurança mais a frente). Você deve clicar em Ativar.

4 – Você será redirecionado para a biblioteca de mídia, onde poderá escolher entre as imagens que estão lá presente ou fazer upload de uma imagem em seu computador.

5 – A imagem então será inserida no bloco que você arrastou o widget.

Estilizando imagem inserida

Depois que você insere a imagem o widget oferece, na aba conteúdo, de inserção de link, alinhamento e modo de visualização (default, empilhado e emoldurado) e na aba de estilização opções onde você pode definir a cor do elemento, e com controles deslizantes, o tamanho, se deseja rotacioná-la e efeitos hover.

Questões de segurança envolvendo arquivos SVG

Você já sabe que o Elementor irá tentar proteger o sistema caso identifique arquivos SVG com códigos maliciosos. Isso porque o WordPress não suporta uploads de arquivos SVG por padrão por questão de segurança.

Os arquivos SVG contêm código na linguagem de marcação XML, semelhante ao HTML. Seu navegador analisa a linguagem de marcação XML para exibir a imagem. No entanto, isso abre seu site para possíveis vulnerabilidades XML como obter acesso não autorizado a dados do usuário, disparar ataques de força bruta entre outros ataques.

Com isso pode ocorrer o seguinte erro quando você for fazer o upload de uma imagem SVG.

“Invalid SVG Format, file not uploaded for security reasons” (Formato SVG inválido, arquivo não enviado por motivos de segurança).

Solução 1 para o arquivo não enviado – Otimização

Não que isso influencie diretamente na segurança, mas é indicado que você salve os arquivos SVG de aplicativos como o Illustrator, sem os estilos embutidos, para permitir que o Elementor crie um estilo para o ícone.

Para isso na guia de salvamento “SVG Options” em CSS Properties escolha a opção “Presentation Attributes”.

Após isso você pode fazer uma otimização online através do site SVGOMG que poderá “limpar” seu arquivo de modo a ser aceito no upload na biblioteca de mídia.

Você pode tanto fazer o upload do seu SVG usando a opção “Open SVG” ou a opção “Paste Markup” para colocar o código XML fornecido pelo Illustrator conforme vídeo que deixarei a seguir.

Vá até a aba Markup e faça os ajustes conforme o vídeo. Depois clique no botão azul para fazer o download do arquivo SVG otimizado.

Após esse processo faça novamente o upload do arquivo.

Solução 2 para o arquivo não enviado – Sanitização com plugin

Apesar que em todos os casos práticos que eu precisei o método 1 foi o suficiente existe um plugin que promete que faça o upload de SVG de forma segura. Se trata do Save SVG. 

A função deste plugin é certificar de que as imagens SVG estão higienizados para impedir que as vulnerabilidades do arquivo afetem seu site.

O seu uso é simples. Basta fazer a instalação e ativação. A versão gratuita não necessita fazer configurações.

Onde encontrar boa fontes de imagens SVG

Caso você não tenha tempo para criar suas próprias imagens SVG um bom recurso é visitar o site Flaticon que é um dos maiores bancos de imagens vetorizadas da internet.

Inserindo ícones SVG no Elementor

Para inserir um ícone SVG no Elementor você pode utilizar qualquer dos widgets nativos de ícones da plataforma (ícones, lista de ícones, ícones sociais).

1 – No campo de busca de widget digite “ícone” depois escolha qual widget você quer escolher arrastando-o para a interface da página.

2 – Depois coloque o mouse em cima do símbolo do ícone na área de edição do ícone e clique na opção “Icon library” (Biblioteca de ícones).

3 – Você terá acesso a biblioteca de fontes SVG Font Awesome 5 adicionada nesta versão do Elementor, que está com um desempenho para carregamento das páginas. Navegue pelas diferentes opções na Biblioteca de ícones.e selecione o ícone de sua preferência e clique em Insert.

Estilizando o ícone inserido

Depois que você insere o ícone o widget oferece, na aba conteúdo, de inserção de link, alinhamento e modo de visualização (default, empilhado e emoldurado) e na aba de estilização opções onde você pode definir a cor do elemento, e com controles deslizantes, o tamanho, se deseja rotacioná-la e efeitos hover.

Inserindo ícones personalizados

Talvez você não tenha encontrado na Icon Library o ícone que você deseja. Então você inserir um ícone de uma fonte externa na biblioteca. O processo é simples basta que você clique na opção “Upload”. 

Único problema que este recurso é só para quem tem a versão PRO do Elementor instalada no WordPress. Mas ainda sim é possível fazer upload dos ícones através do plugin Custom Icons for Elementor.

Faça instalação do plugin. Para saber como instalar plugins leia este artigo.

Você terá acesso a interface de upload do ícone acesso o menu Custom Icons. E você pode personalizar seus ícones usando o site Flaticon em conjunto com o site Fontello.

Processo de construção do ícone personalizado

1 – Vá até o site Flaticon e escolha uma imagem que você seja transformar em ícone e faça o download da imagem.

2 – Depois vá até a pasta onde está o arquivo baixado e o arraste para dentro do site Fontello no campo Custom Icons.

3 – A imagem aparecer neste campo em forma de miniatura. Clique nela para selecionar.

4 – Depois vá no botão Download Webfont e clique para baixá-la.

5 – Vá até a interface de upload do Custom Icons e execute o upload do arquivo baixado.

6 – Retorne até a página que está editando o Elementor recarregue-a e executa o processo de inserir um ícone através de um widget como já mostrado nesse artigo.

7 – Você verá que a Icon Library mostra acesso para inserção que você criou no Fontello. Selecione o ícone e clique em Inserir.

8  – O ícone será inserido na área desejada.

Conclusão

Procurei passar as formas que a partir da versão do Elementor você te permita inserir arquivos SVG em seus sites WordPress. Esses arquivos serão cada vez mais usados onde pode ser mais compensador a aplicação que a aplicação de imagens bitmaps. Lógico que sempre haverá espaço para tanto imagens vetoriais quanto bitmaps. A necessidade do projeto é que vai definir o uso.

Caso a escolha seja SVG é importante estar sempre atento às questões de segurança sanitização os arquivos e verificando a procedência.

Acredito que muito ainda irá evoluir esta relação entre Design Responsivo, SVG, Elementor e WordPress a ponto de nos forçar a sempre estar atualizando este artigo. E isso será sinal de mais funcionalidades e facilidades para o usuário WordPress. 

E você o que achou do recurso para habilitação de arquivos SVG no Elementor? Dê sua opinião nos comentários!

Aproveite e compartilhe este artigo com os amigos.

Abraço!
The post Como adicionar ícones e imagens SVG no Elementor appeared first on Chief of Design.

Como adicionar ícones e imagens SVG no Elementor
Fonte: Chef of Design

O que é Elementor WordPress page builder?

29 de agosto de 2019

O que é Elementor WordPress page builder?

Eae, tudo bele?

Este artigo é para você está procurando por Elementor WordPress. Aqui eu vou te mostrar o que é esse page builder e como você pode utilizar o WordPress Elementor Page Builder em seus sites.

O Elementor é uma ferramenta do WordPress, CMS do mundo. CMS é o acrônimo de Content Management System — que traduzindo significa, sistema de gerenciamento de conteúdo, existem vários no mercado, porém nada supera o WordPress em termos de possibilidades, suporte e ferramentas.

Os gerenciados de conteúdo permitem criar sites mesmo sem saber programar, eles contam com templates, plugins e outras ferramentas que nos possibilitam tal facilidade. E no caso específico do WordPress, temos milhares de possibilidades de criação, desde blogs até lojas virtuais e grandes sites. Aqui no Brasil, temos alguns exemplos como o site da Toyota, da editora Abril, do Rock in Rio, da Gisele Bündchen e até mesmo o blog do Wix (vejam só hehehe) é feito em WordPress.Só para você ter uma ideia, mais de 30% dos sites em todo o mundo são feitos com o WordPress. E o Elementor é o plugin mais utilizado (ou um dos mais, depende de quando você estiver lendo esse artigo) e baixados e utilizados de toda a plataforma.

Então neste artigo você verá como utilizar esse page builder e começar a criar os seus próprios sites de forma simples e intuitiva.

O que é o Elementor WordPress?

Caso você não saiba Elementor WordPress é plugin de page-builder para o CMS WordPress. Com ele é possível criar páginas de sites em uma interface real-time e do tipo “drag&drop”, ou seja, clicando e arrastando.

O plugin Elementor é um dos mais populares na comunidade WordPress, se tornando o principal page-builder da plataforma. Para utilizar o Elementor, basta ter um site em WordPress. Caso você não saiba instalar o WordPress ou nem sabe do que se trata, sugiro que leia esse outro artigo.

Abaixo você pode conferir uma live que fiz utilizando a ferramenta e como em pouco menos de 1 hora eu criei um site sem mexer em código, praticamente apena “clicando e arrastando”.

Quais os benefícios do Elementor WordPress?

O principal benefício é poder criar páginas de modo rápido, simples (clicando e arrastando) e sem precisar mexer em código. Podemos listar como alguns, dos vários benefícios que o Elementor pode proporcionar para você que precisa criar páginas web, como:

A curva de aprendizagem é relativamente rápida e simples;
você não precisa comprar a versão pro (mas é muito bom se puder);
existem vários produtores de temas, plugins e addons;
é um dos plugins mais utilizados pela comunidade do WordPress;
não precisa de conhecimentos em programação (mas é bom se souber);
não precisa de conhecimentos em HTML e CSS (mas é muito bom se souber);
ele funciona independente do tema que estiver utilizando, permitindo adicionar e deletar elemento em páginas e posts.

Como instalar o Elementor WordPress?

A instalação é bem simples. Basta você acessar o site diretório de plugin do wordpress, procurar pelo Elementor e depois clicar na opção “download”.

Você também tem a opção de acessar o próprio painel de controle do seu site em WordPress, depois ir em: Plugins> Adicionar Novo. NO campo de pesquisa você deve procurar por “Elementor“.

Abaixo deixo um vídeo tutorial que gravei mostrando como você instala o Elementor em seu site WordPress.

O vídeo acima faz parte de um curso de Elementor WordPress que gravei aqui para os seguidores do Chief of Design. Caso queira aprender mais, clique aqui.

Como usar o Elementor WordPress?

Após instalar o Elementor, basta você criar uma nova página ou post. Depois, clique em “Editar com o Elementor” e pronto. A partir disso você será redirecionado para a tela de criação da página, onde você poderá configurar e construir a página sua maneira.

Como já dito, o Elementor é um construtor de páginas to tipo “clica e arrasta”.Para você começar a criar a página, você vai adicionando elementos e literalmente construindo a sua página dessa maneira.

Em meu canal no Youtube eu tenho uma playlist onde mostro o passo a passo para você começar a trabalhar com o Elementor. Caso queira aprender mais, clique aqui.

O Elementor WordPress é pago?

Sim e não. Você pode usar tanto a verão free quanto a paga. Existem essas duas versões, gratuita e paga, do software, porém em ambas você consegue as suas páginas. É isso mesmo que você leu! Caso você não tenha dinheiro para comprar o plugin, é possível instalá-lo e utilizá-lo.

Também é possível, mesmo na versão free, instalar “addons” e outros plugins que atuam em conjunto com Elementor WordPress, potencializando as funcionalidades e possibilidades de criação de páginas.

A grande diferença entre a versão paga, chamada de Elementor PRO, e a gratuita está nas funcionalidades da ferramenta.

A versão paga do Elementor é muito mais completa, pois contém várias funcionalidades que a verão gratuita não tem. Para conhecer a versão PRO e todos os seus benefícios, clique aqui.

Quanto custa a versão paga do Elementor WordPress?

A versão paga do Elementor está disponível atualmente em três planos.

O plano “Personal” para uso ilimitado em 1 site, está por $49.
O plano “Plus” para uso ilimitado em até 3 sites, está por $99.
O plano “Expert” para uso ilimitado em até 1000 sites, está por $199.

Em todos os planos você tem 30 dias de garantia e 1 ano de suporte e atualizações. A licença é perpetua e você pode utilizá-la para sempre.

O preço sempre é aplicado em dólar americano, então dependendo do câmbio do momento, o valor pode ser maior ou menor.
Para conhecer a versão PRO e todos os seus benefícios, clique aqui.

Vale a pena comprar a versão paga do Elementor WordPress?

Sim, super vale a pena. O Elementor facilita de mais a construção de páginas web e sites completos. E o mais legal que você pode criar os sites dos seus clientes com ele. Não tem problema algum. Por isso, o investimento tende a se pegar ao longo do tempo, caso você atue como freelancer.

Caso você não trabalhe com sites, mesmo assim a versão Elementor PRO vai te ajudar, pois vai te ajudar a poupar muito tempo e com as funcionalidades exclusivas da versão paga você terá mais agilidade e controle sobre o seu projeto.
Você pode conhecer a versão PRO e todos os seus benefícios, clique aqui neste link.

Considerações

O Elementor WordPress com certeza está entre os melhores page-builders da atualidade,na minha opinião é o melhor e mais completo que existe.

A facilidade que o Elementor nos dá na hora de criar páginas, a sua versão free com bastante recursos e mais todo o suporte da comunidade com a criação de novas ferramentas e resoluções de bugs é muito grande.

Se você deseja aprender a utilizar essa ferramenta, eu tenho uma boa notícia para você.

Em meu canal no Youtube eu tenho uma série de vídeos onde mostro como você pode começar a criar os seus próprios sites com o Elementor. Clique aqui para conferir.

E você já utiliza o Elementor? Deixe abaixo a sua opinião, relato ou dica sobre esse plugin.

Forte abraço.

Até mais.
The post O que é Elementor WordPress page builder? appeared first on Chief of Design.

O que é Elementor WordPress page builder?
Fonte: Chef of Design

Max Denvir – Entrevista🎙 Na mesa do Chief

30 de outubro de 2018

Max Denvir – Entrevista🎙 Na mesa do Chief

Eae, tudo bele?
Mais um bate-papo para você. Hoje a troca de ideias é com o Max Denvir.
O Max é publicitário formado pela PUC do RJ e atua com a criação de conteúdo. Ele também faz parte da organização de comunidades como o WordCamp. E junto comigo, ele está organizando o meetup sobre design, criatividade, conteúdo e tecnologia que é o Insights.
Caso você não saiba, meetup são reuniões e encontros de uma comunidade para compartilhar conteúdo e trocar experiências. Normalmente são gratuitos e nasceram lá no Vale do Silício.
Meetups são algo comum em comunidades de tecnologia, mas quando se trata de design ou outra área criativa, ainda é bem raro encontrar algo.
Por isso decidimos criar esse meetup. E além de gratuito, qualquer um pode participar do Insights, seja palestrando, organizando ou assistindo.
Se você quiser participar do nosso meetup, basta a acessar o link a seguir e se cadastrar: https://www.meetup.com/pt-BR/insights-meetup/
Mas nesse entrevista com o Max Denvir não foi somente sobre meetups. Conversamos sobre vários assuntos referente a design, conteúdo, marketing e publicidade e propaganda.
Falamos sobre posicionamento no mercado criativo, sobre criação de conteúdo, sobre oportunidades, clientes, faculdade e outros tópicos relacionados.
Sugiro que você assista o vídeo até o final.
Entrevista com Max Denvir Na mesa do Chief

Conheça o publicitário Max Denvir
Max Denvir é estrategista de conteúdo e trabalha com conteúdo e planejamento na Aza.ag. Na área criativa desde 2009, possui experiência em branding, design, marketing digital e tecnologias para comunicação. Formado em comunicação na PUC-Rio e pós-graduando em cultura alimentar, trabalha em projetos de gastronomia social e pequenos negócios alimentares na Taperebá.
Instagram: https://instagram.com/maxdenvir
LinkedIn: https://linkedin.com/in/maxdenvir
O que você achou do vídeo?
Se  gostou do vídeo deixe o seu comentário abaixo! Isso é muito importante para continuarmos com o nosso trabalho e melhorarmos cada vez mais.
Ajude 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 Max Denvir – Entrevista🎙 Na mesa do Chief appeared first on Chief of Design.

Max Denvir – Entrevista🎙 Na mesa do Chief
Fonte: Chef of Design

Tipografia: Guia Sobre Tipos – Escolhendo a fonte certa [parte 02]

26 de outubro de 2018

Tipografia: Guia Sobre Tipos – Escolhendo a fonte certa [parte 02]

Eae. Td Bele?
Hoje continuaremos com a série sobre tipografia.
Na primeira parte da série (se você ainda não leu, clique AQUI para ler) vimos sobre a história e a anatomia das letras.
Nesta segunda parte continuaremos a falar sobre tipografia. Veremos as suas classificações tipográfica, os estilos e entraremos na composição tipográfica.
Estamos evoluindo (não é, Galucho?) e até o final da série iremos saber como escolher nossas fontes da melhor maneira. Portanto, vamos continuar destrinchar a tipografia.
Preparado? Então, vamos lá!
O que você verá nesse artigo?

A classificação Tipográfica 
O estilo dos tipos
O que é Kerning, Tracking e Leading
Alinhamentos

Classificação da Tipografia
Essa parte é um pouco complexa. Existiram várias classificações ao longo do tempo para as famílias. Citarei algumas como exemplo:

O Sistema de Francis Thibaudeau (uma das mais usadas por aí);
A DIN (Deutsches Für Normung);
Classificação Europa;
Maximilian Vox;
Robert Bringhurst;
Maximilian Vox e, derivada dela, a Vox/ATYPI (Association Typographique Internationale);
British Standards;
Linotype ;
Lucy Niemeyer.

(Ufa!)
Não quero julgar nenhuma nem outra, até porque não tenho capacidade para tal, mas todas as classificações, pelo que puder ver, pecam em algum quesito.
Devido a isso vou usar uma classificação, que obtive no espaço acadêmico através do professor Cesar Benatti, e que usa a presença ou não de serifas (senão lembra o que é serifa veja o que é clicando AQUI) como característica determinante para esse processo de classificação.
Com serifa
Humanistas
Simulam a caligrafia clássica feita a mão e fazem parte dos primeiros tipos de metal produzidos na Itália e França entre os séculos XV e XVI.

Transicionais
Possuem serifas mais finas e planas com acabamento agudo.
Seu eixo vertical é levemente inclinado.

Modernas
Esse estilo possuem serifas retas e um alto e contraste na espessuras das hastes.
Eixo na vertical.

Mecânicas
Traço e serifas retangulares. São do século XIX e vieram para uso em propagandas.

Sem Serifa
Grotesco
Uma variação das letras mecânicas sem as serifa.
Oriundas do final do séc XIX.

Gothic
Possuem uma variação espessura dos seus  traços.
É uma variação das grotescas gravadas nos EUA no final do séc XIX .

Humanistas
Possuem leve variação no traço e resquícios de traços caligráficos.
Tem como origem a estrutura das letras serifadas.

Geométrico
Usam formas geométricas básicas para a sua estruturação.

Neo Grotesco
É variação da grotesca que surgiu na década de 1950.

Outros Estilos
Cursiva
São tipos que usam como referência a escrita manual, logo procuram reproduzir as características da escrita manual. Costumeiramente, possuem uma legibilidade complicada e sua utilização deve ser feita com cautela.

Fantasia
São tipos diversos, com diversas inspirações, padrões e características.
O objetivo desses tipos é um passar um forte impacto visual. São bem irregulares e vão de “8 à 80”: algumas possuem boa legibilidade enquanto que outras quase nenhuma legibilidade.
Normalmente funcionam melhor só em tamanhos grandes.

Gótica
É um tipo com características dos manuscritos antigos. Procuram reproduzir a escrita dos monges copistas da idade média (anterior à invenção da tipografia). Normalmente são mais densas e com baixa legibilidade.

Históricos
São tipos inspirados nas escritas greco romanas.
Também possuem muitas irregularidades e pouca legibilidade.

Estilos dos Tipos
Cor (tonalidade)
Diz respeito a espessura (ou o peso) dos tipos: light, thin, medium, roman, bold, black, etc.

Largura
Se refere à relação entre a base e altura da letra. Existem inúmeras famílias que já vem com essas variações. Evite “condensar” ou “expandir” um tipo por conta própria. Isso irá deformá-lo e prejudicará a sua estrutura.

Postura
Trata-se da inclinação do eixo central das letras. A postura básica dos caracteres é regular (como eixo central vertical).
Os caracteres regulares “inclinados” recebem o nome de “oblíquos”. O termo itálico é aplicado erradamente. Itálico diz respeito aos tipos cursivos.

E os caracteres inclinados (cursivos) recebem o nome de “itálico” ou “grifo”, em referência ao tipógrafo italiano do séc. XV, Francesco Griffo, percursor com o trabalho de tipos inclinados.

E agora veremos um pouco sobre composição tipográfica, mais especificamente sobre os alinhamentos e espaçamentos. Vamos conferir?
Kerning, Tracking e Leading
Kern
Trata-se do espaçamento entre os caracteres. Existem partes das letras que ultrapassam o bloco para permitir um encaixe com outras letras, para que não fiquem muito afastas e assim prejudicar o visual.

Kerning
É o processo de ajustar os espaços entre pares de caracteres, ou seja, somente em algumas letras.
O Kerning da fonte é definido pelo type designer quando está criando-a. Hoje em dia os softwares de computador também oferecem um opção de Kerning (óptico) definido para amenizar defeitos de fontes mal produzidas. Porém, quando esses kernings não atendem nossas necessidades é necessário ajustá-lo manualmente.

Tracking (espaçamento)
É o espaçamento entre letras e entre as palavras de todo um bloco de texto. Isso significa que alteramos o espaçamento de todo o conjunto de caracteres (palavra, frase, parágrafo) por inteiro.

O espaçamento entre as palavras deve ser consistente, para se evitar grandes espaços em brancos ou encavalamentos no texto, prejudicando o a leitura.
Leading (entrelinhas)
A entrelinha é o espaço entre duas linhas de texto.  A medida é a distância da linha de base de uma linha tipográfica para outra. Normalmente o leading automatizado está cerca de 20% a mais que o tamanho do tipo utilizado. Ex: tamanho 10pt leading 12pt.
Quanto mais aumentamos a entrelinha, mais aberto e leve se torna o bloco de texto e quanto mais diminuímos a entrelinha (entrelinha negativa) mais apertado se torna o texto.

Deve-se usar esse recurso com parcimônia. Devemos tomar cuidado para não aumentar muito, transformando os textos praticamente em “tópicos” ou estreitar demais fazendo com que as linhas das ascendentes e descentes se colidam tornando o texto um emaranhado de letras inelegíveis. Por via de regra, sempre os espaços das entre linhas serão maiores que o espaço entre as letras e o tamanho do tipo.
Alinhamento
Nada mais é que o posicionamento do texto em relação ao espaço e aos elementos contidos nele (no espaço).
Os tipos de alinhamentos básicos você já deve estar cansado de saber… Mas vamos recapitular: à esquerda, à direita, centralizado e justificado.
Cada um deles possui suas peculiaridades e suas vantagens e desvantagens, e para chegarmos ao um bom resultado devemos saber como usá-los.
À esquerda:
Nesse tipo de alinhamento o texto segue o nosso fluxo (no ocidente, da esquerda para a direita). As linhas dos textos tem diferentes tamanhos e são irregulares na sua margem, ou seja, à direita.

À direita:
Nesse tipo de alinhamento os textos são alinhados à direita e suas linhas tem diferentes tamanhos, sendo irregulares nas margens, ou seja, à esquerda. Isso acaba dificultando a legibilidade, pois força o olhar (estou falando no nosso caso ocidental, ok?) a “caçar” uma posição inicial.
Por isso ele é pouco usado em textos longos e é mais usual em trechos, notas, citações, etc.

Esses dois alinhamentos, à esquerda e à direita, normalmente exigem uma atenção maior do designer para conseguir ajustar de forma harmoniosa o desalinhamento das margens.  No caso do alinhamento à esquerda a margem direita e no alinhamento à direita a margem esquerda, sem utilizar muitos hifens e sem deixar aqueles “bicos de papagaios” no bloco de texto.
Centralizado
No centralizado as linhas de textos têm tamanho irregulares em ambos os lados.
É muito usado para se enfatizar uma frase, em títulos, convites de casamento, certificados, epitáfios, etc. Normalmente usa-se esse alinhamento quando se quer transmitir certa formalidade e elegância.
Como todos os alinhamentos, o centralizado tem que ser usado com sabedoria, pois o texto pode ficar tedioso para o leitor.

Justificado
Ele é o mais formal de todos. Suas linhas têm o mesmo comprimento, portanto cria-se margens “duras” ( ou uniformes) em ambos os lados. É muito utilizado em textos longos como jornais e livros. Quando bem aplicado o justificado aproveita o espaço de forma eficiente. Se mal aplicado pode produzir grandes espaços em brancos (“rios”) quando o tamanho do tipo é maior em relação ao tamanho da linha.
Utilizar a hifenização pode ajuda a quebrar palavras muito longas e assim manter o espaçamento harmonioso. Também pode-se fazer o uso do tracking para ajustar as linhas.

Outro ponto relevante que deve ser levado em conta é o tamanho das linhas. Ela serve para guiar o olho a seguir o texto, por isso seu tamanho deve ser harmonioso para que a leitura não se torne cansativa.
Uma boa tática a se usar na estruturação dos textos é usar o mínimo de sete palavras e no máximo dezenove palavras por linha. Claro que isso varia de acordo com as características da tipografia, do suporte e de cada projeto, logo não deve ser encarado como um dogma (que você vai para inferno caso não utilize), mas com certeza uma média entre sete e quatorze palavras por linha é bem útil na hora que você pensar na diagramação dos seus textos.
Assimétrico
Normalmente são usados quando quer transmitir a  mensagem através da forma do texto. É uma composição sem padrão nas linhas.
Capitular
É a ênfase que se dá a letra inicial no começo de um capítulo aumentando o tamanho do corpo dessa letra, a inicial, no parágrafo.

Indentação ou Entrada
Se refere ao espaço em branco, um “avanço do texto”, no início do parágrafo. Normalmente a indentação é à esquerda e na primeira linha do parágrafo.

Recuo
É praticamente o inverso da indentação. A primeira linha fica alinhada à esquerda enquanto que as demais linhas são alinhadas um pouco à direita.

E chegamos ao fim da segunda parte!
No próximo artigo irei concluir essa série de artigos sobre tipografia.
Agora já temos uma boa base sobre tipografia, mas veremos um pouco mais sobre composição tipográfica para saber como usar os tipos da melhor forma nos nosso projetos.
Antes de me despedir, vou deixar para você uma vídeo-aula que gravei para meu curso tempos atrás sobre tipografia. A playlist inteira, com todos os vídeos sobre tipografia, está no canal do Chief no Youtube.

E você gosta de tipografia?  Está gostando da série?  Tem alguma coisa a acrescentar?
Você pode deixar seu comentário abaixo.
Até mais.
Forte Abraço.
Confira a primeira parte aqui  → https://www.chiefofdesign.com.br/tipografia
Confira a terceira parte aqui  →https://www.chiefofdesign.com.br/tipografia-03/

Referências:
Livro Elementos Do Estilo Tipográfico – Robert Bringhurst
Livro Pensar com Tipos – Ellen lupton
http://www.woww.com.br/2008/08/espacejamento-entrelinhamento-e.html
http://tudibao.com.br/2010/07/o-que-e-kerning-e-traking-em-um-texto.html
http://www.academia.edu/557631/Um_panorama_das_classificacoes
_tipograficas_An_overview_of_typeface_classifications
The post Tipografia: Guia Sobre Tipos – Escolhendo a fonte certa [parte 02] appeared first on Chief of Design.

Tipografia: Guia Sobre Tipos – Escolhendo a fonte certa [parte 02]
Fonte: Chef of Design

WordPress como Ferramenta de Marketing Digital

25 de outubro de 2018

WordPress como Ferramenta de Marketing Digital

Eae, tudo bele?
No dia 13/10/2018 eu palestrei no WordCamp2018. O tema da minha palestra foi: WordPress como Ferramenta de Marketing Digital: Como o WordPress pode te ajudar a alavancar o seu negócio?
O WordPress é uma ótima ferramenta para quem é empreendedor e nessa palestra eu mostrei como nós utilizamos esse CMS aqui no Chief of Design e também em outros projetos.
E a oportunidade de palestrar no WordCamp foi incrível. A comunidade aqui do Brasil, e principal a de São Paulo, é uma das maiores do mundo.
Assista abaixo a palestra que ministrei e veja como foi esse super evento de tecnologia. E caso queira os slides da palestra, você pode conferir aqui.
WordPress como ferramenta de marketing digital – Palestra WordCamp 2018

E já que falei tanto sobre WordPress na palestra, vou complementar este artigo com mais conteúdo, para você entender por completo entender como o WordPress pode ser uma ótima ferramenta de marketing digital ajudando a melhorar o seu negócio, vamos entender um pouco do que se trata esse CMS.
O que é o WordPress?

Caso você nunca tenha ouvido falar em WordPress saiba que ele é uma plataforma de Gerenciamento de conteúdo, ou para muitos o CMS (que tem na prática o mesmo significado). Esta a é a plataforma para publicação de conteúdo mais usada no mundo e engloba quase 70% do mercado que trabalham com CMSs.
O que você poderá fazer caso domine este CMS?

Depende do objetivo. Se você pretende apenas trabalhar com conteúdo você poderá administrar todas as publicações do site através da construção de páginas, galeria de imagens, páginas de produtos, posts de blogs, entre outro tipos de conteúdo, e também executar agendamento e exclusão dos mesmos.
Também poderá instalar funcionalidades através de instalação de plugins e gerenciar comentários, se ativada esta função no projeto, e até gerenciamento de contas de colaboradores do projeto.
Caso seu objetivo seja a construção de um site, você poderá usar de recursos próprios do WordPress para agilizar seu trabalho e até ativar funcionalidades interessantes na própria interface desta plataforma sem muitas dificuldades. Entretanto você potencializará os seus layouts caso possua conhecimentos em linguagens de marcação, estilização [** Dica: To falando do HTML & CSS  e o melhor é que temos um ebook pra isso, viu! é  clicar no banner que está aí algum lugar desta página :P]  e/ou programação.
Quais recursos o WordPress oferece?

Além das inúmeras funcionalidades que esta plataforma disponibiliza, através de seus temas e plugins, também possui suporte em uma das comunidades mais engajadas que podemos encontrar na web, o que possibilita a você encontrar muitas variedades de soluções para problemas diversos.
Porque você deve aprender a mexer nesta plataforma?
O aprendizado deste CMS é imprescindível nos dias de hoje porquê:

pelo fato do mercado exigir cada vez mais profissionais habilitados nesta plataforma, pela possibilidade de oferecer aos criativos que não lidam com programação uma forma de aplicar funcionalidades através de configurações intuitivas em seu painel de controle;
porque possibilita a profissionais de front-end personalizar temas já existentes através de HTML e CSS e a desenvolvedores criarem temas do zero bastando ter acesso à documentação do WP;
E o principal: como esse sistema possibilita o gerenciamento, seus clientes poderão realizar a atualização dos conteúdos dos sites sem depender de você, bastando que ele seja orientado com as ferramentas de publicação que o WordPress oferece.

Não confunda WordPress.ORG com WordPress.COM

É importante ressaltar que tudo que foi dito até agora foi sobre o WordPress.ORG.
O WordPress.ORG é um projeto que oferece um aplicativo gratuito cujos arquivos você tem a total liberdade para modificá-los. Para que este aplicativo funcione, e você possa mexer na plataforma para construir seu site, você precisa hospedá-lo em um servidor.
Em relação ao WordPress.COM se trata de uma plataforma online, isso quer dizer que você não precisa baixar arquivos de forma alguma para instalar em uma hospedagem. Todos os recursos já vem prontos em uma hospedagem própria da plataforma. Mas possui muitas limitações. Exemplo: para que você ative funcionalidades extras você é obrigado a adquirir planos pagos para isso. Para você ter uma ideia para apenas adicionar um domínio é precisa pagar um plano.
Já com o WordPress.ORG. não existem estas limitações em relação as customizações, e grande parte das funcionalidades que você instala através de plugins é gratuita.
Na palestra eu falo sobre motivos para você utilizar o WordPress e como você pode utilizar o WordPress para a criação de:

Blogs;
Landingpages;
Testes A/B;
Para conseguir tráfego via SEO;
Entre outros.

Além de todas essas possibilidades de criação, deixarei alguns desses motivos aqui em texto para você conferir.
WordPress é fácil para instalar, configurar, gerenciar e manter
Umas das questões que tenho que lidar é administração de tempo. Ah , como é complicado, viu!
Então lidar com uma ferramenta que traga facilidades é um dos pré-requisitos para escolha de um CMS.
Já naquele tempo, quando comecei a rascunhar as primeiras ideias sobre o Chief, ganhar tempo era uma prioridade, afinal só poderia mexer no projeto nos momentos de folga e dedicar o maior tempo com criação de conteúdo e o mínimo com gerenciamento.
Para quem for instalar o WordPress pela primeira vez pode se surpreender se espera por uma instalação complexa. Porque é simples e rápido.
Em questão de configuração e gerenciamento a curva de aprendizagem é curta. E o CMS avisa sobre a necessidade de atualizações que podem ser feitas a um clique.
Caso você queira saber como instalar o WordPress veja este artigo.
E dependendo da hospedagem que utilizar essa ação pode até ser mais simples com instaladores automáticos. Como a Hostnet, por exemplo que tem o seu próprio sistema de instalação focado em WordPress.
É de código aberto

Vista que o Chief era um projeto que estava começando, umas das premissas era atingir os primeiros objetivos com o mínimo de recursos possíveis, ou seja, com pouca audiência prevista nos primeiros meses não se justificava investir em ferramentas caras, servidor dedicado e no que se refere a gerenciador, logicamente, soluções pagas estavam fora de cogitação. Uma solução open source era o que eu buscava.
Pois bem. O WordPress é open source e livre de restrições comerciais e limitações. Você pode baixá-lo e subi-lo no servidor de hospedagem que você escolher e usar da forma que você bem entender.
Possui uma comunidade enorme

Esse lado positivo do WordPress eu enxerguei muito antes mesmo de passar em minha mente em construir um blog sobre conteúdos para Web. Foi quando tive a necessidade de construir um site dinâmico e não sabia por onde começar, que encontrei soluções práticas na grande comunidade que cria conteúdos sobre WordPress, e soube que a partir daí teria respostas para grande parte das minhas dúvidas.
Essa comunidade enorme é consequência de um enorme número de seguidores sedentos por conteúdo. Daí o resultado foi “zilhões” de sites que falam sobre o assunto, um fórum feito especialmente para dar suporte, diversos eventos presenciais sobre o tema pelo mundo e desenvolvedores que criam temas e plugins para o WordPress.
Sabendo disso antecipadamente tive a certeza que o Chief estaria bem amparado.
Lógico que tem muita coisa espalhada na web e que você tem que angariar com paciência, ou optar por treinamentos como o meu curso Web Designer Pro, que possui módulos organizados sobre esse assunto.
Além da comunidade Web, também existem eventos presenciais da comunidade como palestras, workshops e meetups. Inclusive o meu primeiro WordCamp foi o de 2016 aqui em São Paulo. Duvido você me encontrar na foto abaixo

E
Ele é amigável para os mecanismos de buscas
Ter um site “encontrável” é objetivo para qualquer projeto, independente da ferramenta que você desenvolve. Você pode criar um site estático somente com HTML e CSS, mas sua preocupação com SEO deve estar presente.
De nada adiantaria escolher um CMS para o Chief, por melhor que ele seja, que não fosse amigável aos mecanismos de buscas. E WordPress é bem-conceituado neste quesito.
Nada mais, nada menos que Matt Cutts, engenheiro de software e ex-chefe da equipe de spam da web no Google declarou que o WordPress cuida de 80 a 90% de SEO.

Sem contar que você pode instalar uma funcionalidade através de um plugin gratuito chamado Yoast SEO que facilita e muito sua vida, provendo vários aspectos de SEO em seus sites.
Não abro mão deste plugin no Chief. Se você quiser saber mais sobre plugins importantes para o seu site em WordPress, sugiro que leia este outro artigo do aqui do blog.
WordPress é muito mais que um gerenciador para blogs
Já passou da época em que o Worpdress era um ótimo gerenciador de blog. Na verdade, ele é um CMS completo para todos tipos de sites. Basta a instalação de alguns plugins e você já tem uma loja virtual ou uma rede social.
Enquanto projetava o Chief of Design, vislumbrava o que mais um gerenciador de conteúdo poderia prover se eu quisesse oferecer de forma diferente os meus conteúdos. De repente poderia me ver com a necessidade de fornecer aos meus seguidores uma área de membros, poderia necessitar de algum recurso que me ajudasse a conquistar leads, etc.
Hoje em dia, boa parte destes recursos são realidades mesmo que através de plugins premium (pagos). O que faz que eu tenha uma melhor interação com meus seguidores além da interface do blog.
O WordPress possibilita a integração, desde que você adquira ferramentas corretas,desde criados de landingpages, áreas de membros até com ferramentas de e-mail marketing, por exemplo.
Interface de administração intuitiva

Está aí uma coisa que gosto muito no WordPress. A interface administrativa deste CMS é muito boa. O que faz que em pouco tempo usuários comuns possam gerenciar seus projetos.
A interface é intuitiva, fácil de usar e de acessar dados.
Acredito que esse é um os diferenciais do WordPress que você pode levar em consideração na hora de escolher um CMS.
Afinal, grande parte (ou praticamente tudo) das ações que um cliente realizará em um site dinâmico, construído por você, será na área administrativa. E o WordPress manda bem no que se refere ao Design de interface de usuário.
O WordPress possui ótimos temas modernos e responsivos

Existe uma gama de desenvolvedores que constroem sites adaptados para diferentes resoluções de telas. Isso já esperado quando comecei a descobrir o WordPress, tanto que quando comecei o Chief sabia que encontrar um bom tema responsivo não seria problema.
Claro que tendo conhecimentos em CSS, você poderá trabalhar ainda mais a responsividade de seus sites (sobre personalização vou falar mais à frente). Foi o que eu fiz no tema que o Chief usa atualmente.
O WordPress possui uma ferramenta de busca que possibilita encontrar diversos temas. Possui até filtro por características. Mas caso não encontre nos gratuitos o tema o ideal para  você, pode optar por temas pagos como os do site themeforest.
O WordPress possui plugins que são uma mão na roda

O WordPress foi criado para ser estendido. E esta forma de extensão é gerada pelos chamados plugins. A comunidade web aderiu a esta possibilidade e por isso que desenvolvedores em todo mundo criam funcionalidades extras, a todo tempo, que são adicionadas ao núcleo do gerenciador.
Pensou em uma funcionalidade para seu site? A chances de Worpdress ter um plugin que supre essa necessidade é grande.
Reconheço que outros CMSs, como o Drupal e o Joomla, dispõem de extensões como os plugin do Worpdress, mas a disponibilidade e variedade do WordPress é impressionante.
Existem alguns plugins que são tão bem classificados que dificilmente imagino o Chief sem alguns deles.
São plugins para SEO, segurança, performance, redes sociais, formulários, entre tantas funcionalidades que fico pensando o que seria de mim se tivesse que desenvolver tudo isso. Com poucos cliques você instala e ativa e, se precisar, realizar algumas configurações.
Obs.: Só não abuse no uso de plugins para não diminuir a performance de seus sites.
Altamente personalizável
A minha preocupação na hora de construir os meus projetos era se com apenas o domínio de HTML e CSS e fuçando na documentação do WordPress, seria possível personalizar um tema, que baixei na web, a partir do código inserindo campos e seções e personalizando o layout. E a resposta foi sim, tanto que visualmente o blog do Chief é muito diferente do tema original.
Esta personalização é feita através de temas filhos, assunto que poderemos abordar no futuro.
Se você manja de PHP você poderá ter um domínio ainda maior da personalização, pois grande porcentagem da parte funcional de um tema WordPress é formada por arquivos com extensão .php.
É possível também que você faça uma personalização mais abrangente se você dominar a criação de temas raiz ou a partir de um framework para ganhar mais tempo, como por exemplo o framework Odin, desenvolvido pela comunidade brasileira de WordPress.
Temas a partir do zero, temas a partir de frameworks e temas filhos são as formas que possibilitam um projeto altamente personalizável. Todavia ainda existe uma forma que possibilita uma menor de customização, que é através da customização do tema. Essa personalização varia de tema para tema e não mexe de forma efetiva com códigos.
Dependendo do tema é possível alterar a cor de fundo, a imagem de cabeçalho, inserir logo, inserir widgets e até mexer na tipografia.
Em comparação com os outros métodos citados anteriormente ele é bem inferior, porque não permite mexer de forma efetiva e profunda no layout.
 Por que você deveria usar WordPress em seus sites?
Acredito que você já tenha percebido o potencial do wordpress e que utilizá-lo é uma ótima escolha se precisas de sites dinâmicos.
O WordPress pode trazer boas vantagens como: facilidade de instalação e gerenciamento, uma comunidade disposta a oferecer os melhores conteúdos de suporte, um site otimizado para os mecanismos de buscas, funcionalidades extras e temas diversos e a possibilidade de customização. Tudo isso já seria suficiente para aderir a este CMS.
Considerações Finais
Como apresentei na palestra no WordCamp SP 2018, o WordPress pode ser uma ótima ferramenta em suas estratégias de marketing digital.
Se você trabalha com marketing e conteúdo, pode testar esse CMS, você não vai se arrepender. E quem sabe a gente se encontra em algum WordCamp, né?
Deixe o seu comentário ou dúvida abaixo. Fique à vontade!
Forte abraço.
Até Mais.
The post WordPress como Ferramenta de Marketing Digital appeared first on Chief of Design.

WordPress como Ferramenta de Marketing Digital
Fonte: Chef of Design

Andrei Gurgel – UXlab – Entrevista🎙 Na mesa do Chief

19 de outubro de 2018

Andrei Gurgel – UXlab – Entrevista🎙 Na mesa do Chief

Eae, tudo bele?
Hoje trago mais um super conteúdo para você. Fiz uma entrevista com o Andrei Gurgel do canal UXlab.
O Andrei é UX/UI Designer dono do canal UXlab, onde ele compartilha conteúdo sobre design de uma forma geral e, principalmente, UX Design.
Nesse bate-papo nós conversamos sobre UX Design, sobre o mercado, Design de Interface, Web Design e UX Design além de dicas para você iniciar na área, como estudar, quais livros pesquisar e etc.
O assunto UX Design está muito em voga, muitos designers gráficos, inclusive, veem no UX uma possibilidade de projeção profissional e melhores ganhos. E isso não é à toa, afinal UX é um assunto muito importante para qualquer empresa independente do serviço ou do produto.
E cada vez mais as empresas estão percebendo isso, por isso, estamos vendo cada vez mais vagas para UX Designers. Por isso sugiro fortemente que você assista o vídeo abaixo.
Então pega o café, se acomoda e curte o vídeo. Confira abaixo a entrevista completa:

Conheça o trabalho do Andrei Gurgel do UXlab:
Andrei Gurgel é Mestre em Design pela UFRN (2014) e trabalha como Designer com foco em interação desde 1997, desenvolvendo desde então diversos projetos de interfaces digitais para empresas no Brasil e no exterior.
Desde 2016, inspirado no seu dia-a-dia como Designer Freelancer, produz conteúdos relacionados ao Design para o canal UXlab no YouTube. Atualmente trabalha como Product Designer (UX e UI) na Toptal e é propagador da Cultura Remota.
Youtube: https://www.youtube.com.br/uxlab
Instagram: https://instagram.com/uxlab.cc
Twitter: https://twitter.com/andreigurgel
O que você achou do vídeo?
Se  gostou do vídeo deixe o seu comentário abaixo! Isso é muito importante para continuarmos com o nosso trabalho e melhorarmos cada vez mais.
Ajude 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 Andrei Gurgel – UXlab – Entrevista🎙 Na mesa do Chief appeared first on Chief of Design.

Andrei Gurgel – UXlab – Entrevista🎙 Na mesa do Chief
Fonte: Chef of Design

Qual é a melhor Tipografia? Como escolher a fonte certa?

17 de outubro de 2018

Qual é a melhor Tipografia? Como escolher a fonte certa?

Eae, tudo bele?
Você sabe qual é a melhor tipografia? Qual é aquela fonte ideal para o seu projeto de design?
Pois bem, eu trago este conteúdo para falar um pouco sobre isso. Escolher uma família tipográfica nem sempre é uma tarefa fácil, por mais incrível que possa parecer, pois hoje em dia temos tantas opções.
Talvez esse número grande de opções que por um lado nos dá um mar de possibilidades, por outro abre um leque de dúvidas.
A questão sobre “Qual é a melhor tipografia” é muito relativo, porque qualquer fonte pode ser a melhor para um determinado projeto. Antes de pensar em sair caçando fonte na internet e baixando tudo o que vê pela frente, você deve entender o projeto, quais seus objetivos de comunicação e principalmente qual “voz” ele precisa ou deseja transmitir.
E sim, você não leu errado! Eu disse voz do projeto. A seguir vamos entender do que se trata, pois se trata de uma parte importante quando a questão é “qual é a melhor tipografia?”.
Também é importante lembrar que é preciso levar em conta várias questões técnicas como legibilidade, leiturabilidade, se é uma tipografia feita para ver ou para ler, entre outras questões.
Eu falo sobre tudo isso em uma série de artigos sobre tipografia que temos no Chief of Design. Você pode conferir nos links abaixo:

Tipografia: Guia Sobre Tipos – Escolhendo a fonte certa [parte 01]

Tipografia: Guia Sobre Tipos – Escolhendo a fonte certa [parte 02]

Tipografia: Guia Sobre Tipos – Escolhendo a fonte certa [parte 03]


Então vamos começar a fala sobre qual é a melhor tipografia. Antes de tudo, primeiro, vamos entender o que é tipografia. Vamos nessa?
Mas afinal…O que é tipografia?
Tipografia: Do grego typos = forma e graphein = escrita.
É a mecanização da escrita feita através da tecnologia para a reprodução de textos em série.
Tipografia também é o termo usado para definir o estudo dos tipos (apesar de algumas pessoas usarem bastante também o termo tipologia).
Quando falamos de tipografia no design, estamos falando do estudo da aplicação dos tipos em um layout.
Existem vários pontos a serem estudados, desde técnicos até psicológicos e emocionais.
A tipografia é com certeza um dos elementos mais importantes da mídia impressa e também digital. Talvez seja o principal elemento quando estamos falando do Design Visual.
Em 2006, o designer Oliver Reichenstein criou um artigo onde dizia que a 95% do Web Design era composto por tipografia. Eu não posso afirmar com 100% de certeza que realmente a tipografia corresponde a tal número, mas com certeza desde muito antes desse artigo a tipografia já era rei de peças do design visual.
Por isso escolher uma família tipográfica não é, em muitas vezes, um caso simples de definir. poder qualificada apenas como aglomerado de letras. A sua escolha e aplicação deve ser pensada a fim de atingir o objetivo de comunicação.
Escolher e utilizar a tipografia da maneira certa pode fazer a total diferença entre um projeto bem sucedido de um trabalho que irá para o limbo.
A seguir vou te passar algumas dicas de tipografia. Mas não irei a fundo em outros temas que envolvem o mundo da tipografia, pois já falei sobre eles em outros conteúdos.
Aqui no Chief of Design nos temos muito conteúdo sobre isso e também temos uma playlist exclusiva sobre o assunto em nosso canal no Youtube.
Mas voltando ao assunto, um desses pontos, que citei anteriormente, e que tem extrema importância é descobrir qual é a voz do seu projeto. Então a seguir vamos entender do que se trata.
Qual é a “A Voz” do seu projeto?
Em um projeto devemos considerar todos os aspectos: desde técnicos até os psicológicos e socioculturais que trataremos.
E sobre a tipografia a primeira coisa que devemos levar em conta para escolher uma família tipográfica é escolher “qual a voz que queremos transmitir”.
E aí, como de de costume, você me pergunta: David? Como assim? Voz do que?
A tipografia é feita para comunicar, logo ela é a voz da sua comunicação. Compreendes?
Irei exemplificar:
Imagine que você chega em casa e no espelho do banheiro está escrito com batom a seguinte mensagem:

Agora pegamos a mesma mensagem e colocamos com uma tipografia um pouco diferente, veja o resultado.

Agora eu te pergunto: qual voz de cada mensagem?
Aposto que na primeira opção pensou em se tratar de uma mensagem de uma pessoa apaixonada e que transmite afeto. Pode ser uma mensagem de uma namorada, esposa ou até de um admirador secreto. Correto?
Porém, já no segundo caso, aposto que você interpretou com uma mensagem de terror, como se fosse um psicopata maluco ameaçando alguém. Certo? E mesmo que a pessoa , que escreveu o texto, tenha também um sentimento afetivo por ti, eu duvido que você vá querer algo com uma pessoa assim, né?
E eu não preciso ser “adivinho” ou mágico para saber o que você pensou. Simplesmente a voz que cada família tipográfica transmite me diz o que você achou de cada mensagem, mesmo que em ambos os casos utilizamos o mesmo conteúdo.
E isso é muito doido: utilizamos o mesmo conteúdo, no mesmo fundo, com mesma cor e mesmo assim a mensagem muda completamente do exemplo A para o exemplo B.
Agora você consegue compreender quando falo sobre a “voz do projeto”?
Então, pense nisso antes de escolher uma fonte. “Qual voz você quer transmitir?”
Esse é um dos caminhos para chegar na resposta da pergunta inicial que é sobre qual é a melhor tipografia para você utilizar.
Qual é a melhor Tipografia?
Essa questão é bem recorrente entre o pessoal que segue o Chief e entre os designers de uma forma em geral. Por isso decidi falar sobre.
Abaixo segue o vídeo que gravei para falar sobre esse tema. Nele falo sobre como você pode escolher a melhor tipografia para o seu design. Assista e confira:

Então é isso, Galucho! Se você gostou desse vídeo deixe o seu like e compartilhe com seus amigos que tiverem interesse
Espero que esse vídeo tenha sido útil para você e que você estude mais sobre tipografia. Só assim, com estudos, testes e trabalho, que você encontrará a tipografia ideal para o seu projeto.
E não esqueça de se inscrever em nosso canal no Youtube [CLIQUE AQUI ]
Deixe a sua opinião, dúvida e experiência nos comentários aqui abaixo, bele?
Até mais.
Forte abraço.
Até mais.
The post Qual é a melhor Tipografia? Como escolher a fonte certa? appeared first on Chief of Design.

Qual é a melhor Tipografia? Como escolher a fonte certa?
Fonte: Chef of Design

Jakeliny Gracielly – Entrevista🎙Na mesa do Chief

4 de outubro de 2018

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

2 de outubro de 2018

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

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

Barbara Lasci – Entrevista🎙Na mesa do Chief

20 de setembro de 2018

Barbara Lasci – Entrevista🎙Na mesa do Chief

Eae, tudo bele?
Continuando com nossa série no canal onde chamo profissionais de áreas co-relacionadas para bater um papo que lhe traga conteúdo e informação, temos mais uma entrevista. Hoje trago uma entrevista com a Social Media Barbara Lasci, da página La Social.
A Barbara Lasci é a autora do La Social. La Social é o novo canal para falar de boas práticas em mídias sociais baseado em experiências reais de quem atua ativamente no mercado.
Nesse bate-papo conversamos sobre o universo das redes sociais e o profissional de mídia social. E esse conteúdo é muito válido principalmente para você que deseja atuar nessa área de social media. Mas não somente isso, falamos também sobre design, ferramentas, público-alvo, trabalho em agência, entre outros assuntos.
Abaixo você pode assistir agora essa super entrevista. Confira.
Entrevista: David Arty e Barbara Lasci

Conheça a Social Media Barbara Lasci
Barbara Lasci atua com mídias sociais há 8 anos, já atendeu grandes clientes como Hellmann’s, Knorr, L’Oréal, Mondelez, Marisa, Heineken em agências de renome, como Ogilvy & Mather, em projetos nacionais e internacionais. Seu trabalho já foi destaque em veículos como Adnews, Catraca Livre, O Globo, Tv Globo, Tv Cultura, Brainstorm 9 e diversos outros.
Siga a Barbara Lasci:
Facebook:
https://www.facebook.com/sigalasocial/
Instagram:
https://www.instagram.com/sigalasocial/
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 Barbara Lasci – Entrevista🎙Na mesa do Chief appeared first on Chief of Design.

Barbara Lasci – Entrevista🎙Na mesa do Chief
Fonte: Chef of Design

« First‹ Previous579580581582583Next ›Last »