Jane Smith Ceramic Studio

A live version of the page can be viewed here

This website is made for Jane Smith, a fictional ceramist based in Austin, TX who wants to present and sell her work to potential customers or business clients. The site features links to her shop, a gallery of her work, information about the ceramist, links to her stockists and a contact page.

UX

The Goals For This Website Is To:

Give a good and professional first impression to customers and retailers.
Be user-friendly.
Sell products to customers or retailers.
Show customers where to buy the products.
Show a wide range of items to a customer who's looking for a unique piece for their home.
Show a wide range of items to a retailer who wants to find good handcrafted products for their store.
Let users know that the ceramist is open to collaborations.
Make it easy for users to contact the ceramist.

User Stories

As a potential customer I want to visit her shop to find out what products I can buy.
As a fan of the ceramist I would like to find where the nearest stockists are located so that I can purchase her products.
As a fan of the ceramist I would like to find her social media sites so that I can keep updated about her work.
As a curious new visitor to the website I would like to know more about the ceramist and her work.
As a follower on social media I need to find her shop so that I can buy the product I saw in her latest Instagram post.
As a retailer I would like to view her collection of products to see if it's something I would buy for my store.
As a retailer I want to find the contact information so that I can get in touch with her for business inquiries.

Design

I wanted the site to be easy navigated with a clean and minimalistic design. The colors I’ve used for the project is a light grey, #777777, and a warm terracotta, #E2725B. I chose these colors because they are easy to read on screen and also the two most common colors on clay that’s used for pottery which gives the site an earthy tone and a thought through theme.
The images used throughout the site is carefully choosen and is of great importence to showcase the ceramist work and to give a feeling about who she is. The photos of her work is unified in their visual appearence to give a professional touch to the site and the photos of the ceramist is ment to be more personalized. The purpose of the hero image on the landing page is to give a calm first impression and also show the skills of the ceramist. All images sourced via Unsplash and Pexels.

Wireframes

Features

Header - A fixed header that exists on every page to make it easy accessible at all time. The logo is located to the left and by clicking it the user returns to the home page. The navigation menu is located to the right for the user to easy navigate through the different pages.

Navbar - Each page features a responsive Bootstrap navbar that’s collapsed to a burger icon when viewing on smaller screens. The navbar has an hover effect so when the user hovers over the different pages the text changes color. The same color is used to show which page the user is currently on.

Home - The home page features a hero image with the text "Jane Smith Ceramic Studio, Handcrafted Homeware" and a call to action button that guides the user to her shop. The image shows some of the ceramic items that she makes and this, in combination with the text, provides the user information on what the website is about. I wanted the ceramist to somehow be able to sell her work through the website but since we haven't learned the technologies to implement that yet I decided that I'll show her work in an image gallery and let people place orders through the contact form. This didn't feel right with what I wanted to achieve and after having discussed the issue with my mentor we talked about adding a link to an online materketplace outside the page, like Etsy. I think this solution made the website gain clearer purpose.

Gallery - The gallery page features a masonry gallery with images of all her work. When you click the images they opens in a fancybox.

About - The about page features a photo of the ceramist to present the person who’s making the items. The page also provides a short text that gives some information about who she is and her thoughts about her work. You can also read that she’s available for collaborations.

Stockists - The stockist page features an unordered list with links to all her stockists so that users easily can access their websites and get information on where to purchase her items.

Contact - The contact page features a form where the user can enter their name, email address and a message. The page also features another photo of the ceramist.

Footer - A fixed footer that exists on every page. Located in the center of the footer are four social media icons with links to the ceramist social media pages. The links have the same hover effects as the navbar and changes color when hovering over them.

Features Left To Implement

A webshop so that customers easily can buy her work without beeing redirected to Etsy.com.
The forms functionality.

Technologies Used

HTML5 and CSS3
GitPod - The developer used GitPod for their IDE while building the website.
GitHub - This project uses GitHub to store the projects code after being pushed from Git.
Bootstrap - This project uses Bootstrap to make the site responsive and to implement features such as the navbar and the buttons.
FontAwesome - This project uses FontAwesome for social media icons.
Google Fonts - This project uses Work Sans from Google Fonts.
Balsamiq - The developer used Balsamiq to create wireframes.
DevTools - The developer has used DevTools to test responsiveness and diagnose problems. The tool Lighthouse has been used to improve the website's quality.
Tinypng - The developer used Tinypng for compressing images.
Freeformatter - The developer used Freeformatter for beautifying HTML and CSS code.
Fancybox - This project uses Fancybox for image gallery.
A11y - The developer used A11y for checking the websites color contrast accessibility
Am I Responsive? - The developer used Am I Responsive? for creating the mockup image in the beginning of this README file.
InDesign The developer used InDesign for creating the logo image.

Testing

I Manually Tested The Following Features

Logo image in header navigates back to Home page on every site.
Links in navbar takes you to the correct pages.
Hover effect on links in navbar.
Action effect on actual site your visiting.
All links works and opens in a new tab window.
The form checks if it has the correct input before submitting.
Responsiveness looks nice on all major device sizes.
All links to social media sites opens in a new tab window.

Testing User Stories

As a potential customer I want to visit her shop to find out what products I can buy.
- On the landing page is a call to action button that says "SHOP NOW" which leads you to her shop on Etsy. The button is in a terracotta color to clearly stand out from the background. On every page is a navbar on the top right with a link to the SHOP for easy navigation at all time.
As a fan of the ceramist I would like to find where the nearest stockists are located so that I can purchase her products.
- On every page is a navbar on the top right with a link to the STOCKIST page for easy navigation at all time. On the Stockist page you'll find a list with links to all the stores who keeps her products and where the stores are located.
As a fan of the ceramist I would like to find her social media sites so that I can keep updated about her work.
- In the footer on all pages are links to her four social media sites which makes them clearly visible at all time.
As a curious new visitor to the website I would like to know more information about the ceramist and her work.
- On every page is a navbar on the top right with a link to the ABOUT page for easy navigation at all time. On the About page you can read a bit about her background, the thoughts behind the products the makes and that she does custom work on request.
As a follower on social media I need to find her shop so that I can buy the product I saw in her latest Instagram post.
- On the landing page is a call to action button that says "SHOP NOW" which leads you to her shop on Etsy. The button is in a terracotta color to clearly stand out from the background. On every page is also a navbar on the top right with a link to the SHOP for easy navigation at all time.
As a retailer I would like to view her collection of products to see if it's something I would buy for my store.
- On every page is a navbar on the top right with a link to the GALLERY page for easy navigation at all time. The gallery features images of her work that opens in a fancybox when clicked.
As a retailer I want to find the contact information so that I can get in touch with her for business inquiries.
- On every page is a navbar on the top right with a link to the CONTACT page for easy navigation at all time. On the page is a contact form for a quick way to get in touch with the ceramist.

During Development I Fixed The Following Bugs

Mobile responsiveness for about page not worked as intended. Image appears too small and does not move to underneath the text.
- changed setting from col-6 to col-12 col-lg-6
Mobile responsiveness for stockists page not worked as intended. Image appears too small and does not move to underneath the text.
- changed setting from col-6 to col-12 col-lg-6
Mobile responsiveness for contact page not worked as intended. Image appears too small and does not move to underneath the text.
- changed setting from col-6 to col-12 col-lg-6
Header remained transparent when scrolling which made the menu difficult to read.
- Added bg-white to navbar class.
Unable to customize color on navbar menu when hovering.
- Added !important; to .menu a
Unable to customize color on active pages.
- Added !important; to .active
Send Button in the form on the contact page was hidden behind the image on small devices.
- Removed position:absolute from .button-text-form
Mobile responsiveness for hero image not working + Mobile responsiveness for hero text not working. Text size does not decrease and is overlapping.
- Added class name hero-container to <div class="container-fluid"> and linked the image with CSS instead of <img> element in the html like I did first. Added class name jumbotron from Bootstrap to my section element and placed text and button inside that section instead of in seperate div elements like I did from the beginning.

HTML Testing

https://validator.w3.org/ No errors or warnings to show.

CSS Testing

https://jigsaw.w3.org/css-validator/ No errors or warnings to show.

Deployment

To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:

Navigate to flisanp repositories.
Select the one that is called ms1-ceramic-studio from the list.
Click on settings in the menu that is located to the top right.
Scroll down to "GitHub Pages"
Under "Source", Select Master Branch from the drop-down menu.
Click Save and the website is now deployed.

How To Run The Code Locally

Log inte Gitpod with your account.
Navigate to the repository.
Click the green GitPod button on the top right.
A new workspace will be created.

Credits

Content

The content of the website is fictional but to seek information and inspiration from other ceramists I have visitied these sites:

https://madokarindal.com

https://www.catherinedixceramics.com

https://www.handandfire.com

https://www.victoriamorrispottery.com

https://www.epocaceramic.com

Code

Code credit for adding Fancybox to image gallery

Stack Overflow was used for solving a issue to override btn color in Bootstrap: https://stackoverflow.com/questions/28261287/how-to-change-btn-color-in-bootstrap

w3schools.com provided device breakpoints in CSS: https://www.w3schools.com/css/css_rwd_mediaqueries.asp)

Media

Hero Image on Home page by Tom Crew on Unsplash
All photos on Gallery page by Tom Crew on Unsplash
Photo on Stockist page by Tom Crew on Unsplash
Photo on Contact page by Gustavo Fring on Pexels
Photo on About page by Gustavo Fring on Pexels
Text written with inspiration from Victoria Morris and Madoka Rindals
Logo in Header made by me

Acknowledgements

Mentor Sinead O'Brien for valuable feedback throughout the project.
Friends and family for good input and for testing the usability of the site and responsiveness on different devices.

code-institute-submissions / ms1-ceramic-studio Goto Github PK

ms1-ceramic-studio's Introduction