Estudo de Caso 1: Desenvolvimento de um Formulário de Contato
Este estudo de caso é uma introdução prática aos componentes do Material UI, ideal para iniciantes aplicarem conceitos fundamentais em projetos reais.
Neste primeiro estudo de caso, vamos desenvolver um formulário de contato básico. O objetivo é proporcionar uma introdução prática aos componentes do Material UI, utilizando uma interface simples e funcional. Este estudo de caso é ideal para iniciantes que desejam aprender os conceitos fundamentais do Material UI e aplicá-los em um projeto real.
Contexto de Negócio
Imagine que você foi contratado por uma pequena empresa de design gráfico que precisa de um formulário de contato em seu site para facilitar a comunicação com clientes potenciais. A empresa quer um formulário que seja esteticamente agradável e fácil de usar, garantindo que os visitantes possam enviar suas mensagens de maneira rápida e intuitiva.
A empresa deseja que o formulário contenha os seguintes campos:
Nome
E-mail
Telefone
Mensagem
Além disso, o formulário deve incluir validações básicas para garantir que os dados inseridos pelos usuários sejam válidos. Por exemplo, o campo de e-mail deve ser verificado para garantir que o endereço inserido seja válido, e todos os campos devem ser obrigatórios.
Iniciando pelo Conteúdo
O conteúdo precede o design. Design sem conteúdo não é design, é decoração."
No início de um projeto de design, é tentador ir direto para a interface visual que você imaginou. A maioria das pessoas pensa no design de interface como desenhar caixas dentro de outras caixas, começando pela janela do aplicativo ou navegador e dividindo em seções menores. No entanto, se você desenhar essas caixas de forma arbitrária, elas não se ajustarão ao conteúdo.
É mais eficaz deixar que a forma e a estrutura surjam em relação ao conteúdo. Dê ao conteúdo a forma que ele deseja, em vez de forçá-lo a caber em uma estrutura inadequada. Quando os usuários visitam sites, eles buscam informações como preços, horários de funcionamento ou quem gostou de uma postagem recente. Certifique-se de que o conteúdo que você cria é o que seus usuários procuram. Então, decida como apresentá-lo de maneira que ajude os usuários a atingir seus objetivos.
Primeira Versão do Modelo de Conteúdo
Embora não seja o momento de focar na apresentação e layout, não é cedo demais para pensar na informação que você quer fornecer e sua prioridade na interface. Este é um dos primeiros passos no processo chamado modelagem de conteúdo.
Um modelo de conteúdo usa blocos para organizar os elementos essenciais, prioridades e a ordem da página. Isso ajuda a definir o que precisa ser dito e em que ordem, não o texto final, mas os conceitos e propósitos de cada seção.
Você pode fazer isso em um documento de texto ou usar notas adesivas. Comece listando todo o conteúdo que você acha que deve aparecer em uma tela específica. Em seguida, tente organizar as notas adesivas em ordem de importância, de cima para baixo. Isso ajudará a garantir que seus usuários vejam primeiro o conteúdo de maior prioridade. Visualizar essas informações em blocos ajuda a imaginar como elas podem fluir em uma página e o espaço que podem ocupar. Se for muito para uma página, pense no que pode ser removido ou movido para outra página.
Segunda Versão do Modelo de Conteúdo
Transforme suas notas em esboços de wireframes. Organize as informações relevantes em uma tabela. Avance sem se prender a detalhes e busque feedback o quanto antes, atualizando o modelo de conteúdo conforme necessário. Separar o conteúdo do design visual (layout, cores, tipografia, imagens) facilita o consenso em reuniões com usuários/clientes.
Quando o conteúdo estiver validado, o trabalho pode prosseguir com menos atrito e retrabalho. Gosto de pensar no modelo de conteúdo como uma tela desorganizada que contém todos os ingredientes necessários para se criar uma boa interface.
Projetando a interface ao Redor do Conteúdo
Com base no conteúdo, desenvolva várias versões de wireframes, desde as mais simples e diretas até as mais elaboradas, e solicite feedback dos seus usuários/clientes.
Eu costumo criar entre 3 a 10 versões para uma única tela. Depois, seleciono as melhores e apresento de 2 a 5 opções para o usuário.
Combinando os blocos de conteúdo é possível criar diversos wireframes.
Incorpore Acessibilidade no Design
A acessibilidade começa no design. Podemos aproveitar o momento em que estamos criando os wireframes para já incorporar práticas de acessibilidade, garantindo que todos os usuários tenham uma experiência inclusiva e eficiente.
Landmarks e Cabeçalhos
Ordem de Leitura, Ordem de Foco e Texto Alternativo
De Wireframes no Whimsical a Protótipos no Figma
Vamos usar a última versão do wireframe (V3) como base para começar o desenvolvimento do protótipo no Figma. Como passo inicial, mapeamos cada componente do wireframe para os componentes do Material UI.
Componentes do Material UI Utilizados
Container
Typography
Divider
TextField
Button
Icon
Rating
Avatar
Para saber mais
Last updated
Was this helpful?