I redesigned and coded (HTML, CSS, JavaScript, jQuery) an informational website for a fictional tutoring
company. This company needed an updated website to reflect their new brand and display their team and
services.
This website was modernized within a 12-week timeframe. By using flexbox techniques,
JavaScript, and jQuery, I independently redesigned and developed the new website to better reflect the brand
and improve user experience.
Date
February - May 2024 (Part-Time)
Role
Web Designer & Front-End Developer
Tools
Figma, Visual Studio Code, Adobe Illustrator, Pexels
To replace the old, muted brand colors, I chose highly saturated primary and secondary colors like blue,
yellow, and orange to represent Checkmate
Tutoring's new brand. These colors reflect youth and optimism, important characteristics of an educational
business.
Alata is the only font used throughout this website. Its geometric, low-contrast shape provides a perfect
balance between the seriousness of education and the joy that comes with learning. Since this font doesn't have
any bold or italic variations, contrast needed to be created through color and text size.
Tap or click the image above to view it full size in a new tab.
The above design documents were created to help the design process flow smoothly. Using Figma, I created a
simple sitemap to demonstrate the website's navigation and low/high-fidelity wireframes to design the front-end
visuals.
With simple flexbox capabilities in mind, I designed rows of boxes that could easily translate from desktop
view to a mobile device view. I created the designs in grayscale and color to get a good idea of the color
contrast between different sections of the page. I used this time to craft a user-friendly layout and find
applicable icons.
I found it was useful to mark the header, main, section, and div tags within the wireframe for smoother
development in future steps.
This project was scheduled for completion in a 12 week timeframe. I worked on this project independently and
completed it without spending a dollar. These aspects of the project created some challenges, specifically
regarding the
amount of time I had to create each page; however, they encouraged me to be resourceful.
Original Brand & Videography.
While this fictional company had a website, brand colors, and a clear brand mission, it still did not have a
logo. Using Adobe Illustrator, I paired the company name with a chess piece logomark to create a simple logo
using the brand font and colors.
Utilizing a free stock photo and video library, Pexels, I located and downloaded clips that would work well
in a mission video for Checkmate Tutoring. After downloading free video editing software and free,
copyright-free music, I edited the clips together and created a voiceover (courtesy of ChatGPT) to bring the
video to life.
Adding an end card was an afterthought, resulting in it being created on Microsoft Paint in about 2 minutes.
In the future, I may change it to better fit the company; however, as a fictional company, it will never be
seen by the public, and creating an amazing end card was not the purpose of this project.
Template Code & Calendly.
Remaining conscientious of the limited time available, I found template code from different resources that I
copied and edited into the project; this project was completed before ChatGPT's rise in popularity, otherwise
I would have used it as a handy tool here. I used
template code for the contact, donation, and apply forms. Even
using only a minimal amount of template code saved me an exceptional amount of time.
I also used a website called Calendly that allowed meetings to be set up between participants. I imagine this
resource could be used to schedule meetings between the students and tutors instead of paying for a custom
scheduler software specific to Checkmate Tutoring, saving the company time and money.
Responsive Development.
I designed a desktop view and a mobile view for three of Checkmate Tutoring's website pages. Due to conscious
efforts I made when I first designed the desktop view, translating the design to a mobile view was fairly
simple! I paid close attention to text and buttons sizes and ensuring the design remained consistent with the
desktop view.
Responsive Code & Custom JavaScript Elements.
For those of you who would appreciate a more in-depth description about the website development, please
continue reading about how I developed an efficient, accessible, and responsive design through HTML, CSS, and
JavaScript:
Utilized a custom header and footer element (<checkmatetutoring-header> and
<checkmatetutoring-footer>) to make sitewide edits when needed.
Created a styleguide.css document to store custom variables and ensure consistency through all pages
Coded JavaScript and jQuery to add small interactions and improve user experience.
Used semantic HTML elements like <header>, <nav>, <main>, <section>,
<footer>, <img>, and <video> to improve accessibility, search engine optimization (SEO),
and overall HTML structure and readability.
Added media queries and <picture> elements to support different screen sizes.
Tested overall accessibility with Lighthouse to ensure a friendly user experience for all users and
improve problem areas.
Project Results.
Using vibrant colors and a modern font, the brand received a completely
new and improved look. This project allowed me to sharpen my user experience (UX) and user interface (UI) design
skills and my HTML,
CSS, and JavaScript skills. I was able to combine UX/UI, development, graphic design, and videography into one
exciting project!
