Git Product home page Git Product logo

usercentricfrontendproject-1's Introduction

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.

usercentricfrontendproject-1's People

Contributors

gildy92 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.