Isabella Hay’s Art Website

View the live project here.

This website shows artworks done by Isabella Hay. It displays a variety of images of the artist’s prints and paintings and it also includes photographs of wildlife taken by the artist, giving viewers a glimpse at the artist’s style and subject matter. The site has been designed responsively and includes bootstrap components in order to make viewing possible on a range of different devices. The site displays mainly imagery - designed specifically for viewing the artwork.

User Experience

User stories

First Time Viewer

As a First Time Visitor, I want to be able to view artworks of wildlife and other subject matter created by the artist Isabella Hay. I want to easily navigate through the different works and find out more information on the artist. As a First Time Visitor, I want to be able to find out more information about the artist and to be able to contact the artist directly for potential commissions. As a First Time Viewer, I want to see pictures of Scottish wildlife.

Returning Viewer

As a returning visitor, I want to find links to the artist’s social media accounts to see how well known and experienced they are. As a returning visitor, I want to be able to contact the artist directly and leave a message - either to contact for a commission or simply to comment on the portfolio. As a returning viewer, I want to be able to look at photos of wildlife in Scotland.

Frequent Viewer

As a frequent viewer, I want to be able to view the paintings, prints and photographs in detail with a view to commissioning. As a frequent viewer, I want to be able to share the artist’s page with friends and family. As a returning visitor, I want to be able to message the artist regarding newly uploaded works.

Design

Colour scheme

The site’s background includes images taken from the black face print series in order to animate the page. The images selected for the background have been chosen due to their simplicity and light hue. The background images’ opacity is also set to 0.65 in order to make the content/imagery the main focus of the site.

Typography

The “Lato" font is the main font used throughout the site. Lato is a clean font and adds to the minimal aesthetic of the site. It is also an appropriate font for image labels and has been emphasised with italics and boldness within headings and captions. The text is kept at x-small in order to make the imagery the focus.

Imagery

The images are the main focus of the webiste. The carousel display within sections mimics a gallery so visitors can click through the individual artworks. Vertical scrolling is introduced on smaller devices, making the site responsive to mobile viewing and to make sure whole images are visible.

Wireframes

about-section painting-layout painting-layout-text print-section

Screenshots were taken from Balsamiq and uploaded to GitHub for project. Wireframes are found in the documentation folder of the project in github.

Features

Carousels to display imagery Bootstrap components to make site responsive Image logo a the top left Background imagery to make site more animated

Technologies Used

Languages Used

• HTML5
• CSS3

Frameworks, Libraries & Programs Used

1. Bootstrap 4.4.1:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Hover.css:
   • Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.
3. Google Fonts:
   • Google fonts were used to import the 'Titillium Web' font into the style.css file which is used on all pages throughout the project.
4. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
5. jQuery:
   • jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
6. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
7. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
8. Photoshop:
   • Photoshop was used to create the logo, resizing images and editing photos for the website.
9. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator - Results
• W3C CSS Validator - Results

Screenshots of the validated code are found in the documentation folder in the project found in gitbub.

Testing User Stories from User Experience Section

First Time Viewer

i. As a First Time Visitor, I want to be able to view artworks of wildlife and other subject matter created by the artist Isabella Hay. I want to easily navigate through the different works and find out more information on the artist. a. Upon entering the site, images of artwork are displayed large and clear so that viewers can see the work properly. b. A carousel is included in the header introducing the viewer to the art.

ii. As a First Time Visitor, I want to be able to find out more information about the artist and to be able to contact the artist directly for potential commissions. a. Under the about heading, also found by clicking on the about heading in the navigation bar, is some information on the artist. b. A button is also included at the bottom of the page for contact.

As a First Time Viewer, I want to see pictures of Scottish wildlife. a. As an image focussed site, the photography section displays large images of Scottish Wildlife.

Returning Viewer

As a returning visitor, I want to be able to contact the artist directly and leave a message - either to contact for a commission or simply to comment on the portfolio. a. A button is found at the bottom of the site’s page. As a returning viewer, I want to be able to look at photos of wildlife in Scotland. a. Scrolling down the page or by clicking on the wildlife photography section will take you to images of Scottish Wildlife.

Frequent Viewer

As a frequent viewer, I want to be able to view the paintings, prints and photographs in detail with a view to commissioning. a. Artworks are displayed clearly and dated. Overall, site gives commissioner/customer an overall visual picture of the artist’s style and subject matter ii. As a frequent viewer, I want to be able to share the artist’s page with friends and family. a. The site’s URL can be linked to others by copying and pasting it or sharing it on other sites. iii. As a returning visitor, I want to be able to message the artist regarding newly uploaded works. a. There is a button for contact and a form to fill out at the bottom of the page to receive updates on new uploads and for comments. b. New images will be uploaded and displayed in the same format. A search icon will also be included to enable viewers to search for specific animals/birds once content reaches desired number.

Extra Testing

Site has been test on Chrome, Safari and Firefox and works fine. The site works on mobile although to experience full effect of homepage animation, users can view the page horizontally. Otherwise display of artworks on pages works fine. Tested on mobile device. Initially some of the images dont line up but site is still responsive.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Locate the GitHub Repository in GitHub
2. Click on the "Settings" Button on the menu.
3. Locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Main Branch".
5. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Merged edits from created "master Branch" to "Main Branch".

License and copyright

© 2020 Isabella Hay.

Credits

Code

• Background parallax effect taken from W3 (https://www.w3schools.com/howto/tryhow_css_parallax_demo_none.htm)
• Carousel code taken from Bootstrap's carousel compnents and adjusted (https://getbootstrap.com/docs/4.0/components/carousel/)