Using Uizard Autodesigner for fast wireframes

If you’re a designer looking to speed up your design process, AI-powered wireframe generators might just be the secret sauce you need. These powerful tools will not only simplify the initial stages of your interface design but also revolutionize the way you communicate design concepts.

Uizard Autodesigner is one such generator that uses AI to create wireframes in seconds. With a simple text prompt, you can save hours of manual sketching and a whole lot of back-and-forth between your team members.

Never tried Uizard before? No worries. In this guide, we’ll walk you through a five-step process for creating quick wireframes with Uizard’s Autodesigner feature:

1. Create a Uizard account
2. Upgrade to a paid plan to access Autodesigner
3. Start a new Autodesigner project
4. Edit your wireframe in Uizard
5. Share your project with your team

Ready to explore Uizard’s Autodesigner magic? Before we do that, I’ll explain what Uizard is.

What is Uizard?

Uizard is an AI-powered tool that lets you design wireframes, websites, mobile apps, and prototypes in minutes. With its Autodesigner feature, you can create mobile, tablet, and web mockups from a simple text prompt.

Although you can use this tool for free, you’ll need to pay a fee to try the AI-powered wireframe generator. Prices start at $12 a month.

Now, let’s take you through a step-by-step process for designing wireframes with Uizard’s Autodesigner, shall we?

Step 1: Create a Uizard account

To create a Uizard account, head over to the Uizard homepage. Click the Sign up for free button and follow the steps to complete your onboarding. Once you’re all set up, upgrade your account to a paid plan to gain access to Autodesigner, Uizard’s AI-powered design generator.

Step 2: Upgrade to a paid plan to access Autodesigner

To upgrade your account, navigate to the Billing page by clicking your profile name on the left panel and selecting Billing from the pop-up menu.

Choose the payment plan that works best for you and follow the necessary steps to complete payment:

You can unlock a free month of Uizard Pro by getting five people to sign up. Go to the Billing page, select Try Pro for free, copy your referral code, and share it with your network. Once up to five people sign up through your link, you’ll get a promo code that gives you free access to Uizard’s premium features for a month.

With payments sorted, we can now move to the next step.

Step 3: Start a new Autodesigner project

Head to the Projects page and select Generate with Autodesigner from the available options:

Once the Autodesigner window opens, choose the device you want to design for: mobile, tablet, or web.

Next, enter a brief description of what you want to create in the description box provided. For this example, we’ll design a simple website for a local coffee shop:

Our text prompt is this straightforward:

A simple website for a local coffee shop.

In case you haven’t already noticed, one advantage of using this software is that it gives you creative freedom by allowing you to describe the style you’re going for. You can sum up your design style in a few words or choose keywords that match your design specifications. In this example, we’re keeping it minimalistic and playful.

Once you’ve entered your description, click Generate my project, sit back, and let AI work its magic.

And in no time, you’ll have high-fidelity mockups of your key screens:

But hi-fi mockups are a few steps ahead of what we want. So, let’s take things back to the basic wireframe format we desire, shall we?

To switch to low-fidelity designs, select Mode from the tools displayed at the right of the Uizard interface. From the Mode pop-up menu, choose Wireframe mode:

And just like magic, you’ll have fully editable wireframes of your design concept:

Easy peasy, right?

Now, let’s take things up a notch by creating wireframes for an ecommerce platform.

To do that, head to the Uizard dashboard and select Generate with Autodesigner. Choose the device you want to design for and enter a brief description of what you want to create, as in the previous example:

Here’s our text prompt in this case:

An e-commerce platform where users can shop for all household items.

Descriptions sorted, click Generate my project and you’ll have the hi-fi mockups of your design in no time.

And just in case you’re not satisfied with the initial designs, you can get another version by clicking Regenerate in the pop-up box that appears once a new design is created:

If you’re happy with the designs, you can switch to wireframe mode by following the steps we outlined earlier:

Once in wireframe mode, you can move things around to your heart’s content. Not only that, you can even generate more screens. If you’re not sure how to do that, fret not. We’re about to show you how to edit your wireframes in Uizard.

Step 4: Edit your wireframe in Uizard

Modifying your wireframes: To modify any element in your wireframe, click on it, and a tools menu will appear. Select More options by clicking the three dots on the menu. Alternatively, you can click the Design tool from the tools displayed at the right of the Uizard interface:

Additionally, you can add more UI components, update placeholder text, change the design layout, and even add new screens from Uizard’s component library:

To add a new screen, click the plus (new screen) icon at the top left of the component library. Select Generate screen from the menu:

In the description box that appears, enter a brief description of the new screen you want to create. Click Generate and you’ll have a new screen in seconds:

Our text prompt?:

A payment page.

And just like that, you’ve gone from a basic idea to tangible wireframe sketches that you can share with your team and gather feedback.

Not sure how to share your wireframes with your team members? It’s pretty straightforward, and I’m about to show you how.

Step 5: Share your project with your team for real-time collaboration

Once your wireframes are ready, you can export your project and invite your team members to collaborate in real time.

To invite team members, click the Share button in the top right corner of the Uizard interface and follow the steps:

You can find the Share button at the top right-hand corner of Uizard’s interface:

You can export your wireframes as PNG, SVG, PDF, or JPG files. To export, choose any screen you want and select Export from the right sidebar that appears:

In no time at all, your files will be available in downloads.

And it’s a wrap! That’s how Uizard’s Autodesigner can help take your design concept from a simple idea to tangible wireframes your team can collaborate on.

Conclusion

In this guide, we’ve shown you how to use Autodesigner, Uizard’s AI-powered wireframe generator to speed up your design process. We walked you through a five-step process that takes you from onboarding to sharing your wireframes with your team.

So, if you’re feeling inspired, why not dive right in and explore the magic of Uizard’s Autodesigner? Not only is it easy to use, it will take your team’s productivity to new heights.