Website Design

Website Design

1. Task requirements

   • Prescribed criteria
     • Your website must include TWO aspects styles using CSS E.g. background colour/background image/font type/ font colour
       • Font type
         • Arial
         • Lucida Console
       • Font colour
       • Background colour
         • Lilac
         • Light blue
         • Light yellow
         • Light green
       • Background image
     • You must use HTML to organise appropriate information on your webpage 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 Person
   • Self-prescribed criteria
     • I want an interactive website
       • A website that uses buttons that are decorated and is aesthetically pleasing towards the user and gives the user an easy yet fun way to navigate throughout the website

2. User Persona

   • Wants
     • A fun engaging website that keeps them entertained while still being able to use it easily and gain all the information they are looking for
     • Not too many words and visual references
   • Needs
     • A website that will recommend age appropriate movies
   • Details
     • The user is a young teenager so the website needs to be straightforward and easy to use
     • The website should be able to be navigated clearly
     • Interactive buttons and fun colours

3. Existing Solutions

   • Wikipedia
     • Pros
       • Includes movie suggested
       • Detailed
     • Cons
       • Too many words
       • Not interactive
       • Very boring looking

4. User interface

   • Aesthetic
     • Colours
       • Lilac
       • Light blue
       • Light yellow
       • Light green
   • User Interface Components
     • Buttons
     • Images
     • Links
   • Features
     • Light mode

5. Coding environment

   • Developer tools
     • Notepad++
   • Coding language
     • HTML
     • CSSt
   • Key algorithms
     • Table: <table> </table>
     • Style: <style> </style>
     • Break lines: <br>
     • Unordered list: <ul>