This page is inspired by a project carried out by a teacher in St. Josephs Secondary School. Throughout the semester he was in charge of organizing this tournament to make the class more engaging for his students and even wrote satirical weekly reports on his student's performance. I reached out to him and decided the idea could be perfectly transformed into a website so his students could access the weekly reports online. This was a good project idea since it gave me exprience dealing with content management and organizing existing data. It also helped me create a brand around an already existing idea, meaning the content I produced both visual and textual, had to follow an established brand image, tone and mood. This site features 8 different pages each showcasing an important part of the league. They were all developed using HTML, CSS and JavaScript using the Bootstrap framework.
When planning the design of this site I spent the most time looking at the fonts, logos and colors that would best fit the mood and tone of the webpage. My intention was to create a site that combines satire with a professional look and feel. I landed on a sans-serif font that provided a dynamic aesthetic and also had the weight to stand out as a heading. I landed on purple as the color because it is the schools color and it is used in the logo, it also contrasts green very nicely which is the green color of grass which would be redundantly appearing in soccer themed images.
The navigation bar is a responsive division that changes to a hamburger menu when the site width reaches the md state (width of 992px), even though I used the bootstrap framework there was a lot of styling that went into the design of the bar. I used a display flex and space between to align all the links in the middle of the site. All the list items with an exception of the Home link have a drop down menu where more links are displayed. I limited the width of the nav bar at 1200px to ensure the space between each link does not become excessive as the screen size increases. Finally, I took inspration from a number of sites, one of them being the Sheridan site and the other being the Mancheser City site. I wanted to make sure I gave it a sporty look, so i spent much time finding an appropriate font and even adapting the logo of the school mascot by creating my version using Adobe Illustrator.
The footer for this page was designed with inspiration from various sports team's websites including Liverpool, Real Madrid, and Manchester City. I used two main divisions, one which featured the outline of the League's logo and the social media links and one that featured the same links that are featured in the nav bar but with no dropdown. This was all designed using flexbox.
The home page features a carousel at the top with three images and internal links that lead you to other sections of the site. As I was designing the carousel I relized the caption was hard to style because the images did not contrast the text enough for it to be visible. So, I used the filter element to lower the brightness of the images this way the white text would stand out. Two of these images (the one's with the trophies are actually AI generated images. Since I did not have access to a trophy image, I used an AI to produce the content, this is the link to the AI https://gencraft.com/generate.
I then decided to feature a small paragraph that summarizes the idea behind the project with a button that refers the user to the learn more page to immediately offer them the opportunity to visit an inner page that teaches them more about the MFCL.
The next step was to feature the latest news of the site, to do this I took some inspiration from the U of T homepage, where they have an image and a heading stuck to the bottom of the image. The challenge with this was making it responsive, to do this I made it so the caption's position changes from absolute to relative when the screen size is a smaller resolution, this way the text and the image would both be displayed separately when the screen size is small.
The highlight of the home page is a video of the students, they really enjoyed this video and it quickly became a staple inside the class, so featuring this in the home page felt appropriate. I used the grid layout dividing the caption and the video in separate columns and aligning them to the center of the page. Finally, to highlight the content I added a background of a dark purple color that adds to the aesthetic design while creating a division in the content displayed.
I wanted to feature some photographic content soccer related as connotative images to help me set the sporty but professional look for the website. I included three images in containers with the width of 4 columns at all times regardless of the width of the screen. Although it is responsive, I ran into a block because the images become too small, however, if I had them rezise into a full column I would have flooded the mobile experience with too many images with no caption occupying an unecessary amount of space.
The last thing to incorporate to the home page was a contact section to allow future students to sign up for the class in upcoming years, I included some more information like the location of the school, their number and an email address to reach out to. Finally, the form is there to directly contact the page owner from the site and is accompanied by a map for direct reference to the location.
At the top of the about us page is a connotative image with a blur to make the text stand out. I wanted to make a very simple and elegant design for this section of the site, so I simply included a title with a background image and then a container with two columns of width 6 each. All the boxes are of equal height and width and one features content while the other features an image. A challenged I faced was when making the responsive layout the columns would be two consecutive information boxes and two image boxes, but I wanted it to always be image - information. I had to add an extra class called row-even and added a media query for this class to that at width md the row would display on column reverse, placing the image above the information.
This page followed a similar layout to the about us page but instead of having symmetrical boxes, there is a larger space for the text and rather than having a title, there is a small explenation for what the Balon D'or is. Instead of featuring images, I made a card for each player like they do in the team pages when displaying the roster. I got every student's name, position and number (featured in the roster page) and put the nominated students the teacher told me to put in th enominations and wrote a brief story about them. To make the layout responsive I made the I applied the same class to every other column creating the same effect as the about us page.
For the golden boot award I simply wanted to explain the award and use this page to display tabular content of the goals scored by each player thoughout the tournament. The class will host a ceremony where they will hand out awards for these competitions and the page simply reveals the progress the players made and the nominations for each award. Both these pages and the discipline tracker followed the same idea of havig a jumbotron to explain the page and content below it with minimal presence of images.
The roster page was a simple one to make, unfortunately I was not able to access pictures to each of the students, but I was able to create a card using the blank image provided by w3schools. As discussed before I created a card and worked with the teacher to assign a position and a number for each of the players. I based my layout on the roster page of the Golden State Warriors and Real Madrid page. To distribute the cards along the page I used the grid system and each card occupied 4 columns on medium or larger devices.
This design was the same as the golden boot award, it was a very simple with a jumbotron at the top and tabular content underneath occupying 6 columns. The hardest part about this design was definitely inputting the statistics of the players in the table as this was time consuming but design-wise it was very straight forward.
These two pages were the hardest to design. I used the spyscroll feature and had to create a separate navigation bar that targetted each section of the summary. To implement the team logos I used wikipedia to download a transparent image. To display the content I used the flex-column property and "details" and "summary" to hide the content until it is clicked. This made each weeks results less overwhelming and easier to follow since there was not as much writing in each. By allowing the user to click to see the results I was able to add additional information without jepardizing the aesthetic of the page. However, since it is not obvious that there is additional content, I decided to implement an alert that pops up when you open the page that notifies the user that the content is interactive. If I was to dedicate more time to the page and apply some JavaScript to it, I would make it so that each week has its own section and rather than being able to scroll from one to the next, have it so that on click it replaces the data of one week with the selected one. I believe this could be done with eventListeners that attribute an active class to the element clicked and removes it from all others.
I used a similar design for these pages, the biggest difference was the content within them and the addition of the video. Implementing someone else's content into my web design was actually a very insightful process since it taught me to deal with the organization of the webpage since I had to make sure that what I was producing stayed true to the material provided. I had to decide what content to cut fromt the website and what content to tweek for it to better suit the site. I also had to deal with the organization of multiple files and keeping track with the process I made everyday.