UI UX Design & Prototyping using Adobe XD from Udemy

What's inside

Learning objectives

Become a ux designer
Become a ui designer
Learn adobe xd
Build & test a full app design.
Learn to prototype your designs in adobe xd.
Learn common ui/ux design principles and how to use them in your own designs.
Learn to create icon sets with adobe xd.
Find your creative process.
Create ux briefs & personas.
Build a ui/ux design project from beginning to end.
Learn how to use color and select better colors for design.
Learn how to use size & contrast in ui/ux design.
Learn how to use typography

Learn how space & negative space work in ui/ux design.
Learn to export designs for review and development.
You will learn the necessary skills to become a ui/ux designer.
You will be able to apply these techniques learned in this course to your own design projects.
Start a professional ui/ux portfolio with the course projects.
Learn to prototype interactions with adobe xd.
Create wireframes and convert them from low-fidelity to high-fidelity
Learn the necessary ui/ux design terms needed to work in the industry.
Learn to plan and organize your creative projects.
Begin your ui/ux career!
Show more
Show less

Become a ux designer
Become a ui designer
Learn adobe xd
Build & test a full app design.
Learn to prototype your designs in adobe xd.
Learn common ui/ux design principles and how to use them in your own designs.
Learn to create icon sets with adobe xd.
Find your creative process.
Create ux briefs & personas.
Build a ui/ux design project from beginning to end.
Learn how to use color and select better colors for design.
Learn how to use size & contrast in ui/ux design.
Learn how to use typography
Learn how space & negative space work in ui/ux design.
Learn to export designs for review and development.
You will learn the necessary skills to become a ui/ux designer.
You will be able to apply these techniques learned in this course to your own design projects.
Start a professional ui/ux portfolio with the course projects.
Learn to prototype interactions with adobe xd.
Create wireframes and convert them from low-fidelity to high-fidelity
Learn the necessary ui/ux design terms needed to work in the industry.
Learn to plan and organize your creative projects.
Begin your ui/ux career!
Show more
Show less

Syllabus

By the end of this section you will have Adobe XD installed and know the difference between User Interface (UI) Design and User Experience (UX) Design.

This video will give you an overview of what this course includes and what you will learn by completing this course.

In this video we will download and install the latest version of Adobe XD.

This video discusses what User Interface (UI) design and User Experience (UX) design is and what each disciplines roles are.

By the end of this section you will have a wide variety of design files and assets to help you start your design career.

This video will showcase a great icons set by Google called Google Material Icons.

This video will showcase a great icons set called Box Icons.

In this video we will cover all of the main UI Kits you will need for Adobe XD.

This video will showcase a great store with free and paid design files and assets.

This video will showcase unDraw a great website for free illustrations both in personal and commercial projects.

This video will showcase unsplash a great stock image website. Free for both personal and commercial use.

This video will cover two great font websites for your projects. Adobe Fonts (previously known as Typekit) and Google Fonts.

By the end of this section you will have learned Adobe XD. You will have the knowledge to start designing and prototyping in Adobe XD. Plus you will have finished your first project in Adobe XD.

In this video we will dive into Adobe XD and take a look at the programs interface and tools.

Here is every shortcut for Adobe XD for both Windows and Mac.

This video will cover the Adobe XD toolbar and each tools functions and examples of its uses.

This video will cover Adobe XD's property inspector.

This video will cover repeat grid, one of the most time saving tools in XD. This tool lets you repeat elements in your design in seconds.

This video will cover responsive resize. This feature lest you resize your artboards to scale a design for a new device size.

In this video we will look at how masking works in Adobe XD.

This video will cover two features to save you time and improve your workflow, Assets Panel and Creative Cloud Libraries. Creative Cloud Libraries lets you sync your design assets between other Adobe programs like Photoshop and Illustrator. The Assets Panel on the other hand lets you store your colors, character style and symbols inside of your Adobe XD project.

This video will showcase some simple shortcuts to help you navigate layers in Adobe XD quicker.

This video will showcase how symbols work and behave in Adobe XD.

In this video we will start to create some icons inside of Adobe XD. Similar to Illustrator, Adobe XD is a vector based program which allows us to make some easy icons right inside of XD. I will also share some tips to help you use icons in your designs.

In this video we will cover the first project we will be doing within Adobe XD. Also attached to this lesson are the design files.

In this video we will create are low-fidelity wireframes and high-fidelity wireframes for our first Adobe XD project.

In this video we will take our project designs and prototype it inside of Adobe XD. The prototype tab is an amazing part of Adobe XD that lets you test your apps by linking together your design artboards.

Since we now have some experience with Adobe XD's prototype tab in this video we will cover all you can do with it in detail.

This video will showcase Adobe XD's share for review, share for developers and record. Share for review lets you publish a link that you can send to anyone like a client for them to preview the design and test the prototype. Share for developers lets you publish a link for developers that gives them details about your design so they can seamlessly turn it into code. Finally record lets you record your prototype and save it as a video to add to portfolios and projects.

This video will showcase how you can export your assets and design files.

Adobe XD is update monthly. This video will cover changes to the course when the updates are released.

By the end of this section you will know how to use alignment, size & contrast, space, color theory and typography in your UI/UX designs.

In this video we will learn how alignment is used in User Interface (UI) design and User Experience (UX) design.

In this video we will learn how size and contrast is used in User Interface (UI) design and User Experience (UX) design.

In this video we will learn how space and negative space is used in User Interface (UI) design and User Experience (UX) design.

In this video we will learn how color theory is used in User Interface (UI) design and User Experience (UX) design.

In this video I will showcase a great tool for selecting better colors for your designs.

In this video we will learn how typography is used in User Interface (UI) design and User Experience (UX) design.

By the end of this section you will have a solid creative process and know how the design process works. Plus you will have two new programs to help speed up your creative/design process.

In this video we will discuss what the design process looks like so you can implement it yourself.

This video will showcase a tool called Milanote that will help with creative planning and organization. We will look at how to use Milanote in several steps in the design process.

This video will showcase a tool called Freehand by InVision and we will also look at sketching and creating wireframes.

By the end of this section you will have used Adobe XD to design and prototype a beautiful app for your portfolio. You will also be ready to start design projects on you own!

In this video we will cover the second course project we will be doing within Adobe XD. Also attached to this lesson are the design files.

In this video we will learn about style guides and how to use them. Also setting up a style guide for our project.

In this video we will design our home screen wireframe.

In this video we will finish our home screen for our app project.

In this video we will design our profile screen wireframe.

In this video we will finish our profile screen for our app project.

In this video we will design our contact screen wireframe.

In this video we will finish our contact screen for our app project.

In this video we will design our client profile screen wireframe.

In this video we will finish our client profile screen for our app project.

In this video we will design our sign up screen wireframe.

In this video we will finish our sign up screen for our app project.

In this video we will continue to work on our style guide.

This video will outline why we should prototype our designs before we send them to the developer.

In this video we will start to prototype our project.

In part two we will continue adding more interactions to our prototype.

In part three we will continue adding more interactions to our prototype.

In part four we will finish adding our interactions to our prototype giving us our finished course project.

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Introduces Adobe XD, a popular tool in UI/UX design

Provides comprehensive training on User Interface (UI) and User Experience (UX) design

Covers key principles and industry-standard tools and techniques for UI/UX design

Offers hands-on project-based learning, allowing students to apply their skills and build a professional UI/UX design portfolio

Taught by Caler Edwards, an experienced UI/UX designer and instructor with expertise in Adobe XD

Provides access to a wide range of design files and assets to enhance students' learning process

Reviews summary

Adobe xd for beginners

Learners say this course is an excellent introduction to UI/UX design for those new to Adobe XD. Students will learn the basics of UI/UX design as well as how to use Adobe XD to bring their designs to life. This course receives high marks for being easy to understand. Overall, this course is well received by students.

Suitable for those new to UI/UX design.

"This course not only helped me understand the difference between UI/UX design and the design process, but demonstrate the tools used in Adobe XD."

Introduces Adobe XD and its tools.

"This course not only helped me understand the difference between UI/UX design and the design process, but demonstrate the tools used in Adobe XD."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in UI UX Design & Prototyping using Adobe XD with these activities:

UI/UX Design Workshop

Show steps

Attend a workshop to gain practical, hands-on experience with UI/UX design principles and best practices.

Show steps

Learn from industry experts and experienced designers.
Network with other designers and professionals.
Apply design thinking methodologies to real-world projects.

Volunteer at a Local Design Organization

Show steps

Gain practical experience by assisting with design-related tasks and projects at a local non-profit or community organization.

Show steps

Identify opportunities to contribute your skills.
Collaborate with other designers and volunteers.
Support the organization's design initiatives.

Design Challenge: Create a Mobile App UI

Show steps

Apply UI design principles and prototyping skills to complete a practical design challenge based on a real-world scenario.

Browse courses on UI Design

Show steps

Identify the target audience and define the problem statement.
Sketch out wireframes and low-fidelity prototypes.
Create high-fidelity designs and prototypes in Adobe XD.
Review and iterate on designs based on user feedback.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Join a UI/UX Study Group

Show steps

Connect with other students or designers to discuss course topics, share ideas, and provide feedback on each other's work.

Show steps

Find a study group or create your own.
Meet regularly to discuss course content.
Review and critique each other's projects.

Create a Course Portfolio

Show steps

Document and showcase your learning journey by compiling course materials into a comprehensive portfolio.

Show steps

Gather and organize course notes, assignments, and projects.
Highlight key concepts and demonstrate your skills.

Create a UI/UX Design Case Study

Show steps

Develop a portfolio piece that demonstrates your UI/UX design process, showcasing your skills and problem-solving abilities.

Browse courses on Portfolio Building

Show steps

Choose a real-world design problem and define the scope.
Conduct user research and gather data.
Design and iterate on UI/UX solutions.
Write a detailed case study report.

Advanced Adobe XD Techniques

Show steps

Explore advanced techniques and plugins to enhance design workflow and prototype functionality.

Browse courses on Plugin Development

Show steps

Learn how to use repeat grids and responsive resizing.
Create custom plugins to extend Adobe XD's functionality.
Experiment with advanced prototyping interactions and animations.

Career center

Learners who complete UI UX Design & Prototyping using Adobe XD will develop knowledge and skills that may be useful to these careers:

UX Designer

A UX Designer focuses on the user experience of a digital interface, making it enjoyable and intuitive. This course will provide a comprehensive understanding of UX design, prototyping, and Adobe XD, equipping you with the skills to excel in this role.

See salaries and explore the career path for UX Designer

Product Designer

A Product Designer combines UI and UX design to create visually appealing and user-friendly digital products. This course offers a foundation in both UI/UX design and Adobe XD, providing the necessary skills to pursue a career in this field.

See salaries and explore the career path for Product Designer

Mobile App Designer

A Mobile App Designer creates the visual interface and user experience of mobile applications. This course will provide the necessary skills in UI/UX design, prototyping, and Adobe XD, which are essential for success in this role.

See salaries and explore the career path for Mobile App Designer

UI Designer

A UI Designer plans the look and feel of a digital interface to ensure ease of use and aesthetics. This course will provide the necessary skills in UI design, UX principles, and Adobe XD. By completing this course, you will build a foundation for success in this role.

See salaries and explore the career path for UI Designer

Web Designer

A Web Designer creates and maintains websites, focusing on both aesthetics and functionality. This course will provide you with the knowledge of UI/UX design, prototyping, and Adobe XD, which are essential skills for web design.

See salaries and explore the career path for Web Designer

UX Researcher

A UX Researcher conducts user research to gather insights into user needs and behaviors. This course will provide a foundational understanding of UX design, prototyping, and Adobe XD, which are valuable tools for UX research.

See salaries and explore the career path for UX Researcher

Interaction Designer

An Interaction Designer focuses on the interaction between users and digital products. This course may be useful in gaining an understanding of UX design and prototyping, which can be helpful in interaction design.

See salaries and explore the career path for Interaction Designer

Information Architect

An Information Architect designs and organizes the structure and content of websites and other digital products. This course may be useful in gaining an understanding of UX design and prototyping, which can be helpful in information architecture.

See salaries and explore the career path for Information Architect

Graphic designer

A Graphic Designer creates visual concepts for a variety of media, including websites, brochures, and logos. This course may be useful in developing design skills and understanding UI/UX principles, which can be beneficial in graphic design.

See salaries and explore the career path for Graphic designer

Art Director

An Art Director oversees the visual aspects of creative projects, including advertising, marketing, and branding. This course may be useful in developing design skills and understanding UI/UX principles, which can be beneficial in art direction.

See salaries and explore the career path for Art Director

Project Manager

A Project Manager plans, executes, and closes projects, ensuring timely delivery and successful outcomes. This course may be useful in understanding UI/UX design and prototyping, which can be helpful in managing design projects.

See salaries and explore the career path for Project Manager

Marketing Manager

A Marketing Manager plans and executes marketing campaigns to promote products or services. This course may be useful in understanding UI/UX design principles, which can be beneficial in creating effective marketing campaigns.

See salaries and explore the career path for Marketing Manager

Software Engineer

A Software Engineer designs, develops, and maintains software applications. While this course does not teach software engineering, it may be useful in understanding UI/UX design principles, which can be beneficial in software development.

See salaries and explore the career path for Software Engineer

Creative Director

A Creative Director leads and oversees the creative vision and execution of marketing and advertising campaigns. This course may be useful in understanding UI/UX design principles, which can be beneficial in developing creative and effective campaigns.

See salaries and explore the career path for Creative Director

Technical Writer

A Technical Writer creates and maintains written materials to explain technical concepts. This course may be useful in developing an understanding of UX design and prototyping, which can be beneficial in creating user-friendly technical documentation.

See salaries and explore the career path for Technical Writer