Pontos para estudar:

  1. Conceitos de Design System;
  2. Conceitos de Design Atômico;
  3. Figma - Ferramenta para Design de Interfaces:
    1. Introdução (ferramentas, páginas, etc.);
    2. Cores e organização das cores em grupos;
    3. Tipografia;
    4. Grids e espaçamentos;
    5. Tokens;
    6. Auto layout e Constraints;
    7. Componentes, propriedades, variáveis e variantes.

Atividades para praticar:

  1. Criar o design de um sistema web que controla as inscrições em um evento científico. O evento abordará o branqueamento de corais, onde usuários poderão se inscrever e publicar artigos. Os administradores poderão ver a quantidade de inscritos e artigos submetidos. Dessa forma, o modelo deverá conter:
    1. Página inicial, página “sobre o evento”, página de inscrição / login, página para o usuário ver os seus artigos e outra para postar um novo artigo.
    2. Página (dashboard) para os administradores verem a quantidade de artigos e inscritos no sistema, páginas para listar artigos/inscritos (como tabela e com opções de ver, remover, editar, etc.).
    3. Protótipo funcional.
  2. Criar um design para um aplicativo de um loja. Assim, o modelo deverá conter:
    1. Telas básicas: Tela inicial, onde os usuários poderão ver os produtos e escolher/adicionar itens ao seu carrinho. Tela de carrinho, para ver quais itens foram selecionados. Tela de perfil de usuário, para o usuário acessar suas informações pessoais, de pagamento, de endereço e últimas compras.
    2. Telas de detalhes: Tela para detalhar um produto, tela para detalhar uma categoria e tela para detalhar informações da loja / usuário.
    3. Telas específicas: Tela para finalizar pedido e fazer pagamento, tela para cadastrar cartão de crédito, tela de login e cadastro de usuário.
    4. Protótipo funcional.

Sugestão de material:

http://educafrotech.educafro.org.br/documents/ui_design.pdf

https://www.youtube.com/watch?v=vg-INqhKD5c

https://www.youtube.com/watch?v=CdmseN5FZyI

https://www.youtube.com/watch?v=T8jUiXu8ISw