Manual digital a partir de la caracterización de lineamientos y estándares de usabilidad, diseño de interfaces y experiencia de usuario contenidos en las normas básicas a considerar en aplicaciones móviles y webs, ofreciendo al desarrollador este manual

como una opción en la búsqueda de herramientas que soporten y guíen su proceso creador.

USABILIDADUn atributo determinante para la calidad de un sitio web es su usabilidad. Se trata de lograr que los visitantes encuentren

rápidamente aquello que buscan, con el mínimo esfuerzo por su parte. Sea cual sea el contenido o la finalidad de nuestra web, navegar por ella debe resultar una experiencia gratificante.

Crear una jerarquía visual clara en cada página.

Aprovechar las convenciones y llamar a las cosas por su nombre.

Dar el control al usuario.

Facilitar la interacción.

Una metodología que sigue el Modelo de Proceso de la Ingeniería de la Usabilidad y de la Accesibilidad (MPIu+a) .

Una metodología que implica a los usuarios desde el inicio del desarrollo .

Una metodología que garantiza que la aplicación desarrollada sea usable.

Una metodología que implica una estrecha colaboración entre los diseñadores y programadores

y los usuarios a los que va destinado el sistema.

Perfil: Alumno de Diseno IndustrialCaso de uso: Proyecto de Diseno Industrial

Casos de uso (Perfiles)

ARQUITECTURAComo en una casa, antes de escoger los muebles, el color de las cortinas o la iluminación, es importante saber cómo estará

estructurada la planta, cómo será el salón, donde estarán las habitaciones, como se accederá a ellas, donde estarán las ventanas. Asi mismo en la web, y aplicativos moviles si la estructura no es sólida e intuitiva, el arte de la página no sirve para

nada.

Definir las secciones que debe tener el sitio.

Escoger las secciones a las que podremos acceder desde la página principal (o de inicio).

Decidir si alguna sección tiene que destacar más respecto las

demás.

Hacer un esquema con un simple programa de diseño del

ordenador, que nos permita realizar cambios fácilmenteEspecificar el número de

idiomas que dispondrá el sitio.

Concretar las distintas vías de acceso a cada una de las secciones del sitio (es importante ofrecer múltiples maneras de acceder a la misma información).

Arquitectura del sitio web y aplicativo movil

Ejemplos

Ejemplos

Ejemplos

ESTRUCTURAUna vez ya tengamos clara como estará estructurada la planta de la casa (sitio web a diseñar), podemos empezar a diseñar la estructura de cada habitación (página web), decidiendo donde pondremos los muebles (contenido) y la decoración (elementos

gráficos). Con especial esmero tendremos que estructurar el salón de la casa (página principal), donde recibiremos a todos nuestros invitados (usuarios), para que sea lo más confortable posible (diseño) pero también aporte el máximo de información

sobre los anfitriones y sobre los contenidos de las distintas habitaciones (usabilidad).

Qué tipo de diseno quiere el cliente: tipo tarjeta de visita, tipo catálogo, tipo anuncio de revista, tipo juego, una combinación entre las anteriores.

Qué tipo de información desea presentar el cliente: mucha imagen, mucha información escrita, etc...

Hacía qué secciones del web se debería sentir atraído.

Qué elementos comunes deben presentarse en todas las páginas (por

ejemplo sistema de navegación).

Qué mensaje debería de recibir el usuario cuando abra la página principal.

Qué contenido específico debería presentarse en cada pagina.

Estructuras estándares

BLOQUE DE NAVEGACION A LA IZQUIERDA

BLOQUE DE NAVEGACION A LA DERECHA

BLOQUE DE NAVEGACION ARRIBA

PIE DE PAGINA

Diseñando la estructura

Adaptaciones

FIJOEl bloque se diseña con un tamaño fijo que no se va a modificar en función

del tamaño de la pantalla. Es el más fácil de diseñar y maquetar porqué los elementos del diseño o bloques secundarios siempre estarán en la

misma posición y mantendrán el mismo ancho.

FLUIDO LIQUIDOCon independencia de la resolución de una pantalla, un bloque principal

fluido ocupa un porcentaje horizontal de la pantalla, normalmente el 100%. Bien diseñada, una estructura fluida se puede adaptar desde

las resoluciones de pantalla más grandes hasta las resoluciones de pantallas más pequeñas de los teléfonos, aunque para éste último caso se

recomiendan distintas estructuras, como se verá a continuación.

DISENO SENSIBLEEsto puede ser muy útil cuando consideremos el acceso a nuestro web a

través de teléfonos, que tienen resoluciones de pantallas muy pequeñas. Algunos navegadores para móviles reestructuran el diseño de los webs

de un modo eficiente, pero si queremos asegurar la buena visualización y diseño de nuestro web a cualquier resolución, deberemos de crear varias

estructuras en función de la resolución de la pantalla.

En un diseño sensible, no aparecerán barras de desplazamiento horizontales (scroll) hasta resoluciones muy pequeñas.

CONTENIDOEl contenido, constituído por encabezados, texto y vínculos conforman el cuerpo de la página. Cada uno de estos 3 elementos

influyen sobre la posición que se alcanza en los motores de búsqueda. Primero se redacta el texto, dividido en tres y hasta seis secciones, encabezadas con subtítulo, cuyas oraciones y párrafos ilustran

diferentes aspectos que atañen al tema principal. La página que usted está leyendo sirve de ejemplo para visualizar la idea.

Bloques

Color o imagen de fondo Degradados de colores o de transparencias.

Sombreado

Márgenes con los bordes y márgenes con otros bloques. Cambiar el puntero cuando entra

dentro del bloque.

Permitir que el usuario desplace el bloque a otra área de la pantalla.

Cambiar los atributos de un bloque, o que aparezca o que se cierre a partir determinadas

acciones del usuario.

Ancho y color del borde, se pueden tomar imágenes para representar el borde, también se pueden redondear los vértices.

Tipografias

Las familias tipográficas disponibles en cada sistema operativo son diferentes. Aunque las versiones actuales de Internet Explorer instalan un conjunto de fuentes similar en Windows y Mac Os, hay que tener en cuenta que existen otros navegadores y otros sistemas operativos, por lo que es importante asegurarnos de que los contenidos textuales tendrán el mismo aspecto (o el más parecido posible) sea cual sea la pareja SO-navegador de cada usuario.

Puesto que un 97% de los usuarios de Internet utilizan PC+Windows o Mac+Mac Os, parece lógico diseñar nuestras páginas web buscando la mayor compatibilidad tipográfica entre ambos sistemas. Las fuentes instaladas por defecto en Windows y Mac OS (fuentes seguras) son:

Tipografias

Fuentes disponibles para Windows y Mac OS

Tipografias

12pt ..............................16px 12pt ..............................12px

La siguiente imagen muestra la equivalencia entre puntos y píxeles, así como la visualización de los diferentes tamaños en

fuente Verdana.

Color

Ful Color

Monocromatico

Escala de Grises

Imagen

JPGJoint Photographic Experts Group

PSDPhotoshop Document

GIFGraphics Interchange Format

BMPMapa de bits (bitmap)

TIFTagged-Image File Format

PNGPortable Network graphics

Imagen

Resolucion de imagen para web y multimedia

72PPI (puntos por pulgada)

Iconografia

Para muchos diseñadores y grafistas del entorno web, es muy importante obtener algunos recursos gráficos como los vectores e iconos.

Los íconos son uno de los elementos más destacados en el diseño de un web site, cada uno de ellos definirá un concepto cromático y suelen ser de gran ayuda para complementar la imagen del sitio. Muchas aplicaciones web, no solamente sitios, necesitan crear un conjunto de íconos que definan la paleta cromática y el estilo del proyecto.

Iconos Redes Sociales

Iconos Multimedia

Menus desplegables

Menus desplegables

Formulario Web

Botones

Aplicaciones

DISEÑOEmpezando por la página de Inicio hasta la página de contacto, todo sitio web debe tener un mapa para que la navegación del usuario web sea lo más fácil posible. El menú del sitio web debe contener las páginas principales, que pueden estructurarse en

páginas y subpáginas, lo importante es que la navegación sea lógica e intuitiva.

Un Sistema o Mapa del Sitio es la estructura de enlaces de páginas web que definirá la buena o mala navegación de un sitio web. Como veremos en este artículo, además un sistema se puede usar para mejorar nuestro posicionamiento en motores de búsqueda.

Mapas

El Diseño de interacción es un campo de desarrollo interdisciplinario que define el comportamiento de los productos y sistemas con los que interactúa el usuario.

Todo esto con la finalidad de generar una experiencia de usuario que sea agradable.

El diseño de interacción define el comportamiento (la “interacción”) de un artefacto o sistema en respuesta a sus usuarios.

Interaccion

SEOOPTIMIZACIÓN PARA LOS BUSCADORES (SEO)

Para optimizar un sitio web o aplicativo para los buscadores, básicamente se tiene que optimizar cada una de sus páginas web para los buscadores. Para optimizarlas, tendremos que subministrar informaciones para cada sitio web o aplicativo.

https://manualdigital.comm anualdigital

manual digital

CaracterizacionNormas y estandaresUsabilidad

Título: Es el elemento más importante para el posicionamiento, además de ser el texto que aparecerá subrayado en los buscadores y en la cabecera de los navegadores.

Descripción de la página: La descripción puede ser más larga que el título pero se recomienda que sea inferior a 156 caracteres para que se presente entera en la mayoría de buscadores web.

Palabras clave: Listado de palabras por las que queremos que nuestra página web sea encontrada en los buscadores.

PRESUPUESTONormalmente, antes de empezar proyecto alguno, el diseñador o cliente final necesitarán un presupuesto que especifique el

coste del trabajo del maquetador.

Un maquetador necesita como mínimo la siguiente información para presentar un presupuesto ajustado al diseñador o cliente final:

Arquitectura del sitio webEstructura de las páginas web

Contenidos de las páginasEfectos especiales

Presupuesto Previo

Entrega

Una vez el presupuesto del maquetador esté aceptado, el diseñador puede trabajar libremente en el proyecto, dando vía libre a su creatividad, pero cumpliendo con las limitaciones técnicas presentadas en esta guía y las especificaciones del presupuesto.

GRACIAS Y ESPERAMOS QUE ESTE MANUAL DIGITAL SEA DE GRAN AYUDA PARA TODOS USTEDES.