Designing with Adobe XD
The creation of Pawtastic, an e-commerce UI kit
When the team at Adobe XD reached out to see if I’d be interested in creating a free UI kit using their platform, I was beyond excited for several reasons. For one, I’ve used Adobe software in some capacity for all of my 10+ years as a designer, so having them for a client was kind of a dream come true. I’ve also been wanting to explore Adobe XD and use it in a project for some time, so this was the perfect motivation for me to take the leap. Finally, I’ve seen firsthand how UI kits can give other designers the inspiration and tools they need to jump into a project, so creating a free resource for the design community was an exciting prospect.
What UI Kit should I create? 🤔
One thing that made this a dream project was the freedom to design whatever I chose; the Adobe XD team invited me to suggest a few themes for my UI kit that I would be pumped to work on. The first idea that came to mind was a kit centered around a booking experience for pet sitting. I have two cats, and my parents have four golden retrievers, so I have a lot of inside knowledge about what a dismal process it can be to manage pet sitting services. I’ve often joked to my partner Andrew that if our design careers ever go bust, we could pivot and become pioneers of the pet care industry.
The other advantage of designing a pet sitting platform was that it enabled me to flex the kit to include several types of interfaces; my main focus was an e-commerce experience, but I also created a marketing site and client dashboard. This makes the kit relevant to a broader range of design projects.
Getting started with Adobe XD 🤓
Once the theme of the kit was settled, my next step was to dive into Adobe XD. When it comes to new software, I tend to be a bit of a slow adopter. I usually enjoy the comfort of sticking with what I know, even if there are other (arguably better) options available. Before beginning the project, I was worried it’d take me days to get familiar with the new interface, and possibly weeks to be fluent enough to design a full website. I was delighted to discover this was not the case.
Initially I bookmarked several long Adobe XD tutorials and planned to spend a lot of time becoming an expert before jumping in. Thankfully Lindsay at Adobe XD advised that I poke around the tutorial file that’s offered when you first launch the software. I took her advice, and within minutes of exploring I felt totally empowered to start creating a design of my own.
The tutorial covers the easy-to-understand but powerful features of Adobe XD, such as the Assets panel, Repeat Grid, and the prototype view. I’ll dive further into these features in a bit, but suffice it to say between Adobe XD’s extremely light and clear interface and its effective onboarding, I was ready to design right away. If you’re hesitant to try it out because you dread the learning curve that usually comes with picking up new software, hesitate no more.
Designing the experience 👩🎨
After getting over my fear of new things and feeling ready to jump in, I decided I would approach this project the same way I do every other project — with a grayscale prototype. I find that focussing on the user experience and flow of the design before visual style helps me to not go into the weeds of choosing colors and fonts before the fundamentals are in place. I started wireframing the signup flow first; it’s a progressive multi-step process with a series of forms.
Getting a design down quickly was made easier with the use of Adobe XD’s Assets panel; I laid out a few core form elements, such as an input with a label and progress buttons, and was able to easily replicate these elements across the entire signup process.
When I got to the dashboard wireframes, XD’s Repeat Grid feature came in handy for quickly creating a list of services. The Repeat Grid feature is a super intuitive way to create rows and / or columns of elements that repeat in your design. Text and images within these elements can easily be updated in bulk, and style changes to one element in the grid carry throughout. You can also drag and drop a selection of images on your Repeat Grid and it will automatically put them in place. Needless to say, this feature saves a ton of time.
Finally, to bring the wireframes to life in an interactive prototype, I took advantage of Adobe XD’s built-in prototyping view. This mode makes it super simple and actually fun to hook up multiple screens into an interactive prototype; simply drag and drop arrows to connect elements, and hit play to preview! I loved not having to go to an external tool to see my designs in action.
Styling the kit 🎨
Having laid out the core screens that would be the basis for the kit, it was time to jump into the visual design of the prototype and the kit itself. I knew I wanted the design to use my favorite muted pink (how often do we have projects where we can use our favorite color just because? 💕). I wanted to balance the playfulness of the pink with subdued colors to keep the product feeling trustworthy and professional, so I chose dark blue as my secondary color.
The font choice also gave me the opportunity to be a bit playful; I chose Henriette for headlines and Basic Sans for body text. Henriette is a bold, sturdy, and classic font (originally designed in the 1920’s for Viennese street signs!) which contrasts nicely with Basic Sans’ clean, friendly, and modern look. Both are included in Typekit, which is free with every Adobe Creative Cloud subscription.
Styling the grayscale prototype was straightforward thanks to the Assets panel; once I set up the colors and character styles I planned to use, applying them uniformly was a breeze. I could also quickly update symbols from their wireframe versions to have color and new fonts; tweaking one symbol meant every instance of it would change automatically. This made going from early wireframes to finished designs quick and easy.
Another visual style element that is key to Pawtastic’s playfulness is the theme of adorable animal photography scattered throughout. For these elements, I downloaded portraits of various pets and styled them in Photoshop by applying the Gradient Map filter, using the two signature brand colors.
With very little tweaking I was able to have a variety of images that fit my design, which were easily dropped into XD via the automatic image masking. Simply dragging an image from your computer onto a shape in Adobe XD automatically resizes it to fit and fill the container.
Conclusion 👋
Along with a UI Kit featuring tons of customizable styles, elements, and components, the file includes a marketing one-pager, a signup process, dashboards, and a booking process.
I also included the original wireframes I created for the project, so you can use them as a jumping off point for your next design in Adobe XD. I had so much fun creating this kit, and it’s one of my favorite things I’ve designed, so I couldn’t be more excited to share it with you all. Please check out the kit on Behance, download it, share, play, and let me know what you think. ❤️ #AdobePartner
