A Voxel City Sim in Rust - Part 2 - Website Prerequisites

From Plan to Product

Branding

Branding and marketing are important and a level of professionalism makes sure that your product doesn't appear like a scam. Thanks to my background in UI/UX design the selfmade designs won't be entirely amateurish however without any experience it is always a good idea to reach out to Fiverr or other ways to get good branding going.

Logo Design

There are plenty of tools out there to design a logo for you. However these often appear generated and without any life but they sure can give you inspiration for your logo. Throwing your squatted name in some of these generators is a no brainer to find what you're looking for.

Some examples taken from freelogodesign.org

However be warned that often these generators have special clauses on how you're allowed to use these logos! Some do not allow you to take parts of it or only exclusively on their website builder. Be sure to read the terms and licenses or hand all that work over to a trustworthy designer.

With enough inspiration I did a classic and put an icon on the left with the name on the right in different styles. This will give it a pretty modern look.

Designed in Adobe Illustrator.

Now why Illustrator? Well most important thing is that the logo is vector based which will mean you can scale it up and down however you want! Illustrator has been choosen as it's an industry standard and got access to it. However there are free alternatives aswell.

Brand Identity

Yes there's more to it than just a logo! Brand Identity defines the entire outward appearance of the company from the words to use, how to behave, what colors to use, how to describe the company and more.

For example if you think about a trendy, funny chat service for gamers you probably think of Discord. When thinking about serious, luxurious smartphones you might think of Apple.

Now Voxeltopia isn't a business plan to make a million bucks therefore I'm not taking defining Voxeltopia's Identity serious but a color palette, font choice and logo are the absolute barebones decisions to make.

Tip: Try and see what colors I chose and why, how I've arranged things and with which adjectives you could describe Voxeltopia.

Colors

Colors play a big role in Brand Identity aswell. It is said that different colors have different effects on us. Blue for trust, black for luxurious, you name it.
We now have everything to get started.

Tip: Try to identify the chosen color palette of Voxeltopia and the expected meaning (commonly 5 base colors with multitude of shades)

Website

In today's world a website is the bare minimum for an adequate online appeareance. Depending on your skills and time constraints you might just aswell go with a Wordpress template or design everything yourself.

Incase of Voxeltopia I've choosen to design it myself to further advance my skills. As I'm more proficient in Vue+Tailwind than anything else and plan to include alot of features like blogs, rss/atom feeds and such I've decided to go with Nuxt.js combined with tailwindcss to make it easier for myself while still learning alot.

Handy tool to quickly get started.

After installing all the dependencies and following the guide you're are staring at basically an empty page. Success! During the setup I chose Nuxt Content to write the blog in markdown and later down the line add more dependencies.

Ready to rock.

First up let's add Google Fonts for some nice fonts by following the Nuxt Google Font Module documentation and adding the following configuration to our nuxt config:

googleFonts: {
  display: 'swap',
  families: {
      'Bebas+Neue': true,
      Lato: true,
  },
},

As you can tell we will be using Bebas Neue and Lato combination. However as you might have noticed we do not see the font being used at all yet. Let's change that by configuring tailwind to use the font:

tailwindcss: {
  config: {
    theme: {
      fontFamily: {
        display: ['Bebas Neue', 'cursive'],
        body: ['Lato', 'sans-serif'],
      },
    },
  },
},

and globally setting these fonts as default:

body {
  @apply font-body;
}

h1,
h2,
h3,
h4 {
  @apply font-display; /* Customize however you want! */
}

/* Responsive text sizing */
h1 {
  @apply text-3xl md:text-4xl lg:text-5xl;
}
h2 {
  @apply text-2xl md:text-3xl lg:text-4xl;
}
h3 {
  @apply text-xl md:text-2xl lg:text-3xl;
}
h4 {
  @apply text-lg md:text-xl lg:text-2xl;
}

css: ['@/assets/css/main.css'],

et voilá fonts are set! Next up are icons for social media shenanigans.
It's as easy as following the documentation and configuring which ones you want:

fontawesome: {
  icons: {
    solid: ['faArrowLeft', 'faArrowRight', 'faRss'],
    brands: [
      'faDiscord',
      'faGithub',
      'faTwitter',
      'faInstagram',
      'faReddit',
      'faSteam',
      'faTwitch',
    ],
  },
},

Next up

We will implement blog posts with estimated read time, table of contents, forward/backward links, rss feed, sitemap and SEO.