UXPin

Click for search

UXPin

Hot topic

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.

You can follow along and give this tutorial a go in UXPin.

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.

You can also build along with a free UXPin account.

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. Follow along with your free UXPin account or check out the demo at the end of this post.

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

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