Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Prototyping a WordPress Project in Adobe XD

via LinkedIn Learning


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.


  • 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
  • Next steps

Taught by

Emily Kay


4.8 rating at LinkedIn Learning based on 68 ratings

Start your review of Prototyping a WordPress Project in Adobe XD

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.