STK blog post draft

It started with a terrible mockup.

A mockup that not only used many bad concepts, but failed to even properly show what could be considered the good concepts.  Not to mention the eye bleeding.

The year was 201?.  There was dicussion happening in the forums over whether a proposed menu music should be used.  Many people complained that the current menu music was boring and slow, and thus didn't work well for a kart racer.  Others thought that the new menu music didn't really fit.  My view: they were both right.  The problem was deeper: the entire UI felt non-energetic.  The current menu music fit the current UI, as they both had a feel that could be described in 3 terms: Big, slow, and complex.

The new music felt energetic and quick, but didn't mesh with the UI, creating a disconnect between the music and visual feel of the UI.  This is where my terrible concept art came in.  I wanted to show that the music could work great, if the UI feel was revamped to fit.

So in a few hours, I created this monstrosity in GIMP to try to show my point:

<https://jacobspctuneup.tk/gui.png>

The concept was to have a severely streamlined UI the used sharp corners to evoke a sense of speed.  However, it looked *horrendous*.  The Tux on a white background was a blatant and awful rip-off of Mario Kart 8, the colors and fonts used were awful, and no one in their right mind would ever touch the thing.

But it planted a seed.  I started development of a intractive mockup that runs in the browser.  This allowed me to show one concept I couldn't properly show in the first mockup: the pulsing buttons.  The idea was to have a pulse effect around the currently selected button, to highlight it, while adding to the sense of motion and speed in the UI.  The pulse would be in time to the beat of the concept music, further tying the music to the UI, creating an integration of the two into one unified whole.

I also knew what *not* to do in the new mockup, such as not having a white background, and not using a terrible, non-bold font.  Eventually it came together into what can be seen here:

<https://jacobspctuneup.tk/STK/newgui/mainmenu.html>

Although clearly a big improvement, showing the concept much better, it was still not much more than a half-backed concept from an STK fan.

Fast forward about a year.  LCP, a real, actual designer who knows actual, real design stuff decided to create a vector version of the STK logo.  When the STK logo was first designed many years ago, it was only ever made in what is known as a bitmap, meaning that the image was stored as a map of pixels with the color of each pixel stored in the image file.  This means the if the image is scaled larger than the image contains data for, the image is made blurry.  A vector image, on the other hand, store information about lines, their poisition, shape and color.  This means a vector image can be scaled to any size without loosing sharpness.

Turns out, seen by everyone but not truly seen by hardly anyone, was a well-defined visual style contained in the logo that felt energetic.  Exactly what was needed for a new UI.  Soon icons started coming in a new style derived from the well-known STK logo.

<pic of STK icons in the new style>

With a new style defined, a new forum thread was posted with some mockups using the new style.  This is where things got real.

<mockup from LCP>

The mockup showed design similarities to my interactive mockup, but was much more refined, and introduced the new icon style that fit with the new feel much better.

As the thread went on, and more icons were crated in the new style, a new button style was also created that matched the icon style.  Finally, a well-defined feel that felt fresh, polished, and energetic.

<button.svg>

But alas, implementing a completely new UI is a huge undertaking, one no one could reasonably do themselves.  The forum thread shifted directions to talking about using the new icons in the current engine and UI.  But many felt that the new icons didn't work too well in the old UI, since their style was quite different than the rest of the UI.

Thus, the project stalled for a while.

Eventually, I decided to try to implement parts of the new style into a skin for the current engine.  In a experimental branch, I added the ability for a UI skin to load a different set of icons.  I then implemented the new style's button into a new skin that used the new icon set.  I also changed some other parts of the skin, like the background, to match the new style.  The results were rough, but showed promise.  I continued implememting skin elements in my skin using the new style, along with more capabilities for the skin, such as changing the font and menu music per-skin, and things started to come together.

<pic of WIP skin>

While playing a race while my skin was active, for a breif, but beautiful moment, I stopped seeing all the imperfections of STK, all the things that need fixing, or are imperfect.  I stopped seeing the skid particles that I spent way too many hours tweaking just to get them "better than they were".  For that split second, for the first time playing STK, I just saw a good game.  All the imperfections and areas the need polish faded away, and I just saw a good, enjoyable kart racer.  For a perfectionist, that's pretty huge, and it provided even more motivation for me to finish the project.

The skin slowly started gaining some traction on the STK Discord channel, with multiple users using my branch so they could use the new theme.  Eventually, one of the developers of STK implemented skin capabilities like changing the icons and fonts in a cleaner way.

And that leads us to where we are today.  As of today, if you compile that latest code of STK from GitHub, there is a new skin that can be selected in the UI options tab.  If you select the skin, you will be greeted with a very different look and feel that the other skins have.  The icons, buttons, fonts, and music will be in the new style, providing an interface that feel energetic and fresh.

In all this talk about the development, I haven't detailed the attributes of the style yet.  The style consists of these main attributes:
- It avoids curved lines, providing a polygonal feel.
- It uses polygons with a variant color of the main color to provide dimension
- It uses bold, black borders

<pic showing the style broken into its main elements>

Since any marked change to the visual style of a game won't be to everyone's liking, switching back to the old style is as simple as selecting another skin.  For the next release the new skin will most likely not be selected by default, as we want to get a good feel for what everyone thinks of the new look before we consider changing any defaults.

So here's where we ask you, the community, what you think of of the new style.  Love it?  Hate it?  Note sure yet?  Do you think it should eventually become the default in an upcoming release such as 2.0?  Let us know!

There are still definitely improvements to be experimented with, such as implementing a subtle pulsing effect on the highlighted button, like what was in the interactive mockups.  But we feel this a good first step, and a great way to gather input from the wider STK community.

Also, don't ever give up if you have an idea, but the first version is terrible.  Just look at what my disgusting first mockup eventually evolved into.

Speaking of first tries, this is my first ever blog post, what did you think of it?  Was it as terrible as my first mockup?  Let me know in the comments (and be honest. :)

-QwertyChouskie