Category: axure Rp

Axure RP – Widget Library ”; Previous Next Now that you are well-versed with different interactions and events that are possible in Axure, you may want to extend your work in order to minimize efforts in future. For instance, the very first example with Classic Menu – Horizontal, was once present in Axure versions as a combination of different available widgets. This means, Axure evolved with time to accommodate frequently used widgets in the form of single widget library. The concept of widget library is applicable more prominently in large UX teams. Some organizations keep approved widgets for subsequent UX engineers on a central repository. Thus, in a nutshell, Axure Widget Library is a collection of custom widgets stored in a single file. The file type for Axure Widget Library is RPLIB. Types of Widget Libraries Axure Built-in Libraries These libraries are accessible from Libraries pane. These libraries can’t be updated/removed. For most of the complex prototyping needs, Axure built-in libraries come to rescue. The library consists of 17 unique flow widgets, which are used primarily for diagram creation. Also, there are 25 widgets in the wireframe library. A brief functioning of libraries is present in Chapter 3 − User Interface. Axure Custom Libraries Axure community, growing day-by-day in size, has a vast collection of user-created libraries. You can visit them at − https://www.axure.com/support/download-widget-libraries. The UX professionals from all around the world, who are committed to make this community grow, submit their work on the above link. You can download the libraries from the website and add them to Axure using Load Library option under libraries. Also, you can directly download libraries from the application interface itself. As shown in the above screen, we have a context menu, where you can download different libraries as offered on https://www.axure.com/support/download-widget-libraries. You can also create your own library, which will be handy while creating repetitive controls for a given prototype. The complete instructions to download/load libraries is available at: https://www.axure.com/support/reference/widget-libraries. When it comes to using a custom widget from one of your loaded libraries, drag and drop it in the design area similar to the built-in widgets. If the widget includes variables or a custom style, the Import Wizard dialog would flag such dependencies. Among such dependencies, you may notice there are certain incompatible styles that come along with the widget library being imported. You may choose to Cancel and import only the widgets or click the Finish button to import the entire package. Once you drag and drop a widget into your wireframe, that particular instance is no longer associated with its original widget library. Thus, edits and changes made to widgets in the imported widget library are not applied to any of the instances of these widgets in your project file, even after you refresh the library. Rest assured, once imported, you can utilize the widgets in the imported library without worrying about the updates that take place in the same widget library as available online. Using RPLIB Using an Axure RP Library file is pretty straightforward. When you download a library, the icon for library file (.rplib) is clearly distinguished from the Axure RP prototype file (.rp). For instance, as seen in the following screenshot. The mechanism for this to work – You can import the iOS Wireframe document in iOS Wireframe Demo. This library can be used for multiple projects and updates in the library file will be available once you Refresh the library from the context menu. As highlighted earlier, this comes very handy when working on a team project and distributing the libraries in this fashion. Print Page Previous Next Advertisements ”;

Axure RP – Advanced Interactions ”; Previous Next Until now, we have got ourselves introduced to the basic features of Axure for interactions. However, there will be many real-world scenarios, where the prototype will have to be intelligent. By the word intelligent, the prototype will need to detect the state of a certain widget in order to perform an action/trigger a certain behavior. A typical example of such an interaction is setting the color of a button. This requires UX engineer to wear the thinking hat and take the prototype designing to the next level. Using Variables in Axure Variable, by definition, stands for a factor that is liable to vary or change. In Axure, we can use variables to represent or identify the state of a widget/interaction. A typical example will be storing a data value when transferring data from one page to the other. To keep the example simple and clear, let us consider a scenario where we need to show the state of a particular widget. Continuing with our last example, let us consider that we want to show how many times the image was shown. Here is how we will do it − We will create a variable for initiating the count to 0. On the click of the button Show Image, we will increment the value of this variable. Display the value in the text label. For this example, we will be creating a text below the Dynamic Panel. The text will read – Image is shown 0 times. Critical − It is important that the labels are broken into three. Please follow the label names and text listed in the table. Label Name Label Text imageLabel Image is shown countLabel 0 (zero in digits) timesLabel Times This is required as we want to control the countLabel value for every Show Image button click. Let us define a variable first. We will need a variable, which will be controlled when the button is clicked. This variable in Axure’s terminology is − Global Variable. To define a global variable, click Project in the menu bar, and then click Global Variables. A dialog box will open as shown in the following screenshot. Click the green plus (+) icon to add a global variable. Let us call our global variable − varDynamicPanel. Its default value will be 0. With the Show Image button interactions, double-click on Case 1. Add another action. As shown in the following screenshot, the action is Set Text on countLabel to [[varDynamicPanel + 1]]. Selecting a text label to a value is pretty straightforward. Let us see how to get the value from a dynamic panel. As indicated by step 4 in the above screenshot, click fx button and the following dialog box will open up. Under the first text area, enter the following string. [[varDynamicPanel + 1]] Click OK. Now, we need to ensure that the variable is updated after every button click. In the case editor dialog box, under actions, select Variables → Set Variable Value. Select the varDynamicPanel as the variable. Set the variable to fetch value from the text on widget as countLabel from the available options. Close the Case Editor by clicking OK. Then, click Preview button. After showing/hiding image for four times, here is the result on the preview screen. Print Page Previous Next Advertisements ”;

Axure RP Tutorial PDF Version Quick Guide Resources Job Search Discussion This tutorial aims to provide a brief introduction to Axure RP Pro, one of the leading prototyping tools in the User Experience (UX) industry. With ample examples to work with, you will get acquainted with Axure terminologies as well as unique ways to make the interactions work for you and your team(s). Audience Target audience for this tutorial are UX enthusiasts who want to understand what it takes to build a prototype and how Axure RP, as a tool can be used effectively. This tutorial is also a good refresher for UX practitioners to know the recent updates in Axure RP 8. Prerequisites The tutorial assumes preliminary knowledge of User Interface (UI), User Experience (UX) and the background of creating simple algorithms/procedural steps. Introductory knowledge of frontend designing is a plus. Print Page Previous Next Advertisements ”;

Axure RP – Basic Interactions ”; Previous Next This chapter will take you through the basic interactions set provided by Axure when designing a screen. The purpose of Axure RP is to allow interactive prototypes. Now, when it comes to making the interactive prototypes, there is always a caveat of creating an overly interactive prototype. This is the reason why, it makes sense to start with single important interactions at a time, in order to sprint through the rest of the available pages. Axure Interactions Interactions is the term coined for the functional elements that transform a static wireframe into a clickable interactive prototype. To make it a simple approach towards interactions, Axure eliminates the need to code the prototype by providing an interface for defining structures and logics. While generating HTML prototype, Axure RP converts the interactions into the real code (HTML, CSS and JavaScript). This acts as a catalyst to show the intended design and interactions on the page. Typically, the interactions will begin with When the interaction is happening. For instance, when the page is loaded in the browser, when the user clicks on one of the elements, etc. Then comes the question, Where on the screen the interaction is taking place. It can be a simple screen element such as a rectangle, which we want to turn into a clickable button for the purpose of a menu (example shown later). Finally, there is the description of What is happening in the interaction. Let us consider the page loading when the browser loads the page; you can simply select a particular slideshow to begin or have an image grow bigger when entered on the screen. Axure Events The events in Axure can be of two types, triggered by two types of events. Page and Master Level Events When a page loads, there is a plethora of events happening to fetch the design information, content, and hence, the alignment of every single element on the screen. As these events take place during the initial page load, you can consider that these events will be repetitive on every page load. Following are some examples of Page and Master Level Events. OnPageLoad OnWindowResize OnMouseMove OnAdaptiveViewChange Object or Widget Level Events Let us consider, we have created a page and a particular button widget on the page. Now, for interacting with this button widget, maybe by touch (on mobile prototype) or a mouse click. Following are some examples of Object or Widget Level Events. OnClick OnMouseEnter OnDrag OnDrop OnMouseHover Cases As discussed in the previous chapter, in the page properties section, a particular widget interaction can be designed. These are called cases. A particular interaction can be a constitution of multiple cases. Let us consider an example, to understand this better. Example: Axure Prototype – Show Menu on Mouse Hover To start with this example, create a new file by clicking New under File Menu or using the shortcut key Ctrl + N. In this example, we are going to design the simple Menu Bar as seen in most of the software products. The menu structure will have the following menu elements and the submenu under each of them. File New Open Save Close Edit Cut Copy Paste Find Replace View Show Status Bar Toolbars Main Toolbar Styling Toolbar Help Getting Started Using Help What’s this To get started, drag and drop Classic Menu – Horizontal in the design area. You will find it under Libraries → Menus and Tables. Name the control as MenuBarExample. Let us make this element of width 300 px and height 30 px. Position it at 100 on X-axis and at 30 on Y-axis. You can adjust these values under the Style tab under Inspector section on the right. At the end of the above procedure, you will be able to see the end result as shown in the following screenshot. Let us add the names to the menu titles in the Inspector section as well. Click each menu title and observe the inspector section. If the name is not given to the specific menu bar, the name will turn as (Menu Item Name). Name the File menu as FileMenu. Same goes for Edit as EditMenu and View as ViewMenu. To confirm whether the names have been provided, click each individual menu and confirm under Inspector: Menu Item. You will be able to see the names and not (Menu Item Name). Now, as per our requirement, let us complete the menu bar with the Help menu. Right-click the menu bar title – View, you will see a context menu. Click Add Menu Item After. A blank menu item will appear. Double-click the blank menu item, and enter menu title as Help. Repeat the procedure, providing it a name under Inspector: Menu Item Name. Once complete, you will see the design area as follows. Next, let us design the interaction for File Menu. Click the File menu bar title and observe the Inspector: Menu Item. As highlighted in the screenshot above, observe the Properties tab. Under Properties tab, we will create the interaction for File Menu. It is very simple to add a submenu to the menu. Right-click on File menu, in the context menu that appears, click Add Submenu. Note − We can also remove the submenu by repeating the same step, and clicking Remove Submenu. Once the submenu has been added, a blank sub-menu will appear. Double-click each of the menu items and provide names such as – New, Open, Save. Right-click on the last submenu item and add one more submenu item. Name it as Close. It is a good practice to name all the submenu items under the Inspector section as well. This helps referencing them in your overall design process. While designing this part, notice that whenever we click any other part of the design area, the submenu will disappear. We need to click the File menu item to view the submenu. Let us talk about the interaction

Axure RP – Useful Resources ”; Previous Next The following resources contain additional information on Axure RP. Please use them to get more in-depth knowledge on this. Useful Links on Axure RP Axure RP Wiki − Wikipedia Reference for Axure RP Axure RP Official Site − Official Site for Axure RP Useful Books on Axure RP To enlist your site on this page, please drop an email to [email protected] Print Page Previous Next Advertisements ”;

Axure RP – Using Masters & Dynamic Panels ”; Previous Next Many of the software development approaches, when it comes to user interfaces development, employ a common technique − Creating Masters. A master is a reusable wireframe, which will be created once and used extensively thereafter on the subsequent pages. With Axure RP, when we create a master page, the changes made to this page will be applied to the pages where it is being used. Hence, it reduces time to a great extent for the components common to all pages. To get started with Masters, you can focus on the Masters section (marked as 5) as highlighted in the following screenshot. Use this masters section to − Organize the prototype’s masters by adding, deleting, or editing master page/folder. Select a particular master for editing. Dynamic Panels In Axure RP, as we have seen in the previous chapter, there are different states associated with a given widget. For consolidating/organizing the states of a particular widget or set of widgets, we need a container/placeholder. Dynamic panels serve as the container/placeholder for the states of a widget. Let us understand the dynamic panel better using an example. We will continue from our menu bar example. The addition in this example will be an image area and a button underneath the menu bar. Use the widget Placeholder for the image area and button under common widgets. Name the placeholder as ImageAreaPlaceholder, button as showImageButton. Also, let us have the menu bar added into masters. Right-click on the menu bar and click Convert to Master. A dialog box will appear prompting the name for the master. Add the name as menuBarMaster. As shown in the above screenshot, the menu bar turns pink and the entry for the masters has been added. Now, let us create a dynamic panel. The context for dynamic panel is, you want to control the visibility of image area based on Show Image button click. Having a dynamic panel will allow for the flexibility of image area. Let us see how to create the dynamic panel. Right-click on the Image Area, the context menu will appear, select Convert to Dynamic Panel. The dynamic panel will be under Outline: Page. Also under Inspector, it shows the dynamic panel. Name the dynamic panel as showImageDynamicPanel. The name for this dynamic panel will get updated under Outline: Page section. In the design area, right-click on Show Image dynamic panel to see the context menu. Select Set Hidden, the dynamic panel will disappear from the screen. The dynamic panel can be accessed by double-clicking under Outline: Page. Now, let us provide a click event to the button. Click the Show Image button, under Inspector → Properties, double-click OnClick interaction. As shown in the above screenshot, click the Show/Hide under Widgets. It will automatically show the available widgets to configure actions. Check select showImageDynamicPanel. Click OK. Now, click Preview. On the preview screen, click Show Image. Another interaction for a button is finally created. Print Page Previous Next Advertisements ”;

Discuss Axure RP ”; Previous Next This tutorial aims to provide a brief introduction to Axure RP Pro, one of the leading prototyping tools in the User Experience (UX) industry. With ample examples to work with, you will get acquainted with Axure terminologies as well as unique ways to make the interactions work for you and your team(s). Print Page Previous Next Advertisements ”;

Axure RP – Introduction ”; Previous Next For the UX engineers, the process of understanding their user base is not just limited to getting the inputs from the customer or the related conversations. There are some interesting steps that they need to take to understand what a user wants. The real work starts when they are somewhat clear about what the user might be expecting out of the software product. Once some data is available about how the user is perceiving the upcoming software or an enhancement in the existing software, the UX engineer comes back to its den to design the user interface for them. Traditionally or as a common approach, when someone says design, it means software such as Adobe Photoshop, CorelDraw, or even Microsoft Paint. At times, to get back to the users real quick, UX designers make use of good old pen and paper to design interfaces. However, for UX designer, providing the quality in designing the User Interface means more than just showing an awesome design. User Experience consists of not only how the user sees the interface but also how the user interacts with it. The software tools mentioned above and the likes in the market come with their own feature sets. It is indeed a tedious task for the UX engineer to choose the appropriate software which will enable − brainstorming, designing, and getting feedback. Enter Axure, the currently trending software to design beautiful user interfaces and interactions. Axure has been around since close to a decade to allow UX engineers to get to the details of creating a software prototype with ease. Axure, along with being the prototyping tool, has a powerful community contributing to the UX world with many examples and skillful interactions. At a higher level, following are the features offered by Axure − Diagramming and Documentation Effective prototyping with Dynamic Content Conditional Flows Beautiful animations to enhance the interactions Adaptive Views Support on Windows and Mac To explore the detailed feature list provided by Axure, please visit https://www.axure.com. For installation instructions, follow the link https://www.axure.com/download. For rapid prototyping, Axure RP provides a varied range of tools and techniques, which always help the Analysts/User Experience engineers to visualize the end goal. With a strong community always available to assist, Axure RP is becoming the preferred tool for UX enthusiasts and practitioners. Print Page Previous Next Advertisements ”;

Axure RP – Introduction to Prototyping ”; Previous Next The word prototyping is very common and relevant to folks in Software Development as well as Architectural development. When it comes to architectural development, in Egypt, there are prototypes of the Great Pyramids of Giza. These were constructed with (of course) a smaller version in order to take the agreement or approval from the ruler. This small but meaningful example precisely illustrates the purpose of a prototype. According to Wikipedia, a prototype is, “A first or preliminary version of a device or vehicle from which other forms are developed.” For the software development world, the definition can be adapted as, a preliminary version of a page, screen, or functionality, which supports the other development by visualizing the screen elements effectively and showcasing the interactions. This definition includes the most critical part, interaction. In software development, for developing a part of functionality or the complete functionality itself, a considerable investment is required in terms of time and efforts. It is an unending process of developing, validating and correcting issues as per the feedback from clients. Most of the software development companies want this process to be as quick as possible. Hence, they do not go ahead with effort and time investment from all the team members. Instead, they make a smart move of hiring a User Experience (UX) engineer, who has the skillset of visualizing a particular feature. This gets them on the driving seat when developing the product. In essence, prototyping is required to simulate and visualize the software requirement very early in the development. The process eventually becomes beneficial to both software development companies and the clients as it reduces the unknown in the feature, thereby providing a right direction to the development. Right Phase for Prototype Development In the current era of high profile software development, there have been many advances in the overall software development life cycle table. These advances are from the aspect of technologies as well as the role/position of a particular team member in the life cycle. One such position has started getting traction, which is called a UX engineer. A UX engineer is equipped with a skill set, which is beneficial for the customers. By using different techniques or steps to know the customer better, the UX engineer can get a good hold of what the user is expecting out of a given software product. Usually, when the requirement gathering process takes place, tech companies are now involving the UX engineers to go out in the market to understand what the user needs. With the latest trend of Responsive Web XDesign and Mobile-First Approach to software development, there can be a number of areas one wants to focus their attention on. A UX engineer employs processes such as User Interviews, Market Surveys to know the pulse of its intended audience. This process is time taking as well as important, as it gets the path clear for the software product to see its suitability in the market. These steps are employed when gathering the software requirements and eliciting them. It is an ideal phase, as it reduces the overall cost of development. However, when the software product is mature, one can introduce the UX research phase in order to gauge the viability of the enhancement being made. Print Page Previous Next Advertisements ”;

Axure RP – Quick Guide ”; Previous Next Axure RP – Introduction to Prototyping The word prototyping is very common and relevant to folks in Software Development as well as Architectural development. When it comes to architectural development, in Egypt, there are prototypes of the Great Pyramids of Giza. These were constructed with (of course) a smaller version in order to take the agreement or approval from the ruler. This small but meaningful example precisely illustrates the purpose of a prototype. According to Wikipedia, a prototype is, “A first or preliminary version of a device or vehicle from which other forms are developed.” For the software development world, the definition can be adapted as, a preliminary version of a page, screen, or functionality, which supports the other development by visualizing the screen elements effectively and showcasing the interactions. This definition includes the most critical part, interaction. In software development, for developing a part of functionality or the complete functionality itself, a considerable investment is required in terms of time and efforts. It is an unending process of developing, validating and correcting issues as per the feedback from clients. Most of the software development companies want this process to be as quick as possible. Hence, they do not go ahead with effort and time investment from all the team members. Instead, they make a smart move of hiring a User Experience (UX) engineer, who has the skillset of visualizing a particular feature. This gets them on the driving seat when developing the product. In essence, prototyping is required to simulate and visualize the software requirement very early in the development. The process eventually becomes beneficial to both software development companies and the clients as it reduces the unknown in the feature, thereby providing a right direction to the development. Right Phase for Prototype Development In the current era of high profile software development, there have been many advances in the overall software development life cycle table. These advances are from the aspect of technologies as well as the role/position of a particular team member in the life cycle. One such position has started getting traction, which is called a UX engineer. A UX engineer is equipped with a skill set, which is beneficial for the customers. By using different techniques or steps to know the customer better, the UX engineer can get a good hold of what the user is expecting out of a given software product. Usually, when the requirement gathering process takes place, tech companies are now involving the UX engineers to go out in the market to understand what the user needs. With the latest trend of Responsive Web XDesign and Mobile-First Approach to software development, there can be a number of areas one wants to focus their attention on. A UX engineer employs processes such as User Interviews, Market Surveys to know the pulse of its intended audience. This process is time taking as well as important, as it gets the path clear for the software product to see its suitability in the market. These steps are employed when gathering the software requirements and eliciting them. It is an ideal phase, as it reduces the overall cost of development. However, when the software product is mature, one can introduce the UX research phase in order to gauge the viability of the enhancement being made. Axure RP – Introduction For the UX engineers, the process of understanding their user base is not just limited to getting the inputs from the customer or the related conversations. There are some interesting steps that they need to take to understand what a user wants. The real work starts when they are somewhat clear about what the user might be expecting out of the software product. Once some data is available about how the user is perceiving the upcoming software or an enhancement in the existing software, the UX engineer comes back to its den to design the user interface for them. Traditionally or as a common approach, when someone says design, it means software such as Adobe Photoshop, CorelDraw, or even Microsoft Paint. At times, to get back to the users real quick, UX designers make use of good old pen and paper to design interfaces. However, for UX designer, providing the quality in designing the User Interface means more than just showing an awesome design. User Experience consists of not only how the user sees the interface but also how the user interacts with it. The software tools mentioned above and the likes in the market come with their own feature sets. It is indeed a tedious task for the UX engineer to choose the appropriate software which will enable − brainstorming, designing, and getting feedback. Enter Axure, the currently trending software to design beautiful user interfaces and interactions. Axure has been around since close to a decade to allow UX engineers to get to the details of creating a software prototype with ease. Axure, along with being the prototyping tool, has a powerful community contributing to the UX world with many examples and skillful interactions. At a higher level, following are the features offered by Axure − Diagramming and Documentation Effective prototyping with Dynamic Content Conditional Flows Beautiful animations to enhance the interactions Adaptive Views Support on Windows and Mac To explore the detailed feature list provided by Axure, please visit https://www.axure.com. For installation instructions, follow the link https://www.axure.com/download. For rapid prototyping, Axure RP provides a varied range of tools and techniques, which always help the Analysts/User Experience engineers to visualize the end goal. With a strong community always available to assist, Axure RP is becoming the preferred tool for UX enthusiasts and practitioners. Axure RP – User Interface Once you install Axure, you will be presented with an interface as shown in the following screenshot. This screen will always be shown at the startup until you opt for not to show it. On this screen, you have the following options − Start a New