Monthly Subscription Starting at AED 99 + VAT

Web design responsivo em Adobe XD
  • Level Foundation
  • Duration 40 hours
  • Offered by

About

“Web design responsivo em Adobe XD” é o sexto curso de um programa que dará a você as habilidades necessárias para se candidatar a empregos de nível básico em design de experiência do usuário (UX, na sigla em inglês). Neste curso, você criará o design de um site responsivo usando o Adobe XD, uma ferramenta de design muito usada. Você completará o processo de design do início ao fim: ter empatia com os usuários, definir dificuldades, apresentar soluções de design, criar wireframes e protótipos e testar designs para receber feedback. No final do curso, você terá um novo projeto de design para incluir no seu portfólio profissional de UX. Além disso, você aprenderá a procurar empregos de nível básico, criar um currículo que destaque suas habilidades e conquistas e ainda desenvolver um site com seu portfólio profissional. Seus instrutores serão designers e pesquisadores de UX atuais do Google, e você realizará atividades práticas que simulam situações reais de projeto de UX. Os alunos que concluírem os sete cursos deste programa de certificação estarão equipados para se candidatar a vagas de designers de UX iniciantes. Veja do que você será capaz ao final deste curso: - Aplicar cada etapa do processo de design de UX (ter empatia, definir, idealizar, criar protótipos e testar) para criar um site responsivo. - Desenvolver designs com uma ferramenta muito usada, o Adobe XD. - Planejar a arquitetura da informação e criar mapas para o design de sites - Aplicar layouts comuns para páginas da Web. - Planejar e realizar um estudo de usabilidade para coletar feedback sobre seus designs. - Iterar designs com base nos insights de pesquisa. - Trabalhar com sistemas de design no Adobe XD. - Adicionar um novo projeto de design ao seu portfólio profissional de UX. - [Opcional] Criar ou atualizar um currículo com foco em UX. - [Opcional] Aprender como procurar e se candidatar para vagas de emprego de nível básico no campo de UX. Este curso é adequado para designers de UX iniciantes que concluíram os cinco cursos anteriores do Certificado de Design de UX do Google. Como alternativa, os alunos precisarão ter sólidos conhecimentos sobre o processo de design e experiência criando wireframes, maquetes e protótipos, além de capacidade para realizar estudos de usabilidade. Não é necessário ter experiência prévia com o Adobe XD.

Modules

Introdução ao Curso 6

    • 2 Videos
    • 3 Readings
    • 1 Quiz
Show info about module content

2 Videos

  • Introdução ao Curso 6: Web design responsivo no Adobe XD
  • Dave - Minha jornada até a UX

3 Readings

  • Bem-vindo ao Curso 6
  • Introdução ao segundo projeto do portfólio
  • Escolher sua segunda instrução para projeto do portfólio

1 Quiz

  • Atividade: Enviar sua opção de solicitação de projeto de portfólio

Introdução ao Adobe XD

    • 5 Videos
    • 2 Readings
    • 2 Discussion
    • 2 Quiz
Show info about module content

2 Discussions

  • Compartilhe seu entusiasmo para aprender a usar o Adobe XD
  • Comparação entre o Adobe XD e o Figma

5 Videos

  • Boas-vindas à semana 1
  • Como funcionam sites responsivos
  • Introdução ao Adobe XD
  • Iniciar um projeto no Adobe XD
  • Jennifer - Usar ferramentas de design digital

2 Readings

  • Primeiros passos com o Adobe XD
  • Opcional - Primeiros passos no Figma

2 Quiz

  • Teste seus conhecimentos sobre o design de sites responsivos
  • Teste seus conhecimentos sobre os fundamentos do Adobe XD

Desenvolver empatia pelos usuários

    • 2 Videos
    • 6 Readings
    • 2 Discussion
    • 3 Quiz
Show info about module content

2 Discussions

  • Discuta a importância de considerar as necessidades dos usuários
  • Compartilhar as perguntas da entrevista

2 Videos

  • Desenvolver empatia pelos usuários e entender pontos problemáticos
  • Criar personas

6 Readings

  • Saiba mais sobre como desenvolver empatia pelos usuários
  • Realize entrevistas para mapas de empatia
  • Criar mapas de empatia
  • Exemplar de atividade: Criar um mapa de empatia
  • Saiba mais sobre personas
  • Exemplar de atividade: Criar personas

3 Quiz

  • Teste seus conhecimentos sobre empatia pelos usuários
  • Atividade: Criar um mapa de empatia
  • Atividade: Criar personas

Definir as necessidades dos usuários

    • 2 Videos
    • 3 Readings
    • 1 Discussion
    • 1 Quiz
Show info about module content

1 Discussions

  • Crie e compartilhe uma história de usuário sobre você

2 Videos

  • Criar histórias de usuários
  • Criar um mapa da jornada do usuário

3 Readings

  • Saiba mais sobre histórias de usuários
  • Saiba mais sobre os mapas de jornada do usuário
  • Exemplar de atividade: Criar uma história e um mapa da jornada do usuário

1 Quiz

  • Atividade: Criar uma história e um mapa da jornada do usuário

Definição do problema

    • 1 Videos
    • 1 Readings
    • 1 Quiz
Show info about module content

1 Videos

  • Criar uma declaração de problema

1 Readings

  • Saiba mais sobre declarações de problema

1 Quiz

  • Teste seus conhecimentos sobre as declarações de problemas

Revisão da semana 1

    • 1 Videos
    • 1 Readings
    • 1 PeerReview
Show info about module content

1 Peer Review

  • Desafio semanal 1: Criar uma declaração de problema

1 Videos

  • Finalização: Início do processo de design de UX: empatia e definição

1 Readings

  • Glossário

Realizar uma auditoria competitiva

    • 2 Videos
    • 3 Readings
    • 2 Quiz
Show info about module content

2 Videos

  • Boas-vindas à semana 2
  • Realizar uma auditoria competitiva

3 Readings

  • Saiba mais sobre auditorias competitivas
  • Exemplar de atividade: Realizar uma auditoria competitiva para seu site
  • Saiba mais sobre o uso de auditorias competitivas para idealizar

2 Quiz

  • Atividade: Realizar uma auditoria competitiva para seu site
  • Autorreflexão: Usar a pesquisa de concorrência para informar os designs

Gerar ideias para designs

    • 2 Videos
    • 2 Readings
    • 1 Discussion
    • 2 Quiz
Show info about module content

1 Discussions

  • Discuta sua técnica de ideação preferida

2 Videos

  • Pensar em ideias usando o exercício Como podemos
  • Pensar em ideias usando o exercício Crazy Eights

2 Readings

  • Saiba mais sobre os exercícios Como podemos e Crazy Eights
  • Exemplar de atividade: Pensar em ideias para seu site

2 Quiz

  • Teste seus conhecimentos sobre técnicas de ideação
  • Atividade: Pensar em ideias para seu site

Planejar a arquitetura da informação

    • 4 Videos
    • 2 Readings
    • 1 Discussion
    • 1 Quiz
    • 1 Plugin
Show info about module content

1 Discussions

  • Discuta as estruturas de sites que você usou

4 Videos

  • Planejar a arquitetura da informação
  • Explorar estruturas comuns de sites
  • Explorar sitemaps
  • Construir um sitemap para seu site

2 Readings

  • Saiba mais sobre a arquitetura da informação
  • Saiba mais sobre como criar um sitemap

1 Quiz

  • Teste seus conhecimentos sobre estruturas de sites

Revisão da semana 2

    • 1 Videos
    • 1 Readings
    • 1 PeerReview
Show info about module content

1 Peer Review

  • Desafio semanal 2: Criar o sitemap de um site

1 Videos

  • Finalização: Continuação do processo de design de UX: Ideação

1 Readings

  • Glossário

Criar wireframes de papel

    • 3 Videos
    • 3 Readings
    • 1 Quiz
    • 1 Plugin
Show info about module content

3 Videos

  • Boas-vindas à semana 3
  • Explorar layouts comuns de páginas iniciais de sites
  • Fundamentos de wireframes

3 Readings

  • Saiba mais sobre layouts de sites comuns
  • Saiba mais sobre wireframes
  • Exemplar de atividade: Começar a criar wireframes de papel para seu site

1 Quiz

  • Atividade: Começar a criar wireframes de papel para seu site

Planejar páginas responsivas da Web

    • 2 Videos
    • 3 Readings
    • 1 Quiz
    • 1 Plugin
Show info about module content

2 Videos

  • Planejar um layout responsivo
  • Ajustar layouts de página com base no tamanho da tela

3 Readings

  • Saiba mais sobre como planejar layouts responsivos
  • Elementos comuns do design responsivo
  • Exemplar de atividade: Criar variações dos seus wireframes de papel

1 Quiz

  • Atividade: Criar variações dos seus wireframes de papel

Criar wireframes digitais no Adobe XD

    • 4 Videos
    • 5 Readings
    • 2 Quiz
Show info about module content

4 Videos

  • Transição de wireframes de papel para digitais
  • Criar wireframes digitais no Adobe XD
  • Criar wireframes para outros tamanhos de tela no Adobe XD
  • Jay - Design com o Adobe XD

5 Readings

  • Saiba mais sobre a criação de wireframes digitais no Adobe XD
  • Opcional - Criar wireframes digitais no Figma
  • Exemplar de atividade: Criar wireframes digitais para uma tela de desktop
  • Opcional - Criar wireframes para outros tamanhos de tela no Figma
  • Exemplar de atividade: Criar wireframes digitais para outros tamanhos de tela

2 Quiz

  • Atividade: Criar wireframes digitais para uma tela de desktop
  • Atividade: Criar wireframes digitais para outros tamanhos de tela

Refinar wireframes

    • 2 Videos
    • 1 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • Analisar os cabeçalhos, pontos de referência e pontos focais nos seus wireframes

2 Videos

  • Refinar wireframes para melhorar a acessibilidade
  • Avaliar wireframes usando os Princípios de Gestalt

1 Readings

  • Saiba mais sobre como usar os Princípios de Gestalt em wireframes

Revisão da semana 3

    • 1 Videos
    • 1 Readings
    • 1 PeerReview
Show info about module content

1 Peer Review

  • Desafio semanal 3: Ajustar os wireframes de acordo com os padrões

1 Videos

  • ​Finalização: Como criar wireframes para um site responsivo

1 Readings

  • Glossário

Criação de um protótipo de baixa fidelidade no Adobe XD

    • 3 Videos
    • 4 Readings
    • 2 Quiz
Show info about module content

3 Videos

  • Boas-vindas à semana 4
  • Compreender protótipos de alta fidelidade
  • Criar um protótipo de baixa fidelidade no Adobe XD

4 Readings

  • Saiba mais sobre como criar um protótipo de baixa fidelidade no Adobe XD
  • Opcional – Criar um protótipo de baixa fidelidade no Figma
  • Exemplo de atividade: criar um protótipo de baixa fidelidade para seu site responsivo
  • Verificar um protótipo de baixa fidelidade

2 Quiz

  • Testar seus conhecimentos sobre wireframes versus protótipos
  • Atividade: criar um protótipo de baixa fidelidade para seu site responsivo

Planejar e realizar um estudo de usabilidade para um protótipo de baixa fidelidade

    • 4 Videos
    • 6 Readings
    • 1 Discussion
    • 4 Quiz
Show info about module content

1 Discussions

  • Compartilhar insights do seu estudo de usabilidade

4 Videos

  • Planejar um estudo de pesquisa de UX
  • Realizar um estudo de usabilidade
  • Reduzir o viés em um estudo de usabilidade
  • Analisar e sintetizar os resultados da pesquisa

6 Readings

  • Saiba mais sobre como planejar um estudo de pesquisa de UX
  • Exemplo de atividade: Planejar um estudo de pesquisa de UX
  • Saber mais sobre como realizar um estudo de usabilidade
  • Exemplo de atividade: realizar um estudo de usabilidade para um protótipo de baixa fidelidade
  • Saber mais sobre como analisar e sintetizar os resultados da pesquisa
  • Exemplo de atividade: Analisar e sintetizar os resultados de um estudo de usabilidade

4 Quiz

  • Atividade: Planejar um estudo de pesquisa de UX
  • Autorreflexão: determinar como reduzir o viés em seus próprios estudos
  • Atividade: realizar um estudo de usabilidade para um protótipo de baixa fidelidade
  • Atividade: Analisar e sintetizar os resultados de um estudo de usabilidade

Iterar designs com base nas descobertas da pesquisa

    • 1 Videos
    • 1 Readings
    • 1 Discussion
    • 1 Quiz
Show info about module content

1 Discussions

  • Compartilhe como você iterou em designs com base em insights de pesquisa

1 Videos

  • Iterar em projetos de baixa fidelidade com base nas descobertas da pesquisa

1 Readings

  • Saber mais sobre a iteração em designs de baixa fidelidade

1 Quiz

  • Teste seus conhecimentos sobre modificação de projetos com base nos resultados da pesquisa

Revisão da semana 4

    • 1 Videos
    • 1 Readings
    • 1 PeerReview
Show info about module content

1 Peer Review

  • Desafio semanal 4: Atualizar protótipos de baixa fidelidade de acordo com os insights do estudo de usabilidade

1 Videos

  • Finalização: Criação e teste de protótipos de baixa fidelidade

1 Readings

  • Glossário

Começar a criar modelos

    • 2 Videos
    • 3 Readings
    • 1 Quiz
Show info about module content

2 Videos

  • Boas-vindas à semana 5
  • Começar a criar modelos

3 Readings

  • Analisar os elementos fundamentais do design visual
  • Analisar como organizar elementos em modelos
  • Revisar os princípios do design visual

1 Quiz

  • Testar seus conhecimentos sobre os conceitos básicos de modelos

Criar modelos para um site para computador

    • 2 Videos
    • 4 Readings
    • 2 Quiz
Show info about module content

2 Videos

  • Começar a criar modelos para a página inicial de um site no Adobe XD
  • Continuar criando modelos para a página inicial de um site no Adobe XD

4 Readings

  • Opcional: começar a criar modelos de sites no Figma
  • Adicionar imagens e logotipos a modelos no Adobe XD
  • Usar grades repetidas para projetar no Adobe XD
  • Exemplo de atividade: Criar maquetes para um site

2 Quiz

  • Testar seus conhecimentos sobre como criar uma página inicial no Adobe XD
  • Atividade: Criar maquetes para um site

Criar modelos para um site para dispositivos móveis

    • 1 Videos
    • 3 Readings
    • 1 Quiz
Show info about module content

1 Videos

  • Criar modelos para um site para dispositivos móveis no Adobe XD

3 Readings

  • Saiba mais sobre menus de navegação ocultos
  • Opcional: criar modelos para um site para dispositivos móveis no Figma
  • Exemplo de atividade: Criar um modelo para a página inicial de um site para dispositivos móveis

1 Quiz

  • Atividade: Criar um modelo para a página inicial de um site para dispositivos móveis

Trabalhar com sistemas de design

    • 2 Videos
    • 2 Readings
    • 1 Discussion
    • 3 Quiz
Show info about module content

1 Discussions

  • Compartilhar seus sistemas de design favoritos

2 Videos

  • Trabalhar com sistemas de design
  • Usar sistemas de design externos no Adobe XD

2 Readings

  • Saiba mais sobre sistemas de design
  • Opcional – Exemplo de atividade: Criar uma folha de adesivos no Figma

3 Quiz

  • Testar seus conhecimentos sobre como trabalhar com sistemas de design
  • Atividade: Documentar suas decisões de design
  • Opcional – Atividade: Criar uma folha de adesivos no Figma

Criar um protótipo de alta fidelidade

    • 2 Videos
    • 1 Readings
    • 1 Discussion
    • 1 Quiz
Show info about module content

1 Discussions

  • Compartilhar um recurso sobre design inclusivo e acessível

2 Videos

  • Criar um protótipo de alta fidelidade no Adobe XD
  • Fazer anotações em protótipos para acessibilidade na Web

1 Readings

  • Saiba mais sobre acessibilidade na Web

1 Quiz

  • Testar seus conhecimentos sobre acessibilidade na Web

Revisão da semana 5

    • 1 Videos
    • 1 Readings
    • 1 PeerReview
Show info about module content

1 Peer Review

  • Desafio semanal 5: Criar um protótipo de alta fidelidade para um site

1 Videos

  • Finalização: Como criar e testar designs de alta fidelidade

1 Readings

  • Glossário

Opcional: teste o protótipo de alta fidelidade

    • 1 Videos
    • 1 Readings
    • 1 Quiz
Show info about module content

1 Videos

  • Opcional: testar o protótipo de alta fidelidade

1 Readings

  • Opcional: revise como planejar e realizar um estudo de usabilidade

1 Quiz

  • Testar seus conhecimentos sobre estudos de usabilidade

Entrega de designs

    • 3 Videos
    • 1 Readings
    • 1 Quiz
Show info about module content

3 Videos

  • Bem-vindo à semana 6
  • Colaborar com as equipes de engenharia
  • Entregar especificações de design no Adobe XD

1 Readings

  • Colaborar remotamente com o Adobe XD

1 Quiz

  • Testar seus conhecimentos sobre a transferência de designs

Adicionar um projeto ao seu portfólio

    • 1 Videos
    • 1 Readings
    • 1 Discussion
    • 1 Quiz
    • 1 PeerReview
Show info about module content

1 Peer Review

  • Adicionar um novo estudo de caso ao seu portfólio

1 Discussions

  • Compartilhar estudos de caso de portfólio com designs de sites

1 Videos

  • Adicionar um projeto ao seu portfólio

1 Readings

  • Saiba mais sobre estudos de caso de portfólio

1 Quiz

  • Testar seus conhecimentos em estudos de caso de portfólio

Opcional – Pesquise vagas de UX

    • 5 Videos
    • 4 Readings
    • 3 Quiz
Show info about module content

5 Videos

  • Entenda os trabalhos comuns para designers de UX
  • Explore os tipos de empresa em que os designers de UX trabalham
  • Kenny – Perseverança
  • Identifique onde se candidatar a trabalhos de design de UX
  • Verifique descrições de vagas para palavras-chave

4 Readings

  • Saiba mais sobre vagas na área de experiência do usuário
  • Descubra oportunidades de trabalho de design de UX
  • Exemplo de atividade: Comece a procurar vagas de UX usando um rastreador
  • Exemplo de atividade: Destaque palavras-chave e requisitos nas descrições de vagas

3 Quiz

  • Autorreflexão: Compartilhe seus objetivos e interesses profissionais
  • Atividade: Comece a procurar vagas de UX usando um rastreador
  • Atividade: Destaque palavras-chave e requisitos nas descrições de vagas

Opcional - Crie um currículo de design UX

    • 4 Videos
    • 2 Readings
    • 2 Quiz
Show info about module content

4 Videos

  • Entenda os currículos de design de UX
  • Dane – Meu conselho para currículos de design UX
  • Tim – Meu conselho para currículos de design de UX
  • Atualizar um currículo com base nas descrições de vagas

2 Readings

  • Elementos em um currículo típico de design UX
  • Exemplo de atividade: Esboce um currículo de design de UX

2 Quiz

  • Autorreflexão: Pense nas informações para incluir em seu currículo
  • Atividade: Esboce um currículo de design de UX

Revisão da semana 6

    • 1 Videos
    • 1 Readings
    • 1 Quiz
Show info about module content

1 Videos

  • Finalização: Documentar o trabalho de design e procurar empregos

1 Readings

  • Glossário

1 Quiz

  • Desafio semanal 6: Trabalho de design de documentos e busca de empregos

Revisão do curso

    • 1 Videos
    • 1 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • Compartilhe sua experiência no curso

1 Videos

  • Parabéns por concluir o Curso 6: Web design responsivo em Adobe XD

1 Readings

  • Comece o próximo curso

Auto Summary

"Web design responsivo em Adobe XD" é um curso fundamental focado no desenvolvimento de habilidades em design de experiência do usuário (UX). Ministrado por designers e pesquisadores de UX do Google, o curso capacita você a criar sites responsivos utilizando Adobe XD. Com uma duração de 2400 minutos, o curso inclui atividades práticas que cobrem todo o processo de design, desde a empatia com usuários até a criação de protótipos e testes. Ideal para iniciantes em UX, o curso prepara os alunos para vagas de nível básico em design de UX e inclui opções para desenvolver um currículo e portfólio profissional. Disponível na plataforma Coursera com assinatura Starter.