Programs Used
Figma, Illustrator for the logo and Photoshop is used for mock ups.
Overview
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.
The Websites' Logo
Logo
A word mark emblem featuring an O replaced by a paw, along with the organization's primary motto, "Adopt, Don't Shop". This implies what the mood and tone of the organization to the audience immediately from the logo.
The Websites' Homepage
Colors of the Website
The complementary color scheme that was used captures the two contrasting website moods.
Tabby Orange
Since the website features adoptable animals, this color stands for the playful part of it. This serves to inform the viewer of the pets' potential for happiness if they are eventually adopted.
Forever Home Blue
This name blends the reassuring and optimistic notion of a caring, long-term home. Furthermore, to illustrate that getting a pet and taking care of it are big commitments.
The colors of the brand and the website
Typography
Logo Typeface: Hey Charlie
A playful typeface that embodies one of the organization's themes, it conveys a happy and energetic vibe.
Headers and Body Typeface: Robotic Mono
An extremely adaptable typeface that may be used for both readable body text and attention-grabbing headers.
Website Version of the Adoption Page
Website Version of the Store Page
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
A 12 column grid with 20px gutters and a 50px margin is used for the desktop version. The desktop version's layout begins with the navigation and moves on to a hero image that is relevant to the content of each page. A filter option is positioned after the hero image in the adoption and shop pages to make it easier for users to locate what they're searching for fast and without navigating through a lot.The company's objective and mission statements, certifications, links to its social media platforms, and a newsletter subscription are located at the footer of each page.
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
Because they add friendliness and approachability to the website, rounded curves are used for the buttons and image placeholders.
Flats of the mobile layouts
Issues Involved
Repetitive layout
When I initially started working on this project, I discovered that every page in my early versions was quite identical. giving the viewers a dull and uninteresting experience. I had to create a layout that is sufficiently unique without being absurd, and for user experience (UX) reasons, it also had to have a hierarchy that's very easy to understand.
The mobile layout
In order to keep each page's stack layout manageable without making it too long to scroll down, the mobile version needed some effort to figure out. In order to prevent users from having to swipe too frequently, I fixed the issue by giving some of the specified items a scroll function and then adding a view all button.
Desktop layout mock up
Program Utilization
This project largely makes use of Figma. In addition,both desktop and mobile versions are created here.
The website's logo was made with Illustrator.
For the mock ups, Photoshop is utilized
Mobile layout mock ups
Project Insights
As I was not familiar with the best practices for organizing desktop and mobile versions, this project took a long time to complete. For the mobile versions, a great deal of research is required, along with numerous changes.