Conheça melhor o Google Web Designer e descubra como você pode aproveitá-lo para desenvolver projetos em HTML5 de forma prática e rápida
Se você trabalha com web já deve estar cansado de ouvir e ler sobre HTML5. A linguagem de marcação é a forma mais utilizada por programadores para desenvolver projetos de web design há anos. Por isso, um dos maiores players do universo da informática, o Google, resolveu investir em uma ferramenta que possibilitasse a criação de banners, sites e animações neste formato. A HTML5 nada mais é que a linguagem HTML mais robusta, pois conta com a ajuda do CSS3 e possui elementos de áudio e vídeo incorporados a seu código fonte.
Criado em 2013, o Google Web Designer é uma ferramenta para projetos em HTML5, voltada especialmente para profissionais de web. Ela permite que os designers produzam conteúdo rico em diversos formados, como banners publicitários para a web. Ele ainda conta com as funções de desenho e animação, bem como o efeito 3D, que são mostradas em um editor visual (ambiente WYSIWYG). A plataforma é simples e intuitiva, e ainda inclui duas redes de publicidade, DoubleClick e AdMob, do Google
Quem pode usar essa ferramenta?
A ferramenta Google Web Designer consegue atender todo tipo de pessoas, desde aqueles que buscam soluções mais complexas, já que traz funções mais pesadas para usuários com maior conhecimento de programação; até aqueles que estão em contato com o universo do HTML pela primeira vez, porque conta com facilidades que atraem amadores em busca de soluções para Ads interativos e outros conteúdos neste formato. Com a ferramenta é possível animar elementos específicos, utilizando um sistema de layers. O melhor é que se o usuário não faz ideia do que isso significa, não tem problema, o próprio Google finaliza o projeto. A boa notícia é que a versão Beta está disponível para download e pode ser baixada gratuitamente.
Se você não conhece muito bem o Google Web Designer, este artigo é para você. Continue lendo e saiba como ela pode ser útil para os seus projetos.
Se você ainda não entendeu o que esta ferramenta faz, continue lendo este artigo e descubra tudo sobre o Google Web Designer.
O que o Google Web Designer realmente faz?
No mercado há seis anos, o Google Web Designer se destacou como uma das melhores ferramentas do Google. Mas nem todo mundo a conhece. O dispositivo nasceu a fim de integrar o design com a programação e aproximar os esses dois universos por meio de conceitos como design responsivo e mobile friendly. Estes conceitos são valorizados pelo gigante da internet, o Google, e por todos os usuários de plataformas mobile.
O grande diferencial desta ferramenta é que ela oferece diversas opções para criação do design, mas todas com uma integração maior com as linguagens de programação. Ou seja, com apenas um clique é possível adaptar uma peça para ser amigável aos smartphones e tablets, ou ainda para ajustar melhor em diferentes plataformas, como o Youtube. Além disso, por ser uma ferramenta do Google, ela interage melhor com os serviços da marca como Google Maps, AdSense e o próprio Youtube.
Para quem não entende nada de programação, o benefício principal da ferramenta é oferecer conhecimento sobre este universo. É como se o profissional pudesse se dedicar exclusivamente para o design, enquanto a ferramenta faz o trabalho de HTML, CSS ou Java. Dessa forma, o novato pode ir se familiarizando aos poucos com o mundo da programação. Já para os designers mais experientes, o Google Web Designer ajuda a entender melhor e praticar mais os conceitos de mobile friendly, design responsivo e leve. Esse tipo de cuidado é muito valorizado pelos motores de busca do Google, por exemplo, e peças que levam isso em consideração serão melhor ranqueadas por ele.
Além de ser utilizado para criação de peças publicitárias, é possível usar o Google Web Designer para o desenvolvimento de sites e outras produções mais complexas. Entretanto, são poucas opções para este tipo de trabalho, o que limita a programação.
Vantagens do Google Web Designer
Sabe aquelas animações temáticas que aparecem substituindo o logotipo do Google, de tempos em tempos?
A ferramenta permite que você também crie animações em javascript com HTML5 em poucos passos, como aquelas que aparecem na página principal do buscador. O software está disponível para Windows, Mac ou Linux. No último, nas seguintes distribuições: Ubuntu, Debian, OpenSUSE e Fedora. Ele é mistura de duas propostas: assim como o Adobe Flash, serve para a criação de animações de banners, mas, neste caso, as animações são feitas com javascript ou jquery; a segunda proposta, assim como já fazia o Dreamweaver, é a criação de site de modo visual. Só que no Google Web Designer, a interface mistura Fireworks/Photoshop com editor de HTML e CSS.
Ao contrário de outras ferramentas em que você pode fazer desenhos em 2D ou até mesmo 3D em formato PNG ou JPG, nele a imagem é feita com código javascript, utilizando o recurso canvas.
Se o usuário optar pela visualização “Design” do Google Web Designer, ele consegue criar conteúdos de texto, desenho e objetos 3D. Já na visualização “Código” do Google Web Designer cria-se arquivos CSS, JavaScript e XML. Ele facilita a escrita do código e reduz erros.
Vale a pena?
Uma das maiores dúvidas dos designer é se essa ferramenta do Google realmente vale a pena. A resposta para essa pergunta é: vai depender do perfil de cada designer. Cada profissional tem suas preferências e uma forma muito íntima com o modo que realiza uma criação. Mas, a verdade é que, por ser um software que promete mudar a maneira como são criados sites e animações web, há uma certa curiosidade em testá-lo. Considerado uma das melhores ferramentas do Google, vale a pena baixar o software para conhecer melhor as funções antes de julgá-la e dispensá-la.
Além das ferramentas de design como texto, caneta, formas e a integração de Web Fonts do Google. Com Google Web Designer é possível adicionar funcionalidades ao projeto por meio de Web Components pré-programados com iFrame, mapas, área de tap, galeria de imagens e YouTube. O mais legal é que cada componente informa automaticamente as métricas e não há necessidade de codificação.
Você já entendeu o que essa ferramenta faz? Então continue lendo e saiba como tudo começou.
Túnel do tempo: Flash X HTML5
Com a baixa popularidade do Flash, especialistas acreditam que o Google acertou em apostar no formato HTML5. Na época, a própria empresa afirmou que existiam mais usuários em ambientes compatíveis com HTML5 do que nos ligados ao Flash. Em 2014, o Google divulgou uma nota afirmando que os anúncios nesse formato ultrapassariam os feitos em Flash até 2016.
No ano seguinte, anunciou que oferecia suporte à conversão automática de anúncios em Flash para a linguagem HTML5. Segundo a empresa, o processo era realizado no momento do upload das propagandas via AdWords, AdWords Editor e também através algumas ferramentas de terceiros. Meses depois, a gigante da internet afirmou que anúncios feitos em Flash não seriam mais aceitos pelo Google Chrome.
Essa foi a cartada que faltava para mostrar que um dos formatos mais populares da internet estava quase morrendo. Com a medida, as animações em Flash só funcionam se forem clicadas pelo usuário para a ativação, do contrário permanecem congeladas por padrão. A decisão buscou otimizar o desempenho de plugins para economia de bateria e processos na CPU. Os anúncios de reprodução automática foram o alvo principal deste update. Ao poucos, muitas empresas foram abolindo o formato da Adobe por um motivo óbvio: o risco no qual ele expõe o computador do usuário, com frequentes falhas de segurança e problemas de performance.
HTML5, por que?
Alguns desenvolvedores, tentaram relutar – e alguns ainda tentam afirmar que o Flash não pode morrer, já que possibilita a criação de aplicativos interativos multiplataforma. Mas, tudo indica que ele desaparecerá de vez, dando lugar ao HTML5 definitivamente. E isso não é novidade, pelo menos não para o CEO da Apple que, em 2010, já vislumbrava a extinção do Flash e declarou publicamente que usaria o plug-in para navegação na plataforma iOS. Depois disso, a própria Adobe liberou uma ferramenta que convertia Flash em HTML5. Na época, a decisão da Adobe não indicava que a intenção era redirecionar o foco do Flash para o HTML5, mas foi o que aconteceu.
Depois que a Adobe anunciou, no fim de 2015, que a ferramenta para produção de conteúdo animado passou a se chamar Adobe Animate e o foco estava no HTML5, embora ainda continue sendo capaz de gerar arquivos .swf (formato do flash), o mundo declarou a morte do Flash. Segundo a empresa, mais de um terço de todo conteúdo criado no Flash Professional já era em HTML5 em dezembro daquele ano.
O HTML5 trouxe inovações que supriam o que era entregue pelo plug-in do Flash. Para entender melhor as vantagens, ele incorpora elementos e linguagens gráficas tanto para dispositivos móveis quanto para computadores. Com isso, as animações puderam ganhar mais detalhes sem pesar tanto quanto as animações em Flash, pois são integradas ao código das páginas da web.
Agora que você já sabe um pouco mais sobre a história do HTML5 chegou a hora de aprender como criar no Google Web Designer.
Como criar um novo documento na Google Web Designer
O Google Web Designer permite que os usuário criem anúncios do zero, e oferece modelos para isso. Há opções de documentos em HTML e de outros documentos, como arquivos CSS, JavaScript e XML. Depois de baixar a ferramenta, basta selecionar Novo Arquivo no menu “Arquivo” para começar. Neste ponto, basta escolher o modelo e começar a criar. Você também vai selecionar o ambiente em que o documento será utilizado. Para cada ambiente o Google Web Designer fará a inclusão automática de códigos do Enabler. Por isso, se o usuário for utilizar o anúncio em outro ambiente, posteriormente, precisará alterar as tags originais inseridas pela plataforma.
Com a ferramenta, os anúncios ganham design responsivo, ou seja, o designer cria um único anúncio em que os elementos serão remodelado, sem a necessidade de criar vários anúncios semelhantes. O Google Web Designer usa consultas de mídia CSS3 para isso. Além disso, ele permite janela de visualização. Assim, os anúncios podem ser estilizados para vários tamanhos e orientações diferentes, tanto nas versões retrato e paisagem. Vale lembrar que as consultas de mídia não permitem alteração no conteúdo dos anúncios, mudam somente os estilos. Mas é possível ocultar alguns recursos e deixar que eles apareçam somente nas versões maiores do seu anúncio. Por exemplo, no caso de fotos grandes ou várias imagens.
Como criar uma animação no Google Web Designer
As animações no Google Web Designer podem ser criadas de duas formas em CSS: o Modo rápido e o Modo avançado. Neste formato, é possível usar várias sequências de animação para janelas de visualização de diferentes tamanhos diferentes e design responsivo.
No Modo rápido, a criação é cena por cena. O usuário precisa adicionar uma nova visualização da página inteira, alterar os elementos que deseja animar e modificar os tempos de transição e os efeitos de easing.
Já o Modo avançado permite criar animações mais complexas, animar cada um dos elementos, e ainda modificar os tempos de transição e os efeitos de easing. Neste modo, também é possível visualizar as camadas, permitindo alterar a ordem dos elementos na pilha. Além disso, dá para alternar entre os modos a qualquer momento, clicando no botão de troca de modo próximo aos controles de reprodução.
Como criar uma animação no Google Web Designer
As animações no Google Web Designer podem ser criadas de duas formas em CSS: o Modo rápido e o Modo avançado. Neste formato, é possível usar várias sequências de animação para janelas de visualização de diferentes tamanhos diferentes e design responsivo.
No Modo rápido, a criação é cena por cena. O usuário precisa adicionar uma nova visualização da página inteira, alterar os elementos que deseja animar e modificar os tempos de transição e os efeitos de easing.
Já o Modo avançado permite criar animações mais complexas, animar cada um dos elementos, e ainda modificar os tempos de transição e os efeitos de easing. Neste modo, também é possível visualizar as camadas, permitindo alterar a ordem dos elementos na pilha. Além disso, dá para alternar entre os modos a qualquer momento, clicando no botão de troca de modo próximo aos controles de reprodução.
Como criar um anúncio em banner no Google Web Designer
Os banners são anúncios que se ajustam a locais com tamanhos específicos em uma página da Web ou aplicativo. Para criar um anúncio de banner o usuário precisa selecionar o botão Novo Arquivo e na caixa de diálogo escolher “Criar novo arquivo em branco”. Em seguida escolher Banner como o tipo do anúncio. E seguir as opções, entre elas, dar um Nome ao banner, isso é obrigatório e será o nome do arquivo HTML. Depois escolha o local onde o arquivo será salvo. O usuário pode usar uma pasta local do seu computador ou salvar no Google Drive.
Em seguida, o usuário escolhe o ambiente do anúncio, ou seja, onde ele será exibido. O Google Web Designer oferece suporte para ambientes como DoubleClick, AdMob e Google AdWords. Outra possibilidade é criar um arquivo que não seja do Google, sem código de anúncio específico. Também é importante selecionar a opção “Layout responsivo” para criar um anúncio que funcione automaticamente em qualquer tela. Se precisar de um tamanho específico, o usuário pode definir as dimensões. Há tamanhos comuns ou “Personalizado”. Para finalizar, o usuário seleciona o modo de animação que deseja: rápido ou avançado.
Para criar um anúncio ainda mais eficaz, é possível adicionar uma call-to-action. Essa “chamada para ação” nada mais é do que um botão clicável que leva o usuário ao website de uma empresa, por exemplo. Para isso é preciso incluir no design um botão ou outro elemento call-to-action de fácil visualização.
Depois é só arrastar o componente Área de toque da pasta “Interação” do Painel de componentes para o cenário e posicionar sobre a call-to-action. Então, basta clicar no botão de “novo evento” no painel de eventos e selecionar a opção.
Conclusão
Você deve ter percebido que o Google Web Designer, assim como o HTML5 veio para inovar e revolucionar o mercado de desenvolvimento de websites. A ferramenta gratuita para criação de site e banners baseado em HTML 5 possibilita o desenvolvimento de animações javascript e design responsivo, o que é crucial para a era mobile que vivemos. Já sabemos que sites lentos e não responsivos tem tráfego muito abaixo do esperado e uma empresa que está se dedicando a melhorar a presença on-line precisa ficar de olha em detalhes como este.
Além disso, essa é uma ótima opção para as agências de marketing digital. Com ele é possível vincular a ferramenta a uma Conta (ou contas) do Google para integrar outras ferramentas. Dessa forma, o usuário pode salvar arquivos no Google Drive e até publicar arquivos diretamente no DoubleClick Studio.
Agora que você já conhece melhor essa ferramenta, talvez seja a hora de experimentar novas formas de trabalhar e inovar. Nós sabemos que o Google está sempre em busca de melhorias, por isso, usar uma ferramenta desenvolvida por ele pode ser o que faltava para ter sucesso nas suas criações.
