Website Design

Website Design

1. Task Requirement

   • 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
   • Self-Determined Criteria
     • The website must be easy to navigate, informative and aesthetically pleasing.

2. Existing Solutions

   • Changing the background colour and text colour using the dark mode and light mode buttons
     • Pro: My user can change the website's background and text colour themselves with the "Dark Mode", "Light Mode", "Blue Mode", "Red Mode". This way, my user can change the colour of the background and the text with one click of a button
     • Cons: Despite givng the user the option to customise their own background and text colour, there is not much of a selection and the limited amount of buttons may prove disappealing to the user's taste making it aesthetically unappealing for the user.
     • Pro: There are a lot of webpages that meet the user's demands as each webpage is relevant and contains information about maths and science.
     • Cons: Despite this, I have a lot of webpages (10 webpages) that will perhaps be confusing for my user to navigate through my webpage.
     • Pro: My website is simple-looking and is not very text-heavy
     • Cons: This in turn may be boring for my user as it might be too simple. Also, it may be less informative due to the lack of text.
     • Pros: My website has images that act as visual representations for my information. Also, they make the website look good.
     • Cons: There may be too less images making my website a bit bland and underwhelming for my user. So next time, I could add more images making my website look even better.

3. User Interface

   • Aesthetic
     • Colours
       • I have used different buttons (Light Mode, Dark Mode, Red Mode, Blue Mode) that changes the colours of the background and the colours of the text to each specific button.
     • Not text-heavy.
     • Images
   • User Interface Components
     • Button
       • There are buttons on my webpages that link to my other webpages. Also, buttons are used to change the background colour and text colour (my dark mode and light mode buttons). Overall, my buttons used in my website are used for aesthetic appeal and is also used for easy navigation for my user.
     • Images
       • Images from my Links for Slideshow website include the Issac Newton Image, Albert Einstein Image, Pythagoras Image and my Fermat Image
       • I have included various images on my events webpages
     • Links
       • There are various links leading to my webpages and external helpful links in my website.
   • Features
     • A light mode, dark mode, blue mode and red mode button can be changed by the user to adjust the background colour and text colour. I have used them in my webpages.

4. Coding Environment

   • Developer Tools
     • Notepad ++. Notepad ++ is a free open source editor created by Don Ho in September 2003.
     • Testing tools
       • Brave was used to open the website and was used for testing.
   • Coding Language
     • HTML is the skeleton of the webpage. Being used to structure a webpage’s structure and tells the webpage how to show and display the information.
     • Cascading Style Sheets or CSS is a language used to specify the presentation and styling of a document that is written in a markup language such as HTML or XML.
     • JavaScript is a scripting language used to develop web pages. Developed in Netscape, JS allows developers to create a dynamic and interactive web page to interact with visitors and execute complex actions. It also enables users to load content into a document without reloading the entire page.
   • Key Algorithm
     • Website Navigation
     • Slideshow
     • Aesthetic appeal

5. User Persona

   • Wants
     • Welt Yang wants an aesthetically pleasing website making it not boring to look at whilst learning. To accomplish this, he wants a website with a lot of images, a variety of background colours and links to make his learning even more engaging.
   • Needs
     • Requires an informative website that has various links directing him to math and science websites that acts as study resources for his upcoming exam. In addition, requires websites that provide practise materials for his upcoming exams.
   • Details
     • Welt Yang: Age 17.
     • Education: Is currently in high-school.
     • Goals: They are currently studying hard for university.
     • Interests: Math and Sciences
     • Occupation: Student
     • Location: Sydney
     • User Problem Summary: Welt Yang is currently studying hard for his ATAR. However, he notices he is currently struggling with Math and Science. He requires a website that contains study resources and practise materials for math and science allowing him to get better at those certain subjects.