FurBuddies HTML & CSS Website Project
By: Irene
Chong Ai Ling
ABOUT
THE
PROJECT
ABOUT
THE PROBLEM
Target Audience:
Dog Owners and Volunteers
Tools:
Adobe XD,
HTML & CSS
Our task is to create a website from scratch regarding three given topics. I have chosen to focus on an animal rescue website. We would need to provide site maps, flow diagram and last wireframes and prototypes of the website.
SOLUTION
I have created a website consisting of a logo, color scheme, and web layout. It is regarding a dog shelter called FurBuddies Society. It has a responsive layout and is interactive. I have chosen earthy tones due color association with animals and nature. Through this website users can view adoptable animals in their area and also frequently asked questions and details regarding adoption and volunteering.
UX Tools: Site Map, WireFrame, Prototype, Moodboard
TABLE
OF
CONTENT
01
SITE MAP
03
DESIGN
RATIONALE
02
FLOW DIAGRAM
04
PROTOTYPE
01
SITE MAP
02
FLOW DIAGRAM
Moodboard
Colour, Fonts and Website Language
Colour Scheme:
I have decided to use nature earthy tones for the web design as it references a color tip for pet brands, it is advisable to use muted colors and not use primary palettes.
​
The reason is because,
-
Primary colors-> used together can look childish and look like a discounted brand.
-
Earth tones are the safer bets as it will match the colors of the animals well.
Fonts Used:
Arial, Helvetica, sans-serif
Website Language:
Personable yet professional (using anthropomorphism in designing interactions)
Through:
•Humanist Language as System Default (Less robotic and personal through words spoken)
•Let your Interface be Expressive.​(Using bright but natural colors that’s related to nature.)
Logo:
Three Selected UI Design Pattern
Slideshow (Dealing with data)
​
-
I have decided to use “Gallery” as it is a great way to place important content for users to view as the big hero image will capture the user’s attention.
-
Users will be able to view multiple articles at once allowing me to direct the user to important points of my content without them needing to view lengthy content that may bore them.
-
I will only be using this effect sparingly as this would make my website seem attention-demanding and busy hence visual clutters. (Reducing the intuitiveness of the website and users interested.
This will be good for if I have any urgent issues regarding the animal organization (e.g Donations, or Animals urgently looking for homes)
​
Key points of using, slideshow
​
-
Make it possible for consumers to swiftly scroll through content.
-
Catch and hold the user's attention through straightforward navigation, interesting information, and calls to action.
-
Instead than engaging with the browser, help direct users' attention to the content.
​
Frequently Asked Questions (FAQ) – formatting data
​
-
It may be a hassle for users to constantly refer to customer services in regards certain issues that could be easily solved.
-
FAQs will be implemented in my website so that users will be able to look for any concerns they have easily and only message the organization for any enquires that may not been stated through the enquiry page.
-
I can also used, the “enquiry page” to collect common questions I may not have addressed in order to add onto the common concerns users may have in regard to the animal organization to better utilize the FAQs page.
Gallery (Design pattern dealing with data)
​
-
It may be a hassle for users to constantly refer to customer services in regards certain issues that could be easily solved.
-
FAQs will be implemented in my website so that users will be able to look for any concerns they have easily and only message the organization for any enquires that may not been stated through the enquiry page.
-
I can also used, the “enquiry page” to collect common questions I may not have addressed in order to add onto the common concerns users may have in regard to the animal organization to better utilize the FAQs page.
-
Since the purpose of the animal organization website is to showcase the available dogs for adoption, a gallery is needed in order to better promote the animals.
​
-
This will cause higher chance of engagement as users not much words are used. Which will not hinder the user’s attention or create visual clutters. User can easily click on any animals they are interested in to see further information in regard to it hence able to retain user’s interest.
Wireframes for Website
Wireframes for Mobile
03
DESIGN RESEARCH
04
PROTOTYPE