As 20 melhores ferramentas da web para designers da web responsivos

O Responsive Web Design (RWD), embora seja um conceito fácil de entender para a maioria dos webmasters e desenvolvedores de hoje, ainda requer uma compreensão concisa das principais funções que os navegadores usam para renderizar o design responsivo para exibição, e ignorar essas funções pode levar ao desenvolvimento de mal sites responsivos codificados que prejudicarão a experiência do usuário e causarão problemas de desempenho do site. Além do HTML5, que ajudou a definir a direção do design responsivo da Web, os desenvolvedores também precisam de um grande conhecimento do CSS3, sem o qual o design responsivo simplesmente não é possível. Consultas de mídia, por exemplo, são a solução autônoma para definir partes específicas de conteúdo para tamanhos e tipos de tela de dispositivos específicos. Mas, mesmo assim, esse tipo de função toca apenas a ponta do iceberg de tudo o que o design responsivo é capaz.

A compatibilidade com dispositivos móveis é outro tópico sensível que sem dúvida reconstruirá e reorganizará como o design responsivo é percebido. Há uma indicação clara de que o próprio dispositivo móvel está se movendo em direção a uma abordagem mais específica de exibição de conteúdo, que vem na forma de aplicativos e estruturas móveis. Todos esses conceitos de crescimento requerem investigação completa do futuro do design e como suas táticas atuais podem ser modificadas para crescimento futuro.

Com a compreensão de para onde o web design está indo, compilamos uma lista de algumas ferramentas de web design responsivas verdadeiramente práticas e úteis que se encaixam perfeitamente em seu kit de ferramentas existente, certamente algumas delas já encontraram o caminho para o seu coração, mas alguns podem ser completamente novos para você. De frameworks front-end diretos a ferramentas de teste móveis e muitos recursos de padrões de design inspiradores que o ajudarão a construir sites melhores, mais responsivos e mais envolventes a partir de agora - pegue uma xícara de chá e comece sua excursão por este roundup estelar .

Bootstrap

Começar com a construção de um site de front-end nunca foi tão conveniente. Frameworks como o Bootstrap tornam o processo de inicialização de um site de negócios funcional realmente uma tarefa fácil. E como o Bootstrap segue os padrões da web mais recentes, todos os recursos também são compatíveis com o design responsivo. O que torna o Bootstrap tão bem-sucedido é altamente atribuído à sua vasta coleção de componentes, pegue o design de grade do Bootstrap padrão e aplique a ele qualquer um dos componentes gratuitos para inicializar rapidamente um site moderno.

Componentes como botões que podem ser personalizados em formas, cores e tamanhos e barras de navegação que você mesmo pode modificar para integrar com recursos JavaScript personalizados. Os navegadores também avançaram muito no futuro para oferecer suporte a um design responsivo, por exemplo - a incorporação de vídeos ou imagens pode ser configurada para redimensionar automaticamente de acordo com o tamanho do dispositivo a partir do qual os visitantes estão acessando. Isso torna a experiência do usuário moderna, suave e confiável. Em uma visão geral, Bootstrap é a estrutura que o ajudará a criar um site, então você pode seguir em frente com muitas das outras ferramentas de design responsivo que mencionaremos para estender ainda mais a experiência.

Webflow

O Flexbox é talvez o recurso mais falado do design e desenvolvimento da web moderno, e gerou inúmeros tópicos escritos por desenvolvedores veteranos somente no ano passado. Definição básica do Flexbox - uma ferramenta de layout robusta que resolve problemas comuns encontrados em web design responsivo. O que é Webflow? É uma plataforma que integra o design Flexbox em um construtor visual, economiza horas de desenvolvimento e opta por uma interface de usuário fácil com a qual você pode construir layouts responsivos.

Enfim .. Por que Flexbox? Parte do motivo pelo qual o Flexbox é tão popular é que ele resolve problemas de design complexos que, de outra forma, exigiriam padrões de design improdutivos. Para fornecer a você o resumo básico do Flexbox - você pode criar padrões de design complexos com apenas algumas linhas de código. Por exemplo, a criação de elementos modais igualmente alinhados que continuam a permanecer alinhados, apesar dos tamanhos de fonte que você usa para títulos ou subtítulos. Com o Flexbox, você pode criar layouts como contornos de recursos ou análises de clientes e alinhá-los para que proporcionem uma experiência de usuário notável. Mesmo coisas mundanas como tabelas de preços nas quais você confiava no CSS3 nativo para ajudá-lo a delinear, agora podem ser integradas em seus projetos usando os recursos Flexbox do Webflow. Grades completas de sites podem ser construídas para acelerar a velocidade com que um site se torna realidade.

Padrões UIP

Como um web designer, não há como escapar dos padrões de IU que governam tantos sites, aplicativos e ferramentas que usamos diariamente. Imagine como seria o mundo digital se não dependêssemos de padrões comuns de interface do usuário. Seria um mundo louco e distorcido. Mas, graças à evolução do design e à compreensão de como os padrões se repetem na funcionalidade comum, é possível aprender sobre os diferentes padrões de IU que governam categorias como formulários, gerenciamento de dados, gerenciamento de conteúdo, layout, navegação e páginas de tela do usuário.

É uma vasta gama de telas de design que podem ser recriadas usando seu próprio estilo de design, mas seguindo a orientação de padrões comuns de IU para alcançar um senso de equilíbrio. E essas também são as categorias que o UI Patterns cobre. Cada categoria tem uma série de padrões de amostra que mostram a maneira como cada categoria de design pode ser modificada para refletir os padrões de IU padrão, todos os quais foram considerados mais favoráveis ​​pelo usuário digital médio. Os padrões de design que você encontrará nesta página podem ser aplicados a aplicativos nativos e móveis. O design responsivo tem tudo a ver com usabilidade desde o início, gerenciar um único layout para vários dispositivos é uma tarefa pesada por si só, mas os padrões ajudam a equilibrar as tarefas problemáticas, permitindo que você aplique um único padrão a vários designs.

Imagify

Imagens é outro tópico altamente favorável em design responsivo. Afinal, você não gostaria de exibir a mesma imagem exata para visitantes que vêm de tablets ou smartphones. A resolução do dispositivo sempre será diferente e, embora os recursos do CSS3 existam para manter algum tipo de equilíbrio entre os tamanhos e tipos de imagem que diferentes dispositivos estão baixando, melhorar a qualidade da imagem e seu tamanho ainda é um tópico muito forte. Claro, o HTTP / 2 trará grandes mudanças para desenvolvedores em todo o mundo, mas os próximos 5 anos ainda serão bastante difíceis para a web.

O HTTP Archive relata que em 2010 - em média, o tamanho de uma única página da web era de aproximadamente 700 kb, enquanto em 2016 - esse número cresceu para 2,2 MB! E a maioria desses megabytes é ocupada por conteúdo visual; imagens. Então .. você tem que se perguntar: estou comprometendo o desempenho das minhas páginas por causa de decisões irresponsáveis ​​em termos de otimização de imagem? É aí que você pode aprender sobre o Imagify, um serviço / plataforma que quer responder a essa pergunta para você e fornecer as ferramentas certas para continuar com a otimização de imagem, como um processo totalmente automatizado.

Um plugin WordPress é disponibilizado para que você possa otimizar todos os seus uploads existentes e futuros na hora. A menos que você analise diretamente o problema, muitas vezes pode parecer que não é um problema, mas se empresas como o Google encorajam os usuários a melhorar o desempenho de seus sites em troca de melhores classificações ... você sabe que não há como voltar atrás.

JsTips

O JavaScript é freqüentemente usado no desenvolvimento de front-end. Pense em estruturas como React, Angular, Meteor, Node.js e bibliotecas nativas de JavaScript que praticamente se conectam ao resto da web. jQuery é a única biblioteca que você usará com bastante frequência se estiver interessado em recursos sofisticados de design responsivo, e a única maneira de melhorar em JS é escrever mais código. Nesse caso, as dicas podem ser extremamente úteis para aprender coisas novas, entender melhor os padrões e, de modo geral, manter seu cérebro atualizado e à tona com os últimos acontecimentos em JavaScript. Então .. instale JsTips em seu smartphone.

Um aplicativo simples e elegante que fornecerá a você uma nova dica de JavaScript diariamente. Às vezes, as dicas falarão sobre coisas que você já conhece no fundo da sua mente, mas na maioria das vezes - você encontrará coisas que são criativas, futurísticas e simplesmente empolgantes para tentar e trabalhar. A única revisão na App Store sugere que o aplicativo carece de algumas funcionalidades básicas de design, mas como um codificador - você obtém o que mais deseja, os pedaços substanciais de exemplos de código e definição de código para que você possa pular naquele editor de código e conecte.

O Catálogo de Visualização de Dados

O que acontece com o design responsivo é que você pode trabalhar dia e noite no aperfeiçoamento do layout que está procurando, mas mesmo depois que o layout estiver pronto - há mais trabalho a ser feito, e isso geralmente se resume à maneira de integrar conteúdo interativo e dinâmico em seus projetos. Claro, o WordPress tornou fácil conectar o conteúdo com plug-ins interessantes que atendem de alguma forma ao dispositivo responsivo, mas sites responsivos verdadeiramente nativos são um cookie muito mais difícil de quebrar, e uma das coisas que você mais encontra no conteúdo são os gráficos, gráficos e outras visualizações de dados que descrevem a história por meio de números. O New York Times é um ótimo exemplo de como um site responsivo precisará de um conjunto responsivo de ferramentas para criar visualizações dinâmicas dos resultados das últimas eleições.

É por isso que estamos compartilhando mais sobre o Catálogo de Visualização de Dados - uma coleção maravilhosa de padrões e funções de visualização de dados, cada um com uma página única, uma descrição única, uma prévia de como será o gráfico / gráfico / visualização, e o mais importante - uma recomendação das ferramentas mais recentes mais estáveis ​​que podem ser usadas para recriar tal diagrama ou visualização. Muito trabalho foi gasto neste projeto, e seria uma ideia bastante ignorante evitar o uso disso para se ajudar a entender melhor a visualização responsiva de dados. Há uma grande quantidade de exemplos disponíveis, como - diagramas de arco, gráficos de área, gráficos de barras, nuvens de brainstorm, gráficos de bolhas e mapas, gráficos de boletim, calendários, mapas de conexão, mapas de fluxo, histogramas, gráficos de linha, gráficos espirais e inúmeros outros maneiras criativas de exibir seus dados, em um site responsivo.

Craft by InVision LABS

Craft é uma nova ferramenta do InVision Labs, uma plataforma de software de design proeminente e altamente conceituada que ajudou a moldar a paisagem do design da web por muitos anos. Com o lançamento do Craft, parece que a InVision deseja manter esse registro intacto, e provavelmente o fará. Craft é uma ferramenta de design de tela como nenhuma outra. É intuitivo, é inteligente, pode realizar tarefas difíceis e responde muito bem às necessidades do usuário.

Crie protótipos de aplicativos dinâmicos que usam dados reais (fornecidos por você ou gerados de maneira personalizada) para criar uma experiência única de protótipo de aplicativo. O recurso de biblioteca é capaz de adicionar novos e empolgantes elementos de design às suas telas por meio da funcionalidade de nuvem, portanto, se você deseja obter dados de um site ativo ou carregá-los por conta própria - a Craft Library é o recurso a ser usado. É improvável que vejamos um concorrente para tal sistema tão cedo, então aprender o Craft agora pode significar que você estará mais adaptado aos novos recursos que ele planeja lançar no futuro.

Editor Boxy SVG

Boxy é uma nova forma de manipular gráficos vetoriais diretamente no navegador. Até agora, os designers gráficos dependiam muito do uso de ferramentas como Sketch e Adobe Illustrator para concluir tarefas comuns voltadas para gráficos vetoriais, mas com Boxy SVG - agora você pode criar ilustrações, ícones, banners, maquetes, gráficos, botões e outros itens personalizados Elementos SVG diretamente de seu navegador favorito. É surpreendentemente funcional e certamente útil. Os SVGs já são o futuro dos designs responsivos, e ferramentas como o Boxy garantirão que continue assim. Os benefícios da integração de gráficos SVG em seus designs são inestimáveis. Eles são impecavelmente úteis para desempenho, escalabilidade e bela experiência do usuário.

UXPin

Se você tem uma ideia para web design, pode concretizá-la com o incrível e flexível UXPin. É uma solução que realmente não conhece limitações. Na verdade, sua imaginação é o único limite que você tem, então se solte e crie a obra-prima exata que você está procurando. Com UXPin, você pode transformar coisas simples e complicadas em realidade mais cedo ou mais tarde.

Esteja você configurando um protótipo ou um projeto completo, novamente, não há limites para UXPin, já que você pode utilizá-lo para qualquer coisa.

Quanto aos recursos, nem é preciso dizer que são muitos. De bibliotecas integradas, como Material Design e Bootstrap, à importação de HTML, toneladas de componentes, elementos de formulário interativos e ferramentas de desenho vetorial, tudo isso e muito mais é o que você obtém com UXPin. Prepare-se para uma diferença imediata com o impressionante UXPin agora.

Teste de compatibilidade com dispositivos móveis (do Google)

Nos dias de hoje, é de extrema importância que seu site ou blog seja totalmente compatível com todos os dispositivos. Resumindo, sua página deve estar pronta para dispositivos móveis. Se você está interessado em verificar a flexibilidade do seu site, é melhor não deixar de experimentar o próprio teste de compatibilidade com dispositivos móveis do Google. Embora faça parte do Search Console, você também pode testar as coisas, mesmo se não tiver uma conta.

Para examinar a fluidez do layout do seu site ou blog, você adiciona o seu URL ou mesmo o código. Assim que você clicar no botão de teste, o Teste de compatibilidade com dispositivos móveis cuidará de todo o resto. Depois de analisar a página, o Teste de compatibilidade com dispositivos móveis fornecerá o resultado, bem como se há erros e outros enfeites.

CrossBrowserTesting

Da mesma forma que testar seu site para dispositivos móveis, você precisa ver o quão compatível ele é com diferentes navegadores da web. Para sua sorte, em vez de fazer tudo manualmente, você pode se beneficiar do CrossBrowserTesting. Com vários navegadores de desktop e móveis, o software o ajudará a tornar sua página otimizada para todos os navegadores populares. Para obter a essência disso, você pode até mesmo assistir às apresentações disponíveis e ver tudo o que é possível com o notável CrossBrowserTesting.

A ferramenta vem em três pacotes diferentes, garantindo que os desenvolvedores da web e as equipes encontrem a solução certa para suas necessidades. Lembre-se de que você pode iniciar um teste sem riscos e experimentar esta solução poderosa em primeira mão. Alguns dos recursos contêm testes manuais e automáticos, depuração, capturas de tela, dispositivos reais, testes paralelos e integrações de CI, para citar alguns.

Atômico

O Atomic faz duas coisas: ajuda a construir uma interface usando arquivos de design existentes (PS ou Sketch) e ajuda a criar um protótipo desses designs com animações personalizadas. Crie aplicativos personalizados sem as limitações dos tipos de dispositivos e veja como esses designs interagem em várias plataformas. Um mecanismo otimizado de movimento permitirá que você faça movimentos animados que enriquecerão a interface do usuário do seu aplicativo com alguns toques modernos. Para cada um de seus designs, você pode obter uma URL personalizada que pode compartilhar com sua equipe de design ou com pessoas que executam dispositivos diferentes e ver como o protótipo do aplicativo interage com eles.

Veja, o que o Atomic está tentando fazer aqui é dar aos desenvolvedores e, claro, designers, uma chance de tornar mais fácil em termos de construção de protótipos que funcionem em todos os principais dispositivos. Codificar tal projeto individualmente levaria uma quantidade absurda de tempo, mas usando o Atomic - esse processo é rebaixado para um único projeto que funciona igualmente bem em todas as plataformas em que está sendo testado. O Atomic registra seu histórico de design e registra as ações que você executou para que você possa reverter para uma revisão específica a qualquer momento. Os membros da equipe podem ser convidados a colaborar em projetos juntos, e existe uma função de feedback para coletar feedback diretamente se houver necessidade.

Origami

Não esconderemos o fato de que algumas dessas ferramentas são, na verdade, para prototipar interfaces de design e, em particular, interfaces de usuário. Parece que a porta para o mercado se abriu nos últimos anos, e agora empresas como o Google e o Facebook estão seguindo o exemplo para atender às necessidades dos designers gráficos profissionais. Origami é uma biblioteca de prototipagem de design construída pelo Facebook.

Origami já viu o uso em plataformas populares como Instagram e Facebook Messenger, e agora qualquer pessoa com acesso ao seu kit de ferramentas de desenvolvimento terá a opção de recriar alguns daqueles famosos padrões de interface usando Origami. Os componentes modernos são o que torna o back-end do Origami tão favorável. Os elementos de rolagem, deslize e toque foram todos cuidadosamente projetados e criados para refletir as possibilidades da tecnologia de ponta. Origami, como um aplicativo nativo, permitirá que você importe seus designs do Sketch diretamente para o Origami para que você possa visualizar como seus designs ficariam ao vivo no navegador. E sim, Origami funciona para prototipagem de desktop também. De muitas maneiras - é uma ferramenta universal.

Microsoft Flow

Com o Microsoft Flow, estamos entrando em um desenvolvimento de design de nível mais empresarial. O Flow é para construir fluxos de trabalho que podem executar automaticamente várias tarefas em nome de seu próprio processo de desenvolvimento. Por que isso seria útil no design? Bem, por um lado, isso ajuda a sincronizar dados em muitos dispositivos. Em segundo lugar, tem um sistema de notificações bacana que você pode usar para configurar alertas e muito mais. Dessa forma, sua equipe e seus resultados permanecem intactos quando se trata de estar atualizado com o que está acontecendo em toda a estrutura de design.

O que torna o Flow tão atraente também é a quantidade de serviços aos quais ele pode se conectar - Twitter, Dropbox, Slack, GitHub, Google Drive, para citar alguns. No momento em que este artigo foi escrito, havia mais de 30 integrações de serviço prontamente disponíveis. E também não é isso. Os modelos personalizados ajudarão a explicar como o Flow pode se tornar uma adição útil ao seu fluxo de trabalho de design existente, ou desenvolvimento - não faremos o julgamento. Cada modelo é projetado para uma finalidade específica, como enviar uma mensagem de texto quando seu chefe lhe enviar um e-mail, adicionar leads do Twitter ao CRM ou fazer backup de seus arquivos. Esses modelos são apenas a ponta do iceberg e têm o objetivo de inspirá-lo a criar fluxos personalizados para os processos exatos de que você precisa.

1140 Grid

Os desenvolvedores apenas para dispositivos móveis não gostam de admitir, mas a abordagem que prioriza o desktop ainda é a melhor maneira de reduzir um design para ser adequado a diferentes tipos de dispositivos. Os desenvolvedores construíram 1140 grades responsivas para telas de 1280 px de largura, com a capacidade de fazer downgrade para telas menores. Infelizmente, o site original agora está extinto, mas todos os arquivos de código aberto disponíveis ainda estão no GitHub, e alguma documentação está disponível para ajudá-lo a construir seu primeiro site de grade CSS.

Imagens adaptativas

Já aprendemos algumas coisas sobre imagens responsivas; a mais importante delas é o fato de que as imagens precisam ser otimizadas para todos os tipos de dispositivos e reduzidas para fornecer a melhor experiência possível ao usuário, sem prejudicar o desempenho do site. Pense em quão mais rápida a web seria se cada site começasse a entregar conteúdo visual com desempenho otimizado para seus visitantes.

O tráfego geral da web cairia em uma quantidade impressionante, mas a menos que isso seja aplicado nativamente, não veremos uma mudança como essa acontecendo por muito tempo. No entanto, existem alternativas. Uma delas é a Adaptive Images. O algoritmo Adaptive Images é capaz de detectar o tipo de dispositivo com o qual um usuário está acessando suas páginas e fornecer a esse usuário uma imagem criada mais especificamente que atenderia aos requisitos de um dispositivo com um tamanho de tela muito menor. Adaptive Images se destaca porque se integra perfeitamente a sistemas populares de gerenciamento de conteúdo, sem causar a quebra de páginas. Então, em essência, não há muitos motivos para NÃO usar Imagens Adaptáveis.

FitVids

Mídia (arquivos, fotos, músicas, vídeos, etc) é o que mais retarda a web. Infelizmente, não aprendemos como gerenciar grandes quantidades de dados para fornecer ao usuário uma experiência de navegação que reflita a funcionalidade minimalista. A largura de banda ainda não é gratuita. E certamente pode ser caro nos países em desenvolvimento. Chris Coyier, que executa CSS-Tricks, não pensou duas vezes quando decidiu retribuir à comunidade de desenvolvedores, com FitVids - uma biblioteca jQuery fluida para fazer incorporação de vídeo perfeita em seus sites responsivos. É muito importante fornecer essas experiências ponto a ponto para os usuários. Dessa forma, eles nunca podem questionar a qualidade da plataforma que estão navegando.

Wirefy

O Wirefy cumpre a função de ir de um esboço de design a uma implementação completa de protótipo. Para atingir o resultado desejado, deve haver uma maneira de reunir os elementos da IU rapidamente. É aí que o Wirefy se encaixa melhor. Wirefy é a camada sobre a qual você pode construir. Pegue o layout e gerencie de acordo com seus próprios requisitos. Seja removendo componentes ou gerenciando os recursos de estilo. Desnecessário dizer que construir um protótipo com o qual um cliente possa interagir, vai lhe dar uma quantidade razoável de “pontos extras” pelo esforço.

FitText

Texto ou tipografia, se preferir, desempenham um papel importante em designs responsivos. Primeiro, você tem que acertar o layout, mas não pode se esquecer de alinhar sua tipografia. Isso refletirá as mesmas qualidades em todos os dispositivos e mídias que acessam seu conteúdo. Semelhante ao FitVids, é aqui que entra o FitText. É uma biblioteca jQuery simples para dimensionar seus títulos que corresponderão ao tamanho de um elemento pai. Dessa forma, suas manchetes importantes ficarão sempre em destaque, totalmente alinhadas aos modernos padrões de web design.

Responsinator

Já se foram os dias em que era necessário verificar a compatibilidade do design de um site por meio de vários dispositivos físicos. Na verdade, esses tempos existiram. Mas, devido à evolução do software, agora você pode verificar a capacidade de resposta de um site em um grande conjunto de dispositivos. Você pode fazer isso apenas inserindo o URL do seu site em uma ferramenta como o Responsinator. É realmente um feito notável de tecnologia de design e você economizará muito tempo no processo de design. Agora você pode carregar seu site e testá-lo com os dispositivos inteligentes mais populares e modernos. Agora, você poderá ver se a qualquer momento, você pode fazer melhorias em seu site.

Ghostlab

Ghostlab traz uma reviravolta única para testes no navegador. O mecanismo do Ghostlab pode conectar toneladas de dispositivos e permitir que você navegue em um site em vários dispositivos a partir de um único local. Isso dá a você uma compreensão em tempo real do desempenho do seu código em sua lista de dispositivos. Por exemplo, você pode estar procurando por bugs em suas folhas de estilo. Você pode utilizar o inspetor de código do Ghostlab para corrigir quaisquer problemas de código. Todas as alterações feitas em seu dispositivo principal serão refletidas em todos os outros dispositivos em tempo real. Essa é a melhor parte do Ghostlab. Você pode até inspecionar o JavaScript e modificá-lo. Ghostlab também sincroniza dispositivos online e offline. Isso empurra rapidamente qualquer nova mudança em seus servidores de produção assim que você ficar online. E, além de tudo isso, Ghostlab é um grande defensor da moderna tecnologia de desenvolvimento de front-end. Isso mantém os desenvolvedores interessados ​​em melhorar seus fluxos de trabalho de desenvolvimento.

Ferramentas de web design responsivas para desenvolvedores front-end

Como foi isso para uma boa atualização de memória e compreensão? Cobrimos algumas ferramentas realmente impressionantes, mas o mercado de ferramentas de design responsivas está crescendo com o tempo. Às vezes, não se trata apenas das ferramentas que nos fornecem dicas diretas de código ou uma estrutura com a qual trabalhar. As ferramentas que nos inspiram a tornar nossos aplicativos e website mais responsivos no que diz respeito ao design. A experiência do usuário sempre vem em primeiro lugar, e não há maneira melhor de melhorar a experiência do usuário do que melhorando a interface do usuário. É exatamente isso que se torna a experiência do que você está construindo. Você encontrou algumas ideias novas nesta lista? Adoraríamos que você os compartilhasse conosco, sempre inspirando para ler o que os outros estão vindo com!