Rainbow Seven Siege (BINUS HCI Lab Project)

Rainbow Seven Siege - REQUIREMENTS

Rainbow Seven is a game developed by Ubipost, recently they released the 51st and 52nd operator for their game. With the new upcoming updates on the game, the company also wanted to update their website.

Your task is to create a logo and a promotional website that represent the new upcoming updates. You also need to consider the design for the website so the user can pre-order and sneak peek about the new update of the game.

Requirements

The requirements for Rainbow Seven Siege’s website are described as follow:

  1. Rainbow Seven Siege needs a new logo that represents the image of the game that is susceptible to the game’s season and operators. Consider the customer segment, shape and colors when designing the logo. The logo will be created using Adobe Photoshop, ensure that no layers are merged.

  2. Ubipost wants you to design the blueprint of your homepage first before starting the development of the HTML files. The blueprint will be created using Adobe Photoshop. Ensure the blueprint that you create matches the website that you will create later. The homepage blueprint must contain header, navigation, content, and footer.

  3. Ubipost wants its website to provide information about its game, such as a list of maps and characters in the game.

  4. Ubipost wants you to build an attractive, appealing and functional website. Furthermore, Ubipost wants you to create a website with a responsive design. The website should be accessible by phone. To achieve that, use 5 kinds of CSS property and JavaScript. Use Meta viewport tag and media screen rule that will be applied if the screen is below 800px screen.

  5. The website consists of 5 main pages. They are Home, Quarantine, Operators, Maps, and Pre-order. You need to create a navigation menu using Drop down menu using CSS.

Site Page to build

Here are the requirements for the website:

Home

Ubipost wants to have an image slider on this page using JQuery to show all previous seasons events and currently running events. On the home page, you also need to provide some information such as the latest news from previous updates and upcoming updates.

Operators

Ubipost wants you to make a page that shows the information of the characters called the operator that can be chosen in the game. The information that should be provided is at least the character’s name, character’s images. You are also free to add another component such as the character’s story and character’s specialty.

Maps

This page provides information about available maps that are included in Rainbow Seven Siege. Each map has information that should be provided, such as the map’s image and title.

Quarantine

This page provides information about the new mode inside the game called Rainbow Seven Quarantine. The information that should be provided such as teaser images, a brief description of the new modes, release date, etc.

Pre-Order

Ubipost wants you to make a page that helps the user to pre-order the game. User needs to submit some personal information such as username, email, password, address, number of copies, type of the game and Terms and Service agreement. You are also asked to create 5 types of validation using JavaScript and don’t use a regular expression.

Guidelines

  1. Design your website by observing the principles of human and computer interaction. Set up your site as creative as possible but still strive for consistency.
  2. The logo and blueprint (only homepage) must be designed using Adobe Photoshop CC++ and make sure no layers are merged.
  3. Consider the color, font, image, size, and layout that you use to design the logo and website.
  4. All pages mentioned in the requirement should be created based on your template design.
  5. Use only external CSS. Internal or inline CSS will not be marked.
  6. Use CSS box positioning concept to design your web structure, do not use table for the layout.
  7. Consider the language you use, including spelling and grammar, feel free to choose either Bahasa or English, but you cannot have both at the same time.
  8. Use Mozilla Firefox 22 or above version to check design compatibility.
  9. Make your website responsive so it can deliver in any size, particularly for desktops, tablets and mobile devices.
  10. Organize your files with subdirectories.
  11. Include references (link from a website, book) that you use in creating the website.

Things to collect before submission

  1. Logo (*.psd)
  2. Web template for homepage (*.psd)
  3. Website (*.html / *.htm, *.css, *.js)