Diseño Centrado en el Ser Humano

DISEÑO CENTRADO EN EL SER HUMANO

Es una filosofía que se basa en las necesidades y los intereses del usuario durante los procesos de diseño se utilizan métodos para crear productos que resolverán necesidades concretas de los usuarios finales y así conseguir una mayor satisfacción y una grata experiencia de uso con el mínimo esfuerzo del parte del usuario.

Diseño pensado en el ser humano:

1. Pensado en el usuario
2. Tiene que ser empático
3. Debe ser para crear soluciones
4. Iniciado y controlado por el usuario
5. Interactivo
6. Fácil
7. Usable y entendible

El diseño centrado en el ser humano debe estar basada en 3 principios:

- Deseabilidad: lo que quiere la gente
- Factibilidad : lo que se puede hacer
- Viabilidad: parte económica

Se necesita identificar los problemas del usuario y crear estrategias para resolverlos. Para lograr esto debe haber una intención que nos lleva a realizar una acción y esa acción nos lleva a un resultado.
Algunas de las actividades principales con las que se inician las etapas pensadas en el ser humano.

Entender y especificar el contexto de uso
Especificar los requisitos que tiene el usuario
Especificar los requisitos del diseñador
Producir soluciones de diseño
Evaluar los diseños con base en los requisitos

Principios clave del diseño que están centrados en el ser humano:

- Centrado en el ser humano y comprender las tareas y el entorno del usuario.
- El usuario se involucra tanto en el desarrollo como en el diseño.
- Tiene que estar dirigido y refinado por evaluaciones que hacen los usuarios.
- El proceso tiene que ser repetitivo
- Se dirige a toda la experiencia del usuario.
- El proyecto se realiza con un equipo multidisciplinario.

Diseño de Información

DISEÑO DE INFORMACIÓN

Es lo relacionado a solucionar problemas de información para que el usuario la entienda mejor.

Se le conoce como ARQUITECTURA DE LA INFROMACIÓN que va mas allá del diseño y lo acuño Richard Saul Gurman en 1976 y lo explicaba como el arte y la ciencia de organizar y etiquetar sitios web para apoyar la usabilidad.

Por otro lado esta la EXPERIENCIA DEL USUARIO que tiene que ver con la percepción del usuario en términos prácticos , como la facilidad de uso y la eficiencia.

Con estos términos y su conocimiento ayuda que el diseño y organización de la información con el fin de crear una experiencia a nivel emocional y que el usuario se involucre mucho mas con la información presentando.

Para lograrlo tenemos que seleccionar, estructurar, clasificar, transformar, organizar y etiquetar datos conservando solamente datos valioso y significativos. Para asi presentar la información de forma util para nuestro usuario meta y pueda asimilar los contenidos.

Ayudar a la navegación para asimilar los datos.

Presentar la información de forma atractiva, fácil , útil y divertida.

AQUITECTURA + USABILIDAD + CREATIVIDAD + CONTENIDO = FUNCIONAL

Para lograr esto tenemos que entender los datos y hacerlos comprensibles.

Estructuar los contenidos , 

Analizar la competencia y luego analizar al público obtenido.

Ensayo grupal de Tipografías para web y ejemplos personales:

Linea de Tiempo Primer Parcial

Linea de Tiempo en Forma de Árbol

Tipografía

ESTILO TIPOGRÁFICO

• FALSOS: itálicas, versalitas y bold que se modifican manualmente , es décir, no existen se utilizan herramientas para hacerlas, nos on diseños precisos.
• GENUINOS: familias (estilos de las fuentas) tipográficas completas.

( Las super familias que van de de ultra thin, a heavy, black )

FORMATOS DE TIPOGRÁFIA

Las fuentes son escalables (varìan tamaños in perder calidad) y multiplataformas (Mac o PC)

- Primeras fuentes son FontSript. Pensado en tipográfias digitales para impresión
- TrueType es de Apple con mayor compatibilidad con rasterizador a mapa de bits y ya eran curvas. Mejor resolución en pantalla,
- Open Type evolución de TrueType con opciones mas avanzadas, mas signos, glifos y símbolos

GESTIÓN DE FUENTES

Cargar en sistema las fuentes, es muy pesado.
Usar solo fuentes necesarias.

IMPRESIÓN Y PANTALLAS

Anteriormente las fuentes estában pensadas en impresión pero para monitores se deformaban, finalmente se hicieron pixel fonts , mejoraron contornos y puseiron especial atención en las ascendentes y descendentes.

ALIASING

Es un defecto que tenemos en pantalla sobre todo con lienas inclinadas. Se aprecia como un escalerado. Se disimula con colores mas claros.

HINTING

Define que pixeles se aclaran para visualizar mejor la imágen.

Formatos de Imagen, Audio y Video

FORMATOS DE IMÁGEN

• PSD: El formato PSD es nativo del programa para edición de imágenes Adobe Photoshop, este programa ha liderado durante años, la edición profesional de fotografías y gráficos digitales en mapas de bits.

• AI: Formato nativo de Illustrator, solo este programa lo puede editar. Se basa en el formato PDF, pero Acrobat no lo lee correctamente. 

• EPS: es un formato vectorial (para dibujos esquemáticos, diagramas, diseños gráficos…) que muchos diseñadores usan también para las imágenes de mapas de bits (raster) (es decir: Fotografías) cuando quieren siluetearlas). 

• INDD:Un archivo indd es un archivo creado con Adobe InDesign. Adobe InDesign es un programa de diseño que se utiliza para diseñar trabajos como pósters, folletos, manuales, revistas, libros.

FORMATOS DE AUDIO

• WAV : Fue creada por IBM y Microsoft, solo se puede abrir en Windows, no comprime datos por lo tanto es pesado.
• MP3: es muy estándar, muy usado a nivel mundial, mas comercial, si tiene compresión pero de igual manera pedida, no es de buena calidad.
• OGG: buena compresión, poca perdida de calidad, es libre y gratis, no existen patentes, usado en Spotify, ,muy bueno para Internet.
• OGA: Es para audio exclusivamente.
• AAC: advange audio coding, tiene compresión con perdida y es muy usado en Internet., compatible con Apple.
• WMA: Windows Media Audio, tiene perdida, es difícil de copiar.

FORMATOS DE AUDIO

• MP4: Es de moving pictures experts group, se puede sincronizar audio y video. puede tener animación o interactividad. 
• DIVX: Formato de video digital, se puede visualizar en vario dispositivos y reproductor, comprime y mantiene calidad.
• AVI: Audio Video Interleave , es de Microsoft, sincroniza audio y video lo mejor es que soporta varios flujos de audio. Se puede ver en otros reproductores, tiene audio en MP3 y video en DIVX
• WMV: Windows media video que es de microsoft, es decir, para windows, combina audio con WMA , es exclusivo de Windows o VLC, puede tener derechos o estar protegidos.
• REAL VIEO: audio REAL AUDIO, es muy difundido en Internet, no tiene buena calidad, alta compresión, ha funcionado en intercambios de Internet, archivos muy pequeños, utilizado para streaming.
• FLV: Flash video de Adobe, tiene un reproductor Flash Player, es uno de lo mas populares en YouTube, se puede ver casi en todos los sist. operativos, audio generalmente ne MP3.
• 3GP: Extensión utilizada en móviles, sirve para almacenar audio y video, grabar y reproducir video, y es compatible con 3G
• CODEX: Contenedores, reproductores de archivos. sirven para convertir. Un codex mas usado es Matroska donde podemos tener mucha información, software libre y los archivos son MKV (video)  MKA (audio) MKS (subtítulos).
• tambien existe OGG media OGGM  

Crucigrama

medios de internet

Redes Sociales

Resolución y Pixeles

RESOLUCIÓN

Dimensión de pixeles en una imagen que da calidad a una imagen. 

Depende del tipo de salida que le das a la imagen.

72-96  Resolución para monitor

200      Impresión de baja calidad

300      Impresión estándar

400      Impresión de alta calidad

PIXELES

Unidad mínima , son cuadritos de color que tiene una imagen.

En el momento en que se escasean las fotografías se rasterízan y se convierten a pixeles.

El tamaño de las imágenes es siempre inversamente proporcional a la imagen.

Smartphones y Celulares

SMARTPHONES

Término comercial a los teléfonos móviles que ofrece mas funciones que un celular común, permite la instalación de programas para implementar su uso.
Soportan correo electrónico
GPS
Varias Interfaces
Agenda Digital
Redes Sociales
Lectura de documentos PDF

En algunos casos poseen memorias externas, cámaras frontal y trasera.

• 1971 Identificador de llamadas (Theodore Paraskevakos)
• 1971 Peoples`Telephone Company
• 1992 IBM y COMDEX crea primer dispositivo móvil
• 1993 Fueron sacados a la venta
• 1994 Versión mejorada de Simon Personal Comunicator
• 1995 Phone Writer Comunicator
• 1996 PDA por parte de la compañía Nokia con el modelo Nokia2110
• 1999 CDMA Digital PCS Smartphone integra que los PDA tienen conexión a Internet
• 2000 Ericsson R380
• 2010 Aparecen diferentes sistemas operativos

SISTEMAS OPERATIVOS

• Android

2003 Fundada por Andy Rubin
2008 HTC lanza HTC Dream
2010 Android se volvió la plataforma mas vendida

• iOs

Sistemas operativo móvil desarrollado por Apple Inc.
2007 Apple introduce su primer Iphone
2008 Se introduce la App Store

• Windows Phone

Saca Windows phone 7 que integra SkyDrive, Office, xbox y Bing

• Blackberry

En 1999 Lanza su primer dispositivo y en 2014 de 46 millones de suscriptores activos

TIENDA DE APLICACIONES

2008 App Store de Mac populariza la distribución Online
2008 Se lanza Google´s Android Market
2009 Blackberry App World

SISTEMAS OPERATIVOS

Windows Phone
Symbian
ANDROID
Apple
Blackberry
webOs

Correo Electrónico

CORREO ELECTRONICO

• Permite a los usuario enviar y recibir mensajes mediante sistemas de comunicación electrónico, se pueden enviar todo tipo de documentos.
• Es denominado e-mail 
• Su origen data de 1961 cuando se permitió la salida IBM y facilitaba guardar datos en el ordenador.
• en 1965 el correo electrónico comenzó como tal.
• 
  

ORIGEN DEL "@"

En 1971 Ray Tomlinson dio a conocer el arroba que es un signo que se traduce en ingles "at" en español "en" para individualizar la cuenta y personalizarla en cuanto a correos electrónicos.

VENTAJAS

• Enviar cualquier tipos de archivo, im´genes, video, música y documentos.
• Es ecológico ya que no se gasta papel.
• Es rápido, llega instantáneamente.
• Lo podemos ver sin necesidad de estar en el lugar a donde fue enviado.
• El costo es muy bajo, no importa de depende lo enviemos solo se necesaria conexión a internet.
• Se puede enviar a varias personas.

DESVENTAJAS

• No se pueden enviar objetos físicos
• Existe el Spam
• Debes tener acceso a Internet
• Contar con conocimiento del programa.

ESTRUCTURA

ENCABEZADO

MENSAJE

CUERPOS DEL ENCABEZADO

PROBLEMAS

• Los virus informáticos
• La suplantación de identidad
• Los engaños, se difunden noticias.

Foro, Blog y Portal de Internet

FOROS , BLOGS Y PORTALES DE INTERNET

Telefonía y Medios Móviles

TELEFONIA Y MEDIOS MOVILES

• La primera red celular se dio en Chicago 1977 y comenzó a funcionar en 1997
• En 1979 una red celular fue lanzada en Japón por NTT
• Los teléfonos móviles se han vuelto  de demanda mundial y han ido evolucionando y avanzando especialmente en sus características y funciones.
• En los 90`s fueron creados los SMS (short message service) 
• En 1998 se unieron las compañías Psion, 
• Nokia, Ericcson y Motorola y asi se crea Symbian LTD.

SMARTPHONE

MULTITAREA < Es decir que puedes realizar varias tareas y estar conectado a diferentes redes sociales al mismo tiempo >
En estos equipos existen infinidad de apps para las diferentes necesidades de los usuarios.

EJEMPLOS:

Samsung OPPO: Cada 3 meses actualiza sistema y el equipo constantemente evoluciona según nuevas tecnologías.

IPhone: Invento del año según la revista Times en el año 2009, se dio a conocer en el 2007 y cuentas con sistema IOS que se actualiza constantemente de igual forma que los equipos cambian según generaciones.

TABLET

• Primera Tablet 1993, apple newton, era grande y pesada, y tenía fallas , precio elevado pero funcional para mandar mensajes , era considerada muy potente para la época y es retirada del mercado.
• APPLE III diseñada por Steve Jobs la primera computadora era un caos absoluta, no era funcional y tenía errores en el hardware.
• APPLE LISA ademas de ser mala su precio era excesivo , aunque en 1983 fue sustituida por la Mac Plus mejorada y mas barata.

Páginas y Sitios Web

DIRECCIONES IP

Esta compuesto de números y letras que sirven para identificar un sitio web y poder encontrarlo, pero debido a la complejidad de cierto numero se crearon los dominios.

Existen servidores que con un mismo numero IP dan varias direcciones.

• WWW (WORL WIDE WEB) SUFIJO QUE SE LE PONE A LOS NOMBRES DEL DOMINIO PARA PODER ACCEDER.

SISTEMA DNS

Sistema del nombre del dominio (domine name system) este sistema es el encargado de regular que ningún nombre se repita.

PAGINAS WEB

Un SITIO WEB es un conjunto de paginas web dentro de un espacio virtual de Internet.

WWW (world wide web).

El sitio web puede ser gestionado atraves de un individuo y existen dos tipos de sitios web.

- DINÁMICO                          - ESTÁTICO

ESTRUCTURA 

Contenedor

Esto es lo que definimos en la regla Body o en algun div de nuestra estructura. Dentro de este contenedor estarán todos los elementos del sitio; módulos, contenidos, imágenes, etc.

Logotipo

Acá es dónde debemos dejar la imagen de la empresa, que identificará la marca en todo el sitio. Puede ser el logotipo de la empresa o el nombre. Al estar arriba acompañara la navegación por todo el sitio ayudando al reconocimiento de la marca.

Navegación

Que importante es la navegación y el menú que la contiene. La forma más aceptada y fácil, es el menú horizontal, que siempre tiene a mano lo más importante del sitio web.

Contenido

Lo más importante y fundamental de una buena página. Lo que mantiene al visitante cautivo e interesado. Si el contenido es malo o poco interesante, abandonará la página en pocos segundos. Para eso, debe estar centralizado y enfocado y a la primera vista. El mejor lugar debe ser para los contenidos. Para Google, el contenido es el rey.

Footer

Localizado al final del sitio, abajo, generalmente dejamos ahí información de Copyright y legales o menús secundarios. Aunque en los últimos años, se usa mucho para incluir información de redes sociales, direcciones, noticias.

Espacio Negativo

Esto es tan importante como el espacio positivo. También llamado espacio blanco, es todo lo que no tiene información de ningún tipo, pero que cumple un rol importantísimo para la web; nos ayuda a tener espacios de respiración, a equilibrar y dar balance a todo el diseño. 

Medios Digitales

MEDIOS ANÁLOGOS

Son aquellos que ya existían antes y después del Internet como son:

- Libros

- Cine

- Radio

- TV

- Revistas

- Periodico

Dicho lo cual los sistemas análogos se transformaron a sistemas binarios y se convierte en bytes es decir, se usa en las computadoras como formato digital o internet.

Los VIDEOS E IMAGENES se comprimen y codifican, se manipulan, reproducen en cualquier equipo.

MEDIOS MULTIDISPOSITIVOS

Los usarios tienen interaccionen diferente tiempo y forma segùn el dispositivo, como son: TV Digitales, Smartphone, Computadoras, Tablet.El primer medio que se monto a la Web fue el texto, después el audio, video, hipertenso, hipermedios (el usuario define su navegación)

Los HIPERMEDIOS son aquellos que se siguen por medio de enlaces.

CIBERMEDIOS

Son aquellos que engloban todos los medios digitales.

Tienen diferentes características como son:

1. MULTIMEDIALIDAD: tienen muchos medios como audio, imágenes y vídeos , y se toma      en cuenta al lector.

2. HIPERTEXTUALIDAD:  Esa la navegación a base de links.

3. ACTUALIZACIÓN: Continuamente se actualizan los contenidos.

4. INTERACTIVIDAD: Es la relación que los usuarios mantienen cada que dan clic o usan los botones, es la forma en la que se sienten libres.