Set. 02

5 Extensões Google para melhorar a produtividade na criação de websites

 

 

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!

 

 

Classifique este item
(0 votos)

ARTIGOS RELACIONADOS