HOW-TO
Create an interactive online store for your brand.
Make your brand’s web store come alive with interactive design elements. Adobe XD makes it easy.
HOW-TO
Create an interactive online store for your brand..
Create original vector shapes, then transform them into an eye-catching logomark for your branding project. Creative Cloud makes it easy.
It’s time to create an online store for your brand. With XD you can make this web experience interactive, with animated transitions and even a shopping cart that slides out like magic. Designer Chris Converse will also show you the basics of voice-activated interactions.
Let’s get started.
Intro to interactive experiences.
Chris Converse introduces this video series that will show you how to create interactive experiences for your branding project.
Tools you’ll need to get started.
In this video you’ll find out what Adobe products and services you’ll need to follow along with our project files.
What you’ll need
Importing artwork from Illustrator.
Open Adobe Illustrator and find out how to create a pattern using your brand’s logomark. Then save it to Creative Cloud and use it with any application.
What you’ll need
How to populate repeat grids.
Find out how to easily create a web page, with time-saving tools. Use a repeat grid to quickly add tiles and thumbnails to an eCommerce store, then drop in your product images.
What you’ll need
Discover component states.
Chris will introduce you to component states in Adobe XD, and how to use them to bring your branded web store to life.
What you’ll need
How to create an interactive gallery.
Discover how to use component states to create an interactive product gallery with auto-animated transitions. Then test your web page by interacting with your prototype.
What you’ll need
Reveal additional information with overlays.
Learn how to create a shopping cart drawer that beautifully slides out when a user clicks the “add to cart” button. It’s easy. Just use overlay in Adobe XD.
What you’ll need
How to share your prototype and gather feedback.
Learn how to share your design or prototype with developers or present your design to stakeholders. Chris will show you how to use “design review” to gather feedback on your branding project.
What you’ll need
Introduction to audio prototyping.
Chris introduces voice-activated interactive design. Learn how to make your branded designs in XD respond to voice commands.
What you’ll need
Next Steps.
Chris summarizes the workshop, and introduces the next topic: how to get your brand moving with Adobe After Effects.
