Website design

Website design

1. User Interface

   • Features
     • Header
     • Table
     • Call to action
   • Uset Interface & Componenets
     • Other Features
     • Buttons
     • Images
     • Links
   • Aesthetic
     • Colour and contrast
     • Typography and fonts
     • Clear layout
     • Interactivity

2. Existing Solutions

   • Chess.com
     • Pros
       • Has Options where you can play chess
     • Cons
       • Very Advanced
       • Doesnt specifficaly tell how to set up baord
   • Wiki-How
     • Pros
       • Has multiple steps for different sections of learning
       • Very simple language so it is easy to learn
       • Has multiple images to help understanding
       • Green and white colors to look fresh
     • Cons
       • Very dull colouring and not attractive
       • Not good contrast in the heading

3. User Persona

   • Needs
     • They need to learn the basics and they need to learn some rules
   • Frustration
     • They don’t like how most websites only give the very basic or skip to advanced. He also doesn’t like how most websites have too many ads.
   • Goals
     • I want to Learn chess enough to make content out of it
   • About them
     • Gregory, 25-year-old is full time influencer living in Brisbane, QLD for university and is interested in board/video games

4. Task Requirements

   • Prescribed Criteria
     • Pc 1
       • • Your website must include TWO aspects styled using CSS
         • Background color
         • Font colour
         • Hover
     • P2
       • • You must use HTML to organise appropriate information on your webpages using FIVE of the following:
         • Image
         • Paragraphs
         • hyperlink to external website
         • Button
         • Different heading size
     • Pc 3
       • • Your website must have an aesthetic that suits/aligns with your User Persona
         • Clear layout
         • Appropriate colours
         • Interactivity
         • images
   • Self-Determined criteria
     • Must show the beginner rules for chess
     • Website must have more than 2 pages
     • Must show navigation bar at top for ever page

5. Coding Enviroment

   • Developer Tools
     • Visual Studio code Notepad++ Html editor
       • Visual studio is a free app used for coding websites
       • Notepad ++ is minimalist website which also is meant for coding
     • Coding Language
       • Html
         • Html is the language used for coding the content of the website
           • E.g. <p> For paragraph</p> <h1> For a h1 heading </p>
       • CSS
         • Css is a language used in coding for the styling of a website
           • <style> body { background-color: red; }
   • Key algorithms
     • Website Navigation
       • Buttons
         • Home Page
         • Page 2
       • Hyper Link
         • Chess.com
         • Wiki-How