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.
USABILIDAD Un 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. Facilitar la interacción.
Aprovechar las convenciones y llamar a las cosas por su nombre.
Dar el control al usuario.
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 implica una estrecha colaboración entre los diseñadores y programadores y los usuarios a los que va destinado el sistema.
Una metodología que garantiza que la aplicación desarrollada sea usable.
Casos de uso (Perfiles)
Perfil: Alumno de Diseno Industrial Caso de uso: Proyecto de Diseno Industrial
ARQUITECTURA Como 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.
Arquitectura del sitio web y aplicativo movil
Definir las secciones que debe tener 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). Especificar el número de idiomas que dispondrá 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ácilmente
Ejemplos
Ejemplos
Ejemplos
ESTRUCTURA Una 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é mensaje debería de recibir el usuario cuando abra la página principal.
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é contenido específico debería presentarse en cada pagina.
Estructuras estรกndares
BLOQUE DE NAVEGACION ARRIBA
BLOQUE DE NAVEGACION A LA IZQUIERDA BLOQUE DE NAVEGACION A LA DERECHA
PIE DE PAGINA
Dise単ando la estructura
Adaptaciones FIJO El 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 LIQUIDO Con 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 SENSIBLE Esto 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.
CONTENIDO El 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
Márgenes con los bordes y márgenes con otros bloques.
Ancho y color del borde, se pueden tomar imágenes para representar el borde, también se pueden redondear los vértices.
Sombreado
Degradados de colores o de transparencias.
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.
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
JPG Joint Photographic Experts Group
PNG Portable Network graphics
PSD Photoshop Document
BMP Mapa de bits (bitmap)
GIF Graphics Interchange Format
TIF Tagged-Image File Format
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ÑO Empezando 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.
Mapas
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.
Interaccion
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 experiencia
con de
la finalidad de generar una 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.
SEO OPTIMIZACIร 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.
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.
https://manualdigital.comm
anualdigital
manual digital Caracterizacion Normas y estandares Usabilidad
Palabras clave: Listado de palabras por las que queremos que nuestra página web sea encontrada en los buscadores.
PRESUPUESTO Normalmente, antes de empezar proyecto alguno, el diseĂąador o cliente final necesitarĂĄn un presupuesto que especifique el coste del trabajo del maquetador.
Presupuesto Previo
Un maquetador necesita como mínimo la siguiente información para presentar un presupuesto ajustado al diseñador o cliente final: Arquitectura del sitio web Estructura de las páginas web Contenidos de las páginas Efectos especiales
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.