What Are Adaptive Views? UX Design Tools: Axure

Brian Thurston Bralczyk introduces Axure’s ready-made widgets, functioning form elements, and dynamic content that can be hidden, moved around the page, or even animated. Plus, learn how to generate flows and sitemaps, and create adaptive web designs to view your project on a range of devices. Watch the online video course: UX Design Tools: Axure with Brian Thurston Bralczyk.

Topics include:

  • Using and styling widgets
  • Setting up interactions
  • Creating hide/show options for content
  • Creating an accordion menu
  • Applying web fonts
  • Using flow widgets
  • Creating and placing masters
  • Styling pages
  • Adding form fields with widgets
  • Building a slideshow with dynamic panels
  • Setting up adaptive views

Axure RP

Axure RP Pro is a wireframing, rapid prototyping, and specification software tool aimed at web and desktop applications. It offers capabilities typically found in diagramming tools like drag and drop placement, resizing, and formatting of widgets. In addition, it has features for annotating widgets and defining interactions such as linking, conditional linking, simulating tab controls, show/hide element etc. There is support for medium-fidelity simulation of Rich Internet Applications. Axure RP can then generate HTML prototypes and Microsoft Word specifications from the diagrams.

The Axure RP Pro application window is divided into 6 main areas:

  • sitemap — a hierarchical list of pages
  • widgets
  • masters (templates, or reusable collections of widgets)
  • page area — the main design area
  • page notes and interactions
  • widget annotations and interactions

Widgets available include:

  • wireframe: image, text panel, hyperlink, rectangle, table, line (horizontal/vertical), menu (horizontal/vertical), tree
  • form controls: button (various shapes, including tab buttons), text field, text area, drop-down list, list box, checkbox, radio button, image map region
  • placeholder, inline frame, dynamic panel (used to achieve interactivity)

Other widgets can be simulated by combining existing widgets and assigning specific actions to events such as OnClick, OnMouseOver and OnMouseOut. For example, dynamic panels can have a number of states, each state being activated by clicking on an element such as a tab button, list-box item, or action button. For tabs, this allows constructing a tab control.

Adaptive web design

Adaptive web design is basically the same as responsive design and shares many of the same ideals and goals. The main difference however is that the changes are made on the server side rather than the client side.

Adaptive websites are designed to respond and adapt to different screen sizes using responsive techniques, and to adapt to different User requirements based on different device capabilities.

The responsive design aspect of adaptive design involves the implementation of various design factors such as flexible layouts, CSS file alternatives and flexible images, which are activated using media queries.

With adaptive delivery, the most significant difference is that the server hosting the website detects the devices making requests to it, and uses this information to deliver different batches of HTML and CSS code based on the characteristics of the device that have been detected. See: Responsive design vs. adaptive delivery: Which one’s right for you?

Adaptive web design also encompasses a range of other strategies which, when combined with responsive design techniques, enables you to deliver the best possible User experience to the widest possible audience. This means that numerous functionalities and environmental factors can be catered for in the most User friendly way, depending on the particular device being used to access your website.

The Prototyper is out! http://t.co/0F5TWYMREy Stories via @OCUX @BuildMySite1 @brian_thurston
— life on the road (@_gotham) May 5, 2014

Website: Build My Site


Originally published at buildmy-site.com on May 2, 2014.