YoVDO

Prototyping a WordPress Project in Adobe XD

Offered By: LinkedIn Learning

Tags

Adobe XD Courses WordPress Courses Prototyping Courses Responsive Design Courses UX Design Courses Wireframing Courses

Course Description

Overview

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.

Syllabus

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

Taught by

Emily Kay

Related Courses

UX Design for Mobile Developers
Google via Udacity
UX Research at Scale: Analytics and Online Experiments
University of Michigan via edX
Introduction to UX Research
University of Michigan via edX
UX Design: From Wireframe to Prototype
University of Michigan via edX
UX Design: From Concept to Wireframe
University of Michigan via edX