Low-Fidelty Patched Studio website end-result
Introduction
After finishing the branding for our studio Patched Studio, I got the task to make a prototype of our studio’s website which I also will be coding at end as well. I first made a low-fidelity wireframe version of the site than from there I also will be making mid-fidelty version of it. I used the Figma tool to make this wireframe.
Process
Low-fidelty wireframe design
During the making of the branding Identity we already have written which content we needed and the theme design we wanted to apply on the website. The pages consists of a landing/home , services page, about us page, Our work and Contact page. In the Landing page we will welcome the visitors and they will also be informed on what they can expect from us as a studio and there is a prompt for them to contact us for projects. There will also be a dia-show with images to advertise more about our Studio Patched. Since It’s a low-fi design I made a basic navbar without a footer, but I did add a placeholder mark where I will be placing our studio logo and images.
The next page is the About Us where I simply added 6 placeholders for the images of our faces and on the right will be a display, this will occur whenever the visitor clicks on the members of our team. The idea behind it is when they have clicked on the photo a small window will pop-up where the person’s details are displayed and also their role within their company.
The our work page will showcase our projects that we as Patched Studio have worked on. The header section will have some text and images and the mid-section will have our projects highlighted, the user can also make use of certain filter tags that will lead to the specific category of a project, which will be an easier way to navigate. Like the About us page, this page will also have a pop-up window appearing on the screen once clicking on the highlighted projects, so it will be going more in depth instead of a summary for the visitor.
On the contact page there will be a form where visitors can directly communicate to us. the form on this page will have 5 fields where the visitor can write their personal details and a message for support, requests and more. There is also a footer attached to the contact page with social media links, studio details and navigation.
Reflection
I made this low-fidelty wireframe for our website for a quick visualization and iteration design ideas that I could show my studio members and teachers to give them an idea on how the website will look like. With their feedback and validation it will allow me to make adjustments and move on to the next stage of the rapid prototyping, where I will be making an mid-fidelty website layout for my studio.