Continuamos con nuestro Tuto. Antes de meter garra a la parte de CSS con HTML se me olvidaba algo muy importante: diseñar de tu web, osea crear el arte y los bocetos de como se vera tu pagina web. Claro y esque no podemos andar a ciegas por ahi armando las cosas. Así que hoy nos enfocaremos en que pasos seguir para tener el diseño de tu Web.

Tu Diseño en Imagen

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.

Lluvia de Ideas del Diseño

• Empezamos por palabras que tengan que ver con nuestra onda. Nos basamos en la idea del juego primero "Insectos que pelean entre ellos para proteger y aumentar su colonia". Entonces tenemos : insectos, batalla, colonia, juego web,turn based strategy, diversión, en fin todas las palabras que se les pueda ocurrir, no hay palabra mala recuerden. Aquí les hago un collage de estas ideas en forma de imágenes:

• Ok, una vez con esta lluvia de ideas inicial, continuaremos eligiendo algunos colores que sean mas representativos de nuestra lluvia de ideas. Palabras como azul cielo, verde pasto, gris metal, cafe tierra, colores terreos me vienen a la mente!. Interesante ya tenemos una buena selección de colores para nuestro juego. Ahora aprovechemos el internet para ayudarnos. Un buen sitio de donde sacar inspiración en colores es en design-seeds.com. De aqui saque las siguientes colecciones de colores:

Esta es fácil y tiene mucho que ver  con plantillas ya usadas en otras paginas webs. Lo que sugiero es que visiten otras paginas webs y saquen los esquemas de diseño que ellos tienen, especialmente juegos mas antiguos que hayan resideñado su pagina web. Asi que ... pirateemos :D

1) Goblin Keeper: Aparte de ser un juego que me gusta, tiene un diseño muy bueno en su frontpage. Les recomiendo verlo. Tiene la tipica interfaz de menu superior, junto con una cabecera que generalmente es solo una pieza aqui son dos cosas, y la tipica division en 3 partes. Es tan tipico que he dicho tipico como 4 veces, y sin embargo funciona!. Definitivamente tomaremos algo de aquí.

Otra cosa muy importante son los botones de accion. En tu juego debe de haber estos botones de accion para que intenten probar el juego. El color verde es demasiado bueno ya que aunque no combina con la pagina web, genera una atención immediata. Tienes que poner uno si quieres que tus jugadores entren al toque a probar tu juego.

Morado: Logos, Azul: Menus, Verde:Contenido, Amarillo: Botones de Acción

2) Ikariam: Su interfaz es un poco extraña ya que no es algo común poner al lado izquierdo el formulario de registro. Su botón de acción  tampoco es muy llamativo que digamos pero en fin es una opción mas. Esta es una estructura de 2 columnas común y como añadido el formulario de registro. El formulario parece demasiado serio, casi casi  una aplicación web ( y he visto aplicaciones webs con una interfaz mas divertida).   pero tiene el beneficio de que es recontra fácil de registrarte. Sugeriria que le hagan un retoque a ese formulario, como poner bordes redondeados y hacer mas grandes los campos, fácil que atraerían mas gente.

Morado: Logos, Azul: Menus, Verde:Contenido, Amarillo: Botones de Acción, Celeste: Formulario

3) Imperia Online: Directa al grano a mas no poder, Imperia online de frente te indica registrate, logeate o get the f@ck outta of here. Ellos deben de tener alguna necesidad de hacerlo tan simple. Me extraña que no haya información acerca del juego, como fotos e imagenes pero ellos han estado en este negocio por mucho tiempo, así que porque no tenerlos en cuenta. Notan el detalle ademas de que detras del Aguila esta la Bandera de mi Pais? Interesante derrepente hara sentir a la gente mas apegado al juego por el sentimiento que hay entre Imperio y Patria, en fin...

Morado: Logos, Azul: Menus, Verde:Contenido, Amarillo: Botones de Acción, Celeste: Formulario

3

4) Dark Orbit: Esto chicos prefirieron el diseño a la funcionalidad. La verdad es que de todas las interfaces esta me parece la mas atractiva (por supuesto la elfa vestida de santa no tiene nada que ver al respecto).   Lo que mas me encanta de Dark Oribit es el uso de bloques con transparencias que definitivamente dan un aspecto genial a ese formulario, aunque los campos pequeños y ese texto de ahi realmente malograron lo que pudo ser una obra de arte. Nota lo Obvio que es el Botón de Acción, verde y llamativo, esta pidiendo a gritos que le hagas click!.

Ahora lo que la pagina gana en diseño lo pierde en la forma. Notas mi diagrama y veras que hay un agujerazo en la parte superior derecha (donde esta la elfa). Ademas de que en la parte inferior como que los hackearon o se les olvido colocar algún contenido. Sin embargo se nota el trabajo en arte gráfico de la pagina.

Morado: Logos, Azul: Menus, Verde:Contenido, Amarillo: Botones de Acción, Celeste: Formulario

Break Temporal: Que hemos aprendido?

Algo acerca de los Formularios

Algo que deben de tomar en cuenta son los bordes redondeados y los formularios grandes. Aprovechemos estos pantallazos y hagamos una comparación:

¿Verdad que el primero? Los bordes redondeados y los botones grandes son un WIN para cualquier pagina que trate de ser amigable al usuario. También el texto grande y que se pueda leer fácilmente por ejemplo lo veo mas legible al boton de registrarte que al de Entrar. 

¿Es necesario tener los formularios en la Pagina Inicial?
Pues yo sugiero que se haga así. Lo importante es facilitarle la vida al usuario y si tiene que esperar menos con menos clicks, entonces porque no!. Ahora poner formularios en la pagina inicial va a malograr tu diseño si se ve como una aplicación de contabilidad. Trata de que haya los menos campos posibles, de hecho esta va a ser tu nueva regla: No pondré campos innecesarios en el registro de usuario, mas de 3 es demasiado incluyendo tu checkbox de "aceptar las condiciones". No te preocupes, acuérdate que puedes obtener sus datos luego si te son muy necesarios. 

Nota acerca de los Checkboxs
 Ustedes creen que son necesarios? Para mi es casi obvio de que si te registras estas aceptando las condiciones de uso. Estos checkbox vienen de una era donde era necesario ser obvio pero ahora, podrias obviar este boton, siempre y cuando pongas en algun lugar legible que registrarse en tu juego significa aceptar las condiciones.

Algo acerca de tipos de fuentes

El tipo de fuente también influye bastante. Imperia Online se ha decantado por fuentes con Serifs, es decir que tiene adornos entre las letras, mientras que Ikariam se ha decantado por fuentes San Serifs, que no tienen adornos en las letras. Yo considero mas legible para títulos generalmente las San Serifs, y para contenido las Serifs, pero tomen este consejo mio, todo esto es relativo a tus gustos, pero asegurense de hacer algunas pruebas con amigos mostrandoles que tipo de letra les parece mas interesantes.

Algo acerca de la estructura
Como han podido aprecio hay muchas formas de diagramar una pagina web, hemos visto 4 de las cuales tratare de usar una combinación de las transparencias de Dark Orbit con la estructura de Goblin Keeper... y porque no los colores y demás también. 

Bueno creo que me extendi algo en este tutorial, asi que lo dividiremos en dos. Lo siguiente que tomaremos sera armar la estructura de tu diseño teniendo en cuenta el contenido que tendra la pagina. 

Hasta la proxima!