Prototype & Design

As with any front-end project, we began by producing a design prototype in Figma, a brilliant tool for design and wireframing (similar to Adobe Illustrator at a glance)

The design goals were that the site should be lighthearted, breathable and to-the-point. For these reasons, I suggested we use lots of bright colours and bold type - Ross was also interested in having very few "hard" edges, and thus we opted for a number of "wave" elements to act as dividers between some of the key sections.

As for fonts, we opted for Montserrat and Roboto (from Google Fonts) for the headings and body sections respectively.

image.png

Technology

With a mostly complete prototype, I began work on building the site itself. To achieve this within the tight timeframe we had, I chose to use NextJS & TailwindCSS so that I could take advantage of the tooling provided by React and the utility-first approach of TailwindCSS.

This meant that it was extremely easy to create "template" elements that could be reused with different data. For example, each of the manifesto points are actually just one simple component takes a title, number and body argument. For the sake of simplicity, all of the data is simply pulled from a local file - this removed the need to worry about a content management system.

SEO & Deployment

Deploying the site was made incredibly easy by NextJS - it's static generation feature means that the site is 'built' once and then served as incredibly fast static HTML & Javascript. To help us achieve sub-one-second full page render, we're using Vercel's content delivery network (CDN) to host the site in a number of global locations. This, combined with carefully optimized SEO tags, meant that we were able to achieve a near-perfect lighthouse page score. The following photo shows how different social platforms are able to provide rich content for the page.

image.png