Shuffle ← Back

Moonpenguin Website Design

Web Design, Web Development, UI/UX

Moonpenguin Website
A website I created to advertise the computer game "Moonpenguin"
We were tasked with the job of planning and creating a video game in my Multimedia class at school. The next component was the creation of a website which would successfully advertise and provide information about the game to potential buyers.

I decided to create a puzzle-maze style game called Moonpenguin, which followed the journey of a penguin through a mysterious crystal cave. As the gameplay was relatively simple, I decided to target the game at children aged between 7-12, but after some more thinking, I also decided that their parents were also likely to be viewing the website as well to decide if the game was suitable for buying.

Because of this, I decided to try and make the design of the website both visually pleasing and functional to children and their parents. Bright, fun colours were used to provoke visual interest and to break up sections of the site for added variety, and cartoon illustrations were drawn up to help children visualise the gameplay and its characters. I also tried to keep a professional look throughout the design by keeping lots of negative white-space so that the design didn't look too cluttered to please parents browsing through the site.
The eye is immediately drawn to the large introduction area on the home page which subtly introduces the game without being too forceful. I've also taken this as an opportunity to include a large call-to-action button inviting visitors to download the game.

As the home page is often the first page which visitors see, I wanted to display as much information about the game as I could. The introduction, although nice, didn't explain what the game was all about which was why I decided to advertise various features found throughout the game in a section below the introduction. Yet another download link, albeit this time slightly more smaller and subtle, is provided below the features to remind visitors to download the game.

It's often the small details which help a website form a memorable impression in our minds which is why I have also utilised subtle CSS3 animations throughout the design. When a feature is hovered over with the mouse, it will subtly change colour, providing a sort of visual feedback to visitors. It also makes the design seem somewhat more dynamic.
This above is one of the character profile pages for the Moonpenguin website. It talks about the various types of enemies, called "Swirls" that reside within the game. I've used blocks of colour to add visual interest. For example, the "Facts box" is much darker than its surroundings to place more importance and to draw the eye to that particular section first.
Upon clicking the large Download button featured on the home page, the visitor is directed to the download page shown above. The page is nice and balanced with varying sizes of text which denote their respective importances.

I've also created the box art for Moonpenguin and placed an image of it on this page to add a slight professional touch.
Although the website I have created may look fairly simple and normal, I’m really happy with it. I think that it’s really effective since the design is tailored to the target audience. The writing is large and easy to read (for children) and is also professional and clean-looking (for parents). There are large blocks of colour which bring life to the page, and a slight texture in the background. I’m really happy with the way the design and the website itself turned out.

My favourite part of the site is the unity and yet variety contained in each of the pages. I like how the pages look different from each other, with different arrangements of elements and such, (making them more interesting to look at) but I also like how they all fit into the website’s theme and use the same colours and styling.