A comprehensive website for a traditional portrait artist based in Amsterdam, The Netherlands. Website features a promotional video, testimonials, a gallery of the artist's work, an about page, pricing tables, a clear step-by-step guide to ordering and a contact page. The primary goal of the website is to lead potential customers to making first contact with the artist via the contact page.
An important note on the longer path to buy is that unlike most B2C websites - which are emotion driven to impulse buy and have the fewest number of steps to the point of purchase - ordering a custom portrait is an expensive and significant purchase, and one that comes with the need for more information than the average B2C purchase. This website tries to address the needs of the customer to find all the information that they need to make a decision to contact the artist, while breaking the information up into small easy to understand sections, and making the steps to the point of contact as clear and easy to follow as possible.
The business goals of this website are:
- Build brand awareness.
- Provide high quality examples of the artist's drawings and paintings.
- Drive sales in the form of first contact (via the contact page) that will then lead to a sales call with the artist.
- Excellent UX to keep potential clients on site long enough to fill out the contact form.
The customer goals of this website are:
- Searching for high quality, bespoke artwork for their home or treasured gift.
- Clear easy to find pricing.
- Intuitive ordering process.
- English speaking.
- Has disposable income.
- Is a parent.
- Lives in the Netherlands (but can be anywhere in the world).
- An artist to create a custom portrait featuring their child(ren) to decorate their home.
- And/or a bespoke gift.
- Most artists' websites have very poor UX.
- Other artists' websites are over complicated and produce information overload quickly.
- This website is:
- Easy to navigate.
- Steps the client through easy to understand learnable information.
- Gives the client the information they need without overloading them.
- Guiding them to the goal of the website - to fill out the contact form.
- As a new visitor to the website, I want to easily navigate the site, so I can find what I need efficiently.
- As a new visitor to the website, I want view this artist's gallery, and view their work in detail so I can decide if I want to commission their work.
- As a new visitor to the website, I want learn more about the artist, so I can feel I connect with her as a person.
- As a potential client, I want to know what past clients thought of their artwork and the service they received.
- As a potential client, I want to view expected prices for a portrait, so I can decide if it is within my budget to order.
- As an interested client, I want to understand the ordering process, so I know what steps to take next.
- As an interested client, I want an easy to fill in contact form, so I can make contact with the artist and place my order.
- As an interested observer and/or potential client, I want to follow the artist on social media, so I can keep up with her latest news.
- As a returning visitor to the website, who has already decided to contact the artist, I want to be able to find the request a quote page easily.
Each page features a responsive navigation bar with conventional placing of logo (top left) and a highlighted "request a quote" button in the top right. Each page has a footer with copyright information and social media icons linking to 5 the artists' social media pages.
Every page - except the home page - features its own hero image at the top, detailing a drawing or painting by the artist, or in the case of the about page, a photo of the artist in her studio. The purpose of the hero image is to grab attention and give a positive emotional response to the user.
The Home page features a special hero image or video. On mobile and tablet devices a full screen static image is seen. On desktops this is replaced with a promotional video, which autoplays on mute as a background element. Both of these elements have the page header displayed as an overlay. The purpose of this hero image/video element is to give maximum impact on arriving at the website, while not using up people's data unnecessarily on mobile and tablet devices.
The home page promotional video hosted by Vimeo, engages the user and tells them the value of the products on offer.
After the special hero image/video is some compelling copy which reinforces the emotional response to the artist's work and the potential client's desire to add it to their lives.
Finally there is a simple call to action button guiding the user on their next step through the website - to Visit the Gallery.
The About page features two photographs of the artist in her studio, one professional headshot photograph, and a professional photograph of a painting in a fancy apartment. The about page also includes some brief but compelling copy about the artist. Enough information to satisfy curiosity without overwhelming the user.
At the bottom of the page (above the footer) are two call to action buttons: Visit Gallery and How to Order. The How to Order button is highlighted.
The Gallery page is laid out in columns of thumbnail images, 2 columns wide for mobile devices, 3 columns wide for tablets and 6 columns wide for desktop. Each thumbnail is square and features a drawing or painting by the artist.
Note: The design choice for 2 columns wide gallery preview on mobile is to encourage users to click the thumbnail and view the image in full. Viewing the images in full is much preferred by the artist to looking at images restricted by margins and padding. The thumbnails are still large enough to be easily clickable on mobile.
Each can be clicked to open a fancybox window to view the artwork in detail, to move on to the next image, view the previous one, or return to the gallery page.
At the bottom of the gallery page the user is guided to choose from two call to action buttons: To view Pricing or learn How to Order. Again, the How to Order button is highlighted.
The pricing page features two tables, which list example sizes of artwork and guideline prices. One table for drawings and a second one for paintings. The tables are displayed next to each other on desktop and tablet, and stacked on top of each other for mobiles.
Below the tables some small print briefly explains why the prices given are guideline only and encourages the user to request a quote for their own custom order.
At the bottom of the page the call to action button guides the user to learn How to Order.
The How to Order page features the 5 numbered steps involved in ordering a custom artwork. Each step features a large, obvious icon, and a brief learnable explanation of the step.
Below the order timeline the user is informed how long their order is likely to take to be completed, one timescale each for drawings and paintings.
At the bottom of the page the call to action button guides the user to Request a Quote and they are taken to the Contact page.
The Contact page features a contact form, which requests client name and email, provides a place to upload a photograph, and below that a box to leave a message. At the bottom of the form clients can upload photograph(s) they want the artist to use.
The bottom of the form contains a Send Button
- Header Logo - Exists on every page and allows all users to easily recognise the business brand. Clicking the logo returns users to the home page as they would expect.
- Header Navigation Bar - Exists on every page and allows all users to easily navigate all the website's pages and find what they are looking for quickly.
- Footer Copyright Info - Exists on every page and protects business copyright.
- Footer Social Icons - Exist on every page and allows all users to access the social platforms that the artist uses.
- Call to Action Buttons - Exist on every page and guide potential clients through the process of viewing artwork, learning about pricing and the order process, and finally making first contact for their order.
- Promotional Video - Allows potential clients to connect with the artist, see her working in the studio and view some of her work. Creates connection and emotional response.
- About Page - Allows potential clients to connect with the artist without overloading them with information.
- Gallery Page - Allows all visitors to the website to view thumbnail images of the artist's work. Each thumbnail can be clicked to open an individual fancybox viewer.
- Fancybox Viewer - Allows potential clients on the Gallery page to view the artist's work in more detail, to move to the next image, previous image or return to the gallery.
- Pricing Tables - Allow potential clients to understand the pricing of custom artwork by structuring it in an logical way.
- How to Order Steps Guide - Allows potential clients to understand the steps involved in ordering their artwork.
- Contact Form - Allows potential clients to ask questions, and/or make the first step in their ordering process.
- Upload option on Contact form - Allows clients to upload a photograph they would like the artist to use for their custom portrait.
- GDPR compliant pop-up screen - Allows all new visitors to the website to approve or deny the processing of their personal data. Ensures the business complies with the EU data protection law. - Javascript Needed
- Add CAPTCHA to contact form - Allows business to protect the contact form from spam. - Javascript Needed
- contact form Send button change from Send to Processing and then when complete changes to Sent. - Javascript Needed
- FAQ page, table with FAQs and dropdown buttons to view answers - Gives potential clients easy to find answers to their common questions. - Javascript Needed for dropdown functionality. Simple FAQ page could be implemented now.
- Artists' blog - Allows new potential clients to discover the website through articles written by the artist establishing her as a thought leader. - Artist currently doesn't have time to write a blog.
- Option to choose the language of the website - As the artist's second language is Dutch, this would allow Dutch speaking visitors to the website to view it in their native language. - Budget not available for professional translation at the time.
- This project uses HTML and CSS programming languages.
- Cloud9 - This developer used Cloud9 for their IDE while building the website.
- BootstrapCDN
- The project uses Bootstrap4 to simplify the structure of the website and make the website responsive easily.
- The project also uses BootstrapCDN to provide icons from FontAwesome
- fancybox
- The project uses Fancybox for a gallery modal popup to view gallery images.
- Google Fonts
- The project uses Google fonts to style the website fonts.
- Vimeo
- The project used Vimeo to host the promotional video.
- jQuery
- The project uses jQuery to reference Javascript needed for the responsive navbar, Vimeo video and Fancybox gallery modal.
- Popper.js
- The project uses Popper,js reference Javascript needed for the responsive navbar.
- AutoPrefixer
- This project used AutoPrefixer to make sure the css code is valid for all browsers.
- All external images are stored and linked from a Wordpress Media library owned by the artist.
Testing information can be found in separate TESTING.md file
This project was developed using the Cloud9 IDE, committed to git and pushed to GitHub using the built in function within cloud9.
To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:
- Log into GitHub.
- From the list of repositories on the screen, select AJGreaves/portrait-artist.
- From the menu items near the top of the page, select Settings.
- Scroll down to the GitHub Pages section.
- Under Source click the drop-down menu labelled None and select Master Branch
- On selecting Master Branch the page is automatically refreshed, the website is now deployed.
- Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.
At the moment of submitting this Milestone project the Development Branch and Master Branch are identical.
To clone this project into Gitpod you will need:
- A Github account. Create a Github account here
- Use the Chrome browser
Then follow these steps:
- Install the Gitpod Browser Extentions for Chrome
- After installation, restart the browser
- Log into Gitpod with your gitpod account.
- Navigate to the Project GitHub repository
- Click the green "Gitpod" button in the top right corner of the respository
- This will trigger a new gitpod workspace to be created from the code in github where you can work locally.
To work on the project code within a local IDE such as VSCode, Pycharm etc:
- Follow this link to the Project GitHub repository.
- Under the repository name, click "Clone or download".
- In the Clone with HTTPs section, copy the clone URL for the repository.
- In your local IDE open the terminal.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
git clone https://github.com/USERNAME/REPOSITORY- Press Enter. Your local clone will be created.
Further reading and troubleshooting on cloning a repository from GitHub here.
- The text for the Home page and About page was created for Anna Gilhespy by Catriona Black.
- The text for the rest of the website was created by Anna Gilhespy and proof-read/edited by Catriona Black.
- All the photos used in this site were obtained from the artist - Anna Gilhespy.
- Professional photography on images about1.jpg and about3.jpg on the About page by Rudi Wells Photography and obtained from the artist - Anna Gilhespy.
- The video on this website was produced by Luke Davis and obtained from the artist - Anna Gilhespy.
- CSS code for shadows and hover responsiveness of gallery images was originally taken from Material Design Box Shadows| A Pen By Samuel Thornton and then edited.
- CSS code for overlays on index.html page originally taken from FullScreen YouTube Video Background In Pure CSS
- I received inspiration for this project from my own experience of building and maintaining a WordPress website for this business in the past years.
- My mentor Simen Daehlin guided me towards attempting the special responsive header on the Home page.
The content of this Website is for educational purposes only.
I am happy that you have come to look at my readme as an example of how to write a good one for your first Milestone project. You are welcome to learn how to structure and format your own readme from mine.
However, it is not ok to copy and paste large portions of it into your own project. Please remember to write your own readme yourself, rather than copying mine or someone elses.
Many thanks! Anna