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.
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.
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.
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.
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.
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
:hoverfromfilter: 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.
Future Implementations:
- Incorporate full
SENDfunctionality of the form, so Paul actually receives communications. (suggestion from mentor: formspree.io) - Build pre-loader, as iframes and photos sometimes load slowly.
Brief overview of the languages, frameworks, and other tools I've used on this project:
-
- Semantic markup language as the shell of the site.
-
- Cascading Style Sheets as the design of the site.
-
- Grid allows for a responsive layout across various platforms.
-
- Used for open/close effect on mobile navbar, as well as the fancybox implementation.
-
- Use of social media icons.
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.
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
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 minortransition: 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 ]
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.
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.
All assets pertaining to Paul were provided by Paul.
Client logos were obtained from the client's website or social media site, as follows:
- Adventure Island
- Amsterdam Hotel Brighton
- Bar Broadway Brighton
- Britannia Adelphi Hotel
- British Airways
- Center Parcs
- Cromer Pier
- Eastbourne Bandstand
- Eastbourne Winter Gardens
- Fontwell Racecourse
- Gillingham Golf Club
- Green Rooms London
- Hackett, London
- Havant and Waterlooville FC
- Holiday Inn
- Hotel Martinez Cannes
- ITV
- Lingfield Park Racecourse
- M Festival
- Manchester Pride
- Marks and Spencers
- MP-Events Belgium
- Oakwood House
- Orchard Theatre
- Oscars Bar Manchester
- Parliament House Orlando
- Pride in London
- Radisson Blu Hotels
- Rendezvous Casino
- Rockbar New York City
- Shanklin Theatre
- Sitges Bear Week
- Stadium MK
- Thorney Bay Holiday Park
- Trentham Gardens
- University of Birmingham
- Warner Leisure Hotels
- Worcester Racecourse
- Yes Events
Media buttons were created by me in Photoshop, using the following brand logos:
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.