View
234
Download
0
Category
Preview:
DESCRIPTION
Manual digital a partir de la caracterización de normas y estándares de usabilidad, diseño de interfaces y experiencia de usuario para webs y aplicativos movíles.
Citation preview
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.
Recommended