Minecraft Marathon Website

The 2013 Minecraft Marathon is about to kick off with a new website I designed using Minecraft.

I worked with marathon organizer Marc Watson to figure out what the most essential parts of the design were. We both agreed that most gaming marathon sites had terrible user interfaces, and I was convinced that I could improve the fundraising numbers with a better design.

Around the time that Marc approached me to work on the site, I saw some photos of the Galeria Adriana Varejão in Brazil (see above), and came up with the idea of the most important element on the page, the livestream video, rising out of the landscape as a kind of architectural element.

I started playing around with designs that looked kind of Minecraft-y, and then eventually decided to try and create the site itself using Minecraft. Here’s how we pulled it off:

  • I started with wireframes - I knew that the Twitch.tv livestream was 640px by 360px, which is a 16x9 ratio. That gave me a starting point - the “screen” in our Minecraft world would be 16 blocks wide by 9 blocks tall. More importantly, it also served as a kind of Rosetta Stone that would let me convert blocks to pixels and build an easy 960px grid in Minecraft - one block is 40 pixels.
  • Drew Rios helped me build the landscape in Minecraft and clear away the “cliff” that the site content sits on. At one point Drew got the bright idea to hasten our clearing efforts with a controlled burn of the surrounding trees, and nearly started a fire that burned down our entire website.
  • Once we had the Minecraft world all set up, We used Eric Haines’ Mineways to export it to a .obj, which we were able to import to Cinema4D. We set up a lighting studio, added the little pig, and textured everything. Then after a quick thirty minute render, I had an image I could bring into Photoshop.

The rest of the site is pretty straightforward - it’s built with Wordpress and has a couple of hideous plugins running the donations and live chat. The whole thing is hosted by MCProhosting. The marathon will kick off in just a few hours - here’s hoping it stays up!

  1. videogamesscreenshot reblogged this from disco-dancer-donna
  2. fugiman reblogged this from maxistentialist and added:
    Max did an excellent job on the website design, it’s a shame the plugins ruined the aesthetics :(
  3. blueyedsilent reblogged this from wilwheaton
  4. catcat-motherfucker reblogged this from wilwheaton
  5. wristnipplestucker reblogged this from wilwheaton
  6. inashke reblogged this from wilwheaton
  7. persephone977 reblogged this from herblackwings39
  8. herblackwings39 reblogged this from wilwheaton
  9. doctorbadger reblogged this from wilwheaton
  10. notaboyscout reblogged this from wilwheaton
  11. ninjash8 reblogged this from wilwheaton
  12. mcscooterson reblogged this from wilwheaton
  13. cortisolo reblogged this from wilwheaton
  14. stoner-housewife reblogged this from wilwheaton