Usuario:Roharo04/Taller

Diseño

En esta etapa se materializan los aspectos de la etapa anterior (especificaciones, funcionalidades, etc.). Para ello se realiza, en primer lugar, un diseño esquemático sin gráficos (“wireframe”) que será testeado por un grupo usuarios. Superada esta prueba inicial el diseño definitivo será entregado al desarrollador en archivos y pantallas separadas para que añada el código de programación. Los sistemas operativos permiten interactuar con el usuario presentando en la pantalla los elementos necesarios para ello de forma distinta, lo cual debe tenerse en consideración por parte de los diseñadores de acuerdo con las siguientes premisas: a. Interacción y patrones.

• Experiencia del usuario: basadas en la simplicidad, sus conocimientos y costumbres, y el modo de navegación intuitiva.
• Interacción y formas de sostener el móvil.
• Orientación del terminal.
• Patrones de interacción: navegación, acciones, cuadros de diálogo, notificaciones y gestos.

b. Diseño visual:

• Estilo de la interfaz​.
• Interfaces nativas o personalizadas.
• Identidad visual.
• Pantalla inicial e iconos.
• Retícula de maquetado.
• Color y detalles visuales
• Tipografía, lenguaje y ortografía.
• Animación de la App

Estas actividades habitualmente se documentan en un esquema de flujo de navegación de la aplicación. En función del tipo de desarrollo y del tipo de diseño (específico o híbrido), se definen los parámetros basados en los Human Interface Guidelines de la aplicación, desde que se accede a la aplicación, al contenido, a la navegación, el acceso a botones, menús y cajas o diálogos, etc.

El diseño de la aplicación va a influir de manera significativa tanto en el coste económico de la misma como en su desarrollo. Existen cuatro grandes perfiles de diseño:

a. Diseño multiplataforma (genéricas): suele ser suficiente una programación basada en HTML5 y algún componente específico para cada tipo de dispositivo (p. ej. una ventana emergente nativa). Suele ser la solución más rentable económicamente pero la que dispone de funcionalidades más limitadas a determinados requerimientos.

b. Apps híbridas (nativas de diseño y navegación compartida): los diseños de flujos, navegación y gráficos comparten un porcentaje elevado de elementos en común lo que permite reducir tiempos y costes pero resulta indispensable seguir la normativa, con la menor desviación posible, tanto de Apple, como de Google, Windows y Blackberry, para no romper la experiencia y navegabilidad intuitiva de los usuarios de cada plataforma. ​

c. Diseño de aplicaciones nativas específicas para cada plataforma: requiere diseñar tantas veces como plataformas a programar. No obstante, algunos elementos son comunes y reutilizables, pero implica un mayor coste de diseño y desarrollo, si bien es el más óptimo y el que más aprovecha las funcionalidades de aplicaciones y dispositivos.

d. Diseño para iPad/tabletas, basado en dos técnicas:

• Adaptación por padding: en las hojas de estilo CSS3 para HTML y HTML5, el atributo padding es el que crea un espacio por dentro de la caja a la que se aplica sin que se toque o supere su borde, con objeto de adaptarse a la superficie de visualización. No tiene apenas coste de diseño pues se puede construir en su mayoría por programación.
• Diseño específico: es lo ideal para, pero dependerá mucho de los requisitos de la app. Implica rediseñar cada pantalla para obtener el rendimiento de las tabletas. Lógicamente tiene un coste de diseño específico.

Finalizada esta etapa es conveniente realizar diversos test con usuarios y dispositivos con el objetivo de conocer el comportamiento de la aplicación y mejorar aspectos de usabilidad.