Post Image

Interactive Prototypes Made Easy: Shift from Low to High-Fidelity

Mateusz Makosiewicz
By Mateusz Makosiewicz on 19th March, 2014 Updated on 2nd September, 2016

In the previous tutorial we explained how to get the most out of UXPin in creating quick wireframes. For those who have the appetite to take their wireframes to another level, in this tutorial I’m explaining how to get to high-fidelity design using UXPin’s tools for image placing, cropping and styling, colors & gradients, typography, interactions and responsive breakpoints. Read on!

Index

First, let me give you a visual example of low and high fidelity designs – we did that shift with our homepage. First we started with a lo-fidelity, qucik wireframe just to set up grounds for improvement:

UXPin - low fidelity wireframe, sample

Then we improved our design using some of UXPin’s tools mentioned above, like replacing placeholders with actual images, adding colors, transparency, etc:

UXPin - high fidelity design, sample

This is just a simple example on a simple design. In UXPin you can come up with your own solutions, experimenting with tools to get superb results. Try out UXPin’s tools for high-fidelity designing:

Uploading, styling and cropping images

The best way to upload an image into the UXPin editor is to simply drag it from the folder where the file is located on your computer, right onto the canvas. Your image will start uploading right away and you’ll be ready to go in seconds. From this point, you’re ready for styling and cropping your image (you can also set interactions for this element, see interactions section in this tutorial). Options to style your image are:

  • Brightness
  • Contrast
  • Saturation
  • Vibrance
  • Exposure
  • Sharpness

Image adjustments in the UXPin editor

Quick tip: you can replace image placeholder elements with acutal images dropping them onto the area of the placeholder:

UXPin - drag image to replace placeholder

Adding colors and gradients

Take a look at your wireframe again, and if it lacks some colors, you fix that for any UI element you placed on the canvas using the UXPin Color Picker. Not only you can pick colors precisely with HEX input, RBG input and slider, transparency, alpha slider, but also you can use Color Schemes tab for quick color matching and the Favorites tab your own custom color library.

UXPin also allows for gradients. In the same Color Picker shown above, look for the Gradient button in the upper part. Click it and you will be presented with options, to edit the gradients.

Text editor

Plain “lorem ipsum” with a default font suffices only for a placeholder. If you really want people to focus on the written message of your design, you need to put some effort in it. Work on the copy and the typography to really delight the end-user. For this, we geared UXPin with something we call Typography Editor.

Adding interactions

Interactions put life into your prototype. With this enhancement you can simulate how your design will respond to user interactions, like clicking/tapping on an element and hovering the mouse cursor over an element. UXPin lets you also link to other pages in your prototypes and or external websites, so that you have a complete toolset for creating a clickthrough, interactive prototype of your design solution. What’s more – you don’t need any coding skills to preapre a prototype in UXPin.

For a more detailed tutorial about setting up user interactions, visit our “Interactive Prototypes Made Easy – Setting User Interactions Without Coding”

Responsive design: breakpoints and preview features

Designing for responsive often means preparing multiple prototypes to fit different screen resolutions and devices. That’s why the two key tools to do that effectively and without needing to constantly switch between different projects is responsive breakpoints and responsive-ready preview. While setting up responsive design breakpoints in UXPin helps you fit your design to the limits of the device, the preview with auto resize feature enables watching how your desing transforms along all responsive breakpoints you’ve set.

Here’s a detailed responsive design tutorial where you’ll find a walkthrough of all we prepared for you to aid you in this type of design.

In this article I’ve shown you the key tools that you can find in UXPin for shifting from low to high-fidelity. Try them out, experiment, see what you can come up with. Let us know for any feedback and if you’re looking for more tips, design tutorials, and free ebooks see the Tutorials section of this blog.

Thanks for tuning in and happy designing!

Try High-Fi Prototyping in UXPin

p.s. Web and mobile sites are not the only designs you can prepare in UXPin. We actually use the high-fidelity features to desing some of the infographics, check out the chart in this article :).

Mateusz Makosiewicz

by Mateusz Makosiewicz

CMO and Lead Growth Hacker @ UXPin. After graduating from Philosophy and Advertising & Media Marketing managed marketing projects from IT, FMCG to Energy industry. After hours loves tinkering with his 3D printer, playing guitar, reading and blogging. Follow me on Twitter

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you