Click here to view the live web site
The goal was to create a site that will increase the online presence of the audiobook narrator, and increase the amount of potential work they are offered. The site needs to clearly state what service is offered, with a clear example of the quality of the product. At the same time, it should make it quick and easy to contact the narrator and request work.
- Create a website with good searchability
- Have playable examples of work that is easy to access
- Ensure the contacts section is clear and easy to find
- Create a UX design that is intuitive to use and flows well
- The users will:
- Be looking to hire an audiobook narrator
- Be able to quickly navigate the site to sample work and the contact section
- Have a clear understanding of the services offered
The user can see what services are offered by the narrator in the About section, and can see clear navigation options to the Samples section and the Contact section. There is also a call to action at the end of the About section, so the user can be directed to the Contact page. This will make it easier for first time users to navigate the page. The call to action will also help returning users who may be comparing narrators, to quickly navigate to the Contact page.
- The title and subtitle make it clear that the site is for audio book narration and the About section clearly states the services offered
- There is a Nav bar that will send the user to each section of the page
- I decided to turn this site in to a one-page site part way through the project as this will mean that everything the user needs is easy to access
- I used a call to action that links to the Contact section so that the user can quickly navigate to that section of the site
The Samples in this section are easy for the user to find and offer brief descriptions to give the user some context.
- This section contains two audio players with samples of the narrator's work
- The Samples section is the reason I chose to change to a one page style website, as it made more sense to have the samples easily accessible to the user
- The audio players do not autoplay when the site loads and can be controlled by the user
- This section also contains an image of the audio equipment a narrator would use
Here the user can submit a request for their audio to be recorded. The form is clearly labelled and allows the user to leave all relevant information about their book.
- This section contains a form and basic description about hiring the narrator.
- There is also an image that fits the themes of the site.
- The form consists of:
- Text inputs for names
- Email inputs
- Number inputs
- Inputs to upload docs
- Text area inputs for more details
- A submit button
- All inputs from the form have the required attribute
-
The Footer is styled to match the header and to close off the page in an aesthetically pleasing way.
-
It contains links to socials and also copyright info.
-
I used a call to action that links to the ontact section so that user that want to hire the narrator can quickly navigated to that section of the sight
This project was deployed to git hub pages.
- In your repository on git hub click settings.
- click the pages tab
- on the drop down under source select your main branch.
- click save
- In the repository on github click the Code dropdown button next to the green Gitpod button.
- Download ZIP file and unpackage locally and open with IDE.
- On GitHub, navigate to the repository you want to fork.
- In the top-right corner of the page, click Fork.
- The site was tested in google chrome, Firefox, Microsoft edge and safari.
- It was also tested on android and IOS phones
- As evidenced above i also tested on multiple view ports
- Links in nav bar where all tested to ensure they link to the correct page sections
- Check form to ensure it validates
- CSS was ran through (Jigsaw) validator and has no errors: results here
- HTML was ran through W3C validator with no issues: results here
HTML, CSS. Reaper DAW to create sample audio.
- google fonts where used in this project https://fonts.google.com/
- font awesome was used in the footer www.fontawesome.com
- Images souced from unsplash.com and www.pexels.com
- I used this site as a reference for using CSS grids: https://learncssgrid.com/
- I based my audio code on code examples from this page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
- I would like to thank my mentor Chriss Quinn for firstly Introducing me to Grids in CSS and second for being an outstanding mentor. He made sure I always pushed my self and tested my abilities during this project.
- A big thanks to the Retro Space Cowbells team for the suport and posative vibes.