Final Design Notes

Due to some domain propagation issues/misunderstandings, I can't use the domain I bought yet (dangerlabs.co) which is a real shame! I really like it. Luckily I intend to use it past this project, so that's something.

Visit my site via the direct link in the mean time.

Major improvements + changes since the interim design:

• Glow on the logo. I feel that this puts across a sense of danger through heat and energy, very brand appropriate.
• Orange/yellow on dark greys colour scheme. I took this from the logo, but the stem of that is in warning signage. Blue is just not dangerous enough.
• Low contrast checkered background. I really like how this looks on the www.minddesk.com site, so I pinched the idea since making my own graphic for it was trivial. It really helps the content sections to pop, and breaks up the flat colour blocks nicely.
• Round corners and bevel-style borders. Trying to learn about and incorporate as many modern CSS features as possible, I experimented with these and found they lent a slick yet slightly cartoony feel to the page - perfect for Dangerlabs.
• Main nav up top. How did I forget main nav in my original design?
• Font choice. I simplified to two fonts, Arial for the body and something similar to Helvetica Narrow from Google Web Fonts for the headings. Caps were a branding choice, they tie into the logo with its warning signage references.
• Full width showcase. The comments on my interim were spot on, when I actually made this card-like design, the real estate I actually had for content was pitiful. I scaled it up to full width and incorporated the nav and title into the block.

How the showcase works:

• Uses jQuery to move a giant <ul> along. It tests the current page container width to figure out the numbers.
• Skips back to start/end when attempting to navigate past either end.
• Reads game title information from an attribute in each <li> and displays this in the title-bar. This way I can change the title without it having to be part of the sliding area, since I wanted the nav to be static.
• Uses a jQuery swipe gesture plugin to capture swipe events in the showcase area and trigger the same <ul> movement functions as the nav buttons.

Interim Layouts

I went back the drawing board on my original layout ideas to simplify and make them more plausible in the time frame we have. This time I designed with the framework in mind, and considered scaling more at every step.

There are 4 layouts for the site: desktop, tablet, wide mobile and mobile.

Front Page
An interesting and interactive gallery/slideshow for pushing Dangerlabs' games is the most important feature, so it goes front and centre. Users will scroll through the series of 'cards' to see info about the different games.

Below that, there are obligatory about, contact and news feed blocks. News will be more relevant to returning users who may already have a Dangerlabs game and be looking for news relating to new releases or updates.

Games Page

The games page is about displaying the game first, and telling you what it's about second, so a big useable gallery is key. Besides those, links to download the games for various platforms are important. These would disappear on smaller form factors, because the games do not support iOS or Android.

Logo Studies

More Aesthetic Inspiration

I remember liking this sites approach to flat coloured design, and they are using light text on a dark background like me. The checkered grid helps break up the flat colour while still fitting into the style overall, I'll have to try that out.

http://www.qubicle-constructor.com/

Discarded Designs

I discovered recently that my workflow for this was backwards. I should have looked at frameworks first, and designed my site around a framework. This would have been much faster. I also came to the realisation that the kind of site I was aiming for was far better suited to a static flash site, and was not suited to scaling at all. Heavily graphical and themed sites tend to be made in flash for a reason I guess.

This was my first design for a front page, with horizontally scrolling sections at the top and bottom. I was unsure how this would scale to mobile, and later heard scary things about absolute positioning etc on iOS, so abandoned it as needlessly difficult.

This design was more static, and was all about having interesting graphical transitions between content blocks. There is a pipe system, with animated sections of liquid, which ties nicely into the branding. The idea for mobiles was that the content blocks would fit within a landscape mobiles screen at 100%, with some space left over to show the little connecting pipes going offscreen to another content block. I felt this was overly static, and the graphics between content makes using any frameworks difficult because there are no gutters. The more I thought about this, the less it seemed suited to the technology we are learning about, so I abandoned this in favour of a site designed specifically to a framework.

Spying on the competition

What do other indie game developers have on their websites? What styles do they employ? I shall examine a few.

Mojang.com

The creators of the revered Minecraft understandably have a Minecraft-centred site, but the branding is separate. They appear to be using a simple blog platform with a few sidebars which are mainly about other social sites and communication in general. It seems more like a hub site to gather other links related to the company, and pushing their merch seems to be their main concern over advertising their games. This is not really surprising given the enormous brand power of Minecraft itself, and the high traffic that minecraft.net receives.

Having separate sites for the games seems to be the norm here, so I suppose I'll have to make the call on whether Dangerlabs is adopting this approach too.

I enjoy the flat, (mostly) two-colour graphics, and the use of greyscale for structural bits and bobs. However, I feel Dangerlabs needs MUCH stronger branding to stay true to the name.

thatgamecompany.com

The makers of highly experimental games like Journey would seem to have something in common with my goals, however there is a major difference in our branding goals. thatgamecompany take themselves a little more seriously, and their dreamlike aesthetic is almost in direct opposition to the punch I want.

In terms of content, though, each page has a layout tailored to its needs and seems to work well. The pages for specific games in particular are very nice, with smoothly scrolling content in several panes and a lot of information accessible without ever seeming cluttered. Their approach of having a landing page to further push the branding is interesting. It has the bare bones of some content, like a mini mission statement, but leaves a lot of room for that bloomy white hand. This could work for me.

thatgamecompany differs from Dangerlabs in that their games are PS3 exclusives, so they provide as much information as possible but do not need to worry about patches, sales or download links. The PC market is a bit different in that respect.

Dangerlabs is open for danger

Well, not yet. But Dangerlabs seems to have won the brand battle, both by popular opinion and my own preference, so that is locked in now. I still don't have a suitable logo, but I'm close to one I think, I know what I need it to say. My fav concepts currently are some combo of a skull and a lightbulb, and packaging it all as warning signage.

One keyword that has come out of me explaining the Dangerlabs concept to people is cartoon science. I'm going to make this the primary touchstone to come back to when making aesthetic decisions from now on, to help anchor everything and get a cohesive feel.

Brand and logo brainstorming (thus far) below.

Ubiquity

Ubiquitous computing has commenced! First mission - make a website for a fictitious company that can adapt to mobile platforms.

Instead of a fictitious company doing things I don't care about, I am choosing to create a not-yet-real company that does things I care very much about. Unsurprisingly, this company is going to make games. I am thinking entrepreneurial thoughts about the next stage of my life so it makes sense to construct something now which I may actually use in the coming years.

First Step: Company identity
Important facts about my company:

• Game developer
• very small team
• interested in experimental gameplay, especially play involving creation and construction
• on the spectrum of cute to cool, we are probably in the middle, incorporating a little of each
• light-hearted
• making games primarily for a niche PC market

Branding

First comes the name, then the logo will follow. Things I want the name/branding to evoke:

• Playful
• Exciting
• Creativity / Construction as a focus
• Experimental / cutting edge

Considerations when choosing a brand name:

• Makes for a good searchable keyword. Hybrid words are best.
• Memorable. Fewer characters are better, and easy pronunciation.
• Not already in use in the same industry (Trademark concerns)

Top ideas thus far, in order of preference:

1. Dangerlabs
2. Octoworks
3. Superplex Industria
4. Bitsmithy

Research & Inspiration

Companies to look into:

• Mojang
• Polytron
• Capy
• Superbrothers
• Data Realms
• thatgamecompany