User Experience (UX)
User stories
First Time Visitor Goals
As a First Time Visitor, I want to understand what the website can offer me.
As a First Time Visitor, I want to learn about the site admin, their relevant experience and be able to relate to them on a human level.
As a First Time Visitor, I want to easily navigate each section of the website without the need to use the browser forward/back buttons.
As a first time visitor, I want to know where to go if I choose to purchase any products/ services.
Returning Visitor Goals
As a Returning Visitor, I want to avoid repeating the content I have already seen/ used and directly navigate to the relevant area.
As a Returning Visitor, I want to be able to communicate directly with the site admin to give feedback and enquire about the services offered.
As a Returning Visitor, I want to access relevant social media to stay involved.
Frequent User Goals
As a Frequent User, I want to access additional learning content to increase my understanding of the topics covered.
As a Frequent User, I want to access more creative content from the site admin to give myself newer creative ideas.
As a Frequent User, I want to sign up to the newsletter to keep abreast of updates and further my relevant knowledge.
Design
Colour Scheme
The main colours used blue for headings, and neutral colours such as black, white and grey for an understated visual effect
Typography
The Lobster (Google) font is the main font used throughout the whole website for h1, h2 and h3 elements, while Open Sans is used for any other text elements, and also as a back up if the primary font does not load on the site. Lobster is a handwritten-style font which gives the site a more relaxed and informal style, and is less sterile and corporate than many typical font types.
Imagery
Imagery is important. The images contained within the site are all relevant to the software and creative content that potential users could access and gives an immersive feel.
Wireframes
Features
Responsive on all device sizes
Interactive elements - audio relevant to admin and user objectives
Technologies Used Languages Used
HTML5
CSS3
Frameworks, Libraries & Programs Used
Bootstrap 4.4.1:
Bootstrap was used to assist with the responsiveness and styling of the website (namely use of the grid model).
Hover.css:
Hover.css was used on the navigation bar to give the effect of piano keys being pressed.
Google Fonts:
Google fonts were used to import the 'Lobster' and 'Open Sans' fonts into the style.css file which, between them, cover all text elements on all pages throughout the project.
Font Awesome:
Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
jQuery:
jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
Git
Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
GitHub:
GitHub is used to store the projects code after being pushed from Git.
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 'about me'](documentation/about-me-validation.png)
W3C Markup Validator - [Results 'contact'](documentation/contact-validation.png)
W3C Markup Validator - [Results 'design'](documentation/design-validation.png)
W3C Markup Validator - [Results 'dj'](documentation/dj-validation.png)
W3C Markup Validator - [Results 'home'](documentation/home-validation.png)
W3C Markup Validator - [Results 'production'](documentation/production-validation.png)
*note: errors in the markup validator on came from external code for the soundcloud and mixcloud players - these players were fully functional on the actual site
W3C CSS Validator -[Results](documentation/css-validation.png)
Known Bugs -Header veers too far to the right on bigger screens.
Deployment
GitHub Pages
The project was deployed to GitHub Pages using the following steps...
Log in to GitHub and locate the GitHub Repository
At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
Scroll down the Settings page until you locate the "GitHub Pages" Section.
Under "Source", click the dropdown called "None" and select "Master Branch".
The page will automatically refresh.
Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
Content
All content was written by the developer except for the code to embed the Soundcloud and Mixcloud players, which link to original creative content by the developer.
Media
All Images and Audio elements were created by the developer.
Acknowledgements
My Mentor for continuous helpful feedback.
Tutor support at Code Institute for their support.