Com a popularização do uso de templates para criação de sites e sistema, criou-se também outro caminho para começar o processo de design voltado para web. A partir da base de templates. Nesta parte, meu objetivo é focar na forma tradicional de design de interfaces, ou melhor, sem a utilização de templates, pois é a forma mais difícil, porém a que você consegue alcançar seus resultados com mais precisão e fidelidade. Além disso, se domina a forma tradicional, terá muita facilidade em seguir pelo caminho dos templates, se assim desejar.

Primeiramente, o que seria Design de Interfaces? Há pouco tempo, nem existia tal modalidade de design. Ou, se existia, era extremamente restrito. Design de interfaces é a parte do planejamento visual de como a interface de navegação de algum projeto web se apresentará, juntamente com previsões de funcionalidades. Pode ser desenvolvido para sites, sistemas, produtos multimídia, além de outros tipos projetos digitais.

Design de interfaces vem evoluindo bastante, como qualquer área de tecnologia. Se dormir por alguns anos, você ficará bem desatualizado. Inclusive, deixará de entender como funcionam as ferramentas que auxiliam a executar suas idéias.

No meu ponto de vista, o mais importante é entender os princípios básicos para criar design de interfaces e adaptar sua metodologia de criação conforme as ferramentas que julgue importante incorporar.

Os princípios mais importantes que considero para criar um bom design de interface, são:

- Cultura visual;
- Pesquisa sobre similares;
- Organização das informações;
- Apresentação;

Não significa necessariamente experiência. Significa ter um olhar diferenciado sobre as diferentes interfaces que surgem no seu caminho. Olhar com detalhe. A cada site ou sistema que navegar, tentar imaginar por que o criador planejou daquela determinada forma. Por que utilizou tais cores. Por que determinou fontes e elementos gráficos de tais tamanhos. Por que o scroll é daquele tamanho. Por que abriu um determinado item numa nova janela ou iframe. Por que? Por que? Por que?

Além disso, é importante também ter uma noção estética tradicional baseado em história da arte. Consulte a parte História da Arte para começar a estudar algumas boas referências.

Ao iniciar a criação de um novo design de interface para qualquer tipo de material, seria sempre bom pesquisar sobre projetos similares. Seja no mesmo segmento, seja em outros que imagine ter algum tipo de relação. Pois muitas daquelas perguntas que comentei acima, já foram feitas, pensadas e respondidas. Cabe a você tentar produzir algo melhor.

Mais informações sobre metodologia de pesquisa, acesse este link.
- Como começar a pesquisa para criação de um projeto.

Raramente começamos um trabalho com todas informações em mãos. Porém, é extremamente importante que tenha um mínimo de informações para começar a planejar a interface a ser criada. Caso o cliente realmente não te forneça nada, tente imaginar quais informações fariam parte da navegação. Uma espécie de estrutura de links. Importante: tente imaginar esta estrutura o mais próximo da realidade possível. Assim, vai não só dar um visual aproximado para seu cliente que, aumenta a chance de aprovação, mas também servirá para ele criar esta estrutura caso ele tenha muita dificuldade. Lembre-se – seu cliente é sempre leigo.

Após obter este mínimo de informações, chegou a hora de planejar o peso que cada informação receberá. Quando digo peso, quero dizer:

- Quais informações terão mais destaque;
- Quais links são mais importantes;
- Caso tenha muitos links, seria necessário dividir em grupos;
- Quais grupos fazem sentido;
- Qual ordem dos links;
- Qual ordem de cada grupo de links;
- Qual ordem de cada bloco de informações;
- Onde ficam informações de contato;
- Onde ficam acessos para redes sociais;
- Caso seja um comércio eletrônico, onde ficam botões de compra, escolha de quantidade, escolha de tamanho e fechamento de compra?

Como percebeu, não é tão simples assim. Vai um longo caminho até alcançar um resultado satisfatório e que reflita em resultados financeiros para seu cliente.

Depois de tanto trabalho chegou a hora de...mais trabalho! Pois é. Para não possibilitar que todo seu esforço tenha sido em vão, é importante gastar mais tempo em como vai apresentar sua obra para que seu cliente, sempre leigo, entenda tudo que pretendeu fazer. Você tem que vender sua obra. Caso não faça de uma forma convincente, seu trabalho pode não ser aproveitado. Isso é péssimo para qualquer artista. Então, capriche na apresentação.

Eu gosto de apresentação ao vivo. Se não for possível ou tiver dificuldades em oratória, invista bastante (digo bastante) tempo em detalhar tudo por escrito.

Mais informações sobre metodologia de criação e apresentação, acesse este link.
- Como enviar informações para seu cliente sobre andamento de projetos.

Passei algumas orientações para como tentar avançar na criação de interfaces gráficas. Atenção para a palavra ORIENTAÇÕES e não REGRAS, pois não existem regras para este tipo de design. É um segmento de trabalho que se modifica muito e com bastante rapidez.

Abaixo, mais material esclarecedor sobre o assunto:
- O que é UI Design (Design de Interfaces): Guia Completo de Como Começar Nessa Área

- The 2020 UI Design Fundamentals Crash Course (INTERACTIVE)

Hoje em dia, existem diversos softwares, inclusive online e de graça, que auxiliam na criação das interfaces. Na minha época, seria Corel Draw ou Illustrator em conjunto com Photoshop. Esta combinação seria boa para começar, mesmo porque, quase todos os novos softwares em uso, como Figma, Sketch, Abobe XD e inVision, têm alguns princípios de funcionamento similares a estes clássicos.

Na minha visão, a ferramenta que vai escolher pouco importa. Você precisa ter a flexibilidade de migrar de ferramenta. Especialmente porque cada contratante (se for seu caso) pode ter a preferência de trabalhar com um determinado software. Por isso, o mais importante é ter a metodologia de criação e processo sólido, para que consiga desempenhar um bom trabalho em qualquer plataforma. Em qualquer ambiente. Em qualquer condição.

Caso seu projeto tenha previsão de versões para diferentes resoluções, sugiro sempre começar pela versão desktop. Desta forma, fica mais fácil planejar as demais versões para outras resoluções, como celulares e tablets. Para mais informações sobre diferentes resoluções, acesse o link abaixo.
- Resolução de Tela

Depois de criado e aprovado o visual base, chegou a hora de programar a interface. As duas linguagens base para transformar seus layouts em interfaces navegáveis são HTML e CSS. É extremamente importante dominar estes dois assuntos, pois mesmo que em algum momento migre para algum framework mais robusto, terá que interagir com estas duas tecnologias constantemente, de um jeito ou de outro.

Alguns links para tutoriais sobre HTML / HTML5:
- Curso de HTML5 - 00 - Site Completo - by Gustavo Guanabara

- HTML Full Course - Build a Website Tutorial

- Learn HTML5 - full course with code samples


Alguns links para tutoriais sobre CSS / CSS3:
- Curso Basico de CSS desde 0 - Introduccion

- CSS Tutorial - Zero to Hero (Complete Course)

- CSS Grid Layout e Flexbox - Quando Utilizar

Nessa parte, também vão existir algumas bibliotecas para auxiliar a executar as funcionalidades que tinha planejado inicialmente. Vou apenas citar duas bibliotecas bem famosas, mas que uma delas já está defasada neste momento, porém, isso não importa. Como expliquei, o importante é ter noção dos mecanismos de integração para conseguir migrar de bibliotecas.

JQuery:
Uma das bibliotecas mais antigas e de maior popularidade. Assim como centenas de bibliotecas de frontend, foi feita com javascript. Ou melhor, para trabalhar bem com criação e desenvolvimento de interfaces gráficas, não tem jeito – tem que dominar javascript.

A vantagem que é fácil de pegar a mecânica de como JQuery funciona. A desvantagem é que para projeto mais longos e complexos, você acaba utilizando diversas bibliotecas que dependem de JQuery e acabam aglomerando seu carregamento com diversos arquivos separados. Porém, esta questão é uma preocupação mais para quando tiver bem avançado em desenvolvimento de interfaces. Agora, apenas uma informação para ter em mente.

Alguns links para tutoriais:
- What is JavaScript capable of doing? - JavaScript Course #01

- Learn JavaScript - Full Course for Beginners

- JavaScript Tutorial for Beginners - Full Course in 8 Hours [2020]

- Tutorial jQuery Básico pt-BR

- jQuery Tutorial #1 - jQuery Tutorial for Beginners

Mais para frente, vai se interessar por outras bibliotecas mais complexas, como NodeJS, React, Vue e Angular. Porém, seria num nível mais avançado.


Bootstrap:
Outra biblioteca bem popular e ainda em uso, pois as versões novas incorporaram as novas tecnologias. Utilizada especialmente para facilitar o trabalho de desenvolvimento de layouts responsivos.

Alguns links para tutoriais:
- Bootstrap - Primeiros Passos - Exemplos e Dicas de Uso

- Apresentação do curso - Criando um site com Bootstrap 4 - Aula 01

- Bootstrap Tutorial

- How To Make A Website Using HTML CSS Bootstrap | Complete Website Design Tutorial


Obs: Mesmo que muitos destes tutoriais sejam em inglês, vale a pena ver, pois são muito práticos e a gente consegue aprender olhando os exemplos dados.