Listo, ahora continuemos con la estructura del diseño.

Dark Orbit + Dungeon Keeper + Colores de Insectos y naturaleza, si pongamos esas cosas!, bueno ya tenemos las necesidades de contenido y la inspiración, empezaremos por el maquetado de estructura:



Es simple y es en realidad una copia de la inspiracion que tenemos. Tenemos las siguientes secciones:

• Cabecera: Donde va el logo del juego y un menu de navegacion Ademas contienen siempre en la parte de arriba una seccion de usuarios
• Accion: Donde colocaremos un formulario de inscripcion con su boton de accion
• Show: Colocaremos aqui un video o un slideshow mostrando rapidamente las bondades del juego
• Infos: Secciones informativas de la pagina web
• Pie de Pagina: Generalmente va el copyright o copyleft, junto con informacion de contacto. Tambien si el sitio web de la pagina contiene varias secciones, se puede colocar un Mapa del Sitio por aqui.

Muy bien ahora que ya tenemos la estructura el siguiente paso es colorearla y darle sus cosillas extras. Como les comentaba es bueno tener un amigo diseñador pero nosotros podemos hacer algo bonito.

Primero que nada, estoy usando Fireworks para trabajar, es mi herramienta favorita, pero ustedes pueden usar cualquier herramienta que les permita importar imagenes del tipo jpg o png.

Ponerle los Detalles

Para el diseño, yo lo trabajo por iteraciones,me proyecto a una idea general de lo que quiero y voy probando texturas y colores que quizas pueda funcionar. Mi idea ahora es que como va a ser un juego de insectos, pienso armar una vista del suelo teniendo en cuenta parte del cielo y cavando hacia la profundidad, o si nos encanta cavar:

Iteracion 1:  Colores Iniciales

Mi objetivo aqui es generar la primera idea de cielo y empiezo a jugar con los colores de las paletas que hemos elegido. ¿Notan la aparicion de un cielo y un prospecto de menu?

Se acuerdan de Design Seeds?, bueno yo corto estas imagenes y las uso como base para los colores

Iteracion 2: Logos y fuentes

Va tomando forma nuestra maqueta, asi que se me ocurrio ponerle algun par de fuentes que tengan que ver con insectos y encontre A Bugs Life. Las fuentes son algo importante para el juego, definiran de cierta manera su sentido. Con esta fuente logramos que se sienta mas casual el juego. Sobre el logo pues aunque no me lo crean, es la parte mas importante, un logo debe de ser simple y facil de recordar, puedes hacerlo superestilizado, pero si no es facil de recordar, es malo!. El logo lo saque buscando la palabra insectoides y encontre algo sobre aliens insectos, pero bueno servira para nuestros propositos

Iteracion 3: Relleno de las Secciones

Y bueno hemos avanzado alguito, pero aun la interfaz se ve simple (simple es bueno :P), pero tranquilos pronto llegaremos al final. Por ahora rellenamos los bloques de la pagina con algunas cosa extras y cambiare los colores de algunas cosas. ¿Que color elegir? pues jugando con nuestra paleta podremos hacer algunas cosas interesantes:

Iteracion 4: Usando algunas Tiles

Como ven ya tenemos armado la estructura basica, pero como que falta algo, algo que indique que esto es un juego. Asi que una rapida busqueda en google de las palabras vertical grass tiles, y encontramos un tileset genial que vamos a usar!

Añadimos unos tiles por ahi...

El mencionado TileSet, lo encontre en fantendo.wikia.com

Iteracion 5: Algunos trucos finales, texturas

Uno puede seguir y seguir refinando la interface, pero para efectos del tutorial voy a mostrarles un truco mas que les servira hasta que consigan a su diseñador. Se trata de colocar texturas a tus diseños y este truco lo aprendi desarrollando algunas interfaces para mi juego Xhelos.com.

Bien se trata de lo siguiente, busquen una imagen con alguna textura interesante, apliquenle una transparencia y ponganlo encima de algun contenido solido, por ejemplo nuestro terreno:

Obtienes una textura y despues le añades transparencia. Magico!

Otras ideas a tener en cuenta son los bordes redondeados. Piensen en un rectangulo, sus esquinas son medias puntiagudas, es lo normal y generalmente demuestran seriedad. En un juego necesitamos lo contrario, necesitamos usar border redondos.



Aplicando la transparencia y los bordes redondos, obtenemos lo siguiente:

Toda una labor titanica para llegar hasta esta interfaz! Espero lo disfruten. Con esto ya finalizamos nuestro tuto acerca de diseño y nos enfocaremos ahora en programacion de HTML5.

Enjoy!