UXPin

Click for search

UXPin

Category Archives: UXPin

How to Quickly Animate a Photoshop Mockup Into a Prototype

Illustration of a ghost form with camera background.

Moving a user from one place to another in your app shouldn’t be like an afternoon stroll with no particular destination in mind. There is a goal for both you and your users. And you’re trying to move them as effortlessly through your app as possible.

With that, you’ve likely mapped out as many potential flows for your users. You’ve likely even mocked them up visually in Photoshop. But it’s not enough to create a series of static screens to illustrate a flow — say filling out a contact form — then expect them to work.

You’ll want to see it in action. In this post, we’ll show you how to create an interactive user flow so you can give it a test drive.

Take a look…

Be first to share

Animations & Interactions in Design: Creating a Fading Navigation Menu

Untitled-2

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.

Fly-in navigation demo

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.

Take a look…

Be first to share

Kill Your Darlings: Erase Clutter for Better Web Forms

Clutter to order teaser graphic.

I’ll let you in on a secret: I don’t care much for the word “clean.” Too often I’ve heard people — and not just stakeholders — ask for “clear” and “clean” without understanding what that means. Clear doesn’t just mean less stuff. Clean doesn’t mean empty. They mean removing what isn’t important on a page.

One glance at a complicated form is enough to drive away users with short attention spans. If you want to gather information, two of the fastest design methods are to remove clutter and add a grid. Today we’ll look at both ways to earn trust and improve conversions.

Take a look…

Be first to share

Mobile UI Design Trend: Build the Perfect Ghost Button

image01

“Ghost buttons” simplify calls to action by removing their backgrounds in favor of a thin line. Trendy and effective, when done well, they attract attention with high contrast while putting a new spin on the “flat” look.

Here’s how you can boost your mobile site designs with a ghost buttons, which you can create in UXPin.

Take a look…

Be first to share

Level Up Your Design Skills & Win an Apple Watch

silicon-valley-debug-homepage

There’s reading about UX/UI technique, and there’s putting it into practice. As part of our initiative to help designers learn — really learn — we’re creating a series of Design Challenges.

From basic visual skills to advanced interactions, each Challenge will test your ability to solve design problems in creative ways. And we’re going to kick things off with a big one.

Today we’re pleased to announce the first UXPin Design Challenge: Redesign a nonprofit’s home page to improve donations and encourage new memberships. To do the challenge, you’ll need a free UXPin account

Take a look…

Be first to share

August 2015 Update: Customizable Libraries

custom-libraries-announcement-teaser

Summer isn’t quite over and neither are our updates. Our development team’s been hard at work on our latest feature that’ll enable both businesses and power users to collaborate better with their teams — customizable libraries.

Now you’ll be able to build your own library of elements then share them with your entire team.

Let’s take a look closer at this latest update, available in UXPin right now.

Take a look…

Be first to share

Kill Design Busywork With Customizable Libraries

custom-libraries-tutorial-teaser

We’ve recently launched our customizable library feature, where you can create an element, like an icon or pattern, save it and not have to recreate it each time you need it.

A custom library  as allows you to share any elements  you create with your entire team — whether it’s a navigation bars, headers/footers, sample content, or other project-specific components.

With that, let’s dive into how you can actually build your own element library. If you want to follow along, you can create a free UXPin account.

Take a look…

Be first to share

Building Stronger UX Prototypes With the Interactions Menu

Illustration of the interactions panel in, well, action.

The appropriately-named interaction picker lets designers create ways for users to work with elements on a view. With this tool you can make elements react to users’ actions, like taps and hovers, and then change the interface accordingly. Text links, for example, can take people to new pages. Hovering over elements can present tooltips. And tapping search icons can present entire forms. Better yet, you can apply interactions to anything including form fields, text blocks and whole groups of elements.

Invisible elements, though, are only selectable from the Layers menu. That’s both a handy way to select items underneath other items … unless you want to work with them directly.

In this tutorial we’ll explore ways to select elements and add interactions. If you aren’t yet using UXPin, you can start a free trial and follow along.

Take a look…

Be first to share

3 Quick Ways to Build Great Prototypes in the UXPin Editor

Illustration of the UXPin editor

The UXPin editor comes with many features that help you communicate your ideas to clients, developers, and other designers. Here’s how you can start using the UXPin editor to make prototypes in a snap.

Before we dive in and if you want to follow along, you can get UXPin with a free account

Take a look…

Be first to share

Creating Multistate Elements in UXPin

Multistate element symbol

Have you ever wished to create complex sliders, tabs or large menus? Have you already spent long hours adding interactions to create such complicated elements?

The pain has just ended! By means of Multistate elements you can achieve such effect easily in UXPin. If you’re not using UXPin yet, you can sign up for a free trial.  With that, let’s get started. 

Take a look…

Be first to share