UXPin

Click for search

UXPin

Hot topic

Animations & Interactions in Design: Creating a Fly-in Navigation

Airplane pulling a navigation banner.

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 fly-in navigation without writing a single line of code that’s sure to wow stakeholders.

Take a look…

Be first to share

Lure Mobile User With These 2 Hierarchy Tricks

Lure for users

Hierarchy in mobile design is a tricky thing to master. On the one hand, we want to direct attention. On the other, we don’t want to overwhelm. Two tools will help us address these conflicting goals in a surprisingly simple way.

Let’s start by defining the problem. A hierarchy is more than type-size choices. It’s a series of signposts that guide readers along a page. The mobile world has an additional burden: to help readers decide if the page even has the information they want, of if they should look elsewhere — and do so in a hurry.

Luckily two design principles provide the answer. You can use size and color — specifically, value — to make a hierarchy that works well on mobile devices.

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

Animations & Interactions: Deliver Mobile Content With Fade-Ins

image03

Imagine loading only the web content that users need on a smartphone. It’s not the future: mobile-savvy designers are making content appear depending on scroll. The ability to make elements load as users follow page is important in mobile design for two reasons, which we described in the free e-book Web Design Trends 2015 & 2016:

  • It adds a dash of surprise and delight as elements animate in real time.
  • It only loads resources as users need them, potentially saving bandwidth.

Explaining this to stakeholders in a project requires more than lo-fi sketches. Luckily, with a little planning and a lot of common sense, you can make a prototype that only shows elements as users need to see them.  So let’s get started! 

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

How to Guide Users With an Efficient Visual Hierarchy

image02

An experience is the sum of all interactions. As soon as someone sees your site, an emotional reaction occurs subconsciously — that in itself is an interaction. Likewise, users also need to consciously decide how and where to click on your site.

Prototyping helps you refine all these tangible and intangible design elements. In this post, we’ll explain how to design more efficient layouts by mastering visual hierarchy.

Take a look…

Be first to share

How to Quickly Create an Animated Mobile Prototype

Animation opening and closing a mobile button view.

Imagine me holding a ball. Now imagine me dropping the ball.

What did you see? I am sure the answers will vary depending on the person.

Describing an interactive process with a static medium leaves us open to misinterpretation. In this piece, I’ll explain how to use animation to create more useful mobile wireframes and prototypes. Feel free to follow along in UXPin with a free trial since this is a hands-on piece.

Take a look…

Be first to share