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
- 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
- Use the content first design
- Starting with wireframe or UI kits
- Create wireframes
- Using the Adobe library
- Layout sections with labels
- Using assets for consistency
- Creating components
- Component overrides
- Create a style guide artboard
- Start mobile first
- Layout pages with content
- Repeat grid
- Importing content
- Plugins
- Animation overview
- Menu animation
- Carousels
- Lightbox
- Draggable carousel
- Convert a page layout by re-using assets
- Finessing your prototype
- Sharing your Adobe XD file
- Collaborate with others using the cloud
- Using linked assets
- Export assets from XD
- Next steps
