The Starius Project: Designing, facilitating and building the foundations

 

@ElectroGuyMika needed help to design and add some content to his website before the Maker Faire Lille event. (Where he wanted to introduce his new prototype.)

The website had to be simple: one landing page with a contact form. The goals were to boost his online presence, and to simplify the contact process for people interested in knowing more.

My job was to put the website together, in a short period of time and without much content. And of course, to create the documentation for him to be able to manage the website on his own.

Another challenge was to find the aesthetic he was looking for: VaporWave ! A led-based, retro and colourful light painting can-thingy. The design of the website had to match the product. The challenge was to provide a smooth and efficient yet 60-70s inspired, nostalgic and neon-friendly website.

Process:

I sent him about a dozen questions. Like these:

What is your pitch? What do you expect from your website? How are you?

I started to work on the design before having any content. Not ideal, because you can easily get lost, and end up doing things you don’t need. But with the short deadline it was a good choice. This way, when he sent me the content, I only had to delete what I didn’t need.

I took quite some time to research the right aesthetic. A journey through neon lights banners and flashing images.

With the little bit of time I had left, I worked on the SEO and the graphics.

Making it:

One of his friends had already bought the domain name and installed Wordpress and the theme.

I spent 1.5 hours to discover and explore the theme (Pinnacle by Kadence) and the visual builder (SiteOrigin). I highly recommend using them together. I noticed the builder might be slowing down the website, but I will research this issue during the second part of the mission.

I then added the plugin we needed, and uninstalled the useless ones. This way, it will be easier for @ElectroGuyMika to focus on updating his online content, without having to worry about the technical stuff.

I worked on a graphic chart to harmonize all of the future content, based on the artwork he gave me. And yes, I really dig the pink neon colour!

Want something like that ? Contact me !

Next steps:

Resources:

Info:
  • Add content
  • Speed up & optimize
  • Add new fonts
  • Ease in-out scroll
  • Publish gallery grid (waiting for the photo shoot)
  • Optimize responsive design
  • Create tutorials for adding more content
  • Add a favicon

For the social media icons I used FontAwesome
For creating the graphic content I used Inkscape

Phase 1: approx. 14 hours
Phase 2: coming soon
URL: thestariusproject.com
Time report : Toggl_time_entries.pdf