Website Design

Website Design

1. Task Requirements

   • Prescribed Criteria
     • Your website must include two aspects styled using CSS
       • Use CSS to code background colours, creating an aesthetically appealing website
       • Use CSS to change font style and colour for clarity and highlighting key information.
       • Use style tags to organise CSS information.
     • You must use HTML to organise appropriate information on your webpages
       • Include images for visual communication
       • Use buttons for ease of navigation
       • Use headings of different sizes
     • Your website must have an aesthetic that suits/aligns with your User Persona
       • Clean and simple design
       • Chess related images for aesthetic and informative purposes
       • Light brown and dark brown tones
   • Self-Determined Criteria
     • Your website must act as a beginner-friendly introduction to chess.
       • Introduce Core mechanics and rules
       • Explain Openings and tactics
       • Include a Rule of thumb

2. Coding Environment

   • Developer Tools
     • HTML Editor
     • Coding Language
       • HTML
       • CSS
   • Key Algorithms

3. User Interface

   • Features
     • Interactive chessboard
   • User Interface Components
     • Buttons
     • Images
     • Links
   • Aesthetic
     • Colours
       • Beige
       • White

4. User Persona

   • Needs: Want to learn chess in an engaging way that promotes naturally built awareness and understanding
   • Frustrations: Online chess tutorials that give explicit hints and creates puzzles that skip the opening and middle game, giving a position that is highly unlikely happen as a beginner.
   • Goals: Learn the fundamentals before understanding more advanced concepts (openings, tactics, a rule of thumb)
   • About Them: Magless Carlsen is 15 year old grade 10 high school student that lives in Brisbane, QLD. He likes problem solving and strategy games.

5. Existing Solutions

   • YouTube video tutorials
     • Pros
       • Easy to follow (it is being demonstrated, no need for interpretation from text
       • Can find very esteemed grandmasters at chess for tutorials
     • Cons
       • Limited engagement
       • Limited user input
   • Website tutorials
     • Pros
       • Inclusion of puzzles promote engagement and user input
       • Easy to navigate between different pieces of info. Buttons instead of finding time stamp
     • Cons
       • Can be harder to follow. Have to interpret text and visualise the board as images only capture one turn.