Madly Luv - O mLuv é um blog pessoal no qual aborda vários assuntos como design, músicas, literatura, arte, televisão etc. Desenvolvido e mantido por Ana Flávia Cador.

Ferramentas que uso para trabalhar com Web Design

Coisas de designer

Que saudades que eu estava em escrever algo sobre a minha área de atuação! ::blush:: Sei que na blogosfera é super comum aflorar o desejo de trabalhar com web, assim como foi comigo. Pensando nisso, recentemente fiz uma enquete no instagram perguntando se pessoal que me segue teria interesse num post com uma lista bem rica com ferramentas que uso para trabalhar — e a resposta foi super positiva! ::love::

Ferramentas para trabalhar com Web Design

Fonte: Kaboom Pics.

Este post também veio através de uma necessidade que eu mesma passei no início de minha carreira, há 10 anos atrás (socorro, isso tudo já?). Quando eu colocava no Google "programas e ferramentas para web design", aparecia a famosa listinha dos programas da Adobe para trabalhar: Illustrator, Photoshop, InDesign, Dreamweaver e o "falecido" Fireworks. E é triste saber que resultados de uma década atrás não são muito diferentes do que encontro hoje, ainda mais quando a profissão exige uso de outras ferramentas. Antigamente, eu não tinha condições de investir ganhando salário de estagiária; hoje, quando finalmente consigo ter condições, sinto que estou jogando dinheiro fora. :( Parece que odeio a Adobe, né? Mas não, não é isso, só não encaixo (totalmente) com os serviços de assinatura oferecidos atualmente. Se eu trabalhasse com edição de vídeo, motion design, editorial e design gráfico (ou tudo isso junto), a mensalidade de R$175 sairia ok. Mas na esfera de atuação da profissão de web design, não compensa — não quando não usamos nem 5 apps dos 20 que vem no pacote. Sorry Adobe, meu dinheiro suado não é mato.

A boa notícia é que para nossa área existe muitos programas legais por ai com bastante potencial para quebrar o império da Adobe com valores bem mais acessíveis, permitindo condições de investir em outras ferramentas cruciais que iremos usar diariamente. Veja a listinha abaixo, dividida entre softwares/apps, sites e plugins WordPress:

Softwares

Composição de layout: Affinity Designer

Eu realmente esperei anos por este programa para finalmente dizer que ele consegue se igualar ao Adobe Illustrator com maestria no quesito de composição de layout e interface. Ele é uma mistura perfeita dos comandos básicos do Photoshop (como balanço de cores, recorte etc) com o poder do Illustrator. Eu diria que ele abre os arquivos salvos no Illustrator com 95% de fidelidade, o que dá para se virar super bem. Estou usando o Affinity Designer há alguns meses e tenho feito todos os meus projetos nele desde então. Nem sinto mais falta do Illustrator. Comprei o software numa promoção por R$112,00 pela loja da Apple para Mac (para Windows se paga só por dólar diretamente no site da Affinity), mas o valor original não passa de R$220 convertidos e é vitalício. O valor cheio da licença para uma vida inteira é só um pouquinho mais caro que uma única mensalidade da Adobe.

Aproveite e leia também:

Gestão de fontes: Typeface

É super importante ter um aplicativo para visualizar de forma fácil e rápida todas as fontes instaladas no computador. É ótimo para quando precisamos ter uma visão ampla do acervo de fontes, fazer testes de aplicação e comparação entre elas para fazer combinações para um projeto. Comprei o Typeface pouco tempo depois que ele foi lançado, então só desembolsei US$10 (cerca de R$30 na época). Com o tempo somado à mudança de moeda na loja da Apple, atualmente está custando por volta de R$64 (também é de licença única para a vida toda). Mais barato que uma janta no Outback. Por enquanto o app só tem para Mac, mas você pode usar uma alternativa free semelhante: o Fontbase, que tem tanto para Windows quanto para Mac.

Edição de Imagens: Photoshop + Lightroom

Para edição mais avançada de imagem e fotografia (principalmente quando é em massa), não posso negar que não há nada melhor do que o combo Photoshop + Lightroom. Como não uso mais os outros programas da Adobe, achei mais justo investir na assinatura mais simples do Creative Cloud. Uso muito este combo para coisas do blog e também quando preciso fazer um projeto que envolve composições com uso intenso dos brushes e manipulações de imagem bitmap (já que o Affinity Designer é mais voltado para vetor). Vem também na assinatura o uso de alguns apps para celular, como o Lightroom CC (incrível para sincronizar com os presets usados no desktop!) e o Photoshop Mix, além de poder usar o acervo de fontes da Adobe, o Typekit! Tudo isso por R$35. É melhor do que ficar usando programa pirata, sério. Para mim valeu muito a pena.

Aproveite e leia também:

Diagramação de documentos: Affinity Publisher

Lançado agora em agosto, o Affinity Publisher é último lançamento da Serif para a família Affinity, vindo para concorrer diretamente com o InDesign da Adobe para diagramação e organização de páginas (tanto para projetos editoriais quanto digitais). Como não trabalho com editorial ou e-book diretamente pelo InDesign, então não posso afirmar se o Publisher compete bem com a versão Adobe. Eu uso mais a nível básico mesmo, como criação midia-kits para clientes da blogosfera e documentos de contrato. O Affinity Publisher é o mais dispensável desta lista e ainda está na versão beta, mas a boa notícia é que enquanto não lança a versão final, a beta é totalmente free. Suspeito que futuramente o valor da licença será semelhante aos outros irmãos Affinity, na faixa de R$220 e de uso vitalício.

Aproveite e leia também:

Desenvolvimento (front e back-end): Sublime Text 3

Ele é a melhor alternativa para o Adobe Dreamweaver! Nele você pode fazer seu código desde o html/css mais básico, até a programação completa de um site em diversas linguagens de programação. É absurdamente leve e têm crescido bastante nos últimos anos, ganhando diversas extensões para facilitar e acelerar o processo de edição, desde ferramentas para auto complete, pré-processadores, até pacote com tags prontas em wordpress para agilizar na criação de um tema! Tem um acervo incrível de extensões para o Sublime no site Package Control, e lá mesmo tem um tutorialzinho ensinando como que se instala os pacotes através desta ferramenta. Tem tanto para Windows quanto para Mac.

Você pode baixa-lo sem custo no site oficial. Depois de um tempo de uso, a Sublime te notifica a pagar pela licença, que custa US$80, porém, ela não bloqueia o uso do software em momento algum — ou seja, eles contam e esperam o seu bom senso. Esse é o software mais caro daqui dessa lista, saindo na faixa de R$320 convertidos. A licença é de uso vitalício e você paga uma taxa de US$30 pelo upgrade de versão (que ocorre em média a cada 5-6 anos). Uma alternativa 100% free ao Sublime com princípio semelhante de uso de extensões é o Brackets, mas confesso que o Sublime mora no meu coração, haha. ::love::

Aproveite e leia também:

Armazenamento e gestão de arquivos: Github

O git é um sistema de controle de versão de arquivos, onde diversas pessoas podem contribuir em um projeto ao mesmo tempo de forma organizada. Eu sempre quis trabalhar com este tipo gestão para meus trabalhos! Meu namorado muitas vezes me ajuda na empresa na parte de front-end, trabalhando diretamente da casa dele e eu aqui no meu home office; e às vezes eu estou no meu outro emprego e preciso fazer alguma alteração de urgência. Com o git, além de documentar tudo e poder trabalhar num projeto através de qualquer máquina, é uma ótima forma de backup também. Originalmente trabalha-se diretamente no terminal do computador, mas não é todo mundo que consegue trabalhar assim (eu mesma nunca consegui). É ai que entra o GitHub, um serviço que oferece diversas funcionalidades aplicadas a este sistema de uma forma mais prática e com uma interface bonitinha que meros mortais designers entendem, hahaha.

Você pode colocar quantos projetos quiser no Github, porém, na versão free todos os projetos podem ser vistos por qualquer pessoa. Para deixar os projetos privados com permissão somente a colaboradores selecionados, tem o plano de US$7 mensais (eu uso este) e mais alguns outros planos mais carinhos voltados para empresas. O limite de espaço por projeto no GitHub é de 1GB, com limite de tamanho de 100MB por arquivo. Como projetos de web geralmente têm arquivos leves, é muito difícil atingir esse limite.

Transmissão arquivos: Transmit

Trabalhar com upload de arquivos diretamente pelo gerenciador de arquivos da hospedagem (principalmente pelo painel do WordPress) nem sempre é a melhor opção — muito menos a mais segura. É muito fácil atualizar um arquivo e o site sair do ar por algum erro (mesmo que seja básico) e, assim, lá se vai o painel de controle para corrigir #desesperodefine. *o* Para evitar este tipo de problema, o ideal é usar um programa de FTP (do inglês File Transfer Protocol). Este programa faz a conexão entre os arquivos de seu computador com a hospedagem (apenas arquivos de forma bruta mesmo, com os caminhos das pastas), onde você poderá atualizar vários arquivos e pastas inteiras através de um só clique. Por muitos anos eu usei o FileZilla (free tanto para Windows quando para Mac), mas ultimamente tenho usado muito o Transmit (só tem para Mac por enquanto) pois tem uma interface bem mais intuitiva, bonita e organizada. A licença do Transmit é de US$45, de uso vitalício e com uma taxa de upgrade (que também leva-se anos para acontecer). Um software alternativo free com uma interface que lembra a do Transmit é o CyberDuck, mas nunca usei (porém, já vi boas críticas sobre) e tem para os dois sistemas operacionais.

Simulação de servidor: WAMP ou MAMP

Antes de subir qualquer arquivo para a hospedagem de um cliente, eu faço todos os testes possíveis no meu próprio computador, simulando um servidor como se fosse uma hospedagem mesmo. Neste servidor posso criar banco de dados e instalar um (ou vários) WordPress para testar os projetos de meus clientes. Tudo isso sem ter medo de errar, tornando-se uma forma segura de trabalhar. ::love:: Quando eu tinha Windows usava muito o WAMP, e quando passei para Mac OS passei a usar o MAMP. Ambos são frees, mas o MAMP tem uma versão premium (licença de US$69 e US$34 para upgrade de versão) que permite mais opções de servidor e facilidades para uso do WordPress, mas a versão grátis atende super bem!

Navegador web: O que o público usa

Acho super ampla a questão do uso do navegador e de escolha muito pessoal. Há desenvolvedores que usam browsers especializados para a profissão, como o Blisk, mas confesso que nunca consegui pegar o costume de usar outros navegadores diferentes do Chrome. Já são anos neste pimpolho. ::blush:: Obviamente tenho outros instalados e eventualmente uso para testar algo, mas o Chrome é o meu queridinho e é também o mais usado pelo público.

Sites

  1. Can I Use: maravilhoso para ver a compatibilidade de atributos e propriedades CSS em diversas versões de navegadores web;
  2. Kaboom Pics: acervo mais lindo de fotos free que você pode conhecer!
  3. Transfonter: melhor ferramenta de conversão de fontes personalizadas para usar na web;
  4. Entity Conversion Calculator: conversor super prático para converter caracteres especiais para usar no CSS ou no corpo de texto;
  5. Pinterest: para fontes de inspiração;
  6. Creative Market: melhor acervo de materiais gráficos e fontes lindas com preços acessíveis;
  7. COLOURlovers: conheço este site há quase uma década e ainda acho ele a melhor fonte de inspiração em paleta de cores;
  8. JS Compress: compressor de scripts para deixa-los mais leves;
  9. What Font Is: para descobrir aquela fonte amada, só que não sabe o nome;
  10. Graphic Burguer: recursos free ótimos, principalmente para mockups e apresentação de trabalhos;
  11. Font Awesome: Um acervo super completo de ícones para serem usados nos projetos;
  12. DaFont: o clássico acervo de fontes free grátis de anos e anos!

Além dos sites acima, você também pode dar uma olhada na minha página de créditos do blog que tem mais coisa por lá, inclusive alguns sites de tutoriais.

Plugins WordPress

Em teoria, quanto menos plugins utilizamos no WordPress, melhor será o desempenho do site, pois evita possíveis problemas pelo excesso de requerimentos (muitas vezes sem necessidade) provocados pelos plugins. Mas, obviamente, sempre há aqueles plugins que são ótimos aliados que ajudam horrores no processo de programação. Veja abaixo:

Auxiliar de desenvolvimento: Advanced Custom Fields

Sempre quando faço um projeto para um cliente de blog/site WordPress, eu faço todo um painel administrativo do tema para quem for usa-lo atualizar todas as informações da forma mais fácil e rápida possível, sem ficar dependente de mim — e, principalmente, sem precisar mexer diretamente no código. Antes eu fazia tudo na unha mesmo. Agora, com o uso do ACF economizo em média 20h de serviço, pois faço todo o painel do tema através de uma interface (que lembra um construtor de página) numa única tarde. Depois, é só aplicar as tags que plugin fornece para as funcionalidades que criei. O plugin não é a coisa mais leve do mundo, mas nunca sofri problemas de desempenho diretamente relacionado ao seu uso. Uso a versão free no Tema Clarissa da minha lojinha e uso a versão PRO para os clientes de projetos exclusivos. A versão paga tem dois tipos de licenças: a de uso em um único domínio ($25 dólares australianos) e a de uso ilimitado (AUD$100) para quantos sites quiser. Comprei a licença ilimitada e foi a melhor coisa que fiz! Assim meus clientes também têm direito às atualizações do plugin dentro dos padrões da licença.

Loja Virtual: Woocommerce

Loja Virtual têm crescido bastante! Tanto para quem vende quanto para quem compra é algo cômodo, fácil, prático e, na maioria das vezes, acessível. Mas e-commerce sempre foi um universo muito complexo. Quando descobri que o Woocommerce dá margem para uma ótima customização e liberdade para trabalhar com design sem interferir diretamente nas entranhas do sistema (pois já vem tudo pronto!), comecei a ficar mais tranquila e confiante em oferecer o serviço de design para lojas. O plugin atende praticamente todas as expectativas para quem é microempreendedor com diversas formas de pagamento e ferramentas de venda. Ele é um plugin pesado, mas é o melhor para e-commerce no WordPress. Mas lembre-se: pode acontecer de precisar dar um upgrade no plano da hospedagem para aguentar o tranco que este plugin exige do sistema.

Os plugins adjacentes que uso com o Woocommerce são: PagSeguro e PayPal para formas de pagamento e o Name Your Price para valores flexíveis.

Eu indico ler:

Não vou disponibilizar links de download pirata, muito menos aceitarei isso nos comentários. Pode parecer hipocrisia da minha parte… quem nunca usou um programa craqueado, não é mesmo? ::rolleyes:: Pois adivinhe, mon amour: está errado (e não finja que não sabe, pois sei que você sabe, rs). É uma cultura que precisamos parar de exercer, pois há pessoas por trás das ferramentas que usamos — e as contas chegam para elas também.

Vão existir ofertas que não concordamos, que não temos condições ou simplesmente não nos encaixamos, e dou graças a Deus por ver de o crescimento do número de ferramentas alternativas pra a minha profissão. A famosa lei da oferta e da procura. Desta forma, não vejo justificativas para usar um programa pirata que custa o mesmo investimento (ou até menos) de uma peça de roupa no shopping, principalmente quando é de uso vitalício. Gastar dinheiro também faz parte do processo de recebê-lo, e isso tem nome: INVESTIMENTO. ::cool::

Vale ressaltar que isso tudo faz parte de um ponto de vista mais pessoal (apesar de ser para profissional, haha). Recomendo os softwares e ferramentas acima pois acredito que são essenciais para meu dia-a-dia no trabalho, com valores justos e acessíveis. O que pode ser ótimo para mim pode não ser o mesmo para você — e está tudo bem! ;D Se você é uma pessoa da área e recomenda outros materiais que não estão na lista, seu comentário é super bem-vindo. Nunca é demais compartilhar coisas boas!

E você, o que achou da lista? Já utilizou ou ouviu falar de algumas destas ferramentas?

Veja também...

Vida de Freelancer: Quando o design não é o suficiente
Vida de Freelancer: 6 atitudes que mudaram a minha vida profissional
Vida de Freelancer: Como ter um portfólio perfeito
¬¬ zZz x_x o_O ^^ T_T ;D :x :S :P ::teary:: ::sweat:: ::stress:: ::rolleyes:: ::love:: ::cool:: ::blush:: ::attention:: ::angry:: :) :( ._. *o* *O_O
* Ao comentar, você alega estar de acordo com a política do blog.


12 Comentário(s)

(12 pelo blog e pelo facebook)
  • Lari
    Visitar blog
    13 . 10 . 2018

    Nossa, Aninha, que post MARAVILHOSO <3 Eu não conhecia o Kaboom Pics! Tudo tão lindo por lá. Nem acreditei ao ver um banco de imagens gratuito todo lindo assim. :) Coisa boa demais! aaa, e muito útil esse site que transforma fontes pra serem usadas na Web. Mesmo não mexendo em código é sempre bom ter na manga. O Sublime eu conhecia. Lembro que a Luiza gostava muito de programar nele.
    Eu sou meio suspeita porque gosto demais da Adobe. Uma coisa que fiz foi pagar uma pessoa pra instalar os programas pra mim. E eles são novinhos. Antes eu pagava e não compensava muito, também. Em tempos de capitalismo opressor surgem essas opções.
    Não conhecia o Can I Use, também. Muito bom! :) Eu uso o Lightroom, também, pra editar imagens. Dá um resultado incrível, mesmo.
    O tempo passa rápido, né? Tenho só 6 anos trampando com Webdesign. Achei um hino você completar 10 anos na profissão. Parabéns, Aninha <3 Seu trabalho é divino, bicha. Admiro muito <3
    Esse post tá salvo nos favoritos, porque nunca se sabe <333

    Responder

    • Aninha
      Visitar blog
      23 . 10 . 2018

      Oi Lari! Muito obrigada pelo elogio ao meu trabalho! ♥ Fico feliz em saber que o post te mostrou alguns recursos novos que não conhecia. O Kaboom Pics é o banco de imagens mais lindo que eu já vi! Tem me salvado bastante em diversos trabalhos e até mesmo para ilustrar alguns posts aqui do blog quando não tenho tempo ou ânimo para fotografar, hahaha.

      Um beijo grande e que venha mais 10 anos (no mínimo) para nós na profissão! ♥ ;*

      Responder