Axure Tutorial: Styling Pages

Introduction

This article is a part of course Axure Full Course: Tutorial, Tips and Templates

Styling Pages

Page stying is mainly achieved through the Style Toolbar at the top of the screen or the Style pane on the right side of the screen.

 

Adjust Page Dimensions

Page dimension mainly has the following types:
Auto: Automatically adjust the page dimension according to the page content.

Auto

Custom Web: Specify the width; the height is adjusted according to the content, mainly used for web pages.

Custom Web

Custom Device: Specifies the width and height, mainly for handheld devices. The dotted line at the bottom indicates the height baseline that can be displayed.

Custom Device

System preset: you can select a dimension of common devices.

iPhone 13 preset dimension

 

Align Content 

There are two ways to align the content of the page, one is left-aligned, and the other is center-aligned. In the generated prototype, the page content that is set to left-aligned is displayed according to its placement position; the page content that is set to center-aligned will be center-aligned.

The page sets the content to be left-aligned

 

In general, you can set the content center alignment, so that you do not need to adjust the content position according to the device every time.

 

Fill the Page

You can fill the page background by choosing a color or choosing an image.

 

You can even make a watermark effect by choosing Image Repeater mode.

 

Select Visual Fidelity

Our design drafts can only be used to demonstrate the framework, to facilitate the structural thinking of the product, or to show customers a high-fidelity prototype to see the actual UI effect. Choose low fidelity mode or normal fidelity mode to achieve your needs.

Page Style Settings

Manage page style
Click the icon to pop up the Page Style Manager, where you can add, delete, reorder and rename page styles.

 

After setting, you can apply the desired page style to the page.

Update or Create Page Style
After modifying the style of the current page(* Indicates modifications have been made), click the icon to expand the menu, you can update the current page style, or create a new page style.

That's all for today's lesson. In the next lesson, we will learn how to add adaptive views to page.

If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting!


Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.