CSE463 Module 2 (Part B) – Advanced project in Axure RP Solution

Replicating an existing website. (31 possible points, 5% of total grade)
For this assignment, you are to create a new prototype for an existing website using Axure RP.
You will replicate the existing look and feel of the website including fonts, icons, colors, and other styling elements as well as menus. In addition, you will replicate some of the functionality of the website. The website to replicate is the main page of www.apple.com.

The website must be published to the axshare.com site just like in the Axure RP tutorial. You are to post (only) the URL (in the text field, e.g., no documents/attachments) into the proper assignment under Assignments section in Blackboard.


Guidelines
1. General
a. Use the developer tools in your browser to find and obtain the image icons, the exact font (same family), color, and the size of the various sections.
(https://developers.google.com/web/tools/chrome-devtools /) is a brief tutorial on using the developer tools functionality for Chrome. There should be similar tutorials online for the ones provided by Safari, Firefox, etc.
b. While it is not strictly required for your page to dynamically resize, the various elements must, however, maintain their aspect ratios relative to each other.
2. Top Navigation Bar.
a. Replicate the entire look and feel of the top panel. Make sure you have the icons, the correct fonts, and the correct colors; also, make sure that you replicate the functionality for mouse hovering over menu icons.
b. All icons and texts should be linked to the correct pages on the real Apple website. All links should open in new tabs.
c. Clicking the search icon should change the screen to look like how it looks like on the Apple site. (see image below). The actual searching functionality need not be working. However, the styling of the box should be replicated as close as possible.
d. The shopping bag icon should bring up the dropdown as it does on the actual Apple website (see image below).
3. Theme Image.
a. Replicate the theme images with the text as it appears (note the text is NOT part of the image). If the theme image changes on the Apple website, you can choose to replicate the new one.
4. Links and Resources section.
a. Replicate the entire section with all the text and hyperlinks. The hyperlinks should link to the real Apple website. All links should open in new tabs.
b. Make sure to replicate all the styling in this section including font sizes, color, and type.
5. Bottom Information and Navigation Bar.
a. Replicate the “For Education, For Business and For Government” sections in the Navigation bar with all the text and hyperlinks. Replicate all other sections with all the text (hyperlinks are not required for these sections but optional). The hyperlinks should link to the real Apple website. All links should open in new tabs.
b. Replicate the complete Bottom Information section with all the text and hyperlinks.










Grading Rubric