Category: Web Design

O que é WordPress? Como funciona? Como começar?!

O que é WordPress? Como funciona? Como começar?!

Eae, td bele?

Vamos falar sobre WordPress?

Você já desenvolveu sites estáticos? Tipos aqueles com poucas páginas de puro HTML?

Talvez você já tenha feito…Talvez não… Mas o fato é que dependendo do projeto, eles podem ser ainda usados. Entretanto, com o passar do tempo, alguns projetos crescem e necessitam de assumir funções de sites dinâmicos.

Caso você não saiba, um site dinâmico é aquele permite receber e processar informações de visitantes, gerenciar conteúdo, entre outras funções; e que só podem ser alcançadas com o uso de linguagens de programação integradas com banco de dados. Funções estas que não possíveis com sites estáticos.

Se você enxerga que precisa entregar sites dinâmicos para seus clientes ou até para você mesmo e você não tem conhecimento em linguagens de programação, por exemplo, a mega utilizada PHP, você tem 3 caminhos a seguir, dependendo do seu projeto:

1° Aprender uma linguagem de programação.

Porém vai levar um tempo, quiçá um bom tempo, para você conseguir desenvolver sites completos. Sabendo disso, você pode considerar a segunda opção a seguir;

2° Contratar um programador.

Neste caso talvez você não queira ficar por muito, pois pode requerer investir uma boa grana na mão de obra do desenvolvedor.

Ainda mais quando souber que existe uma terceira opção que pode ser utilizada para diversos casos (claro que não todos absolutamente) e com uma curva de aprendizado mais curta que o aprendizado de certas linguagens.

E este é o terceiro caminho que você pode seguir, que é:

3 °Aprender a utilizar um CMS como o WordPress. 😀

Portanto será sobre este terceiro caminho que trataremos neste artigo, bele? Preparado?

Então… “Ale hop”!

Neste artigo você saberá:

O que é o WordPress;O que você poderá fazer caso domine este CMS chama WordPress;Quais recursos o WordPress oferece;Porque você deve aprender a mexer na plataforma WordPress;Que existe outro tipo limitado de WordPress para você não se confundir;Vídeos ensinando a instalar o WordPress;Plugins essenciais;Dicas para você utilizar o WordPress.

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.

CMS é o acrônimo de Content Management System — que traduzindo significa, sistema de gerenciamento de conteúdo.

Existem vários CMS por aí e você, caso tenha conhecimentos em programação, pode até criar o seu. O Objetivo de um CMS, como o WordPress, é facilitar a criação e a edição de conteúdos em um site sem a necessidade de lidar diretamente com uma linguagem de programação.

Portanto, a ideia é que qualquer um possa criar um site, um blog, por exemplo, e também atualizá-lo, sem necessariamente ter domínio de linguagens de programação. Com o Wordpres é possível criar conteúdos de forma simples e intuitiva, adicionando textos, inserindo imagens e vídeos, desenvolvendo formulários, etc; e até mesmo editando o layout e estrutura do site, sem necessariamente colocar a mão em códigos.

Grandes sites, de grandes corporações, em todo o mundo utilizam o Wordpres. Existem pesquisas que apontam que mais de 30% dos sites da web, de todo o mundo, são feitos em WordPress.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.

A Anyssa Ferreira, designer e desenvolvedora que já entrevistei aqui no Chief, tem um post em seu site sobre o tema.

Quais as vantagens e benefícios de usar o WordPress?

Existem várias vantagens em utilizar o CMS mais utilizado no mundo, abaixo cito as principais que acredito e tornam o WordPress tão útil.

É livre;

O WordPress é open source e livre de restrições comerciais e limitações. Trata-se um software livre, ou seja, qualquer um pode desenvolver e criar temas, plugins, melhorias, etc; e publicar na comunidade.

É gratuito;

Você não precisa pagar para utilizar o WordPress. Basta baixar e instalar o software no seu servidor, ou até mesmo localmente na sua máquina, e pronto. Você já pode começar a criar e mexer no seu site.

Além do software, existem vários recursos para ele como plugins e temas, totalmente gratuitos. A variedade de recursos gratuitos é muito grande.

Existe certa confusão entre WordPress.org e WordPress.com, mas a seguir falaremos sobre isso.

A curva de aprendizagem é menor se comparada com outras opções;

O WordPress é fácil de aprender. Seu painel é intuito e bem simples de utilizar. Inclusive o painel de administração do WordPress e também as interfaces para criar post e páginas são semelhantes a outros que utilizamos em nosso cotidiano.

Comunidade gigante;

Essa é uma dar partes mais legais. A comunidade do WordPress é muito grande no mundo inteiro. Aqui no Brasil temos uma das maiores comunidade do mundo. O nosso WordCamp SP já é o maior do mundo.

E uma comunidade grande significa que temos mais segurança, melhorias constantes e coisas novas sendo criadas a todo momento.

Maior número de Plugins (wordpress plugins);

Plugins são extensões que adicionam novas funcionalidades ao seu WordPress. Essas funcionalidades podem ser desde itens para acrescentar no seu site até mesmo artefatos para melhor a sua experiência de uso do sistema.

A quantidade de plugins que o WordPress tem é incomparável com qualquer outro CMS. Inclusive sempre costume dizer que caso não exista um para o WordPress provavelmente não exista para nenhum outro, devido a essa enormidade.

Maior número de Temas (WordPress Themes);

Tema WordPress nada mais é do que um modelo de site pronto para editar. Existem modelos Free (gratuitos) e Premium (pagos).

E também nesse quesito o WordPress ganha de lavada. Existem milhares de temas, free ou premium, para você fazer download.

É seguro;

Devido a todo esse volume de pessoas utilizando, é claro que o volume de ataque e tentativas de invasão são grandes. Porém, como já foi dito, a comunidade é gigante e por isso temos diversos plugins e atualizações para garantir a segurança do sistema.

Normalmente erros de segurança são devido a erro humano e não do software.

Tem muita coisa em português;

Graças a grande comunidade brasileira, temos muita coisa de WordPress em português. O próprio WordPress já tem como padrão uma instalação em português.

É otimizado para SEO;

Todo site precisa ser “encontrável”. Isso  independe do nicho, do tema, da ferramenta que você utiliza.  SEO significa otimização para buscadores, e o 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.

Caso você não saiba o que é SEO, sugiro que depois leia este artigo.

Não precisa fazer do zero;

Com o WordPress você não precisa desenvolver do zero. Com temas e plugins abundantes, você consegue criar um site muito mais rápido.

Eu tenho um outro artigo onde falo sobre porque utilizar o WordPress, caso queira saber mais clique aqui.

O que você poderá fazer caso domine este CMS chamado WordPress?

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.

Aqui em meus projetos sempre que posso utilizo o WordPress. Os blogs Chief of Design e Designimador são feitos em WordPress. E não só eles, mas tudo o que envolve com página de eBooks, hangouts e etc.

Eu palestrei no WordCamp SP 2018 falando como o WordPress pode ser uma ótima ferramenta de marketing digital. Se quiser conferir, depois acesse esse link (clique aqui).

Com o WordPress você 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! É só 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.

E por onde começar com o WordPress?

Além de ficar atentos aos próximos conteúdos aqui no Chief que abordarão um pouco mais sobre o WP, sugiro fortemente que você aprenda a instalar o WordPress para que você possa conhecer a interface da administração deste CMS e até fazer pequenas experiências.

Você pode instalar o WordPress tanto local, ou seja, no seu computador, para poder testar como publicar na internet. Para publicar na web você precisa de hospedagem.

A seguir vou te mostrar como você pode instalar o WordPress na sua máquina. Para isso disponibilizo dois vídeos sobre instalação local do Wordpress.

Instalação XAMPP

Este é um vídeo que faz parte de um dos vários módulos do meu curso de Web Designer e que estou liberando para este artigo para você possa fazer pequenos testes aí na sua máquina. Nele ensino a instalar o XAMPP que é um servidor local que possibilita que você rode o WordPress em sua máquina sem a necessidade de contratar um serviço de hospedagem.

Instalação WordPress

E agora neste vídeo eu mostro como instalar o WordPress em seu servidor local (como já disse anteriormente, esse vídeo faz parte do meu treinamento de Web Designer ).

Instalação WordPress no Servidor

Agora, caso você tenha um serviço de hospedagem, você pode instalar o WordPress no seu servidor web. Dependendo da sua empresa de hospedagem a forma de instalação pode ser diferente. No exemplo a seguir mostraremos uma instalação em uma hospedagem que tem o Cpanel.

Plugins essenciais para você utilizar no seu WordPress.

W3 Total Cache

Um aspecto importante que devemos levar em consideração é a performance das páginas de nossos sites. Isso porque o tempo de carregamento pode determinar o sucesso de nosso projetos.

Um site que carrega lento pode fazer que visitantes desistam de navegar em seu site o que é extramente ruim porque seu projeto não conseguirá atingir seus objetivos. E ainda poderá ter consequências ruins porque cada desistência reflete no aumento de taxa de rejeição que não é bem-vista pelo Google.

Levando tudo isso em consideração é importante utilizar um plugin que melhore o desempenho de seu site WordPress como o W3 Total Cache.

Ele aumentará a velocidade de seu site, porque ele executa uma otimização em diferentes aspectos como compactação de HTML, CSS e Javascript, e execução de caching dos conteúdos e arquivos, diminuindo assim o tempo de carregamento das páginas.

Link para o plugin W3 Total Cache »

Autoptimize

Ainda se tratando em desempenho de sites o Autoptimize é um plugin que também possibilita armazenar cópias em cache e comprimir arquivos. Mas o grande atrativo dele é a possibilidade de otimizar Google Fonts, remover emojis desnecessários e outros extras que aumentará a velocidade de suas páginas.

Link para o plugin Autoptimize »

EEE Image Optimizer

Essa é outra ferramenta que também aumenta a velocidade das páginas só que desta vez através da otimização das imagens.

A compactação resultante do plugin EEE Image Optimizer utiliza algoritmos exclusivos para obter a máxima compactação mas mantendo as imagens sem perdas visuais.

Com este plugin você poderá otimizar a imagem quando você enviar ao seu site e também otimizar as imagens existentes na biblioteca de mídia.

Link para o plugin EEE Image Optimizer »

Yoast SEO

O Yoast SEO trabalha com diferentes aspectos para otimização. Já na configuração é possível:

Fazer verificação com ferramentas para Webmasters como o Google Search Console, Ferramentas de Webmasters do Bing, Alexa ou Yandex;Configurações para títulos e meta-descrições;Configurações de meta robots;Configurações para informar os buscadores sobre as contas de redes sociais associadas ao site;Gerar de forma simples um arquivo sitemap.xml, entre outros.

Mas o ponto forte da ferramenta é como ela auxilia na tarefa de otimizar um conteúdo em texto.

Ela vem com um recurso que orienta sobre a utilização da palavra-chave para partes específicas do editor de conteúdo dando sugestão e guiando para melhorias.

Outro ponto interessante é Snippet Preview. Onde este possível editar e visualizar como o resultado da página publicada pode aparecer nos resultados dos mecanismos de buscas.

Neste campo o Yoast alerta também sobre as melhores práticas informando os limites de inserção de caracteres para o título e meta-descrição.

Link para o plugin Yoast SEO »

UpdraftPlus

Possuir um site Worpdress leva a uma obrigação posterior que é possuir um sistema que gerencie backups. Portanto instalar um plugin que execute esta tarefa deve ser uma das primeiras coisas que você deve fazer após instalação do WordPress.

Um plugin que sugiro é o UpdraftPlus. Ele possibilita criar backups automatizados e agendados e com várias opções de locais para armazenamento dos arquivos como no Google Drive e Dropbox.

Além de backup o plugin faz restauração de sites.

Link para o plugin UpdraftPlus »

Contact Form 7

Contact Form 7 é um plugin que permite que você construa um simples e eficaz formulário de contato para seu site.

Vejo o nosso aqui.

O máximo que exigirá de você será um conhecimento bem básico de HTML e da sintaxe do próprio plugin (que não é nada aterrorizante).

Link para o plugin Contact Form 7 »

Disqus

Este é um plugin responsável por gerenciamento de comentários e pode substituir o sistema padrão do WordPress.

O bacana dele é que, além de ter uma visual agradável, existe a possibilidade de enriquecer os comentários com a ferramenta que permite que o usuário vote nos comentários dando positivo ou negativo.

E você pode classificar os comentários por ordem de relevância ordenando para o Disqus exibir os mais votados.

Outra funcionalidade interessante é de compartilhamento dos comentários.

Link para o plugin Disqus »

­

Really Simple SSL

O certificado SSL (Secure Socket Layer) é uma proteção para manter uma conexão segura com a internet. A tecnologia envolvida evita que qualquer dado transferido entre usuário e website fique exposto evitando assim também ataques maliciosos.

Verificamos que um site possui o certificado SSL quando na barra de endereço contém o cadeado verde. Também será notado que o protocolo é https.

O certificado mostra ao visitante que seu site é autêntico e confiável.

Sabendo disto tudo o que você precisa de uma ferramenta que te ajude a configurar seu site para ser executado em https. E é nessa hora que entra o plugin Really Simple SSL.

Este plugin ativa o SSL em seu site com simples passos.

Mas existem um porém. É que você precisa obter um certificado SSL. Este plugin somente detecta o SSL e possibilita sua ativação. Entretanto a simplicidade de configuração que este plugin oferece faz dele um recurso necessário.

Link para o plugin Really Simple SSL »

Dicas para você utilizar o WordPress

Agora vou te passar uma relação de dicas que vão te ajudar em diversos aspectos do gerenciamento do WordPress.

Algumas destas dicas vão te prevenir de possíveis dores de cabeça que possam surgir só pelo simples fato de você não ter um conhecimento prévio de processos comuns no WordPress como questões envolvendo segurança e desempenho, por exemplo. Então vamos a elas.

Manter o WordPress sempre atualizado

Um dos principais motivos de se adotar o WordPress é que ele disponibiliza atualizações constantes. E é de fundamental importância que você as execute sempre que o WordPress alertar que existem atualizações disponíveis.

Essas atualizações procuram fornecer novos recursos, melhorias, melhor performance nas novas versões e também consertar bugs e brejas de segurança. E é principalmente pela questão de segurança é que você deve executar as atualizações porque você está se precavendo que seu site seja alvo de ataques.

Um ponto positivo do WordPress é que existe uma grande e ativa comunidade por trás que constantemente está melhorando a codificação dos arquivos usados no núcleo do WordPress, nos temas, plugins e traduções e isso possibilita que sua instalação tenha acesso aos recursos recentemente otimizados.

E como você pode saber se existem atualizações para serem executadas na sua instalação? Na parte superior do Dashboard, toda vez que existir atualizações o WordPress indicará notificações. Para isto no painel de controle vá para o menu “Atualizações” que fica do lado esquerdo. Na tela de atualizações você será notificado sobre qual versão do WordPress seu site está usando e se necessita atualizar. Nesta mesma página você terá uma relação de plugins, temas e traduções que necessitam atualizações.

OBSERVAÇÃO IMPORTANTE! Certifique-se que antes de qualquer atualização do sistema você tenha um backup do seu WordPress.

Faça um backup do WordPress

Essa é a dica mais importante que vou te passar nesta relação. Para algumas alterações em sua instalação WordPress é indicadíssimo ter um backup. Isso porque se alguma coisa der errado como quebrar o site ou dados se perderem você poderá ficar tranquilo porque você tem uma cópia para restaurar seu site.

Lógico que se algo acontecer ao seu site você poderá ficar estressado, mas a coisa pode ficar pior se você não tiver efetuado um backup.

A comunidade WordPress disponibiliza alguns plugins que auxiliam na criação de backups com a possibilidade de você hospedar aos arquivos de sua instalação nas nuvens e também podem realizar backups automáticos e agendados.

No tópico sobre plugins deste artigo eu destaquei o UpdraftPlus que você pode ativar em seu site e que te auxiliará na tarefa de executar e gerenciar seus backups.

Usar o mínimo possível de plugins

Apesar de todo mundo saber que os plugins oferecem diversas funcionalidades que potencializam seu website o uso exagerado destes recursos podem ter o efeito colateral de aumentar o tempo de carregamento das páginas diminuindo a performance de um site.

Muitas vezes para seguir uma moda instalamos plugins com recursos que façam nosso site parecer “moderno” e seguir as tendências, mas o que temos mesmo que decidir e se tal recurso tem uma função realmente relevante para o projeto.

Importante mesmo é evitar de instalar plugins desnecessários e somente utilizar os plugins fundamentais para funcionamento do website.

Não utilize o usuário “admin” e crie uma senha forte

Se você não for rigoroso em escolher uma senha forte para proteger sua instalação WordPress isso pode comprometer a segurança do site.

Seu site WordPress pode ser alvo de um ataque de força bruta que consiste em tentativas de adivinhar dados de acesso combinando senha e nome de usuário.

Portanto senhas fracas e comuns, ou óbvias como data do nascimento têm mais chances de serem descobertas ainda mais quando você utiliza na instalação o padrão admin.

Mude o padrão admin para que este dado fique difícil de ser descoberto em um possível ataque. Com isso o invasor tem mais um percalço a percorrer.

Os grupos de usuários responsáveis pela administração do WordPress devem garantir uma senha forte porque o acesso a essas contas permite o controle total das funcionalidades do site.

O WordPress oferece um recurso nativo para que você possa gerir uma senha forte onde ele mede a força da senha. Mas cabe a você definir a senha forte porque ele não restringe a criação de senhas fracas.

Como sugestão você pode criar uma senha da seguinte forma:

Utilize uma combinação com letras maiúsculas e minúsculas;Utilize números;Utilize caracteres especiais como %#@&!;Garanta que sua senha tenha no mínimo 8 caracteres.

Utilize urls amigáveis

Url é a sigla de Uniform Resource Locator e quer dizer Localizador Padrão de Recursos. Corresponde ao endereço virtual de site, página ou arquivo. A url deste página que você lê é https://www.chiefofdesign.com.br/wordpress/

No caso desta página podemos notar que é a url é formada por:

um protocolo: https;o dominio do Chief of Design: www.chiefofdesign.com.br;e um recurso: /wordpress/

As urls amigáveis são urls de fácil compreensão para os usuários e também para os mecanismos de buscas.

Por padrão o WordPress utiliza um modelo não amigável de url como no exemplo a seguir:

www.seusite.com/?p=123

Esta url é de difícil compreensão tanto para os usuários quanto para os mecanismos de buscas porque é formado por caracteres que não descrevem sobre o assunto da página.

Mas existe uma configuração no WordPress chamada Links Permanentes que possibilita alterar este padrão para outras opções.

Dentre as opções eu indico que escolha a “Nome do post”. Ele possibilita uma url mais curta que é bastante indicada para se obter uma url amigável. Além de usar uma url curta é indicado também:

Usar hífen para separar palavras;Não usar acento e cedilhas (é, â, ã, ç);Preferir letras minúsculas porque são limpas visualmente;Procure inserir na url uma palavra-chave que resuma o assunto da página.

Exemplo de url com a as características citadas:

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

Configurado o links permanentes o sistema estará habilitado para você criar suas urls amigáveis. No campo logo abaixo do título na seção de edição de posts e páginas você pode criar sua url.

Agende seus posts para o futuro

Uma funcionalidade interessante do WordPress é o agendamento de postagens. Essa é uma mão na roda para que você administre melhor seu tempo.

Com o agendamento de postagens você não precisa estar presente na hora da publicação, basta que você no momento de criação da página ou post agende para o conteúdo ser publicado em uma data e horário no futuro que o sistema colocará o conteúdo no ar no horário programado.

Extra: Construtor de página e sites “Elementor WordPress”

Se não bastasse a infinidade de recursos que o WordPress oferece, nos últimos anos, a comunidade que acompanha este CMS trabalhou ainda mais duro para facilitar a construção de páginas e sites pelos usuários.

Com isso surgiram ferramentas chamadas de page-builders, ou construtores de páginas. Até o próprio WordPress mudou seu editor clássico para que os conteúdos pudessem ser construídos através de blocos que agilizam a tarefa. Eu falo do editor WordPress Gutenberg, que tem até artigo aqui no blog.

Surgiram muitos construtores no mercado, mas o que vem se destacando bastante é o Elementor. 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 Elementor é plugin que está entre um dos mais populares na comunidade WordPress, e o que faz dele o o principal page-builder da plataforma. Para utilizar o Elementor, basta ter um site em WordPress. Caso você queira saber mais sobre essa ferramenta sugiro que leia este artigo.

 

Conclusão

O WordPress possibilita que você tenha uma certa independência para que possa oferecer sites dinâmicos sem a necessidade de terceirizar tarefas. Esta aposta pode ser interessantíssima porque a curva de aprendizagem pode ser muito mais curta do que aprender programação e os conhecimentos adquiridos possibilitam criar projetos de baixa, média e até, em alguns casos, de alta complexidade.

Espero que tenha gostado desse artigo.

Mais a frente falaremos mais sobre WordPress e como você pode utilizá-lo, bele?

E você? Já trabalha com o WordPress? O que você acha sobre ele?

Deixe a sua dica aí.  Você pode comentar abaixo!

Forte abraço!

Até mais!
The post O que é WordPress? Como funciona? Como começar?! appeared first on Chief of Design.

O que é WordPress? Como funciona? Como começar?!
Fonte: Chef of Design

Como Criar um Currículo Criativo?

Como Criar um Currículo Criativo?

Eae!
Td bele?
Neste artigo vou falar de algo que todo mundo que está à procura de um emprego precisa ter: um currículo (curriculum vitae, CV).
Mas eu não vou falar de um currículo comum feito no “word”. Eu vou falar de um currículo de um criativo. Sim, isso mesmo! O seu currículo também precisa ser criativo se você está procurando um trampo nessa área.
Muitas vezes o currículo pode ser sua carta de visitas, o passe para você ser selecionado para outro estágio da seleção ou até mesmo conseguir o emprego em definitivo.
Então a seguir você verá dicas para criar o seu currículo de forma criativa, bele?
Vamos nessa! 😀
A importância de um currículo criativo
Se você é designer, trabalha com comunicação, com criatividade e afins; é super importante que você tenha um currículo bem desenvolvido e atualizado.
Em muitas oportunidades o seu CV será a primeira impressão que seu futuro empregador/cliente terá sobre você.
Um currículo com certeza pode ser o determinante para a sua contratação ou não. Através dele a pessoa que está te contratando poderá conhecer o seu perfil profissional e verificar se você tem potencial ou não para atender as expectativas da empresa/cliente.
Um currículo bem construído pode fazer a diferença e chamar a atenção do empregador se destacando em meio aos concorrentes.

Me lembro uma vez que criei um currículo basicamente com tons de azul e com orientação de paisagem(horizontal). Um dia enviei este CV para uma vaga e depois fui selecionado para uma entrevista pessoalmente. Ao chegar na empresa o entrevistador logo falou: “ Ah, você é o David do CV azul, né?  Muito legal. Eu gostei dele. Foi marcante. ”
Esse é só um exemplo que aconteceu comigo sobre como um CV criativo pode te ajudar a conquistar aquela vaga dos seus sonhos.
Coloque somente o essencial
Não se engane ao pensar que criando um currículo de 3 páginas contando a sua história desde o maternal será eficaz e vai te ajudar a conseguir um emprego. Seu currículo deve ser sucinto e conter somente as informações relevantes para quem irá te contratar. Normalmente as informações que se coloca em CV criativo são:

 Identificação: seu logo, nome, marca.
Dados de contato: e-mail, rede sociais, site, telefone
Sobre: uma breve descrição (eu disse breve!) sobre você, sobre o que gosta, sobre como trabalha, sobre suas qualidades e etc.
Formação:  onde estudou, cursos que fez, faculdade, etc;
Experiência: normalmente no máximo os três ou quatros últimos empregos já está bom, caso tenha passado por várias empresas. Aqui você também pode detalhar em poucas palavras o que você fazia nos cargos anteriores.
Habilidades:  seu nível de habilidade em determinada área, softwares, etc.
Objetivo: qual o cargo e/ou área que você quer atuar.

Um currículo com 1 ou no máximo 2 folhas já é o suficiente para você colocar todas as informações necessárias.
Seja criativo e mostre o seu potencial
Você deve encarar o CV como a criação de uma peça de comunicação, como se fosse um “job” mesmo. Leve a sério e crie algo legal. Elimine aquele tradicional currículo feito no Microsoft Word. Use algum software de edição visual (o Photoshop, Illustrator, Indesign, etc) para criar. Use formas e cores (caso necessite) para expor da melhor maneira possível tanto o seu perfil como mostrar que você tem potencial e criatividade para criar.

Então, pense com cuidado na(s) fonte(s) que irá usar, nas cores, no contrate, no elementos gráficos e utilize um grid para te ajudar. [clique aqui para saber mais sobre grids].
Aplique seu estilo no CV
Procure manter originalidade no seu currículo. Aplique seu estilo de criação. Mostre quem você é também através da arte do seu currículo. Caso já tenha um portfólio é interessante criar algo que faça uma conexão com seu portfólio.  Muitas vezes ele será uma extensão do seu portfólio online. Como no exemplo abaixo do meu xará gringo. 😛

Salve e envie em formato PDF
O formato PDF de arquivos (Portable Document Format ou Formato Portátil de Documento) é um tipo de arquivo padrão. Quase todos (ou todos) sistemas operacionais consegue abri-lo sem problemas. Além disso as pessoas também já familiarizadas com tal tipo de documento.
Portanto na hora de exportar nada de JPG e PNG que podem até ser facilmente manipulados. Exporte seu CV no formato PDF e de preferência coloque uma proteção com senha (claro que portas podem ser destrancadas, ainda mais se tratando de web, mas não é por isso que você vai deixar sua casa aberta para qualquer um, né?).
Um currículo bom na tela e bom no papel
Na grande maioria das vezes o seu currículo será visto somente na tela de um computador, porém em alguns casos ele poderá ser impresso. Portanto cuidado com certas “estripulias visuais” e fontes pouco legíveis [saiba mais sobre como escolher uma fonte legal, clicando aqui].

Crie um CV que caiba numa folha A4
Você pode criar um currículo na vertical ou horizontal, tanto faz.  O mais importante é que ele caiba e fique legal em uma folha A4. Isso porquê normalmente se o entrevistador precisar imprimir o seu CV ele o fará em uma impressora doméstica e em um papel A4 comum. E também o mesmo serve para você caso tenha que levá-lo impresso no dia da entrevista.
Mantenha seu CV atualizado e pronto para qualquer ocasião
Sempre deixe seu CV atualizado com as últimas informações, mesmo que não esteja procurando um emprego. Toda mudança na sua carreira, como novos cursos, qualificações e experiências devem ser inclusas no CV.

Cuidado com a escrita
Tome cuidado com a redação do seu currículo. Leia e releia. E também se possível peça par alguém ler também. Erros de português e de digitação podem passar a impressão de que você é alguém desleixado podendo colocar tudo a perder. Tenha atenção a essa parte também.
Não crie só mais de currículo e sim uma carta de vendas, ou se precisar, várias cartas de vendas
Seu currículo pode ser muito mais que apenas uma simples folha onde você coloca suas experiências e objetivos. Ele pode ser uma carta de vendas.
Mude sua mentalidade sobre um CV. Apresente suas experiências e projetos como verdadeiros casos de sucesso. Coloque informações que mostrem que você pode solucionar os problemas do seu cliente. Mas tome cuidado para não inflar demais o seu ego e colar informações não verdadeiras, bele?
E você também pode criar currículos específicos para determinado cargo ou empresa assim como um técnico de futebol ajusta seu time dependendo do adversário. Por exemplo:
A empresa “X” dispõe de uma vaga que você deseja. Só que a maioria das qualificações que você tem não será utilizada no cargo. Então o que fazer?
Customize o campo de qualificações retirando estas informações desnecessárias e dê destaque para as outras qualificações que realmente se enquadram e serão aproveitadas caso você conquiste a vaga. Com isso você estará passando informações reais sobre você focando naquilo que a empresa espera de um novo colaborador.
As qualificações que não são necessárias para este cargo podem até não estarem de encontro com os objetivos do cargo. Todavia, isso não quer dizer que não possam ser utilizadas em promoções dentro da empresa. Quando surgir a oportunidade volte a customizar seu currículo.
RESUMINDO: Para cada jogo, um esquema tático específico. Para cada empresa ou vaga, faça um currículo diferente.
O Currículo é um braço do seu Portfólio, não um substituto.
Não basta ter apenas um currículo legal. É importante que você tenha um portfólio também. Normalmente um CV é uma extensão resumida do seu portfólio e feito para ser utilizado em determinada ocasiões. Por isso é essencial deixar claro e visível o endereço do seu portfólio online.  Um portfólio é sempre mais importante e tem mais peso.

E se você quiser saber mais sobre como construir um bom portfólio, eu te indico fortemente que você baixe gratuitamente o ebook sobre portfólio do Chief of Design.
Comece a enviar o seu currículo agora mesmo!
Não adianta nada você pensar no currículo, diagramá-lo da melhor maneira e expor com maestria todas as informações sobre o seu perfil se você não o submete para vagas. Por isso não pare por aqui: entre em sites de empregos e envie o seu currículo.
Uma dica de site muito boa é o Jooble.org. Nesse site você encontrará vagas especificas para o mercado criativo e de tecnologia como Web Design, Design, Desenvolvedor, Analista de sistemas, Programador, Analista , entre outros.
Acesse agora o site da Jooble e envie o seu currículo para as vagas. CLIQUE AQUI PARA CONHECER!
Conclusão
Criar um currículo diferente, criativo e com um bom design pode fazer toda a diferença entre conseguir ou não uma boa oportunidade. Claro que você não deve colocar todas as suas fichas no seu CV criativo, ele deve ser a aliado a um bom portfólio. Use-o como uma carta de visitas que abrirá portas para você.
Caso não tenha muitas ideias por onde começar, faça uma pequena pesquisa na internet sobre currículos criativos (você já viu alguns exemplos aqui neste artigo). Você encontrará desde currículos de outros profissionais até modelos já prontos. Use tais referências apenas para se inspirar e evite usar modelos prontos e nunca plagie o CV de alguém. Crie o seu próprio CV e exponha toda sua criatividade.
E se você quiser mais dicas sobre como criar um currículo e inclusive sobre os erros que você não pode cometer ao elaborar o seu CV, basta você baixar o e-book sobre portfólio neste link.
Até mais.
Forte abraço!
The post Como Criar um Currículo Criativo? appeared first on Chief of Design.

Como Criar um Currículo Criativo?
Fonte: Chef of Design

Como migrar para UI Design – Passo a Passo

Como migrar para UI Design – Passo a Passo

Eae, tudo bele?

Vamos falar sobre migração de carreira? Neste artigo você verá quais passos deve seguir para iniciar a sua migração. Vamos aqui falar sobre migrando para UI Design.

Caso você não saiba, UI Design, é uma design voltada para concepção de design de interfaces.

Eu defino UI Design em outro artigo, como:

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.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.

E essa área está cada vez mais em voga, pois muitos designers, principalmente os oriundos do Design Gráfico, enxergam no UI Design uma possibilidade de melhores ganhos financeiros e econômicos.

Há um tempo atrás eu fiz algumas lives sobre salário de Designer Gráfico, de salário de Web Designer e de salário de Design (vídeo do youtube). Nesses conteúdos temos um comparativo que mostra que realmente as áreas do Design voltadas para o Digital (como UI e Web) tendem a pagar melhor.

Além da questão financeira, o trabalho de um UI Designer parece ser mais valorizado pelas empresas que atuam com isso e a dia-a-dia do profissional é mais tranquilo referente, não que seja fácil, mas por ser compreendido de uma melhor maneira, as exigências, prazos e requisições são otimizadas.Por tudo isso que várias pessoas querem migrar para UI Design. Então nesse artigo eu vou te passar como você pode fazer isso. Vamos começar?

1# Estudar – Migrar para UI Design

Pode parecer óbvio, mas é mesmo. E por mais que seja claro, muitas pessoas pulam essa parte. Se você deseja atuar como Ui Designer, você precisa começar estudando. E caso você opte por um curso, aqui no blog que dá dicas sobre como escolher um bom curso de UI Design.

Muito provavelmente você vem de uma área que tem sinergias (como design gráfico) mas que não contempla os principais assuntos para você trabalhar como UI Designer.

O primeiro passo para você migrar para UI Design é começar estudando. Você deve estudar sobre algumas matérias essenciais, como por ex:

Interação humano-computador (IHC);User experiencie;Arquitetura da informação;Usabilidade;Componentes e elementos do UI Design;Estilos de UI Design;Styles Guides;Entre outros.

Para adquirir tais conhecimentos, você tem alguns caminhos que pode seguir:

Estudar por conta, sendo autodidata.

Essa parte você já está fazendo, acessando o nosso blog. Mas você pode consumir muito mais conteúdo pela web. Existem vários canais no youtube com bons conteúdos, artigos no Medium, outros tipos de materiais.

Você também pode adquirir livros para estudar por conta. Fazendo uma pesquisa rápida pela internet você encontrará livros sobre esses temas.

Estudar em curso online

Caso você queira, também pode fazer um curso online sobre o tema. Aqui no Chief of Design ainda não temos curso online específico sobre o tema.

Nós aqui do Chief of Design temos o Curso UI EXPERT. Em nosso curso de UX/UI você aprende a criar interfaces digitais que proporcionam as melhores experiências aos usuários e que te trará maior visibilidade no mercado de trabalho.

Para saber mais sobre o Curso de UI Design, clique aqui, ou na imagem abaixo.

Estudar em cursos presenciais

Infelizmente essa é a opção mais escassa. Existem poucos cursos presenciais sobre o tema. Uma alternativa é fazer workshops. Eu tenho um Workshop que se chama MIGRANDO PARA UI DESIGN, onde ministro com o UX/UI Designer Filipe Samuel.

Esse Workshop dura dois dias e é um intensivo sobre o tema. Caso você tenha interesse, fique sempre ligado aos e-mails e novidades aqui do Chief.

Já outra alternativa é realizar um curso de UX Design,já que nesse assuntos existem muito mais opções. Nesse caso você também vai aprender bastante sobre design de interfaces, apesar de não ser focado em UI Design.

2# Prática – Migrar para UI Design

Estudar é diferente de aprender. E para aprender é necessário a prática. Por isso você precisa criar peças de UI Design.

Crie experimentos, treine ferramentas, conheça técnicas, softwares, enfim…Faça experimentações e testes para por em prática aquilo que você está estudando e assim realmente aprender sobre UI Design.

Muitas pessoas nessa parte travam, pois alegam que não tem projetos ou clientes reais. Saiba que isso não é um problema que deve te impedir de migrar para UI Design.

É óbvio que o melhor cenário seria se você tivesse clientes reais para pode criar. Mas caso você não tenha, não tem problema! Você pode criar cases fantasmas, estudo de caso e até trabalhos acadêmicos para preencher o próximo item desse passo-a-passo.

3# Portfólio – Migrar para UI Design

Para alguém te dar uma oportunidade, você precisa apresentar um portfólio legal. Se você fizer o passo 2, você já terá trabalhos para montar o seu portfólio inicial.

Você deve ter um portfólio online para poder mandar o link para vagas, então utilize o Behance, o seu próprio site e também o Medium, para publicar na web os trabalhos realizados.

Um ponto importante aqui, é publicar os seus trabalhos da maneira certa. Então não se limite apenas a publicar as imagens do projeto. Crie uma narrativa, uma imersão para quem está vendo. Conte o processo de pesquisa, rafes, wireframes e todo o caminho percorrido até chegar no resultado final.

Eu tenho uma playlist no Youtube onde eu mostro tudo o que você precisa saber sobre portfólio. Clique aqui para depois assistir!

4# Divulgue – Migrar para UI Design

Após ter construído o seu portfólio você precisa mostrá-lo para outras pessoas, afinal ninguém vai adivinhar que você deseja migrar de área.

Por isso divulgue em suas redes sociais, altere os objetivos profissionais no seu Linkedin, participe de eventos e mostre a sua disposição de iniciar essa nova jornada.

Imagem ilustrativa de um UI Designer prototipando um projeto.Por shutter_o I /Shutterstock

Utilize tudo o que puder para divulgar. A maioria das oportunidades normalmente vem através de indicações e indicações só vem graças a laços, profissionais e pessoais. Quanto maior for o seu networking maior será a sua chance de alcançar uma oportunidade na área.

Uma boa dica para aumentar o seu networking é participar de meetups, como o evento Insights. É gratuito e todo mês tem evento.

5# Se candidate as vagas da área – Migrar para UI Design

Se você deseja migrar para UI Design, você precisa buscar uma oportunidade profissional. Além de divulgar para o seu networking, também se candidate a vagas de emprego.

Utilize sites como Linkedin, Catho, Trampos.co, entre outros. Envie o máximo de currículo para as vagas que você acha coerente.

Mande o seu currrículo mesmo que você não esteja ou se sinta 100% pronto, pois você nunca estará. Isso é fato.

Portanto, procure por oportunidades e vá com coragem para essa vaga. Uma hora alguma empresa te dará uma oportunidade, pode apostar. E a partir disso você terá migrado oficialmente para UI Design iniciando a sua trajetória nessa área.

Migrando para UX/UI Design – Passo a Passo

Para sintetizar todo esse tema e ainda dar mais dicas para voê migrar de área, eu criei um vídeo exclusivo sobre o tema. Você pode conferir abaixo.

Considerações Finais

Qualquer migração de área é algo difícil. Não é fácil mudar algo assim em sua vida. Porém é muito menos difícil e oneroso do que se pensa, principalmente quando se fala de migrar para UI Design.

Se você deseja iniciar em UI Design, siga os passos que viu neste artigo, estude bastante, trabalhe forte e tenha coragem para dar esse passo em sua carreira.

Espero que esse conteúdo tenha sido útil para ti.

Se você tem algum comentário ou informação que venha contribuir com esse artigo, não se acanhe, deixe um comentário logo abaixo.

E não deixe de conhecer o nosso Curso UI EXPERT que é focado para você aprender do zero até ao avançado em UI Design e criar eficientes interfaces de produtos digitais.Forte abraço.Até mais.
The post Como migrar para UI Design – Passo a Passo appeared first on Chief of Design.

Como migrar para UI Design – Passo a Passo
Fonte: Chef of Design

O que faz um UI Designer? 20 perguntas e respostas sobre UI Design

O que faz um UI Designer? 20 perguntas e respostas sobre UI Design

Eae! Tudo bele?

UI Design. Este é um tema com dúvidas frequentes nos canais do Chief of Design. E eu não poderia ficar insensível aos pedidos de meus seguidores e decidi responder as dúvidas daqueles que estão iniciando e daqueles que ainda estão nas primeiras pesquisas sobre o que faz um UI Designer.

Separei as questões mais relevantes, algumas até frequentes para montar esse conteúdo.

Lógico que não é possível cobrir todos os aspectos em um só artigo, mas acredito que os principais, para quem é iniciante, está sendo abordado por aqui.

Então com você as 20 questões sobre UI Design, para iniciantes, respondidas.

Aproveite e confira! Espero muito que você encontre uma questão semelhante àquela dúvida que ainda pairando em sua mente.

Vamos para as questões?

Antes só quero te lembrar que nós temos o nosso próprio curso de UI Design, o UI EXPERT. 

No Curso UI EXPERT você aprende a criar interfaces digitais que proporcionam as melhores experiências aos usuários e que te trará maior visibilidade no mercado de trabalho.

Para saber mais sobre o Curso de UI Design, clique aqui, ou na imagem abaixo.

1 – O que faz um UI Designer?

UI Designer (Designer de interfaces) é o profissional responsável por projetar o layout e os elementos interativos destes.

Partindo do princípio que a área de UI design (Design de interface de usuário) estuda o meio pela qual existe uma interação entre o indivíduo e um dispositivo, software, ou aplicativo, a função do UI Designer é garantir que a interação seja bem-sucedida resultante de uma facilidade de uso e acesso à interface gráfica.

O UI Designer deve projetar interfaces claras e objetivas para que a utilização do usuário seja intuitiva e sem entraves.
2 – Como anda o mercado brasileiro para UI Designers?
O mercado favorece o UI Designer destacadamente pela crescente necessidade de criação de desenvolvimento de aplicativos móveis.

O Brasil, junto da índia e da Indonésia, está entre os mercados que mais executaram download no quarto trimestre de 2017 dos aplicativos do Google Play, trimestre esse que foi considerado de maior desempenho para download. Os downloads ultrapassaram a marca de 19 bilhões.

Segundo outra pesquisa, realizada pela App Annie, o Brasil ocupa o segundo lugar no ranking de países com maior número de apps utilizados por mês, mais de 40. E o mesmo estudo aponta que os brasileiros, em um período de 24 horas, abrem em média quase 10 aplicativos, colocando nosso país no topo da lista.

E não podemos esquecer também a demanda de UI Designers para criação de interfaces para web sites em um cenário onde temos 51,3 consumidores obrigando o empresariado a possuir uma presença online para divulgar seus produtos e serviços.
3 – Onde pode trabalhar um UI Designer?

O UI Designer pode atuar em todos tipos empresas que necessitam de desenvolver interfaces, principalmente quando se trata de interfaces digitais.

Podem ser tanto empresas que prestam serviços do tipo, como agências e escritórios de Design, startups, consultorias, empresas de TI, até empresas que tem setores apenas para cuidar das suas interfaces como bancos, ecommerces, entre outros.
4 – Quanto ganha um UI Designer?
Segundo a Love Mondays, plataforma que ajuda profissionais a encontrar a empresa ideal e a descobrir salários em mais de 100.000 empresas, o salário médio para UI Designer, baseado em 192 salários postados por funcionários na plataforma e que atuam nesta profissão, é de R$ 4.284,00 por mês.

Mais esse números podem variar por causa de fatores como a região, segmento da empresa entre outros. A própria Love Mondays alerta que o salário pode variar de R$ 824,00 a R$ 11.487,00.
5 – Existe algum requisito para começar a aprender sobre UI Design?
Não há um pré-requisito. Mas algumas coisas que você se identifica ou alguns comportamentos podem indicar que você pode se dar bem na área como: gostar de tecnologia, comunicação, design, criatividade, dar grande atenção aos detalhes e resolver problemas.

E se você acredita que pode se dar bem é quer saber onde estudar aqui no blog tem um artigo que pode te ajudar a escolher um bom curso de UI Designer.
6 – Vale pena ser UI Designer?
Sim. Principalmente se você se enquadra no perfil do tópico anterior que é algo que aumenta as chances de você gostar de Design de interfaces.

Gostar de algo é o que nos faz enfrentar os desafios diariamente.
7 – Onde encontramos UI Design?

Uma interface á a ponte visual entre um usuário (humano) e uma máquina, serviço, sistema, produto. O UI Design se aplicar principalmente a interfaces gráficas.

Por isso algumas pessoas podem alegar que UI Design trata de interfaces para sistemas virtuais encontrados principalmente em computadores, smartphones, vídeo-games e realidade virtual.

Porém, podemos encontrar uma interface em qualquer objeto projetado para disponibilizar um meio para interação com o usuário de forma eficaz.

Você pode encontrar UI Design, seja através de interface gráfica ou física, em painéis de controle em máquinas industriais, em equipamentos para área de saúde, sistemas automotivos e de aviação, eletrodomésticos e eletroeletrônicos, softwares de computadores e dispositivos móveis, aplicativos, websites, entre tantos.

Apesar dessa grande variedades, a maioria dos empregos para UI Designer são para desenvolvimento de interfaces de app e web.
8 – Qual a diferença entre UI e UX Designer?
Basicamente o que difere é que o UI Designer desenvolve interface e o UX Designer se preocupa em como o usuário vai se sentir ao interagir com a interface e se encontrará valor quando interagir com os produtos ou serviços de uma empresa.

UI Design e UX Design são áreas que se complementam e colaboram uma com a outra. UI Design possibilita que uma ideia se concretize na interface e que o usuário consiga aproveitar o que está sendo apresentado. E o UX Design faz com o seja apresentado na interface garante boas sensações de uso.

Eu tenho um vídeo onde falo especificamente sobre isso.

9 – Web Design e UI Design não são parecidos?
Sim, são parecidos em partes. Mas precisamos entender um pouco do perfil de cada para identificar as semelhanças

Um Web Designer pode executar peças como criação de banners, pequenas animações, e artes para redes sociais, design para aplicativos, entre outras.

Mas a tarefa principal de um Web Designer é criar websites, ponto.

Agora o que faz um UI Designer?

O UI Design faz a ligação entre o usuário e um dispositivo ou sistema. O UI Designer é responsável por projetar a interface que promove a essa ligação.

Existem diferentes tipos de interface em diferentes produtos. Imagine o display de um micro-ondas. Aquilo é uma interface. O Designer de interfaces pode projetar todo tipo de interface inclusive as digitais e para web, como os websites. E é por isso que o Web Design e o UI Design são “parecidos”.

Na verdade o Web Design é mais amplo e o UI Design é uma área do conhecimento abrangida pelo Web Design. Para entender melhor eu gravei um vídeo que explica melhor as diferenças entre as duas áreas. Veja a seguir:

10 – Por quais conteúdos eu devo começar a aprender?
Alguns conhecimentos podem te ajudar nos primeiros passos como os Fundamentos de Design, usabilidade, elementos da interface, anatomia de interfaces, prototipagem e procurar dominar algum software gráfico.
11 – É possível entrar na área sem realizar um curso especializado? Eu consigo aprender tudo sobre UI Design sozinho?
A internet é um bom recurso para você aprender e dar seus primeiros passos.

No Youtube você pode adquirir conhecimentos como autodidata sem gastar um centavo ao realizar buscas sobre “ui design” e “Design de interface do usuário”. Inclusive encontrará diversos vídeos do Chief of Design que falam sobre o assunto. Aconselho até que acompanhe nosso canal para saber mais clique neste link.

A mesma pesquisa você pode executar no Google. A comunidade web dispõe artigos em blogs que explicam sobre área.

O grande problema é que dá muito trabalho angariar conteúdo que estão espalhados. Sem contar que você não tem conhecimento prévio sobre diversos assuntos e fica difícil saber o que pesquisar quando nunca se viu falar na vida sobre determinado assunto, técnica ou ferramenta.

Para agrupar em um só lugar conteúdos que você levaria muito tempo pesquisando, para preencher lacunas que conteúdos do internet não cobrem e para atender pessoas que não tem como frequentar um curso presencial eu disponibilizo o UI EXPERT

Neste curso você vai aprender os principais conceitos de UI Design para interfaces digitais para iniciar a sua jornada na área. Além das aulas, ao vivo e gravadas, você terá suporte diretamente comigo.

Para saber mais sobre as próximas turmas do curso CLIQUE AQUI.
12 – Quais as principais ferramentas que um UI Designer precisa saber utilizar para se destacar na área?
Entre as principais ferramentas se destacam o Sketch App, (para Mac) o Abode XD, o InVison, Balsamiq e Axure para prototipagem, InVision Studio, Figma e Photoshop.
13 – É preciso saber desenhar?
Saber desenhar o básico ajuda. Você não precisa ser exatamente um ilustrador, um artista, mas conseguir criar traços no papel para expressar as ideias visualmente e se fazer se entender o mínimo é de grande valia.

Desenhar ajuda em alguns processos, mas não é mandatório.
14 – Quais as principais características de um bom UI Designer?
É uma pergunta difícil de responder porque em um grupo de bons UI Designers podem existir profissionais com características muitos diferentes. Sem contar que empregadores podem considerar que as competências do profissional têm um peso maior para definir que ele é bom em relação as características comportamentais.

Entretanto podemos relatar algumas propriedades da área que pode favorecer um ou outro perfil. Vamos a algumas:

Criatividade é uma característica que permeia toda a área de Design, portanto ser criativo colabora muito para que você seja considerado bom UI Designer.

Apesar de UI Design mexer com a criatividade esta é uma área que também preza por uma organização sistemática que visa garantir a melhor interação. Portanto em alguns momentos vale a pena o fato de ser metódico.

Um UI Designer precisa muito se relacionar com equipes em diferentes etapas do processo. Portanto além de ser bom comunicador na comunicação visual ele deve ser bom na comunicação verbal.

Pensar e agir com UI Design é dar grande atenção aos detalhes. Portanto ser detalhista é uma boa característica também.

O trabalho de UI Designer está todo centrado no usuário. Suas decisões de Design vão definir o bom resultado da interação.

Então ter empatia por quem vai interagir na interface projetada é um grande passo para que as coisas resultem bem. A empatia fará você enxergar todas as nuances do processo desde a pesquisa do público-alvo até a execução da interface.

Essas são algumas características importantes. Se você acha que outras características devem ser mencionadas, agradeço se você contribuir na seção de comentários com mais conteúdo para esse artigo.
15 – Qual dica você me daria para garantir uma boa execução de UI Design?
Existem uma relação de boas práticas para serem executadas, mas se for para escolher uma só eu te indicaria não querer inventar a roda. E o que eu quero dizer com isso?

Quero dizer que nem sempre você precisará criar uma solução nova porque existentes ótimos padrões para você adaptar no seu projeto. Se tratam de padrões familiares de UI.

Ao adaptar alguns destes padrões tirados de um ambiente similar você ganhará tempo e também a certeza de estar utilizando algo que já foi testado.

Você com certeza já interagiu com o ícone hambúrguer. Ele é um padrão que vem sendo bastante disseminado quando pensamos em mobile. A limitação de espaço existente em interfaces destinadas a dispositivos menores criou a necessidade de adotar esse padrão para suportar os tradicionais menus.

A melhor forma de encontrar padrões é pesquisando por onde o público-alvo do projeto interage a maior parte do tempo.

Pesquise elementos de interface em redes sociais, sites de notícias, sites de bancos, sites de universidades, aplicativos de mensagens instantânea, algum software específico, etc.
16 – Como manter a clareza nas interfaces?
Manter a clareza na interface é a qualidade de não inserir “ruídos”.

Uma boa forma de manter a clareza é evitar elementos que não deixam claro sua função. O usuário deve precisar daquele elemento, ele não deve ser um entrave.

Elementos necessários são sucintos e fazem sentido.

Eu tenho um artigo e vídeo aqui no blog onde falo sobre Gestalt (clique aqui para conferir). Acredito que tal conteúdo possa te ajudar nessa tarefa.
17 – O que é Style Guide?

O Style Guide determina quais as regras e padrões devem ser utilizadas em um sistema. Serve como guia para que as equipes de trabalhos estejam alinhadas ao propósito do projeto e que o produto final tenha consistência.

Ele estabelece um padrão visual e gera todos componentes necessários para interface.

Como isso você estabelece o padrão visual de componentes como cores, tipografia, botões, navegação, listas, formulários, entre outros.
18 – Não tenho experiência de trabalho com UI Design. O que fazer para ser contratado?
Parece óbvio. Mas você deve obter experiência. Você deve correr atrás dela.

Não. Você não procurará emprego e muito menos deve se preocupar em ganhar muito dinheiro agora. Tudo que você tem que fazer é se cadastrar em plataformas de trabalhos freelance e se candidatar a jobs que correspondem ao seu nível de habilidade atual.

Ao acumular jobs concluídos você, além de conquistar experiência, poderá criar um portfólio. Se você não sabe como criar um portfólio clique neste link e conheça nossa guia para construir um.

Com um portfólio em mãos você tem como comprovar uma certa experiência para disputar vagas. Porém pode acontecer de você ter se dado bem como freelancer e conquistados contatos que não queira mais um emprego.
19 – É possível trabalhar remotamente como UI Designer?
Sim. O trabalho remoto vem cada vez mais sendo adotado por grandes e pequenas empresas. Existem empresas que são totalmente remotas.
20 – Vale a pena migrar do Design Gráfico para o UI Design?
Vale a pena se você se vê encantado pela possibilidade de gerar resultados planejando interfaces. Também vale a pena porque a média salarial e as possibilidade de ganhos, financeiros e profissionais, são maiores.

O Design Gráfico é sim uma área que desempenha um papel muito importante. Mas pode ser que você se sente desmotivado agora. Pode se algo passageiro. Entretanto se você anda flertando com novas tecnologias sugiro que pesquise bastante que nem você está fazendo agora.

Leia bastante sobre assunto e converse com profissionais da área para que você comece a fazer uma migração de forma tranquila se esta vier a ser sua vontade.
Considerações finais
Neste artigo procurei abordar questões relevantes e recorrentes sobre UI Design. Pode ser que alguma dúvida que você possui não tenha sido abordada. Por isso peço que você utilize a seção de comentários e compartilhe conosco o seu pensamento.

Espero que as respostas sirvam para te dar um norte e te direcione de forma positiva as suas decisões. UI Design é a uma área que está em expansão e que vem despertando grande interesse de contratantes por isso procurar informação é questão valiosa para que não exista decepções com as possíveis escolhas.

Espero que você tenha gostado do artigo!

Compartilhe com seus amigos que queiram conhecer um pouco mais sobre a área e deixe seu comentário também.

E não deixe de conhecer o nosso Curso UI EXPERT que é focado para você aprender do zero até ao avançado em UI Design e migrar para uma área que valoriza o design.

Forte abraço!

Até mais!The post O que faz um UI Designer? 20 perguntas e respostas sobre UI Design appeared first on Chief of Design.

O que faz um UI Designer? 20 perguntas e respostas sobre UI Design
Fonte: Chef of Design

UX Design e UI Design – Qual a diferença entre eles?

UX Design e UI Design – Qual a diferença entre eles?

Eae, tudo bele?

Vamos falar sobre UX Design e UI Design. Essas duas áreas estão muito em alta e confundi-las é muito comum, principalmente para quem está iniciando. Por isso não fique acanhado caso você não saiba o que é ou as diferenças entre UX Design e UI Design.

Independente da nomenclatura, do nome, etc. O fato é que as duas áreas são importantes e as duas áreas tem grande sinergias. Apesar de diferentes e de tratarem de determinadas camadas dentro de um projeto, elas trabalham em conjunto.

E elas estão com bastante visibilidade ultimamente, principalmente porque designers e criativos em geral, enxergam nessas áreas possibilidades de melhores ganhos financeiros e reconhecimento profissional.

Por isso neste artigo vou passar para você o que é cada área, falar sobre as suas diferenças e também das coisas em comum que compartilham. Bele?

Nós aqui do Chief of Design temos o Curso UI EXPERT. Em nosso curso de UX/UI você aprende a criar interfaces digitais que proporcionam as melhores experiências aos usuários e que te trará maior visibilidade no mercado de trabalho.

Para saber mais sobre o Curso de UI Design, clique aqui, ou na imagem abaixo.

Então, vamos começar a brincadeira 😀

Neste artigo você vai aprender:

O que é UI Design.
O que é UX Design.
Quais as diferenças entre UX Design e UI Design.
Quais as semelhanças e sinergias entre UX Design e UI Design.
Vídeo UX Design e UI Design.

O que UI Design?
UI Design significa User Interface Design (Design de Interface do Usuário).

UI é área do Design que elabora, cria e planeja  o meio pela qual uma pessoa (chamado normalmente de usuário) interage e controla um determinado dispositivo. Esse dispositivo pode ser um sistema, software, produto, serviço, aplicativo, etc.

Essa interação e controle são feitas através de um interface. Essa interface pode ser composta por botões, menus e qualquer elemento que possibilite a interação entre o usuário e o dispositivo.

Imagem ilustrativa de um UI Designer prototipando um projeto.Por MIND AND I /Shutterstock
Portanto o profissional UI Designer vai utilizar de conhecimentos de diversas disciplinas para criar essa interface.

E nós lidamos como interfaces a todo momento. Apesar de sempre associarmos interfaces a telas digitais, aplicativos mobiles e websites. Interfaces existem antes de tais tecnologias existirem.

Um exemplo clássico disso seria o controle de uma televisão. O controle de uma TV é por onde interagimos com a aparelho, determinando qual canal queremos sintonizar, qual o volume mais adequado entre tantas outras funções disponíveis através da interação que temos com o controle remoto.

E um bom projeto de Design de Interface do Usuário, independente se seja o controle de uma TV ou um aplicativo web, é projetado de forma a antecipar as reais necessidades de utilização do usuário.

Uma boa interface é simples de aprender e é fácil de usar. A ideia principal da interface é que o usuário consiga realizar o que ele pode, quer e espera realizar. Tudo isso de modo simples, fácil e com uma boa experiência, a chamada “user-friendly”, ou seja, experiência amigável. Sobre experiência, veremos mais a frente.

E sobre UI Design eu tenho outros artigos, mais detalhados, sobre o assunto. Também tenho uma playlist no Youtube. Por isso vou encerrar por aqui e deixar esses links para depois você continuar os estudos sobre UI Design.

Seguem os artigos:

O que é User Interface Design:

https://www.chiefofdesign.com.br/ui-design/

10 Princípios fundamentais de design para um UI Designer:

https://www.chiefofdesign.com.br/ui-designer/

Web Design x UI Design

https://www.chiefofdesign.com.br/web-design-ou-ui-design/

Posto isso, agora vamos para o UX Design. A seguir falarei sobre UX Design antes de entendermos as diferenças entre eles. Vamos nessa?
O que é UX Design?
UX Design significa User Experience Design( Design de Experiência do Usuário).

UX lida com as emoções e experiências dos usuários. É parte do Design que pensa exclusivamente na relação do usuário com o produto ou serviço.

A meta do UX é  torna mais amigável ( olha o “user-friendly”, aqui de novo), natural e simples a experiência de uso de um determinado serviço ou produto.

Logo os UX Designers estudam e projetam com base no comportamento humano. E não só isso. Com base, essencialmente também, nos comportamentos do público usuário em questão.

Criativo Web Designer planejamento de aplicativos e desenvolvimento de layout modelo, quadro para o telefone móvel. Conceito de experiência do usuário (UX).Por MIND AND I /Shutterstock
O objetivo é oferecer um serviço que garanta uma boa experiência, gerando satisfação  e evitando frustrações no usuário. Projetar experiências que encantem e fidelizem clientes é o cenário mais do que ideal.

Portanto o UX Design está diretamente relacionado ao uso do serviço, a interação, e como isso afeta as emoções e experiências do usuário.

Existem um outro artigo onde falo um pouco mais sobre experiência do usuário. Você pode conferir clicando aqui.
Quais as diferenças entre UX Design e UI Design?
A principal diferença entre UX Design e UI Design no papel que cada um tem um projeto e como você já percebeu, apesar de UX Design e UI Design serem termos semelhantes, os significados são diferente.

O UI Design está mais conectado com camada física, tangível e prática do projeto. Afinal, a interface que será utilizada diretamente pelo usuário.

É nessa parte onde se cria e estiliza os botões, menus e todos os artefatos que tornaram possível essa utilização. E para isso o profissional UI Designer normalmente utiliza de ferramentas (quando falamos de interfaces digitais) como Sketch app, Adobe XD, Figma, entre outros.

Por outro lado, o UX Designer é profissional o que estuda e planeja como o usuário se sentirá ao usar interface. Então ao invés de focar na cor ou no formato do botão, ele irá pelo lado do projeto que pensa como serão as experiências e emoções ao interagir com aquela interface.

Tem sempre uma imagem que gosto de utiliza que mostra o UI Design como uma ponte que liga o que foi planejado pelo UX Design com o Usuário.

Então enquanto o UI Design cuida da interação da interface e usuário o UX Design cuida do lado emocional, sempre focando em como proporcionar a melhor experiência ao usuário.
Quais as semelhanças e sinergias entre UX Design e UI Design?
UI e UX Design tem muitas coisas em comum. Como diz a gíria do popular brasuca, “é tudo junto e misturado”.

É inconcebível pensar em um UI Designer projetar sem pensar na experiência do usuário, da mesma maneira não tem aplicar tudo que foi pensado no UX Design sem ajuda do UI. O UI design é o que torna viável essa experiências.

E podemos considerar a experiência do usuário como conjunto de fatores e o UI Design é um entre esses fatores.

Existe uma imagem desenvolvida por Dan Saffer (que apesar de ser de 2008 ainda é atual) que demonstra que UX  união de vários aspectos. Todos eles influenciarão e ajudarão a compor a experiência final do usuário.

Nele, inclusive, podemos ver outras áreas que são ligadas e estão relacionadas como Visual Design e Product Design.

Também temos o famoso guarda-chuva de UX que demonstra que UI é um fator para um projeto de UX Design.

Não tem como desligar as áreas. Até por isso os vários profissionais se apresentar como UX/UI Designer.

E também, mas metologias, tarefas e projetos como Design Sytem, Design Sprint e Design Thinking, ambos os lados podem participar e realizar em seus cotidianos.
Vídeo UX Design e UI Design – Qual a diferença entre eles?
Para sintetizar tudo o que foi escrito neste artigo e também para acrescentar mais itens importantes a essa questão, que eu gravei um vídeo exclusivo sobre o assunto falando sobre UX Design e UI Design e qual é a diferença entre eles.

Sugiro fortemente que assista o vídeo, pois ele é um complemento valioso de tudo o que foi apresentado até aqui.

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 caso não seja inscrito, se inscreva 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.The post UX Design e UI Design – Qual a diferença entre eles? appeared first on Chief of Design.

UX Design e UI Design – Qual a diferença entre eles?
Fonte: Chef of Design

Temas Filhos WordPress – Para que servem e como criar?

Temas Filhos WordPress – Para que servem e como criar?

Se você quiser ter uma série de dores de cabeça com seu site WordPress, começa por alterar o tema de sua instalação sem criar um tema filho antes. Você precisa conhecer sobre TEMAS FILHOS!

Como dor de cabeça é algo que você não quer, esse artigo visa te explicar para que serve e como criar Temas Filhos e como esses temas podem salvar sua paz quando você precisa fazer uma modificação em seu site.

Muitas pessoas se queixam por terem perdidos suas alterações por total desconhecimento sobre os Temas Filhos. A queixa vão desde funcionalidades que deixaram de funcionar (códigos de terceiros que sumiram), até banners que sumiram das páginas.

Entender esse recurso te possibilita fazer alterações em um tema original do WordPress e não sofrer com as perdas destas em futuras atualizações.

Então simbora para o conteúdo!!!

O que é um Tema Filho?

A melhor definição para Tema Filho é definição encontrada no site oficial do WordPress:

“Um tema filho é um tema que herda as funcionalidades e estilos de outro tema, chamado de tema pai”.

Quando você cria um tema filho, ele é todo “baseado” em um tema já existente. No momento que você cria um Tema Filho o tema existente se torna Tema Pai.

Não existe Tema Filho sem Tema Pai, pois ele depende completamente de seu pai para funcionar. Ele não fará nada e nem poderá ser ativado, sem o tema original presente. 

O tema filho é quem vai receber as alterações no lugar do Tema Pai. Essa é a grande vantagem de usá-lo e é isso que vai livrar sua vida de certas dores de cabeça.

Você vai entender isso melhor no próximo tópico.

Por que usar temas filhos?

Existem dois grandes motivos:

O primeiro grande motivo é preservar as características e funcionalidades do tema pai que foram alteradas e que fatalmente seriam perdidas em uma atualização futura.

O segundo grande motivo é fazer alterações, mas considerando herdar as funcionalidades principais do tema original.

Quando usar um Tema Filho?

Você usará o Tema Filho quando você precisar entregar algo personalizado, mas de forma ágil e que mantenha as principais funcionalidades do tema original. Ou quando você precisar fazer pequenas alterações no tema.

Quando não é indicado usar Temas Filhos?

Não é indicado usar o tema filho quando você pretende alterar drasticamente o Tema.

Ao fazer isso você deixa de herdar as funcionalidades do tema principal e gasta muito tempo em desenvolvimento o que contraria uma das principais características do uso dos Temas Filhos que é a agilidade.

Neste caso é indicado que se construa um Tema do Zero.

Como criar um Tema Filho

Agora vamos para um passo a passo explicando como criar Temas Filhos e que você já poderá aplicar os conhecimentos adquiridos aqui em sua instalação.

Mas se você quiser aprender com mais riquezas de detalhes, no Curso Web Designer PRO temos um módulo inteiro sobre Temas Filhos.

1 – Criando a pasta do Tema

A primeira coisa é acessar o diretório na instalação WordPress onde se localiza os temas. Acessando, via FTP, o diretório onde se localiza os arquivos da instalação do WordPress, ele fica em “wp-content/themes”.

Na pasta “themes” você encontrará uma relação de temas. Você deve criar uma nova pasta neste diretório, pasta esta que receberá os arquivos do Tema Filho.

Você deverá renomear esta pasta para o nome que você pretende usar no Tema Filho. Não use espaços no nome para não ocasionar erros.

No exemplo deste artigo a pasta se chamará “fundamentos-do-design-theme” que corresponde a nome Fundamentos do Design Theme.

Esse pasta deverá possuir dois arquivos que você criará (style.css e functions.php) e que será o mínimo para que seu Tema Filho funcione.

Resumindo teremos:

a pasta do tema filho;o arquivo style.css;o arquivo functions.php.

2 – Criando a folha de estilos (style.css)

O arquivo “style.css” é obrigatório para que o Tema Filho funcione.

Você pode usar um editor HTML para criar esse arquivo. Com bloco de notas já é possível criar este arquivo se certificando que a extensão seja “.css”.

No topo do arquivo deverá ser inserido um cabeçalho com informações sobre o novo tema e referenciando o Tema Pai.

No nosso exemplo, o Tema Filho será construído a partir do tema “Twenty Twenty” que é um tema padrão do WordPress e que deve estar presente na instalação.

No seu caso você terá um tema próprio a qual pretenderá criar o Tema Filho.

Vamos ao exemplo (leia cada instrução):

/*Theme Name: Fundamentos do Design Theme (Aqui vai o nome do Tema Filho)Theme URI: https://wordpress.org/themes/twentytwenty/ (Aqui vai o endereço do Tema no Diretório de Temas do site do WordPress, caso houver)Description: Twenty Twenty Child Theme (Aqui descreve que o Tema é filho do tema Twenty Twenty)Author: David ArtyAuthor URI: https://davidarty.com (Site do autor do tema)Template: twentytwenty (Parte fundamental e obrigatória para o funcionamento – Este nome corresponde ao nome da pasta do Tema Pai)Version: 1.0.0 (Versão)License: GNU General Public License v2 or later (Licença)License URI: http://www.gnu.org/licenses/gpl-2.0.html (Endereço da Licença)Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready (Tags que descrevem características do Tema)Text Domain: twentytwenty (Possibilita que os metadados do tema seja traduzidos)*/

Na verdade, grande parte deste código não é necessário, caso seu tema não seja distribuído para comunidade. Então você pode resumi-lo com as partes mais importantes para a funcionalidade do tema. Veja a seguir:

/*Theme Name: Fundamentos do Design ThemeDescription: Twenty Twenty Child ThemeTemplate: twentytwentyText Domain: twentytwenty*/

Reforço aqui atenção para o nome presente na linha Template. Este nome deve corresponde ao nome da pasta do Tema Pai para que tudo funcione.

As próximas linhas do arquivo são dedicadas aos estilos CSS que irão substituir os estilos do Tema Pai.

Após essa edição no arquivo você deve subi-lo para sua hospedagem, na pasta do tema filho, e poderá ativar o Tema no WordPress.

Na hora que você for ativar o Tema Filho no painel do WordPress, lá em Aparência/Temas, você notará que ele não tem uma capa. Mas resolveremos esta questão em um tópico mais a frente.

Você também poderá também testar o tema novo visitando uma página do site. E se surpreenderá com uma página sem estilo algum.

Página sem estilos CSS

Mas não se preocupe! Estamos no caminho certo! Isso será corrigido na próxima etapa ao enfileirar os arquivos CSS usando o arquivo “functions.php”.

3 – Enfileirar as folhas de estilo do tema pai e do tema filho através do arquivos “functions.php”

O “functions.php” é um arquivo presente em seu tema WordPress, e ele é carregado antes de qualquer arquivo de template do tema.

Este arquivo é poderoso, pois ele determina diversas funcionalidades de um tema. Para quem tem conhecimentos avançados de PHP e da documentação do WordPress será possível usar este arquivo para substituir, ou editar funcionalidades presentes no Tema Pai.

Mas aqui usaremos para enfileirar as folhas de estilo usando wp_enqueue_scripts action e wp_enqueue_style() no tema filho.

Crie um arquivo chamando “functions” em seu editor e salve com a extensão “.php”. Insira o código a seguir:

<?php function theme_enqueue_styles() {

$parent_style = ‘parent-style’;

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array( $parent_style )
);
}
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
?>

Após a edição suba o arquivo “functions.php” para a pasta do Tema Filho em sua hospedagem para testar.

Uma coisa importante a frisar é que diferentemente do que ocorre com os estilos, o “functions.php” do Tema Pai é carregado antes do que o do Tema Filho.

Veja agora que ao visitar uma página do site o estilo visual será carregado. Mas, apesar de ser o mesmo do Tema Pai, o estilo que predomina sempre será do Tema Filho.

O que acontece é que no momento estão sendo carregados os estilos do Tema Pai. Mas basta sobrescrevê-los alterando valores das propriedades no arquivo “style.css” do Tema filho e que o visual se modifica.

Testando um tema filho com pequenas alterações

Para verificar a efetividade da criação do Tema Filho você pode testar fazendo certas edições. Para isso você deve dominar no mínimo as Linguagens CSS e HTML.

Existem diferentes níveis de edição para um Tema Filho de acordo com a complexidade.

Edições de complexidade baixa

Onde você edita com CSS algum elemento HTML existente no Tema Pai sem alterar ou outros Elementos HTML.

Um exemplo simples que serve para testar se o tema filho está funcionando é alterar a cor de um título de uma página. Veja um exemplo a seguir.

Passo 1:

Primeiro inspecionamos o elemento HTML através do Inspetor do navegador em uso para identificar o nome do seletor CSS.

Passo 2:

Agora pegamos os seletor identificado no código HTML e o usamos para definir uma nova cor para o títulos através de CSS no arquivo “style.css” do Tema Filho.

Salvamos o arquivo e subimos para pasta do Tema Filho. Recarregamos a página para averiguar se o título principal mudou para cor vermelha.

A mudança da cor do título para a cor vermelha é a confirmação final de que o Tema Filho está funcionando.

Se você conseguir chegar até aqui você está habilitado para configurar um Tema Filho.

O que foi exposto até este momento é fundamental para que partir deste ponto possa se fazer alterações mais complexas. Entretanto os tipos de edição tratadas a seguir seria indicado conhecer um pouco de PHP.

Edições de complexidade média

Esta edição é quando você precisa alterar um elemento HTML em um arquivo PHP do tema. Neste caso é preciso subir uma cópia do arquivo do Tema Pai para a pasta do Tema Filho.

Os temas WordPress são compostos por diversos arquivos de modelos em PHP (além de CSS e JS). São arquivos modulares e reutilizáveis, usados ​​para gerar as páginas da web em seu site WordPress. Alguns arquivos de modelo (como o modelo de cabeçalho e rodapé) são usados ​​em todas as páginas do seu site, enquanto outros são usados ​​apenas em condições específicas.

Você poderá ver a relação destes arquivos na Hierarquia de Modelos no site WordPress.

As alterações destes arquivos serão feitas no Tema Filho. Ao subir um destes arquivos para a Pasta do Tema Filho ele assumirá todas as funções em detrimento do arquivo existente no Tema Pai.

Use esse recurso com parcimônia. Se você acredita que deva editar uma quantidade muita grande de arquivos que compõem o Tema, considere se não é mais adequado criar um Tema do zero em vez de um Tema Filho.

Sem contar que qualquer ajuste que o desenvolvedor do Tema fizer em algum arquivo original não será repassado para o Tema Filho em futuras atualizações. O Tema filho só herda as funcionalidades do arquivos que estão somente no diretório do Tema Pai.

Um exemplo simples é incluir um subtítulo (tags Headline) no arquivo responsável por exibir o cabeçalho do site (header.php).

Observação: Para não ocorrer um erro PHP evite fazer edição entre as tags de abertura e fechamento do PHP (“<?php” e “?”>) se você não tem certeza do que está fazendo.

Edições de alta complexidade

Aqui você precisa de bons conhecimentos de PHP e da documentação WordPress.

Este tipo de edição visa alterar alguma linha de código PHP em um arquivo específico e como no tópico anterior deve ser usado com parcimônia. Ou alterar uma funcionalidade do tema pai através do arquivo “functions.php” ou também incluir uma funcionalidade nova.

Conclusão sobre Temas Filhos

Se você precisa fazer alterações pontuais e não quer que essas alterações sejam perdidas em atualizações futuras o uso de Temas Filhos WordPress é o caminho a seguir.

É comum pessoas e queixarem por terem perdidos alterações em seus sites WordPress e os Temas Filhos tem função de evitar isso. Mas como citado no artigo, use de forma consciente para não perder todo o potencial do Tema principal e de forma que faça o processo de desenvolvimento ser ágil para seu projeto.

Agora me diga nos comentários o que você acha sobre os Temas Filhos.

Aproveite e compartilhe esse conteúdo com seus amigo!!!

Abraço!!
The post Temas Filhos WordPress – Para que servem e como criar? appeared first on Chief of Design.

Temas Filhos WordPress – Para que servem e como criar?
Fonte: Chef of Design

Introdução a IHC – Interação Humano Computador

Introdução a IHC – Interação Humano Computador

Seja bem-vindo(a)!

Qual seria a melhor forma para que softwares tenham real sucesso em um mercado competitivo, receber bons feedbacks, ser recomendado e atrair mais consumidores?

Independente da estratégia de marketing que será adotada, acredito que a primeira preocupação é oferecer um produto com interface amigável, ou seja, de fácil utilização e com possibilidade de interagir de forma intuitiva nas funcionalidades básicas.

Um produto com essas características possibilita experiências que impactam positivamente na vida da pessoas.

Neste artigo apresento a área de IHC – Interação Humano Computador. Área esta que foca no lado humano da interação com sistemas computacionais que promovem experiências positivas para o público e consequentemente contribuem para o sucesso do produto.

Preparado? então venha comigo!

Neste artigo você aprenderá sobre:

Abordagens “De dentro para fora” e “De fora para dentro”;O que é IHC (Interação Humano Computador)?;Elementos envolvidos no processo de interação;Objetivos de IHC;Benefícios de IHC;Áreas relacionadas à IHC.

Abordagens “De dentro para fora” e “De fora para dentro”

Para que se entenda o que a área de IHC pretende enfatizar precisamos conhecer duas abordagens de desenvolvimento de sistemas de interação. São elas as abordagens “De dentro para fora” e “De fora para dentro”.

Ocorre um problema quando sistemas interativos são construídos com foco apenas nos aspectos físicos da construção. Podemos denominar essa abordagem de “De Dentro para Fora”.

Abordagem de desenvolvimento de sistemas de interação “de dentro para fora”

Esses sistemas são desenvolvidos com maior preocupação na qualidade da construção, processo de construção, custo, durabilidade e outras questões que pouco consideram a qualidade de uso pelo usuário.

Essa abordagem se caracteriza por:Desprezo pela interface;Maior foco no sistema;Design de software desconsiderado;Processo de desenvolvimento inadequado;Interação usuário-sistema não avaliada.

Esse maior foco com a parte de “de dentro” causam prejuízos na experiência do usuário porque resultam em sistemas interativos inadequados.

Felizmente cada vez mais é crescente o número de desenvolvedores, projetistas e empresas desenvolvedoras preocupadas com a melhoria e qualidade do uso das interfaces projetadas.

Abordagem de desenvolvimento de sistemas de interação “de fora para dentro”

Ao focar nessa melhoria elas usam a abordagem de “De Fora para Dentro”, abordagem está que garante uma maior competitividade no mercado.

O que é IHC (Interação Humano Computador)?

A área de IHC trabalha com abordagem de “fora para dentro”. Usarei aqui a definição de Hewett para explica o que é IHC.

“Interação Humano-Computador (IHC) é uma disciplina voltada para o projeto, avaliação e implementação de sistemas computacionais interativos para uso humano e com o estudo de fenômenos importantes que os rodeiam.” (Hewett et al., 1992).

Foi em meados dos anos 80 que a IHC foi difundido como uma área de estudo. Isso devido a histórica conferência de Gaithersburg em 1982 “Human Factors in Computer Systems” (traduzindo; “Fatores Humanos em Sistemas Computacionais”). A partir daí o IHC se tornou uma atividade internacional de impacto industrial em todo o mundo.

Sendo a área IHC envolvida com os estudo de fenômenos que acontecem na interação do ser humano com os sistemas computacionais é de suma importância conhecer os elementos envolvidos no processo de interação.

Elementos envolvidos no processo de interação

A seguir vou mostrar conceitos que permitem identificar os elementos envolvidos na interação usuário–sistema. Sendo o primeiro conceito de Contexto de uso já demonstra muito bem sobre a função de cada um destes elementos.

Contexto de uso

O Contexto de uso é caracterizado por toda situação relevante para interação com o sistema. Inclui-se no contexto, quando o sistema é utilizado e onde ocorre a interação (o ambiente físico, social e cultural).

A figura anterior ilustra um usuário em determinado contexto de uso, procurando alcançar um objetivo, ao interagir com a interface de um sistema interativo.

No momento que eu, Ed Francisco (USUÁRIO), em meu escritório (CONTEXTO DE USO),  edito este artigo, me vejo em um PROCESSO DE INTERAÇÃO, onde eu digito e formarto o texto, e insiro imagens usando o Gerenciador de Conteúdo WordPress (SISTEMA) para que ele seja publicado no blog do Chief of Design (OBJETIVO).

Interação

A possibilidade de interação acontece quando um sistema oferece uma interface para o usuário agir.

Segundo a definição de Hix e Hartson (1993): “Em geral, a interação usuário–sistema pode ser considerada como tudo o que acontece quando uma pessoa e um sistema computacional se unem para realizar tarefas, visando a um objetivo”.

Interface

A interface é o contato entre o usuário e o sistema. Se trata da porção do sistema que mantém o contato durante a interação. O hardware e softwares utilizados durante a interação possibilita o contato físico na interface.

O teclado possibilita o contato físico na interface.

O usuário pode interagir com o sistema de forma ativa através de dispositivos de entrada como teclados, mouse e webcam. Enquanto os dispositivos de saídas como os alto-falantes e impressoras transmitem a reações dos sistemas que o usuário recebe de forma passiva.

Affordance

Um botão desenhado na interface gráfica de um sistema sugere ao observador a possibilidade de pressionar (um tipo de uso) para atingir um objetivo. Então ele usa o mouse para isso.

Portanto Affordance refere-se às características dos objetos físicos que permitem identificar suas funcionalidades através de seus atributos.

Objetivos de IHC

Os objetivos de IHC se caracterizam em como definir métodos para projetar sistemas computacionais interativos confiáveis, úteis, de fácil utilização pelo usuário e que levem em consideração fatores culturais, cognitivos, emocionais, e intelectuais do público a ser atingido.

Esses objetivos vão de encontro com o conceito de Aceitabilidade de Sistemas proposto pelo renomado Consultor de Usabilidade para web, Jakob Nielsen.

Aceitabilidade de Sistemas 

A aceitabilidade de um sistema se divide em aceitabilidade social e aceitabilidade prática. 

A aceitabilidade social diz respeito à aceitação do sistema. Verifica-se aí se os usuários acreditam que o sistema pode melhorar o andamento de suas atividades sem entraves.

A aceitabilidade prática diz respeito a parâmetros como custo, compatibilidade e confiabilidade,  etc., e também uma categoria denominada “usefulness”.

Na categoria “Usefulness” verifica-se se um sistema poder ser usado para atingir um determinado objetivo. Trabalha-se aí com atributos de utilidade e usabilidade.

Sobre a Utilidade verifica-se se o sistema faz o que deve ser feito conforme o objetivo proposto. Já usabilidade está relacionada a quão bem os usuários podem utilizar uma ferramenta do sistema a fim de realizar uma tarefa específica.

Benefícios da Interação Humano Computador

O estudo e a prática de IHC devem ser estimulados porque podem proporcionar benefícios diretos ao usuário e também para a sociedade de uma forma geral.

Benefícios para os usuários:

Elevação da produtividade de usuários;Redução do número dos erros;Redução da gravidade dos erros.

Benefícios para as empresas:

Vantagem competitiva;Aumento das vendas.Redução de custo com treinamento;Redução do custo com suporte técnico;Redução de custo com desenvolvimento;

Áreas relacionadas à IHC

Logicamente sendo a IHC uma área, cujo resultado final de suas ações é o bem-estar do usuário, envolveria outras área do conhecimento humano.

A complexidade para analisar fatores relacionados com o usuário como saúde, conforto, segurança, e características comportamentais, com a interface do usuário, com as funcionalidades do sistemas, com a tarefas a serem executadas, com as restrições e com as questões de produtividade, justifica a utilização de conhecimentos técnicos de várias áreas.

Portanto a IHC se beneficia não só da Computação, mas também de conhecimentos e métodos de outras áreas, o que faz dela multidisciplinar. Muitos desses conhecimentos técnicos são importados para serem adaptados às suas necessidades. 

Dentre as áreas que contribuem para estudos dos fenômenos da interação temos:

sistemas de informação;ciências da computação;engenharia;psicologia;sociologia;antropologia;filosofia;design gráfico;ergonomia;inteligência artificial.

Considerações finais sobre a Interação Humano Computador

A interação com sistemas é algo mais que comum atualmente na rotina das pessoas. Portanto não pode existir espaço para produtos que não forneçam uma boa experiência interativa e que não se preocupam com o comportamento e sentimos destes usuários. 

Um profissional sério deve levar esses aspectos em consideração na hora de projetar as interfaces de seus sistemas. E os conhecimentos sobre IHC podem supri-lo com as melhores diretrizes.

Felizmente a área de IHC conta com a contribuição de profissionais de áreas diversas que com esforços somados constroem os melhores caminhos para o desenvolvimento dos mais adequados sistemas de interação para usuários. Sejam profissionais que dominam tecnologia e são capacitados para desenvolver sistemas, ou profissionais que estudam sobre homem, sobre a sociedade e são capacitados para prover informações sobre a capacidade humana.

Então é isso! Se você gostou desse artigo deixe o seu like e compartilhe com seus amigos que tiverem interesse no assunto.😀

Aproveite e deixe a sua opinião, dúvida e/ou experiência na área de IHC, nos comentários abaixo.

Abraço!
The post Introdução a IHC – Interação Humano Computador appeared first on Chief of Design.

Introdução a IHC – Interação Humano Computador
Fonte: Chef of Design

Dicas para melhorar o UI Design do seu e-commerce de nicho e vender mais

Dicas para melhorar o UI Design do seu e-commerce de nicho e vender mais

Um bom UI Design aumenta as chances de levar o usuário até o fechamento da venda / Autor: rupixen.com / Fonte: Unsplash.com

Eae, tudo bele?

Você conhece a importância do UI Design para seu e-commerce nichado?

Antes de falarmos sobre isso, vale a pena lembrar que UI Design é uma sigla em inglês para User Interface Design, que em português quer dizer Design de Interface do Usuário. 

Na realidade, o conceito basicamente se preocupa em facilitar a navegabilidade do usuário através dos botões – e outros fatores – disponíveis no site. 

Tá curioso para saber mais? Vamos nessa!

Neste artigo você vai aprender:

Importância de um bom UI DesignDicas práticas para melhorar o UI Design no seu e-commerce e vender mais

Importância de um bom UI Design

Um bom projeto de UI Design vai permitir que o usuário navegue facilmente dentro do seu e-commerce. O projeto precisa pensar em botões que sejam intuitivos e conduzam sua audiência para seus produtos. Afinal, o objetivo final é transformar seus visitantes em clientes, não é mesmo?

A importância é bastante simples: um e-commerce organizado tem grande potencial de vender mais. Para isso, ele precisa garantir uma ótima acessibilidade,cuidar da usabilidade, proporcionar uma boa experiência de uso e ser responsivo e eficiente.

Um ponto importante também é ser honesto e evitar usos de más práticas como o uso indiscriminado de dark patterns. 

Dicas práticas para melhorar o UI Design no seu e-commerce e vender mais

Não importa qual seja o seu negócio na vida real, a sua loja virtual precisa alinhar os objetivos de negócios com o os anseios do seus clientes. Para ficar mais fácil, vamos pensar em um exemplo, imagine que você possui um sex shop online, ok? (caso você não saiba, esse mercado é um dos que mais faturam todos os anos em todo o mundo).

O padrão importa: mantenha a consistência.

Diferente da leitura com livro, jornal e revista, na web as pessoas tendem a ler no formato de F. Isso quer dizer que a maioria dos usuários vai passar os olhos primeiramente no sentido horizontal, no topo do site. Depois, um pouco abaixo vai ler em horizontal novamente, sem ir até o fim da tela. Por fim, seguirá no sentido vertical na parte esquerda, formando um F com os olhos. 

Um e-commerce bem diagramado deve colocar o conteúdo mais importante dentro desse padrão. Nunca insira informações essenciais do seu sex shop online fora desse campo de visão. 

Ainda sobre padrão, aposte em um e-commerce organizado por categorias. Esse formato é chamado de breadcrumps. Ele simplifica a navegação, indica ao usuário onde ele está e o leva facilmente para onde deseja ir. Pensando no padrão F, você pode posicionar essas categorias no topo do site para a leitura da primeira linha horizontal. 

Outro ponto super importante é manter a consistência visual do design. Não crie variações desconexas entre uma página e outra. Mantenha uma padrão nos tamanhos dos textos, nas cores, no uso de grafismos e imagens, no posicionamentos, espaçamentos…Deixe o design consistente ao longo de toda a interface.

Diminua os esforços do seu usuário sempre que possível

Você precisa prever as possíveis ações do seu visitante e conduzi-lo para compra da forma mais fácil possível. Se ele está visitando seu e-commerce é porque deseja comprar acessórios eróticos para apimentar sua relação ou quem sabe utilizar sozinho.  

Quanto menos esforço ele precisar fazer, quanto menos botões encontrar em seu caminho e quanto mais curta e clara for a mensagem para chegar ao carrinho, mais chances você tem de vender. 

Imagine que ele tenha o interesse de comprar um vibrador, sendo esse um dos produtos mais vendidos, uma solução simples – mas efetiva – pode ser deixar todos os modelos acessíveis com apenas um clique na página principal do site. Lembra das categorias e do formato F? Você pode criar uma categoria inteira para diferentes vibradores ao alcance da primeira batida de olhos na tela.

Outro botão que merece sua atenção nesse aspecto é a barra de pesquisa. Posicione a ferramenta em um local facilmente visível e use cores que contrastem para chamar atenção. Visitantes que usam a barra de pesquisas são compradores em potencial, facilite o caminho até a compra. 

Crie CTAs atrativos

Call To Action (CTA) ou Chamada Para Ação são botões que convidam o usuário a tomar uma ação, bem como o nome sugere. Eles fazem uma diferença enorme nas taxas de conversão. Aposte em cores chamativas e use palavras imperativas, como “Compre agora com 1 clique”.

Um bom CTA precisa ser atrativo e se destacar dentro do site. Seu cliente pode adorar ver os brinquedos eróticos mais recentes, que tal criar um Call To Action “Veja as novidades mais quentes”?

O carrinho precisa ser alterado facilmente

A página do carrinho precisa ser editada facilmente, sem que para isso, o usuário precise voltar muitas etapas ou ficar abrindo novas abas. 

Pode ser que seu visitante – que está tentando se tornar um cliente – tenha se arrependido do vibrador que escolheu, ou quem sabe queira adicionar mais um do mesmo modelo. Um bom UI Design vai proporcionar alterações facilmente executáveis na página de check out, porém, mais do que isso, essas ações precisam ser intuitivas. 

Outro exemplo prático é permitir que o usuário calcule o frete sem dificuldade. Não há nada mais desestimulador do que tentar concluir a compra e não conseguir saber o preço total incluindo o valor do frete ou quantos dias o seu vibrador levará para chegar na sua casa em poucos cliques. 

Ele não deve perceber a facilidade, e sim não sentir dificuldade em realizar ações que deveriam ser simples. 

Uma página de check out simples tem mais chances de ser concluída com sucesso / Autor: PhotoMIX Company / Fonte: Pexels.com

Seja claro, criativo e amigável na sua linguagem

Para se comunicar com eficiência você precisa entender seu visitante e usar a linguagem que ele utiliza. Se ele está comprando on-line pode ser que tenha vergonha de comprar produtos eróticos. Então imagina receber uma encomenda na portaria do prédio com o selo da sua loja? 

Nesse caso, é importante entender suas necessidades e oferecer discrição e segurança na entrega. E para isso, você precisa comunicar isso de forma clara, amigável e criativa na sua página. Quando você compra em uma loja física nota a qualidade do atendimento. No e-commerce não é diferente. 

O UI Design coloca em prática as ações planejadas para melhor experiência do usuário. 

Considerações Finais.

Desenvolver uma boa interface de e-commerce é um desafio. Existe muito conteúdo e ações para serem pensadas, organizadas e planejadas a fim de encontrar a convergência ideal entre as questões de negócios e os desejos dos usuários.

É óbvio que este artigo não tem a pretensão de ser o manual que explica sobre todos os vários aspectos que compõem um projeto dessa magnitude, mas as dicas expressas aqui com certeza vão ajudar a sua loja virtual a chegar mais perto do patamar ideal.

Se você tiver mais alguma dica ou sugestão, deixe nos comentários a sua opinão.Até mais.Forte abraço.
The post Dicas para melhorar o UI Design do seu e-commerce de nicho e vender mais appeared first on Chief of Design.

Dicas para melhorar o UI Design do seu e-commerce de nicho e vender mais
Fonte: Chef of Design

O que é Product Design? O que faz um Product Designer?

O que é Product Design? O que faz um Product Designer?

Eae, tudo bele?Neste artigo vamos falar sobre o que é, e o que faz um Product Designer. Você provavelmente chegou até aqui, para entender mais sobre Product Design e neste artigo irei te explicar sobre área, e sobre exatamente o que faz um Product Designer e quais são as habilidades necessárias para ser um.

E já te antemão, mais uma informação importante!

Não se trata de uma profissão nova! Apesar ser recente, o uso do termo Product Designer (se você tem uma conta no Linkedin, você deve saber disso), trata-se de uma profissão que já existe desde a Revolução Industrial.

Fique até o final deste artigo para que você consiga entender exatamente tudo o que compreende o trabalho de um Product Designer.

O que é Product Design?Quais são as etapas da criação de um produto?O que faz um Product Designer?Onde estudar Product Design?Quais as habilidades para se tornar um Product Designer?Vídeo – O que faz um Product Designer?

O que é Product Design?

Product Design, em tradução literal, significa Design de Produto. E como talvez você já saiba, design de produto não é algo super, mega novo. Aqui no Brasil era utilizado o termo Design Industrial para se referir a essa área.

E é fundamental entendermos como surgiu um termo, e para isso recorrermos à história. Vale a pena nos atentarmos há alguns aspectos da história do design.

O design, como um todo, teve o inicio a partir da revolução industrial. A criação de produtos que era de forma artesanal passou a ser produzido em série proporcionando que a criação de produtos tivessem processos de produção industriais.

Um dos primeiros registros de um design, e de um Product Designer é de Michael Thonet (1796-1971), grande produtor de móveis e máquinas industriais alemãs dando destaque a sua criação: a máquina de fabricar móveis de madeira curvada, sendo um de seus projetos mais conhecidos a cadeira Bentwood.

Poderíamos citar vários designers ao longo do tempo que trabalhavam como product design mesmo antes da internet. Como nos trabalho do Designer Alemão Dieter Rams, do Designer da Apple Jonthan Ive e do casal de designers Charles e Ray Eames. Sem falar que também encontramos muito sobre design de produto na maior escola de Design que já tivemos: a Bauhaus.

Tudo isso nos mostra que o Product Design já existia antes da era digital. O termo ganhou força, e inclusive sendo usado apenas em inglês, por causa dos produtos digitais que temos nos dias atuais. Então denominou-se, por convenção, utilizar o termo Product Design quando se trata também de produtos digitais.

Quais são as etapas da criação de um produto?

A seguir veremos um exemplo de processo simples de criação de um produto. Essas etapas são comuns, mas isso não significa que precisam ser seguidas a risca ou que todo o projeto necessitam tê-las exatamente da forma como será explicado aqui.

Etapa 1: Entendimento

É de fundamental importância saber o que é a persona, para qual se destina o produto que irá ser desenvolvido. Caso você não saiba o que é uma persona, irei dar uma breve explicação. 

Trata-se de um indivíduo fictício, que representa o seu cliente ideal. A persona tem nome, desejos, dificuldades, dores, planos, sonhos, dúvidas, hobbies e etc. Ou seja, é uma variável muito mais detalhada que o tão conhecido público-alvo. 

Por que um Product Design deve se preocupar com isso? O motivo é simples! Se você busca criar um produto que vá agradar o cliente final, que vai atender as necessidades dessa pessoa, é fundamental partir de uma persona bem feita.

Etapa 2: Ideação

Depois que você já definiu a persona, já conseguiu entender as dores, os planos, os objetivos e todas as demais característica do seu cliente ideal. Chegou a hora de criar o máximo de hipóteses que você puder.

É o momento de idealizar como será o produto que a persona irá receber.

Etapa 3: Definição

Agora que você já fez o seu brainstorming, é necessário escolher as melhores ideias que você teve, para conseguir definir a melhor hipótese para o projeto e assim ter um protótipo, que será usado na próxima etapa.

Etapa 4: Prototipação

Aqui é o momento em que o Product Design crie um protótipo do produto, para testar as hipóteses que você levantadas e escolhidas na etapa anterior. Mas cabe lembrar que não se pode perder muito tempo nessa etapa.

Afinal de contas é um protótipo e não o produto final.

Etapa 5: Validação

Quinta e última etapa! Agora é hora de pegar seu protótipo e validar. Lembra do trabalho realizado na primeira etapa? Então, agora é o momento de pegar sua persona e buscar pessoas que se enquadrem nela. 

Essas pessoas irão testar o produto de forma a validar todo o projeto. Cabe observar que se a primeira etapa não foi executada com maestria, inevitavelmente a etapa de validação será um fracasso.

O que faz um Product Designer?.

O Designer de produto nada mais é do que a pessoa que concebe a criação de um produto, seja ele físico ou digital, participando de todo o processo.

Ele (o Product Designer ou Designer de Produto) tem como função criar um produto ou resolver um problema, utilizando uma abordagem, e se engajando nessa construção desde o início. Os passos utilizados são muito semelhantes aos citados em Design Thinking (Entendimento, Definição, Ideação, Prototipação e Teste).

O Product Designer não necessariamente vai trabalhar com pixels, diretamente com softwares gráficos. Ele é uma espécie de gestor das etapas fundamentais na criação de um produto.

Basicamente o Designer de Produto trabalha de forma mais generalista, preocupado com as etapas da criação de um produto. É necessário que cada uma dessas etapas seja executada de forma excelente, para o final do processo seja positivo.

Imagine que um Designer de Produto seja como um maestro de uma orquestra. Não será que tocará os instrumentos do concerto, mas ele sabe como cada um funciona e dirige para quais melodias onde eles devem ir, como eles devem soar. Um Product Designer funciona mais ou menos assim.

Claro que em muitos caso, principalmente em projetos menores, um Product Designer pode fazer todo o processo, desde a ideação até a parte prática, porém dificilmente, principalmente em projetos digitais, ele estará sozinho, pois estará dentro de um equipe, comumente, multidisciplinar que ajudará no processo de concepção do projeto.

Portanto, um designer especializado nessa área deve ter uma visão holística de todo o processo de criação, desde a criação até questões como custos de manutenção, operação, industrialização, desenvolvimento e entrega. Ele também precisa saber ouvir e acolher os feedbacks que os usuários podem dar sobre o produto.

É válido ressaltar, mais uma vez, que grande parte dos produtos advindos desse ramo do design, atualmente, são em sua maioria digitais. Dessa forma, há uma diferenciação entre o design de produtos e as demais áreas como UX e UI Design. Essa diferença está justamente em acompanhar todo o projeto, do início ao fim, e o produto final em si, já que ambas as áreas possuem habilidades parecidas.

Onde estudar Product Design?

Infelizmente, atualmente não existe uma faculdade específica para se tornar um Product Designer, no que se refere a produtos digitais.

Antigamente as universidades voltadas para o design, o curso se denominava Desenho (Design) Industrial, que era específica para produtos físicos e industriais.Também encontramos faculdades de Design onde eram cursadas disciplinas comuns nos 3 primeiros anos, e em seguida, o estudante deveria optar por design gráfico ou design de produtos físicos.

Hoje, existe a faculdade de Design, mas ela não busca profissionalizar alguém para a área específica de Product Design. Por isso, muitos dos designers de produtos conhecidos migraram de outras áreas, como UX e UI.

Portanto fazer uma faculdade de Design vai te ajudar se capacitar, assim como fazer outros cursos, porém você vai precisar continuar prosseguindo com os estudos e especializar em Product Design.

Quais as habilidades para se tornar um Product Designer?

Como vimos, o designer de produtos é alguém que transita por outras áreas do design, então ele trabalha desde a criação de produtos até a pesquisa com usuários e análise de dados.

Além da formação, um bom designer de produtos dever ter as seguintes habilidades:

Visão holística sobre um projeto de design;Visão macro sobre fatores internos e externos;Conhecimentos gerais em design e processo de design;Alinhamento e estratégia de negócios;Design de serviço;IA (Arquitetura da informação).UI Design (Design de Interface)IxD Design (Design de Interação)UX, ou seja, entendimento do público, sabendo o que usuário necessita e deseja.Design visual.

Vale ressaltar que ele não precisa ser especialista em todas elas, mas deve sim ter conhecimento para saber gerenciar as pessoas dessas áreas (como citado no exemplo do maestro).

Portanto, esse profissional deve saber liderar grupos, administrar bem o tempo, os recursos e as atividades, e conseguir ter uma boa interação com pessoas.

Não basta o Product Designer dominar questões técnicas específicas de sua formação. É necessário que ele desenvolva competências acessórias, ou seja, habilidades extras que serão cruciais no processo de criação e inovação de um projeto.

Abaixo vou explicar as principais competências para atuar na área de Product Design, mas que talvez você nem imaginava:

Liderança

O Product Designer precisa ser um líder, ainda que não esteja formalmente como líder de uma equipe. Uma das características desse profissional é conseguir com que as pessoas façam o que for necessário para o alcance de um objetivo.

Ou seja, para que uma equipe consiga trabalhar junto em um projeto é importante que todos entendam a importância desse projeto e isso o líder consegue fazer, através do uso da empatia.  

Gestão de processos

Se o Product Designer não consegue gerir o processo de criação e inovação de um produto, ele corre o grande risco de não ter sucesso em seus projetos. Uma vez que cada etapa é essencial. 

Alinhamento e estratégia de negócios

Todo produto que é gerado precisa satisfazer o cliente e também as questões de negócios da empresa. Por isso, o Designer de produto precisa estar alinhado com as estratégias da empresa para que ele possa criar algo útil para os usuários, mas também algo que venda, algo que gere algum bem, seja ela financeira ou não, para a empresa.

Inovação e criatividade

Pode parecer algo básico, mas é importante reforçar que um Product Designer trabalha com inovação e por isso ele necessita utilizar da criatividade para propor novas soluções e criar novos produtos.

Vale ressaltar, que inovação não está ligado necessariamente a criação de novos produtos, ou seja, inovar é tornar uma ideia possível e essa ideia pode ser uma melhoria, uma atualização, uma nova visão sobre algo que já existe.

Trata-se de tirar do campo das ideias algo útil e que vai solucionar o problema, seja com a criação de algo novo ou com uma proposta de alguma melhoria, por exemplo.. É isso que um Product Design precisa ser, pois não adianta pensar numa ideia, é preciso torná-la possível.

Vídeo – O que é O que é Product Designer?  

Para complementar e acrescentar mais informações a todo o conteúdo apresentado aqui, eu deixo um vídeo que gravei para falar especificamente sobre o que é e o que faz um Product Designer. Assista abaixo o vídeo para aprender mais.

Considerações finais

A profissão de Product Designer ou Designer de Produto, se pensarmos um pouco e analisando tudo o que foi dito aqui, não é algo novíssimo como às vezes se coloca, talvez apenas o termo estrangeiro que passou a ser mais usado por nós brasileiros.

E por mais que tenhamos agora produtos digitais, que esses sim é um fato mais recente em nossa história, basta olhar para trás e ver que possuímos diversos produtos que foram criados por designers de produtos, tais como câmeras, cadeiras, micro-ondas e mais uma infinidade de objetos que utilizamos no dia a dia.

Por isso, se você quer ser Product Designer, estude um pouco sobre história e tudo que cerca, mesmo antes da era digital, essa ofício. Para ser um profissional de Design de Produto é preciso não se fechar em apenas uma única área do design ou do conhecimento. Além de dominar a sua área, também entender de outras áreas e assuntos, porque um Designer de Produtos é um profissional multidisciplinar e disso não tem como escapar.

E você já atua ou pretender ser um Prodcut Designer?

Aproveite o espaço abaixo para deixar o seu comentário.

Até mais.

Forte abraço.

Referências

UILAB. Product designer: quem é e o que faz? Disponível em: https://medium.com/ui-lab-school/product-designer-quem-%C3%A9-e-o-que-faz-64be9cd88358. Acesso em: 7 abr. 2020.

O que é Product Designer?  https://www.youtube.com/watch?v=ZUuiGwre0N0
The post O que é Product Design? O que faz um Product Designer? appeared first on Chief of Design.

O que é Product Design? O que faz um Product Designer?
Fonte: Chef of Design

O que é Design System?

O que é Design System?

Eae, tudo bele?Neste artigo você vai aprender o que é e a importância do Design System em um projeto de design que visa manter a consistência visual e de interação de uma organização.

O termo Design System vem ganhando cada vez mais notoriedade, principalmente graças aos produtos digitais que vem sendo criados nesse cenário tecnológico que vivemos.

Antes de começar, quero salientar que este artigo não tem a pretensão de definir ou determinar todos os aspectos de um Design System, já que se trata de um complexo trabalho de design e que pode sim ter variações e abordagens diferentes dependendo da forma de pensar e de criá-lo.

A ideia aqui é te apresentar para que você aprenda sobre o que é, para que depois você mesmo possa continuar estudando, fazer seus experimentos e testar as suas decisões de design, ok?

Portanto, neste artigo você aprenderá sobre:

O que é Design System.Como surgiu o Design System Quando construir um Design SystemO Design System e Atomic DesignA diferença entre Design System e Style GuideOs elementos que compõem um Design System

O que é um Design System?

Design System – ou sistema de design – trata-se de um conjunto de padrões de componentes de design elaborados a fim de manter a consistência visual e funcional de um certo produto, sistema ou organização.

Um exemplo clássico para se explicar o Design System é pensar em peças do brinque Lego.

Seguindo essa analogia, imagina esse sistema de design, como um conjunto de pecinhas padronizadas, que seguem a mesma consistência de design. Cada pecinha poderia ser considerada um componente.

Mas não para por aí. As peças de lego (ou componentes) já estão predefinidas, você precisa apenas selecionar as que você precisa e montá-las dentro de um padrão. Esses componentes podem se relacionar, se juntando e criando a partir disso novos componentes. E esses novos componentes por sua vez poderiam se juntar com outros e assim por diante.

Outro exemplo que temos, e que lidamos no dia a dia, são alguns softwares, como o Microsoft Office e o Creative Cloud Adobe. Essas famílias de programas seguem uma linha visual e todos estão dentro de uma consistência de visual e funcional, por exemplo, desde o visual até atalhos pré-definidos por seus criadores .

Independente de quando você adquiriu o programa ou de que país seja ou de que língua você fale, esses padrões serão os mesmo para cada ferramenta. Isso facilita bastante a vida de quem vai utilizar esses programas, pois possibilita a uma coerência de uso e estética.

Com isso essa famílias formam um padrão que facilita a execução de tarefas, além de tornar o sistema atrativo e organizado visualmente.

Uma frase muito famosa dita por Nathan Curtis sobre o assunto é que “o Design System é um produto servindo outros produtos”.

Portanto o Design System é um projeto de design que abastece outros projetos visando sempre manter a consistência de design e proporcionando mais rapidez para as equipes de design e de tecnologia criarem os projetos ou protótipos. O Design System é um documento de extrema importância para empresas que querem uma maior integração de suas ideias no desenvolvimento de produtos.

Como surgiu o Design System?

Não se tem uma definição fechada do que seja o Design System, porém sabe-se que não se trata de um conceito tão inovador como se vende. Ao longo da história encontramos projetos de sistemas de design.

Se você procurar sobre a escola alemã “Bahaus”, se estudar os manuais de marca de projetos do grande Designer Gráfico brasileiro Alexandre Wollner, se olhar o projeto para as olimpíadas de Munich de 1972, Otl Aicher , ou analisar o projeto de design do metrô de Nova York…Entre tantos outros exemplos que temos por aí… Você encontrará Design System, ou seja, algo que foi planejado de forma pragmática, calculada afim de manter uma consistência visual.

A demanda por produtos bem construídos, marcas consolidadas e design cada vez mais inovadores fez com que os grandes designers buscassem automatizar o máximo possível sem perder a consistência de design em grandes projetos.

E nos dias atuais, com o avanço da tecnologia, e o advento de produtos digitais, o ramo tecnológico precisou se adaptar e começou a utilizar cada vez mais o Design System.

O Design System e Atomic Design

O Design System conversa muito com outra abordagem de design que é conhecido como Atomic Design (design atômico). O Atomic Design, como o próprio nome já nos indica, utiliza de uma analogia entre elementos e componentes de um projeto de design com o comportamento dos átomos, moléculas e organismos.

Portanto, assim como vimos no exemplo do brinquedo lego, aqui lidamos com os componentes de forma crescente, saindo do menor para o maior. Portanto temos dentro dessa ordem os átomos, moléculas, organismos, templates e páginas (como visto na imagem dentro deste tópico).

Átomos: aqui podemos incluir ícones, botões, cores, imagens, tipografia etc.Moléculas: aqui seria o resultado da interação dos itens pertencentes a categoria átomos. Então poderíamos citar como exemplo uma sidebar, um card, uma barra de menu.Organismos: aqui se enquadra os resultados da interação das moléculas, como exemplo podemos citar um header de um site, que contém um menu e outros ícones.Templates: aqui seria o resultado da interação de todos os componentes citados anteriormente, montando um produto modelo que pode ser utilizado por qualquer pessoa, sofrendo alguns ajustes.Páginas: já essa etapa seria mais próximo do produto pronto final, sendo o mais completo do que um template

Essa forma de lidar com os elementos do design, dentro de um projeto, trata-se de uma metodologia estruturada, racional e lógica de dar função e forma ao projetos, com base conceitual e de forma relativamente simples de entender.

O pensamento do Atomic Design encaixa bem com o que se propõe quando estamos criando um Design System. Por isso, um bom caminho para iniciar um sistema de design é justamente começar estudando sobre design atômico.

Quando construir um Design System?

Imagine que uma empresa sempre está modificando seus times, seja demitindo ou contratando novas pessoas. Imagine também que sempre que novas pessoas aparecem, também surgem novas ideias e palpites acerca de um projeto.

Muita das vezes essas ideias que surgem, já foram discutidas e definidas; mas com a correria da rotina e a falta de um documento contendo essas informações, um membro do time de design – por exemplo – irá gastar mais tempo testando novas ideias, que talvez nem tenha coerência com o projeto. Para evitar situações como essas, é necessário ter um bom Sistema de Design.

Outro ponto que já citamos aqui no artigo é para manter uma consistência e coerência de design, seja visual, funcional e até mesmo de padrões de códigos. A ideia é manter um organismo homogêneo, mesmo ele sendo composto por elementos diferentes.

Portanto a construção do Design System é ideal para projetos maiores, onde existem vários produtos ou pontos de contato com a marca e é preciso evitar uma incoerência visual. Também quando envolvem várias profissionais e é preciso criar uma padronização para ser seguida pela equipe.

Por demandar mais tempo e estudo, para projetos menores é mais provável que um Style Guide (guia de estilo) já seja o suficiente.

A diferença entre Design System e Style Guide

Ao estudar o design, nos deparamos com o Style Guide, que é facilmente confundido com o Design System. Na prática, o Style Guide também compõe com informações dentro do Design System.

O Style Guide ou Guia de estilo é um sistema de organização menor e mais restrito para a parte visual que o Design System. Isso porque ele é responsável por criar um estilo de trabalho de um produto, permitindo que apenas os designers e criadores entendam o que está acontecendo.

É como se o Style Guide fosse uma fatia e o Design System uma pizzainteira. O Sistema de Design é um apanhado de informações de várias áreas do design, como o Motion, UI e até códigos de programação.

A ideia é que o Design System seja um documento que garanta uma melhor consistência nos projetos, produtos e que dialogue com todas as áreas envolvidas, não somente a identidade visual ou com características visuais.

Os elementos que compõem um Design System

Como dito anteriormente, o sistema de design é como se fosse uma pizza e cada fatia é um setor que agrega informações. Sendo assim, é essencial que o Design System possua:

Objetivos e valores

Antes de pensar em grid, tipografia e cores precisamos pensar nos objetivos e valores da empresa. Esses fundamentos guiarão todas as escolhas feitas, evitando projetos sem coesão com os princípios da instituição.

Guia de Estilo

Aqui os designers irão pensar na identidade visual, seguindo os objetivos e valores. Um guia de estilo é fundamental para definir os princípios de design, identidade da marca, cores, tipografia, etc. Esse é o momento de definir diretrizes, para que todos os designers envolvidos usem as combinações estabelecidas.

Em um primeiro momento, isso pode soar como se precisasse seguir rigidamente regras determinadas e deixar de fora a criatividade dos designers. Pode ter certeza que a criatividade não ficará de fora.

Na verdade quando esses elementos visuais são definidos, a criatividade será utilizada para definir combinações e como será usado as cores, ilustrações, ícones, tipografias, animações – por exemplo – criando, assim, uma identidade visual coesa.

Biblioteca de componentes e padrões

Após ter estabelecido a identidade visual, é hora de definir como será construído esse projeto e, nesse momento, uma biblioteca de componentes e padrões podem ajudar.

Na prática, uma biblioteca de componentes e padrões são elementos que serão utilizados no desenvolvimento de um produto. Imagine que você precise de um componente para criar um site, por exemplo, e lembra especificamente de um que utilizou em projetos anteriores. Até você procurar os projetos que ele foi utilizado, observar como ele se comporta, custaria um tempo precioso dentro do seu prazo.

Para aumentar sua produtividade, uma boa solução é ter em mãos todos oscomponentes e padrões que serão utilizados na construção do seu produto. Para criar essa biblioteca podem entrar desenvolvedores e UI Designers.

Os componentes e padrões são essenciais na construção do sistema e em como ele irá funcionar. Ui/Web kit: esses seriam um kit desses componentes citados acima, interligados, formando um template construídos com base nos componentes do sistema.

Portanto, estamos falando sobre UI kit, que seria um kit de componentes de UI Design citados acima, e também estamos falando sobre os estados dos componentes que aqui é relativo ao estado dos componentes citados, se estão ativos, se são o padrão, se estão inativos, dentre outros.

Ao criar uma biblioteca com esses elementos, você irá garantir uma experiênciaconsistente no seu produto. Não acaba por aqui, você pode adicionar mais informações que achar necessário.

Isto é somente um pontapé inicial, ajudando a condensar todas as ideias, princípios e valores da empresa em todos os seus produtos.

Códigos

Dependendo do projeto podemos incluir padrões de códigos, como nome de classes, ids, indentação, formatação e organização. Um projeto de um sistema de design pode lidar com a integração entre design e a parte de desenvolvimento front-end.

É super importante, quando há a necessidade, que a integração entre as áreas para que o Design System funcione como o esperado. Apesar do nome (Design System) poder lembrar em um primeiro momento apenas a questão visual, design não se trata apenas disso e questão funcional também é importante.

Você pode conferir alguns exemplos de Design System disponíveis na internet no site Adele UX Pin.

Vídeo – O que é Design System

Para complementar esse artigo eu gravei um vídeo para explicar de forma mais didática e também para complementar o que foi dito neste artigo. Então, confira o vídeo abaixo e complemente os seus estudos sobre Design System.

Considerações Finais

Percebemos que o Design System é uma forma de
organização para grandes empresas que não é novidade. Novidade mesmo é sua
forma de uso na atualidade, aplicada a produtos digitais.

O uso desse sistema traz inúmeros benefícios para o produto, bem como para a equipe engajada no projeto, permitindo que todos contribuam para o produto final, mesmo tendo visões e profissões diversas, mantendo a consistência do projeto.

Por isso, o Design System possui inúmeros benefícios, tais como dinamicidade, fácil atualização, redução de custos e de tempo de trabalho, otimização de tarefas e da força de trabalho, dentre outros.

Você já criou o particiou de um projeto de design ssytem? Qual a sua opinião sobre o assunto? Você pode deixar aqui nos comentários a sua dúvida ou relato sobre.

Até mais.

Forte abraço.

Fontes:

Diego Prado – Design Systems: organização e escalabilidade para design e desenvolvimento: https://medium.com/trinca137/design-systems-organiza%C3%A7%C3%A3o-e-escalabilidade-para-design-e-desenvolvimento-6a0a4d8780b

Ux Collective Br – Entendendo Design Systems : https://brasil.uxdesign.cc/entendendo-design-system-f375bbb6f704
The post O que é Design System? appeared first on Chief of Design.

O que é Design System?
Fonte: Chef of Design