5 Extensões Google para melhorar a produtividade na criação de websites
Todos os designers utilizam ferramentas que os ajudam a atingir o seu objetivo final. Neste artigo damos-te a conhecer algumas extensões, todas gratuitas, que podem ser úteis para melhorar a tua performance durante a criação de um website.
Todos os designers usam ferramentas que os ajudam a atingir o seu objetivo final, sejam elas de desenho digital, alteração de imagem, edição de vídeo ou para escrita/criação de websites.
No fundo, todos têm os seus pequenos “gadgets” que os auxiliam nas suas tarefas, os seus truques que ajudam a melhorar a performance, as suas cartas na manga.
Neste artigo, damos-te a conhecer algumas extensões, todas gratuitas, que podes instalar no Google Chrome e ainda, alguns truques que podem ser úteis para quem se quer aventurar na criação de um protótipo ou website.
1. Milanote
Antes de começar qualquer projeto é fundamental fazer uma pesquisa da concorrência e, à medida que a vamos fazendo, é importante ir guardando tudo o que nos possa servir de inspiração para quando estivermos com a “mão na massa”.
A aplicação Milanote, com extensão no Google Chrome, é uma excelente ferramenta para esta fase de análise. A sua principal função é armazenar – online ou offline – toda a pesquisa/recolha de imagens e uma das suas vantagens é a possibilidade de ver tudo o que foi guardado num único local.
Além de guardar as imagens da pesquisa, a Milanote permite guardar o link para o ficheiro original para futura consulta, trabalhar em equipa, sendo a “board” partilhada por todos os intervenientes no projeto, e fazer, também, desenhos/rascunhos que permitem expor ideias de forma mais simples e rápida.
2. Fonts Ninja
No artigo “Como usar tipografia de forma eficaz “, compreendemos a importância da escolha do tipo de letra e percebemos, também, que nem todos estão otimizados para a utilização em web.
Ao longo da nossa pesquisa, é natural cruzarmo-nos com websites que usam tipografias que despertam a nossa atenção e que consideramos ser boas referências. Quando acontece, vamos querer descobrir o nome da fonte que está a ser utilizada e, para quem já tem alguns conhecimentos, é normal que o tente fazer com a função
”inspecionar” do Google Chrome. Com algum scroll por entre linhas de código encontraremos a informação que se procura.
Contudo é aqui que o Fonts Ninja entra em ação e se torna num aliado! A ferramenta é muito intuitiva e dá-nos logo esta informação. Além disso, o Fonts Ninja fornece outro tipo de informações que, para quem tem poucos conhecimentos de UX, podem ser úteis para compreender a hierarquia que os tipos de fontes devem respeitar no desenvolvimento web.
Dá, também, informações como o peso da fonte, o tamanho e a cor.
Na versão paga da extensão é possível fazer download e usar uma versão trial dos tipos de letra.
3. Responsive Viewer
Num mundo com vários ecrãs e com vários tamanhos, a criação de um website não pode ignorar o design responsivo, certo?
Para mais facilmente termos o controlo de como estão a ficar as páginas nos diferentes tipos de ecrãs, podemos (e devemos!) recorrer à extensão Responsive Viewer.
A ferramenta permite ver vários tamanhos de ecrã em simultâneo e, assim, ir percebendo como as páginas estão a ficar em cada dispositivo e computador.
É possível escolher o ecrã que queremos ver como, por exemplo, um iPhone ou Samsung, fazer scroll e cliques de forma sincronizada entre todos os ecrãs e ver a estrutura do site, que nos ajuda a corrigir erros e a ter uma noção geral de como os elementos se conjugam na página.
Além disso, a ferramenta permite ver os ecrãs numa versão horizontal e ainda fazer screenshot da página completa ou apenas do conteúdo visível em todos os ecrãs.
4. Simulador de Celular
Num portefólio gráfico ou mesmo digital, um mockup ajuda sempre a perceber dimensões ou como será a versão final do produto. O Simulador de Celular junta duas soluções muito válidas, tanto para o desenvolvimento web como para a comunicação do produto final.
Na extensão para o Google Chrome, além da possibilidade de ver como fica o website em vários ecrãs, é possível fazer download do mockup sem fundo.
Apesar do seu nome (Celular), a extensão também permite ver como fica a página web em vários dispositivos, como num tablet, num portátil, num desktop e até mesmo num Apple Watch – todas elas com a possibilidade de fazer o download do mockup do dispositivo.
Tal como na extensão Responsive Viewer, é possível fazer screenshot da página completa ou apenas da parte que é visível no ecrã e oferece, também, a opção de fazer uma gravação da navegação no site.
5. Windows Resizer
Pode parecer, à primeira vista, uma extensão simples, mas para um criador de páginas web torna-se uma ferramenta muito sólida, pois permite perceber os breakpoints e dimensões da página que estamos a ver.
A extensão tem algumas medidas pré-definidas, no caso de ecrãs de computadores, mas é possível adaptar para medidas de telemóvel.
Por outro lado, e ao contrário do Responsive Viewer que permite trabalhar numa escala maior e focar apenas num problema, a extensão apenas reformula o tamanho da janela do browser que estamos a ver.
Uma boa página web depende (e muito) da experiência que o utilizador tem na sua navegação. É nisso que o programador ou web designer deve manter o seu foco.
As ferramentas que partilhamos neste artigo ajudam a agilizar o processo e a perceber melhor o que há para melhorar e corrigir.
Chegar a um bom resultado requer muitos testes, muitas experiências com utilizadores e muito trabalho! Não há atalhos, mas há uma Equipa especializa na BOOMER que te pode ajudar a atingir esses resultados!
