How Haley Ryan Creates Custom Websites with Adobe XD and Showit

So many website designers are in Adobe XD to start off their website designs. And Haley Ryan wants to show you how!

If you’ve visited the Showit Design Market before, you know just how many website templates are available for purchase or free. The sheer number of beautiful designs can be overwhelming!

That’s how Haley Ryan, Creative Director for Mac Ryan Creative, felt at first:

“As a new web designer, I felt overwhelmed with all of the awesome templates that were already available in Showit’s shoppable space. Moving into Adobe XD allowed me to uncap my creativity and create elements that I felt were really fun and instrumental to launching a website.”

-Haley Ryan, Mac Ryan Creative

Haley Ryan shares her process for prototyping website designs in Adobe XD prior to building the sites with Showit. All without the need to hire a coding developer.

Website design in Adobe XD

Haley’s Showit Design Workflow

1 First, she creates a new project in Adobe XD and adds her client’s brand elements to the Document Library in the bottom-left corner. Here, she can assign brand colors and character styles — just like assigning Design Settings in Showit. She can also create “components” in Adobe XD, which function the same as Site Canvases in Showit — duplicatable elements that can be dragged and dropped in different areas of the website. Establishing these settings helps designers like Haley save time and keep the website design on brand.

_{Haley’s cheatsheet for how Adobe XD features correlate to Showit features}

2 Next, Haley prototypes the website in Adobe XD, adding interactive elements and buttons. Hitting the “play” button at the top-right corner is similar to the Preview button in Showit — both open a new window that simulates how the website will actually flow. Haley finds this useful when gathering feedback: “When I have a conversation with a client, it helps us both visualize that we’re going to the right place and creating the right user experience.”

_{Prototyping a website design in Adobe XD gives Haley extra design freedom during the creation stage of a project.}

3 Finally, once the client has signed off on the design, Haley builds the website inside Showit. With her Adobe XD view open to the left, she can quickly recreate the design in Showit on the right: “I really love how parallel Adobe XD is, and the flexibility and creativity it allows to help me to create really awesome content in Showit. The final website looks really identical.”

_{Recreating the design in Showit is a breeze since the builder is all visual.}

4 In the end, Haley has created a custom website for her client that not only allows her to work within a simple interface she’s already familiar with, but also creates a meaningful storyline: “It really builds confidence in clients that we’re building something that’s unique, special to them, and in line with their long-term goals.”

Being able to go directly from prototype to Showit, without hiring a separate developer, saves Haley a lot of time and money on each project. This helps offer her offer faster timeline for client projects than it might take on other platforms. It also gives her additional creative flexibility to continue refining the design moments prior to launch.

Words of Encouragement for Website Designers

So, if you’ve ever felt a little overwhelmed by starting a new website yourself, take it from Haley:

“Moving from the fear and overwhelm of being a new designer and uncapping that creativity in Adobe XD allowed me to directly transform that storytelling into all the capabilities that Showit has to offer.”

-Haley Ryan, Mac Ryan Creative

To learn more about becoming a website designer who uses Showit, check this out!