Mis queridos y siempre bien estimados 3 lectores, como recordaran el año pasado hice la promesa de que este año iba a trabajar en un juego o el desarrollo de un juego en HTML5 y hacer un proceso creativo de desarrollo documentado en este poco visitado blog.
Diseño de pantallas.
El primer paso a desarrollar que ha sido el de la creación de lo que son el primer borrador BOCETO de las pantallas y que es lo que deben de incluir, esto lo comento antes de entrar en programación y cadenas de Markov, ya que considero que uno de los grandes errores que he cometido como ingeniero en computación y programador en mis años mozos, es creer que hacer bosquejos, mockups o Wireframes es perdida de tiempo, que lo importante es el codigo.
Como sugerencia no pedida, es preferible tardarse y estar seguro que asi es como debe de ser las pantallas o tener una idea visual de lo que se busca muy bien trabajada antes de ponerse a tirar lineas de codigo, la razón es simple, los cambios cuando ya estas en el desarrollo pueden echar para abajo y retrasar de manera considerable un proyecto.
Así que lo primero que veran aqui son los bosquejos hechos a mano de lo que considero deberan ser las pantallas y después los wireframes ya creado con la herramienta moquops.
Un wireframe para un sitio web, también conocido como un esquema de página o plano de pantalla, es una guía visual que representa el esqueleto o estructura visual de un sitio web. El wireframe esquematiza el diseño de página u ordenamiento del contenido del sitio web, incluyendo elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto.2 Usualmente este esquema carece de estilo tipográfico, color o aplicaciones gráficas, ya que su principal objetivo reside en la funcionalidad, comportamiento y jerarquía de contenidos. En otras palabras, se enfoca en “qué hace la pantalla, no cómo se ve.” Los esquemas pueden ser dibujados con lápiz y papel o esquemas en una pizarra, o pueden ser producidos con medios de diseño de aplicaciones de software libre o comerciales.
Pantallas
- Pantalla de Splash o Inicio
- Pantalla de Menú
- Pantalla de Juego
- Pantalla de Score
- Pantalla de Trofeo
- Pantalla de Ficha de trofeo
ESTOS SON LOS BOCETOS Y EL WIREFRAME
Elementos de un wireframe
El esqueleto de un sitio web puede ser dividido en tres componentes: diseño de información, diseño de navegación y diseño de interfaz. El diseño de la página es donde estos componentes se unen, mientras que un wireframe es donde se representa la relación entre estos componentes.
Diseño de información
El diseño de información es la ubicación en la presentación y priorización de información de manera que facilite el entendimiento. El diseño de información es un área del diseño gráfico pensada para representar información de manera efectiva para una comunicación clara. Para sitios web, los elementos informativos deben estar ordenados de manera que reflejen los objetivos y tareas del usuario.
Diseño de navegación
El sistema de navegación provee un conjunto de elementos en pantalla que permiten al usuario moverse entre páginas del mismo sitio web. El diseño de navegación debe comunicar la relación entre los enlaces que contiene de forma que los usuarios entiendan las opciones que tienen para navegar el sitio. A menudo, los sitios web contienen múltiples sistemas de navegación, tales como navegación global, navegación local, navegación suplementaria, navegación contextual y navegación de cortesía.
Este diseño permite dar una vista de manera global, de la ubicación y desplazamiento a través de las diferentes páginas de un sitio web.
Diseño de interfaz.
El diseño de la interfaz de usuario incluye seleccionar y ordenar los elementos de la interfaz para permitir a los usuarios interactuar con la funcionalidad del sistema. El objetivo es facilitar la usabilidad y eficiencia tanto como sea posible. Elementos comunes que se encuentran en el diseño de interfaces son los botones de acción, campos de texto, cajas de verificación, botones radiales y menús desplegables.
Fuente : Wikipedia
¿QUE SIGUE?
El siguiente paso a seguir en este tema es definitvamente buscar a un buen diseñador (ANGEL BARBA), y pedirle que ahora utilizando esas herramientas que usan los desarrolladores les de diseño, colores e imagenes bonitas , a mis bosquejos burdos y de cero nivel de diseño.