View the live project in GitHub Pages
- Project overview
- User Experience UX
- User stories
- Five planes of UX
- Features
- Technologies used
- Testing
- Bugs and challenges during the project
- Deployment
- Credits
- Acknowledgements
This is a user-centric static website for Sabrina Cardani and Elisabetta Schiavini, two ceramic artists based in Italy. As the artists are Italian, the website has both an English and Italian version. It is designed to be responsive on all devices (desktop screens, tablets and smartphones). Their ceramics and artworks are not expensive, their products are accessible to everyone. What separates To Press products from their competitors is that they are tailored to the customers specifics needs.
I will not be adopting a B2C strategy for this website. A B2C website aims to trigger the customer to make an impulsive purchase using a three steps rule of thumb. I have decided this is not appropriate for this artistic project. The business goal is to establish an individual relationship with the client diversifying its offer. This increases customer satisfaction. The client buying an exclusive and unique product feels to be important and special.
The website aims to allow customer/s to get in touch with the artists by using a contact form that is clear and accessible. The website aims to be transparent showing the prices of artworks and ceramics. The main goal of the website is to sell the creations of the artists, whilst generates an online presence that also builds trust among potential customers or followers on social media pages.
- A bespoke, original and unique gift.
- An artistic collaboration.
- A personalized art piece and product.
- An English or Italian speaker.
- Someone who lives in Italy (if they want to collaborate in person with the artists).
- A ceramic and art lover.
- Anybody who wants to make a bespoke gift for someone.
- Businesses and individuals who require ceramics commissions.
- First Time Visitors goals:
- As a First Time Visitor of the website, I want to learn more about the artists, their mission and what they do.
- As a First Time Visitor, I expect to navigate the website easily and smoothly in order to find the information I need.
- As a First Time Visitor, I want to explore the artists' gallery of artworks and prices so I can decide if it is a company I can do business with.
- Returning Visitors goals:
- As a Returning Visitor, I want to get in contact with the artists to buy their artworks.
- As a Returning Visitor, I want to request a personalized and unique product.
- As a Returning Visitor, I want to locate their social media links and gain a deeper understanding of their activities.
- Frequent Visitors goals:
- As a Frequent Visitor, I want to view new creations, new ceramic series or a new collection.
- As a Frequent Visitor, I want to place another order. I want to get in contact with the company using an easily accessible contact page.
- Local Artists goals:
- As a Local Artist, I look for collaboration projects so I want to contact them showing my portfolio.
- As a Local Ceramic Artist, I want to get in touch with the artists and be able to use their laboratory/studio to craft my ceramics.
- As a Designer, I want to commit to the artists the production of ceramic series (usually little art pieces).
The aim of this project is to spread awareness of the two ceramists leading the users to contact them via a contact form or through their social media pages.
The business goals of this website in order of importance are:
- Create an online presence for the two local artists and increase consumer awareness.
- Allow potential clients to buy the artworks via a contact form.
- Create new opportunities of collaboration with designers and other artists.
- Showcase the artists' story and activities to build consumer trust.
- Increase number of followers on the artists social media pages.
The customers goals of this website are:
- View and inspect the artworks, the product specifics and prices.
- Ask for a personalized and customized product.
- Place an order quickly, intuitively and easily.
- Sign up for a newsletter to stay updated on their creations.
I want to offer to the users an overview of the artists mission, artworks and portfolio. The scope of this project is to keep them interested and engaged until they make the decision to get in touch with the artists filling a contact form. Following a Minimal Viable Product (MVP) scheme this website wants to accomplish:
- Clarity.
- Simplicity.
- Respect users expectations and confidence.
The information is organized to offer an intuitive interaction to the users. The paragraphs with contents and information are not too dense and packed. The structure is simple and follows a linear narrative. This allows the users to navigate themselves to the 'Contact us' page keeping their attention with a good UX design.
- Landing Page wireframe
- About Us Page wireframe
- Gallery Page wireframe
- Customize your product Page wireframe
- Contact Us Page wireframe
Design Scheme
It plays with neutral light colours which invoke earth-tones and clay's hues:
- I've chosen a light beige color (#efe7db) for backgrounds because I picked it from this picture of their ceramics using the Website Ginifab.
- I've used Light Slate Gray (#778899) for body-text to make it outstanding and because evokes clay's color.
- I've chosen Porcelain color (#e8e9ea) for the navigation bar background and the footer.
- I've chosen Benjamin Moore Red color (#ca2f2f) for the links in the navbar and for the main headings because reminds the color of their logo.
Typography
- "Fredericka the Great" font ("Exo" as fallback font) for headings. I've chosen this font for its artistic and clear aspect.
- "Josefin Slab" font ("Cormorant" as fallback font) for body content. I've chosen this font for its elegant design.
Imagery
The images have been carefully selected to be eye-catching, appealing and compelling. The purpose is to showcase the most recent and important pieces created by the artists. The artists want the images to clearly show that is possible to personalize the art pieces on request. They also wish to transmit that they are ceramic makers and that the decoration aspect is an additional value.
- Five different and individual pages.
- Every page has its italian version and translation.
- On every page is present a header logo of the business brand (top-left), if clicked brings the user back to the landing page as they expect.
- On every page is present a header navigation bar, fixed and centered, that allows the user to navigate easily through the different sections.
- On every page is present in the navigation bar a language switcher to select the preferred language (English or Italian).
- On every page is present a constant footer, which provides an email input field to sign up for the newsletter(bottom-left), the business copyright info (bottom-center) and social media pages icons (bottom-right), if clicked it brings the user to social media platforms (Facebook, Instagram and Pinterest) opened on a different tab.
- On every page is present a call to action button. Except for the downloadable brochure on the "About us page" the other call to action buttons lead the users across the pages till the contact form.
- On the "Landing page" is present a promotional video of the artists in their studio. It has controls so users can choose to play it or not. It keeps the users engaged and invites them to look through the website's contents.
- On the "Landing page" is present the title: "Clay impressions" and a subtitle "Shapes, memories, moments impressed in a material" overlayed on the hero-video. On tablet screen size I left only the title and on phone screen size they are not visible (display: none; visibility: hidden;). My mentor suggested me this modification to let the users enjoy more the view of the video.
- On the "Landing page" are shown four images (hero-images) of their most recent creations. If we click on an image it opens a Fancybox viewer which can enlarge and zoom the image and allows to move back and forward through the images. Placing some images in the Home page encourage the users to have a look also into the "Gallery page".
- On the "Landing page" there are three testimonials to show their clients satisfaction and appreciation.
- On the "About Us" section is provided a downloadable PDF version of the artists' brochure that gets opened in another tab.
- On the "Gallery page" are displayed the artworks divided into categories, if clicked opens a Fancybox viewer which can enlarge and zoom the image and allows to move back and forward through the images. Every image has its description, price and copyright.
- On the "Customize page" is shown the personalization process through icons to simplify the explanation and I used Bootstrap cards to display three demonstrative images, one for every typology of personalization.
- On the "Customize" page the different height of the cards is made intentionally and on purpose to fit the text and give a dynamic effect to the page.
- On the "Contact page" is present a form which allows users to get in touch with the artists uploading images or files together with their request message.
- The contact form submission button has to be functional when pressed and provide a feedback to the users to make them feel assured(Javascript needed).
- Add CAPTCHA, a challenge-response authentication, to the contact form to block spammers and bots (Javascript needed).
- Add General Data Protection Regulation (GDPR), which protects the Privacy Policy of European Union residents (Javascript needed).
- Add "Ceramic lessons" page. This is a further opportunity for the artists but they need time to organize this activity and to feature its programme.
- Add "Collaborations and projects" page. Once they build up their network and start to collaborate with more artists is important to dedicate to it a specific section. At the moment they collaborate only with an independent shop called "Madama Vintage" in Gallarate (VA), Italy.
- Add a further and deeper description in the "About us" page about their education and artistic path.
- Bootstrap4 : was used to provide responsiveness on all device sizes and add some stylistic components.
- Hover.css : a third part library used to add the transition effect to social media links in the footer and to the navbar text.
- FontAwesome : was used to add icons for social media links, for the customization process explanation and for the little icons inside the buttons.
- Google Fonts : was used to import typography fonts.
- Balsamiq : was used to create wireframes during the design of the layout.
- jQuery : was used to make the navbar responsive.
- Popper.js : was used to make the navbar responsive.
- AutoPrefixer : was used to analyse the CSS code and make it suitable for all browsers.
- Fancybox : was used in the "Home Page" for the hero-images and in the "Gallery" page to view and browse images easily.
- Gitpod : is the open-source IDE (Integrated Development Environment) that I used to create my project.
- Git : was used for version control by utilizing the Gitpod terminal (CLI) to commit to Git and push to GitHub.
- GitHub : is a hosting platform used to deploy and store the project code after being pushed from Git.
I have checked the validity of the code with:
-
This website has been tested across the main browsers (Chrome, Opera, Safari, Internet Explorer, Microsoft Edge, Mozilla FireFox). On Internet Explorer I have identified an issue on the "Home page". The hero-images were displayed in an unique vertical column in the middle of the screen both on large or smaller windows width. It seemed that Bootstrap grid system wasn't supported by Internet Explorer. I tried to add d-flex class to the container and in this way the 4 images are displayed on the same row but are now overlapped. I was unable to solve this bug independently, I asked to a tutor at Code Institute for support, they informed me that Internet Explorer is now an obsolete browser therefore the decision was made to leave this issue unsolved. The other problem on Internet Explorer was that on "Customize page" the Bootstrap cards images were stretched in vertical and the call to action button was overlapping the cards' content. I fixed this problem adding in the style the height property 'fit-content' to the card- image-top. I also added img-fluid class to the card's images. Also on Safari I have found out that the personalization images were stretching in vertical so I uploaded the images in a smaller format keeping their aspect ratio and setting the max:height at 100%. I have tested again on my iphone7 and the images are now displayed correctly.
-
I've checked its responsiveness on all the emulated devices provided by Chrome Developer Tools and on my phone an iphone 7.
- As a First Time Visitor of the website I want to learn more about the artists, their mission and what they do. The common path is: starting from the "Home page", read the mission and press the call to action button "read more about us" to dive into the information of the artists in the "About us page" and see their activities and facilities. Usually a first time visitor wants to explore the gallery of artworks to evaluate the quality and is here that he/she decides if is interested or not in purchasing. The user can view and find easily all the pages thanks to a clear, linear and labelled navigation bar. I set an active class to every navigation item. Clicking on the navigation label the user can understand better which page it is because the label is bold and changes color into black. Moreover the shadow hover transition in the navigation bar helps the users to understand on which label they are hovering the mouse.
From every page pressing on the logo in the navigation bar the user can go back to the home page. The first time visitor can choose the preferred language by clicking the buttons EN-ITA in the navbar.
- As a Returning Visitor I am interested to buy an artwork that I have previously viewed on the "Gallery page" so clicking on "Contact us" I can fill the contact form. Another way to contact the artists is through the social media icons links in the footer. The third way is to download their brochure and here there are their contact information: phone number and email address.
A Returning Visitor could be interested about the personalization option so after visiting the page "Personalize your product" can press the call to action button "Contact us and Design with us" and contact the artists with the same procedure.
- As a Frequent Visitor I want to stay updated on the artists new creations so after visiting the "Gallery" page to see if there are new artworks, I sign up for the newsletter placed in the footer.
- As a Local Artist I look for collaboration projects or commit to the artists the production of ceramic series. I go straight to the "Contact us" page because I probably already know personally the artists otherwise, after visiting the "About us" page, I proceed to contact them.
- Navigation Bar: hovering over the logo appears the title attribute (to-press logo). Only with alt attribute the text didn't appear so I had to add the title attribute. If we click on the logo a link bring us back to the "Home page". Hovering over the pages' label appears the hover shadow transition and the pages' names turn into red. The navbar language buttons (EN-ITA) are on every page and they link to the respective italian html page. Hovering over them they turn into red and clicking on EN becomes light-grey (btn-light) and on ITA becomes dark-grey (btn-dark) as I used Bootstrap button styles. At the breakpoint of (max-width: 767.98px) the navbar transforms into a toggle menu and clicking the burger icon it opens a collapsible centered menu. The language buttons are placed on the left side of the toggle menu.
- Hero-video: is muted and it has controls. The user can choose to play it or not. It is 100% width. The overlay box with the title is responsive changing the screen sizes as I styled it with media queries. On tablet screen I left only the title: "Clay Impressions". On phone screen size title and subtitle are not displayed to allow the users to have a better view of the video on small screens.
- Call to action button "Read more about us": hovering over it turns into Light Slate Gray color. If pressed it links and brings to the "About us" page.
- Hero-images: are four of the artists most recent creations. I used Fancybox to display these images individually. If we click on one image it opens Fancybox viewer and allows us to move back and forward with the arrows, to zoom an image, to start a slideshow or to open the thumbnails gallery. Every image has a name and the copyright thanks to the data-caption attribute. On phone screens I used col-6 Bootstrap grid system to place two images side by side.
- Testimonials: are three customers reviews. On medium and large screen they display in three columns but on smaller screens instead to use d-none d-sm-block and hide one of them I choose to display them all (col-12) and stack one on top of each other.
- Footer: testing the Newsletter if I insert an invalid email address an error message suggests what is missing (the @ or the . dot or the first part of the email). If I try to sign up leaving the email address field empty an error message says "fill in this field". If I insert a valid email address and I press "Sign up" it reloads the page.
Hovering the "Sign up" button it turns Light Slate Gray color. The social media links get open in a new tab using target="_blank" and hovering over their icons they turn into red and transform their sizes slightly bigger. The footer is responsive and at the breakpoint of (max-width: 767.98px) the three columns are ordered vertically inverting the order of social media links and of the copyright. In this way the copyright appears at the bottom of the page.
- Artists images: hovering over the images of the two artists it shows the title attribute "Sabrina photo" and "Elisabetta photo". With the alt attribute alone the text didn't appear.
- Call to action button "Download our brochure": hovering over it turns into Light Slate Gray color and if is clicked it downloads the pdf file in English or in Italian if we are on "Chi Siamo" page. The files end in the user download default folder and to achieve this I used the download attribute.
- Gallery Images: I used Fancybox "images" to display six images for each category. Every image has a name, the price and the copyright thanks to the data-caption attribute. The "ceramics" and "potteries" images are intentionally without a price because are demonstrative images that show a set of art pieces. A customer interested about a particular ceramic shape can contact the artists and they will quote a price. Was important in my opinion to show his category as the artists don't create only little art pieces but are ceramic makers. If we click on one image it opens Fancybox viewer and allows us to move back and forward with the arrows, to zoom an image, to start a slideshow or to open the thumbnails gallery. Reducing or expanding the screen size the images behave as expected. On phone screens I used col-6 Bootstrap grid system to place two images side by side.
- Call to action button "Place an order": hovering over it turns into Light Slate Gray color and it links to the "Contact us" page.
- Customize-icons: I used Fontawesome Icons to explain step by step the personalization process. Reducing and expanding the window width the text and the icons adapt responsively.
- Cards-Images: I used Bootstrap cards to explain three options of personalization. The different height is made on purpose to fit the content. The cards behave with responsiveness reducing the window width and are displayed stacked on top of each other on phone screens. I have changed the images size after the testing because on Safari, in particular on iphones, the images where stretching in vertical and the height of the images couldn't be automatically adjusted to maintain the aspect ratio. I decided to upload the images directly with the sizes desired to fix this problem.
- Call to action button "Contact us and Design with us": hovering over it turns into Light Slate Gray color and it links to the "Contact us" page.
- Form: trying to submit the form with all the fields empty an error message appears saying "fill out this field". Trying to insert an invalid email address an error message suggests which part of the email address is missing. Trying to attach a file or an image the selection process works and the file is uploaded. Trying to fill out the form correctly the form reloads. I added the boolean attribute required to the name, email and text message fields so if they are not filled is not possible to submit the form.
- Call to action button "Submit": hovering over it turns into Light Slate Gray color. If clicked, after have filled out the form, it reloads the current page.
- I run into some issues placing the language buttons in the navigation bar. I tried to place them on the left, next to the logo, but I didn't like this solution and they were falling into the collapsible navbar. After asking an advice to the tutor at Code Institute Igor Basuga, I placed them on the right on large screens and styled them in media queries with absolute positioning. Then I decided to change the breakpoint from navbar-expand-sm to navbar-expand-md because in italian the words in the navigation menu were longer and at the breakpoint of 768px the language buttons disappeared. In this way the language buttons are always visible outside the collapsible menu and beside the burger icon on its left.
- Another challenge has been to insert the newsletter in the footer. The layout wasn't responsive so I tried to insert the newsletter in the "About us" page because is one of the most visited pages but I didn't like the effect. At the end I chose a three columns layout on large screens and to order the items in vertical on phones and tablets. With @media queries I styled the footer to make it responsive.
- Testing the pages with the Lighthouse development tool on "Contact page" the background image was slow to load and this caused a bad performance score. I changed the image format from PNG to JPG and I uploaded them in different sizes in @media queries.
I developed this project using Gitpod, an online IDE (Integrated Development Environment). I have used the following commands throughout the project:
- git add . or filename (to add the changes and files to a staging area)
- git commit -m "" (to commit a message about the changes that have been brought)
- git push (to push the code to GitHub that host my repository)
I deployed the project following these steps:
- Log into GitHub
- Select my repository: Marta44/to-press2019
- Clicked Settings and scrolled down to GitHub Pages section
- I selected the master branch in the publishing Source dropdown menu and pressed Save
- The website has been published to GitHub Pages and the page refreshed automatically generating my site URL: Live deployed page
- The deployed site will update automatically If I bring changes with new commits.
How to run the code locally:
- Navigate to my project GitHub repository Follow this link
- Click Code dropdown menu and you have two options:
- Clone
- Download the ZIP file (allows you to extract the files on your local machine)
- Clone my repository copying and pasting into the terminal of your preferred editor/local IDE 'git clone https://github.com/Marta44/to-press2019.git'
- Press Enter and a clone of this project will be created on your machine.
- To remove all references to the remote repository type into your terminal: 'git remote rm origin' or 'git remote remove origin'. This deletes all references to the remote repository without removing the repository from the remote server.
- HTML format - to learn how to format and indent my html code.
- CSS format - to learn how to write consistent and idiomatic css code.
- CSS reference - collection of properties and info to learn css from the basics.
- CSS Flexbox - to structure the navigation bar layout and keep the footer at the bottom of the page.
- Markdown syntax - to learn how to write markdown language.
- Readme format - to learn how to structure a readme file.
- Commit messages - to learn how to write good commit messages in the CLI.
- Deploy to Github Pages - to learn how to deploy my project to Github pages.
- Javascript position - to learn how load Javascript efficiently in my html file.
- Stack Overflow - General resource.
- CSS-Tricks - General resource.
- W3Schools - General resource.
- Bootstrap Grid Explanation by Anna Greaves - to learn the Bootstrap grid system.
- Colors- to find the right matching color palette for my website.
- Resize images and Compress images
- Resize and crop video and Compress video
- Css style for hero-video
- Css style for background-image on Contact page
- Css style to keep the footer at the bottom of the page
- The content of the "Home page", "About us" page and "Customize your product" page was written by the artists Elisabetta Schiavini and Sabrina Cardani and translated into English by Marta Marassi. The italian version has been written by the artists Elisabetta Schiavini and Sabrina Cardani, proofread, modified and adapted by Marta Marassi.
- The text and headings in the rest of the website were created by Marta Marassi.
- All the images used in the website were created by Elisabetta Schiavini and Sabrina Cardani.
- I would like to say thanks to my mentor Ignatius Ukwuoma for his precious advices and continuous help during the project.
- I would like to thank Igor Basuga, tutor at the Code Institute for his prompt support and assistance.
- Thanks also to the Code Institute Slack Community.
NOTE: This is for educational purposes.