50 úteis ferramentas de design responsivo para designers
Nos últimos dias, mostramos alguns dos melhores temas responsivos para WordPress e Joomla que você pode baixar e usar em seu site. Hoje vamos dar-lhe as ferramentas. Compreendendo frameworks, serviços e scripts para download, achamos que eles serão de grande ajuda quando se trata de desenvolvimento web responsivo.
Para facilitar o uso de toda a lista de ferramentas, as categorizamos nas seguintes seções:
- Grelha e Estruturas
- Folhas de esboço e wireframes
- JavaScript e jQuery Plugins
- Teste e visualização
- Sliders
- Outras
Grelha e Estruturas
[De volta ao topo]
Columnal
Columnal é um projeto Pulp + Pixels, que foi emprestado do cssgrid.net, enquanto algumas inspirações de código foram tiradas de 960.gs. O Columnal ajuda muito no seu design da Web responsivo, tornando suas grades flexíveis para mudar dinamicamente quando a janela do navegador é redimensionada.
Esqueleto
O Skeleton é um framework CSS simples e poderoso, que é apreciado principalmente por desenvolvedores e designers por causa de sua simplicidade e eficiência. Não há levantamento pesado com Javascript aqui, somente CSS bom e puro com documentação limpa.
MenosQuadro 4
Menos Framework é mais ou menos um framework, em nome de seu criador. É um sistema de grade CSS adaptável baseado no uso de consultas de mídia CSS, o que facilita muito o desenvolvimento de sites responsivos..
Sistema de grade semântica
O Semantic Grid System é usado para projetar layouts de grade responsivos. Ele usa extensões CSS pré-processadas como LESS, SCSS ou Stylus para oferecer máxima eficiência. Você pode selecionar larguras de coluna e medianiz, escolher o número de colunas e alternar entre pixels e porcentagens.
Sistema de Grade Dourado
O Golden Grid System é um sistema de grade fluida que serve como ponto de partida do seu design de web responsivo. Ele permite que o site ofereça páginas de boa aparência que variam de 240 a 2560px.
320 e até
320 e Up é um clichê de consultas de mídia CSS, que serve para ser o modelo inicial para o seu design responsivo. Segue-se uma abordagem completamente inversa do que os outros vários padrões disponíveis.
Inuit.css
O Inuit.css é um framework CSS, extremamente fácil de usar, mesmo para iniciantes. Ele tem uma abordagem minimalista, portanto, você precisa lidar apenas com as coisas necessárias, mas, se necessário, também pode ser estendido com vários plug-ins disponíveis.
Gridless
Gridless é um clichê para criar sites responsivos e cross-browser com uma bela tipografia. Esta ferramenta se concentra no desenvolvimento progressivo de um projeto, e serve como ponto de partida de qualquer projeto.
1140 CSS Grid
1140 CSS Grid é um ótimo sistema de grade CSS projetado pelo designer de Melbourne Andy Taylor, que permite que seu design se encaixe perfeitamente em 1140px para monitores grandes e seu layout fluido se adapte perfeitamente a outras resoluções menores com muito pouco trabalho extra.
1KBCSSGrid
1KB CSS Grid projetado por Tyler Tate, é um gerador de CSS simples e leve. Ele permitirá que você defina o número de colunas, a largura da coluna e a largura da medianiz e poderá obter um CSS para download para a grade de seus sites.
Bootstrap
Bootstrap, criado e mantido por Mark Otto e Jacob Thornton no Twitter, é um excelente conjunto de elementos de interface do usuário, layouts e ferramentas de javascript, disponíveis gratuitamente para você baixar e usar em seus projetos de web design.
Calculadora de Grade Fluida
Esta ferramenta simples irá ajudá-lo a pegar rapidamente o CSS do design do seu site de grade fluida.
Grades Fluidas
Fluid Grid é uma estrutura de grade fluida simples, mas útil, que cria layouts responsivos baseados em 6, 7, 8, 9, 10, 12 ou 16 colunas.
Flurid
O Flurid é um framework de grade CSS cross-browser simples e muito útil com até 16 colunas. E além disso, não esconde pixels em margens.
Gridset
Gridet é uma ferramenta para fazer grids de qualquer tipo, como, colunar, assimétrico, fixo, ratio, composto, responsivo e muito mais. Esta ferramenta de Mark Boulton ainda está em beta, mas mostra-se promissora. E eu mencionei, usando é tão simples como incorporar um link.
Gridpak
O Gridpak é um gerador de grade responsivo on-line, no qual o número de colunas, preenchimento e medianiz pode ser alterado e os pontos de interrupção personalizados podem ser adicionados. O CSS é gerado pela ferramenta e preparado para download. Ele também fornece modelos de grade PNG, que podem ser usados para fins de design no Photoshop.
SimpleGrid
O SimpleGrid, desenvolvido por Michael Kuhn, é uma estrutura CSS muito simples e direta para criar layouts infinitos baseados em grade. Por padrão, o SimpleGrid está preparado para 4 faixas distintas de tamanhos de tela.
Susy
Susy por Oddbird, é semelhante em ação ao sistema de grade semântica. Não usa marcação extra ou qualquer outra classe especial, mas destina-se apenas aos usuários do Saas e sua extensão Compass.
Grade Fluida Minúscula
Tiny Fluid Grid é um incrível aplicativo da web, que pode ajudá-lo a determinar o sistema de grade do seu site de forma interativa. Você pode definir o número de colunas, a porcentagem da medianiz, a largura mínima e máxima do layout do seu site e pode obter um CSS para download..
Sistema de Grade Variável
O Sistema de Grade Variável é projetado e desenvolvido pela SprySoft e é baseado no Sistema de Grade 960. Ele permite que os desenvolvedores e designers gerem a grade personalizada e façam o download do arquivo CSS acompanhante com base nessa grade.
Folhas de esboço e wireframes
[De volta ao topo]
Folhas de rascunhos de design da Web responsivo
Essa ferramenta é útil para mapear as veiculações de vários elementos no layout do website em vários dispositivos. Com a ajuda deste dispositivo, você pode ter uma ideia de onde colocar os elementos necessários de um site para diferentes tamanhos de tela e resoluções.
Wireframes responsivos
O Wireframes Responsivo é uma ferramenta experimental criada por James Mellers da Adobe. Ele é construído apenas com HTML e CSS (nenhuma imagem ou JS foi usada), que você pode usar para visualizar a aparência do design responsivo em navegadores reais de vários desktops e dispositivos móveis..
StyleTiles
O Style Tiles dá a você uma maneira de desenvolver uma ideia de como um site seria, independente dos estilos complicados que entram em jogo. Ele oferece a oportunidade de um fluxo de trabalho de design responsivo perfeito e também a capacidade de integrar feedbacks de clientes.
JavaScript e jQuery Plugins
[De volta ao topo]
Adapt.Js
Adapt.js é uma solução de JavaScript e uma excelente alternativa para as consultas de mídia CSS. Usar a abordagem @media é uma boa prática, mas isso não funciona para todos os navegadores. Nathan Smith, o criador do 960 Grid System, lançou o Adapt.js, uma biblioteca javascript muito leve para superar esse problema.
Isótopo
Isotope é um incrível plugin jQuery, que se mostra muito útil ao projetar um design responsivo. Isso não só ajuda a reorganizar os elementos de uma página quando a janela do navegador é redimensionada ou o tamanho da tela é menor, mas também ajuda a filtrar esses elementos.
Alvenaria
A Maçonaria é um excelente plugin jQuery, que é usado para criar layouts dinâmicos e adaptativos. Este plugin ajuda a reorganizar os elementos em seu design responsivo, para que eles possam se encaixar melhor nos pontos abertos da grade.
Respond.js
O Respond.js é um script rápido e leve (3 Kb e 1 Kb gzipped), cujo principal objetivo é permitir o design responsivo da Web naqueles que não suportam as consultas de mídia CSS3, como os navegadores IE.
TinyNav.js
O TinyNav.js é um pequeno e leve plugin jQuery, com apenas 362 bytes, que converte grandes listas de navegação em pequenos menus suspensos para telas menores.
Wookmark jQuery Plugin
Wookmark é um plugin jQuery que detecta o tamanho da janela do navegador e organiza automaticamente os elementos da página em colunas. Você também pode ver uma prévia ao vivo na parte inferior da própria página.
Teste e visualização
[De volta ao topo]
ProtoFluid
O ProtoFluid é uma ferramenta de prototipagem baseada na web que permite testar os protótipos do seu site em vários tamanhos e resoluções de tela. Basta digitar o URL, selecionar o dispositivo (ou quaisquer dimensões personalizadas) e pressionar o lançamento. Uma vez que é uma ferramenta baseada na web, também permite usar outras extensões como o FireBug.
Responsivo.
Responsive.Is é criado pela TypeCast, outra ferramenta emulador de navegador, que você pode usar para testar seu design responsivo. Basta digitar um URL e ele mudará automaticamente de tamanho, dependendo do dispositivo escolhido.
Responsivepx.Com
ResponsivePx é uma ferramenta incrível para testar o design do seu site responsivo. A principal característica que o distingue dos outros é sua capacidade de redimensionar o site pixel a pixel. Esse recurso impressionante permitirá identificar os pontos de interrupção e também testar como as consultas de mídia CSS estão funcionando em seu site.
Ferramenta de teste de design de web responsivo
Uma ferramenta de teste incrível, que permite visualizar seu website responsivo em vários tamanhos de tela simultaneamente em uma única tela, enquanto você cria ou projeta-os. Eu gosto desta ferramenta principalmente porque mostra todas as resoluções de tela lado-a-lado, o que facilita a depuração.
ReView.Js
O ReView é um sistema de viewport dinâmico, desenvolvido em JavaScript puro, que oferece uma experiência de visualização fantástica para o design responsivo da Web..
Screenfly
Screenfly by QuirkTools, é uma ferramenta incrível que lhe permitirá visualizar seu site responsivo em uma variedade de dispositivos: Desktop, Tablet, Celular e TV. Ele também tem opções para ativar ou desativar a rolagem ou mesmo para girar a tela.
Screenqueri.es
Screenqueri.es é uma ferramenta de teste de design responsivo pixel-perfeito. Basta digitar qualquer endereço de site que você deseja verificar, e esta ferramenta irá mostrar o site em vários tamanhos de tela de acordo com o dispositivo. Você também pode redimensionar manualmente o tamanho pixel a pixel para identificar os pontos de interrupção.
O Responsinador
Teste seu site em vários dispositivos de um iPhone e iPad, para um Kindle e no Android no Responsinator. Ele também mostra seu site no modo retrato e paisagem. Eu gosto muito dessa ferramenta por causa dos contornos dos dispositivos exibidos na página, o que traz mais significado para todo o processo.
Sliders
[De volta ao topo]
Mirtilo
O Blueberry é um fantástico controle deslizante de imagem de código aberto jQuery, que foi escrito para funcionar especificamente para layouts fluidos ou responsivos..
Elastislide
Quer um carrossel que se ajustará automaticamente ao tamanho da tela quando a janela do navegador é redimensionada ou quando você está em uma tela menor? Elastislide é o plugin jQuery mais adequado às suas necessidades.
Slider CSS3 responsivo
Este é um slider CSS3 responsivo puro que pode se adaptar a qualquer tamanho de tela e resolução de tela com facilidade. O legal desse controle é que as setas vão dentro da caixa quando o tamanho da tela do dispositivo é pequeno o suficiente. Não é necessário JavaScript.
ResponsiveSlides.Js
ResponsiveSlides.Js é um plugin jQuery muito simples e extremamente leve (apenas 1Kb) que cria um controle deslizante responsivo usando listas não ordenadas. Ele funciona em uma ampla gama de navegadores, também no IE6 e acima.
Outras
[De volta ao topo]
Imagens adaptativas
Adaptive Images é uma ferramenta online para web design responsivo, que detecta o tamanho da tela dos visitantes e cria, armazena em cache e entrega imagens redimensionadas, com base no tamanho e resolução da tela..
FitText.Js
FitText.js é uma pequena ferramenta javascript, que permite o redimensionamento automático de texto e manchetes quando a janela do navegador é redimensionada. Não há mais problemas de incompatibilidade de tamanho de texto com esta ferramenta a bordo.
FitVid.Js
Quer redimensionar os vídeos incorporados quando a janela do navegador é redimensionada ou o dispositivo é de menor resolução? FitVid.Js pode ajudá-lo a conseguir isso. É um plugin jQuery leve, simples e fácil de usar, usado para obter vídeos incorporados de largura de fluido.
Imagens de Retina
Retina Images é uma solução de javascript incrível, que servirá automaticamente imagens @ 2X maiores e de alta resolução quando visualizadas na tela de retina. Tudo o que você precisa fazer é colocar uma versão de alta resolução de cada imagem e gerenciar o resto.
Grelha de fotos responsiva sem costura
Grelha de foto responsiva sem costura exibe as imagens de ponta a ponta no navegador, sem quaisquer lacunas entre as imagens. As fotos são lado a lado e elas fluem da esquerda para a direita ao longo da página em colunas. O número de colunas é ajustado conforme a janela do navegador é redimensionada.
SlabText
SlabText é um plugin jQuery ou ferramenta de Brian McAllister baseado no algoritmo slabText, que divide os títulos em linhas antes de redimensionar cada linha para preencher o espaço disponível. É bastante semelhante ao plug-in FitText.Js em ação.
Zurb - ResponsiveTables
Alguma vez você já se perguntou como lidar com as tabelas de big data no design responsivo? Zurb, um combo CSS / JS dá-lhe a resposta; ele pega as tabelas de dados e as modifica para que elas não quebrem o layout responsivo em dispositivos de tela menores.
Categorizr
Categorizr é um script PHP muito pequeno, oferece aos visitantes uma experiência na Web mais direcionada. Ele ajudará você a fornecer designs específicos de dispositivos para Tablet, TV, Celular ou Desktop..
Marcador de Consulta de Mídia
O Bookmarklet de Consulta de Mídia mostra o tamanho da janela de visualização atual e qual consulta de mídia foi acionada..
A calculadora responsiva
A Responsive Calculator é uma ferramenta on-line muito simples que pode ajudar você a transformar os pixels em porcentagens ao projetar seu website responsivo.
Próxima semana
Na segunda semana desta série, mostraremos a você tutoriais que realmente levarão você ao Responsive Web Design (RWD).
Não perca.
