Live project link

The idea of this project is to practice the knowledge learned so far about the first modules of the Code Institue software development course.

This project was developed as a requirement of the course and is classified as the first milestone project with the discipline defined as User Centric Frontend Development.

The project itself consists of a Landing Page for the Xbox Series X, Microsoft's new video game console, focused on concentrating the main features of the console, but more than that sharing the message about the ecosystem around the console for anyone interested in buying the console.

The UX was idealized to connect the visual of the console, some elements of the brand but at same point feel transparency and straightforward about the key advantages and main capabilities of the ecosystem.

To help understand which elements would be interesting use to build the website some aspects regarding the strategy about the brand and console were considered as for example:

• Why are we special?
• Why would a user want this?
• Who else is doing this?
• What are the pros of what they're doing, and what are the cons?

After analyze the competitors (Nintendo and Playstation) was possible to sumarising what makes the Xbox different from those with the topics below:

• Xbox Series X is the most advanced console created in terms of processing power.
• The Xbox deliveries an affordable game subscription which allows you to install up to 200 and this library receive contstant updates every month with new games.
• Xbox has the best backwards compatibility system to play old games with exclusive features.
• It is the only platform that allows you to play the same game in your console,PC or mobile utilising the same save.

Embeded with those ideas the next step was create the user stories.

• Understand what is the value proposition of buying an Xbox series X.
• What games will be possible to play in this machine.
• How well the games is going to run and in terms of graphic and performance.
• The price and link to buy it if needed and images and videos.

• Deliver a message stating the advantages of being a player on the Xbox platform.
• Draw the attention of current users on older Xbox consoles, non gamers and users of another platforms as Nintendo or Playstation.
• The main ideia is convert them into consumers of the new Xbox product and services.

In result of the analizis of the elements of the brand, product and competitors the wireframes were design with the ideia on mind to achive the main key differentials dividing the landing page in three sections and one carousel to stand out the main message.

Link to access individually each wireframes

The project was conceptualised to be straightforward utilising the main differentials of product to communicate the message across 3 main section as is possible to understand below:

1. Navbar;

2. Sliding carousel showcasing the main sections;

3. Section with main tech features;

4. Section dedicated to advertise Gamepass subscription and main games available to play;

5. Section to explain backwards compatibility system;

6. Footer.

• The Navbar utilized came from bootstrap and was heavily eddited in the visual to match the visual identity of the project. In this feature is possibleto find the links for the main section.
  • After hovering the mouse over each links, their apparence changes it for a combination of "Press (X, Y, B, or A)" to match the color scheme of the respective section to be selected and at same time combine the visual aspects of the buttons on an Xbox controller.

• The Sliding Carousel has the approach to stand out the main ideas with key images which works as link leading the users to a better understanding about what the user what to know more.
  • The first image of the three is to draw attention to a button with a link to buy the console.
  • The other three images function as large clickable links that lead to each section.

• The Tech Features Section was developed to reassure the powerful capabilities of the console itself bringing clarity about what is possible to expect of the technologic point of view.
  • Background image of the console to stand out visually this section with a ghost column in the middle to always keep the background with console visible even in different screens sizes less in mobiles ones.
  • The color blue was choose to identify this section.
  • Title utilising the same visual identity of the overlay-box to spread the main message of the section.
  • The message is organised in topics insie a main visual style common to all sections of the project the overlay-box which in this case match the blue of this section.

• In Games Section is where relays the opportuny for Xbox showcase the platform as something more than just exclusive games or a single piece of hardware. This section were developed to explain for the future user what they advantages to be Xbox user’s and what are the different ways to be one. The best way to materialise assertively were throughout videos and brief description of them.
  • The color yellow was choose to identify this section.
  • Title utilising the same visual identity of the overlay-box to spread the main message of the section.
  • Two responsible videos one in each part of this section wrapped by overlay-box in the color yellow.
  • Two text-boxes yellow wrapping the brief description of each video.
  • After both videos an small background image covered in shades of the same bakground color of the section to pass continuity and over it a link to Xbox wire blog where it is explaining the aquisition of Bethesda studios.

• The Backwards Compatibility is the main unique approach of the brand and for this reason was choose to pass the idea of continuity that every user have accros different generations but keeping what the already have as a consumers of the brand and even better keep being able to playing games from previous genrations but in a better and unique way. In this section the tech capabilities were explored.
  • The color red was choose to identify this section.
  • Title utilising the same visual identity of the overlay-box to spread the main message of the section.
  • Two illustrative images to represent each part of this section.
  • Two text-boxes wrapped on overlay-box in the color red with message about Backwards compatibility system.

• Footer was developed to match the main visual aspects of the website and provide a link to website home and social links of the Xbox brand.

The gallery was not possible to implement due to lack of time.

• Gallery in grid format to ilustrate some images of the new console.

All the Technologies utilised to built this landing page can be found bellow with the respective links.

• HTML to build the whole structure of the landing page.
• CSS to style all the webiste.

• Gitpod as the code editor.
• Bootstrap 5.0 to buil carousel, navbar and use the grid system to better position all elements of the landing page.
• Google Fonts for both fonts utilised in the project.
• Font Awesome for the all icons.
• Git was used as tool to control the version of the project.
• Git Hub to store the project with versionament control
• Github pages to deploy the live project.
• Balsamiq to wireframe the ideia of the website.
• Am I responsive to help visualize the webiste in different screens sizes and get a print of it.
• Sketch helped to create images or even resize them.

The tests utilised were Google Lighthouse, W3C Markup validation service and w3c Jigsaw CSS validation service.

All the possible erros founded by W3C validators were corrected less those ones being part of bootstrap Frameworks.

There is only I warning regarding HTML as it is possibble to see with the screenshot:

• The warning notice is a recommendation to use the h2 tag for the section in question. I use the h2 tag, but inside an article tag, so it is not being considered by the validator.

The CSS validators showed no errors:

Google ligthouse results:

All images were replaced with smaller sizes in an attempt to improve performance.

This project was developed to work in at least 3 different sizes Desktop, mobile and Tablet. To achive this the website has been tested on several possible devices, from 11 "or 13" inch Macs, Google Chrome developer tools, variable Android phones available to me as well as to some friends and relatives.

For deploy this project I utilised some of the mentioned technologies above to facilated this process.

1. The first step were created a repository on GitHub with the name xboxlp-milestone-1
2. Installed the Gitpod extension for Google Chrome;
3. Linked Gitpod gaving access to my GitHub profile with my login and password;
4. After that all repositories started to showed the Gitpod button just next to the button Code.
5. Clicking in the Gitpod button you have access to the code editor linked with this repository.
6. After editing the code it was possibble utilising Git command (status, add, commit and push) in the terminal updated Github repository.
7. To deploy was necessary went to repository settings and scrolled down untill the options Github pages check it out here!
8. In the link it was necessary went to option source and selected the main branch
9. After that I clicked on the button save.
10. Finally after those steps the link of the webiste was ready to be utilised and the project is live.

All texts were created by myself as my best effort to reproduce this type of content as faithfully as possible.

All images used in this project are credited in links below with their names in the project and orignal sources. It is important the mention that all images were resized and some of them edited to match project objectives.

• carousel-1.jpg

• carousel-2-best.jpg

• carousel-3-best.jpg

• carousel-4-best.jpg

• tech-section-bg-best.jpg

Pictures

• bethesda-pc-best.jpg

• mobile-xbox-bethesda.jpeg

Videos

• Gamepass Video

• Xbox Games showcase

• XboxSX-backcomp-best.jpg

• fps-boost-best.jpg

• I received inspiration for this project from the official website of Microsoft Xbox Series X.