Summary
An adoption website with three distinct layouts. Home, Adoption and Shop are utilized on both mobile and desktop platforms. This project aims to create a website that is both easily navigable and reflects the tone and topic of the organizations services.
Programs Used
Figma, Illustrator for the logo and Photoshop is used for mock ups
Logo
A word mark emblem featuring The " A " replaced by a paw symbol, along with the organization's primary motto, "Adopt, Don't Shop". The logo instantly communicates the organization's vision and mission to the audience.
Colour Palette
The complementary colour scheme effectively captures the two contrasting moods of the website. One side reflects the company's fun and enthusiastic mission, while the blue represents the more serious and professional aspects of adoption responsibilities.
Typography
A web-optimized typeface has been specifically selected for the website. chosen for it's readability, this typeface ensures clear and legible text across different devices and screen sizes.
Lowfi Wireframes
Content Rationale
Image Uses
A carefully chosen collection of close-up photos of adoptable animals is shown to the public in an effort to pique curiosity and encourage potential adoption.
Layout and Structure
Desktop Version
the desktop version uses a 12-column grid with 20px gutters and a 50px margin for a clean and structured layout. it starts with the navigation, followed by a hero image that aligns with the content of each page. on the adoption and shop pages, a filter option is placed after the hero image, allowing users to quickly find results without unnecessary navigation. at the bottom of each page, the company's mission, objective statements, certifications, social media links and a newsletter subscription are located here.
Mobile Version
A grid consisting of eight columns, a 0px margin, and 20px gutters is utilized for the mobile version. The information is layered onto one another, with a swiping arrangement for particular objects (such as adoptable animals, items that may be purchased, etc.).
Rounded Corners
adds friendliness and approachability to the website, rounded curves are used for the buttons and image placeholders.
Desktop flats
Mobile Flats
Mockups
