Bog has been a pretty inspiring game. It helped alot to try and design a website which both looks good and feels functional. Not only because of the interesting story, the arts pretty much dictated how some elements should be placed and used.

I tackled with some features i never had dealt with before, such as animation and element positioning. I am not that great when it comes to javascript and Jquery. I did follow some great inspiring tutorial and tried to implement some ideas in this website as well. It turned out to be quite a struggle at times, however the end result pays it off.

Here are few stuff of what, for me, makes this website good looking.

Homapage intro animation

Based on the title screen of the game, after i received a sample of it, i got the idea to try and break down the elements (here it would be the characters), as to try and animate them in sequence. It ended up being a pretty much simple intro fadein animation, combined with parallax effect when user starts to scroll down.

Besides the animation itself, it is safe to say that the sprite artist did an amazing job, her work looks so great and is what makes the animation so pretty in the first place!

You can check some of her works on DeviantArt

General website design

At the beginning, it wasn't really clear how the website should have looked like. Only idea was to not have anything complicated and messy. After some small sketches we ended up using a pretty typical presentation format in use these days. A mix of a One page design and normal right column design.

The main information should be presented on the homepage, having them divided nicely. Following the idea of the main homepage intro animation, when user scrolls down, some fade in and movement animation are applied on some elements.

The whole website has been designed to function on different devices and screen resolutions. While is is almost impossible to offer a 100% workable visualisation on all screens, i usually keep in mind the standard sizes. Destop up to 1400x900px, iPad, general smartphones. I do have to improve on soem aspects, however the website does work pretty decently.

Extras Screen: Character

For some months after its release, this page or pages, waren't available yet. The main characters where displayed on the homepage, so there was no need for a character page. Around May 2017, we thought of creating character cards, with some quotes, to be published on social media. We ended up trying to implement these cards on the website, with the result of having character specific pages and flipcards! Since there are two versions of a character card and two quotes, users can click or tap on it and let it flip. Cool huh?

Here is an example:
try clicking or tap on it :)

All in all development of this website was a bit challenging. Some problems couldn't be solved for quite some time, in fact, few days ago i fixed another issue.

There is one negative aspect to mention. It can't be solved as of yet and seems to affect almost all websites i've developed so far. The loading time is clearly longer than it should be. I admit, there are stuff i need to improve, however there is also a problem or probably an issue on the server side. I will find out what is making the websites load slow. Hopefully in future i get to make all websites faster.

I hope you like the website design and overall experience :)

Take a look or visit the website entirely at: