Website Design

Website Design

1. Task Requirments

   • Prescribed Criteria
     • PC3
       • The background of the website will be white with small patterns in the background, so the black bold text will be clearer and more understandable for Zak.
       • Since Zak has some experience with some mechanics, he will know the basic mechanics, so I will not include the mechanics he is familiar with on the website.
     • PC2
       • By adding an ordered list of each mechanic type, Zakariyya and scroll down and easily find the flicks section or movement mechanics.
       • By adding images, Zakariyya can look and examine the image looking at the most affective part of the mechanic.
       • I will add a hyperlink to a YouTube website for each mechanic, so if Zak needs a look at real gameplay, he can press the hyperlink.
       • On the Homepage, there will be five buttons that are clear in white bold text on a black button on a white background, so that Zak can clearly see the text on the buttons.
       • Beneath each specific mechanic type there will be a table of steps on how to do the mechanic, by doing this Zak will be able to easily identify each step.
     • PC1
       • To make the text on the website bold and big so Zakariyya with weak eyesight and read and understand the information without getting angry.
       • Set a high contrast background (vanilla/white background) so the black bold text becomes clearer and easier to read so Zak can understand and the read the mechanics.
   • Self-Determined Criteria
     • SDC1
       • Next to each mech there will be a rank next to the name of the mechanic, this will show which ranks can do these mechs, so Zak as a platinum player can see which rank that is most effective in and which ranks can actually do it
       • When Zakariyya learns the mechs he can see if executed well it gives him an advantage but if executed wrong it can cause conceding a goal or leaving teammate in a 2v1

2. User Persona

   • For the description of each mechanic to be clear and to have images of the mechanics
   • When Zak doesn’t understand the text or the text is too small because his eyesight isn’t good.
   • To become a professional rocket league gamer.
   • Zakariyya is a student in Mansfield SHS, he is in grade 11 and works part time in the Cheesecake Shop he is trying to become a pro rocket league player

3. Existing Solutions

   • https://www.rocketleague-help.com/mechanics-by-rank
     • Striaghtfoward
       • The guide for each rank is clear and understandable.
       • There is training packs and YouTube links
     • No specific information for lower ranks
       • New players may not understand the article because they do not know the mechs
       • Lack of training code maps + YouTube videos.
   • https://gamer-guides.com/rocket-league/rocket-league-roadmap/
     • News article looking
       • The website look like a news article rather than a inofrmation guide
       • There are way too many ads
     • Pros
       • description of what t do in each rank
       • Gives understandable reasons for lower ranks who do not uderstand anything

4. User Interface

   • big, bold text, white background, etc
     • Buttons, Ordered list, images, hyper link to external website etc.
     • White background so text appears for Zak who has weak eyesight,
   • User Interface Components
     • Buttons which user presses to go to a webpage they want to go to.
     • Images of the mechanics showed next to each mechanic so the user has an idea what it looks like
     • YouTube links to videos of the mechanic so users have a clear idea what do to.
   • background with patterns
     • white background with black patterns
       • rocket league symbol patterns
       • epic games logo patterns

5. Coding environment

   • Developer Tools
     • Coding Language is a tool we us to type up commands for our computers to do. It is used to make video games and social media apps
     • Notepad++ is a free software used for coding to make websites. It was made in 2003 and still running today
   • Key Algorithms
     • Website navigation is the system of buttons, links and menu's that help users go to different webpages within a website.
     • Data compression is another important algorithm as it reduces the size of images and videos