Padraic King

(Developer: Nuala Gallagher King)

View deployed site here

Table of Contents

1. Project Goals
2. User Experience
   1. Ideal client
   2. User Stories
3. Design
   1. Design Choices
   2. Colour
   3. Fonts
   4. Structure
   5. Wireframes
4. Technologies Used
   1. Languages
   2. Frameworks & Tools
5. Existing Features
   1. Navigation Bar
   2. The Landing Page Image
   3. Commissions and Pricing Section
   4. The Footer
   5. About
   6. Gallery
   7. The Contact Page
   8. Features Left to Implement
6. Testing
   1. HTML Validation
   2. CSS Validation
   3. Accessibility
   4. Device testing
   5. Testing user stories
7. Bugs
8. Deployment
9. Credits
   1. Media
   2. Acknowledgements
   3. Content

Project Goals

A comprehensive website for a traditional portrait artist based in Ireland. The 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 piece of art 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.

User Experience

Ideal client

The ideal client for this business is:

• English speaking.
• Has disposable income.
• Can be anywhere in the world.

Visitors to this website are searching for:

• An artist to create a commissioned painting to decorate their home.
• And/or a bespoke gift.

This project is the best way to help them achieve these things because:

• 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.

User stories

• 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 him 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 out where the artist is geographically so that I might pick up my commission if required.

Design

Design Choices

The webpage was designed with the feeling a customer might get when purchasing an original painting from the artist Padraic King. The rich tones in the paintings are accentuated by the blue colour palette chosen for the website. The images are the selling point, so they are up front and centre.

Colour

For the colour sheme warm blue tones were chosen to match the images on the page and also the colour theme of the sea side where Padraic grew up. To narrow down the colours I used Adobe Color. After deciding on the colour I tested them on WebAIM to make sure the contrast between them was right.

Fonts

Oswald with san-serif as fallback was used for the logo as it is a simple and clear typeface. Simplicity and contemporary design, without embellishment is what I am aiming for in this website, so that it becomes more about the artwork.
Oswald with san-serif and Montserrat with san-serif was used for the body and headings as these fonts are simple and clean and also considered dyslexia friendly.

Structure

The page is structured in a well known, recognizable, user friendly, and easy to learn way. Upon arriving to the website the user sees a familiar type of navigation bar with Padraic Kings name on the left side and the navigation links to the right. The website consists of four separate pages:

• A homepage with a sections for Commissions and Pricing
• An about page with the About the artist, testimonial and news section.
• A image gallery with images and video showcasing the artists work.
• A contact page with a contact form and map of artist geographical location

Wireframes

Home

About

Gallery

Contact

Technologies Used

Languages

• HTML
• CSS

Frameworks & Tools

• Bootstrap v5.0
• Git
• GitHub
• Gitpod
• Tinypng
• Paint.NET
• Balsamiq
• Google Fonts
• Adobe Color
• Font Awsome
• Favicon.io

Existing Features

Navigation Bar

• Featured on all four pages, the full responsive navigation bar includes links to the Logo, Home page, Gallery and Sign Up page and is identical in each page to allow for easy navigation.
• This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.

• All four pages will also have the bespoke branding "PK" logo along side the title on the browser tab:

The landing page image

• The landing includes a photograph with the "Home" button highlighted in a light blue colour to allow the user to see exactly which location this site would be applicable to.
• This section introduces the user to Padraic Kings work with an eye catching image to grab their attention

Commissions and Pricing Section

• The Commissions and Pricing section will allow the user to see the commission services provided by the artist and how much it would cost for the service.
• By making the buying process simple and explicit as possible, this should encourage the user to consider contacting us for their first commission.

The Footer

• The footer section includes links to the relevant social media sites for Padraic King. The links will open to a new tab to allow easy navigation for the user.
• The footer is valuable to the user as it encourages them to keep connected via social media
• The footer also includes a coyright section, as the clients own original images are used within the website.

About

• The about section gives the user a more personal connection to the artist and his work, featuring the background experience of the artist, his life and image.
• Having a personal connection with the artist and the background of his work adds value and personal connection to the work.

• Below the about information we have a tesimonial which again adds alue by showing testimony from a happy customer.

• Below the testimonial I have included a news section which will be updated at intervals. This section will update the user on the current activities of the artist, adding further value as it gives an impression of current and future project investments.

Gallery

• The gallery will provide the user with supporting images to see what Padraics work looks like.
• This section is valuable to the user as they will be able to easily identify the types of art Padraic can produce and the quality of product they will receive upon purchase.

• The gallery page also includes a short video of some of Padraics work. This videos is there to keep people on Padraic Kings website longer and engage them with more content. People work with people, and video helps people get to know, like and trust Padraics quality of work. The video helps to keep the audience interested in the product and service.

The Contact Page

• This page will allow the user to get in contact with Padraic and to commence ordering their first commission visa a form submission. The user will be asked to submit their full name and email address. Upon submitting the form we will be able to compile a useful mailing list as a marketing tool to contact our clients in future with new services and products.

I have included a google map of the Artists geographic location, should clients in the area wish to know the locality of the studio. I have purposefully made the artists specific address and location vague, as the artist has requested that his personal details and home address remain anonymous.

Features Left to Implement

In future, I would like to include:

• A downward arrow over the bottom centre of the hero image carousel to help leed the user down toward the content which continues further down the home page.
• An Archive Tab for 'Sold' and 'Archived' paintings.
• A tab for print sales.

Testing

HTML Validation

The W3C Markup Validation Service was used to validate the HTML of the website. All pages pass with no errors no warnings to show.

Home

About

Gallery

Contact

CSS Validation

The W3C Jigsaw CSS Validation Service was used to validate the CSS of the website. When validating the page as a whole, the validator shows some errors linked to Bootstrap v5.0. When validating just my own custom CSS it passes with no errors found and some warnings associated to using root variables.

Home

About

Gallery

Contact

Accessibility

Google Lighthouse in Google Chrome Developer Tools was used to test the performance of the website.

Home

About

Gallery

Contact

Testing user stories

1. As a new visitor to the website, I want to easily navigate the site, so I can find what I need efficiently.

Screenshots

2. 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.

Screenshots

3. As a new visitor to the website, I want learn more about the artist, so I can feel I connect with him as a person.

Screenshots

4. As a potential client, I want to know what past clients thought of their artwork and the service they received.

Screenshots

5. 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.

Screenshots

6. As an interested client, I want to understand the ordering process, so I know what steps to take next.

Screenshots

7. 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.

Screenshots

8. 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.

Screenshots

9. As a returning visitor to the website, who has already decided to contact the artist, I want to be able to find out where the artist is geographically so that I might pick up my commission if required.

Screenshots

Bugs

Device Testing

The website was tested successfully on the following devices:

• Asus laptop 12" monitor

• HP 17" Desktop monitor

• Samsung Gallaxy s5 mini phone

• In addition, the website was tested using Google Chrome Developer Tools Device Toggeling option for all available device options.

Deployment

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab
  • From the source section drop-down menu, select the Master Branch
  • Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

Credits

Media

• All images for the website are owned by the artist and website author, therefore copyrights belong to the site owner.
• The Video in the Gallery page was created using Vimeo video editor and all images used belong to the artist and site owner.

Acknowledgements

I received inspiration for this project from my own experience and from the following websites:

-https://4n4ru.github.io/CI_MS1_BodelschwingherHof/ by Ana Runje
-https://ajgreaves.github.io/portrait-artist/ by AJ Greaves
-https://mattbcoding.github.io/leinster-trophy/index.html by Matt Bodden

• My mentor Mo Shami for his expert guidance and totorials. Mo has guided me towards attempting bootstrap in order to create a better user experience and responsiveness in the website.

Content

• The text for the website was created by the website author.
• The icons in the footer were taken from Font Awesome
• The icon in the tab were also taken from Favicon