WordPress. Courtesy of Unsplash. Found at https://unsplash.com/photos/zs98a0DtKL4
For this university project, I treated it like a real client task, creating a five-page website with a CMS, APIs, and peer collaboration, along with a design process document and reflection.
My role encompassed all aspects of the project, from creating initial low-fidelity and high-fidelity designs to conducting research, coding, and implementing a CMS a long with two API's.
The project was assigned a timeline of January 2023 to May 2023, providing five months to complete all phases, including planning, development, and final delivery.
We would like you to create a website prototype using HTML, CSS, and JavaScript that includes at least five pages of content centered around a specific theme. Once the prototype is complete, the website should be converted to PHP, with a CMS integrated to manage the site's content.
Additionally, we would like you to collaborate with a peer to populate the site with content and conduct testing to ensure functionality. The final website must include at least two embedded APIs.
Alongside the development, we require a design process document that details your workflow and decisions, starting from the inception of the project. A student reflection summarizing your experience and learnings from the assignment will also be expected.
CMS stands for Content Management System and are software applications used for creating, managing & publishing digital content, primarily the purpose of these is to streamline the production of creating & publishing content.
There are many types of CMS, ranging from open source, proprietary & Software-as-a-Service. Open-source CMS software means you can download it at no extra cost, plus there are no license, upgrade fees, or contracts some popular examples include WordPress, Joomla & Magento. Proprietary CMS is built & managed by a single company, generally involving buying a license fee as well as paying a monthly or annual charge.
Popular examples include Shopify, Kentico & Sitecore. Software-as-a-Service (SaaS) CMS commonly involves web CMS software, web hosting, & technical support with a single supplier. Hosted in the cloud & based on a subscription model these are virtual solutions commonly for those on a per-user or per-site basis. Some key features to keep in mind when selecting a CMS include:
WordPress. Courtesy of Unsplash. Found at https://unsplash.com/photos/zs98a0DtKL4
In conclusion, a CMS is an essential tool for managing digital content, but one must ensure to keep the user in mind when choosing the type of CMS to implement.
An API stands for Application Programming Interface & is used for building & integrating application software from a set of definitions & protocols. One analogy of an API would be a waiter. A waiter takes orders from customers and brings them to the kitchen, then brings the customers their food. Relating back to APIs the waiter acts as a middleman fostering communication between the table & the kitchen. In parallel an API works as a catalyst connecting software platforms together empowering developers to build user-friendly code. Some common examples of APIs include:
Vscode-Terminal-Laptop-API. Courtesy of Unsplash. Found at https://unsplash.com/photos/ehyV_XOZ4iA
My website theme is based on fitness, more specifically a digital service allowing for personalised coaching for rock climbers. There are many websites available that offer this service such as TrainingBeta, Lattice Training, & Climb Strong. However, looking through these websites I feel there is a lot of improvement to be made on the UX/ UI side, especially from an aesthetically pleasing point of view which correlates to the perceived functionality of a website, this is called the “Aesthetic-Usability Effect.”
Man-Outdoor-Bouldering. Courtesy of Unsplash. Found at https://unsplash.com/photos/A_mWBNgFi4I
The intended target audience are climbers whether they are novices who have only recently started to climb, or those who are more experienced wanting to break a plateau.
This schedule helped me stay organized and focused throughout the project. Breaking the work into clear milestones and deadlines made it easier to manage my time and stay on top of tasks like wireframing, prototyping, and testing. It also gave me flexibility to adjust as needed and kept the project moving in the right direction.
I put together a mood board for my Redpoint Training project to spark ideas and set the tone for the design. It was a great way to experiment with typography, color schemes, and visuals that matched the energy of climbing. The mood board kept me inspired and helped ensure the final design felt cohesive and on-brand.
Being a climber myself I took a lot of inspiration from my own climbing gyms that i go to, for the typography, colour schemes & overall aesthetic. Thus I decided to include an image gallery as part of my primary research for reference.
For the website itself I wanted to make the user picture themselves at a climbing gym. As I mostly boulder (no ropes-matts instead) myself i leant more heavily towards this side of climbing more than sport (using ropes). Thus I wanted to make the website feel spacious & “big” as if sections of the page were split into boulders. However I still wanted the website to be for everyone no matter what type of climber a user was.
The sitemap changed however as firstly i did not have enough pages (4) and needed 5 in total. Secondly later down the line when i was trying to implement the Telegram API I couldn’t get it to work so instead opted to use Google Maps as it is very easy to implement.
I decided to use a predominantly blue colour with a touch of green, creating a cool, refreshing, deep, vibrant, and tranquil tone to use in contrast with this bold, vibrant, and eye-catching red as well as a neutral base of black plus a comforting, soft and warm beige for the typography.
The font I ended up choosing was Noto Looped Thai because it’s open source plus due to its accessibility and inclusivity, people who rely on assistive tech such as screen readers will benefit from the improved legibility. Lastly, being part of the Noto font family that provide a set of typefaces for scripts means that I will be promoting consistency.
I also made a logo for my website by using illustrator & photoshop:
I traced over a picture of a carabiner i took using the pen tool in illustrator:
Multiple variations of the initial design:
Multiple variations using different backgrounds:
To make my website accessible for as many people as possible i will follow these guidelines:
Laptop - quoting - “I design and develop experiences that make people’s lives simple.” Courtesy of Unsplash. Found at https://unsplash.com/photos/bs2Ba7t69mM
As you can see from the final screenshots of my website & the high-fidelity prototype pages, I tweaked a few things with the website, here i will go through the steps/ overview of how i coded my website.
Initially i coded the navbar, i tried to use an SVG of my logo in the header however i couldn’t get this work thus opted to use text instead.
Using JavaScript i coded an animation for the hamburger drop down, i also made the nav bar fixed to solve two issues i was having:
This is also why i changed the final websites nav-bar from the high-fidelity prototype version of a separate page for the navigation menu as it creates more unnecessary steps for the user.
Next i coded the parallax for the homepage.
Then i coded the about us box where i had to design the first button where i added a hover effect to it.
Then i added in the bouldering training plan section with a CTA button.
I initially coded a manual carousel for reviews, but text overlap on smaller screens persisted despite media queries. I redesigned it as a result.
Here i made a constant rotating carousel meaning the user won’t have to do anything saving time and effort while also working as intended.
I then added the footer embedding the Google Maps API into it.
The following screenshots show rectifications I made during my coding process:
I decided to use the home page for the alteration to be made by a peer using Perch CMS, here are the before & after screenshots of this:
Altered the navbar by typing in “hello world” as a h2 element however i wouldn't say anything broke but the “Redpoint Training” title did get pushed to the right.
The top GIF got centred by the containers CSS however due to the button the bottom one did not. Two GIFs of Alex Honnold (one of the bst climbers and free soloists in the world) climbing el Capitan in Yosemite.
An article was added which was made with the help of Chat GPT to write the text. Im pretty happy with the way the container “contained” the elements.
Added a photo as well as a passage of text about climbing. Again the way my website handled the content meant nothing “broke” on the site.
Here my peer added an image as well as text related to climbing. This slightly broke the footer on my website due to the image overlapping the text.
My sites footer still held together after a muster of <h1>,<h2>,<h3><p><strong> etc. tags were put into the CMS. At the end of the footer my peer controlling the CMS added an array of various title tags to try to break my site.
The Redpoint Training project was a university assignment I approached as if working for a real-world client. The goal was to design and develop a multi-page website for a fictional personalized coaching service tailored to rock climbers. I started by planning the project with a detailed schedule and mood board to guide the creative process. Drawing inspiration from climbing gyms I frequent and analyzing competitor sites, I developed a cohesive design aesthetic that aligned with the adventurous and motivational branding of the service.
I built the initial prototype in Visual Studio Code using HTML, CSS, and JavaScript. Once the foundation was complete, I transitioned the site into PHP and integrated Perch CMS to enable dynamic content management. This allowed a peer to collaborate with me by populating and testing the site with content. To enhance the functionality and realism of the project, I incorporated two APIs: the Google Maps API, which displayed the fictional company’s location, and the Square Payment API, enabling users to (hypothetically) purchase bouldering training plans directly through the site. Ensuring accessibility and responsive design remained a priority throughout development.
This project was a valuable learning experience, allowing me to develop my technical skills in creating dynamic websites and managing APIs. By treating this university assignment as a professional client project, I gained experience balancing design, development, and collaboration to deliver a polished and functional final product.