Website Design

Website Design

1. User Persona

   • Needs: I need a website that allows me to easily navigate to rules about touch and the actions associated with the foul. I need links leading to external websites that provides online theory courses to complete and a neat layout for easy navigation.
   • Frustrations: Too much information in one paragraph, making it confusing and overwhelming.
   • Goals: To familiarise myself with the rules of touch football and become a qualified ref.
   • About Them: Name: Sarah Web, Age:17, Occupation: Part-time job at music studio, Education: High School, Location: Brisbane, QLD.

2. Task Requirments

   • Self-Determined Criteria
     • The website must be easy to read and navigate
       • Only incorporate 2 webpages and one homepage so that the user won’t find it confusing to navigate.
       • Only a summary of information in each description in a table/paragraph
       • Have a contents page
     • The website must include multimedia presentation
       • Include video of referee signals
       • Audio of whistle signals
       • Image of the field of play
   • Prescribed Criteria
     • Your website must have an aesthetic that suits/aligns with your User Persona
       • Touch Football Australia Logo
       • Homepage has photos of people playing touch.
       • Referee images on the Homepage
     • Your website must include TWO aspects styled using CSS • E.g. Background colour / Background image / font type / font colour
       • Varying font sizes and font styles in headings
       • Use of colour scheme of green and yellow
       • Use of Background touch image on homepage
     • You must use HTML to organise appropriate information on your webpages using FIVE of the following: • Image • Table showing information • Hyperlink to an external website • Ordered list or Unordered list • Button • Different heading sizes • Paragraphs • Video or moving image
       • Hyperlink to an external website that can provide extra information for the user on the homepage
       • Drop down button on the homepage to display information
       • Video or moving image to visually display plays and fouls.

3. Existing Solutions

   • Other websites such as Touch Football Australia
     • Pros
       • A reliable website
       • Lots of different courses and examples
     • Cons
       • Have too much information at once
       • Too many other information not relating to ref signals
   • Touch football referee videos
     • Pros
       • Can help user visually recognise signals through shown examples
       • Has audio and voiceover so the user can hear the whistle signals
     • Cons
       • Doesn't have descriptions and text for people who learn best while reading
       • Users have to search for videos

4. Coding Environment

   • Developer Tools
     • Notepad ++
       • Notepad++ is a text editor software used to write code.
     • Coding Language
       • HTML (Hyper Text Markup Language) and CSS (Cascading Styling Sheet)
   • Key Algorithms
     • Other Important Algorithms
       • <a href>, <img src>, <p>
     • Website Navigation
       • <nav class="nav-menu">

5. User Interface

   • User Interface Components
     • Links
       • Homepage
     • image
       • Hompage, Referee Signals
     • paragraphs
       • Referee Signals, Core Rules
   • Aesthetic
     • Colours
       • Green
       • Yellow