Website Design- Pet Adoption

Website Design- Pet Adoption

1. User Interface

   • Aesthetics
     • Colour and Contrast
     • Matching Fonts
     • Clear, organised layout
     • Images
     • Graphics
     • Interactivity
   • User Interface Components
     • Buttons
     • Images
     • Links
   • Features
     • Heading
     • Table
     • Easy Navigation
     • Call to Action
     • Testimonials

2. Existing Solutions

   • Pet Rescue
     • Pros
       • Large pet variety
       • Clear categories
       • Detailed pet profiles
     • Cons
       • Inconsistent Information
       • Overwhelming options
       • Locations don’t cover QLD. So this could be inconvenient
   • RSPCA QLD
     • Pros
       • Organised Layout
       • Locations are convenient (in QLD)
       • Clear adoption steps
     • Cons
       • Less variety
       • More text
       • Navigation is sometimes confusing

3. Coding Environment

   • Developer Tools
     • HTML Editor
       • It is a software application that provides features to make coding easier and faster
       • It is used to write, edit and manage HTML code for building web pages
     • Coding Language
       • HTML
         • HTML stands for HyperText Markup Language. It is the standard language used to create and structure the content of web pages
         • <p> </p> for paragraph
       • CSS
         • CSS (Cascading Style Sheets) is a stylesheet language used to define the visual presentation and layout of a document written in a markup language like HTML
         • h1 { color: blue; font-size: 24px; } for header 1 to turn blue and font-size to be 24 px
     • Notepad ++
       • It is a source code editor for Microsoft Windows
       • It is used to code, script, manage tasks automatically and edit text
     • VS Code
       • It is developed by Microsoft is a free, popular source-code editor
       • It is used by developers to write, edit, and debug code
   • Key Algorithms
     • Website Navigation
       • Buttons
         • Home Page
         • Page 2
         • Page 3
       • Hyperlinks
         • RSPCA QLD
         • Pet Rescue
         • Other pages on my website

4. Task Requirements

   • Prescribed Criteria
     • Your website must include TWO aspects styled using CSS.
       • Background colour
       • Font colour
       • Font type
     • Your website must have an aesthetic that suits/aligns with your User Persona
       • Appropriate Colours
       • Clear Layout
       • Typography
     • You must use HTML to organise appropriate information on your webpages using FIVE of the following:
       • Image of cute pets ready for adoption
       • Table showing pet types and usual cost ranges
       • Hyperlink to other websites for more information or other pages in my website
       • Ordered or Unordered List of most popular breeds of certain pets
       • Paragraphs explaining breeds of pet, price, and adoption process
   • Self-determined Criteria
     • Website must maintain a consistent aesthetic across all pages
       • Same colour palette
       • Consistent font styles
       • Uniform layout structure
     • Website must clearly explain information regarding pet adoption so that readers can understand
       • Enough information
       • Not too much text
       • Avoid complex terminology

5. User Persona

   • Needs
     • Pets are healthy, well taken cared of, and microchipped
     • Images of pets
     • Information about breeds, price and adopting process
   • Frustrations
     • Huge amount of text
     • Background is distracting
     • Background colour blends in with the text
   • Goals
     • Wants a pet
     • Wants to adopt a pet
     • Looking for a website that gives information regarding pet adoption
   • About them
     • Name: XiaoYun
     • Lives: Guangzhou China
     • 22 years old
     • Working part-time at Haidilao
     • University student
     • Likes spending time with friends but would like a companion