A Gaming Startup Website Design
I am a gamer for years so I would love to do something related to gaming. This is a self-start exploration project mainly focus on UI design but also include UX and branding. My fictional company is an agent that designs small games for different clients.
Creative Directions
1) Cool and Avant-garde Direction
For this direction, the company is focused on designing games for clients that are mainly professional companies who either sell products or provide services for “hard-core” gamers, whose target market is mainly males in their 20s and 30s.
2) Cute and All-age Welcome Direction
For this direction, the company is designing games for all kinds of clients, and the clients themselves also have a broader range of target customer. The style is more friendly and welcoming as almost everyone can play this kind of games.
Final Direction
I would like to pursue the first direction, which is cool and Avant-garde. I suppose the companies that in need of games to market their products should be the ones that have deeper relationship with gamers, which lead to the conclusion that the first direction is more suitable.
On the homepage, I want to put the company’s job, the services they provide and their testimonials. The contents that need to be highlighted are company’s services and testimonials. Visitor would want to know how this company can help them achieve their goal. Testimonials can showcase the company’s ability to accomplish past projects in order to convince visitors to take next action.
Style
Fonts
At first different fonts are tested and two combinations were selected to match my creative direction.
I chose to go with the right one but found that the header font does not have enough types of weight to choose from, it turned out very hard to apply it to real design, so I decided to go with font Tungsten as my header font.
Tungsten is a very cool font and it goes well with Roboto Mono, which feels like an old style coding text. I am using this font pairing because I want to impress my visitors and give them the feeling that this company is cool and it has something to do with games and technology. This pairing follows my cool and avant-garde inception sheet and it looks great on dark background too.
Logo
The company name is Great Small Games, I directly thought that the short form of it should be cool as it has double G in it. I drafted some logos on paper and picked up two of them to digitalize. From the inception sheet and mood board, I know that I want to use Red and Black as the main colour. So the first logo version is black Tungsten GSG with a red cutoff effect, to make people think it is cool and be able to relate it with games.
The idea of second version is pixel squares that composite GSG, as well as a red sharp line cut across the letters. I think the black and red pixels are very interesting and should definitely remind people of digital products. I played around the squares layouts and asked other people if they can read GSG from the logos. After choose the one I like most, I made a black background version as well.
At this stage, I could not decide which logo I would like to go with, so I decided to do my style tile first.
Final Style Tile
Based on my inception sheet and mood board, I came up with my final style tile. When thinking of the buttons, I looked at my logo version 2 and an idea came to my mind. I want to use pixels as the button boarder as well! Now I got a style tile that has cool red and black as main colour (dark bluish black to mimic outer space), and pixels to give visitors the 8 bit game feeling. It should help the website attract hard-core gamers.
Wireframes and Content
To achieve the company why which is “design cool games to attract hard-core gamers”, I think it’s better to keep the website very simply with some features that visitors can play around and explore. So I only have three main pages in total, with big and straight forward CTAs. The mission statement is “Small games, great impact”, and the words can be aligned like the company name “ Great small games”.
I hand sketched the basic wireframe and digitalized it in Sketch app.
I used very dark blue as the background, the main picture is a sci-fi style tunnel, I used it because I want to give visitors the space travel feeling. I used flip cards to display services and past projects (work as item list), visitors move their mouse above the card and it will reveal the content. This is to add a explore precess to their visit so that they can find the website cool and raise their interests to learn more.
Final Interactive Prototype
Conclusion
My friends tested the website and I think it works well to meet the company why. I received many valuable advices after presentation and I will keep polish my design according to them.
I enjoyed the project very much! Although the company is my own fictional company, I did have a very clear idea of how the company should look like and how it works. Maybe this is my startup company in the future.
I like both creative directions, the cool one gave me more space to play around and try some different ideas without feeling wrong. I will definitely experiment on the all-age direction as well.
Through this project, I improved my UI skills and developed a deeper understanding of UI elements and style tiles. I will keep practice and apply what I learned from this course to my future projects. Hopefully one day I can be as good as my instructors! :）
