Webpage design

Webpage design

1. Task requirements

   • Prescribed criteria
     • Use CSS Styling
       • Website must include a background colour.
       • Website must use a readable font style and size.
       • Website must include at least one additional CSS feature (e.g. borders, hover effects, text colour).
     • Use HTML Elements
       • Include headings and paragraphs to organise information.
       • Include at least 5 images of pets.
       • Include at least one hyperlink to an external website.
     • Meet User Persona Needs
       • Use colours and layouts that appeal to the target user.
       • Website must display pets available for adoption.
       • Include important pet information (age, breed, vaccination status, etc.).
   • Self determined criteria
     • Easy Navigation
       • Navigation buttons are clearly labelled.
       • Users can find information within 3 clicks.
       • All pages must be accessible through a navigation menu.
     • Attractive Design
       • Maintain a clean and uncluttered layout.
       • Include images and graphics to make the site engaging.
       • Use a consistent colour palette throughout the website.

2. User persona

   • About them
     • 21
     • Part time worker at gong cha
     • Likes cats
   • Needs
     • Cats that meet the requirements
     • An aesthetically pleasing website
   • Frustrations
     • All the pet websites are too plain and boring
     • The pets do not reach her requirements
   • Goals
     • Graduate from university with a masters degree in neurology
     • Have 2 cats

3. Existing solutions

   • Pet rescue
     • Pros
       • Easy to navigate
       • Cute pets
     • Con
       • Not in the area
   • Rspca
     • Pros
       • Wide variety of pets
       • Very respected website
     • Cons
       • Pets arent in area
       • Some pets aren’t very specified

4. User interface

   • Features
     • Pastel colours
     • Fonts
   • User interface components
     • Links
     • Images
     • Buttons
   • Aesthetic
     • Colours
       • Pink
       • Lavenderblush

5. Coding environment

   • Hey algorithms
     • Other important algorithms
     • Website navigation
   • Developer tools
     • Notepad++
     • Coding language