Prototyping a WordPress Project in Adobe XD

Explore how to use Adobe XD to create a working website prototype to share with stakeholders for review before converting into a fully functional WordPress website.

Introduction

• Creating a WordPress site? Prototype it first in Adobe XD
• What you should know
• How to use the exercise files

1. Get Familiar with the Project

• What is UX?
• What is UI?
• UX workflow
• Consider your client/website project
• Outline the needs of end user
• Take inventory of available assets
• Create site map
• Get familiar with WordPress themes

2. Approach the Project

• Use the content first design
• Starting with wireframe or UI kits

3. Get Started in Adobe XD

• Create wireframes
• Using the Adobe library
• Layout sections with labels
• Using assets for consistency
• Creating components
• Component overrides

4. Workflow for Building the Site

• Create a style guide artboard
• Start mobile first
• Layout pages with content
• Repeat grid
• Importing content
• Plugins

5. Building Interactivity

• Animation overview
• Menu animation
• Carousels
• Lightbox
• Draggable carousel

6. Finalizing the Prototype

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

7. Sharing and Exporting

• Sharing your Adobe XD file
• Collaborate with others using the cloud
• Using linked assets
• Export assets from XD

Conclusion

• Next steps