Website Design

Website Design

1. Task requirements

   • Prescribed Criteria
     • Your website must include TWO aspects styled using CSS
       • E.g. Background colour / Background image / font type / font colour
     • 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
     • Your website must have an aesthetic that suits/aligns with your User Persona
       • Using the User Persona, look at their Age group, Location, Occupation, Goals, Needs & Expectations, Frustrations and Interests to further personalise the website to their liking
   • Self Determined Criteria
     • To gamify the website to make it more interactive
       • Change the font to a more game-like font
         • Comic Sans
         • Aharoni
         • ADLaM Display
       • Make the button game-ified
         • The button goes in when clicked
         • Slightly darker shaded
         • Button for music (Changeable game music)

2. Existing Solutions

   • HarvardX
     • Pros
       • Really good University Courses
       • Goes over a span of a term, making it reasonable to learn
     • Cons
       • Really Boring
       • Very lengthy
       • No teachers/tutors
   • Duolingo
     • Pros
       • Gamified
       • Interactive and quizzes users for recall
     • Cons
       • No university courses
       • More suitable for basic language learning

3. User Interface

   • Aesthetic
     • Colours
       • Background
     • HIghlighted text
   • User Interface Components
     • Buttons
     • Images
     • Links
     • Hyperlinks
     • Videos or moving images
   • Features
     • Different Modes
       • Classic/modern
       • Dark Mode
       • Dungeon
     • Sidebar
     • Search Bar
     • Logo

4. Coding Environment

   • Key Algorithms
     • Website Navigation
   • Developer Tools
     • VSCode
       • A source code editor with powerful developer tooling, like IntelliSense code completion and debugging
   • Coding Language
     • CSS
       • Cascading Style Sheets
       • Used to style the website
     • HTML
       • HyperText Markup Language
       • Used to create the frame of the website

5. User Persona

   • Wants
     • More interactive/entertaining university courses
     • Something related to his favourite game
       • League of Legends
   • Needs
     • University Courses (either online or physical)
   • Details
     • In Seoul National University
     • Trying to be Software Engineer
     • Korean young adult called Kim Tae Ho