Saber conceitos, fundamentos e teorias não bastam! Você precisa saber fazer!
Olá pessoal tudo bem?
Neste artigo vamos falar sobre ferramentas para Web Design.
Lembre-se que no primeiro artigo apresentamos os conceitos que você precisa estudar para se tornar realmente um Web Designer.
Nesta segunda parte iremos apresentar as ferramentas que você precisa saber, para conseguir atuar na área, não basta somente a parte teórica.
Somente com a teoria você não vai conseguir um emprego ou um freelancer.
Antes, quero frisar que existe sim mais ferramentas que usamos no dia a dia, como por exemplo, de prototipagem, de coletas de dados, de organização de tarefas, de definição de cores, entre outras.
Porém, a pretensão deste artigo é focar nas principais ferramentas requisitadas pelo mercado e que vemos constantemente exigidas nas vagas de emprego oferecidas por aí. (Inclusive aqui na Studio Silver).
Também não iremos aprofundar muito nos softwares citados. O artigo é mais informativo do que instrucional.
Aqui não ensinaremos como usar tal software ou como criar tal efeito.
O objetivo aqui é dar uma direção a quem quer entrar neste mercado e não sabe por onde começar na web designers. Beleza?
Vamos Lá!
Neste artigo você receberá dicas sobre:
- Ferramentas de Edição gráfica
- Ferramentas de Linguagem web
- Ferramentas de Editores de código
- Outras ferramentas
Edição de gráfica
Para criar layouts, ilustrações, ícones, montagens, tratar fotos, entre outros, você precisará de algum editor visual.
Então, vamos ver quais são os principais?
Adobe Photoshop
O Photoshop é um programa de edição de imagens profissional.
É o software de edição visual mais conhecido e usado no mundo. Os seus recursos são otimizados para edição e tratamento de imagens digitais (Bitmaps) e trabalhos de pré-impressão.
Além de imagens digitais ele também possui algumas funções dos programas típicas dos programas vetoriais.
Então no PS (Photoshop), você pode criar quase tudo: layouts de sites, ilustrações, animações simples, fatiar imagens, montagem de fotos, tratamentos de fotos, etc. Por isso ele é o programa mais usado para a criação de layouts, mesmo não tendo sido projetado inicialmente para isso.
Adobe Fireworks
É uma ferramenta para desenvolvimento de Layouts web. Com o FW(Fireworks) podemos criar e editar imagens para a WEB, além de animações simples.
Os seus recursos são otimizados para a web.
Ele tem uma ótima compressão de imagens, criar links, fatia imagens, exporta PNGs transparentes com melhor qualidade, criar sprites, etc.
Na verdade ele é a ferramenta da Adobe para a criação e interfaces web (apesar da maioria usar somente o Photoshop). O Fireworks foi feito para Web Designers.
Apesar de certo preconceito de alguns Web Designers, ele é o programa mais otimizado para criação de peças para a web, além de também ser mais fácil e intuitivo que o Photoshop.
“Não existe a melhor ferramenta para o Web Designer. A melhor sempre será aquela que lhe oferece uma melhor experiência, que você se sente mais confortável e que lhe auxilie a entregar os melhores resultados.”
Adobe Illustrator
É uma ferramenta para criação de imagens vetoriais. O AI (adobe illustrator) é o software de vetores mais usados hoje em dia. E com certeza é o mais poderoso programa de imagens vetoriais.
Com ele pode-se criar diversas peças de design: ilustrações, folhetos, panfletos, livros, layouts, banners, cartões, infográficos, ícones, etc.
Ele também tem integração com outros softwares da Adobe.
Corel Draw
O Corel também é uma ferramenta para criação de imagens vetoriais. Hoje em dia seu uso caiu um pouco, devido a ascensão do Illustrator, mas mesmo assim ainda é bastante usado, principalmente aqui no Brasil.
Normalmente iniciantes preferem o Corel por sua facilidade de uso ser um pouco maior, ser mais leve e o mais barato.
Linguagem web
Um projeto de interface para web interage com muitas áreas e vai além do visual, por isso é importante você conhecer o funcionamento de uma interface web por inteiro.
Você não precisa ser especialista em tudo, mas precisa saber para quem está criando e o que está criando
Veja a seguir:
HTML: HTML é a abreviatura de “Hyper Text Markup Language” ou Linguagem de Marcação de Hipertexto.
Usamos o HTML para construir sites. Ele apresenta o conteúdo no navegador e para vincular, através de urls , arquivos externos como imagens, vídeos, páginas, etc.
CSS: CSS é a abreviatura de Cascading Style Sheets ou Folhas de Estilos em Cascata. É uma linguagem para estilos. Usamos o CSS para adicionar estilo a uma página HTML. Ele altera a forma como será exibido o conteúdo. É pelo CSS que damos “formas e cores ao nosso site”.
JQUERY/JAVASCRIPT: Javascript basicamente é uma linguagem de programação desenvolvida para a internet. O JS Adiciona comportamento interatividade na página, modificando assim sua utilização e proporcionando diferentes experiências ao utilizador da página. JQuery é um framework para desenvolvimento de javascripts. Ele ajuda os desenvolvedores a criarem de forma mais rápida e estável os scripts.
Mesmo que você trabalhe apenas como uma “web design criativo” (daqueles que não botam a mão em códigos) é importante você conhecer o funcionamento do html, pois seu layout será usado nele. A mesma coisa aplica-se ao JS e, principalmente, ao CSS.
JAVASCRIPT = DINAMISMO
CSS = FORMA
HTML = CONTEÚDO
CMS (Gerenciador de Conteúdo)
CMS é a abreviatura de Content Management System ou Gerenciamento de Conteúdo.
São plataformas que te permitem criar sites dinâmicos, com banco de dados, com gestão de conteúdo, sem a necessidade de se ter conhecimento sólidos em linguagem de programação.
Alguns CMS: WordPress, Joomla, Drupal
Por exemplo o JMais é construído com o CMS em WordPress.
Adobe Dreamweaver
É uma ferramenta de edição de códigos. É o programa do pacote adobe para o desenvolvimento de aplicações web. O programa permite a criação e edição de páginas para a internet sem a necessidade de se lidar com códigos. É um programa WYSIWYG ↓.
Sua interface é semelhante com as de programas de edição de imagens da Adobe. Essa facilidade, aparentemente, que o DW(Dreamweaver) oferece pode ser uma grande armadilha.
Os códigos gerados automaticamente pelo DW são sujos.
O DW insere coisas inúteis, ultrapassadas e fora dos padrões. Nunca crie um site assim. Saiba o que você está fazendo.
Notepad++
É um programa para de edição de códigos.
Ele é leve e gratuito.
Suporta uma gama maior de linguagens e também tem funcionalidades WYSIWYG.
Adobe Flash
É uma ferramenta para a criação de animações. Com ele pode-se criar desde banners simples até games complexos. Sua interface é simples de usar. No desenvolvimento web ele foi colocado de lado (graças ao bom Deus) devido a evolução do HTML/CSS e dos padrões web.
Praticamente não se usa mais o FL quando se trata de web. Mesmo assim é bom você conhecê-lo, pois ainda se usa o FL (Flash) na criação de pequenos banners promocionais.
Adobe Indesign ID
O Indesign é um software de diagramação e organização de páginas. Ele é o substituto do antigo Adobe PageMaker. O ID é o campeão quando o assunto é edição e diagramação de jornais, revistas e afins.
É uma ótima ferramenta para se trabalhar com tipografia e muito usado em agências de publicidade, gráficas, etc.
No desenvolvimento web ele não tem muita utilidade.
Apesar das suas opções lhe darem suporte para a criação de layouts de site e opções de exportação para web, isso não faz dele um software muito útil para o desenvolvimento de sites.
Conclusão
Saber usar bem os programas também é importante. Isso te ajudará a evitar problemas e otimizar o seu tempo e a qualidade dos seus trabalhos.
E também pode ser o fiel da balança para você conseguir um emprego ou não.
Mas, não esqueçam que web design é algo multidisciplinar e existem ainda mais coisas para você estudar, pesquisar e aprender.
Saiba que é importantíssimo você conseguir unir o conhecimento com a técnica: os conceitos mais as ferramentas.
E assim chegamos ao fim deste pequeno guia sobre as ferramentas de um Web Designer.
Caso você esteja procurando emprego nesta área temos uma oferta para você.
Se você gostou deste post, já conhece algumas dessas ferramentas deixe seu comentário.
Escrito por: Silvana Silveira – Web Design da Studio Silver – Agência Web e Marketing Digital.
