Skip to content

How We Use Adobe Cloud Libraries in UX and UI Prototypes

At Artbees, we use Adobe Cloud libraries in UI and UX prototyping. It’s a design-collaborative tool that helps our team come up with a dynamic app or website mockup. In this blog post, we’ll talk about how our team utilizes creative cloud libraries in our UX and UI prototypes.

Why UI and UX Prototypes?

Before jumping into Photoshop or Sketch to design a user interface for a new project, we usually discuss it with our team first. Different people might be involved, from CEO to support reps, who may comment and provide significant feedback about the project.

So, our designers need to show them what they have in mind, either on a piece of paper or a prototyping tool. We pivot, learn and improve until a final draft or UI mockup is agreed upon. Every member of the team also uses this prototype as a guide to develop a product or feature.

Problems with Prototype Wireframes: Hard to Maintain

A prototype is meant for constant changes and improvements.

Let’s say we have 20+ pages of UI prototypes for a web application project. Each might have some common elements such as header, navbar, sidebar or other UI components. Now, if somewhere along the way, we decide to change one of those component dgnesis, then we have to update all other pages as well.

[call_to_action title=”Give your work a boost with a huge library of design elements from our partner GraphicRiver.” target=”_blank” url=”https://1.envato.market/c/1239055/275988/4415?u=https%3A%2F%2Fgraphicriver.net%2F” type=”link”]

That’s not easy at all. Given the fact that this process could be repeated again and again, there seems to be a problem.

Solution: Live Templates and Reusable Elements

Essentially, the problem is not new. Neither is the solution.

If we could ever manage to have some sort of reusable elements that are all linked to an original file, then we would be able to change our prototypes as much as we want. Since elements are derived from an original file, any change made to that file will affect its instances. This way, all documents are always up to date.

 

Changing an element will affect other documents and this saves a lot of time for maintenance.

 

Choosing the Right Wireframe Tool

Almost all of famous prototyping or wireframe tools such as invision, Zeplin, and more, have live templates and reusable elements as native features. These tools also offer more features like interactions.

But, if your team is like ours and you prefer to create prototypes right from where you usually design stuff and do not want to deal with exporting or third-party syncing, then here’s some good news for you.    

Adobe Cloud libraries can help you do this! If you’re an Adobe Creative Cloud user, then you may have come across a panel called “Libraries”, a collection of graphic assets and colors you can use across your documents.

 

 

It’s sitting on the cloud, too, which means that you can access it from any computer or location, and all changes will automatically be reflected. That’s where magic happens. Your colleagues will instantly see whatever changes or additions you make, so project collaboration is easier and smoother.

How We Use Adobe Cloud Libraries as Design Language

We look at such shared libraries as an opportunity to stay connected — a visual language that anyone in the team can speak.

Here is how we do it at Artbees:

  • A Designer designs basic components and puts them into a shared library. 

 

Selecting an element and dragging it to a cloud library is as easy as it sounds.

 

  • Then, more people start working with those components to create different sections, pages or states of a prototype.
  • Gradually, more elements and sections — those that should be repeated across the project — are added to the library
  • Soon, we have a set of prototypes that are dynamically linked to each other.
  • Once an asset is modified by one of the designers, it will then be updated across all instances, so everyone sees the latest version.

For example, we are planning to work on multiple prototypes of an admin panel for a sale reporting app. Although the content is rather different, at least two sections – header and sidebar – repeat in every page.

 

Instances of an element are linked to each other. They all change if one of them changes.

 

Moreover, each UI control element, such as text inputs, buttons, switches, etc. are commonly used across the software. We started the whole project in a Photoshop-shared library as our centralised UI kit.

At Artbees, we use three types of assets in a library:

 

  • User Interface Controls and Components

UI controls and components can be anything from input fields to widget. These elements help build a page, so it’s common for us to change them several times during the project lifetime. They are all shared among the team and of course, are always up-to-date.

 

From drop down menus to radio buttons are saved in a cloud library.

 

  • Main User interface

The main UI refers to the basic software skeleton — headers, navbars, sidebars, and more. This does not change much, but when it does, it’s immediately available for anyone in the team.

 

It does not have to be only UI controls. Sometimes a whole document can be exported to a cloud library and placed in different documents.

 

  • Colors

Adobe Cloud Libraries include a useful guide to color samples we have used throughout the software. Although designers use these to instantly apply colors to elements, it’s also helpful when our developers start working on styles. They won’t need a color picker or extra documentation from designers.

That is how we do UX and UI prototyping at Artbees! Most importantly, it’s how we stay connected through design languages. Every project has its own library and therefore a particular design language. After adopting this workflow, we saved lots of hours and achieved drastically more flawless prototypes. Because of Adobe Cloud Libraries, nobody is afraid of changes anymore!

 

Disclaimer: This is not a sponsored post. Adobe Creative Cloud in no way paid for this blog post to be created or published.

Create Your
Dream Website with

Stay in the Loop

Sign up for our newsletter and stay up-to-date on the
latest WordPress trends, insights, and resources.

By entering your email, you agree to our Privacy policy and Terms of Services.

Share

Roozbeh Firoozmand

Roozbeh Firoozmand

Rouzbeh is Co-Founder and CEO at Artbees, where premium WordPress themes are crafted. Before starting Artbees, Rouzbeh worked with numerous clients and companies as a graphic and web designer. Rouzbeh is a non-stop illustrator, coffee and Buddha enthusiast too.

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *

×
Black Friday WordPress Deals - Artbees

Enjoy 50% OFF Artbees products, and partner deals!

– Extended! –

???? Days Remaining