As 5 melhores ferramentas para design responsivo
Deixe-me começar dizendo isso, não incluirei nenhuma ferramenta de design de apontar e clicar nessa lista (pense no Adobe Edge Reflow). O motivo é bastante simples, acredito que eles são ruins para todos; designers, clientes, codificadores… todo mundo sofre.
Não é uma questão de qualidade de saída de código por esses programas. Não é porque torna o design “muito fácil”. É porque não importa quão bons sejam esses programas, eles sempre limitarão as pessoas que os usam.
Eles serão limitados, nem mesmo pelo que o programa pode realizar, mas pelo que eles acham que pode realizar. Se eles pensarem sobre isso, o usuário comum provavelmente irá compará-lo a ferramentas como o PowerPoint e / ou qualquer número de programas de design de impressão, caindo novamente em mentalidades antigas. Ai que está o problema. As ferramentas de publicação na Web visual sempre tentarão aplicar processos antigos a novas tecnologias.
Um fluxo de trabalho verdadeiramente orientado para a Web é aquele que abrange os conceitos e tecnologias subjacentes sobre os quais a Web é construída. Claro, você pode usar qualquer número de ferramentas visuais para criar sites que são tecnicamente responsivos, mas você estaria perdendo o ponto.
Não é sobre um layout adaptável. Trata-se de tornar a informação acessível ao maior número de pessoas possível. Existem algumas coisas que um programa como o Edge Reflow não consegue fazer. Em suma, você precisa escrever código.
Portanto, as melhores ferramentas para ajudá-lo no design responsivo são aquelas ferramentas que ajudam você a entender e fazer uso de tecnologias da Web, planejar seu site completamente, escrever um código melhor com mais eficiência e testar / apresentar seus projetos responsivos aos clientes em contexto.
Vamos começar com o óbvio:
1) seu navegador
Não, eu não estou brincando. Esta é literalmente a ferramenta mais importante que você tem, porque mostra exatamente como seu site se parece sob suas condições específicas.
Tem havido muito debate sobre se projetar ou não no navegador é melhor do que projetar em um editor de imagens como o Photoshop ou o GIMP. Permita-me resolver isso para você ...
Os usuários do seu site vão fazer sua navegação no Photoshop? Os editores de imagem podem criar fotos bonitas, não emular experiências reais. Use editores de imagem para editar imagens. Use seu navegador para criar sites.
É hora de afastar nossos clientes dos modelos hiper-detalhados com os quais eles se acostumaram. À medida que a web muda e nossos processos se tornam mais fluidos e interativos, precisamos seguir em frente.
Instale pelo menos um navegador com todos os principais mecanismos de renderização e obtenha algumas extensões de desenvolvedor. Acostume-se a ver seu código-fonte da maneira que seu navegador o vê, porque você estará aqui por um tempo.
2) aplicativo de desenho do Google Drive
Tecnicamente, praticamente qualquer editor de imagens baseado em vetores poderia fazer o trabalho ao enquadrar seus sites e aplicativos. Eu costumo fiar a versão desktop do meu site primeiro, criar uma cópia do arquivo, redimensionar a tela e ir a partir daí. O uso de vetores facilita o redimensionamento e a reorganização rápida dos elementos enquanto você ainda está no estágio de planejamento.
Eu prefiro o aplicativo de desenho em Google Drive por algumas razões:
Funcionalidades de partilha e colaboração: a Google partilha melhor as informações do que qualquer outra pessoa. Com comentários no contexto, edição simultânea e integração com o Hangout, estou apaixonado.
Guias automáticos: Em cada documento de desenho, os guias são criados automaticamente com base nas dimensões de cada objeto colocado no documento. Isso facilita a representação de elementos de tamanho consistente no documento, o que é ótimo para designers obcecados por grade como eu.
Como compartilho esses wireframes com clientes, essa consistência de aparência profissional é uma grande vantagem. E ainda assim, não estou restrito a esses guias. Eu vejo isso como uma boa alternativa para aplicativos de simulação que tentam restringi-lo a uma grade.
Ah, e é grátis. Preciso dizer mais?
3) Protótipos de Estilo
Baseado em telhas de estilo, Protótipos de Estilo são uma entrega no navegador projetada para ajudar você a dar aos seus clientes uma ideia de como os elementos de tipografia, cor e interface do usuário do site serão exibidos. Como ele deve ser visualizado no navegador, haverá menos inconsistências quando o site for criado.
Além disso, gostaria de postular que Protótipos de Estilo poderiam ajudar nossos clientes a separar mentalmente os conceitos de UX e estética. E realmente, qualquer coisa que ajude nossos clientes a entender melhor o processo de web design só pode ser uma coisa boa.
4) Responsinador
Responsinador é uma ferramenta simples que mostra seu website em tamanhos diferentes. Ele imita, de maneira muito básica, vários tamanhos e contextos de dispositivos diferentes. Esta ferramenta não é para seu benefício. Você quer ver como seu site se parece em tamanhos menores? Redimensione a janela do seu navegador. Melhor ainda, consiga alguns dispositivos móveis reais e faça alguns testes reais.
Este aplicativo da web é mais usado para mostrar aos seus clientes uma rápida aproximação de como será o site deles em contextos diferentes de um monitor de desktop ou laptop.
Mais uma vez, existem muitas ferramentas que poderiam fazer o mesmo trabalho que o Responsinator, e com a mesma eficácia, suponho. Eu escolhi este porque apresenta várias silhuetas de dispositivos, uma após a outra, para fácil leitura.
5) Adobe Edge Inspecionar
Agora esta é para você. Se você tem um laboratório de teste móvel (e quanto mais cedo você puder fazer um, melhor) Borda Inspecionar sincronizará todos os seus dispositivos para visualizar a mesma página de uma só vez. Atualize a página em um dispositivo e atualize todos eles.
Ao contrário dos outros desta lista, este não é gratuito. No entanto, se você puder pagar dispositivos móveis suficientes para precisar de uma solução como essa, provavelmente valerá o dinheiro.
Conclusão
Como sempre, seu ativo mais importante é o seu cérebro. Essas ferramentas, e outras semelhantes, só podem ajudá-lo no seu caminho. Eu escolhi estes porque eles executam funções muito específicas que me ajudam na criação de sites responsivos. Eles não limitam o que posso fazer.
As melhores ferramentas são realmente as que ficam fora do caminho.
Você usa essas ferramentas? Quais são suas 5 principais ferramentas para design responsivo? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem de ferramentas via Shutterstock.