Crea tu Juego Web 7: Diseño Web Parte 2

Publicadas por Jee Ba

Continuando con la parte de diseño, en el anterior tutorial vimos como tomar inspiración de varios recursos para tener una idea del diseño del juego. Hicimos ya nuestra lluvia de ideas y tenemos algunos colores fuentes para trabajar, ademas de eso seleccionamos un tipo de estructura fusión de otros juegos webs, como dark orbit y goblin keeper. Aqui una idea de lo que se va a lograr (claro dentro de nuestro poder en diseño...)



Tareas a Finalizar

En el anterior tutorial nos quedamos en desarrollar la idea del juego y teniamos la siguiente lista, en negrita estan las que desarrollaremos ahora.
  1. Lluvia de Ideas del diseño
  2. Tomar Inspiracion de otras paginas
  3. Ver que contenido tendrá la pagina
  4. Armar la estructura del diseño
  5. Colocarle un Fondo de Pantalla alucinante Ponerle sus  Detalles
Continuemos entonces:

Ver que contenido tendrá la pagina

Facil, sabemos ya masomenos que queremos colocar gracias a las ideas obtenidas en las siguientes paginas, ademas por experiencia les puedo decir que necesitamos:

  1. Barra de Login de Usuario (y selección de idioma en un futuro algo lejano, hay esperanzas :D)
  2. Formulario de Registro, con los campos necesarios nomas, consideren también la opción de usar su usuario de facebook, aunque usaremos un login común y corriente.
  3. Boton de Accion, sobretodo para registrar un usuario nuevo
  4. Imagen de Fondo chevere!
  5. Una Seccion de novedades, mantengan actualizada la pagina con buenas novedades!
  6. Una Seccion de Fotos, pongan bastante fotos en el juego.
Listo, ahora continuemos con la estructura del diseño.


Armar 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!

¿Te gusta la pagina?, socializame haciendole click a tu color preferido:

Add to Technorati Favorites Digg! del.icio.us.me