- Background
- Business Goals
- Project Goals
- User Goals
- UX
- Technologies
- Features
- Testing
- Deployment
- Credits
- Acknowledgements
Nick Hope Thompson is a talented comic artist who has been drawing for fun and professionally for many years. He does not currently have an online presence. He has sold pieces of his comic art, has previously been commisioned to produce pieces and would like to increase his opportunities to work professionally producing comic art.
To increase sales of Nick's art.
To showcase the artist's portfolio, increase the artist's profile within the comic art community and to provide a means for prospective clients to engage.
To browse comic art for fun and inspiration and potentially to buy. To commission an artist to create some personalised art work.
To define the overall project strategy, an initial project strategy meeting was held with the client.
The following opportunities were identified and ranked using a score of 1 - 5 for importance and viability:
| Opportunity | Importance | Viability |
|---|---|---|
| Create online presence | 5 | 5 |
| Showcase portfolio | 5 | 4 |
| Provide contact information | 5 | 5 |
| Biography | 4 | 5 |
| Link to artist page on comicartfans.com | 3 | 3 |
| Subscribe | 2 | 1 |
| Communicate pricing information | 2 | 5 |
| Increase social media followers | 2 | 3 |
| Create a blog | 1 | 1 |
| Develop online sales capability | 1 | 1 |
The opportunities matrix was used to help decide which items should be included for the initial development phase (phase 1):
| Item | Development Phase |
|---|---|
| Create an online presence | 1 |
| Showcase portfolio of work to potential customers | 1 |
| Provide contact information to potential customers | 1 |
| Biography | 1 |
| Provide link to artist page on comicartfans.com | 1 |
| Subscribe | 2 |
| Increase social media followers | 2 |
| Create a blog | 2 |
| Develop online sales capability | 3 |
- The primary users of the site will be comic art fans. The demographics of comic art fans are quite wide - male and female from ages 5 and up who have an appreciation for comic art.
- A simple, colorful and attractive design would fit this demographic. As the demographic is particularly interested in art and design, the site needs to reflect this and a vibrant and modern design is of high importance.
- Visually engaging
- Easy to navigate
- The key information should be layed out in a simple, easy to follow and clear way.
- Responsive design is required as users may be viewing the site on Mobile, Tablet or Desktop.
- As a user, I want to browse comic art sites for fun and inspiration.
- As a user, I am searching for existing comic art to buy.
- As a user, I am searching for an artist to commission some work.
- As a user, I want to contact the artist.
- As a user, I want to find out more about a specific piece of art.
- Developer skill set - the developer is currently unable to develop an online sales capability, but this may be considered for future development phases.
- The client is reluctant to create a social media presence on facebook, instagram etc, but does have an artist page on comicartfans which should be linked to.
- The client has time constaints on the amount of work he can produce as he has a full time job. We discussed incorporating a Subscribe or Sign Up option, which would allow the artist to produce art and then contact a mailing list of prospective buyers. We decided not to include this feature in phase 1 due to the complications of storing email marketing lists within the constraints of the GDPR regulations.
- The website functional features and background should not be to 'loud' or detract from the main focus of the website, which is presenting the artist's colourful and attractive work.
- The user would like to view a portfolio of the artist's work.
- The user requires contact information to enable them to contact the artist.
- The user potentially requires pricing information. It was decided during the initial stategy meeting with the client that pricing information would not be disclosed on the website, but would be provided on request.
- Copyright notices - all comic book characters are copyright of their respective owners. The copyright notice should appear on each page in the footer.
The following key features have been identified and scored from 1 - 5 for importance and difficulty. The proposed development phase has also been indicated:
| Feature | Importance | Difficulty | Development Phase |
|---|---|---|---|
| Navigation menu | 5 | 2 | 1 |
| Portfolio images | 5 | 3 | 1 |
| Contact form | 5 | 3 | 1 |
| Biography | 4 | 2 | 1 |
| Copyright notices | 5 | 1 | 1 |
| Link to comicartfans.com | 3 | 1 | 1 |
| Links to social media | 2 | 1 | 2 |
| Subscribe feature | 3 | 2 | 2 |
| Blog | 1 | 4 | 2 |
| Online Sales Capability | 1 | 5 | 3 |
A Site Map was produced for discussion prior to the initial project strategy meeting with the client, and is shown below:
An Initial Sketch was produced for discussion prior to the initial project strategy meeting with the client and is shown below:
Initial Wireframes showing different options for the Home and Gallery pages were produced using balsamiq and presented to the client. The base case was selected for the Home and Gallery pages and is shown below:
Responsive Design Wireframes were then developed based on the initial wireframes showing the Home, Gallery and About pages as viewed on desktop, tablet and mobile devices. The mobile view wireframes are shown below:
The Home page features two large bright and colorful illustrations, a navigation menu, the NHT logo provided by the client and a link to the artist's page on comicartfans. We decided to use two illustrations for the home page as the artist's most colourful illustrations are in portrait orientation and this would allow 2 images to be tiled side by side on a desktop view, with one of the images being removed or the images being tiled vertically on smaller devices.
The Gallery is presented as a seperate page. The Gallery features the artist's favourite work divided into the categories "Illustrations" and "Caricatures". The images are tiled in 2 rows corresponding to the "Illustrations" and "Caricatures" categories, with 3 columns shown on a desktop view, 2 columns shown on a tablet view and 1 column shown on a mobile view.
The Biography and Contact information is presented on the About page. The About page includes a contact button which will open up a contact form.
Varela Round has been chosen as the font for all text content. The font is clean and modern and has a soft, rounded feel which ties in well with comic art.
- font-family: 'Varela Round', sans-serif;
The colour pallete was initally chosen based on the red of the Art Of NHT logo supplied by the client (#C93C1C). The mycolor pallete generator tool was used to generate a complementary colour pallete based on the logo red (#C93C1C). The initial colour pallete is shown below:
A screen print of the Home page with the initial colour scheme is shown below:
After the home and gallery pages were constructed for review by the client using the colour pallete initially chosen, an optional "dark mode" theme was created by the developer, using grey and dark colours for the background and functional elements of the website. The client and developer both preferred the "dark mode" theme, as we felt that this showcased the artist's content better and really made the artwork stand out, so this option was selected and developed further into the final website. The final colour pallete is shown below:
- White, used for highlighting
- #FAFAFA - "Cultured", used for headings, highlighting, text and carousel indicators
- #9A9793 - "Spanish Grey", used for navigation links and about page image outline
- #404040 - "Onyx", used for block dividers, home page and gallery image outlines
- #222831 - "Gunmetal", used for background containers
- #D65A31 - "Flame", used for links on about page
- HTML
- CSS
- JavaScript (used internally by Bootstrap)
- Bootstrap
- jQuery (used internally by Bootstrap)
- Font Awesome
- Google Fonts
- Form Spree
- Logo (including hover styling, links to home page if selected):
- Navigation Menu (including hover styling):
- Footer with link to artist page on comicartfans, (including hover styling):
-
Large, responsive Home page image(s) which pop out into Modals including image title and medium if selected. 2 images are shown on the Home page on larger devices, and 1 image is shown on the Home page on smaller devices:
- Responsive Gallery page including bootstrap image carousels to display art categorised into Illustrations and Caricatures. The carousels feature 1 image panel on small displays, 2 image panels on medium displays and 3 image panels on large displays. The carousel controls are subtly designed and are located under the images so as not to detract from the art, which is the focus of the website. The carousels have been set as static (the user has to select left or right to move the images on) as we feel this will improve the user experience. The carousel images pop out into Modals which include image title and medium if selected:
- About page including artist biography, profile picture, contact links and large, bright call to action "Contact Nick" button. Profile picture, "Contact Form" link and "Contact Nick" button all link to the Contact Form. The email link creates an email to Nick in the user's default email application:
- Contact Form containing fields for Name, Email address and Message, and a large Send button. If all fields are entered correctly, an email is sent to nickhopet@hotmail.com. This feature is deployed using Formspree:
- The Formspree form submission message can be customised to improve the user experience, however this requires a payed account with Formspree. This may be considered for implementation in the future, as the free service provided by Formspree is limited to 50 contact messages per month. Another future development option would be to submit the contact form via php. It is not possible to deploy php on a site hosted by GitHub pages, so the site would need to be moved to another hosting provider that supports php in order to implement this.
- Subscribe feature on Contact Form - this may be implemented in the future if the artist decides to launch a web marketing campaign.
- Links to social media (dependant on artist being willing to join social media networks).
- Blog - (dependant on artist's time constraints).
- Online Sales Capability - (dependant on developer's technical capability).
- Colour Scheme - the colour scheme was changed mid-way through the development as described in the Colours section. The original colour theme is on the master branch in the GitHub repository. A new darktheme branch was created for the dark theme option and developed into the final website. This is set as the source for GitHub Pages.
- Gallery carousel controls - the controls were initially located at the bottom of the images within the image panels, but were moved underneath the carousel elements as the developer felt this provided a better user experience. See Gallery Testing Screen Prints and example below:
- Gallery carousel images - the images were initially being sized by using specific media queries for a range of device widths to set the height of the image. The Gallery images were then resized to 1200px x 1680px, to enable bootstrap to auto size the gallery in 1 panel, 2 panels or 3 panels depending on screen size. This enables the gallery to scale fluidly and without degrading image quality for any screen size up to 3600px wide. Gallery Testing Screen Prints, and example below:
- Contact Form - the Contact Form was initially developed as a modal pop-up form, but this was found not to work with the Formspree service. The contact form was redesigned as a web page.
Further testing information and screen prints can be found in TESTING.md.
The project has been developed using Gitpod and GitHub.
The project was regularly commited to GitHub during the initial development phase.
The website resides as a repository in GitHub and has been been deployed on GitHub
pages using the custom domain Art Of NHT purchased from GoDaddy.
For further information on purchasing a custom .com domain from GoDaddy
see this Link.
Note that the deployed GitHub Pages source branch is the darktheme branch - see Design Changes During The Phase 1 Development for more details.
The steps required to deploy the website to a custom domain using GitHub Pages are as follows:
- Open the DNS management page in the GoDaddy Domain Manager for the relevant domain which you have purchased through GoDaddy.
- Edit the Type "A" record. The IP address in the "Value" field should be changed to 185.199.108.153.
- Edit the Type "CNAME" record with the field "Name" set to "www". This should be changed to the relevant GitHub pages web address (username.github.io). For my GitHub pages this is richardhenyash.github.io.
- Add 3 further Type "A" records with "Name" set to "@", and "Value" fields set to IP addresses 185.199.109.153, 185.199.110.153 and 185.199.111.153.
- Go to the Settings in the Project Code Repository Location.
- Scroll to the GitHub Pages section.
- In the Source section select the darktheme branch from the dropdown menu.
- In the Custom domain box, add the custom domain name (artofnht.com).
- Tick "Enforce HTTPS".
- This creates a a new file in the root directory called CNAME, which should contain one line of text which is the custom domain name (artofnht.com).
In order to make a fork or clone of the project, a GitHub account is required. The Gitpod Browser Extension is also recommended.
The project may be forked by following these steps:
- Go to the Project Code Repository Location on GitHub.
- In the top-right corner of the page, click "Fork".
For further information on forking a GitHub repository, see the GitHub Documentation.
The project may be cloned by following these steps:
- Go to the Project Code Repository Location on GitHub.
- Select the "Code" dropdown and choose "GitHub CLI" under "Clone". This will give you a URL that may be copied into the clipboard.
- Open the Git Bash command line interface in Gitpod.
- Change the current working directory to the location where you would like the cloned directory to reside.
- Type git clone, and then paste the URL copied earlier, eg:
$ git clone https://github.com/richardhenyash/artofnht - Press Enter to create the local clone.
The code may also be downloaded to a local computer by following these steps:
- Go to the Project Code Repository Location on GitHub.
- Select the "Code" dropdown and choose the "Download ZIP" option.
- This will download a copy of the entire project locally as a .zip file.
For further information on cloning a GitHub repository, see the GitHub Documentation.
I gained additional help and inspiration on dark mode theme colours from the following link:
I gained additional insight and help on bootstrap carousel functionality from the following links:
Additional help on styling horizontal rulers was found at the following link:
Additional help on aria label attributes was found at the following link:
Additional help on progressive .jpg images was found at the following link:
Code used for fade-in animations was referenced from the following link and modified to suit project requirements:
Additional help on deploying the website to a custom GoDaddy domain using GitHub Pages was found at the following links:
Thanks to the following for your help and inspiration during this project:
- Nick Hope-Thomson for his amazing art work, I hope this website helps you achieve your dreams!
- Sarah Ash for helping Nick to quickly put a clear and concise brief together.
- Neringa Bickmore for getting me started off on the right footing and for your very helpful review and comments on the website and documentation.
- My remote mentor Allen Thomas Varghese for the help getting me started and for the insightful review and comments on the website.