TLDR:
The following was my process in creating a marketing site for a new type of hybrid learning school in Sierra Leone.
π View Deployed Version
π View GitHub Repository
Table Of Contents
- The Project Brief
- Logo Concepts
- Web Design
- Tech Used
- Custom Navigation
- Mailchimp Intergration
- Slideshow Hero Banner
- Dynamic "Back To Top" Buttons
- Crisis Accordion & Vertical Tabs
- YouTube Playlist API Intergration
- Netlify Contact Form
The Project Brief
Gen Hybrid Systems is a new nonprofit with one mission... To build a hybrid learning school in Sierra Leone, Africa.
Hybrid learning is where a student can take classes either in a physical school building or online. For some in Sierra Leone, this means they won't have to walk 5-8 miles to get to class. It will be a game-changer for them.
My job was to first help flesh out the branding with some logo concepts, then design and build their initial website.
The goal of the website was to first introduce the education crisis in Sierra Leone and how Gen Hybrid Systems will help. Secondly, provide them with a way to share progress and build a follower base.
Logo Concepts
The project kicked off with creating several logo concepts to help represent the new organization. I don't really offer logo design as a services these day, but it was a helpful exercise to get started.
Tools used:
In the end, Gen Hybrid went in a different direction and created this final logo mark with one of their other partners.
Even though my suggested concepts were not used, this was not time wasted by any means. I ended up using my research for the logo comps, to help inform the next stage β designing the website's UI and structure.
Web Design
My approach to the design was to have it first and foremost serve the goals of Gen Hybrid.
- Stand out from other educational organizations visually
- Educate site visitors about the crisis in Sierra Leone
- Enable visitors to follow the progress of this mission
To stand out visually I used deep brown colors with yellow and blue as accents. (Interactive elements specifically use the yellow highlight color.) I chose the brown and serif font to tie into a "book" theme, but not be overly scholastic.
Credit: Render mockup downloaded from ebhy | www.freepik.com
I used Figma primarily to design and prototype the site.
The following sections will highlight ways how the site educates visitors about the crisis and ways to follow Gen Hybrid Systems.
Tech Used
- React
- SASS
- Mailchimp
- GitHub
axiosreact-gareact-iconsreact-mailchimp-subscribeuse-scroll-position- Netlify
- Network Solutions
- YouTube API
- Popsmart
Custom Navigation
The site as a whole does not use a CSS framework but relies on custom SCSS styles. (With some help from Stack Overflow. π)
This posed an interesting challenge for the navbar, as it behaves very differently on mobile than desktop. It was a wonderful learning experience in the end though!
On mobile, I ended up using a custom React hook called use-scroll-position to help calculate how much of the page has been scrolled. Once down 100px β 200px or so, the menu becomes sticky and receives a background color.
For the toggle menu button, there is a fun little CSS animation. It is also a11y friendly, with some hidden screen reader text.
Mailchimp Intergration
To help build a following there is a subscription form in the navigation that stores contact information in Mailchimp.
For a complete guide on integrating Mailchimp with React, check out my previous article.
Slideshow Hero Banner
It was really important to visually showcase the ability to study in school and at home. After all, this is one of the main benefits of hybrid learning.
The main hero banner archives this with two responsive images, that fade back-and-forth between each other. It took a lot of googling but ended up achieving with the help of absolute positioning and CSS animations.
Dynamic "Back To Top" Buttons
Because this was a single-page site that was rather long, I felt it important to add a "back to top" button. However, it isn't helpful to show this button when the viewer is already at the top of the page.
Once again the custom React hook use-scroll-position came to the rescue.
On desktop screens, I used it to calculate when a button should appear/disappear within the social media pinned sidebar.
On mobile screens the same button shows up past a certain scroll distance, but this time on the bottom right of the screen.
Crisis Accordion & Vertical Tabs
One of the more complex challenges to design and build was the Crisis section. I wanted to illustrate in an interactive way, what issues Gen Hybrid Systems is looking to solve.
Using a bunch of tutorials I created a vertical tab menu that also acts as accordion.
When a tab is clicked, an image animates in and the accordion opens to reveal more text and a button. On mobile the images go away, with the focus being on the vertical tab accordions.
The whole section also has slight a parallax scroll.
YouTube Playlist API Intergration
I used YouTube's API, (specifically the PlaylistItems endpoint) to bring in the latest Gen Hybrid System videos. This gave them an easy way to keep the site's visitors up to date, without needing to touch any code.
Netlify Contact Form
Leveraging the custom input fields (mentioned above) and Netlify's super simple (& free) mail server I built in a contact form.
Netlify does a lot of the heavy lifting with spam protection, but I built in some additional validation to ensure the correct info is captured.
The "Send" button will not "enable" until all the form fields are filled out and the email field contains an @ in it.
I hope you enjoyed viewing this project and maybe even got a few ideas for your next one! Please share in the comments what you come up with. Always love seeing how people approach designing and building freelance sites.
Thumbnail designed with Figma
Top comments (2)
React seems like the wrong tool for this kind of site
Why do you say so?
If developed with something like gatsby, you get a lot of optimizations out of the box and a good developer experience. Isn't this enough motivation to use React on a small project like this?