Blog

Quatro ferramentas para web design responsivo

ferramentas responsivo

Confira opções recém-lançada no mercado feita especialmente para projetos multitela

O web design responsivo finalmente engrenou. Desde que o desenvolvedor e web designer Ethan Marcotte lançou o primeiro método de Web Design Responsivo (RWD, na sigla em inglês), há dois anos, muita coisa mudou. Parte da dificuldade que a comunidade encontrou em criar sites amigáveis para todos os tamanhos de tela vem do complexo ato da comunicação visual.

Como você mostra a um cliente ou a um desenvolvedor a sua intenção por meio de múltiplos breakpoints, antes mesmo de, realmente, construí-los? Para resolver questões como essas, muitas soluções foram surgindo recentemente. Alguns profissionais encontraram até maneiras de resolver tudo na base do código, e outros optaram pela ajuda de ferramentas de web design para otimizar o workflow.

Confira agora quatro ferramentas recém lançadas e perfeitas para RWD:

Webflow

O webflow é um web app que se destaca na versatilidade. Se você usar ferramentas de design só para a criação de interfaces, ficará satisfeito com os controles intuitivos do app. Mas há uma outra camada da ferramenta com certo apelo: a otimização e aceleração da hospedagem com backup de site para a criação de protótipos. É possível especificá-lo e ter uma produção de código pronta para ser hospedada, tudo dentro do Webflow.

A ferramenta permite que você veja o projeto em tempo real, exatamente da forma como ficará. As funcionalidades e interações também são simples e permitem agilidade no processo. É claro que o aplicativo não está livre de restrições e isso é algo bom. Por exemplo, é libertador desenhar uma caixa e arrastá-la para onde quiser, sem que isso seja um prejuízo de padrões da web. “Nós cumprimos com as restrições do box model do CSS (margin, padding)”, comenta Vlad Magdalin, um dos criadores do Webflow. “Isso permite muitos benefícios (como layouts responsivos automáticos e design mais fluído)”. 

Você pode sacrificar por completo a autonomia, mas isso proporciona um design que será responsivo por padrão.

Plataforma: Broswer

Preço: $16 por mês para uso pessoal (10 projetos) e $35 por mês para uso profissional (sem limite de projetos)

webflow

Froont

Esta ferramenta nasceu de um sistema de conteúdo WYSIWYG, o Berta.me, criado pelo designer Sadijs Ruluks. A intenção original era usá-lo apenas em seu site pessoal, mas depois de compartilhar com amigos a base de usuários cresceu a ponto de precisar mudar de hospedagem. Foi assim que surgiu o Froont. Ele usa regras de breakpoints, controles de grid e uma porção de outros recursos focados em responsivo.

Provavelmente a maior diferença entre o Froont e as outras ferramentas tem a ver com a sua carteira. O aplicativo é totalmente grátis para publicação de sites públicos e oferece códigos HTML e CSS, que você gostaria de usar em qualquer lugar do projeto. O web app também tem um ambiente de testes facilitado e ajuste de breakpoints com foco no conteúdo. “Tudo o que você faz é acessível por meio de qualquer dispositivo conectado à web, simplesmente digitando a URL. Designers podem testar seus layouts em um ambiente em tempo real”, comenta Ruluks.

Plataforma: Browser

Preço: Grátis

froont

Reflow

Quando o assunto é ferramentas de design, a Adobe é naturalmente parte da conversa. Ela ganhou este direito com suas contribuições como Photoshop, Illustrator, Fireworks (RIP em 2013), entre outros. Mas as atenções ficaram por conta do Edge Tools, uma linha de aplicativos orientada por algumas dificuldades que web designers encontraram. O Reflow é o app de design responsivo desse kit.

A premissa é simples: “O Reflow é focado em ajudar designers a comunicar suas visões e intenções responsivas. Os designers de hoje não tem o luxo de jogar composições estáticas em uma parede e esperar pelo melhor”, explica Jacob Surber, gerente de produto sênior do Reflow. Com o Photoshop havia o problema de comunicação responsiva. Como você mostra intenção de design com componentes estáticos e absolutamente alinhados e posicionados?

Com o Reflow, a tela é fluída e os elementos são dependentes, permitindo que você comunique melhor como elementos se adaptam a diferentes tamanhos de tela, tanto para clientes (que são mais leigos) quanto para desenvolvedores. A visualização da regra de breakpoints é impressionante.

Plataforma: App nativo

Preço: Incluso na assinatura do pacote Adobe Creative Cloud

reflow

Macaw

Ter um app de design para produzir o seu código é como ter uma criança arquivando suas declarações de impostos. Você pode fazer funcionar, mas será uma bagunça de spans não intuitivos, Ids e espaços quebrados. O Macaw não só veio para mudar isso, como sugere que o CSS crie códigos mais sucintos do que você escreveria. O defensor de longa data do Photoshop, Tom Giannattasio, conta como tudo começou. Ele percebeu uma necessidade de alguma coisa melhor para o web design: “Comecei a experimentar e deixei meu trabalho no MIT para ter mais tempo de fazer tudo. Convenci meu parceiro (Adam Christ) a me acompanhar nesse processo”. Desde então a dupla têm despertado curiosidade da comunidade de web designers com seu novo projeto.

O projeto ganhou vida no Kickstarter, arrecando os funfos necessários em apenas 24 horas. Só isso já prova que o Macaw merece a atenção do mercado. Ele tem interface de usuário compatível com unidade de CSS e breakpoints responsivos em uma tela fluída. O Macaw se define como “uma ferramenta de design code-savy”. Isso significa que produzir códigos de qualidade é um recurso do app, algo que o diferencia da concorrência.

Ele consegue esse códigos mais limpos através de um mecanismo chamado Alchemy. É ele que produz linhas de HTML e CSS dignas de um desenvolvedor experiente.

Plataforma: App nativo

Preço: $179

macaw

Confira a reportagem completa na edição 163 da Revista W

• Leia as notícias do dia em tecnologia

• Acompanhe nossos colunistas na seção Opinião 

• Oportunidade de emprego para TI, desenvolvimento e marketing digital 

Comente