We may earn an affiliate commission when you visit our partners.
Jonathan Owen
By the end of this project, you’ll be able to create mockups for a website homepage. You’ll build your mockups with Adobe XD, a vector-based graphics design and prototyping program. XD gives you the ability to design multiple iterations of webpages, all the way from wireframes to high-fidelity mockups. Since the designs are vector-based, you’ll also have the flexibility to edit and resize quickly and easily. You’ll be able to test and compare lots of different designs, with high-fidelity images and text.
During this project, you’ll build a homepage for a coffee subscription website. First, you’ll get used to navigating the XD...
Read more
By the end of this project, you’ll be able to create mockups for a website homepage. You’ll build your mockups with Adobe XD, a vector-based graphics design and prototyping program. XD gives you the ability to design multiple iterations of webpages, all the way from wireframes to high-fidelity mockups. Since the designs are vector-based, you’ll also have the flexibility to edit and resize quickly and easily. You’ll be able to test and compare lots of different designs, with high-fidelity images and text.
During this project, you’ll build a homepage for a coffee subscription website. First, you’ll get used to navigating the XD...
Read more
By the end of this project, you’ll be able to create mockups for a website homepage. You’ll build your mockups with Adobe XD, a vector-based graphics design and prototyping program. XD gives you the ability to design multiple iterations of webpages, all the way from wireframes to high-fidelity mockups. Since the designs are vector-based, you’ll also have the flexibility to edit and resize quickly and easily. You’ll be able to test and compare lots of different designs, with high-fidelity images and text.
During this project, you’ll build a homepage for a coffee subscription website. First, you’ll get used to navigating the XD workspace. Then you’ll design common parts of webpages, import and adjust images, and insert text. As you complete these steps, you’ll add colors, character styles, and components to your asset list, giving you the ability to quickly make changes across the whole page.
By the end of the project, you’ll be comfortable creating webpage mockups with Adobe XD.
Note: This course works best for learners who are based in the North America region. We’re currently working on providing the same experience in other regions.
Register for this course and see more details by visiting:
OpenCourser.com/course/1tp5du/create
Good to know
Good to know
Know what's good ,
what to watch for , and
possible dealbreakers
Develops a foundation and enhances knowledge of vector graphics design and prototyping
Uses Adobe XD, which aligns with industry standard software
Taught by Jonathan Owen, who may or may not be an expert in web design
Applicable for learners interested in creating web page mockups
May require learners to have access to Adobe XD software which could present a barrier
Provides instruction on high-fidelity mockups for full-fledged web design projects
Save this course
Save Create Mockups for a Website Homepage in Adobe XD to your list so you can find it easily later:
Save
Save
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 Create Mockups for a Website Homepage in Adobe XD with these
activities:
Brush up on web design basics
Show steps
Revisit the fundamentals of web design to set a solid groundwork for using Adobe XD effectively.
Browse courses on
Design Principles
Show steps
-
Review color theory, typography, and layout concepts.
-
Look at examples of well-designed websites and analyze their design choices.
-
Practice creating wireframes and prototypes using a pen and paper or free online tools.
Explore Adobe XD plugins and resources
Show steps
Enhance your XD workflow by exploring plugins and resources that extend its capabilities and improve your productivity.
Browse courses on
Adobe XD
Show steps
-
Search for and install plugins that align with your specific needs.
-
Experiment with different plugins to find those that optimize your workflow.
-
Utilize online resources, tutorials, and documentation to learn about plugin features and best practices.
Follow along with Adobe XD tutorials
Show steps
Explore the features and capabilities of Adobe XD through guided tutorials, enhancing your proficiency in using the software.
Browse courses on
Adobe XD
Show steps
-
Find and watch beginner-friendly tutorials on Adobe XD.
-
Create sample designs and experiment with different tools and features.
-
Join online forums or communities for Adobe XD users to ask questions and share knowledge.
Five other activities
Expand to see all activities and additional details
Show all eight activities
Join a study group or online community
Show steps
Engage with peers to discuss concepts, share ideas, and provide feedback, fostering a collaborative learning environment.
Browse courses on
Web Design
Show steps
-
Find or create a study group or online community focused on web design or XD.
-
Attend meetings or engage in discussions regularly.
-
Share your work and provide feedback to others.
Design a website homepage mockup
Show steps
Apply your learning by designing a website homepage mockup, showcasing your understanding of web design principles and XD capabilities.
Browse courses on
Web Design
Show steps
-
Gather inspiration and define the scope of your homepage design.
-
Create a low-fidelity wireframe to outline the structure and layout.
-
Import images, add text, and apply styles to your mockup in Adobe XD.
Attend a workshop or conference on web design or Adobe XD
Show steps
Expand your knowledge and skills by attending a workshop or conference dedicated to web design or XD, gaining insights from industry experts.
Browse courses on
Web Design
Show steps
-
Research and identify relevant workshops or conferences.
-
Register and attend the event, actively participating in sessions and networking with attendees.
-
Follow up after the event by implementing what you learned into your own projects.
Contribute to open-source projects related to web design
Show steps
Gain practical experience and contribute to the web design community by participating in open-source projects related to XD or web design.
Browse courses on
Web Design
Show steps
-
Identify open-source projects aligned with your interests and skill level.
-
Review the project's documentation and contribute to bug fixes or feature enhancements.
-
Collaborate with other contributors and learn from their experiences.
Develop a portfolio of web design projects
Show steps
Showcase your web design skills and progress by creating a portfolio of projects that demonstrate your proficiency in XD and web design principles.
Browse courses on
Web Design
Show steps
-
Select and refine your best web design projects.
-
Create a website or online portfolio to showcase your work.
-
Get feedback on your portfolio from peers or mentors and make improvements based on their suggestions.
Brush up on web design basics
Show steps
Revisit the fundamentals of web design to set a solid groundwork for using Adobe XD effectively.
Browse courses on
Design Principles
Show steps
Show steps
Show steps
- Review color theory, typography, and layout concepts.
- Look at examples of well-designed websites and analyze their design choices.
- Practice creating wireframes and prototypes using a pen and paper or free online tools.
Explore Adobe XD plugins and resources
Show steps
Enhance your XD workflow by exploring plugins and resources that extend its capabilities and improve your productivity.
Browse courses on
Adobe XD
Show steps
Show steps
Show steps
- Search for and install plugins that align with your specific needs.
- Experiment with different plugins to find those that optimize your workflow.
- Utilize online resources, tutorials, and documentation to learn about plugin features and best practices.
Follow along with Adobe XD tutorials
Show steps
Explore the features and capabilities of Adobe XD through guided tutorials, enhancing your proficiency in using the software.
Browse courses on
Adobe XD
Show steps
Show steps
Show steps
- Find and watch beginner-friendly tutorials on Adobe XD.
- Create sample designs and experiment with different tools and features.
- Join online forums or communities for Adobe XD users to ask questions and share knowledge.
Five other activities
Expand to see all activities and additional details
Show all eight activities
Join a study group or online community
Show steps
Engage with peers to discuss concepts, share ideas, and provide feedback, fostering a collaborative learning environment.
Browse courses on
Web Design
Show steps
Show steps
Show steps
- Find or create a study group or online community focused on web design or XD.
- Attend meetings or engage in discussions regularly.
- Share your work and provide feedback to others.
Design a website homepage mockup
Show steps
Apply your learning by designing a website homepage mockup, showcasing your understanding of web design principles and XD capabilities.
Browse courses on
Web Design
Show steps
Show steps
Show steps
- Gather inspiration and define the scope of your homepage design.
- Create a low-fidelity wireframe to outline the structure and layout.
- Import images, add text, and apply styles to your mockup in Adobe XD.
Attend a workshop or conference on web design or Adobe XD
Show steps
Expand your knowledge and skills by attending a workshop or conference dedicated to web design or XD, gaining insights from industry experts.
Browse courses on
Web Design
Show steps
Show steps
Show steps
- Research and identify relevant workshops or conferences.
- Register and attend the event, actively participating in sessions and networking with attendees.
- Follow up after the event by implementing what you learned into your own projects.
Contribute to open-source projects related to web design
Show steps
Gain practical experience and contribute to the web design community by participating in open-source projects related to XD or web design.
Browse courses on
Web Design
Show steps
Show steps
Show steps
- Identify open-source projects aligned with your interests and skill level.
- Review the project's documentation and contribute to bug fixes or feature enhancements.
- Collaborate with other contributors and learn from their experiences.
Develop a portfolio of web design projects
Show steps
Showcase your web design skills and progress by creating a portfolio of projects that demonstrate your proficiency in XD and web design principles.
Browse courses on
Web Design
Show steps
Show steps
Show steps
- Select and refine your best web design projects.
- Create a website or online portfolio to showcase your work.
- Get feedback on your portfolio from peers or mentors and make improvements based on their suggestions.
Career center
Learners who complete Create Mockups for a Website Homepage in Adobe XD will develop knowledge and skills
that may be useful to these careers:
Web Designer
Web Designer
Web Designers are responsible for the visual design of websites. This course can help you build a foundation in web design principles and tools, which you can use to create visually appealing and effective web pages. The course also covers how to design for different devices and screen sizes, which is an important skill for Web Designers.
UX Designer
UX Designer
UX Designers are responsible for creating the user interface and user experience of websites and applications. This course can help you build a foundation in UX design principles and tools, which you can use to create user-friendly and effective web pages. The course also covers how to design for different devices and screen sizes, which is an important skill for UX Designers.
Front-End Developer
Front-End Developer
Front-End Developers are responsible for the technical implementation of websites. This course can help you build a foundation in front-end development principles and tools, which you can use to create functional and effective web pages. The course also covers how to use Adobe XD to create prototypes, which can be helpful for Front-End Developers when working with designers.
UI Developer
UI Developer
UI Developers are responsible for the user interface and user experience of websites and applications. This course can help you build a foundation in UI development principles and tools, which you can use to create user-friendly and effective web pages. The course also covers how to design for different devices and screen sizes, which is an important skill for UI Developers.
Content Strategist
Content Strategist
Content Strategists are responsible for planning, creating, and managing the content of websites and applications. This course can help you build a foundation in content strategy principles and tools, which you can use to create effective and engaging content for web pages. The course also covers how to use Adobe XD to create prototypes, which can be helpful for Content Strategists when working with designers.
Information Architect
Information Architect
Information Architects are responsible for organizing and structuring the content of websites and applications. This course can help you build a foundation in information architecture principles and tools, which you can use to create effective and usable web pages. The course also covers how to use Adobe XD to create prototypes, which can be helpful for Information Architects when working with designers.
Visual Designer
Visual Designer
Visual Designers are responsible for the visual design of websites and applications. This course can help you build a foundation in visual design principles and tools, which you can use to create visually appealing and effective web pages. The course also covers how to use Adobe XD to create prototypes, which can be helpful for Visual Designers when working with designers.
Product Designer
Product Designer
Product Designers are responsible for the overall design and development of websites and applications. This course can help you build a foundation in product design principles and tools, which you can use to create effective and successful web pages. The course also covers how to use Adobe XD to create prototypes, which can be helpful for Product Designers when working with designers.
Interaction Designer
Interaction Designer
Interaction Designers are responsible for designing the user interface and user experience of websites and applications. This course can help you build a foundation in interaction design principles and tools, which you can use to create user-friendly and effective web pages. The course also covers how to use Adobe XD to create prototypes, which can be helpful for Interaction Designers when working with designers.
Quality Assurance Tester
Quality Assurance Tester
Quality Assurance Testers are responsible for testing websites and applications to ensure that they are functioning properly. This course can help you build a foundation in quality assurance testing principles and tools, which you can use to create effective and successful testing processes for web pages. The course also covers how to use Adobe XD to create prototypes, which can be helpful for Quality Assurance Testers when working with designers.
Business Analyst
Business Analyst
Business Analysts are responsible for analyzing business needs and requirements to create websites and applications. This course can help you build a foundation in business analysis principles and tools, which you can use to create effective and successful websites and applications. The course also covers how to use Adobe XD to create prototypes, which can be helpful for Business Analysts when working with designers.
Graphic designer
Graphic designer
Graphic Designers are responsible for creating visual content for websites, applications, and other media. This course can help you build a foundation in graphic design principles and tools, which you can use to create effective and visually appealing web pages. The course also covers how to use Adobe XD to create prototypes, which can be helpful for Graphic Designers when working with designers.
Marketer
Marketer
Marketers are responsible for planning and executing marketing campaigns to promote websites and applications. This course can help you build a foundation in marketing principles and tools, which you can use to create effective and successful marketing campaigns for web pages. The course also covers how to use Adobe XD to create prototypes, which can be helpful for Marketers when working with designers.
Copywriter
Copywriter
Copywriters are responsible for writing the text content for websites and applications. This course can help you build a foundation in copywriting principles and tools, which you can use to create effective and engaging content for web pages. The course also covers how to use Adobe XD to create prototypes, which can be helpful for Copywriters when working with designers.
Project Manager
Project Manager
Project Managers are responsible for planning, executing, and managing projects to create websites and applications. This course can help you build a foundation in project management principles and tools, which you can use to create effective and successful projects for web pages. The course also covers how to use Adobe XD to create prototypes, which can be helpful for Project Managers when working with designers.
For more career information including salaries, visit:
OpenCourser.com/course/1tp5du/create
Reading list
We've selected 13 books
that we think will supplement your
learning. Use these to
develop background knowledge, enrich your coursework, and gain a
deeper understanding of the topics covered in
Create Mockups for a Website Homepage in Adobe XD.
Classic guide to user experience design. It provides a framework for understanding the user experience and designing products that are easy to use and enjoyable.
Classic guide to web usability. It provides practical advice on how to make websites easy to use and navigate.
Comprehensive guide to web design using HTML, CSS, JavaScript, and jQuery. It covers topics such as responsive design, accessibility, and performance.
Save
Guide to design systems, a set of reusable components and patterns that can be used to create consistent and scalable web products. It good resource for those who want to learn more about how to design and implement design systems.
Save
Guide to atomic design, a methodology for creating modular and reusable design systems. It good resource for those who want to learn more about how to design and build scalable and maintainable websites.
Comprehensive guide to web design, covering topics such as user experience, design principles, and coding. It good resource for those who want to learn more about the theory and practice of web design.
Save
Guide to traction, the process of getting early customers and users for a new product or service. It good resource for those who want to learn more about how to market and sell new web products.
Save
Beginner-friendly guide to UX design, covering topics such as user research, wireframing, and prototyping. It good resource for those who want to learn more about the process of UX design.
Guide to the lean startup methodology, a process for developing and validating new products and services. It good resource for those who want to learn more about how to build successful web products.
Guide to the hard things about starting and running a successful business. It good resource for those who want to learn more about the challenges and rewards of entrepreneurship.
Classic guide to innovation. It explains why successful companies can fail to innovate and provides a framework for understanding how to avoid this fate.
Classic guide to marketing and selling new products and services. It explains the challenges of crossing the chasm between early adopters and mainstream customers.
Beginner-friendly guide to web design, covering topics such as HTML, CSS, and JavaScript. It good resource for those who want to learn the basics of web design or who need a refresher on the subject.
For more information about how these books relate to this course, visit:
OpenCourser.com/course/1tp5du/create
Share
Similar courses
Here are nine courses similar to
Create Mockups for a Website Homepage in Adobe XD.
Build a High-Fidelity Prototype for a Mobile App in Adobe XD
OpenCourser.com/course/h9awrm/build
Build a High-Fidelity Prototype for a Mobile App in Adobe...
Most relevant
Build a low-fidelity prototype for a mobile app in Adobe XD
OpenCourser.com/course/4vgfht/build
Build a low-fidelity prototype for a mobile app in Adobe...
Most relevant
Create wireframes for different screen sizes in Adobe XD
OpenCourser.com/course/16o9y6/create
Create wireframes for different screen sizes in Adobe XD
Most relevant
Create a Low-Fidelity Prototype in Adobe XD
OpenCourser.com/course/cv16hf/create
Create a Low-Fidelity Prototype in Adobe XD
Most relevant
Create wireframes for desktop and other devices in Adobe XD
OpenCourser.com/course/nk7a3k/create
Create wireframes for desktop and other devices in Adobe...
Most relevant
Build a High-Fidelity Mobile App Prototype with Adobe XD
OpenCourser.com/course/4163sd/build
Build a High-Fidelity Mobile App Prototype with Adobe XD
Most relevant
Create Digital Wireframes for Mobile Apps With Adobe XD
OpenCourser.com/course/snz3aw/create
Create Digital Wireframes for Mobile Apps With Adobe XD
Most relevant
User Experience Design Essentials - Adobe XD UI UX Design
OpenCourser.com/course/gmht2a/user
User Experience Design Essentials - Adobe XD UI UX Design
Most relevant
UI UX Design & Prototyping using Adobe XD
OpenCourser.com/course/oqqtp7/ui
UI UX Design & Prototyping using Adobe XD
Most relevant
Time
2 hours
Via
Coursera
Institution
Coursera Project Network
Instructor
Jonathan Owen
Good to know
Develops a foundation and enhances knowledge of vector graphics design and prototyping
Uses Adobe XD, which aligns with industry standard software
Taught by Jonathan Owen, who may or may not be an expert in web design
Applicable for learners interested in creating web page mockups
May require learners to have access to Adobe XD software which could present a barrier
Provides instruction on high-fidelity mockups for full-fledged web design projects
Our mission
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
Affiliate disclosure
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
© 2016 - 2024 OpenCourser