Skip to content

Code Institute - Milestone Project #1 (User-Centric Front-End Development) || Score: 91%

Notifications You must be signed in to change notification settings

TravelTimN/ci-milestone01-ucfd

Repository files navigation

PAUL M MUSIC

Code Institute / User-Centric Front-End Development

Tasked to create a 4-5 page static website for a band (ie: the Monkees), I wanted to step away and do my own thing. Fortunately, I know someone in London that is an artist, and thus found his website www.paulmmusic.com. Unfortunately, it's clearly outdated and a bit bland, so I contacted Paul to see if we could help each other out. He loved the idea immediately, and started sending me plenty of assets whilst I started the wireframing. Paul was finding it difficult to imagine the site with just wireframes, so I took it a step further and built entire mock-ups for him instead.

DESIGN

FRAMEWORK

CSS Grid - During the training modules, we focused on Bootstrap 3.3.7, however, I personally prefer CSS Grid, which I learned from CSS-Tricks | A Complete Guide to Grid. I've decided to build the entire site using Grid, with no Bootstrap or Flexbox required.

COLOR SCHEME

The color scheme was created by asking Paul his two favorite colors (sky blue and purple), and sent him a small selection of each color with their HEX codes, to which he chose one of each. I paired these using the custom color palette on Material.io and came up with the following scheme, which he absolutely loved:

[ all colors are set at :root level in CSS ]

  • #90CAF9 (primary blue)
  • #C3FDFF (light blue)
  • #5D99C6 (dark blue)
  • #9B27AF (primary purple)
  • #CF5CE2 (light purple)
  • #69007F (dark purple)

The remaining aesthetics were my own preference, to ensure the site remains clean, sleek, modern, and professional.

UX DESIGN

I use a fair amount of :hover effects in my CSS, to allow more interaction for the user, but without going too overboard that the site becomes an animation factory!

Some examples:

  • Quotes from Testimonials expand for more emphasis.
  • Images scale slightly larger in a few areas.
  • Photos all start grayscale, but transition to color.
  • Social Media links pop with their brand's primary color.

WIREFRAMES

I used Adobe XD to create my wireframes initially, but needed to go one step further for Paul and create mock-ups instead. They are larger files due to the images, so in each desktop and mobile file, I've included .png files of each page for visual representation on GitHub.

FEATURES

All pages on the site include the same exact <header>/<nav>, and <footer>. The only exception is in the navigation, whereby each active page contains class="active" that'll slightly change the appearance as a visual indication to the user of which page they're currently visiting.

Paul wanted a simple, relatively empty, landing page. I've included two basic <a> elements, designed in CSS to appear and act as 'call-to-action' buttons.

This should be the primary focus of coming to Paul's site. His music and albums are exhibited here for each of the following platforms:

This page is dedicated to Paul's YouTube channel. It portrays the Most Popular videos by ranking, via embedded iframes.

Purely a page to view some photography of Paul that he's requested to be added online.

  • Images display in color on :hover from filter: grayscale();.
  • Images open full-screen using fancybox, as recommended by my mentor.

Testimonials is actually a combination of previous testimonials, and a list of former and current clients. This page also has the most responsive design concept:

  • Clients (desktop): displayed in grid format.
  • Clients (mobile): displayed in auto-scroll ticker effect.

Simple page that allows users to get in contact with Paul directly.

WISH LIST

Future Implementations:

  • Incorporate full SEND functionality of the form, so Paul actually receives communications. (suggestion from mentor: formspree.io)
  • Build pre-loader, as iframes and photos sometimes load slowly.

TECHNOLOGIES

Brief overview of the languages, frameworks, and other tools I've used on this project:

  • HTML5

    • Semantic markup language as the shell of the site.
  • CSS3

    • Cascading Style Sheets as the design of the site.
  • CSS Grid

    • Grid allows for a responsive layout across various platforms.
  • JavaScript

    • Used for open/close effect on mobile navbar, as well as the fancybox implementation.
  • Font Awesome 5

    • Use of social media icons.

TESTING

TEST MATRIX

I created a testing matrix in Excel, but saved as .png to visualize here on GitHub. It outlines the various tests I made to ensure the site renders consistently across different platforms, and that each functionality behaves as intended.

COMBATIBILITY

To ensure a broad range of users can successfully view/use the site, I tested it across all major browsers in both desktop and mobile configuration.

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera
  • Internet Explorer

NOTED ISSUES

Safari and IE seem to cause the most problems.

  • IE: Doesn't support CSS Grid, so the entire site breaks.
  • Safari: The navbar doesn't position: fixed; on desktop, and doesn't function at all on mobile. Some minor transition: scale(); issues with overlapping of client logos. The contact form <legend> doesn't center properly.
  • Edge: Minor frame-shredding when scrolling too fast on the navbar.

[ Safari issues might be due to the fact that I was running macOS on a virtual machine, not actual Apple hardware ]

DEPLOYMENT

I've deployed the site using GitHub Pages, and is available here: https://traveltimn.github.io/ci-milestone01-ucfd

For this project, local deployment was not required.

CREDITS

CONTENT

All text was initially provided by Paul himself, with edits and corrections on my part for consistency between each page, as well as some minor grammar mistakes.

MEDIA

All assets pertaining to Paul were provided by Paul.

Client logos were obtained from the client's website or social media site, as follows:

Media buttons were created by me in Photoshop, using the following brand logos:

ACKNOWLEDGEMENTS

Huge thanks to my mentor Ignatius Ukwuoma for his time, suggestions, and constructive feedback!

Also where credit is due, the concept of getting the client scrolling effect on mobile came from Codepen: Responsive CSS Image Slider by Dudley Storey

Finally, to Chris Quinn, my accountability partner for all projects.

About

Code Institute - Milestone Project #1 (User-Centric Front-End Development) || Score: 91%

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published