This week we are taking a small break from our regular theme of games and looking at web design, specifically at using the Skeleton framework. Something that I learned from The Art of Game Design is that learning better design principles from any kind of design will help your game design.
Why Are We Talking Web Design?
I had my phone out and was looking up a certain kind of local businesses around my area and found that there were only a couple. When I clicked the link to their websites I found that they were not ready for phones. I had to pinch and zoom and scroll around the page. The information was there and the navigation was clear but it was just not designed to work on a phone.
Since I had been meaning to learn better responsive web design in an effort to increase my value as a web based programmer (my current day job), I decided I would take one of the sites on as a project. So I completely redesigned the whole site and made it mobile responsive. I was proud of my work and asked the opinion of a coworker who is very good at design.
He made a simple suggestion that took the redesign to another level.
Adding a Skeleton
My coworker suggested that I add a CSS Grid system to the site and recommended Skeleton. I had never heard of it before and decided to check it out.
One of the most common CSS grid frameworks is Bootstrap. Many people who have looked into modern web design can pretty quickly identify a site that uses one of its templates or something like it. I have tried learning more about Bootstrap in the past but always found it a little murky and never made much headway in understanding what it was trying to do.
Skeleton is a very light CSS framework that allows you to get started applying a grid system to your website design with just a few classes. It is pretty clear what it is trying to do, and it sort of self documents by example on their site. I found it extremely easy to get started with.
The grid is basically rows and columns. You then use these 2 building blocks to create a cohesive design that is more aesthetically appealing. Additionally it helps organizes the information that is being displayed to be more easily consumed by the user.
After applying Skeleton to the site, it looked 1000% better (in my personal opinion).
Lessoned Learned
Many of the principles of grid systems, such as cohesion, can apply to games and most importantly to the part of the game that the player interacts with, the interface.
Every game has some sort of interface that the player uses to play the game. We as game designers should take things like grid systems and learn to use the principles that they are based on to improve our games and their interfaces.
Don’t forget to look for inspiration in all design.