How To Get Yourself Started With UXPin

1
How To Get Yourself Started With UXPin

Image_02.jpg
Set up an account on the UXPin home page.

As we move into the realm of mobile design, app design and responsive design there has been an increasing focus on UX (User Experience) and wireframing, interactive prototyping and mockups. There are a ton of tools out there aimed at this niche and they run the full gamut from complex, feature laden behemoths to sparse and barely useful. One of the tools that has caught my eye is UXPin simply because it was developed by designers for designers.

Before we move forward … a caveat. If yours is an organization that prefers to own the software then UXPin is not for you. All of the work done in this app is done in the browser and the projects you save are saved to your account.

To get started with UXPin you launch a browser and head to UXPin. From here you can sign up for a Free Trial or arrange for a monthly plan based on your anticipated need. The sign up process is quite easy and once you have set your User Name and Password, your are ready to get started.

2
How To Start A Project in UXPin

Image_03.jpg
You can choose among a variety of project types.

When you log in you arrive at the Dashboard and, from here you can decide to create a new wireframe, a  new mobile project or a Responsive Web Design project. There are also plug-ins for UXPin that will allow you to bring in your Photoshop or Sketch projects. For this How To I am going to create a banner with some text and add an email button to the banner. To accomplish this I selected Create a new wireframe. 

3
How To Use The UXPin Interface

Image_04.jpg
The UXPin interface.

The Design Surface is broken into four areas. In the black area at the left are a series of tools that let you return to the dashboard, open the Elements you will use, open the Smart Elements panel, search for elements, add notes to the page and add team members. At the bottom is a button that opens a short tutorial, another that allows you to access your account and another that accesses the FAQ’s, let’s you ask questions and even provide feedback.

In the blue area along the top are a series of tools and properties. The darker buttons on the right side allow you to iterate your design, adjust the project settings, share the page and do an in-browser simulation of the page.

The Elements panel is where the you grab the bits and pieces for the Design Surface, name your project and add or remove pages.

The Elements library is a pleasant surprise for UX designers. This pop down lets you choose from anon 30 libraries ranging from iOS to Android Lolipop As well you have access to Bootstrap and Foundation elements along with the Font Awesome icons , Gesture icons for mobile and a collection of Social Widgets.

4
How To Add An Element To A UXPin page

Image_05.jpg
Adding an element is a drag and drop process.

To get started I dragged the Box element to the design surface and, when I release the mouse, the Properties panel opens.  The Properties button lets you name the element and set the element’s width height and position values. You can also add padding to the element, round off the corners and adjust its opacity. Clicking the Background Color button opens an RGBA color picker.

You can also assign a font, border and pattern to the selected element. The Lightning Bolt gives you the ability to add interactivity to a selected element.

5
How To Add And Format Text In UXPin

Image_06.jpg
Adding text to a UXPin element.

To add text, drag the text element to the design surface and enter your text. Click the Text Property button to open the Font properties and format your text. If you need a block of dummy text, add a text element and click the GENERATE LOREM IPSUM button in the Font properties. 

6
How To Add An Image To A UXPin Page

Image_07.jpg
There are three ways to add an image to a page.

There are a couple of ways to accomplish this task. You can use the Image Tool in the toolbar, add an Image element from the Library or simply drag and drop an image from your desktop onto the element on the design surface as shown above. 

7
How To Add A Button To A UXPin Page

Image_08.jpg
UXPin has an extensive button library.

Though there is a Button element, entering “Button” into the Search area, as shown above, opens up all of the buttons found in all of the Libraries. Drag the one that works for you onto the design surface and use the Properties to change the color, the font, and even the Border radius. To change the text inside the button, click once on the text and  enter the new text. 

8
How To Add Interactivity To A UXPin page

Image_09.jpg
Interactivity and motion is added through the Interactions panel.

This is not as complicated as it may first appear. For the email input, I added an input element, resized it, entered the text and formatted the text. With the Input element selected click the Properties button and, when the Element properties appear click the Visibility button- the eyeball – in the upper right corner of the panel.

Select the button and click the Interactions button – the Lightning Bolt-  in the properties. When the Interactions panel opens, select New Interaction. Select Click from the Trigger pop down. In the Action area select Show Element. You will now be asked which Element to show. Click once on the gunsite and click on the Input element. With the element identified, you can now determine whether or not to animate the element. In this case I decided to show the Input box with an ease in and went with the default duration value of 300ms.

I also want to have the button move about 65 pixels to the right when it is clicked. I selected the button, opened the Interactions panel and selected New Interaction. I used these settings:

  • Trigger: Click
  • Action: Move By
  • Move Direction: 65 px on the x axis
  • Animation: Linear
  • Duration: 300 ms

To remove an interaction select the element and open the Interactions panel. Select the interaction in the panel and click the Trash Can to delete it.

9
How To Test Your Page In UXPin

Image_10.jpg
You test in the browser.

Due to the fact you are working in the browser, testing is dead simple. Click the Simulate Design button. The page will open in the browser and you can test way. There will also be a panel added to the left side of the page which allows for Comments, a Site Map if there are multiple pages, Usability Testing, Live Sharing, Editing and a return to the Dashboard.

At the bottom of the page is another small panel that allows you show the Interactive elements, show or hide comments and share the project link with others.