01 / OVERVIEW
Designing Interfaces - Patterns
Designing Interfaces – Patterns put the skills gained so far into practice. This course explored UX and UI concepts to create better websites.
This course explored the use of Interface and UX patterns that can help the user/visitor in successfully accomplishing their tasks. Throughout the duration of the course, many UX Laws were described and defined, paying close attention to how they could be implemented within the project. A wireframes and final prototype was then created.
I took this course during the Summer of 2021. During the course, I created a concept/idea for a niche type of cat shelter, wireframes, and a prototype of the website.
02 / CONTEXT
How it Went & Creating a Cohesive Cat Shelter Website
The final project of this course was to create a website that utilized quite a few UX principles and concepts. For example, applying Fitts’ law to designing interfaces will give the user a feeling that the app they are interacting with is seamless and they won’t have to think too much about using the app (which is what we should strive to do, allow the user to not think too hard about interaction with the app and get them where they want to go.)
Long ago, when I earned a web development and design degree, I explored creating a shelter website and what that entailed. Using that as inspiration, I was able to in a way iterate on that concept and create something truly special and unique.
03 / WIREFRAMES
Exploring Patterns While Making Wireframes
One of the required assignments was to create wireframes and iterate upon them with feedback from the professor.
Most of the users of this website would be looking for a furry family member to adopt and may even be looking to save one with special needs.
To better understand this specific user journey, I created wireframes to help visualize this and to continue to iterate on the idea. For the wireframe of the website, it was advantageous to have something to showcase that would be easily implemented and also easy to follow, also applying specific Laws of UX such as Fitt’s Law and patterns such as wayfinding and grid of equals.
04 / PROTOTYPE
Prototyping the Website
After creating the wireframes, a prototype was created in Adobe XD. This prototype included different types of pages, a navigation/menu, and specific to shelter websites, details about adoptable pets. Due to time constraints, it was a fairly basic walkthrough of what could potentially be available to the user.
The option to preview the interactivity and share it online proved to be incredibly helpful in seeing what worked and what didn’t work.
05 / REPORT
Reporting the Findings
After creation of the prototype, a report was created. This report outlined reasonings and gave a quick detail of the patterns used while creating the website.
View the PDF here.
06 / RESULTS & OUTCOMES
What Was Learned
Coding the Website Would Have Been Fun
I tend to find myself loving the steps taken to create a website like this, and knowing it had evolved from a previous idea (from when I earned a different degree,) was in a way iterating on the original idea from long ago. As always, I would have loved to try to truly create this website and continue to iterate upon it.
PREVIOUS PORTFOLIO ITEM
NEXT PORTFOLIO ITEM