If your childhood was anything like mine, legos were a part of it. I’d say on average, my household acquired about one new set per year. So by the time I was 8 or 9, we’d developed a nice sized “lego pile.” You know what I’m talking about, a massive jumble of Lego sets that you could use to build pretty much anything you could think of.

The funny thing about that pile was how it lacked consistency; one day it was pirates on a spaceship, and the next it was a medieval knight riding a T-Rex. Hey, it was the ‘90s—all bets were off.

Fast forward to when I joined a product team in a collaborative app for musicians at a Tel Aviv start-up. As soon as I started getting familiar with the product, I noticed huge inconsistencies with its look and feel—pirates on spaceships all over the place.

Luckily, I had recently learned about the perfect solution that I knew we had to implement. We decided to create a design system.

What is a Design System?

Design system is a collection of UI elements and instructions for their use. This includes things like color schemes, fonts & typography, and general style. It may even outline how the product should behave in different scenarios.

Imagine a big company with several digital products spread out across dozens of product teams. Now, imagine that every product team gets their own lego set with its own instructions. What do you get? Chaos. No consistency across the products—lego zoo animals driving lego race cars. Now imagine that all the design teams have access to the same super set of legos with a shared set of instructions.

But designs systems don’t stop at just graphical elements. They can also include code for these reusable parts which make life easier for the developers as well. I don’t want to get too technical here, but design systems are an awesome way to promote efficiency and consistency inside of a product team.

Two of the most well-known examples of design systems are Google’s Material Design and Shopify’s Polaris. I know what you’re thinking: “Do all design systems have cool, futuristic names?” Well, IBM’s Carbon seems to be continuing that trend, so I guess that’s a thing.

But even more recently we’re starting to see another trend. As more and more companies are becoming aware of the need for a set of guidelines for visual design, some are also creating them for the product’s content as well.

So if a design system’s UI libraries keep the visual design consistent, what keeps a product’s voice and tone consistent? Meet the content style guide.

Content Style Guides as Part of a Design System

OK, here comes the wonky definition. A content style guide is a set of writing principles that inform all of the copy and content of a company’s products. They establish rules and guidelines for copy that help bring consistency to the product’s voice and help shape the brand’s personality.

They’re important because content is important—as important as the visuals. Just have a look at Dropbox’s homepage sans real content.

Like mentioned before in the UX Writing Hub’ newsletter, without content, the visuals do you no good. So why have more companies adopted a visual design system than one for content? It seems to be a matter of awareness.

However, there are now several forward-thinking companies that have created content style guides. The most famous one is probably Mailchimp’s but actually, Material Design and Polaris also have content style guides.

These guides include things like the voice and tone of the product, naming conventions, vocabulary, and more.

A content style guide may elaborate upon all of the content elements in a company (content marketing included) or may be oriented solely toward product writing. It depends on the team of writers and product designers to make decisions about what the guide should include. And of course, style guides are continuously being updated; they’re never really “done.”

Structure of a content style guide

So here comes the million-dollar question. How does one actually create a content style guide? Unfortunately, there isn’t a single, simple solution. After interviewing dozens of product teams, I learned that every company used a different approach to create theirs.

So while there’s no cookie-cutter for creating them, there are plenty of open-source style guides out there that we can take inspiration from. Here’s a collection of some of the very best content style guides out there.

Still, just looking at some existing guides isn’t going to do the trick. The best way to kick-start a content style guide is with your existing content. Look at the content elements of the product and analyze what you already have. If a team is going to start building a library of UI elements, they’ll start with what they have. They take a standard button from the design and describe it in the library; its color, size, font, radius, etc.

We can do the same with content. Look at the texts of your CTAs, empty states, and other content elements. Once you’ve cataloged major types of content, you can then add guidelines about them. For example, a CTA should be of a certain length, or what you want to communicate in your headlines. After this, use these four steps to give structure to your style guide.

1. Preamble

An excellent first step to take is to articulate exactly what this content style guide is for—what we hope to achieve by creating and using it. A brief statement detailing the goal of the content style guide should suffice. You can also include information about the company’s vision, including how business goals align with the needs of the end-user.

This is important because style guides, though created by the UX writers, should be used by anyone creating content for the product. That could include copywriters, marketers, designers, and perhaps even developers. Now, Bobby on the Dev team might have a way with code, but less so with words. Help him out.

2. Voice and Tone

This is one of the most important aspects of the guide as it as such far-reaching influence; every word inside an interface should match the product’s voice, which must be clearly described in the guide. So how is this done?

Again, it varies. One approach is to think of your product as if it were a person or even a fictional character. Once you’ve figured out who they are, try to imagine how they speak and what they’re like. Is that person confident, funny, serious? If we personify our product or brand, it becomes easier to understand how it will interact with our users, which is important.

Today’s successful digital products give their users an experience that feels like natural human interaction. If the user feels like they’re talking to a robot, that’s a bad experience. Though the day may come when writers will need to write the narratives for actual robots ala HBO’s Westworld, in the meantime it’s important to give your interface a personality, whether it’s a chatbot or just the content on flat UI.

Speaking of chatbots, here’s a cool example by IBM of a content style guide specifically for chatbots.

One last note about voice and tone. It’s helpful to make a distinction between the two with voice being the general style and permanent characteristics and tone being how those characteristics manifest in different scenarios.

For example, a product might have a voice that is funny and light-hearted, but when that voice is in a serious situation, it can still be clear and to the point. Think about the Robin Williams’ genie from Aladdin—whimsical and witty, but still sounds like Genie even when he’s serious or sad.

3. Do’s and Don’ts

Part of having a style guide is having a clear set of rules. This means that, when creating a content style guide, you need to know what your product is and what it isn’t.

Any time you give an example of grammar, vocabulary, naming conventions, or even documentation. Don’t forget to add do’s and don’t. Bobby will be forever grateful.

4. Accessibility

Unfortunately, accessibility is an issue that many companies are still not taking seriously. It’s almost 2020 and a blind man still can’t order Domino’s Pizza, which is sad and unnecessary.

Even though regulators tried to do something about it, not enough attention is given to this topic. This means that writers have an opportunity to take leadership in this area. They can be eyes for the blind and guide them through the platform using content and text.

So, in order to create a consistent experience that is accessible to all, accessibility practices should be documented in the content style guide as well. For example, you can decide that transcripts will be created for all videos using a tool such as REV.

The coolest project I’ve seen about content accessibility guidelines is by Content Design London. It’s an open-source project that helps everyone to create accessibility and readability rulesets. It’s well worth a read.

Now It’s Your Turn

The first step you need to do before creating a content style guide, would be to join the UX Writing Hub’s free UX Writing course if you want to learn more about the role of the UX writer as a product designer.
Now, let’s say that day has come and you’re ready to start on your very own content style guide. Remember:

First, find the common ground between the content elements of your product. Then, write a brief preamble where you state the goals and purpose of the guide. Next, define the voice and tone, create a ruleset of the do’s and don’ts, and don’t forget to make it accessible.

At first, it may be difficult to find all of the right pieces, but once you get the hang of it, it’ll be easy as legos.

The post Everything you need to know about content styleguides appeared first on Studio by UXPin.

Adaptive breakpoints

Advanced Animations

Commenting

Dashboard

Documentation, editing

Documentation, viewing

Editor, customizing panels

Editor, customizing UI

Editor, options bar

Editor, toolbar

Elements, groups

Elements, layers

Elements, searching

Elements

Export, plugins

Exports, plugins

Image browser

Import images

Interaction triggers

Interactions, common

Interactions, motion types

Interactions

Iterations

Layout grid

Multistate elements, creating

Multistate elements, editing

Multistate elements, interactions

Pages, linking

Previewing

Project folders, activity

Project folders, testing

Project folders

Projects, sharing

Prototypes, creating

Prototypes, exporting

Prototypes, sharing

Prototypes

Sitemap, hierarchy

Sitemap, page options

Sitemap

Spec mode, editing

Spec mode, viewing

Team members, adding

Team members, adding

Team members, managing

Team roles

Team-level features

Toolbar

Tour of the Interface

Get a free trial

Ask a question

The post User Guide Index appeared first on Studio by UXPin.

In web dev terms this is analogous to a server-side include. In design terms this is a time-saver.

Consider website footers. When building with a multi-page website whose pages end with the same content, building one as a smart element keeps you from having to rebuild it each time — and change each copy every time the footer changes.

Creating smart elements

Building your own smart elements is straightforward: select one or more elements you want to use many places in your project, then right-click and select “Create Smart Element.” Alternatively you can type opt/alt-S, or click the “convert to Smart Element” icon in the upper right corner of the editor.

Once created, the smart element will appear in the Smart Elements panel on the left side of the editor. From here you can drag as many copies as necessary into your project.

Editing smart elements

Change one, change them all. This is the promise that smart elements bring, and doing so is easy: edit one instance, and the other instances of that smart element will follow suit.

Double-click any smart element to enter “edit” mode, indicated by a blue bar at the top of the editor. Make any changes you please, add or remove items, and tweak interactions within the SE. Then click “back to prototype” at the top of the editor, and you’re done. Every copy of the smart elements will change automatically.

You can also rename, edit and delete smart elements by hovering over their thumbnail to reveal more options.

Smart elements and interactions

Any item inside a smart element can contain interactions — as can the smart element itself. This is a great way to make slight variations in how copies of the same smart element behave. For example, you can use this to make a standard call to action whose link changes depending which page it’s on. Likewise, on a sales page with many products, the same “buy now” button can take users to different product detail pages.

To make an instance of a smart element interactive, click on it like you would any other element or group, then select “new interaction” from the right-hand panel.

Managing smart elements

Smart elements get their own panel on the left side of the editor. Open the “Libraries” panel to find it.

They’re organized into account elements (those available in every project) and project elements (only usable in the current prototype).

Like other elements, click and drag a smart element into your canvas to use it in your project.

The post User Guides: Smart Elements | UXPin appeared first on Studio by UXPin.

Creating a MSE makes copies of the selected elements. You can move, resize, recolor, or otherwise change the copies per state. For example, two configurations — states — may each show a different icon. Clicking the element could flip between the states.

Creating MSEs

To create a MSE, select one or more items and add a new state in the right side of the editor.

By default, everything has a first state. It’s adding a second state that creates the MSE.

Editing MSEs

Upon creating a MSE, double-clicking it will enter “edit” mode. You know you’re there when you see a purple drop-down menu at the top of the Editor that lets you view different states.

It’s important to note that elements in different states are copies of the original items you selected for the MSE, which means you can edit their properties freely per state. When viewing a particular state, you can move elements within that state, change their styles like color and opacity, hide them altogether, or give them interactions. To leave “edit” mode, click outside of the MSE — either on another element or the canvas.

Interactions: Next, Previous & Set State

By themselves, MSEs don’t do anything. They need an interaction to make them change states. You have three actions available: Next, Previous and Set State. “Next” advances the currently visible state, much like advancing a slide in a presentation. When a MSE reaches the last state, and an interaction says “next,” then the MSE will show its first state. Thus a MSE with only two states will toggle between them with a “next” action.“Previous” does the opposite of Next, moving the MSE one step back through its states. “Set State” will let you specify which step the MSE will show.

For example, if a MSE have four states — say, “Favorite,” “Unfavorite,” “Default,” and “Disabled” — a button could have the MSE reveal the “Disabled” state, even if it was previously “Unfavorite.” Any trigger, like click (tap) or hover, can activate an action.

The difference between MSEs and simply showing or hiding elements with basic interactions is that MSEs can animate between states. Specifically, they can fade, spin, or slide from the top, left, right, or bottom.

Practical Examples

What are MSEs best at? Anything that requires sets of elements to change on demand.

• Toggling icons, as seen above
• Modal windows that appear or disappear
• Revealing more information about an item
• Showing groups, like optional form elements, on demand
• Image carousels
• Changing text in buttons on click or hover

Related resources

• Article: UX Best Practices: Designing the Overlooked Empty States
• Tutorial: Making Sortable Table Rows
• Tutorial: Don’t Settle for Default Radio Buttons
• Get a free trial

Ask a question

The post Multistate Elements appeared first on Studio by UXPin.

UXPin lets you import Sketch and Photoshop files with free plugins for each app. Doing so lets you make prototypes that demonstrate not just how an app should work, but also how it should feel.

Getting the plugins

Look at the bottom left corner of the dashboard for a link to get the plugins, or under your profile icon in the upper right corner.

Double-clicking either plugin on a Mac will install it into the appropriate program.

On Windows, the plugin supports Photoshop CC 2014 and later. Once you unzip the downloaded file, copy the ‘UXPinExport’ folder into “Plug-ins/Generator/” in your Photoshop folder. Then restart Photoshop.

Using the plugins

Mac or Windows, when you open your design in Photoshop, the export option will be available under the “File > Generate” menu. In Sketch, look for “Export to UXPin” under the Plugins menu. Once you do, you’ll obtain a *.uxpin file which you can upload to any UXPin project folder.

You can then add interactions to any raster layer. At the time of this writing, text imported from Photoshop and Sketch are not editable, so plan accordingly.

Adding images

If you’d rather import assets into existing prototypes, then you can import files from your computer. Importing image files into UXPin is a matter of dragging and dropping the file from your computer to the canvas. Each image appears as its own layer, and you can import several at once.

UXPin supports JPGs, PNGs, GIFs (animated or not), and SVGs.

The image browser

UXPin remembers recent images you added to UXPin in any project, making them easy to access for all of your prototypes in a given project. Look in the left-hand panel for “Images” to see your recently imported files.

Importing from Sketch

The Sketch plugin lets you create projects from artboards that you can update later. Upon changing and re-exporting an artboard to UXPin, the changes will take effect. Except for elements you delete in Sketch, UXPin retains interactions imported from the popular illustration app.

After installing the plugin, select an artboard and go to Plugins > UXPin > Export selected artboards. From there you can choose a project folder and either add the artboard to an existing project, or create a new project.

Related resources

• Article: How to Use Sketch: 10 Shortcuts for UI Design
• Article: Top 10 Photoshop Shortcuts for UI Designers
• Download: Get 80 free handcrafted icons
• Get a free trial

Ask a question

The post Importing Assets appeared first on Studio by UXPin.

Basic interactions let you show, hide, move, and manipulate other elements on a page. They differ from advanced animations in that each action affects only one other element (or link) in one step. If you need a quick effect, basic interactions are the way to go.

Every interaction has at least three parts.

• Action: the change that occurs
• Element: which item on the canvas is acted upon
• Trigger: what the user does to kick off the interaction

A few others, like “set step,” “toggle,” and “move to”, have additional options like step, animation type, and distance, respectively.

From buttons to boxes to images to groups, you can make any element in UXPin interactive. And any element can have more than one interaction. For example, a button can change color on hover, and take users to another page on click. A few simple interactions can make most any element change basic properties to give the user more information, as when a button darkens on hover to indicate that it’s clickable.

Actions

When users trigger an interaction, an action affects one or more elements on the canvas. For example, on hover (the trigger), a button may turn brighter (a color action).

The actions are:

• Show, Hide, and Toggle
• Go to page and Go to URL
• Scroll to element
• Move to and move by
• Opacity and Color
• Size and Rotate
• Advanced animation
• Bring to front
• Send to back
• Set state
• Previous and Next state
• Disable and enable form elements
• Check and uncheck form elements
• Focus on a form field

Element

The element is an item that changes when actions are triggered. Although any element or group can take an action, different kinds of elements can accept different actions. For example, an interaction can change a box’s color, but not a group’s. By the same token, the “next state” action only affects multistate elements. Learn more about special element interactions.

Triggers

When the user interacts with an element, they cause an action to begin. These are standard interactions, like clicking or hovering, that are common to human/computer interfaces. The triggers in UXPin are:

• Click (tap)
• Double click (double tap)
• Right click
• Hover
• Mouse in and out
• Swipe up, down, left, and right
• Touch and hold
• Hold release
• On focus
• On blur

Common Actions

Simple interactions can make a big difference in how users react to interfaces. And there are plenty you can do with them. For example:

• Make a button change on hover to indicate that it’s clickable.
• Make a search box appear on demand.
• Send users to a real landing page when they fill out a simulated form.
• Make a modal window group appear when users click a login button.
• Take users to the top of a scrolling view on click.
• Reveal text information when users hover over an image thumbnail.
• Make a drop-down menu appear when users’ cursors enter a tab.
• Take users to a new page or view when they double-click an app icon.
• Hide unnecessary form fields is users click a certain radio button.

Related resources

• Article: Interaction Design Trends: 11 Microinteractions Deconstructed
• Article: An Introduction to Interactions With Material Design
• Tutorial: How to Make Expanding Buttons in UXPin
• Tutorial: Hide the Right Functions With Custom Drop-down Lists
• Ebook: The Practical Handbook to Rapid Lo-Fi Prototyping
• Get a free trial

Ask a question

The post Basic Interactions appeared first on Studio by UXPin.

Managing pages in the sitemap

Pages can be created, nested, duplicated, and renamed in the Sitemap, a menu that contains a hierarchy of pages/views. You’ll find the Sitemap in the upper left corner of the editor.

To create a new page, click “new page” in the Sitemap. UXPin will immediately prompt you to give the page a name, then add the new page to the end of the Sitemap.

Page options: renaming, duplicating and deleting

Common functions appear when you hover over each page, turning it blue, in the Sitemap. You can rename a page by clicking its pencil icon, duplicate it by clicking the double-page icon, and permanently remove it by clicking the trashcan icon.

Build a hierarchy of nested pages

To keep your pages organized, you can drag and drop them into a hierarchy or logical structure for your reference. Push a page one level below another by dragging it into another page’s name. Remove a sub-page from its parent by dragging it out.

Hierarchies do not affect links between pages, so you can rearrange pages at any time for your reference.

Linking pages

Any element in UXPin can become a clickable link to other pages. To make one so, click an element, and add a new interaction — the “lightning bolt” tab in the right-hand panel. Links are the default interactive type. Next, choose a page, then click “add,” and you’re done.

Copy/paste between pages

If you need to transfer certain elements from one page to another, you can do the obvious: copy them from one source and paste them in another.

Select the elements you want to copy, type cmd-C (Mac) or ctrl-C (Windows). Then choose another page and type cmd-V (Mac) or ctrl-V (Windows) to create the copy.

Of course, you can also use symbols to re-purpose elements for consistency’s sake.

Adaptive breakpoints

To practice responsive web design, each page can have a series of breakpoints in which you can change the page’s layout for differently-sized devices.

Creating a new adaptive version will give each page its own new version — there’s no need to add, say, a wide website view for each page manually. And they’re not necessarily fixed. If you want to adjust a breakpoint after creating it, then edit “Canvas Properties” on the right when no elements are selected.

References

• Article: People Will Forge Their Own User Flows — and Design Should Follow Suit
• Get a free trial

Ask a question

The post Pages, Views and Navigation appeared first on Studio by UXPin.

Preview mode lets you — or anyone — test your prototype and its interactions, including links between pages or views. They can also leave comments on specific points of the design, reply to comments, and mark them as completed tasks.

Switch from the editor to preview by clicking the appropriate button at the top of the editor. You’ll get a new tab that lets you access comments, interactions, documentation, and spec mode.

Many options fill the top-most bar, including the ability to switch between breakpoints; zoom in and out; reveal elements with interactions; and switch between the various preview modes (comment, simulate, spec, and documentation). An orange dot next to “documentation” indicates that it does, in fact, have notes to read.

“Other options” includes:

• Return to the editor (if you have permission)
• Return to your dashboard
• Start a live presentation
• Log out

Commenting

Anyone with the URL to a prototype’s live preview can add comments — even if they don’t have a UXPin account. That makes preview mode ideal for working with stakeholders who don’t need to design themselves, like outside clients.

To add comments, click to comment mode at the top of the preview window. The prototype will gain a pulsing grey border. Next, click anywhere in the canvas to add a comment at that point. You can choose to notify people assigned to the prototype, assign them to people as a to-do item, or simply leave a note for your team to review at their leisure. Deadlines permitting, of course.

Red (public) or purple (team only) dots denote comments that you can click to view. Clicking one not only reveals the comment, but also the option to mark it as completed.

Viewing specifications

Spec mode lets you get specific information about elements in your design. Redlining shows you the space between disparate elements, as well as the canvas, as you hover over them. You can also click on elements to get distances between them and their neighbors. Clicking on elements with attached code snippets, which designers can add in the editor, reveals a “specification” tab on the right. Click that tab to see its ideal code in HTML, CSS, JavaScript, or other programming language. Spec mode doesn’t write code on your behalf, enabling you to keep your own codebase and writing style intact.

Viewing documentation

Documentation allows you to share best use case information per element with your team. To see elements’ notes, click “documentation” at the top of the preview window. Selecting an orange dot in the right column will indicate to which element it refers by turning blue. On the other hand, clicking an element in the canvas will indicate to which comment it refers.

Documentation supports Markdown-like note. You can create headers, or make text bold or italic, by highlighting it to reveal the options. Type shift-return to add a new line within the same comment; type return by itself to create a new note.

Sharing

At the top right of the editor you’ll find the Share icon. This button brings up the appropriately-named Sharing panel which, as you might expect, provides different ways to send the prototype to your team for review.

The Sharing panel gives you the project’s live URL to copy into your medium of choice, like Slack or other instant message service. You can also email the URL to anyone or, in the case of testing mobile app prototypes, send the URL as a SMS code. Anyone with the URL can view and interact with the prototype, even if they don’t have a UXPin account.

Exporting

The Sharing panel includes an Export tab that lets you save a prototype for offline viewing as interactive HTML, a PDF, or a series of PNGs.

Related resources

• Article: Practical Collaboration: Tackling UX Feedback With Developers & Users
• Tutorial: Tips on Asking for Feedback in UXPin
• Tutorial: How to Use Prototypes to Inspire the Right Feedback
• Tutorial: How to Write Killer Copy That Improves Your Design Systems
• Ebook: The Guide to Prototyping Process & Fidelity
• Get a free trial

Ask a question

The post Previewing and Collaborating appeared first on Studio by UXPin.

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.

Customize the interface to your liking

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

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.

Searching for elements

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.

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.

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.

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.

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 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.

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.

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

Related resources

• Tutorial: How to Make Expanding Buttons in UXPin
• Tutorial: How to Make a Select List Interactive in UXPin
• Tutorial: Hide the Right Functions With Custom Drop-down Lists
  
• Ebook: The Guide to Interactive Wireframing
• Article: Beware Sloppy Shortcuts — Use Design Systems to Keep Code on Track
• Get a free trial

Ask a question

The post The Editor appeared first on Studio by UXPin.

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.

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.

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.

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.

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.

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.

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.

References

• Article: Project Managers: How to Get the Best From Your Designers
• Guide: Teams and user management
• Ebook: The Project Guide to Enterprise Product Design
• Get a free trial

Ask a question

The post The Dashboard appeared first on Studio by UXPin.

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.

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.

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

• Article: 5 Simple Questions Teams Must Ask Before Product Planning
• Ebook: Design Collaboration for Product Teams
• Guide: The dashboard
• Get a free trial

Ask a question

The post Teams and User Management appeared first on Studio by UXPin.

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.

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.

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.

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.

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.

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.

Resources

• Article: Pre-built elements
• Ebook: The Guide to Mockups
• Get a free trial

Ask a question

The post Working with Elements appeared first on Studio by UXPin.

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

• Article: Take Advantage of Complex, Pre-built Elements in Design Systems
• Ebook: The Practical Interaction Design Bundle in Three Ebooks
• Tutorial: How to Make a Select List Interactive in UXPin
• Get a free trial

Ask a question

The post Customizable elements appeared first on Studio by UXPin.

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.

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.

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.

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.”

Coupled with fills and interactions, you can create give users some useful 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.

The post The Box Element appeared first on Studio by UXPin.