Prototyping a WordPress Project in Adobe XD

Course details

Learn how to use Adobe XD to create a WordPress website prototype that you can share with clients, developers, and other stakeholders. Explore the UX (user experience) process and see how to create sitemaps, personas, wireframes, and style guides. Discover how to utilize these assets to plan a layout and create responsive mockups, incorporate assets from Photoshop and Illustrator, and make your prototypes interactive. Throughout the process, see how to effectively communicate your intentions to clients and other stakeholders as well as collaborate with others. Finally, learn how to export a prototype from Adobe XD in a variety of sizes and formats, and have specific direction and assets for use in WordPress.

Learning objectives
Getting started in Adobe XD
Establishing a workflow
Creating wireframes
Creating a style guide artboard
Building dynamic and interactive areas
Building a large screen version
Reusing assets
Creating and sharing a prototype
Adobe XD tips and tricks
Exporting from Adobe XD

Concepts

0. Introduction

01 - Creating a WordPress site Prototype it first in Adobe XD
02 - What you should know
03 - How to use the exercise files

1. Get Familiar with the Project

04 - What is UX
05 - What is UI
06 - UX workflow
07 - Consider your client website project
08 - Outline the needs of end user
09 - Take inventory of available assets
10 - Create site map
11 - Get familiar with WordPress themes

2. Approach the Project

12 - Use the content first design
13 - Starting with wireframe or UI kits

3. Get Started in Adobe XD

14 - Create wireframes
15 - Using the Adobe library
16 - Layout sections with labels
17 - Using assets for consistency
18 - Creating components
19 - Component overrides

4. Workflow for Building the Site

20 - Create a style guide artboard
21 - Start mobile first
22 - Layout pages with content
23 - Repeat grid
24 - Importing content
25 - Plugins

5. Building Interactivity

26 - Animation overview
27 - Menu animation
28 - Carousels
29 - Lightbox
30 - Draggable carousel

6. Finalizing the Prototype

31 - Convert a page layout by re-using assets
32 - Finessing your prototype

7. Sharing and Exporting

33 - Sharing your Adobe XD file
34 - Collaborate with others using the cloud
35 - Using linked assets
36 - Export assets from XD

Conclusion

37 - Next steps