Course Summary
Learn how to design responsive websites using Adobe XD. This course covers the fundamentals of responsive design, wireframing, prototyping, and creating a responsive website from scratch.Key Learning Points
- Learn the basics of responsive web design
- Create wireframes and prototypes using Adobe XD
- Design a responsive website from scratch
Job Positions & Salaries of people who have taken this course might have
- Web Designer
- USA: $54,000
- India: ₹456,000
- Spain: €30,000
- UI/UX Designer
- USA: $77,000
- India: ₹612,000
- Spain: €40,000
- Front-End Developer
- USA: $76,000
- India: ₹600,000
- Spain: €40,000
Related Topics for further study
Learning Outcomes
- Design responsive websites using Adobe XD
- Create wireframes and prototypes for web design
- Understand the fundamentals of responsive design
Prerequisites or good to have knowledge before taking this course
- Basic knowledge of web design principles
- Access to Adobe XD software
Course Difficulty Level
BeginnerCourse Format
- Online self-paced course
- Video lectures
- Practical exercises and quizzes
Similar Courses
- Web Design for Everybody: Basics of Web Development & Coding Specialization
- Interaction Design Specialization
Related Education Paths
Notable People in This Field
- Peggy K
- Brian Wood
Related Books
Description
Responsive Web Design in Adobe XD is the sixth course in a program that will equip you with the skills you need to apply to entry-level jobs in user experience (UX) design. In this course, you will design a responsive website using Adobe XD, a popular design tool. You will complete the design process from beginning to end: empathizing with users, defining their pain points, coming up with ideas for design solutions, creating wireframes and prototypes, and testing designs to get feedback. By the end of this course, you will have a new design project to include in your professional UX portfolio.
Knowledge
- Apply each step of the UX design process (empathize, define, ideate, prototype, test) to create a responsive website in Adobe XD.
- Plan information architecture and sitemaps for website designs.
- Apply common layouts for web pages.
- Complete a design project and include it in your professional UX portfolio.
Outline
- Starting the UX design process: Empathize and define
- Introduction to Course 6: Responsive Web Design in Adobe XD
- Dave - My journey to UX
- Welcome to week 1
- Understand responsive websites
- Introduction to Adobe XD
- Start a project in Adobe XD
- Jennifer - Use digital design tools
- Empathize with users and understand pain points
- Create personas
- Create user stories
- Build a user journey map
- Develop a problem statement
- Wrap-up: Starting the UX design process: Empathize and define
- Welcome to Course 6
- Introduction to second portfolio project
- Get started with Adobe XD
- Optional - Get started with Figma
- Learn more about empathizing with users
- Conduct interviews for empathy maps
- Create empathy maps
- Activity Exemplar: Create an empathy map
- Learn more about personas
- Activity Exemplar: Create personas
- Learn more about user stories
- Learn more about user journey maps
- Activity Exemplar: Create a user story and user journey map
- Learn more about problem statements
- Glossary
- Activity: Submit your choice of portfolio project prompt
- Test your knowledge on responsive website design
- Test your knowledge on the basics of Adobe XD
- Test your knowledge on empathizing with users
- Activity: Create an empathy map
- Activity: Create personas
- Activity: Create a user story and user journey map
- Test your knowledge on problem statements
- Continuing the UX design process: Ideate
- Welcome to week 2
- Conduct a competitive audit
- Come up with ideas using How Might We
- Come up with ideas using Crazy Eights
- Plan information architecture for a website
- Explore common website structures
- Explore sitemaps
- Build a sitemap for your website
- Wrap-up: Continuing the UX design process: Ideate
- Learn more about competitive audits
- Activity Exemplar: Conduct a competitive audit for your website
- Learn more about using competitive audits to ideate
- Learn more about How Might We and Crazy Eights
- Activity Exemplar: Come up with ideas for your website
- Learn more about information architecture
- Learn more about building a sitemap
- Glossary
- Activity: Conduct a competitive audit for your website
- Self-Reflection: Use competitive research to inform designs
- Test your knowledge on ideation techniques
- Activity: Come up with ideas for your website
- Test your knowledge on website structures
- Creating wireframes for a responsive website
- Welcome to week 3
- Explore common layouts for website home pages
- The basics of wireframes
- Plot a responsive layout
- Adjust page layouts based on screen size
- Transition from paper to digital wireframes
- Create digital wireframes in Adobe XD
- Create wireframes for additional screen sizes in Adobe XD
- Jay - Design with Adobe XD
- Refine wireframes to enhance accessibility
- Evaluate wireframes using Gestalt Principles
- Wrap-up: Creating wireframes for a responsive website
- Learn more about common website layouts
- Learn more about wireframes
- Activity Exemplar: Begin paper wireframes for your website
- Learn more about plotting responsive layouts
- Common elements used in responsive design
- Activity Exemplar: Create variations of your paper wireframes
- Learn more about creating digital wireframes in Adobe XD
- Optional - Create digital wireframes in Figma
- Activity Exemplar: Create digital wireframes for a desktop screen size
- Optional - Create wireframes for additional screen sizes in Figma
- Activity Exemplar: Create digital wireframes for additional screen sizes
- Learn more about Gestalt Principles in wireframes
- Glossary
- Activity: Begin paper wireframes for your website
- Activity: Create variations of your paper wireframes
- Activity: Create digital wireframes for a desktop screen size
- Activity: Create digital wireframes for additional screen sizes
- Creating and testing low-fidelity prototypes
- Welcome to week 4
- Understand low-fidelity prototypes
- Create a low-fidelity prototype in Adobe XD
- Plan a UX research study
- Conduct a usability study
- Reduce bias in a usability study
- Analyze and synthesize research results
- Iterate on low-fidelity designs based on research findings
- Wrap-up: Creating and testing low-fidelity prototypes
- Learn more about creating a low-fidelity prototype in Adobe XD
- Optional - Create a low-fidelity prototype in Figma
- Activity Exemplar: Create a low-fidelity prototype for your responsive website
- Check a low-fidelity prototype
- Learn more about planning a UX research study
- Activity Exemplar: Plan a UX research study
- Learn more about conducting a usability study
- Activity Exemplar: Conduct a usability study for a low-fidelity prototype
- Learn more about analyzing and synthesizing research results
- Activity Exemplar: Analyze and synthesize the results of a usability study
- Learn more about iterating on low-fidelity designs
- Glossary
- Test your knowledge on wireframes versus prototypes
- Activity: Create a low-fidelity prototype for your responsive website
- Activity: Plan a UX research study
- Self-Reflection: Determine how to reduce bias in your own studies
- Activity: Conduct a usability study for a low-fidelity prototype
- Activity: Analyze and synthesize the results of a usability study
- Test your knowledge on modifying designs based on research findings
- Creating and testing high-fidelity designs
- Welcome to week 5
- Begin to design mockups
- Start creating mockups for a website homepage in Adobe XD
- Continue creating mockups for a website homepage in Adobe XD
- Create mockups for a mobile website in Adobe XD
- Work with design systems
- Use external design systems in Adobe XD
- Create a high-fidelity prototype in Adobe XD
- Annotate prototypes for web accessibility
- Wrap-up: Creating and testing high-fidelity designs
- Optional - Test your high-fidelity prototype
- Review foundational elements of visual design
- Review how to arrange elements in mockups
- Review visual design principles
- Optional - Start creating website mockups in Figma
- Add images and logos to mockups in Adobe XD
- Use repeat grids to design in Adobe XD
- Activity Exemplar: Create mockups for a website
- Learn more about hidden navigation menus
- Optional - Create mockups for a mobile website in Figma
- Activity Exemplar: Create a mockup for the homepage of a mobile website
- Learn more about design systems
- Optional - Activity Exemplar: Create a sticker sheet in Figma
- Learn more about web accessibility
- Glossary
- Optional - Review how to plan and conduct a usability study
- Test your knowledge on the basics of mockups
- Test your knowledge on creating a homepage in Adobe XD
- Activity: Create mockups for a website
- Activity: Create a mockup for the homepage of a mobile website
- Test your knowledge on working with design systems
- Activity: Document your design decisions
- Optional - Activity: Create a sticker sheet in Figma
- Test your knowledge on web accessibility
- Test your knowledge on usability studies
- Documenting design work and searching for jobs
- Welcome to week 6
- Collaborate with engineering teams
- Hand off design specs in Adobe XD
- Add a project to your portfolio
- Understand common jobs for UX designers
- Explore types of companies that UX designers work at
- Kenny - Perseverance
- Identify where to apply for UX design jobs
- Scan job descriptions for key words
- Understand UX design resumes
- Dane - My advice for UX design resumes
- Tim - A recruiter's advice for UX design resumes
- Update a resume based on job descriptions
- Wrap-up: Documenting design work and searching for jobs
- Congratulations on completing Course 6: Responsive Web Design in Adobe XD
- Collaborate remotely with Adobe XD
- Learn more about portfolio case studies
- Learn more about jobs in the field of user experience
- Uncover UX design job opportunities
- Activity Exemplar: Begin searching for UX jobs using a tracker
- Activity Exemplar: Highlight key words and requirements in job descriptions
- Elements in a typical UX design resume
- Activity Exemplar: Draft a UX design resume
- Glossary
- Start the next course
- Test your knowledge on handing off designs
- Test your knowledge on portfolio case studies
- Self-Reflection: Share your professional goals and interests
- Activity: Begin searching for UX jobs using a tracker
- Activity: Highlight key words and requirements in job descriptions
- Self-Reflection: Think about the information to include in your resume
- Activity: Draft a UX design resume
- Weekly challenge 6: Document design work and search for jobs
Summary of User Reviews
Key Aspect Users Liked About This Course
Many users appreciated the course's hands-on approach to learning responsive web designPros from User Reviews
- The course materials are well-structured and easy to follow
- Great for beginners and those new to Adobe XD
- The instructor is knowledgeable and engaging
- The course provides practical and real-world examples
Cons from User Reviews
- Not enough advanced techniques covered
- Some users found the course too basic
- Lack of interaction and feedback from the instructor
- The course could benefit from more in-depth explanations
Google Career CertificatesTop Instructor
4.8 Raiting
Ultimate Web Designer & Web Developer Course for 2021
- 4.5
-
![]()
![]()
![]()
![]()
![]()
Become a Full-Stack Web Designer - Learn Everything from Web Design Fundamentals to Front-End Web Development NEW: COURSE IS BEING UPDATED FOR 2021! Join now to get access!...
Bootstrap 3 Responsive Design in Adobe Dreamweaver CC 2017
- 4.2
-
![]()
![]()
![]()
![]()
![]()
We'll use the awesome new responsive bootstrap features in Dreamweaver CC 2017 to build your very first website. NOTE: this course uses Bootstrap 3....
Workflow of Modern Web Design from Wireframes to Style Guide
- 4.1
-
![]()
![]()
![]()
![]()
![]()
Make your Web Design process Simple and effective by using Wireframes, Style guides, Photoshop, Zeplin and Invision App UPDATED â–º Oct 2020 (New Lectures added about Figma and Adobe XD)...
Design a User Experience for Social Good & Prepare for Jobs
- 4.8
-
![]()
![]()
![]()
![]()
![]()
In this course, you will design a dedicated mobile app and a responsive website focused on social good. You’ll learn how to interview for entry-level UX design positions....
