Studio Website Case Study For Earth Art
Introduction:
Earth Art is our home ceramic studio, where we teach, that started out when our children were young, grade school age. I invited a few of our daughters friends over for a 6 week clay exploration. The parents wanted it to continue, so we have been teaching ever since. We are on Facebook and Instagram but we had not had a website. I really felt passionate that I wanted to have a web presence. I want the atmosphere of the studio to be inviting, relaxing and a place to explore and create. The website should convey that message.
Background:
I began researching what other studios in the Hudson Valley have been offering and how they created their website. Some are really inspiring while others were really difficult to use and navigate. I wanted to create a simple, easy to use, direct, to the point site. With COVID we have not advertised or really had classes on a regular basis. We are read to offer the community a place to go to explore clay and relax. The setting is our house, in the woods, the foothills of the Catskills.
So why would you chose this studio over others?
Personas & User Flow:
The personas and case studies are done at the beginning stage of the designing for the website. Here, I went to the site thispersondoesnotexist and found 3 fictitious faces generated by a computer. The information created is all based on my feelings about the photo. This process is really fun and provides insight into who you will be designing the website for. Its like the marketing research for a website. Who's going to go to Earth Art? And why?
Sitemap:
A sitemap is the foundational structure to organize and list the pages for the website. There are 3 pages in the Earth Art website: the home page, the about page and the page of classes and information form. There is lots of information that is under each page and the sitemap organizes the detail for each page.
Wireframes:
A wireframe is used to design the structure of the website. The software used here is Miro Board. The wireframe is the blueprint or skeletal frame for the website. Here you lay out where your images and text will be placed. You design the top navigation bar, the bottom information or footer and work out the layout of information within a broad structure.
Mockup:
This is a mockup created un Figma. Mockups are used as a template or blueprint for the design of the website. In this stage of the design process you create a replica of the website in the Figma software app that will help to the designer to see and work out any problems before you write the code. It is full size replica of the website designed for an Apple 13 phone.
Prototype:
Here is the prototype of the website created in Figma for an iphone 13. It is fully functional with all the pages clickable and ready to create in code. Here you can assess if you need to make changes to the structure or edit the type. I made changes on the photos and the tittle after seeing this.
Here is the Earth Art WebHere is the Earth Art Website created in Glitch now on Github:site created in Glitch now on Github: https://pellegrt2.github.io/earth-art/