Website Design

Website Design

1. Task Reqiorements

   • Self-determinded Criteria
     • The website includes information about Natural Disasters.
       • I will provide Images featuring different Natural Disasters.
       • All paragraphs will contain specific details about certain Natural Disasters.
   • Prescribed Criteria
     • Your website must include TWO aspects styled using CSS
       • I will implement a background-color in CSS for my website by using the background-color: #ffffff; Also, a linear-gradient will also be used in the website to make the colour fade into another by using background: linear-gradient(135deg, #0057b7, #0080a1);
       • I will implement a font color in my website by using the color: #1c1d1f, which sets the text to a dark-grey color.
     • 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
       • I will use images in my website by using the <img> tag to provide real examples and details of natural disasters.
       • I will use unordered lists in my website by using the <ul> and </ul> tags to present the different types of natural disasters and the different effects they have.
       • I will use buttons in my website by using the <button> and </button> tags to foster easy navigation between different pages about natural disasters on the website.
       • I will use different heading sizes in my website by using the <h1> and </h1> tags, <h2> and </h2> tags, and <p> and </p> tags that are set to font-size: 20px which helps format the website and allows the information about Natural Disasters to be read more easily.
     • Your website must have an aesthetic that suits/aligns with your User Persona
       • I will make buttons, images, and text interactive.
       • The website will contain unique colours, rather than dull, common colours.

2. Coding Environment

   • Developer Tools
     • Notepad++
     • HTML and CSS
   • Key Algorithms
     • Website Navigation

3. User Persona

   • Needs
     • A website that contains information like types of natural disasters, effects, and ways of detecting them.
   • Frustrations
     • Websites are often boring and not interactive since buttons or links do not change when hovered over. Also, websites often have dull and boring colours which makes the website look less interesting.
   • Goals
     • I want to visit a website that tells me all about natural disasters and their effects.
   • About Them
     • Their name is Zac Wallaby. They are 14 years old and they are in Year 8. They live in Brisbane, QLD, and have a part-time job at MacDonalds. They like science, enjoy skydiving, and play touch football.

4. Existing Solutions

   • Solution 2: To make the website less dull, include uncommon and unique colours to make the website more engaging for the user persona.
     • Cons
       • It will take time to manually find and create colours, and test them in the website to check which one is the best.
     • Pros
       • The user persona will find the website more engaging and interesting.
   • Solution 1: To make the website more interactive, include buttons, images, and text that change when hovered over.
     • Cons
       • It takes extra code to allow the variable to change when hovered over, which means it could be more likely that a mistake could be made.
     • Pros
       • The user persona will find the website more interactive, therefore meeting the user persona's expectations.

5. User Interface

   • Features
     • Definitions for words
     • Search Bar
     • Contact Page
   • User Interface Components
     • Buttons
     • Images
     • Links
     • Video's
   • Aesthetic
     • Colours
       • Text Colour
         • Dark Blue
         • Black
       • Background Colors
         • Grey
         • White
         • Blue