Web design responsivo em Adobe XD

Go to Course: https://www.coursera.org/learn/web-design-responsivo-em-adobe-xd

Introduction

### Course Review: Web Design Responsivo em Adobe XD **Course Name**: Web Design Responsivo em Adobe XD **Platform**: Coursera **Target Audience**: Individuals interested in entering the field of User Experience (UX) design, particularly those looking for foundational skills in responsive web design. #### Course Overview “Web Design Responsivo em Adobe XD” is the sixth module in an extensive program designed to equip learners with the essential skills required for entry-level positions in UX design. This course takes a practical approach to teaching, guiding students through the complete design process while utilizing Adobe XD, a widely adopted design tool. Throughout this course, students will have the opportunity to engage in hands-on projects, culminating in the creation of a responsive website design. The curriculum is structured to follow logical design stages that emphasize empathy for users, identification of problems, exploration of design solutions, and the creation of wireframes and prototypes. #### Syllabus Breakdown 1. **Starting the UX Design Process: Empathy and Definition** The course kicks off with an introduction to responsive web design fundamentals. In this stage, learners will focus on empathy and problem definition to better understand user needs. You will begin your journey with Adobe XD, learning its interface and features while setting a solid foundation for your projects. 2. **Continuing the UX Design Process: Ideation** Building on the earlier phase, this segment focuses on ideation. You'll conduct competitive audits and use brainstorming techniques like the “Crazy Eights” exercise to generate innovative ideas. The importance of information architecture and sitemaps will also be highlighted, which are crucial in structuring a successful website. 3. **Creating Wireframes for a Responsive Site** Once you have defined the problems and started brainstorming solutions, it’s time to develop your ideas into wireframes. This part of the course emphasizes creating various layouts suitable for different screen sizes. You’ll transition from paper wireframes to digital versions in Adobe XD, enhancing them for accessibility along the way. 4. **Creating and Testing Low-Fidelity Prototypes** With wireframes established, you’ll move on to creating a low-fidelity prototype. Learning to conduct usability studies will be key here, as you'll gather feedback from users to refine your designs based on real-world insights. 5. **Creating and Testing High-Fidelity Designs** Transitioning to high-fidelity prototypes, this section prepares you to finalize your designs in Adobe XD. You’ll incorporate design systems and create detailed interactions and animations. Additionally, testing these prototypes will offer valuable feedback from diverse user groups, allowing you to make informed adjustments. 6. **Documenting Design Work and Job Search Strategies** Finally, you’ll learn how to document your design work effectively and present it to potential engineering teams. This section also includes tips for building a compelling UX portfolio and resume to help you succeed in your job search, ensuring you're well-prepared to enter the job market. #### Recommendations **Who Should Take This Course?** If you're passionate about web design and eager to cultivate your skills in UX, this course is an excellent fit. It's particularly beneficial for beginners who wish to develop a solid understanding of the UX design process with a focus on responsive design. **Pros**: - Comprehensive curriculum covering all critical phases of the UX design process. - Hands-on projects using Adobe XD, giving practical experience. - Emphasizes empathy and user-centric design. - The final focus on job preparation is invaluable for newcomers to the field. **Cons**: - As a course conducted in Portuguese, non-Portuguese speakers may find it difficult to access the content without language proficiency. - A basic understanding of design concepts would be beneficial for a smoother learning experience. **Final Thoughts** “Web Design Responsivo em Adobe XD” offers a well-rounded approach for aspiring UX designers, providing both foundational knowledge and practical skills. The structured learning environment, combined with real-world applications, makes it a top recommendation for anyone looking to break into the user experience field. By the end of the course, you’ll not only have a robust portfolio piece but also feel empowered to pursue a career in UX design confidently.

Syllabus

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

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.

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.

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.

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.

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.

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.