Website Design

Website Design

1. User interface

   • User Interface Components
     • Links
     • Buttons
     • Images
   • Asthetic
     • Colour and contrast
     • Clear layout
     • Images and graphics
     • Interactivitly
   • Features
     • Heading
     • Table
     • Easy Navigation
     • Call to action

2. Existing solutions

   • PetRescue
     • Cons
       • Heading is small
       • Number is not correct
     • Pros
       • Colours are bright and atractive
       • Shows number of pets adopted
   • RSPCA
     • Pros
       • Colours are bright and attractive
       • animal in distress call point
     • Cons
       • Tells about bad stuff that happened to pets, may make user upset
       • strange to travel around in

3. User persona

   • Joe is a 17-year-old who works at MacDonalds and still is at school
   • Has 1 dog, wants another
   • Wants to adopt dog, but cant find a website
   • They want the website to look good and tell them about the pet they are adopting

4. Task requirments

   • Prescribed Criteria
     • Your website must include TWO aspects styled using CSS
       • Background image
       • font type
     • You must use HTML to organise appropriate information on your webpages using FIVE of the following:
       • Image
       • Ordered list or Unordered list
       • Button
       • Different heading sizes
       • Paragraphs
     • Your website must have an aesthetic that suits/aligns with your User Persona
   • Self determined Criteria
     • Must have at least 2 pages
     • Website must have good images

5. Coding enviroment

   • Developer tools
     • Notepad++
       • Notepad++ is an app used to design and create websites.
     • Coding language
       • CSS
         • CSS is a type of coding language used for styling website e.g body{ background-color: white; background-image: url("Background2.webp") ;
       • HTML
         • HTML is a type of coding language used to create the content of a website e.g <h1> Home page </h1>
   • Key algorithms
     • Website Navigation
       • Buttons
         • Takes users to other pages of website
         • Home page
       • Hyperlinks
         • Takes users to external websites