Website Design

Website Design

1. Task Requirements

   • Prescribed Criteria
     • • Your website must include TWO aspects styled using CSS o E.g. Background colour / Background image / font type / font colour
       • Buttons will be bright yellow when they haven’t been clicked, and when the user hovers over them, they will become a cobalt blue. When the user clicks on it, it will become a pale yellow to show the user that the website has registered the click
       • Font colours will be ghost white to complement the colour themes and the background colour of the website
       • Font family will be…, so the website looks personalised
       • Background will be blue because it contrasts with the yellow buttons. Moreover, they are the colours of a volleyball
     • • 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
       • Buttons will be utilised in my website to help the user navigate between webpages
       • Include hyperlinks in my website so the user can access more information on volleyball.
       • Table to organise the information logically and make the website look neat. The table’s column headings will help the user quickly see the information they need
       • Implement a video or moving image because it can demonstrate to the user how rotation systems work in real life. It can also boost user interest and engagement
       • Include different heading sizes, so the user can perceive the importance of each piece of information. It can also keep the information organised and enables the user to easily scan the text.
     • • Your website must have an aesthetic that suits/aligns with your User Persona
       • Since my user wants an interesting website that explains the rotations systems in volleyball, the colour theme will be blue and yellow which are also her favorite colors
       • Images of volleyball and bold fonts to keep the young user engaged
       • Since the user is a child, complex volleyball terms will be simplified so she can easily process the information
   • Self-Determined Criteria
     • Extra information to ensure the user has successful training sessions/games.
       • Tips on what to bring/wear to the game and training sessions
       • Information on how to get used to rotation systems, so the user’s matches run smoothly
       • Drills to improve volleyball skills
     • Visual representation of information to improve the user’s understanding and processing of the text and drive their engagement
       • Include diagrams to visually present the information, so the user can visualise how the rotation systems work. This engages them and helps them easily comprehend complex concepts, enhancing their overall user experience.
       • Implement an image next to each block of information to keep the user interested
       • Videos to demonstrate to the user how the players move into their rotation systems, which helps them learn how to do it themselves and keeps them interested

2. Existing Solutions

   • Volleyball Waikato
     • Pros
       • Clearly explains the main offensive rotation systems in volleyball, so the user gains a thorough understanding of them
       • Concise, making it easier for the user to process the information
     • Cons
       • Confusing diagrams with complex terms
       • Not aesthetically pleasing and has very neutral colour palette , so it cannot keep a young person interested
   • Coaching Volleyball
     • Pros
       • Clear diagrams that visually represent the information, which is engaging
       • Tables
       • Headings and subheadings, which make the information organised. This enables the user to easily scan the information.
     • Cons
       • Complex terms
       • Confuses the user with unnecessary information

3. Coding environment

   • Developer Tools
     • Notepad++
     • HTML Editor
     • Visual Studio
     • HTML, CSS
     • Javascript
   • Key Algorithms
     • Website Navigation
     • Other Important Algorithms

4. User Interface

   • Features
     • Automatic width adjustment
     • Auto left and right margin
   • Aesthetics
     • Colour Palette
       • Consistency
     • Typography
     • Design
   • User Interface Components
     • Buttons
     • Images
     • Links

5. User Persona

   • Needs
     • They need the website to explain how the rotation systems in volleyball work. They need it it to ensure that they have a thorough understanding of how and when to move in volleyball matches after the serve.
   • Frustrations
     • Their frustrations are that volleyball information websites are usually long blocks of text which contain jargon, making it hard for a young person to comprehend the information. They dislike websites that don’t have visually appealing components and stylistic designs and layouts because they bore them.
   • Goals
     • User wants a detailed but understandable website that teaches her the rotation systems and how to move around in volleyball.
   • About them
     • They are in grade 6, primary school and are 11 years old. They live in Brisbane, QLD. They enjoy playing volleyball and are interested in athletics. Their favourite colours are yellow and blue.