When you enroll in this course, you'll also be enrolled in this Professional Certificate.
Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate from Google
There are 6 modules in this course
“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.
Descubra os fundamentos do Web design responsivo. Para criar um site responsivo, você vai seguir as etapas do processo de design de UX: empatia, definição, idealização, protótipo e teste. Nesta parte do curso, você vai ver as etapas de empatia e definição. Além disso, você vai começar a explorar o Adobe XD, uma ferramenta de design famosa que será usada ao longo deste curso.
Introdução ao Curso 6: Web design responsivo no Adobe XD•2 minutes
Dave - Minha jornada até a UX•3 minutes
Boas-vindas à semana 1•1 minute
Como funcionam sites responsivos•3 minutes
Introdução ao Adobe XD•2 minutes
Iniciar um projeto no Adobe XD•8 minutes
Jennifer - Usar ferramentas de design digital•2 minutes
Desenvolver empatia pelos usuários e entender pontos problemáticos•4 minutes
Criar personas•2 minutes
Criar histórias de usuários•3 minutes
Criar um mapa da jornada do usuário•4 minutes
Criar uma declaração de problema•2 minutes
Finalização: Início do processo de design de UX: empatia e definição•1 minute
16 readings•Total 155 minutes
Bem-vindo ao Curso 6•10 minutes
Introdução ao segundo projeto do portfólio•10 minutes
Escolher sua segunda instrução para projeto do portfólio •10 minutes
Primeiros passos com o Adobe XD •10 minutes
Opcional - Primeiros passos no Figma•10 minutes
Saiba mais sobre como desenvolver empatia pelos usuários•10 minutes
Realize entrevistas para mapas de empatia •10 minutes
Criar mapas de empatia•10 minutes
Exemplar de atividade: Criar um mapa de empatia•10 minutes
Saiba mais sobre personas •10 minutes
Exemplar de atividade: Criar personas•10 minutes
Saiba mais sobre histórias de usuários•10 minutes
Saiba mais sobre os mapas de jornada do usuário•10 minutes
Exemplar de atividade: Criar uma história e um mapa da jornada do usuário•10 minutes
Saiba mais sobre declarações de problema•10 minutes
Glossário•5 minutes
8 assignments•Total 169 minutes
Atividade: Enviar sua opção de solicitação de projeto de portfólio•5 minutes
Teste seus conhecimentos sobre o design de sites responsivos •2 minutes
Teste seus conhecimentos sobre os fundamentos do Adobe XD•4 minutes
Teste seus conhecimentos sobre empatia pelos usuários•4 minutes
Atividade: Criar um mapa de empatia•90 minutes
Atividade: Criar personas•30 minutes
Atividade: Criar uma história e um mapa da jornada do usuário•30 minutes
Teste seus conhecimentos sobre as declarações de problemas•4 minutes
1 peer review•Total 60 minutes
Desafio semanal 1: Criar uma declaração de problema•60 minutes
5 discussion prompts•Total 50 minutes
Compartilhe seu entusiasmo para aprender a usar o Adobe XD•10 minutes
Comparação entre o Adobe XD e o Figma•10 minutes
Discuta a importância de considerar as necessidades dos usuários•10 minutes
Compartilhar as perguntas da entrevista•10 minutes
Crie e compartilhe uma história de usuário sobre você•10 minutes
Continuação do processo de design de UX: Ideação
Module 2•5 hours to complete
Module details
Hora de continuar seu projeto de design de site responsivo. Nesta parte do curso, você vai passar para a fase de ideação do processo de design. Para pensar em soluções de design, você vai conduzir uma auditoria competitiva, realizar a atividade Como podemos e esboçar ideias no exercício Crazy Eights. Você também vai aprender sobre a importância da arquitetura da informação e dos sitemaps para projetar sites.
Pensar em ideias usando o exercício Como podemos•3 minutes
Pensar em ideias usando o exercício Crazy Eights•5 minutes
Planejar a arquitetura da informação•2 minutes
Explorar estruturas comuns de sites •7 minutes
Explorar sitemaps•3 minutes
Construir um sitemap para seu site•5 minutes
Finalização: Continuação do processo de design de UX: Ideação•1 minute
8 readings•Total 75 minutes
Saiba mais sobre auditorias competitivas •10 minutes
Exemplar de atividade: Realizar uma auditoria competitiva para seu site•10 minutes
Saiba mais sobre o uso de auditorias competitivas para idealizar •10 minutes
Saiba mais sobre os exercícios Como podemos e Crazy Eights•10 minutes
Exemplar de atividade: Pensar em ideias para seu site•10 minutes
Saiba mais sobre a arquitetura da informação•10 minutes
Saiba mais sobre como criar um sitemap•10 minutes
Glossário•5 minutes
5 assignments•Total 92 minutes
Atividade: Realizar uma auditoria competitiva para seu site•30 minutes
Autorreflexão: Usar a pesquisa de concorrência para informar os designs•20 minutes
Teste seus conhecimentos sobre técnicas de ideação•4 minutes
Atividade: Pensar em ideias para seu site•30 minutes
Teste seus conhecimentos sobre estruturas de sites•8 minutes
1 peer review•Total 60 minutes
Desafio semanal 2: Criar o sitemap de um site •60 minutes
2 discussion prompts•Total 20 minutes
Discuta sua técnica de ideação preferida•10 minutes
Discuta as estruturas de sites que você usou•10 minutes
1 plugin•Total 15 minutes
Explorar as estruturas do site•15 minutes
Como criar wireframes para um site responsivo
Module 3•7 hours to complete
Module details
Depois de criar empatia pelos usuários, definir o problema do usuário que será resolvido e começar a idealizar possíveis soluções, é hora de dar vida às suas ideias em wireframes. Seu site responsivo terá layouts diferentes dependendo do tamanho do dispositivo e da tela para que você está projetando, então você vai criar muitos wireframes diferentes. Primeiro, você vai explorar layouts de sites comuns e criar wireframes de papel. Em seguida, você vai conhecer alguns elementos e componentes muito usados no design de sites responsivos. Depois, você vai passar para a criação de wireframes digitais no Adobe XD. Por fim, você vai atualizar e refinar seus wireframes para melhorar a acessibilidade.
Explorar layouts comuns de páginas iniciais de sites•7 minutes
Fundamentos de wireframes •9 minutes
Planejar um layout responsivo•3 minutes
Ajustar layouts de página com base no tamanho da tela•3 minutes
Transição de wireframes de papel para digitais•1 minute
Criar wireframes digitais no Adobe XD•9 minutes
Criar wireframes para outros tamanhos de tela no Adobe XD•5 minutes
Jay - Design com o Adobe XD•3 minutes
Refinar wireframes para melhorar a acessibilidade•6 minutes
Avaliar wireframes usando os Princípios de Gestalt•3 minutes
Finalização: Como criar wireframes para um site responsivo •1 minute
13 readings•Total 125 minutes
Saiba mais sobre layouts de sites comuns•10 minutes
Saiba mais sobre wireframes•10 minutes
Exemplar de atividade: Começar a criar wireframes de papel para seu site•10 minutes
Saiba mais sobre como planejar layouts responsivos•10 minutes
Elementos comuns do design responsivo•10 minutes
Exemplar de atividade: Criar variações dos seus wireframes de papel•10 minutes
Saiba mais sobre a criação de wireframes digitais no Adobe XD•10 minutes
Opcional - Criar wireframes digitais no Figma•10 minutes
Exemplar de atividade: Criar wireframes digitais para uma tela de desktop•10 minutes
Opcional - Criar wireframes para outros tamanhos de tela no Figma•10 minutes
Exemplar de atividade: Criar wireframes digitais para outros tamanhos de tela•10 minutes
Saiba mais sobre como usar os Princípios de Gestalt em wireframes•10 minutes
Glossário•5 minutes
4 assignments•Total 120 minutes
Atividade: Começar a criar wireframes de papel para seu site•30 minutes
Atividade: Criar variações dos seus wireframes de papel•30 minutes
Atividade: Criar wireframes digitais para uma tela de desktop•30 minutes
Atividade: Criar wireframes digitais para outros tamanhos de tela•30 minutes
1 peer review•Total 60 minutes
Desafio semanal 3: Ajustar os wireframes de acordo com os padrões•60 minutes
1 discussion prompt•Total 10 minutes
Analisar os cabeçalhos, pontos de referência e pontos focais nos seus wireframes•10 minutes
2 plugins•Total 30 minutes
Identificar o layout do site•15 minutes
Explorar o web design responsivo•15 minutes
Criação e teste de protótipos de baixa fidelidade
Module 4•6 hours to complete
Module details
Agora que você criou wireframes digitais no Adobe XD, é hora de criar, testar e iterar em um protótipo de baixa fidelidade. Primeiro, você vai aprender como criar um protótipo de baixa fidelidade no Adobe XD. Você vai planejar e realizar um estudo de usabilidade para receber feedback sobre seu protótipo. Depois, você vai modificar seus designs de baixa fidelidade com base nos insights da sua pesquisa.
Compreender protótipos de alta fidelidade•3 minutes
Criar um protótipo de baixa fidelidade no Adobe XD•5 minutes
Planejar um estudo de pesquisa de UX •4 minutes
Realizar um estudo de usabilidade•3 minutes
Reduzir o viés em um estudo de usabilidade•5 minutes
Analisar e sintetizar os resultados da pesquisa•3 minutes
Iterar em projetos de baixa fidelidade com base nas descobertas da pesquisa•5 minutes
Finalização: Criação e teste de protótipos de baixa fidelidade•1 minute
12 readings•Total 115 minutes
Saiba mais sobre como criar um protótipo de baixa fidelidade no Adobe XD•10 minutes
Opcional – Criar um protótipo de baixa fidelidade no Figma•10 minutes
Exemplo de atividade: criar um protótipo de baixa fidelidade para seu site responsivo•10 minutes
Verificar um protótipo de baixa fidelidade•10 minutes
Saiba mais sobre como planejar um estudo de pesquisa de UX •10 minutes
Exemplo de atividade: Planejar um estudo de pesquisa de UX•10 minutes
Saber mais sobre como realizar um estudo de usabilidade•10 minutes
Exemplo de atividade: realizar um estudo de usabilidade para um protótipo de baixa fidelidade•10 minutes
Saber mais sobre como analisar e sintetizar os resultados da pesquisa•10 minutes
Exemplo de atividade: Analisar e sintetizar os resultados de um estudo de usabilidade•10 minutes
Saber mais sobre a iteração em designs de baixa fidelidade•10 minutes
Glossário•5 minutes
7 assignments•Total 148 minutes
Testar seus conhecimentos sobre wireframes versus protótipos•4 minutes
Atividade: criar um protótipo de baixa fidelidade para seu site responsivo •30 minutes
Atividade: Planejar um estudo de pesquisa de UX•30 minutes
Autorreflexão: determinar como reduzir o viés em seus próprios estudos•20 minutes
Atividade: realizar um estudo de usabilidade para um protótipo de baixa fidelidade•30 minutes
Atividade: Analisar e sintetizar os resultados de um estudo de usabilidade•30 minutes
Teste seus conhecimentos sobre modificação de projetos com base nos resultados da pesquisa•4 minutes
1 peer review•Total 60 minutes
Desafio semanal 4: Atualizar protótipos de baixa fidelidade de acordo com os insights do estudo de usabilidade•60 minutes
2 discussion prompts•Total 20 minutes
Compartilhar insights do seu estudo de usabilidade•10 minutes
Compartilhe como você iterou em designs com base em insights de pesquisa•10 minutes
Como criar e testar designs de alta fidelidade
Module 5•7 hours to complete
Module details
Nesta parte do curso, você se aprontará para criar modelos do site responsivo no Adobe XD. Você também vai estender seu trabalho com sistemas de design e usar componentes de sistemas de design externos nos designs de sites responsivos. Em seguida, você vai transformar os modelos em um protótipo de alta fidelidade criando conexões, adicionando detalhes de interação e ajustando animações. Por fim, você vai testar o protótipo de alta fidelidade com um estudo de usabilidade, com o objetivo de conseguir feedback de um conjunto diversificado de usuários. Ao fim desta parte do curso, os designs de sites responsivos estarão completos.
Começar a criar modelos para a página inicial de um site no Adobe XD•10 minutes
Continuar criando modelos para a página inicial de um site no Adobe XD•11 minutes
Criar modelos para um site para dispositivos móveis no Adobe XD•3 minutes
Trabalhar com sistemas de design•3 minutes
Usar sistemas de design externos no Adobe XD•2 minutes
Criar um protótipo de alta fidelidade no Adobe XD•7 minutes
Fazer anotações em protótipos para acessibilidade na Web•5 minutes
Finalização: Como criar e testar designs de alta fidelidade•1 minute
Opcional: testar o protótipo de alta fidelidade•3 minutes
15 readings•Total 145 minutes
Analisar os elementos fundamentais do design visual•10 minutes
Analisar como organizar elementos em modelos•10 minutes
Revisar os princípios do design visual•10 minutes
Opcional: começar a criar modelos de sites no Figma •10 minutes
Adicionar imagens e logotipos a modelos no Adobe XD•10 minutes
Usar grades repetidas para projetar no Adobe XD•10 minutes
Exemplo de atividade: Criar maquetes para um site•10 minutes
Saiba mais sobre menus de navegação ocultos•10 minutes
Opcional: criar modelos para um site para dispositivos móveis no Figma•10 minutes
Exemplo de atividade: Criar um modelo para a página inicial de um site para dispositivos móveis•10 minutes
Saiba mais sobre sistemas de design•10 minutes
Opcional – Exemplo de atividade: Criar uma folha de adesivos no Figma•10 minutes
Saiba mais sobre acessibilidade na Web•10 minutes
Glossário•5 minutes
Opcional: revise como planejar e realizar um estudo de usabilidade•10 minutes
9 assignments•Total 144 minutes
Testar seus conhecimentos sobre os conceitos básicos de modelos•4 minutes
Testar seus conhecimentos sobre como criar uma página inicial no Adobe XD•6 minutes
Atividade: Criar maquetes para um site•30 minutes
Atividade: Criar um modelo para a página inicial de um site para dispositivos móveis•30 minutes
Testar seus conhecimentos sobre como trabalhar com sistemas de design•4 minutes
Atividade: Documentar suas decisões de design•30 minutes
Opcional – Atividade: Criar uma folha de adesivos no Figma•30 minutes
Testar seus conhecimentos sobre acessibilidade na Web•6 minutes
Testar seus conhecimentos sobre estudos de usabilidade •4 minutes
1 peer review•Total 60 minutes
Desafio semanal 5: Criar um protótipo de alta fidelidade para um site •60 minutes
2 discussion prompts•Total 20 minutes
Compartilhar seus sistemas de design favoritos•10 minutes
Compartilhar um recurso sobre design inclusivo e acessível •10 minutes
Documentar o trabalho de design e procurar empregos
Module 6•7 hours to complete
Module details
Com designs de sites responsivos completos, é possível compartilhar seu trabalho com outras pessoas. Para começar, você vai aprender a preparar e entregar designs aos engenheiros que vão construir o produto final. Você também vai adicionar um estudo de caso ao seu portfólio profissional de UX focado no seu design de site responsivo. Depois, vai se concentrar no seu grande objetivo: conseguir um emprego como designer de UX. Você vai aprender dicas e truques para analisar anúncios de vaga e vai criar um currículo atraente que destaque suas novas habilidades de UX.
Grow with Google is an initiative that draws on Google's decades-long history of building products, platforms, and services that help people and businesses grow. We aim to help everyone – those who make up the workforce of today and the students who will drive the workforce of tomorrow – access the best of Google’s training and tools to grow their skills, careers, and businesses.
Designers de experiência do usuário (UX) têm como foco a experiência de usuários que utilizam produtos como sites, aplicativos e objetos físicos. Designers de UX tornam essas interações diárias práticas, agradáveis e acessíveis. A função de um designer de UX iniciante pode incluir ter ideias para resolver problemas e realizar pesquisas com os usuários, além de projetar wireframes, maquetes e protótipos.
Se você gosta de conversar e tem empatia com as pessoas, gosta de desenhar, pensar de maneira criativa ou prestar atenção a detalhes, um trabalho como designer de UX pode ser uma boa opção para você!
Que experiência é necessária?
Este é o sexto de sete cursos que vão fornecer as habilidades de que você precisa para se candidatar a empregos de nível básico em design de experiência do usuário. É altamente recomendável concluir os cinco primeiros cursos do Certificado de Design de UX do Google UX antes deste:
Como alternativa, se pretender tomar este curso como o primeiro do programa, você deve ter experiência na realização de pesquisas com usuários para ter empatia com eles e determinar problemas específicos. Você precisa ter capacidade para criar personas, histórias de usuários, mapas da jornada do usuário e declarações de problema. Você também precisa saber como criar wireframes e protótipo de baixa fidelidade em papel. Além disso, é útil ter experiência na realização de estudos de usabilidade e na iteração de designs. Se você não estiver familiarizado com esses tópicos, eles são abordados nos cursos anteriores do Certificado de Design de UX do Google.
Quais ferramentas ou plataformas estão incluídas no currículo?
Adobe XD e Figma são as ferramentas de design ensinadas no Certificado de Design de UX do Google. O foco deste curso é a criação de designs no Adobe XD. Os alunos têm nove meses de acesso à versão Single App do Adobe XD para compartilhar links ilimitados a protótipos. É preciso concluir o curso 1 (inclusive todas as tarefas com nota) do Certificado de Design de UX do Google para receber essa oferta. A assinatura é exclusiva para alunos do Certificado de Design de UX do Google e não pode ser revendida, emprestada nem compartilhada. Depois que os alunos qualificados concluírem o curso 1, eles receberão um e-mail e uma mensagem do Coursera com as instruções para resgatar a oferta.
Também serão usados planilhas e aplicativos de processamento de texto e de apresentação. Ao longo do programa, você usará a plataforma que escolher para criar um portfólio profissional que servirá de vitrine do seu trabalho de design de UX.
Para quais empregos este certificado ajudará a me preparar?
Uma das partes mais interessantes de ingressar na área de experiência do usuário é o grande número de oportunidades de trabalho disponíveis. Quase todas as empresas precisam de designers de UX para ajudar a criar produtos digitais e físicos. Embora a demanda por designers de UX continue aumentando, atualmente há uma escassez de profissionais de design de UX para preencher esses cargos.
Uma carreira em design de UX oferece a oportunidade de trabalhar como generalista, exercendo a função de designer de UX, designer de UI ou pesquisador de UX, ou como especialista, por exemplo, no cargo de designer visual ou designer de interação. Depois de concluir este programa de certificação, você poderá pesquisar todos esses cargos e encontrar a função que melhor se adequa a você.
Preciso fazer o curso em uma ordem específica?
Este é o sexto de sete cursos do Certificado de Design de UX do Google. Recomendamos que você conclua os sete cursos deste programa de certificação na ordem apresentada, porque o conteúdo e as aplicações de cada curso se baseiam nas informações apresentadas e praticadas em cursos anteriores.
When will I have access to the lectures and assignments?
To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
What will I get if I subscribe to this Certificate?
When you enroll in the course, you get access to all of the courses in the Certificate, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.