Aula 28 - Parte 2: Engenharia Reversa no UI Design 🔄🎨

Поділитися
Вставка
  • Опубліковано 10 лют 2025
  • Na segunda parte do nosso projeto de Engenharia Reversa, seguimos na recriação da página de perfil do LinkedIn, focando agora no Card de Perfil e seus elementos.
    📌 O que você vai aprender:
    🔹Construção do Card de Perfil do LinkedIn, analisando sua estrutura e composição.
    🔹Criação de elementos visuais como foto de perfil, nome, cargo, localização e botões de ação.
    🔹Uso de Auto-Layout para organizar os elementos de forma flexível e responsiva.
    🔹Aplicação de tipografia e espaçamentos para um design alinhado com boas práticas de UI.
    🔹Como criar componentes reutilizáveis, garantindo consistência e escalabilidade no design.
    Essa aula reforça o conceito de aprendizado prático, ajudando você a entender como grandes plataformas estruturam suas interfaces e como aplicar esses conceitos em seus próprios projetos.
    💡 Se meus conteúdos têm te ajudado de alguma forma, considere "me comprar um café" ☕. Isso me ajuda a continuar criando materiais gratuitos e expandir ainda mais o conteúdo que ofereço. Cada apoio, por menor que seja, faz uma grande diferença!
    buymeacoffee.c...
    Obrigado por estar aqui e fazer parte dessa jornada! 🚀
    Linkedin: / rogerbif
    Behance: be.net/rogerbif
    IG: / rogerbif
    Setup:
    Notebook Gamer Dell G15
    13ª geração Intel® Core™ i7-13650HX
    NVIDIA® GeForce® RTX™ 3060, 6GB GDDR6
    32GB DDR5 (2x16GB) 4800MT/s
    SSD de 512GB PCIe NVMe M.2
    Mouse Sem Fio Mx Master 3s Logitech
    Mousepad Vancer Ice v2 XL
    Monitor 29'' Ultrawide 29wk600-w LG
    Suporte ELG F98hdmi
    Fone De Ouvido Bluetooth Sem Fio Club 700bt Jbl Preto
    #UIDesign #Figma #EngenhariaReversa #LinkedInRecreate #DesignPrático #DesignDeInterfaces #ComponentesNoFigma #AutoLayoutFigma #CursoDeDesign #UIUXDesign

КОМЕНТАРІ • 4

  • @Fazendojogo
    @Fazendojogo 8 днів тому +1

    No futuro pretende dar uma aula intro da parte de navegação do figma, para testar a usabilidade e tal (apesar que sei que o foco do seu curso é UI...)? Geralmente para isso recomendo o Quant-UX, único que conheço totalmente grátis, grava automaticamente um video de cada teste (só mandar o link para alguém testar) e ainda gera heatmap de todos os testes. O que você acha dele? (pode importar a arte de outros locais é só montar a navegação....) [ah, e por curiosidade, qual ferramenta usa para gerar zoom na gravação dos vídeos, faz em tempo real?]

    • @rogerbif
      @rogerbif  8 днів тому +1

      @@Fazendojogo sim os últimos capítulos estou fazendo o Design do LinkedIn após terminar toda a página vou fazer aulas de prototipacão.
      Quanto a teste de usabilidade não moderado sempre usei o Maze este Quant-UX ainda não usei irei testar.
      Sobre o zoom é um script que coloquei no OBS Studio ajuda bastante

    • @Fazendojogo
      @Fazendojogo 7 днів тому +1

      @@rogerbif Não conhecia Maze, parece complexo, importa projeto do figma e só fazer a navegação? O Quant-UX é super simples, quase demais... (mas é código aberto, pode ter uns bugs). Esse script de zoom do OBS de onde tirou? Estava precisando de uma boa solução pra isso e o que tinha encontrado gerava problemas como duplicar a seta do mouse...

    • @rogerbif
      @rogerbif  7 днів тому +1

      @@Fazendojogo descobri aqui nesse canal
      ua-cam.com/video/hv_u_y-koYE/v-deo.htmlsi=0h78MI032nd-xs2J