Compilação massiva de ferramentas de designer
Os designers da Web têm uma grande variedade de ferramentas disponíveis para eles, desde a organização de seus pensamentos sobre um determinado design até a depuração do design final.
Mas com tantas ferramentas por aí, como você pode determinar quais são realmente úteis e quais vão desperdiçar seu tempo?
Nós compilamos uma lista massiva de algumas das melhores e mais úteis ferramentas disponíveis para web designers .
Intencionalmente deixados de fora da lista estão ferramentas comuns que a maioria dos designers já está usando (como Coda, Photoshop ou GIMP do Dreamweaver ou do Panic, e programas de software comuns similares que praticamente todos os designers já possuem em seu kit de ferramentas).
Essas são ferramentas que economizarão tempo, farão de você um projetista mais eficiente, simplificarão ou acelerarão o processo de design, ou tornarão sua vida mais fácil.
Compilação de Ferramentas Offline
A maioria dos arredondamentos de ferramentas úteis de web design se concentra apenas em ferramentas on-line.
Mas há algumas ferramentas muito úteis que você pode utilizar para abrir suas opções quando se trata de design. Essas coisas podem facilitar certas tarefas, inclusive trabalhando com clientes indecisos.
Tablets Gráficas
Os tablets gráficos (às vezes também chamados de tablets de desenho, blocos de gráficos ou tablets digitalizados) são uma ferramenta extremamente útil no arsenal de um web designer. Enquanto a maioria dos designers pode desenhar muito habilmente com um mouse, um tablet torna muito mais fácil e rápido.
A maioria dos comprimidos consiste em duas partes básicas: o próprio tablet e a caneta (ou caneta). Muitos também vêm com um disco (que funciona de forma semelhante a um mouse, mas no tablet em vez de um mouse pad ou sua mesa). A principal consideração para o tablet é o tamanho, enquanto a principal consideração da caneta é a sensibilidade à pressão.
Os comprimidos em si estão disponíveis em tamanhos que variam de cerca de 4 "x 5" até 19 "x 13". Naturalmente, quanto maior o tablet, mais caro ele será. Na maioria dos casos, os web designers podem usar tablets na extremidade menor do espectro, a menos que planejem fazer muitas ilustrações (e mesmo assim é completamente possível obter resultados de qualidade a partir de um tablet de tamanho médio).
E tablets menores são mais portáteis, o que os torna convenientes para designers que nem sempre querem estar amarrados à mesa.
As canetas são sensíveis à pressão para proporcionar uma experiência mais realista . Sensibilidades comuns variam de 256 níveis de pressão até 2.048 níveis. Quanto maior o nível de sensibilidade, mais você se sentirá usando uma caneta e um papel.
Tablets de gráficos populares
Wacom é provavelmente o fabricante de tablets mais popular por aí. Eles têm quatro linhas de produtos diferentes: Bamboo (que inclui seus produtos Bamboo Craft e Bamboo Fun), voltado para consumidores e amadores; Graphire, seu tablet Bluetooth; Intuos, sua linha mid-range para profissionais criativos; e Cintiq, sua linha de alta tecnologia que incorpora um monitor no tablet para uma experiência de “pen-on-screen” (um deles até apresenta uma tela de 21 polegadas).
Aiptek faz uma linha de tablets de baixo custo que começam com apenas US $ 50. Eles oferecem um tablet USB de 12,1 ″ por menos de US $ 130 (comparado a US $ 469 para um tablet da Wacom de tamanho comparável). A oferta mais interessante da Aiptek, no entanto, é o My Note Premium (US $ 170), que permite que você desenhe um pedaço de papel em cima do tablet com uma caneta real e ele grava tudo o que você faz. Há memória suficiente para até 100 páginas escritas e vem com um slot para cartão SD para expandir sua capacidade. E se você quiser usá-lo apenas para tomar notas em uma reunião, ele pode ser executado fora de 4 pilhas AAA, o que significa que você não terá que trazer seu laptop junto com você.
UC-Logic é o outro grande fabricante de mesa gráfica. Seus produtos caem na faixa intermediária de preços para tablets, com um tablet de 9 ″ x12 ″ (o PF1209-Pro) chegando a cerca de US $ 250. Eles têm tablets disponíveis que custam apenas US $ 40.
Placas de Humor
Placas de humor (também chamadas de quadros de inspiração) são uma ótima ferramenta para designers que trabalham com clientes que podem não ter uma idéia clara do que querem.
Placas de humor muitas vezes tomam a forma de uma colagem que inclui elementos de design para o projeto. Exemplos de elementos incluídos podem ser amostras de tipografia, esquemas de cores, exemplos gráficos específicos ou elementos gerais de “humor” que refletem a visão do designer para a impressão que o site deve dar aos visitantes.
Placas de humor são frequentemente usadas no campo de design de interiores para mostrar aos clientes idéias para redecorar uma sala ou uma casa inteira. Eles também são usados na indústria da moda para servir de inspiração e direção para uma linha ou uma temporada. Mas eles são tão valiosos para designers gráficos e web.
Dependendo do tipo de cliente com o qual você está trabalhando, você pode criar uma colagem solta com amostras sobrepostas de maneira orgânica . Se o seu cliente estiver em um campo criativo ou estiver familiarizado com o processo criativo, esse tipo de quadro de humor pode funcionar muito bem.
Se o seu cliente, por outro lado, estiver acostumado a um ambiente mais corporativo ou formal, a criação de um mood board mais organizado provavelmente será mais adequada.
Use cabeçalhos para separar o esquema de cores, os elementos de design específicos, a tipografia e outras partes do seu quadro de modo a dar estrutura a toda a estrutura.
Se você tem várias ideias para direções nas quais um projeto pode ir, criar algumas placas de humor diferentes pode ser uma ótima maneira de obter feedback do cliente e refinar ainda mais suas próprias ideias.
Criar dois ou três exemplos diferentes para mostrar a um cliente pode ser valioso para obter orientação adicional do seu cliente sem gastar horas ou dias em um modelo de site real apenas para ser informado de que não é nada parecido com o que está procurando.
E esse é realmente o principal benefício do uso de mood boards no seu processo de design. Um moodboard geralmente leva muito menos tempo para criar do que um mock-up de site .
Usar painéis de modo para obter mais feedback de um cliente indeciso ou inseguro antes de dedicar horas a um design que será rejeitado apenas torna todos mais felizes.
Recursos para criar seus próprios moodboards
Nós publicamos um artigo sobre Por que os Conselhos de Humor importam no final do ano passado. O artigo aborda os fundamentos da criação de painéis de modo e por que você gostaria de usá-los. É um ótimo ponto de partida.
Do sofá tem um tutorial em vídeo chamado Criando uma placa de humor eficaz . Tem cerca de sete minutos e abrange os fundamentos da criação de um painel digital para projetos.
O Flickr tem um Placas de Inspiração pool que coleta imagens de mood e inspiration board de várias disciplinas de design. É um bom lugar para encontrar alguma inspiração ou apenas dar uma olhada em exemplos de como os outros estão se aproximando de seus comitês de humor.
Compilação de ferramentas on-line
Ferramentas de web design on-line são um centavo de uma dúzia. Classificar através deles para encontrar os que realmente se destacam pode parecer levar mais tempo do que você poderia esperar economizar usando-os.
Mas, abaixo, encontramos as melhores ferramentas para tipografia, CSS, AJAX e Javascript, seleção de cores e ferramentas para facilitar a criação de elementos de página individuais.
Mais uma vez, essas são algumas das melhores ferramentas disponíveis para o que elas fazem, então você não terá que perder um monte de tempo testando dezenas de ferramentas diferentes.
Ferramentas de Tipografia
Há uma série de ferramentas on-line para experimentar a tipografia nos designs de seu site. Alguns permitem que você compare tipos diferentes de lado a lado. Alguns permitem apenas que você experimente um estilo de cada vez. E outros ainda mostram diferentes pilhas de fontes recomendadas.
Outras ferramentas de tipografia da web úteis incluem aplicativos para converter tamanhos de pixel em unidades e uma variedade de Lorem Ipsum e outros geradores de texto fictícios. Ao todo, existem ferramentas de tipografia disponíveis para praticamente todas as necessidades possíveis de um web designer.
Typetester
O Typetester permite comparar até três fontes lado a lado .
Você pode selecionar qualquer fonte do seu próprio computador ou usar fontes do menu de fontes comuns do sistema e fontes seguras da Web. Ele também permite que você altere as opções de cor, entrelinha, rastreamento, tamanho e outras opções de estilo.
É uma ótima ferramenta ao tentar decidir quais fontes usar para diferentes elementos ou até mesmo para compilar suas próprias pilhas de fontes (uma vez que permite comparar várias fontes lado a lado).
Conjunto de tipos de CSS
O CSS Type Set permite colar qualquer texto que você queira modificar em uma caixa, ajustar os controles deslizantes e escolher outras opções de formatação e copiar o CSS gerado.
É uma maneira rápida e fácil de formatar qualquer texto que você precise, de parágrafos a cabeçalhos.
As opções incluem cor do texto, entrelinhamento, rastreamento, deslocamento da linha de base, decorações de texto, alinhamento e muito mais.
Melhores pilhas de fontes CSS
Embora não seja uma ferramenta tradicional, por si só, este artigo oferece várias alternativas às pilhas de fontes padrão geralmente usadas em CSS.
Além de oferecer diretrizes para criar suas próprias pilhas de fontes, este artigo também fornece uma grande variedade de pilhas de amostras que você pode usar . Um excelente recurso quando você está se sentindo um pouco perplexo com suas opções de tipografia.
HTML-Ipsum
A maioria dos geradores de Lorem Ipsum padrão on-line dá-lhe um bloco de texto e nada mais. E isso é ótimo se você está apenas tentando preencher algum espaço.
Mas o HTML-Ipsum fornece texto que já foi marcado com tags HTML básicas (parágrafos, cabeçalhos, listas desordenadas, etc.) para que você possa ver como todos os diferentes elementos interagem uns com os outros. É uma enorme economia de tempo.
PXtoEm.com
PXtoEM.com faz exatamente o que diz: converte fontes de tamanho de pixel em fontes em tamanho .
As opções que ele oferece são o que fazem dele uma ferramenta realmente impressionante e flexível.
Você pode escolher o tamanho da fonte do corpo base e obter conversões com base no tamanho de fonte padrão do navegador (por exemplo, se definir a porcentagem da fonte básica como 62,5%, de modo que um tamanho de 10 pixels seja igual a 1em, selecione seu tamanho padrão).
Typechart
O Typechart permite que você navegue por uma variedade de fontes seguras para a Web e veja como elas aparecerão nos sistemas Windows e Mac .
Você pode encontrar fontes com base no tamanho, sejam elas serifas ou sem serifas, ou ênfase. Ele inclui apenas fontes seguras para a Web, portanto as opções oferecidas são limitadas. Mas para tipografia básica, é uma ótima ferramenta que pode fornecer muita inspiração.
E você pode copiar e colar o CSS para cada estilo sem sair da página.
Virando Típico
Invertendo Typical permite visualizar as fontes comuns que você tem no seu computador em um formato de grade para facilitar a escolha da fonte correta para o seu projeto atual.
Essa é uma ótima ferramenta quando você não está interessado em apenas usar as fontes padrão seguras para a Web e deseja ver mais opções.
É especialmente útil se você não quiser percorrer algumas centenas de fontes instaladas em seu computador e apenas quiser ver as mais populares.
Ferramentas CSS
CSS é quase tão importante em web design como HTML. E existem centenas de ferramentas para tornar seu CSS mais limpo, mais enxuto, mais eficiente e, geralmente, mais eficiente, economizando tempo e esforço para aperfeiçoar manualmente suas folhas de estilo.
A compactação de suas folhas de estilo, que podem ajudar a acelerar o tempo de carregamento de seus sites, é simplificada usando uma ferramenta on-line automática. Existem ferramentas disponíveis para eliminar declarações duplicadas também.
Cheat sheets mantêm os elementos básicos do CSS na ponta dos seus dedos para quando o café não chegou a funcionar de manhã e você está tendo dificuldades para lembrar em que ordem deve estar sua marcação de taquigrafia.
Embora a maioria dessas ferramentas faça um ótimo trabalho na limpeza do seu CSS, certifique-se de sempre manter um backup do original e testar o produto final gerado. Às vezes, um limpador ou compressor removerá algo que era necessário, afinal, quebrando seu site.
CSS SuperScrub
O CSS SuperScrub visa reduzir significativamente a complexidade e o tamanho de suas folhas de estilo .
Ele elimina as chamadas redundantes, elimina o conteúdo desnecessário e agrupa os elementos restantes para facilitar a edição mais tarde.
Existem algumas opções, incluindo uma para remover todo o espaço em branco na sua folha de estilo ou para inserir uma nova linha antes de abrir chaves.
Embelezador de Código
O Code Beautifier otimiza e limpa seus arquivos CSS .
Ele oferece um grande número de opções para formatar seu texto, incluindo compactar cores, classificar suas propriedades, converter todos os seus seletores em minúsculas, converter suas propriedades em maiúsculas ou minúsculas e escolher o nível de compactação que você deseja usar.
Você pode copiar e colar seu CSS no aplicativo ou fornecer um URL para seu arquivo CSS.
Drive CSS
O CSS Drive é um compressor CSS básico .
Você pode definir o quão compactado você quer que seu CSS seja (leve, normal ou super compacto), e como você quer que ele lide com comentários (seja para removê-los).
Há também um modo avançado que oferece muito mais opções, incluindo a remoção de espaços em torno de determinados caracteres, a remoção de guias, a remoção de novas linhas e muito mais.
Verificador de Redundância de CSS
Às vezes, no processo de criação de um site, você pode configurar seletores de CSS que não acabam se tornando na marcação final.
Esses seletores não fazem nada mais do que tornar suas folhas de estilo mais volumosas e difíceis de editar mais tarde.
O Redundancy Checker do CSS percorre sua folha de estilo e cada uma das suas páginas HTML para ver quais seletores não estão sendo usados e, em seguida, remove-os .
É uma ótima ferramenta para usar se você acha que pode ter seletores desnecessários em suas folhas de estilo.
Índice de propriedade CSS
O Índice de Propriedade CSS lista todas as propriedades CSS em ordem alfabética .
Clicar em qualquer uma das propriedades incluídas leva a uma definição e informações sobre o valor padrão, os valores permitidos e se ele herda de uma propriedade pai.
Guia de taquigrafia CSS
O uso de propriedades CSS abreviadas torna seus arquivos CSS menores do que usando propriedades longhand .
Mas lembrar qual ordem todos os diferentes elementos entram para todas as propriedades diferentes pode ser uma dor de cabeça, especialmente para aqueles que você não pode usar em todos os projetos que você faz.
Também inclui informações sobre os valores de propriedade padrão, portanto, se você optar por deixar uma propriedade, saberá o que ela assumirá como valor.
Ferramentas de cor
Escolher as cores certas para os projetos de seu site pode ser uma das decisões mais importantes que você toma em todo o processo de design.
Às vezes chegamos a um design com um esquema de cores predefinido (como quando um cliente já estabeleceu cores de marca) ou imediatamente sabemos quais cores queremos usar. Outras vezes, podemos ser livres para criar nossa própria paleta para o design.
Se você estiver criando um esquema de cores a partir do zero, geradores de paleta de cores e galerias podem ser uma grande ajuda.
Se você já tiver um esquema de cores, há outras considerações a serem consideradas, como acessibilidade e quais cores usar em quais partes do site.
Mas existem ferramentas para ajudar nessas decisões também. Abaixo estão algumas das melhores ferramentas disponíveis para gerenciar esquemas de cores.
Filtro de página da Web daltônicos
Considerando que algo entre 7 e 10% da população masculina tem algum grau de daltonismo (de acordo com Wikipedia ), garantir que seus sites ainda sejam acessíveis a essa população não é uma má ideia.
Essa ferramenta mostra como seus designs aparecerão para pessoas com vários distúrbios diferentes de daltonismo. Você pode visualizar os resultados de todo o site ou excluir imagens do resultado.
Eles também fornecem um link para uma ferramenta de seleção de cores segura para daltônicos.
Encontre cores correspondentes para o seu site
Essa ferramenta de paleta de cores encontra cores que coordenam com qualquer cor selecionada .
Você pode escolher uma cor em suas opções predefinidas ou inserir qualquer valor de cor hexadecimal ou RGB para obter paletas de coordenadas com base em esquemas de cores complementares, complementares, tridimensionais, tetrade, analógicos ou monótonos.
As cores fornecidas são todas semelhantes em intensidade, no entanto, o que significa que este é realmente apenas um ponto de partida para a criação de paletas de cores para seus projetos.
Gerador de paleta de cores
As fotos são ótimos lugares para procurar inspiração de design. Esta ferramenta pode criar uma paleta de cores a partir de qualquer imagem que você escolher (basta inserir o URL da imagem).
Ele fornece esquemas de cores sem brilho e vibrantes com base na imagem que você fornece.
A possibilidade de usar qualquer imagem on-line realmente torna essa ferramenta valiosa, pois economiza o tempo de download de uma imagem e depois faz o upload para um site como esse para gerar um esquema de cores (ou baixar e abrir em um programa gráfico para criar manualmente uma paleta de cores).
Kuler
A galeria de paleta de cores Kuler da Adobe é uma das melhores galerias de paleta de cores por aí.
Você pode navegar ou pesquisar mais de 10.000 paletas de cores enviadas pelos usuários do Kuler e, em seguida, fazer o download ou salvar seus favoritos para referência futura.
O Kuler também inclui uma ferramenta de criação de paletas muito poderosa que permite selecionar cores com controles deslizantes ou com base em valores de cores hexadecimais, RGB, CMYK, LAB ou hexadecimais.
Definir qualquer cor como a cor base, em seguida, alterará as cores ao redor para complementar.
COLOURlovers
COLOURlovers é outra ótima galeria de esquemas de cores .
Você pode pesquisar mais de 800.000 esquemas de cores (com base em 20 esquemas por página e 43.200+ páginas de esquemas). Além das paletas, você também pode pesquisar cores e padrões individuais com base nas paletas.
Um dos recursos mais úteis do COLOURlovers, porém, é a sua ferramenta de criação de padrões, que cria seus próprios padrões baseados em um esquema de cores predefinido ou em um que você cria dinamicamente.
Apenas certifique-se de entrar em contato com o proprietário dos direitos autorais do padrão se quiser usar um para o trabalho comercial.
100 cores aleatórias 2.0
Se você realmente não tem idéia de por onde começar o esquema de cores para um de seus projetos, 100 Random Colors 2.0 pode ser a ferramenta certa.
Ele faz exatamente o que o nome diz: apresenta 100 cores aleatórias, incluindo seus valores hexadecimais .
E se você não encontrar nada nos primeiros 100, você pode simplesmente apertar refresh e receber um novo conjunto!
Ferramentas de elemento individual
Há muitos geradores por aí que facilitam e agilizam a criação de botões, planos de fundo, formulários e outros elementos de design para seus sites.
Alguns deles são apenas enigmáticos, mas outros são de grande ajuda se você quiser criar algo como um botão Web 2.0 ou um plano de fundo básico.
As ferramentas de criação de formulários também podem ser muito úteis, especialmente se você quiser que seus clientes façam parte de seu próprio trabalho administrativo em seus formulários.
Eu conheço pelo menos dois designers que usam essas ferramentas para que não precisem criar uma interface simplificada personalizada para acessar o banco de dados de formulário ou para editar formulários para seus clientes. Eles economizam muito tempo, especialmente para criar formas mais complicadas.
Wufoo
O Wufoo é um construtor de formulários HTML que oferece mais de 80 modelos de formulários e esquemas de cores , além de permitir o controle total para criar formulários personalizados para seus clientes.
Os modelos facilitam e agilizam a criação de formulários padrão da Web (como páginas de registro ou formulários de contato).
Os formulários enviados são coletados automaticamente em um banco de dados que facilita a impressão, o envio de entradas individuais por email, o filtro, a pesquisa e a execução de outras funções avançadas sem a necessidade de criar uma interface personalizada.
Você pode até usar o Wufoo para criar formulários de pedidos on-line e integrá-los ao Authorize.net, PayPal ou Google Checkout.
BgPadrões
BgPatterns permite criar padrões lado a lado usando uma grande variedade de diferentes elementos de repetição.
Você pode selecionar sua cor de fundo, textura da tela e o ângulo do padrão. Você pode aplicar os planos de fundo criados no site BgPatterns para visualizá-los e, em seguida, fazer o download da imagem depois de finalizada.
Você também pode procurar padrões criados por outras pessoas. É a maneira mais rápida e fácil de criar planos de fundo simples e lado a lado.
Stripe Generator 2.0
Criar faixas repetidas para um site é demorado.
Claro, você pode criar modelos para listras comuns que você pode usar, mas e se você quiser uma faixa de pinos para um projeto, uma faixa larga para outro e um em um ângulo estranho para outro? Em breve, esses modelos simplesmente não parecem mais funcionar.
O Stripe Generator 2.0 oferece listras em uma variedade de ângulos , em praticamente qualquer largura que você escolher, com ou sem sombras e gradientes , e usando quaisquer cores hexadecimais que você deseja.
Eles também incluem uma galeria de faixas onde você pode ver o que os outros criaram.
Tartan Maker
Se a criação de planos de fundo listrados é demorada, criar fundos xadrez é uma enorme dor de cabeça.
É aí que entra o Tartan Maker. Selecione o tamanho do fio, as cores para o seu padrão e o ângulo e ele cria automaticamente.
Você pode visualizar seus projetos em tela cheia e baixar o arquivo.
Dotter do fundo de Pixelknete
Esse gerador de segundo plano cria um fundo pontilhado moderno com pontos progressivamente menores à medida que eles se movem para baixo na página.
Você pode selecionar até duas cores de ponto e duas cores para um plano de fundo gradiente (ou apenas uma única cor para um plano de fundo sólido).
Você também pode especificar a altura do padrão (o padrão é 700 pixels). O fundo criado se repete em um eixo horizontal.
Como gerador de botão
Se você ignorar o texto mal traduzido nesta página, verá que esse é um dos geradores de botão mais fáceis disponíveis . Adicione texto, gradientes diferentes, listras, imagens e muito mais aos seus botões.
Você pode selecionar as cores dos botões e das bordas, o tamanho geral (usando controles deslizantes ou campos de texto) e a espessura da borda, e o quão arredondado é o botão.
Se você incluir listras, terá muitas opções, incluindo cor, transparência, espessura, o espaço entre as listras e o ângulo.
Este é definitivamente o gerador de botões mais completo disponível.
Button Maker
Este gerador de botão permite criar facilmente botões de dois tons de 80 × 15 pixels .
Selecione as cores dos botões, as cores das bordas, onde a divisão entre as caixas deve ser e insira o texto para cada lado, e pronto!
Esta é uma daquelas ferramentas que não é carregada com recursos, mas faz o que foi projetada para fazer perfeitamente e sem problemas.
Ferramentas AJAX e JavaScript
Nós todos sabemos que o Ajax pode adicionar uma tonelada de funcionalidades ao seu site. Se você deseja adicionar uma galeria de imagens simples, um formulário de contato interativo ou criar um aplicativo da Web inteiro , o Ajax está lá para ajudar.
Mas começar do zero pode ser assustador, especialmente se você é relativamente novo no Ajax. E mesmo se você se considera um profissional, ainda pode ser demorado começar com uma lista em branco para cada um dos seus projetos.
Existem muitas ferramentas para acelerar o desenvolvimento do Ajax. De coleções de scripts a estruturas e geradores de elementos específicos, provavelmente há algo disponível nas ferramentas abaixo que fará de você um desenvolvedor mais eficiente.
Ajaxload
Ajaxload é um gerador para criar ícones do carregador Ajax . Há uma tonelada de ícones diferentes para escolher.
Tudo o que você precisa fazer é definir as cores de primeiro plano e plano de fundo (ou escolher um plano de fundo transparente) e depois baixar o script gerado.
Rápido e fácil, mas você economiza alguns minutos (ou mais) de codificação!
Mini AJAX
O Mini Ajax é uma galeria de scripts para download Ajax e DHTML .
Ele inclui tudo, desde janelas modais a apresentações de slides até scripts mais avançados (como calendários e ferramentas inteiras de gerenciamento de projetos).
É um excelente ponto de partida para encontrar elementos individuais do Ajax ou mesmo apenas para obter alguma inspiração.
Há demos disponíveis para muitos dos scripts e todos eles podem ser baixados de suas fontes originais.
MooTools
O MooTools é um framework JavaScript orientado a objeto . Definitivamente não é projetado para iniciantes, mas pode permitir que você escreva aplicativos Ajax flexíveis e poderosos que sejam compatíveis com vários navegadores.
Também é compatível com os padrões e incrivelmente bem documentado.
Além do construtor de núcleo, há também uma tonelada de plugins disponíveis. O MooTools pode ser usado para criar tudo, desde simples galerias de imagens até interfaces completas de usuário.
jQuery
jQuery é uma biblioteca JavaScript que simplifica uma variedade de funções JavaScript .
Uma das melhores partes dessa ferramenta específica, no entanto, é o número de plugins já disponíveis para o jQuery.
Existem plug-ins prontos para tudo, desde animações simples a formulários, widgets e elementos avançados da interface do usuário.
Provavelmente já existe um plugin feito para qualquer coisa que você queira fazer com JavaScript ou Ajax, ou pelo menos um para usar como base para criar o seu próprio.
Script.aculo.us
Script.aculo.us é uma biblioteca de interface de usuário JavaScript que inclui uma estrutura de animação, controles Ajax, utilitários DOM e muito mais .
É usado pela Apple, CNN, Basecamp e Ruby on Rails. Ele é construído no Framework Prototype.
Há extensa documentação disponível no wiki Script.aculo.us, facilitando o início.
Ferramenta de Compressão Online JavaScript
Compactar seus arquivos JavaScript faz com que eles sejam carregados mais rapidamente, consumam menos largura de banda e ocupem menos espaço em seu servidor. Essa ferramenta facilita a compactação.
Basta copiar e colar seus arquivos JS (ou enviá-los) para esta ferramenta e, em seguida, selecione se deseja compactar usando Minify ou Packer.
Ele automaticamente gera um código mais limpo e eficiente. Apenas certifique-se de testar completamente os resultados e sempre manter um backup do seu arquivo original.
Beautifier JavaScript
Se o seu JavaScript é um pouco mais bagunçado do que você gostaria (ou quase impossível de decifrar porque é muito mal formatado), execute-o neste embelezador para obter scripts organizados , limpos e consistentes que são mais fáceis de ler e editar depois .
As configurações usadas são mínimas, mas você pode escolher quantos espaços usar para recuos, se deseja detectar empacotadores e se deve preservar as quebras de linha.
Novamente, certifique-se de testar o código final e manter um backup à mão em caso de problemas em seu código recém-embelezado.
BrowserShots
Infelizmente, diferentes navegadores processam sites de maneiras ligeiramente diferentes. Isso pode ser uma grande dor de cabeça, especialmente se seus clientes estiverem usando um navegador e você estiver usando um navegador completamente diferente.
Se eles estão vendo coisas que não estão aparecendo no seu final (ou vice-versa), isso pode criar problemas em ambos os lados.
Você sempre pode instalar vários navegadores no seu computador, mas a) isso é um desperdício de espaço em disco e b) e os navegadores que não estão disponíveis para o seu sistema operacional? Isso e onde BrowserShots entra.
Você pode escolher entre praticamente todos os principais navegadores existentes, incluindo navegadores obscuros como o Minefield e o Epiphany.
O BrowserShots mostra capturas de tela apenas dos navegadores que você escolheu visualizar , para que você possa escolher quantos ou quantos desejar.
Lembre-se de que quanto mais navegadores você escolher para testar, mais tempo levará. A maneira como o BrowserShots está configurado, você pode simplesmente marcar a página e voltar mais tarde para ver seus resultados.
Firebug
Nenhuma lista de ferramentas de web designer estaria completa sem mencionar o plugin Firebug Firefox .
Muitas vezes pensado como a ferramenta mais valiosa no arsenal de um designer , o Firebug torna a depuração e edição do seu código (seja JavaScript, CSS ou HTML) infinitamente mais fácil.
Você pode ajustar seu CSS diretamente no seu navegador. Visualize a maneira como suas caixas de CSS estão alinhadas. Edite qualquer elemento na sua página diretamente no seu navegador.
Depure seu JavaScript e encontre erros mais rapidamente. E isso é apenas arranhar a superfície do que o Firebug pode fazer.
É realmente uma ferramenta obrigatória para todos os designers. Depois de usá-lo, você vai se perguntar como você projetou sem ele.
Compilado exclusivamente para WDD por Cameron Chapman.
Quais ferramentas você usa mais? Quais outras ferramentas você usa que podemos ter perdido?