Proficient Prototyping for Axure RP: Recreate Nike Homepage from Udemy

What's inside

Learning objectives

Introduction to the axure rp interface
How to plan and correctly setup your design project
Axure rp most used features

Design decisions around what to prototype
How to layout and add styling to a website wireframe
Bring the prototype to life with interactions and functionality

Introduction to the axure rp interface
How to plan and correctly setup your design project
Axure rp most used features
Design decisions around what to prototype
How to layout and add styling to a website wireframe
Bring the prototype to life with interactions and functionality

Syllabus

We run-through the Nike.com site layout and plan what functionality we will be building

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

Let's find out if you understood how to build components in Axure RP

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Provides hands-on experience with Axure RP, a popular prototyping tool used in the UX/UI design industry, which allows learners to immediately apply their knowledge to real-world projects

Focuses on recreating a real-world website (Nike Homepage), which offers practical experience and a tangible portfolio piece for aspiring designers to showcase their skills

Covers essential Axure RP features like Masters, Dynamic Panels, and Interactions, which are fundamental for creating interactive prototypes and user experiences

Teaches a design process for approaching complex projects, including deciding on the level of detail, avoiding common mistakes, and polishing prototypes for presentation, which are valuable skills for professional practice

Requires the use of Axure RP software, which may involve a subscription or licensing fee, potentially posing a barrier for some learners

Uses Axure RP, so learners should verify that the version taught in the course is up-to-date and still supported by the vendor

Reviews summary

Practical axure rp prototyping via nike homepage

According to learners, this course offers a highly practical and hands-on approach to learning Axure RP by guiding students through the process of recreating the Nike homepage prototype. Many appreciate the step-by-step instruction and the inclusion of the project file, which makes following along easier. The course covers key Axure features like Dynamic Panels and Masters in a real-world context, making it particularly valuable for those looking to build functional prototypes quickly. While many find it provides a solid foundation, especially for beginners, some more experienced users mention that it might lack depth on certain advanced topics or broader Axure capabilities beyond the specific project. Overall, it is seen as an effective way to learn prototyping by doing.

Software updates may cause minor interface differences.

"The course uses an older version of Axure RP, so the interface looks slightly different now."

"You need to be aware that the Axure RP UI has changed a bit since the course was made, but the core concepts are still valid."

"Some parts of the UI in the video don't match the latest Axure RP, which can be a bit confusing initially."

Having the project file is very helpful.

"Being able to download the project file saved me a lot of time when I got stuck or wanted to compare my work."

"The included Axure project file is a great resource for troubleshooting."

"It was incredibly useful to have the finished project file as a reference point."

Provides a strong, practical introduction to Axure RP.

"As someone new to Axure, this course gave me a solid starting point with practical examples."

"Great course if you are just starting out with Axure and want to learn by building something real."

"It's a perfect introduction to Axure RP if you learn best by doing and following along."

The course provides clear, easy-to-follow instructions.

"The instructor walks you through every single step, which is perfect for beginners."

"Following along screen-by-screen was very helpful and prevented me from getting lost."

"The clear, step-by-step guidance made even complex interactions manageable."

Rebuilding a real-world site is a great way to learn.

"Building the Nike homepage step by step made learning Axure so much more tangible than just theoretical lessons."

"I really enjoyed recreating the Nike prototype; it was challenging but very rewarding."

"The practical project of rebuilding the Nike site was the most useful part for me."

Might not cover all Axure features comprehensively.

"While good for the project, it didn't go into depth on *why* certain Axure features work the way they do."

"For more experienced users, the course might feel a bit too basic and not cover advanced topics."

"I was hoping for a deeper dive into some less common Axure functions; the focus is solely on the Nike project."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Proficient Prototyping for Axure RP: Recreate Nike Homepage with these activities:

Review Axure RP Interface Basics

Show steps

Familiarize yourself with the Axure RP interface to navigate the software efficiently during the course.

Browse courses on Axure RP

Show steps

Explore the Axure RP workspace.
Identify key panels and their functions.
Practice using basic widgets.

Study 'The UX Book: Process and Guidelines for Ensuring a Quality User Experience'

Show steps

Read 'The UX Book' to understand the principles of UX design and apply them to your prototypes.

View The UX Book: Agile UX Design for a Quality User... on Amazon

Show steps

Read the chapters on interaction design and usability testing.
Apply the principles to your Axure RP prototypes.
Conduct usability testing on your prototypes.

Review 'Axure RP Prototyping Blueprints'

Show steps

Study 'Axure RP Prototyping Blueprints' to gain a deeper understanding of advanced prototyping techniques.

View Axure Prototyping Blueprints on Amazon

Show steps

Read the chapters on dynamic panels and interactions.
Try replicating the examples in Axure RP.
Take notes on key concepts and techniques.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Prototype a Simple Mobile App

Show steps

Practice using Axure RP by creating a simple mobile app prototype to reinforce your understanding of the software.

Show steps

Plan the app's features and user flow.
Design the app's interface in Axure RP.
Add interactions and animations.
Test the prototype on different devices.

Document Your Prototyping Process

Show steps

Create a blog post or video tutorial documenting your experience of recreating the Nike homepage prototype.

Show steps

Outline the key steps in the process.
Capture screenshots or record a video of your work.
Write a clear and concise explanation of each step.
Share your content online.

Explore Advanced Axure RP Tutorials

Show steps

Deepen your knowledge of Axure RP by exploring advanced tutorials on topics like conditional logic and data-driven prototyping.

Show steps

Search for tutorials on specific Axure RP features.
Follow along with the tutorials and try the examples.
Adapt the techniques to your own projects.

Build a Portfolio of Axure RP Prototypes

Show steps

Showcase your Axure RP skills by building a portfolio of prototypes that demonstrate your ability to create interactive and functional designs.

Show steps

Select your best prototypes.
Write a brief description of each project.
Create a website or presentation to showcase your work.
Share your portfolio with potential employers or clients.

Career center

Learners who complete Proficient Prototyping for Axure RP: Recreate Nike Homepage will develop knowledge and skills that may be useful to these careers:

User Experience Designer

A User Experience Designer focuses on making digital products usable, enjoyable, and accessible. This often involves creating prototypes to test and refine design ideas. This course, focused on proficient prototyping with Axure RP by recreating the Nike homepage, directly helps aspiring user experience designers understand how to rapidly prototype interactive designs. Learning to use Masters, Dynamic panels, Widgets, Hotspots, and Interactions will serve as key accelerators for any user experience designer. By following along and understanding the instructor's design choices, you build a solid foundation for tackling future design projects. The course may be useful to understand how to present prototypes to clients.

See salaries and explore the career path for User Experience Designer

Interaction Designer

An Interaction Designer designs the interactive elements of digital interfaces, focusing on how users engage with a product. This course, focused on proficient prototyping with Axure RP by recreating the Nike homepage, directly helps aspiring interaction designers learn how to create functional prototypes. The course emphasizes powerful features such as Masters and Dynamic Panels, which are essential for designing complex interactions. Through hands-on exercises, you can learn to add life through animation and polish prototypes for presentation. By following along with the instructor's design choices, you can develop a design process for tackling future projects. This course may be useful to learn the subtleties of browser pinning.

See salaries and explore the career path for Interaction Designer

Web Designer

A Web Designer plans and creates the visual layout, appearance, and usability of a website. The course, focused on proficient prototyping with Axure RP by recreating the Nike homepage, can directly help aspiring web designers learn how to quickly prototype website designs. The course covers key Axure RP features like Masters, Dynamic panels, and Interactions, enabling you to create functional prototypes. Through hands-on exercises, you learn how to layout and style a website wireframe. By following along with the instructor's design choices, you understand how to decide on the amount of detail to prototype. The course may be useful to wow clients with well designed prototypes.

See salaries and explore the career path for Web Designer

UI Developer

A UI Developer implements the user interface of a website or application, translating designs into code. UI developers can use prototyping to bridge the gap between design and development. The course, focused on proficient prototyping with Axure RP by recreating the Nike homepage, can directly help aspiring UI developers understand how to create interactive prototypes. The course emphasizes how to bring prototypes to life with interactions and functionality. By following along with the instructor, you build a solid foundation for tackling future design projects. The course may be useful to acquire a skill that can increase your income.

See salaries and explore the career path for UI Developer

Product Designer

A Product Designer is involved in the entire product development lifecycle, from ideation to launch, with a focus on user experience and business goals. The course, focused on proficient prototyping with Axure RP by recreating the Nike homepage, directly helps aspiring product designers learn how to quickly prototype and test design ideas. Through hands-on exercises, you can learn to efficiently create functional prototypes and present them effectively. By following along with the instructor's design choices, you can develop your own design process for tackling future projects. The course may be useful for drafting up some very basic or early design concepts for customers.

See salaries and explore the career path for Product Designer

UX Researcher

A UX Researcher conducts user research to understand user behaviors, needs, and motivations, providing insights to inform design decisions. While UX Researchers don't always prototype, they often collaborate with designers and use prototypes to test research findings. This course, focused on proficient prototyping with Axure RP by recreating the Nike homepage, may help aspiring UX Researchers understand how prototypes are created and how they can be used in user testing. The course introduces the basics of Axure RP and demonstrates how to create interactive prototypes. This course may be useful to effectively communicate research findings to design teams.

See salaries and explore the career path for UX Researcher

Information Architect

An Information Architect organizes and structures content in a way that makes it easy for users to find what they need. Prototyping can be a valuable tool for information architects to test and refine their designs. This course, focused on proficient prototyping with Axure RP by recreating the Nike homepage, may help aspiring information architects learn how to visualize and test their information architecture. The course covers key Axure RP features like Masters and Dynamic panels which are useful for structuring complex interfaces. This course may be useful when working to structure information in websites.

See salaries and explore the career path for Information Architect

Usability Analyst

A Usability Analyst evaluates the ease of use of a product or website, identifying areas for improvement. This course, focused on proficient prototyping with Axure RP by recreating the Nike homepage, may help aspiring usability analysts by giving them experience in building the interfaces they work with. The course emphasizes the importance of interactions and functionality in prototypes. By following along with the instructor's design choices, you gain insights into common design challenges and solutions. This course may be useful to improve your analytical skill set.

See salaries and explore the career path for Usability Analyst

Conversion Rate Optimization Specialist

A Conversion Rate Optimization Specialist may use A/B testing and prototyping when conducting their jobs. This course, focused on proficient prototyping with Axure RP by recreating the Nike homepage, may help aspiring specialists by giving them experience in building the interfaces they test. The course emphasizes the importance of interactions and functionality in prototypes. By following along with the instructor's design choices, you gain insights into common design challenges and solutions. This course may be useful to improve your understanding of current web design.

See salaries and explore the career path for Conversion Rate Optimization Specialist

Digital Strategist

A Digital Strategist develops and implements digital marketing strategies to achieve business goals, which might involve using prototypes. This course, focused on proficient prototyping with Axure RP by recreating the Nike homepage, can help aspiring strategists understand how interactive prototypes can be used to test and refine digital strategies. By learning to use Axure RP, you can quickly create prototypes to visualize and communicate your strategic ideas. This course may be useful to quickly present a website plan to customers.

See salaries and explore the career path for Digital Strategist

Web Content Manager

A Web Content Manager is responsible for planning, creating, and managing content on a website. Web Content Managers may find prototyping useful when testing a new content strategy or design. This course, focused on proficient prototyping with Axure RP by recreating the Nike homepage, can help aspiring web content managers understand how prototypes are useful for testing the display of content. The course introduces basic Axure RP features which may be useful when trying to display content across different screen sizes.

See salaries and explore the career path for Web Content Manager

Technical Writer

A Technical Writer creates documentation and guides for software, hardware, or other technical products. While Technical Writers don't typically create prototypes themselves, understanding the design process can be beneficial. This course, focused on proficient prototyping with Axure RP by recreating the Nike homepage, may help aspiring technical writers gain a better understanding of the design process. The course introduces the basics of Axure RP and demonstrates how interactive prototypes are created. This course may be useful to communicate more effectively with design and development teams.

See salaries and explore the career path for Technical Writer

Project Manager

A Project Manager oversees the planning, execution, and delivery of projects. Project managers may find this course helpful in the ways of working with designers and developers. This course, focused on proficient prototyping with Axure RP by recreating the Nike homepage, may help aspiring managers understand how interactive prototypes are created, and their importance in the design process. The course introduces the basics of Axure RP and demonstrates how prototypes are used in the design and development process. This course may be useful while managing web design projects.

See salaries and explore the career path for Project Manager

Technical Sales

A Technical Sales representative works with customers to discover design needs and communicate design solutions. Although a sales representative does not do web design, it may be helpful for the sales associate to have a basic understanding of the field. This course, focused on proficient prototyping with Axure RP by recreating the Nike homepage, may help aspiring technical sales representatives gain a better understanding of design processes. The course introduces the basics of Axure RP and demonstrates how prototypes are used in the design process. This course may be useful to understand what a web designer does.

See salaries and explore the career path for Technical Sales

Graphic Designer

Graphic Designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. The skills and knowledge of a graphic designer may be enhanced by prototyping skills. This course, focused on proficient prototyping with Axure RP by recreating the Nike homepage, can help aspiring graphic designers understand how they can add interactivity to their work. The course may be useful to graphic designers.

See salaries and explore the career path for Graphic Designer

Proficient Prototyping for Axure RP

Recreate Nike Homepage

What's inside

Learning objectives

Syllabus

Traffic lights

Save this course

Reviews summary

Practical axure rp prototyping via nike homepage

Activities

Career center

Reading list

Share

Similar courses