Author: Ben Gremillion

Ben Gremillion is a Content Strategist at UXPin. He’s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.

The Editor

A blank canvas can be an intimidating place to start. Luckily, many tools, menus, and widgets accompany UXPin’s canvas, turning you into an efficient design powerhouse.

The Editor is your tool to create wireframes, mockups, and prototypes. It includes tools, element libraries, and a working canvas upon which to construct great mockups.

Tour of the interface

The editor is organized into distinct areas: Toolbars, elements, canvas and breakpoints, and layers.

Layout of the editor

Customize the interface to your liking

Look under the View Options menu to customize your interface to better suit your workflow and screen space.

Editor view options

From here you can:

  • Reveal or hide the side bars
  • Make panels appear on demand
  • Switch between the interface’s light and dark modes
  • Enable or disable element snapping
  • Enable or disable “smart” snapping between objects
  • Change the workbench (off-canvas area) color

“Advanced” mode lets you add code specifications per element (see below) and work with multistate elements; “simple” mode hides these features to de-clutter the interface.

Managing libraries

UXPin’s hundreds of design elements are organized into “libraries.” If you don’t need every element in your work, you can control which elements are available to use and search for by clicking the “libraries” button on the right, then clicking “manage libraries” at the bottom of the library-select list.

Managing libraries

Type cmd-F (Mac) or ctrl-F (Windows) to call forth UXPin’s search panel. Elements appear as soon as you type two or more letters. From there you can drag any element onto the canvas. Search remembers the last few elements you used, making them conveniently available for reuse.

Searching for elements

To choose an element for your work, drag it from the search results into your canvas.

The search feature looks for elements in your active element libraries (see the next section).

Editing elements

The right-hand panel is context-sensitive, meaning it changes depending on which element you’ve selected — if any. For example, choosing a box element will let you control its color, border, corner radius, typography, custom CSS, and more.

Box properties

Learn more about working with elements.

Specifications

Sometimes we want to reuse standard code snippets that make future updates easy. To keep everyone — including developers — from inventing non-standard code, you can assign code and comments to specific elements. To add “specifications,” first make sure you’re using the advanced editor view located in the bottom left corner of the editor. Then select an element and click the “i” tab on the right-hand panel. Choose code, then a language, and add your snippet to the field provided.

Adding spec code

Documentation

You can assign use-case notes to each element in a design with the Documentation feature. Click “Documentation” at the top of the Editor to enter commenting mode. Entering notes on the right, which support Markdown-like editing, produces a “target” icon. Click that icon, then an element, to assign the note. Numbered orange markers indicate which notes belong to which elements; a blue marker indicates the one you’ve selected.

Type shift-return to add a new line to the current note, or just a plain return to create a new note.

Adding documentation

Share with your team

You have many options to share your prototype and get direct feedback from your team. Anyone with the “collaborate” URL can test interactions and leave comments on your work, even if they don’t have the live link.

Sharing button

Sharing options include the ability to share the prototype by email, SMS, Slack, and even QR code. Here you can also find the “export” options, which include saving as HTML/CSS/JS files, PDFs or a set of PNGs.

Sharing panel

Iterations

Iterations are “snapshots” or saved states of your project to which you can revert if you want to undo a series of changes after closing your browser tab. Each iteration has a unique live preview URL and its own set of comments, letting you start anew as you respond to team feedback.

To create an iteration or view old ones, look for “Iterations” in the “more actions” menu (lower right corner of the Editor). Each iteration has several options: you can preview it to see its comments, for example, or “roll back” to that version to continue your work.

Viewing live

Creating interactions the first step; testing them is the second. You can test your mockups and prototypes live when you press the “preview” button at the top center of the Editor’s toolbar.

Preview button

This presents your work in a new tab, simulating a real website or app.

Related resources

Ask a question






The Dashboard

All work begins in the Dashboard, your account overview screen. The UXPin Dashboard lets you organize project folders, find projects and prototypes, and manage your account.

Dashboard overview

Prototypes

Each prototype belongs to one project folder, and can be edited by several contributors.

As with project folders, you can view prototypes in the dashboard as tiles or a list. Hover over the three-dot icon for options:

  • Export: Save the prototype to your computer as clickable PDFs or HTML.
  • Move: Assign this prototype to a different project folder.
  • Duplicate: Make an exact copy of the prototype — handy for using the same elements in a different prototype or branching into side experiments.
  • Iterations: Review previous versions of the prototype.

Editing a project

Organize project folders

Project folders contain prototypes. You can organize project folders themselves into groups. Create and manage groups in the upper right corner of the dashboard. Then drag and drop project folders between the groups.

Organized project folders

Create a new prototype

To create a prototype, go inside a given project folder. Next, click the “Create new prototype” button in the bottom left corner of your screen.

Creating a new prototype

Add team members

Collaborate with other team members on a project by granting them access. To control permissions for viewing and editing prototypes, go to your account options, located under your icon in the upper right corner, and look at the top of the screen for the “Project team” icon.

Profile settings

From there, click “Add new users” to add new users by email, as well as revoke their access via the checkmarks next to their name.

Adding new users

After entering new users’ email addresses, the users will receive an email with a confirmation link. For security reasons they will not be able to view or edit contents of a project folder until they click the confirmation link.

Share a project folder for review

Just as anyone can comment on a single project, you can also share an entire project folder and its prototypes with your team. To do so, hover over the project in question and click “Manage Users” You can also manage users by clicking into a project folder and selecting the eponymous link at the top of the screen.

Managing a project’s users

See project activity

The activity feed tracks recent changes across your account, including prototype edits and creation. At the top of the UXPin dashboard, click the “hamburger” icon to open the activity feed. Doing so will also close your profile panel. Click the icon again to show the profile and hide the project folder’s activity feed.

Download plugins

UXPin offers two free plugins to export Sketch and Photoshop files into the app. You can find the plugins when uploading design files at the bottom left corner of the Dashboard.

Download the plugins

References

Ask a question






Teams and User Management

A team is a set of people working together for a common goal. In UXPin terms, they’re building great prototype apps and websites.

Every team member is assigned a role, which gives different levels of access to projects, in addition to their own. Team members can also see team comments, as opposed to public comments — although anyone with an unlocked preview URL can test and test the prototype.

Roles

Roles define what team members can do, and what projects they have access to. Each team member has one role: “creator,” “manager,” “owner,” and “collaborator.”

Every account in UXPin has exactly one owner, usually the person who sets up the account.

Adding team members

Look at the top of the Dashboard for “add new team member.” This will present a window in which you add people by sending email invitations.

Team buttons

Managing users and their roles

You can control who has access to what, as well as removing team members from your account, by clicking “manage team” at the top of the Dashboard.

Managing your UXPin team

By default you’ll see a list of users and their access levels or roles. Here you can change their role in your account. Clicking the three-dot icon to the right of each user gives you the option to remove them from your account.

Click the Roles tab to see each role’s capabilities.

Team-level features

Depending on their type of account — Basic, Pro, Team, or Enterprise — users have different options. For example, Team accounts can choose to share their live preview comments visible to all stakeholders — or just people on the team itself.

References

Ask a question






Working with Elements

The UXPin editor lets you build prototypes with elements, from simple shapes to icons to pre-built components. Here’s how to find and organize elements in your design.

Everything is a layer

As in Illustrator or Sketch, every element is a unique “layer,” or object. That means you can place elements above or below other elements, like navigation buttons above a background. To see your layers, click the stack-like icon near the bottom left corner of the editor.

Where are layers?

The layers menu is detachable so you can move it to a convenient place above the canvas as you work, if you need the space. Look for the three-bar “pop out” icon in the upper right corner of the layers menu itself.

Detaching layers

Adding elements to the canvas

Building both quick wireframes and advanced prototypes with basic parts is a snap. On the left side of the editor you’ll find a collection of design elements like buttons, text fields and icons. Drag one into the canvas to add it to your prototype.

Adding elements to the canvas

Searching for elements

Although UXPin organizes its elements into libraries, sometimes you need to find one by name. To that end, the element search feature (cmd/ctrl-F or that icon in the top bar) lets you type a name, then drag and drop your choice into place.

The search icon

Groups

A “group” is a collection of elements that act as one. Re-positioning one element in a group moves them all, and hiding the group hides its elements.

Groups can be cropped to hide certain elements they contain, making them partially or completely hidden. Turn on grouping in General Properties. To reveal a group’s cropped elements, activate the group’s horizontal or vertical scrolling options, also in General Properties. Cropping is useful when you want to simulate smaller viewports or iframes.

Cropping a group

Above, creating a group with a crop.

Align elements with the layout grid

The horizontal layout grid (opt/alt-G) helps you create orderly designs, especially with wider apps and sites.

Setting the grid

Resources

Ask a question






Customizable elements

With more than 1,000 elements and pre-built components, UXPin has many parts to help you design websites and apps.

Certain elements have custom elements to extend their appearance or functionality. You can find their specific controls in the Custom panel located in the bottom right corner of the editor. These customizable elements are:

Basics

  • Arrow: Change its curve (or lack of), size (thickness), and endpoint arrows.
  • Horizontal Scroller: Change the position of its scroll indicator.
  • Icon (all of them): Change its size and which symbol it contains.
  • Image: Upload images, crop, and adjust properties like hue, saturation, vibrance, and blur.
  • Line: Alter its weight (thickness), orientation, and solidity (solid, dotted, or dashed).
  • Link List: Change individual links’ text, add/remove links, and hyperlink them to different pages.
  • Navigation: Add/remove links and sub-links, control its color, orientation and line weight (if any).
  • Shape: Change between rectangles, triangles, parallelograms, and more.
  • Table: Change the number of rows and columns. Also change the colors of individual cells.
  • Text: Has its own typography panel.
  • Tooltip: Change on which side the arrow is anchored.
  • Vertical Scroller: Change the position of its scroll indicator.
  • Video: Embed YouTube, Vimeo or Dropbox media.

Forms

  • Button/ghost button: Add/remove a shadow, alter if it’s active, pushed, or disabled.
  • Checkbox: Place the checkbox on the left or right of the text, whether or not it’s checked by default, or completely disabled.
  • Input/password: Change its shadow location, indicate whether or not it’s disabled, and change it between plain text and an obscured password field.
  • Multiselect: Add/remove options, and add interactions depending on which option is clicked.
  • Radio button: Check it, disable it, and assign it to a group of radio buttons.
  • Select list: Add/remove options, and add interactions depending on which option is clicked.
  • Textarea: Add/remove a shadow, and make it disabled.

Animations

  • “Arrows”
  • “Bar”
  • “Bert”
  • “Big Roller”
  • “Indicator”
  • “Squares Circle”
  • “Waiter”
  • “Wheel Throbber”

Search for these elements by name to use them in your design work.

Related resources

Ask a question






The Box Element

The humble box element doesn’t get much credit. While they make terrific gray placeholders, in UXPin boxes can be more than just dull rectangles.

Border

The edge of a box can have a certain thickness, measured in pixels. You can color this border, which technically sits inside of the box element.

Box border examples

Click the chain icon to give each side a different thickness. That’s useful when simulating a bottom shadow, or making a small box appear to join a larger one as when making tabs. You can also change a box’s corners from sharp points to gentle curves with the corner radius settings.

Boxes as tabs

These options are available to you in the Style menu.

Fill

You can fill the space that a box occupies with a color, gradient, pattern or image.

When using color, box backgrounds use RGBa — which includes opacity. That means you can make its background translucent without affecting its border or content.

Unlike image elements you can import with click-and-drag, images in box backgrounds do not stretch or shrink as you resize the box. If the image is smaller than the box, you can use it as a repeating pattern by selecting “repeat x-axis” and “repeat y-axis.”

Like borders, you can edit a box’s fill in the Style menu.

Box fill examples

Opacity in boxes

Content

Boxes can contain text. Double-click a box to start entering words or numbers. This is most useful when creating sitemaps — though you can also use it to create simple alert and success messages.

To keep text content from bumping into the border, look in General Settings for “padding.”

Content in boxes

Coupled with fills and interactions, you can create give users some useful messages

Box-based alert messages

Fixed position

Like any element, boxes don’t have to move as a user scrolls through long prototypes. Look in General Settings for the “fixed position” checkbox to keep them in place. This is useful when creating headers and footers, especially on mobile apps.

Live Webinars to Improve Your UX Process With UXPin

We’re pleased to host a series of live webinars to help you get going in UXPin.

From guided tours to active demos, you’ll learn fundamentals that get you prototyping quickly.

From Zero to Lo-fi in 15 Minutes

Screenshots of what we’ll build

A quick presentation. A live demo. Watch prototypes take shape before your eyes — and learn to leave feedback on the fly. Learn how prototyping’s a snap with basic elements and images you can upload yourself. We’ll spend about 15 minutes presenting with another 15 for Q&A, so bring your design curiosity. You’ll learn to:

  • Build quick mockups with basic shapes and your own graphics
  • Make anything in your design interactive and animated
  • Give feedback on comments on a prototype


Temporarily unavailable. Email kelsey@uxpin.com to make special arrangements or get a recording of past presentations.


Join the world's best designers who use UXPin.

Sign up for a free trial.

Use Color to Up the Ante on Your UI Cards

Thanks in part to the growing popularity of Material Design, card-style interfaces are popping up everywhere. This trendy and functional aesthetic uses container-style design elements to hold a variety of information. If you want to take advantage of this highly versatile approach, your cards need to stand out.

One way to do that is with color. Great color choices, exciting color palettes, and interesting combinations can be used to create emphasis, enhance usability, and draw users into your design projects.

Card-Style Design Primer

There’s a lot to know about designing with cards, which can feature various kinds of data (such as images, text, buttons, links, comments, or video) that all relate to one link or piece of information.

Designed to mirror the look of old-school playing or trading cards, these clickable containers include an area for some sort of visual and a small block of text or a button. The advantages to a card style interface are that users tend to easily grasp how they work, making them an ideal solution for aggregated content or e-commerce. Plus, they’re easy to browse and are highly shareable and versatile.

image01

Photo credit: Urban Ministries of Durham

image03

Photo credit: The Clymb

To start using cards, begin by learning the basics of card design in  UX Pin’s “Web Design Book of Trends 2015-2016.”

You’ll also want to follow these seven best practices from “The Complete Guide to Effective Card-Style Interface Design”:

  • Negative space. Use sufficient borders and padding to avoid clutter.
  • One card, one concept. Cards simplify your site’s structure. Don’t undermine that by making each card overly complex.
  • Suitable images. Card images tend to be small, make sure you use clear pictures that are appropriately cropped to suit where they’ll be used.
  • Simple typography. Because text also tends to be small, simple typography is most legible. Choose simple and elegant fonts, avoiding decorative typefaces.
  • Get creative. Make an extra effort to stand out from the crowd, using elements such as animated effects, video, round frames, or new color schemes.
  • Use an open grid. A standard grid helps maintain the same spacing while respecting various sizes and breakpoints.
  • Implement Fitts’s Law. As we described in Interaction Design Best Practices, Fitt’s Law (as applied to cards) suggests that the entire card be clickable—not just the text or the image. This makes interaction easier for the user.

Light vs. Dark Cards

The first decision you have to make is whether you prefer a light or dark color scheme. There are pros and cons to each; white or light schemes are most common, but darker colors are becoming increasingly popular for mobile apps.

image02

Photo credit: Dribbble

Dribbble’s cards are easy to see, sort, and click to learn more about an individual project. Its design uses white cards against a light background, with a content area below each image to display work. The light color scheme works particularly well on desktops and is easy on the eyes.

image05

Photo credit: SB Joinery

SB Joinery chose a much darker color scheme—reverse type on a dark background—and uses a tinted overlay on images to put visual emphasis on the text and ghost buttons. The pop-out menu also uses this darker theme. Thanks to bolder fonts and high-contrast colors, this dark card aesthetic is readable and highly usable.

Bright Color Schemes

Material Design has been a major influence in the use of cards—and for good reason. The design style emphasizes mobile usability, borrowing from flat design and minimalism to follow an aesthetic and techniques that users are growing accustomed to.

This style incorporates a color palette of bright, saturated hues ranging from blues to greens to reds. While you don’t have to abide by these color suggestions, the idea is a good one. Adding bold, bright color elements can create emphasis and facilitate usability.

image04

Photo credit: Helbak

How can you make the most of bright color?

  • Use for headers, buttons and call-to-action elements.
  • Use as a background that adds meaning—such as colors associated with different types of cards. (Like this example from Helbak.). Note that even pastel or light colors can work beautifully in this way.
  • Use color for primary text elements to assist readability.
  • Overlay images with bright color or use a duotone technique to guide users through cards.

Color for Emphasis

Finally, bold color choices can be a great tool to emphasize specific elements. For example, color elements can break up visual monotony and increase interaction.

image00

Photo credit: Mayors Challenge 2016

The Mayors Challenge design makes the most of material concepts without feeling like a Google product. Color is bold and bright, while cards are somewhat simple and “undefined.” Pulling it all together are hints of bold color in iconography, text, and links that guide users through actions to take on the site.

One of the criticisms of card-style design interfaces is that elements can start to look too much alike—so have fun and think outside the box.

Takeaways

Color can be just the thing that helps your card-style design stand out from the crowd. Think about how color best compliments your brand and serves users, as you choose which techniques to use.

For maximum impact  use color for a specific purpose and to draw users through the design and stir them to action. Whether you go with light versus dark, or bright colors and trendy combinations, color  can influence how users feel about and interact with your design.

Responsive Web Design Crash Course: The Technical Side

It’s time to delve into the nuts and bolts of responsive web design. 

As a technical medium, RWD requires a working knowledge of the code that makes it work. Designers who ignore the basics fail to understand what browsers can and can’t do.

Since I’ve been a web designer and developer for nearly 20 years, I hope to distill the technical side of responsive design into a quick crash course below. The below foundational knowledge certainly helps me improve the feasibility of my own designs when I’m creating responsive prototypes in UXPin.

First, Cascading Stylesheets, or CSS, is the language that makes responsive web design possible. CSS is a series of directives that spell out how browsers should display data depending on certain conditions like browser width. Now, understand that while most modern browsers obey the same rules in the same way, CSS rules are suggestions.

Let’s review the fundamentals. CSS works with selectors and properties.

  • Selectors: HTML affected by the CSS. Examples: HTML <p> elements, <li> elements and <div> elements.
  • Properties: what the CSS will change on a given selector. Examples: Text color, border and padding.
  • Values: the change itself. Examples: Red, 10px and sans-serif are three values.

Now let’s put this together. “div { color: #333; }” has one selector, one property and one value.

image00

Media Queries Are the Technical Heart of Responsive Web Design

To account for different browsing conditions, responsive web design dictates that different rules must take place under different circumstances, usually the browser’s or device’s screen (the “viewport”) width.

How do we define these rules? Media queries. Media queries are CSS commands that determine under what conditions other CSS selectors take effect.

For example, one media query might tell a browser, “pay attention to rules 1–10 when the screen is up to 320 pixels wide,” while another might say, “pay attention to rules 11–20 when the screen is 321 pixels wide or greater.”

Media queries are easy to identify: they begin with “@media”. Browsers read the CSS rules (e.g. selectors) listed between the media query’s { curly brackets }.

image01

Above, CSS says to make all text red on visual devices, not screen readers.

Media queries can build upon each other. For example:

@media screen and (width: 320px) { body { color: red; } }

Rules take effect on visual devices that display exactly 320 pixels horizontally.

The different minimum and maximum widths that media queries use are called breakpoints. A query that specifies (max-width: 768px) would change layouts when the viewport measures 0–768 pixels wide. Oddly, nothing actually “breaks” at that point. The term simply means that new rules will take effect within a given range, in this case 0–768 pixels, or the width of an average tablet.

There’s no technical limit to the number of conditions a media query can display. This query is perfectly valid:

@media screen and (min-width: 480px) and (orientation: landscape) and (aspect-ratio: 4/3) and (color: true) { … }

It says that any color screen at least 480 pixels wide, held in landscape position, with an aspect ratio of 4 to 3 that’s exactly 320 pixels wide should take on certain properties.

The two most popular conditions are minimum and maximum width, the upper and lower limits a browser window can be to take on the given properties. But we can manipulate other important properties.

Resolution, for instance, suggests at what quality we should create our graphics. Screens capable of high-density graphics, e.g. Apple’s retina screens or high-res Android screens, will show text and vector art with crisp lines that make regular-density images look fuzzy.

“High-density images” are those that use more device pixels (actual dots a browser can display) vs. those defined in CSS. That means for an image to look its best, it needs four times the usual number of pixels. Something displayed at 300×300 pixels on a small screen actually needs 600×600 pixels total — when our media queries detect high-res screens.

If you’re curious, here are additional properties we can control with media queries:

  • Aspect-ratio: a comparison of a browser window’s width and height. 
  • Color: whether a device has a color screen or not. 
  • Color-index: the number of colors a screen can display. 
  • Device-aspect-ratio: a comparison of the screen’s width and height. 
  • Device-height: the number of pixels a displayed vertically by a device. 
  • Device-width: the number of pixels a displayed horizontally by a device. 
  • Height: the number of pixels displayed vertically by a browser viewport screen. 
  • Monochrome: how many bits that pixels in a grayscale screen uses. 
  • Orientation: whether a user is currently holding the device horizontally or vertically. 
  • Resolution: the number of pixels per inch or centimeter displayed by a screen. 
  • Width: the number of pixels a browser viewport uses horizontally.

As web layouts become more sophisticated with technology like Flexbox, orientation and aspect ratio will help us decide how much to show users at a glance. The “fold” may not be relevant as users scroll, but what they see when they stop scrolling needs to be as self-contained as possible.

For now, though, width and resolution are most useful for responsive web design. Since contemporary site design lets us scroll up and down, width determines the available space a layout can use.

Best Practice According to the Experts

It might not surprise you to learn that Google, whose search engine reads a page’s information and ignores viewports, recommend setting media queries by content, not specific devices. That makes sense as new devices appear every month, meaning device-based CSS would need constant updates.

Here’s where media queries help us most: they allow us to plan for browsers based on content and capability, not expectations. That is, we can tell browsers that our designs look best under ranges of conditions, like 0–300 pixels vs. 301 – 600 pixels, and write our code to suit our needs rather than what the browser requires.

Google also recommends adopting a mobile-first approach which, in addition to focusing on essential content that users want, encourages designers to use the fewest breakpoints possible. That means easier troubleshooting during development and maintenance later on.

If you’d like to learn more techniques for CSS media queries, we recommend the following resources: