Designing the Blazium Website
Designing the Blazium Website
Hi, sshiiden here, part of the Blazium contributors. When I first started designing the website, we knew we wanted a way to showcase our current work. We had a basic static website saying something like: “Release Pending”. So first I looked at what features we wanted:
- Download the Engine
- Link to Web Editor
- List of the Tools we provide
- Our Roadmaps for the project
- Blog (Upcoming)
- Showcase Games made with Blazium
- Link to the Documentation
Design Considerations
The original website backend was written in golang by BioBlaze, I kept using it as I saw it as an opportunity to learn the language and wanted to keep the website codebase simple (don’t hate me for not using react or whatever’s popular now).
Stack
- golang: using gorillamux, gotemplates, gomarkdown
- htmx for all the benefits for Single Page Applications without the downsides
As for endpoints and interaction, I spoke with BioBlaze beforehand about what services he was designing (eg. for download endpoint on the website where the engine versions are shown).
Implementation backend
It was hard at first since I never saw any line of go before working on the website but it didn’t take much time to learn and understand how it worked.
- The base of the website is the gorilla/mux go package for handling endpoints.
- Second most important package is html/template from the go standard library to generate the pages and reusable components like the header, footer and dropdowns.
- Thirdly gomarkdown/markdown for rendering markdown files as html to include in the pages for stuff like the terms of service, privacy policy and games information.
Similarly to the markdown files, there are json files which define information for the tools, roadmaps and games pages where each card is its own javascript object that gets used to generate templates to include in the pages templates to allow easy modification of the pages content without having to navigate the html templates.
Implementation frontend
On the client, htmx was primarily useful for making ajax requests without much effort, getting all the benefits of a Single Page Application without the downsides. It was something I had previous experience with and had good results.
Prism.js for code blocks with a theme to rughly match Balzium text editor default theme while the rest is just html, css, and js written by me.
And that’s it, not 100 javascript libraries to do a simple and efficient website.
Home page
We wanted to give as much information as possible in the homepage with cards showcasing stuff like information on the releases, teaching what is blazium and what is it capable of with games made with it and the tools and services we provide.
This is followed by three card providing the user with information about contributing, resources and the community.
Download Page
I wanted the user to be able to download the engine without confusing him with a lot of choices, so I took inspiration from Node.js download page, using dropdowns to let the user build a sentence indicating the type of the binary they get when pressing the download button.
The input selection feels personalised and unique, and as if it almost guides the user in the selection process as he would expect it to be.
Similar to this I designed the tools page:
It’s still a little empty for now, but I do plan to add information about the currently selected tool.
Color Design
We wanted the website to follow the color choices we made for the logo, and we already had some assets inside the blazium-assets that matched that.
I helped and updated this to keep it in sync, as well as designed the whole website with those colors in mind.
I just experimented until I reached a color combination that looked right, the only color that comes from the logo that survived is the gradient middle color, #af40df, used as the accent color:
The video you see on the homepage comes from the original website background made by Starkium, just a css animation in loop which I recorded with OBS.