When you need to create a prototype really quickly, without cutting corners on the visual side, we have you covered! What you actually need is some pre-made UI elements to bring your design idea to life.
However, before you get down to designing, you need to create a space for that by adding a new prototype to your project:
Once you do, you can start using our ready-made elements to illustrate your plan. You will have the ability to edit those elements to the last detail and move up your prototypes to higher fidelity whenever you’re ready. This is how UXPin UI libraries work!
There is a big scope to choose from: over 1000 UI elements in 43 different libraries.
You can find elements that fit general purposes, like text inputs, shapes, loaders, cursors, social widgets, icons to more advanced ones:
- Device and system-specific, like iPhone/iPad, Android or Windows Phone 8
- Latest trends-setters, like the Flat UI
- Framework UIs, like Social widgets and buttons, Foundation UI, Bootstrap Material Design.
Let’s explain the whole process step by step.
Step 1 – using basic elements
Let’s make an outline of a pricing page content.
To create it really quickly and focus only on the pricing widget, let’s just make placeholders for the navigation and the footer.
If you open the UXPin editor, on the left bar you can see icons which give you quick access to all basic elements and shapes.
Just click the box icon and the element will appear on your canvas. You can also drag it from that icon or use “B” shortcut to draw that element on your canvas.
Now you can edit them as you wish: resize, change colors, rotate, put text in them, add interactions, you name it.
Since we’re focusing on a quick wireframe version, let’s stretch them and double-click to give them names: “Navigation” and “Footer.”
After that, we can put some text below the navigation using Text element, either from the text icon on the left bar or using “T” shortcut.
Note that besides changing the size of the text you can also use more formatting options like font type, color, spacing etc., leading to perfect typography.
Step 2 – using Quick Search, placing and editing templates
One last element to go. A smart trick you have to know is to find a pre-made element with Quick Search. We’re going to search for a pricing element inside UXPin. For this press CMD+F (Mac users) or CTRL+F (Windows users) and the search window will show up. Type “pricing” there and see what happens.
The Quick Search matches elements as you type, so typing just a part of the word will list you some suggestions.
Simply click on Pricing Table template to finish the wireframe. When you place an element straight from the library it may not be a perfect fit just yet. You’ll need to edit it to suit your needs.
Most of the pre-made elements come as groups, so all you have to do is just double-click on them to edit the contents. You can also ungroup them to have easier access to each part of the template. Do so by clicking first on the Pricing element, and then the ungroup button on the right panel.
Now select the specific element of the template to edit the content, the size, the color and whatever else you need. Try it, experiment and you’ll find a way to make it match your vision!
Step 3 – adding interactions
If you want to bring your design to life and add some extra effects, you can always use our interactions feature! This way you’ll be able to link all the pages of your mockup together, show the previously hidden elements or change their opacity to simulate how the final product should behave.
If you’d like to learn how you can use interactions to achieve more complex effects, browse through our how-to section!
Step 4 – sharing the design
You have many different options to share your idea with other stakeholders. Sending a link to preview, sharing by e-mail, exporting a PDF, HTML, PNG, even adding other users for design collaboration. All the options are covered in this section of our Community knowledge base. You can also have a look at other articles covering some more UXPin features while you’re there.
So those 4 easy steps, from placing and editing elements, adding interactions to sharing the design cover the whole process.
Well, most probably the next step will be starting the actual design. Either that or making sure you’ve invited enough people to collaborate with. You can also learn more about our editor by exploring the Community Forum. Let us know if you have any questions at firstname.lastname@example.org. We also hold live webinars the help you get started!
Ready to try it in UXPin? Log in to the app!