Responsive websites, mobile-friendly designs, adaptive images are crucial for user experience. So, being able to responsively design prototypes without using multiple layouts for different screen sizes is an extremely powerful and time-saving feature. It’s something that many people have wanted and thanks to the power of Merge, you can do just that by using actual React components to design with code.
Continue reading Responsive Design with UXPin MergeWe truly live in the future. One in which we can power our home lights, sound systems or even security with our voices or from a phone app while miles away. Much like the one predicted in the cult classic, Back to the Future:
You’re now able to build such prototypes in UXPin! Until now, it was impossible to do this using prototyping tools or without coding. What is this sorcery?! Or as Doc Brown would say: Jumpin’ Gigawatts!
UXPin’s latest feature, API request, allows you to create app prototypes to “talk” with your products. For e.g. as a car manufacturing company, you could build a prototype that communicates with the car. You can even save data from a prototype to a spreadsheet! Or you’ll be able to simulate changing the colors of your smart lights via a prototype created in UXPin. Just like so:
Technically speaking, it allows you to send HTTP requests to an external API. This is now part of Interactions as a new type of action called API request.
Learn how to use this feature here.
Welcome to the future.
Designing web and mobile experiences is no easy feat. It can be tough to visualize complex digital experiences you’re creating with just artboards. You should save your imagination for creating your designs, not waste it racking your brain on how they will interact in real life.
That’s why we created UXPin’s new Mirror app.
It makes previewing prototypes on real devices (both iOs and Android) fast and easy. That too in real time. All it takes is one click to ensure mobile prototypes look and perform the way you intended.
This feature allows for a fast review of created prototypes by seeing them immediately on the device they’re intended for. The Mirror app must be used in conjunction with UXPin’s Desktop App or Browser.
As you make changes in the prototype, the preview on your device updates automatically. So if you switch pages, you’ll see that real time in the preview. Also, there is no need to connect via USB or use Wi-Fi network, just scan the QR code in the editor to view your prototype!
Download UXPin Mirror App.
The right data, in the right place, in no time. Surprise! Now you can upload real data into your prototypes with our new Data feature. No more spending hours, even days, mocking up data for your designs. You’re welcome.
Boy, are we excited to share this one with you. You should know that this new feature was not originally on our product roadmap. One of our incredible engineers, Robert, took this on as a passion project and did this on his own time as a gift to UXPin. That’s the magic of our team.
Data allows you to fill an element with random data (avatar, name, phone number, etc.) or from JSON, CSV and Google Sheets with just one click. Either from a URL or from your computer. UXPin can automatically match all the fields based on the JSON, CSV or Google Sheet of choice. If you name your layers, it’ll automatically link that with the respective data. It’s truly that simple to use. Additionally, you can choose from many types of bundled content for random data. We’ve made sure to include a great deal of diversity for all the possible elements. We’ve also partnered with Unsplash so you can use their amazing free images directly in your prototype!
This Data feature is the most complete version of this feature available on the market. The greatest value of the Data feature is that you can save an astounding amount of time. Now, you don’t need to spend what might seem like half your design career mocking up data. We’re especially looking at you, eCommerce sites and enterprises that use a lot of tables!
Whether you need mock addresses, credit card numbers, photos or job titles, you can have it all with Data. That too in seconds. The possibilities are endless.
Thanks, Robert!
Your prototypes have officially gained superpowers. Now you can store or pass information using variables and add conditional interactions! Prototyping just got a whole lot more interactive. Get much closer to real, coded apps with these new features. They’ll be especially handy for user testing.
Fall 2018 has been a crazy time at UXPin for all the right reasons. We have many cool features on their way—stay tuned for Expressions, States and Data. But we digress… today, we’re excited to show you not one, but two new features closely tied together!
Variables allow different elements to “communicate” with each other even if spread across pages. This data persists from page to page as you click through the prototype. Meaning you can set a variable’s value on one page and then take action based on that value on a completely different page.
With variables, you’ll be able to build the relationships between elements in a prototype. To do that, you can simply set the same variable for the elements you want to pair together. For example, to collect user data in an input and then use “username” in a message in a different part of the prototype.
[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2018/08/variables-video.mp4″ autoplay=”true” controls=”false” loop=”true” muted=”true”]
Conditional interactions give your prototypes a layer of logic—this is a very powerful feature that is characteristic to only a handful of prototyping tools. We’re very excited to be added to that list. With conditional interactions, you can set rules that make the interaction happen only if those rules are met.
Arguably the most popular type of mobile navigation is the type that appears on demand: Tap an icon and site-wide links appear. But just making them suddenly appear is boring. It lacks panache. Great navigation has a hint of animation that gives the links context — they’re not just things that appear out of nowhere. They’re hidden just out of sight, ready to help users get around when the need arises.
Today we’re going to show you how to build a fading navigation that flies in and out on mobile without writing a single line of code that’s sure to wow stakeholders.
Log in to your UXPin account (or start a free trial) and let’s get started. Then find and drag out the following elements:
We suggest you name each element as you create it — you’ll thank yourself later. To do so, tap the “i” icon at the top of the options menu whenever you tap an icon.
This prototype uses the background images in smart elements so we can reuse them later. Whether you choose to follow suit or not, drag in two versions of the background image: one in focus, and one blurred. Arrange them in the canvas so the in-focus image is on top of the blurred one. Finally, select the phone bezel and move it to the front.
Add navigation links (home, appetizers, entrees, etc). To add text to a box, double-click on its center and start typing.
Color each box and add a little padding. Change the typeface and size as you see fit — in this demo we used 24px Maven Pro. You can make each link the same color, but in this demo we used:
Add the title (36pt Rock Salt, in this case) and the open-navigation “hamburger” icon.
Place the close-nav icon on top of the open-nav icon, then hide it with the layers palette.
Shrink the navigation links to fit under the phone bezel’s right edge, and use the “eye” icons in the layers palette to hide them.
The fun begins with the custom animations editor. Add an action to the navigation trigger: advanced animation. “Step 1” represents the state that the animation will reach upon completion. This is the point at which the navigation should be fully revealed, the background blurry, and the “hamburger” icon changed to a “X”. To start all that, reveal and expand the navigation.
Set each navigation link to appear 50ms after the last. For example, “Appetizers” begins at 50ms and “Entrees” begins at 100ms.
Now for a little switcheroo. Hide the open-nav icon and show the close-nav icon. Then hide the focused background and show the blurred background.
Finally, make sure the phone bezel is the above the navigation links, but below the open/close icons. This ensures that the navigation links only appear in the app’s working area, not over the phone itself.
Then try it out! Advanced animations are a powerful way to give interactions a little pizzazz. To set yourself up for success, though, we suggest that you name elements as you go, pay attention to their layer orders, and don’t be afraid to experiment. Hope you enjoyed this tutorial. Now play with UXPin on your own!
Today We’d Like To Brag A Little (Humbly, Of Course) About One Of UXPin’s Great Users. We’ll Be Introducing You To SocialPaths And Their Real-Life UXPin Adventure With Interactive Wireframes!
SocialPaths (a.k.a. The Great User)
SocialPaths is a social media agency that, in their own Creative Director Piotr Zaniewicz’s words – mainly takes care of supporting all kinds of social media marketing activities. Their house speciality is engaging social media games connected to different kinds of loyalty programs that make good use of social media’s viral nature. Among many cool projects, the team at SocialPaths have created contest apps for the Facebook page of one of the biggest trance music festivals in Europe as well as a very popular app called The Great Advice of Mieciu The Eternal Student. While their apps are mainly created for Facebook, they also build interactive tabs for websites and contests.
KISS (a.k.a. The Biggest Work-Related Headache ; )
Working with clients isn’t always a bed of roses, the SocialPaths crew can vouch for that. Putting up with those occasional clients who always know best is one of the most annoying little problems SocialPaths encounters. Of course, clients have every right to have their vision of their product realized, BUT painting that vision in the form of a working app is sooooo complex and difficult that it’s not the piece of cake that clients think it is upfront. Our main problem that we face on an everyday basis is meeting client’s high expectations and stick to the golden KISS (Keep It Simple, Stupid) rule at the same time. Sometimes it is a struggle to convince client not to interfere where we know better – says Piotr Zaniewicz, Creative Director of SocialPaths.
UXPin (a.k.a. The Solution)
After a major brainstorming session, the SocialPaths team came to a conclusion about creating wireframes and interactive prototypes that could solve this problem, so they decided to try out some of the prototyping and wireframing apps out there. One of their friends sent them an interactive prototype made with UXPin and that gave them their first glimpse of our little baby.
Piotr, Creative Director of SocialPaths talks about what they were looking for exactly – We were in great need of tool that lets you create really advanced prototypes step by step so that our team would instantly know what parameters to consider while building (i.e. size, style, layout etc.) and that lets you create prototypes that REALLY visualize all the looks and features to the client.
It’s not easy to find a tool that does both, of course, but the final thing that made UXPin their weapon of choice was its ability to do everything online, so that there is no problem with keeping the project up to date; The newest version is always available to every member of the team at any given time. Another big plus was that UXPin’s really easy to implement – there’s no bigger pain than when the learning curve steals time instead of saving it: We were afraid of the implementation of new tool, but UXPin is so easy to use that after just a little while a fully functioning prototype went to the Graphic Designer – says Piotr.
The Conclusion (a.k.a. How UXPin Helped SocialPaths)
In our team, UXPin is used mainly by Project Managers and Designers who collect feedback and make on-the-spot changes to the projects according to our client’s wishes. In the first phase of the project creation, UXPin is the link between clients and our team. After three months of using UXPin we can honestly say it really does make our job easier! Thanks to making fully interactive, clickable prototypes, we avoid misunderstandings and unnecessary changes after the implementation. Our clients and us both save a lot of time. -Piotr Zaniewicz, SocialPaths
SocialPaths case is a great example of how wireframing saves time, money and refines communication. So why haven’t YOU used interactive wireframes to help YOUR business?
Create an account today and see firsthand how UXPin helps your!
Is it even possible? Well… YES! We did a lot of listening and thinking lately and now we can proudly present four new features that will make your job easier and faster! So, let’s cut the chit-chat.
Feature One – Context-Sensitive Menu and the Properties Tab
After years of using non-web-based prototyping tools such as Axure, I am accustomed to right-clicking on elements and this is one area that unfortunately the limitations of the medium created some difficulty – right clicks within Chrome, for example, result in the Chrome popup window rather than any context-sensitive menus for JustProto itself. It wouldn’t be fair to criticism JustProto for this, however, as it’s a limitation that applies to all web-applications but I felt that because the interface is just so, well, slick, I kept forgetting that it was a web-app at all. – John Clark wrote reviewing JustProto.We took his words very seriously and decided to make a change. After all, people are creatures of habit ;) That is why, from now on, right clicking on the workbench or elements will show a brand new context-sensitive menu!
Also, when you click on any of the elements, the properties tab on the right will show up automatically. Small but significant improvement – saves two clicks before changing the element’s properties. :)
Feature Two – Grouping
You build this amazing wireframe, there’s a gallery there with 10 pictures. After you set it up, when everything’s ready, you need to resize the images to fit 4 new ones. And now what? Resize of all elements is long and can set you back. Resize one and then delete the rest and copy/paste? I don’t think so! From now on, the problem is gone. Grouping option just arrived to the scene! :) Select elements you need, group them and then resize and move everything the way you need it and how you like it. You can find the Group/Ungroup Options in the new Context-Sensitive Menu.
Feature Three – Fade To Gray
If you want to keep focused on the functionalities of the project and not on its outlook this is The Feature for you! It sometimes happens with the clients – showing them the wireframe is one endless series of questions like: “Why this button is light orange, it should be big and screaming red, and this blue line should be two pixels to the left…” And all the UX stuff is non-existing. Crashing into User Experience Iceberg happens a lot – see presentation by Trevor Van Gorp. Fade To Gray lets you… well… fade to gray everything that takes the attention away from UX and interactions of the wireframe.
Feature Four – Border Radius and Shadow
We added two new properties to the properties tab – Border Radius and Shadow. From now on, if you need shadow and rounded edges in your wireframe’s elements – no problem! Just select the element, set up shadow and border radius you want and need ET VOILA!
Also, a little tip: thanks to border radius you can now add a new shape to the wireframe – circle. Just play with the properties :)
A while ago we got a message from one of the users. Here’s what Mark said:
“I really wish that I could set the individual menu cell width for a horizontal menu so that when I am overlaying it on an existing web design that it will line up correctly with the existing menu tabs… is there any possible way to get that functionality in the software? I have been looking for this feature EVERYWHERE and nobody has it.”
Well, now no one can say “nobody has it” ;)
We took Mark’s suggestion under consideration and now it’s possible to set individual height and width for the menu element. You can do it manually – just click on the menu and you’ll see highlighted sections that you can set exactly how you need them.
What seemed to be a little improvement ended up being a big programming pain but eventually, we were able to set it up for Mark and all of you!
Kudos for Buka and Dooshek for not abandoning ship mid-project!
You can all try out the improvement here!
We love to get your feedback and we take all suggestions very seriously.
If there’s anything we can improve for you – just drop us a line!
As part of a new JustProto version, we improved the text editor. Next to standard formatting options now you have available a few new ones. What options exactly? Take a look at the picture. Below the image, you’ll find a brief description of each new option.
Paste as plain text – this option helps you when when you want to add a tex full of links – without those links. While using previous editor you had to remove all links manually and that took some time. Now just select the Paste as plain text option and paste your linked text there – after you confirm all links will be automatically removed. Simpler and faster, right? :)
Paste – sometimes you need to paste the text with links. To do so just click on Paste, copy the text there, confirm et voila! :)
Find – sometimes it happens that the text you write is very long and you want to find one exact word in it. To find it faster use Find and type your chosen word there. It’ll be highlited in the editor window.
Find and replace – this option lets you to find an exact word and replace it with some other word chosen by you.
Clear formatting – when you highlight formated text and click this option all the formatting will be removed and set do default.
Add / remove link – this option gives you the chance to link a piece of text to another webpage somewhere on the web. Previous text editor didn’t have such an option – you had to add another text block to link it as the whole text was one big link. Now you can choose a certain part of the text and link it. Or unlink it using the Remove link option..
Select special character – gives you all kinds of special characters that you can add to your text: accents, umlauts or fractions.
Login to JustProto and check out new options!
Soon JustProto’s getting new feature – chat:)
Thanks to chat all collaborators will have the chance to talk over the project in JustProto without using any other chatlike solutions. Chat history will be saved in JustProto so users gain access to conversations – even if they go out of town – directly in the web browser. Thanks to Chat option new users and clients will also have the chance to follow older conversations to check what’s going on with the project. Pretty cool, isn’t it? ;)
Prototype your world using JustProto!
JustProto wins 4th round of the Wireframe Madness App Tourney!
Why to use JustProto? (according to the tournament results)
Wish us luck in next rounds! ;)
See the Tourney.
How many times were you annoyed by the fact your perfectly placed elements moved accidentally? Or the cat sat on the keyboard and your work just went to hell? If that made you “go bananas” – here’s the solution: we present new
JustProto element property – Lock/Unlock!
From now on you can block certain elements using the Lock/Unlock option in the top bar over your workbench.
Blocked elements can’t be added to selection or moved. If you press delete or want to cut blocked elements you’ll be asked for confirmation. You can still copy blocked elements – all the properties will remain the same for both elements, except the copy won’t be blocked.
Every blocked element will have a tooltip with the name of the element and a small padlock. You may find it useful, especially while making more complex prototypes.
Try it on your prototypes!
Here’s another great news for JustProto users. Long-awaited feature is now done and ready to be used.
Easily created components are a great tool for everyone who have problem with applying the same, multiple elements on various pages of prototype. They’re piece of cake to use – just click Add like you do it adding pages, and tick the Component option. Now create your Component with elements and when you’re done – drag&drop it on your pages. It’s that simple.
All changes that you apply on Components are automaticly shown on all your pages, so you don’t need to worry about changing properites of similar elements on every single page. That’s gonna significantly speed up the work, especially while making advanced prototypes.
See for yourself how easy is creating, using and changing Components and then try it on your prototype!
IDEO is one of the largest and most important American design and consulting companies. Starting from the industrial design and interaction design (one of the founders was Bill Modgidge) IDEO has extended its consulting services and fell under strategic competence of consulting companies like McKinsey.
What differs IDEO from the others is approach based on using the same tools while designing products, such as user’s observation,analysis of use context, prototyping and iterative process for developing business strategy and marketing.
How design thinking can help building strategy?
Typical tools for strategists such as Excel spreadsheets and PowerPoint slides don’t favor creativity and good communication (as we know, PowerPoint is an evil ;) – seriously, it was responsible for the disaster of the space shuttle Columbia and its use has been banned by NASA.) You can’t properly rethink the whole project if it’s vision is contained in short passwords. PowerPoint slides are boring, and words can be understood differently. Strategy formulated and presented in this way, is trapped in ambiguous abstractions, difficult to clarify and evaluate.
According to IDEO, preparing strategic prototypes is much better solution. Prototype is not the right project, but it is only the presentation of vision engaging emotions and imagination (built to think). The human mind needs to confront some real object or a story to develop an idea and assess its strengths and weaknesses. Prototype can be a mockup of the product, it also can be a comic strip or film, which shows the use of the service in narrative form. An example of such prototype is concept presentation of future web browser Aurora, prepared by Adaptive Path, another company which integrates designing with strategic consulting.
In his article “Strategy by Design” the head of IDEO, Tim Brow, outlines the elements of creating a strategy. At the beginning: hit the Streets. This process of creating a strategy needs to be “human-centered”. To gather interesting insights it’s important to spend some time with consumers, watching their behaviors, personally test the products and services, get know the „user-experience” on which we can often build the whole strategy.
The next step is prototyping:
Design thinking is by nature a process of prototyping. When you are on a promising idea, build it. The prototype is usually a drawing, model, or a video describing the product, system or service. We build these models very fast, they are strict and not very elegant, but they work. The aim is not to create approximations of the finished product, or process, the aim is to gather feedback that will help us resolve the problem. In a sense, we build to think.
When you start rapidly prototype, you begin to build a strategy. Doing this at very beginning of the cycle of innovation, allows you to release the most precious things in your organization: human intuition. When you sit down with team of experienced employees and show them prototypes of products and services that you want to implement within two years, you will learn whether they have an intuitive feeling that you are going in the right direction. It is enlightening trial-and-error method: Observe the world, pattern recognition and behavior, generate ideas, collect feedback, repeat the process and improve project until you are going to be ready to put product on the market.
Prototype tells the story. Prototyping is simultaneously an evaluation process – it generates feedback, which allows you to put the amendments on the fly – and is the process of telling stories. This is the way of visual presentation and experiencing every strategy. – Tim Brown, CEO of IDEO.
JustProto would like to send special thanks to Maciej Lipiec, who gave authorization for publishing this article. You can find original version of this post written by Maciej on his User Experience Blog – http://uxdesign.pl/
