Programas são mera ferramentas que você vai utilizar para desenvolver seus projetos. O mais importante é sua criatividade e dedicação. Não é pela escolha do “melhor” programa de web design que seus projetos ganharão qualidade. O nível de excelência vem do seu conhecimento artístico, técnico, experiência e comprometimento com o desenvolvimento do projeto. Talvez influencie na produtividade. Mas só poderá avaliar depois de usar alguns e verificar quais possuem as características adequadas ao seu modo de trabalho.

Dito isso, vou listar alguns softwares de web design / desenvolvimento que gosto de utilizar, juntamente com links para tutoriais. Novamente: é uma questão de preferência subjetiva, medida pela forma de funcionamento do programa em relação à sua metodologia de trabalho. Isso vai definir o melhor programa para você utilizar.

Para desenvolver um projeto web, sem dúvida, terá que dominar alguns programas. Por isso que enfatizo que é um trabalho multidisciplinar. Vou tentar lista os programas de acordo com a ordem de uso no desenvolvimento de um projeto e, ao mesmo tempo, explicar.qual objetivo de cada um.

Pode ser qualquer outro processador de texto de sua preferência. Até mesmo o bloco de notas. Vamos utilizar basicamente para registrar as informações importantes do projeto a ser criado.

Começamos pela definição da estrutura de links e navegação. Vou dar um exemplo de um site simples com exibição de serviços.

- Home
- Quem Somos
- Serviços
    - Webdesign
    - Criação de Identidade Visual
    - Fotografia
- Portfólio
- Contato

Repare que na parte de serviços, coloquei 3 itens com um recuo. Fiz desta forma para indicar que são sublinks. Chamamos isso de exibição de informações em árvore. Podemos também fazer observações importantes ao lado de cada link, como por exemplo, se o link vai apresentar um formulário para envio de informações, como no caso provável do link de contato.

Se o projeto for seu, seria interessante já preparar o conteúdo de texto para cada link, pois algumas vezes, com o conteúdo pronto, você pode ter outras idéias de navegação, exibição ou destaque de informação importante. Caso seja um projeto para um cliente, se ele for muito organizado, terá preparado este conteúdo para você. Mas são raríssimos os casos.

Links para tutoriais:
- Curso de Word – Curso em Vídeo 
- Curso de Word – Jhonny Lopes 
- Curso de Word 2016 

Links para aquisição:
- Office 365 

Um programa bem antigo, que trabalha com gráficos vetoriais. É importante você saber a diferença entre programas que trabalham com gráficos vetoriais e programas que trabalham com bitmap (ex: photoshop). Em suma, programas vetoriais trabalham com representação gráfica de imagens por pontos cardeais. Por que isso é importante? Porque, dessa forma, você consegue ampliar e reduzir a arte criada para qualquer tamanho.

Outro ponto a ser considerado é que estes programas são um pouquinho mais trabalhosos para aprender a mexer. Porém, proporcionam uma flexibilidade muito maior para manipulação posteriormente. Seja para atender uma demanda de cliente ou adaptar para outro formato.

Talvez já tenha ouvido falar na expressão “vetorizar logomarca”, certo? Pois bem, este processo é necessário quando você recebe uma logomarca em bitmap (imagem jpg, tif, png, gif, entre outros formatos), e necessita imprimir ou ampliar esta logomarca. Se ampliar a imagem diretamente do arquivo, dependendo do tamanho que precisar pode “pixelizar” (ou estourar pixels) e estragar a impressão ou a própria imagem. Outras situações que você também pode precisar vetorizar a logomarca, seria para transformar o fundo em transparente. Ou até mudar um detalhe de cor.

Caso tenha uma demanda urgente para um trabalho deste tipo, entre em contato:
Jorge Mauricio - www.jorgemauricio.com
Planejamento Visual – Arte e Tecnologia - www.planejamentovisual.com.br

Voltando ao raciocínio. Considero esta parte a mais importante, pois é nela que vai criar os layouts de navegação, definir organização de conteúdo, e interagir bastante com o cliente até ficar 100% aprovado, antes de entrar na etapa de programação.

Abaixo, um pequeno exemplo do processo de criação de layout.

Para projetos mais complexos, é indicado fazer uma tela para cada parte do site. O cliente não consegue imaginar como fica um determinado tipo de conteúdo dentro do layout base criado, como nós da área gráfica conseguimos. Este tipo de atenção ajuda não só na aprovação do projeto, mas também te dá respaldo caso o cliente queira alterar o projeto depois de programado, sem querer pagar por melhorias.

Outra vantagem de trabalhar com estes programas para criar o layout é a precisão com que tratam as dimensões dos “canvas” ou área de navegação. Pode ter mais informações no link abaixo:
- Resoluções de tela.

Links para os tutoriais:
- Corel Draw Para Iniciantes
- Curso Corel Draw Completo Iniciante ao Avançado
- Illustrator – Como Começar no Illustrator
- Illustrator 2019 – Curso Completo

Links para aquisição:
- Corel Draw 
- Adobe Illustrator

Teoricamente, você poderia criar os layouts em photoshop. Mas não gosto muito desta abordagem, pois resulta em muito trabalho em caso do projeto ter que ser readaptado para outro formato ou dimensão, que é bem comum. E acabo utilizando photoshop mais para quando precisar dar um tratamento especial numa imagem utilizada no layout ou uma parte especial do layout. Além de, claro, recorte de imagens para composição de layout.

Links para os tutoriais:
Adobe Photoshop – Curso Completo
Adobe Photoshop – Crash Course
Adobe Photoshop – Curso de Photoshop para Iniciantes