Proceso de construcción en diseños para interactivos

https://mosaic.uoc.edu/2015/09/15/proceso-de-desarrollo-de-un-proyecto-digital/

Proceso de construcción en diseños para interactivos •      Bocetos en miniatura (thumbnail sketches): Dibujos sobre papel que representan ideas interesantes. •      Wireframes (diagrama): Marcadores de posición que definen cómo encaja la información y dónde se coloca el contenido. •      Mockups (maqueta): Una representación gráfica detallada que presenta contenido y funciones. •      Prototipo: Modelo preliminar que se acerca mucho al producto terminado y permite probar la interactividad. A menudo incluye procesos simulados

Sketch o Boceto El Sketch el nivel a boceto, nos habla de la arquitectura de la información es aquí donde en una animación podemos ver los cuadros que aparecerán como en un storyboard. En un video juego se genera como funcionara el juego, sobre un nivel o el videojuego general, en diseño de personajes o logotipos es la primera idea de cómo se verá en que posición estará qué cosa.

El Sketch tiene que reflejar las ideas generales sobre el proyecto, debe de responder entre otras cuestiones a:

• Donde pondremos los elementos más característicos como logos, etc.
• Dónde estará la zona de navegación
• Dónde se cargan los sistemas de ayuda para usuarios
• Se agregarán servicios de redes sociales
• Qué áreas de contenidos y que servicio queremos presentar en el proyecto

WireFrame Con su significado "Alambre" en inglés, nos hace referencia a los diferentes funcionamientos, enlaces, pantallas, direcciones a los que llevaremos nuestro desarrollo, ejemplo: que botón lleva a donde, y este como se ve junto con toda la pantalla.  En una aplicación o página web es como se verán cada una de las pantallas durante toda la navegación, el Wireframe no funciona en si solo es la parte visual, de aquí que el trabajo de muchos diseñadores termina aquí su trabajo dentro de la propuesta. Regresaran en medida de los cambios y necesidades específicas y modificaciones visuales.

Wireframe y rejillas

En el contexto del diseño gráfico una retícula, grilla o rejilla es un instrumento para ordenar los elementos gráficos como el texto y las imágenes.

Aunque a primera vista se puede pensar que diseñar con rejillas limita la creatividad esto no es así. El maquetado mediante grids, «rejillas» es una técnica que nos puede ayudar y puede reducir considerablemente nuestro trabajo, sí que es verdad que las primeras veces nos pueden costar un poco entender las razones para usarlo, pero una vez que nos acostumbremos a manejarlo, el flujo de trabajo será mucho más rápido.

Mockup

El Mockup hace referencia a montar lo grafico en el esqueleto, programación, modelado, etc. No es el producto final, pero si da la exactitud grafica de cómo se verá el final, incluyendo todos los elementos visuales como colores, tipografías, etc. Da una idea muy parecida en estética de cómo funciona, incluso pueden funcionar algunos botones para ver las transiciones o funcionamiento, sin que estos estén desarrollados, Puede ser a escala 

Algunas webs donde podemos encontrar este tipo de recursos son:

• Freebiesbug– excelente recurso de elementos de interfaz de usuario y kits gratuitos para Photoshop e Ilustrador
• com +de 60 MockUps gratuitos
• La web com tiene una serie de interesantes recursos y consejos para esta herramienta.
• En Uxpin.com podemos encontrar Kit de interfaz de usuarioy iOS 8 Kit de interfaz de usuario (funciona para Photoshop y Sketch).
• Línea 25– podemos encontrar una lista de los 35 sitios que ofrecen plantillas, patrones y kits de interfaz de usuario para Photoshop
• com Aunque es un recurso para la creación de wireframes, merece la pena tenerlo en cuenta si vamos a usar una herramienta de este tipo
• com de la misma forma que el recurso anterior, en este caso nos proporcionan plantillas para descargar que nos permiten crear rejillas para diseños 960×12 en Photoshop, ilustrador, etc.
• I ♥ wireframes Página con multitud de recursos para wireframe y MockUps

Otras herramientas

https://placeit.net Web que te permite incluir la imagen de tu mockup en distintas pantallas, móviles, tablets, etc., interesante para presentaciones

 Prototipo

Es un modelo (representación, simulación, demostración), ampliada y modificable, es como seria el producto final con aspecto físico, diseño, estructura e incluso interfaz de funcionamiento limitado. ya se puede vivir con tota la experiencia del usuario, generalmente en el prototipo ya se aceptaron los parámetros y es un producto funcional.