{"id":13196,"date":"2018-05-09T10:23:32","date_gmt":"2018-05-09T13:23:32","guid":{"rendered":"http:\/\/www.impacta.com.br\/blog\/?p=13196"},"modified":"2018-05-09T10:23:32","modified_gmt":"2018-05-09T13:23:32","slug":"guia-melhores-recursos-para-web-design","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/guia-melhores-recursos-para-web-design\/","title":{"rendered":"Um Guia com os melhores recursos para Web Design"},"content":{"rendered":"

N\u00e3o \u00e9 nenhum segredo que o mundo do web design<\/a> est\u00e1 cheio de artigos de opini\u00e3o, ferramentas e blogs, mas peneirar todo o conte\u00fado em busca das melhores dicas e recursos pode ser uma tarefa bastante desagrad\u00e1vel.<\/span>
\n\u00c9 por isso que criamos uma lista com os melhores recursos de web design, para que voc\u00ea n\u00e3o perca tempo buscando e sim\u00a0estudando.\u00a0Apresentamos de forma objetiva um material completo para te ajudar na cria\u00e7\u00e3o de sites<\/a>.\u00a0<\/span>
\nComo uma marca pode ser refor\u00e7ada atrav\u00e9s de cores e fontes? Como o v\u00eddeo deve ser usado em um site? Como posso me juntar ao mundo moderno e criar sites responsivos? Toda a informa\u00e7\u00e3o que voc\u00ea precisa est\u00e1 bem aqui.<\/span>
\nDivirta-se!<\/span><\/p>\n

O Guia com os melhores recursos para Web Design de 2018<\/span><\/strong><\/h2>\n

Como escolher fontes para retratar e refor\u00e7ar sua marca<\/strong><\/span><\/h3>\n

Fontes podem realmente fazer a diferen\u00e7a no design do seu site, deixando ele incr\u00edvel ou totalmente assustador. Uma \u00f3tima fonte \u00e9 uma oportunidade para refor\u00e7ar uma marca e at\u00e9 mesmo influenciar a experi\u00eancia do usu\u00e1rio de um site. \u00c9 por isso que elas precisam ser escolhidos com sabedoria.<\/span>
\nNo entanto, a fonte em si \u00e9 apenas metade da batalha. Na verdade, o importante \u00e9 a maneira que voc\u00ea usa a(s) fonte(s). Usar v\u00e1rias fontes que funcionam bem juntas em um site pode ser uma maneira fant\u00e1stica de refor\u00e7ar a consist\u00eancia, a identidade e uma est\u00e9tica atraente.<\/span>
\nEstes s\u00e3o os melhores recursos para ajud\u00e1-lo com tudo, desde a escolha de fontes at\u00e9 a forma como voc\u00ea pode aplic\u00e1-las com sucesso em um site.<\/span>
\nRECURSOS<\/strong><\/span>
\n\u00bbAs fontes do Google fornecem milhares de op\u00e7\u00f5es e facilitam o teste da sua copywriting para ver qual \u00e9 a melhor correspond\u00eancia.<\/a><\/span>
\n\u00bbSentindo-se sobrecarregado com op\u00e7\u00f5es? Aqui est\u00e1 uma cole\u00e7\u00e3o com curadoria das 40 melhores fontes do Google.<\/a><\/span>
\n\u00bbAntes de escolher uma fonte, leia estas dicas \u00fateis sobre como tomar uma decis\u00e3o de fonte informada.<\/span><\/a>
\n <\/p>\n

\u00bbSe escolher um par de fontes parecer intimidador, aqui est\u00e3o 7 ferramentas gratuitas para facilitar sua decis\u00e3o.<\/a><\/span><\/p>\n

Como escolher e usar as cores<\/strong><\/span><\/h3>\n

Semelhante \u00e0s fontes, as cores t\u00eam um enorme impacto sobre o design de um site ou projeto web. H\u00e1 muito mais em rela\u00e7\u00e3o \u00e0s cores do que apenas escolher e combinar\u00a0tons para compor o design do seu site.<\/span>
\nAs cores podem estar ligadas \u00e0s emo\u00e7\u00f5es e \u00e0s decis\u00f5es de compra. Combina\u00e7\u00f5es tamb\u00e9m podem dar uma apar\u00eancia \u00fanica, uma identidade, consolidando e fazendo com que a sua marca seja lembrada e associada a diversas coisas.<\/span>
\nAbaixo voc\u00ea poder\u00e1 conferir uma lista com os melhores recursos para estudar e encontrar uma paleta de cores que atenda aos objetivos do seu projeto.<\/span>
\nRECURSOS<\/strong><\/span>
\n\u00bbO Color CC da Adobe permite que voc\u00ea insira uma cor principal e\u00a0para gerar\u00a0op\u00e7\u00f5es fant\u00e1sticas de paleta de cores prontas para usar.<\/a><\/span>
\n\u00bbProcurando uma nova paleta de cores? Use esta ferramenta e aperte a barra de espa\u00e7o para randomizar algumas op\u00e7\u00f5es. Voc\u00ea tamb\u00e9m pode inserir as cores da sua pr\u00f3pria marca!<\/a><\/span>
\n\u00bbEscolha suas duas cores favoritas que essa ferramenta gera paletas de cores.<\/a><\/span>
\n\u00bbN\u00e3o sabe por onde come\u00e7ar? Esta \u00e9 a maneira mais f\u00e1cil (e divertida!) de gerar uma paleta de cores.<\/a><\/span><\/p>\n

\u00bbUse o wiki de design do Canva para aprender tudo sobre os significados por tr\u00e1s das cores e descobrir \u00f3timas combina\u00e7\u00f5es<\/a><\/span><\/p>\n

Funciona para todos: como o design responsivo ret\u00e9m os usu\u00e1rios em seu site<\/strong><\/span><\/h3>\n

Web design responsivo <\/a>n\u00e3o \u00e9 apenas importante, \u00e9 totalmente necess\u00e1rio nos dias de hoje. Um site que n\u00e3o forne\u00e7a a mesma qualidade de experi\u00eancia do usu\u00e1rio<\/a> em todos os dispositivos, certamente ir\u00e1 frustrar boa parte dos visitantes. Muitos dizem que \u00e9 melhor voc\u00ea n\u00e3o ter um site no ar do que ter um site que n\u00e3o seja responsivo, isto \u00e9, que n\u00e3o se adapte \u00e0 smartphones e tablets.<\/span><\/p>\n

Aqui voc\u00ea encontrar\u00e1 alguns recursos que definem o design responsivo e explicam porque \u00e9 crucial a cria\u00e7\u00e3o de sites responsivos.<\/span>
\n\u00bbUma descri\u00e7\u00e3o de alto n\u00edvel de web design responsivo e a teoria por tr\u00e1s dele (Wikipedia<\/a>).<\/span>
\n\u00bbUma explica\u00e7\u00e3o t\u00e9cnica do Google sobre o design responsivo da web e como ele funciona.<\/a><\/span>
\n\u00bbUm cliente est\u00e1 pedindo para voc\u00ea criar um aplicativo? Veja porque um site responsivo \u00e9 o que eles realmente precisam.<\/a><\/span>
\nDesenvolvimento Mobile: como se adequar para ficar responsivo<\/a><\/span><\/p>\n

\u00bbUma lista de estat\u00edsticas que demonstram a import\u00e2ncia do design da Web responsivo.<\/a><\/span><\/p>\n

Como escrever uma copywriting da web<\/strong><\/span><\/h3>\n

Se voc\u00ea est\u00e1 mergulhando no mundo do Web Design, pode ficar tentado a ignorar a import\u00e2ncia do copywriting. N\u00e3o fazer uma boa copy pode fazer com que o seu site bonito seja totalmente ineficaz. Ele pode ser usado para dar vida a uma marca, fornecer clareza sobre um produto, ofertar um servi\u00e7o ou demonstrar evid\u00eancias de casos de sucesso. <\/span>
\nAh, e se voc\u00ea quiser que seu site fique bem posicionado no Google, voc\u00ea definitivamente precisa planejar uma boa copy para seu site.<\/span>
\nCom isso em mente, sua abordagem para copywriting n\u00e3o pode ser tratada como algo trivial. Assim como o design e a experi\u00eancia do usu\u00e1rio, as estrat\u00e9gias de copywriting devem ser estrat\u00e9gicas e baseadas em dados<\/a> e comportamentos. As ferramentas abaixo fornecer\u00e3o tudo o que voc\u00ea precisa saber para come\u00e7ar.<\/span>
\nRECURSOS<\/strong><\/span>
\n\u00bb20 dicas\u00a0para aprender os conceitos b\u00e1sicos de copywriting.<\/a><\/span>
\n\u00bb\u00d3timos exemplos de copywritings versus copywritings ruins.<\/a><\/span>
\n\u00bbMais alguns exemplos de boas copywritings com explica\u00e7\u00f5es de porque elas funcionam.<\/a><\/span><\/p>\n

\u00bbQuer que seu site apare\u00e7a no Google? Confira esta lista de dicas de SEO para fazer textos incr\u00edveis<\/a><\/span><\/p>\n

Como aumentar o envolvimento usando v\u00eddeos<\/strong><\/span><\/h3>\n

Os v\u00eddeos t\u00eam a capacidade exclusiva de adicionar uma nova dimens\u00e3o a um website. As pessoas reagem mais favoravelmente ao conte\u00fado de v\u00eddeo do que ao conte\u00fado escrito,\u00a0est\u00e3o lendo menos textos e assistindo mais v\u00eddeos e conte\u00fados interativos. Al\u00e9m disso, \u00e9 muito importante variar o tipo de m\u00eddia para que voc\u00ea consiga cercar todo tipo de usu\u00e1rio, os que preferem ler e os que preferem ver\/ouvir.<\/span>
\nEm sites que t\u00eam conte\u00fado em v\u00eddeo, \u00e9 importante pensar primeiro sobre o objetivo do v\u00eddeo antes de lan\u00e7\u00e1-lo. Por melhores que sejam, eles devem ter um prop\u00f3sito.<\/span>
\nSaiba\u00a0como usar v\u00eddeos nos sites\u00a0com os recursos abaixo:<\/span>
\nRECURSOS<\/strong><\/span>
\n\u00bbAqui est\u00e1 o essencial para criar um v\u00eddeo explicativo.<\/a><\/span>
\n\u00bbPrecisa de alguma inspira\u00e7\u00e3o? Aqui est\u00e3o alguns sites incr\u00edveis que incorporam v\u00eddeos.<\/a><\/span>
\n\u00bb27 estat\u00edsticas que comprovam a efic\u00e1cia do v\u00eddeo.<\/a><\/span>
\n\u00bbEstat\u00edsticas mais convincentes sobre as vantagens do v\u00eddeo.<\/a><\/span>
\n\u00bbCurioso sobre fundos de v\u00eddeo? Aqui est\u00e1 tudo que voc\u00ea precisa saber.<\/a><\/span><\/p>\n

Como obter mais leads com CTAs bem posicionados<\/strong><\/span><\/h3>\n

Um CTA ou Call to Action \u00e9 uma ferramenta que deve estar presente em todos os sites. \u00c9 essencialmente a parte do site em que voc\u00ea precisa convencer as pessoas a fazer uma determinada a\u00e7\u00e3o.<\/span>
\nAqui est\u00e1 um \u00f3timo material sobre o que \u00e9 uma chamada para a\u00e7\u00e3o e como criar uma. A lista tamb\u00e9m inclui uma grande pesquisa sobre o que tende a funcionar e o que n\u00e3o.<\/span>
\nRECURSOS<\/strong><\/span>
\n\u00bb<\/a>Call to Action: tudo o que voc\u00ea precisa saber<\/a><\/span>
\n\u00bbDicas e t\u00e9cnicas para criar um call to action eficaz.<\/a><\/span>
\n\u00bb15 exemplos fenomenais de grandes CTAs.<\/a><\/span>
\n\u00bbOnde a pesquisa diz que as CTAs do seu website devem ser colocadas.<\/a><\/span>
\n\u00bb13 hacks de CTA f\u00e1ceis e acion\u00e1veis.<\/a><\/span><\/p>\n

Inspira\u00e7\u00e3o para um Web Design Profissional (a parte divertida)<\/strong><\/span><\/h3>\n

Para ter sucesso no desenvolvimento de sites ou aplicativos, ter refer\u00eancias para se inspirar \u00e9 fundamental. Afinal, maneira mais f\u00e1cil de superar o bloqueio criativo \u00e9 encontrar inspira\u00e7\u00e3o. Muitas vezes voc\u00ea est\u00e1 travado em uma determinada parte do seu projeto e tudo que precisa \u00e9 ver outros projetos j\u00e1 conclu\u00eddos para abrir sua mente e te dar ideias inovadoras. Lembre-se, pegar refer\u00eancias n\u00e3o \u00e9 c\u00f3pia, \u00e9 inspira\u00e7\u00e3o.<\/span>
\nAqui est\u00e1 uma lista muito bacana para voc\u00ea buscar inspira\u00e7\u00e3o para criar seus sites e projetos de Web Design.<\/span>
\nRECURSOS<\/strong><\/span>
\n\u00bb<\/a> Awwwards<\/a><\/span>
\n\u00bb Behance<\/a><\/span>
\n\u00bb Dribbble<\/a><\/span>
\n\u00bb Inspira\u00e7\u00e3o de Web Design<\/a><\/span>
\n\u00bb Site Inspire<\/a><\/span>
\n\u00bb Melhor Galeria de Sites<\/a><\/span>
\n\u00bb Webflow Showcase<\/a><\/span><\/p>\n

Considera\u00e7\u00f5es Finais<\/strong><\/span><\/h4>\n

Web Design responsivo n\u00e3o \u00e9 mais uma op\u00e7\u00e3o, \u00e9 uma necessidade!<\/span>
\nPelo fato do acesso \u00e0 internet atrav\u00e9s de dispositivos m\u00f3veis ser superior ao Desktop<\/a> (em muitos casos) \u00e9 essencial caprichar na responsividade. Estamos conectados a todo momento e o imediatismo \u00e9 a palavra de ordem da vez.<\/span>
\nPense assim, um site que n\u00e3o \u00e9 otimizado para mobile provavelmente demorar\u00e1 mais para carregar no celular, visto que grande parte\u00a0do p\u00fablico est\u00e1 em uma conex\u00e3o limitada 3G ou 4G. Isso possivelmente aumentar\u00e1 suas taxas de bounce rate de modo que seus visitantes abandonar\u00e3o seu site mais rapidamente (ou talvez nem esperem carregar inteiro).<\/span>
\nPor isso, quem trabalha com cria\u00e7\u00e3o de sites e desenvolvimento web n\u00e3o deve somente pensar se o layout vai \u201cencaixar\u201d nos dispositivos m\u00f3veis e sim em como podemos contribuir para a experi\u00eancia do usu\u00e1rio e fazer com que ele queira ficar o maior tempo poss\u00edvel no site.<\/span>
\nE lembre-se<\/strong>: de nada adianta ter um site totalmente responsivo e esteticamente agrad\u00e1vel, se o seu conte\u00fado n\u00e3o for envolvente e de qualidade. Al\u00e9m disso, \u00e9 muito importante que voc\u00ea tamb\u00e9m apresente suas ideias com diferentes formatos de m\u00eddia (texto, imagem, v\u00eddeo e \u00e1udio).<\/span>
\n Porque ao inv\u00e9s de escrever um artigo voc\u00ea n\u00e3o grava um entrevista em v\u00eddeo ou em \u00e1udio? Porque ao inv\u00e9s de fazer um v\u00eddeo, voc\u00ea n\u00e3o posta um infogr\u00e1fico? Esse tipo de varia\u00e7\u00e3o al\u00e9m de ser ben\u00e9fico para SEO, tamb\u00e9m \u00e9 uma \u00f3tima forma de conquistar os mais diferentes tipos de usu\u00e1rios.<\/span>
\nPor fim, n\u00e3o esque\u00e7a de usar bot\u00f5es call to action de maneira inteligente. Um artigo, v\u00eddeo ou infogr\u00e1fico que n\u00e3o possui nenhum call to action n\u00e3o ser\u00e1 eficiente em termos de neg\u00f3cios. \u00c9 essencial que voc\u00ea mostre ao usu\u00e1rio qual a\u00e7\u00e3o ele pode tomar ap\u00f3s consumir seu conte\u00fado. Um call to action tamb\u00e9m pode ser para linkar um artigo do seu site com outros conte\u00fados seus, fazendo um link building interno importante para melhorar performance de SEO, por exemplo.<\/span>
\nAcredito que ap\u00f3s esse breve manual, voc\u00ea j\u00e1 consiga separar muitos links importantes para ser um webdesigner mais completo. Continue sempre estudando e se atualizando e caso tenha alguma d\u00favida deixe seu coment\u00e1rio abaixo, leia outros artigos do Blog da Impacta e inscreva-se em nossos cursos presenciais ou online<\/a>!<\/span>
\n\u201cEste \u00e9 um post escrito por nosso convidado Caio Nogueira<\/a>, ex-aluno Impacta, co-fundador e desenvolvedor de sites WordPress na empresa UpSites Digital. Apaixonado por novas tecnologias e pelo desafio de criar solu\u00e7\u00f5es na internet que sejam interativas e amig\u00e1veis, Caio tamb\u00e9m gosta de escrever no tempo livre e tocar viol\u00e3o.\u201d<\/em><\/span><\/p>\n

<\/i>Love<\/span>0<\/span><\/span><\/a> <\/i> <\/i>