Proficient Prototyping for Axure RP: Recreate Nike Homepage

We go through what we will be designing and the functionality we will be building.

How to get started with a project. Introduction to the Axure RP interface, panels, rulers and guides.

Creating the header structure and menu link placeholders

We create the search field and logo components

Adding mouseover style effects to menu links in terms of color and border styling.

Making sure we name all components that we are going to add interactions to

Laying out the first banner on the page, its heading, title copy and call-to-action button

Laying out the components of a product carousel as placeholders

Laying out the promotional banners found on the page with varying column page widths

Layout of the category quicklinks and footer components

Aligning groups of text components and adding styling effects

Adding the native Axur RP social media and location icons

Brief definition of a Master component and what it is useful for

We look over the Homepage and identify what should be a master and what should not

We add buttons and promotional copy to our homepage

We go over what we just created by previewing it in a local browser

We define what a Dynamic Panel is and what it is used for

Create a Product carousel using a dynamic panel

How to create multiple instances of a Master that are different from each other in terms of data and titles

Defining what interactions are and what they are used for

Create a dropdown with Help links using a dynamic panel

Linking the Help link to animate the dropdown

We create all the contents and components found on the login overlay

Styling the components and adding textfields to the Login overlay form

We spend some time positioning and animating the Login Overlay using interactions

Adding close action to the Login Overlay using interactions

We create the menu links for all menu dropdowns found in the header

We use a dynamic panel to house all the dropdowns as states

Adding mouse interactions to menu links to activate the states

We preview what we just built and test it out in the browser

Creating the sliding text banner using dynamic panels

We design the contents of the search overlay that appears over the head

We animate the search overlay using dynamic panels and interactions

We simplify the quicklinks animation using a dynamic panel and setting interactions

We design a full screen overlay using a dynamic panel

Laying out the overlay in the correct position when it gets activated