Notas

Aquí subiré o actualizare notas de la clase o tareas
--------------------------------------------------------------------------------------------------------------------------

La experiencia de Usuario

Conjunto de factores y elementos que determinan una interaccion satisfactoria del usuario con un entorno o dispositivo concreto.

Influye el diseño grafico, estetica, articulacion de la interfaz, funcionalidad(diseño de interaccion y marketing) psicologia, etc.

Usabilidad

Se define como facilidad de uso, sea una pagina web, aplicacion informatica o cualquier otro sistema que interactue con un usuario. Se refiere a la capacidad de un software de ser comprendido y atractivo dentro de sus condiciones de uso. Se vende una sensacion y una emocion.

Aspectos: Facilidad de aprendizaje, flexibilidad, Robustez

Trabajos de Front End y Back End 

1. Estrategia: Necesidades del usuario, objetivos del sitio. 
2. Alcance: Especificaciones funcionales (BackEnd) y requerimientos de contenido (FrontEnd)- esta se refiere a la cantidad de ventanas que hay y sus funciones.
3. Estructura: Diseño de la interaccion(BackEnd- ¿cuales seran las salidas?) y Arquitectura de informacion- esquema de como se va a ver y de que lado va a quedar. 
4. Esqueleto: Diseño de interfaz(Backend), Diseño de navegacion (FrontEnd) y diseño de la informacion (ambas- saber que cantidad de info agregar tanto para leer como los iconos) 
5. Superficie: Diseño visual

Cognicion

El acto de conocer y almacenar, recuperar, reconocer, comprender, organizar y usar la informacion recibida a traves de los sentidos. La psicologia cognitiva se preocupa por estudiar como las personas entienden el mundo en el que viven y como toman la informacion sensorial entrante y la transformar, sintetizan, elaboran, almacenan, para finalmente recuperarla y hacer uso de ella.

Es una actividad nerviosa superior especifica del ser humano, lo que nos distingue de los animales. El proceso de cognicion tiene que ser medida, no solo interpretada por los organos de los sentidos, sino por un complejo de sistemas que interpreta y re-interpreta la informacion sensorial.

Los humanos y animales comparten un proceso de cognicion basico, pero es exclusivo de los humanos el superior.

Sensacion, percepcion, atencion, imaginacion, recuerdo, soluacion de problemas, etc, son etapas de cognicion.

Proceso de cognicion

1. Sensaciones fisicas
2. Emociones
3. Respuesta de comportamiento
4. Estimulo 

Paradigma: Es la forma en que una determinada comunidad cientifica percibe la realidad. Posee una estructura definida compuesta por supuestos teoricos, fundamentos, epistemologicos y criterios metodologicos. En la psicologia se describe desde el individuo como las aceptaciones de ideas, pensamientos, creencias incorporadas generalmente adquiridas desde edad temprana. (Como antes se creia que la tierra era plana pero se demostro lo contrario)

Constructivismo: Termino que implica que los seres humanos van construyendo su propio aprendizaje/conocimiento.

Lenguaje: Es la facultad humana de comunicarse y representar la realidad mediante signos.

Inteligencia: Es un constructo basado en mediciones que señala el nivel general de desempeño cognitivo del sujeto. Incluyen la participacion de lo heredado, ambiental, practico y abstracto. Es la facultad personal de adaptarse a nuevas exigencias, utilizando para ello adecuadamente las pautas del pensar de que se disponga.

comparar, clasificar, ordenar.

ESTRATEGIA
Necesidades de usuario: Descripcion persona
--------------------------------------------------------------------------------------------------------------------------

Logotipo

Esta compuesta unicamente por una agrupacion de letras o tipos formando palabras

Imagotipo

Se refiere a la imagen, una represetacion visual siguiedo un patron de semejanza a una cosa concreta(elemento iconico). Tipo proviene de typos, que es un tipo de letra. La carga simbolica tiene que leerse primero, eso implica que el texto debe colocarse abajo o a la derecha (porque se lee de izquierda a derecha)

Isologo

Es una variacion de imagotipo sin embargo, en vez de que la imagen y texto esten separadas, en el isologo siempre estan juntos y no pueden separarse (Ej: burger king, starbucks, pizza hut)

Isotipo

Es una construccion que hace alusion a la misma marca aunque no la exprese en su totalidad. Es una construccion formada a partir de la union y entrelazado de varias iniciales creando unidad. Es tipografia que se unio y crea una imagen.

Anagrama: Emplea letras o silabas del nombre de la entidad representada en forma logotipada, generalmente usa las contracciones para evitar confusiones. Si poseen nombres muy largos los acortan creando nuevas palabras.

Sigla: Abreviatura las iniciales de dos o mas nombres (Ej: Cartoon network)

Inicial: Hace referencia a la primera letra que compone la entidad como un recurso de sintesis (Ej: Honda)

Pictograma: Sintetiza el concepto que funcione como imagen de marca. En resumen, es solo el icono que representa la marca (Ej: pajaro de twitter o paloma de nike)

Paleta de color

http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Armonia: Es la triada equidistante, espectros de tres colores de forma equilibrada. Tambien existen armonias armonias frias y calidas.
Monocromia: Un solo color con diferentes tonalidades.
Contraste: 2 colores de los extremos combinados

Notas:
* Colores intensos para jovenes o niños
* Colores calidos son mas intensos, te hacen sentir ansiedad y te dan hambre
* Colores frios son calmados
* Naranja + gris: ejercicio dentro del gym
* Verde + gris: ejercicio al aire libre
* En logotipos no usar colores muy contrastados, puesto a que no podra adaptarse en fondos a menos que este tenga un color neutral
* En la pag de cargar el logotipo no debe abarcar mas de 1/3 de la pantalla

-No olvidar uso de reticula (45,60 grados)
-No usar mas de 5 letras en un titulo/texto
-No usar rojo y negro
-Si se usa una imagen se debe de colocar arriba y el texto abajo, nunca de lado
-Simpleza, no usar muchas lineas. A veces con un solo puntito/raya de diferente color es suficiente
-Las curvas deben de estar fluidas y asimetricas, que una parte no este mas "delgada" o "gruesa" que otra.

Tendencias de diseño grafico 2017: https://ernestoolivares.es/tendencias-diseno-grafico-web-2017/

Taxonomia de la tipografia

Se ocupa del estudio y clasificación de las distintas fuentes tipográficas.

• Familia tipográfica: Los miembros que integran una familia se parecen entre si pero tienen rasgos propios. 
• Fuente tipográfica: Se define como estilo o apariencia de un grupo completo de caracteres, números y signos. (Bold, itálica, etc)
• Tipo: Es igual al modelo o diseño de una letra determinada.

Serif: incluyen adornos anulados en sus terminaciones, puesto a que estas ayudan a enfatizar el tema y permiten que la lectura sea fluida en textos muy largos. Son mejores en impresos. (ej: times new roman)

Sans-serif: "Sin serifas"/Palos secos (sin serifas) sin adornos, sin decorados, surgen de los grabados en lapidas porque son mas sencillas, abiertas y con espacios. Son mejores para los documentos digitales.

Comic-Sans: Se utilizo/origino de los comics y se usa para los globos de texto.

Espacios en los textos

• Estructura visual en los rodantes: Se acomoda por partes, si se pusiera un texto continuo como en un libro la gente ni voltearía a verlo. La información tiene que ser concreta.
• Longitud de linea: Lineas muy largas entorpecen la lectura por la dificultad de pasar de una a otra, por ello es mejor que se acomode en columnas. 
• Variables visuales: Interlinados son espaciados entre párrafos que permiten que se oxigene la lectura. (recomendado 1.5 )
• Para títulos se usa un sistema recto, para mucho tacto se usa un sistema ondulatorio
• Se reduce el tamaño del texto según el contraste de colores. Aunque sean del mismo tamaño, si se coloca un fondo negro con letra blanca y se compara el mismo modelo viceversa, el primero se ve mas pequeño.
• El color del texto en digital se usan grises, puesto a que el negro cansa (80% aproximadamente)

Historia del color

"La Luz es color"

Issac Newton consign fue la descomposición de la luz en los colores del espectro. Estos colores son básicamente los del arco iris; azul violáceo, azul celeste, verde, amarillos, rojos anaranjado, rojo. 

"La mente humana reacciona a los colores"

Johann Goethe Inventar la psicologia del color; colores primarios, secundarios e intermedios. Diseño un prisma cromática donde en las esquinas se colocan los colores primarios y a base a esos se crea la paleta de colores + sus combinaciones.

Existen dos sistemas de colores primarios: Primarios Luz y Colores Primarios pigmento

RGB: Colores luz: Colores producidos por luces (en el monitor de nuestro ordenador, en el cine, tele, etc) tienen como colores primarios al rojo, verde y azul, cuya fusion de estos componen luz blanca.

CMYK: Color de pigmento: Colores susctractivos son colores basados en la luz reflejada de los pigmentos aplicados en las superficies. Forman esta síntesis sustantiva, el color magenta, cyan y el amarillo. La combinación de todos estos es el color negro. (Impresos) (No es necesario la producción del blanco porque la hoja en la cual se imprime YA ES blanca, por lo tanto, para "pintarla" tiene que ser en otro color (negro))

Tono, Luminosidad, Saturación

Psicología del color

Blanco: Atrae luz, unidad, inocencia, paz, positivo, pureza.

Negro: Error, mal, misterio, impuro, maligno, muerte, nobleza y elegancia. Se esconde/protege.

Amarillo: Envidia, ira, cobardia, satanismo, traicion, oro, fuerza, voluntad, estimulo, miedo, riqueza, joviales, afectivos, excitante, impulsivo.

Rojo: Extrovertido, ambicioso, impulso, sangre, fuego, calor, revolución, alegría, acción, pasión, fuerza, desconfianza, destrucción, crueldad, rabia, guerra, es un color muy llamativo. Si se combina con blanco es frivolidad, inocencia y alegría. Si se mezcla con negro estimula dolor, dominio y tiranía.

Azul: Profundidad, frio, introvertido, placentero(el verde tranquiliza), inteligencia, emociones profundas, infinito, sabiduría, amistad, fidelidad, serenidad, inmortalidad, descanso.

Verde: Equilibrio porque esta compuesto por colores de emoción (amarillo=cálido) y del juicio (azul=frío). Inteligente, social, primavera, caridad, ansia, calma, tranquilidad, amor, paz, celos, locura, esperanza, razón, lógicamente y juventud. Mezclado con blanco expresa debilidad o pobreza. sugiere humedad, frescura y vegetación, simboliza la naturaleza y el crecimiento. La persona que destaca por el uso del verde quiere ser respetado y competente. Detestan la soledad.

Naranja: Estimulante de los sentidos, activo, hambre, impulsivo, agresivo, radiante, expresivo, mezclado con negro sugiere engaño, conspiración e intolerancia y cuando es muy oscuro, opresión.

Violeta: Templanza, lucidez y reflexion. Transmite profundidad, experiencias, es emocional, espiritual, místico, melancólico, introvertido, representa realiza, dignidad. Mezclado con negro es deslealtad, desesperación y miseria, mezclado con blanco: muerte, rigidez y dolor.

Marron: Masculino, severo, confortable, otoñal, gravedad, equilibrio, realista.

Gris: Centro de todo, neutralidad, indecision, ausencia de energía. Tristeza, dudad, melancolía, frialdad metálicas pero también brillantez, lujo y elegancia. Se puede usar para calmar colores muy intensos como el rojo, naranja o verde.

• Reticula compositiva: Guía a travez de una estructura estudiada y de tamaños fijos. Imponen orden, formalidad y coherencia.

PAGINAS WEB

* Host y Dominios son rentados por un año, eso significa que el cliente constantemente tienes que estar pagando.
* Para paginas web, los logos se tienen que medir en pixeles porque se trabajara en medios digitales. Si es para impresos, entonces se usan los centimetros o pulgadas.

Hostings recomendados:

https://www.1and1.mx/ 

https://www.squarespace.com/ 

Sistemas de gestores de contenido(CMS): Permite crear usuarios que estaran construyendo contenido. Regula quienes pueden editar el contenido de la pagina. Genera una empresa en un sitio web.

Puntos importantes al hacer una pagina web para un cliente:

- Presupuesto MINIMO de crear una pagina desde cero: 1,000 dlls
- Presupuesto MINIMO de agregar detalles a la pagina: 200 dlls

- Tener una pagina con ejemplos, precios, y otras referencias para mostrar su trabajo.
- Se vende los servicios con la mente puesta de que este querra mas cosas, en otras palabras, va a querer seguir actualizando su pagina con el tiempo. Para esto se cobra con una iguala al aceptar ser un administrador; 2,000 pesos al mes, por ejemplo.
- Se tiene que verificar que, si el usuario ya tiene un dominio, preguntar si tiene todos los accesos a la pagina. De lo contrario se tiene que explicar la situacion, preguntar si puede conseguir los accesos de su dominio y que lo pasen. Sino procede en crear un nuevo dominio.
- Identidad corporativa va a parte de el diseño web. Esta se cobra mínimo con 15,000 pesos

72 preguntas que deben de hacerse a un cliente web

http://bonfx.com/web-design-questionnaire/

Información contacto

1. ¿Cómo nos encontró?
2. ¿Ha visto nuestra cartera de productos? 
3. ¿Tiene referencia sobre otras proyectos realizados por nuestra empresa?
4. ¿Ha leído nuestro blog?
5. ¿Qué es lo que lo convencería de trabajar con nosotros?
6. ¿Tiene usted propuestas de otras empresas?

Tiempo y presupuesto

7. ¿Cuánto está dispuesto a invertir en este proyecto?
8. ¿Existe un límite de tiempo para desarrollar el sitio?
9. ¿El lanzamiento del sitio coincide con el lanzamiento de un producto o servicio?

Hosting y dominio

10. ¿Tiene un dominio?
11. ¿Tiene control sobre el dominio?
12. ¿Tiene un hosting?
13. ¿Cuál es su empresa de hosting?
14. ¿Tiene acceso al servidor Web?
15. ¿Registró usted el dominio?

Antecedentes

16. ¿Ha estado presente en el proceso antes, durante y después del diseño de páginas Web completas?
17. ¿Tiene actualmente un sitio Web?
18. ¿Desde cuánto ha tenido usted un sitio Web?
19. ¿Qué opina la gente sobre su sitio Web actual?
20. ¿Cuándo fue la última vez que actualizó el sitio?
21. ¿Tiene su sitio aplicaciones interactivas?
22. ¿El desarrollador original sigue disponible?

Gustos y preferencias

23. ¿Conoce algún (s) sitios Web que le gustan como referencia?
24. ¿Cuáles sitios Web considera agradables estéticamente?
25. ¿Cuál es el estilo del sitio Web que está buscando?
26. ¿Cómo usuario, qué le molesta más sobre los sitios Web?
27. ¿Tiene alguna idea a nivel creativo para desarrollar el sitio Web?

Objetivos  

28. ¿Cuál es el mensaje principal que desea trasmitir?
29. ¿Cuáles son los mensajes secundarios?
30. ¿Quién es su público meta específico?
31. ¿Quiénes son sus competidores?
32. ¿Cuáles son las direcciones Web de sus competidores?

Necesidades

33. ¿Qué funciones debe cumplir su sitio Web?
34. ¿Tiene alguna especificación?
35. ¿Cuántas páginas necesita?
36. ¿Necesita motores de búsqueda dentro de su sitio?
37. ¿Con qué frecuencia necesita actualizar el sitio?
38. ¿Necesita un sistema de manejo de contenido, que le permita automatizar su sitio?
39. ¿Necesita un formulario de contacto?
40. ¿Qué aplicaciones interactivas requiere para su sitio (boletines, formularios, galerías, blog, chat, foros, vox puopuli, etc)?
41. ¿Qué tan importante es la personalización de su sitio?
42. ¿Usted desearía o necesitaría ayuda para hacer cambios? Si es así, ¿necesitaría ayuda de forma rutinaria?
43. ¿Necesita comercializar productos desde su sitio?, ¿utilizaría Paypal, tarjeta de crédito y otra forma de pago?
44. ¿Existe alguna función específica que necesite en el sitio?
45. ¿Cómo se maneja el correo electrónico en su empresa? Hosting
46. ¿Necesita que hayan áreas protegidas dentro del sitio?
47. ¿Desea que su sitio tenga incorporadas redes sociales como Digg, Facebook, Twitter?
48. ¿Necesita que el sitio Web se vincule a un otro sitio en particular?? 
49. ¿Tiene el contenido del sitio listo?

Conocimientos y posibilidades del cliente

50. ¿Conoce los estándares Web?
51. ¿Qué tan familiarizado está usted con las prácticas de diseño gráfico para diseño Web?
52. ¿Conoce las buenas prácticas para mejorar la indexación en los motores de búsqueda (Google, Yahoo)?
53. ¿Qué tan importante es la obtención de buenos resultados en los mototes de búsqueda?
54. ¿Está familiarizado con términos como usabilidad y navegabilidad?
55. ¿Esta usted o alguien de la empresa familiarizado con HTML y CSS?
56. ¿Qué software posee?
57. ¿Cuántas personas han editado el sitio?
58. ¿Cómo va a mantener el sitio?
59. ¿Usted o alguien en su empresa tiene instalado y sabe utilizar  Photoshop u otro software de edición de imágenes?
60. ¿Estará alguien de informática de su empresa involucrado en el proceso?

Imagen Corporativa

61. ¿Su empresa tiene un logotipo? 
62. ¿En qué formato se encuentra su logotipo?
63. ¿Ha considerado el rediseño de su logotipo?
64. ¿Ha considerado la posibilidad de crear una nueva identidad corporativa? Este es un buen momento para considerar actualizar o cambiar la identidad.
65. ¿Tiene un catálogo o folleto?
66. ¿Hay fotos específicas que necesita utilizar?
67. ¿Está usted en contacto con el diseñador original de su identidad corporativa?
68. ¿Necesita que el sitio se integre con las piezas de identidad corporativa existentes?
69. ¿Tiene los números de color Pantone de la identidad de su empresa?

Necesidades extra de diseño

70. ¿Necesita tarjetas de presentación o papel membrete?
71. ¿Necesita algún otro material de promoción?
72. ¿Necesita otra ayuda de diseño gráfico?

Brief para proyecto web:  https://drive.google.com/file/d/0B10tV5dEEWlxeWlnc0dhVHdRTjQ/view