jueves, 16 de noviembre de 2017

PROTOTIPOS VISUALES

Después de haber realizado nuestros mockups, podemos pasar a realizar el prototipo con características visuales, debemos tener claro lo siguiente:
  • Dimensiones y colores a utilizar.
  • Áreas principales.
  • Definir cajas de contenidos.
  • Definir que imagenes vamos a utilizar.
  • Definir los textos que vamos a utilizar.
  • Tener claros los Menús y los enlaces.
  • Colocar y diseñar los iconos.
A la hora de elegir un software para realizar este diseño, debe tener las siguientes características:
    • Que trabaje en capas.
    • Que te permita medir.
    • Que puedas editar las características de las imágenes 
CONSEJOS PARA INICIAR UN DISEÑO:
  1. Busca inspiración en tu proyecto;
    • Investiga en corrientes creativas
    • Desarrolla tu idea.
    • Toma en cuenta la temática de tu web, contando con el cliente y el público al que vaya destinada la misma.
    • Utiliza todas las fuentes posibles, que estén a tu alcance.
    • Potencia tu creatividad.
  2. Utiliza una paleta básica de colores, 3 es lo recomendable.
  3. Busca los recurso gráficos; Imágenes, Tipografía, iconos y le sumas el material que te proporcione el cliente.
  4. Define tipografías, debe de ser legible y que este relacionado con el trabajo que vas a realizar "que le de personalidad".
  5. Recopila y organiza todo el material del trabajo.
Una vez que tengamos todo lo anterior en orden, otros 5 consejos para trabajar en tus diseños;

  1. Trabaja en capas
    • Facilitara tu trabajo
    • Prueba varias opciones, de colocación
    • Asigna a cada capa un elemento
    • Agrupa las carpetas del prototipo por capas
  2. Diseña de lo más general a lo particular. Primero define el color de fondo por ejemplo, después las áreas de la estructura (cajas del contenido) y después pasa a elegir que introduciremos en cada caja. 
  3. Hay que tener cuidado con:
    • Espacios entre elementos.
    • Utilizar demasiados colores
    • Tipografía no legible o recargada
    • Decoración excesiva
    • Efectos complejos
    • Muchos elementos
  4. Optimiza el tiempo:
    • Definir prioridades del proyecto.
    • No perder el tiempo en cosas irrelevantes.
    • Diseña según tus posibilidades.
    • Que el diseño tenga coherencia en su conjunto.
    • Tener claras las necesidades del cliente.
  5. Que tenga organización el proyecto, en su carpetas, separando prototipos por capas. También separando aquellos que son editables de los finalizados.

Toda la información sacada del curso Actívate: https://cursos.formacionactivate.es/idesweb-parte-1/unidad/3#/33

martes, 14 de noviembre de 2017

PROTOTIPADO

Nos referimos al proceso de crear un boceto o planos de la estructura y funcionamiento del futuro sitio web.
Lenguajes utilizados:
  • Wireframes.
  • Mockups.
  • Prototipo.
 A este proceso también le llamamos diagramación de una aplicación Web. Existe un vocabulario cuando estamos hablando de diagramación un ejemplo es el libro de James Garret "Vocabulario visual para describir arquitectura de información y diseño de interacción".
Esta diagramación que vamos a realizar debe ser clara y comprensible, es recomendable que tenga una leyenda en la cual se expliquen los símbolos utilizados.
Un artículo que podemos usar como referencia es: "Diagramación en la arquitectura de información".
Nunca debemos usar diseños gráficos, evitar colores, utilizar escala de grises.
Tipos de diagramación:
  • Sketching; hecho a lápiz y papel, será rápido y ágil. Muy interesante utilizarle para tener claras nuestras ideas y que el cliente también vaya viendo la futura aplicación web. Libro que nos puede servir: "Sketching User Experiences".
  • Wireframes; es mucho más completo. Ya se puede ver como quedará la página olvidando la parte gráfica de la misma. Cuando tenemos una secuencia de wireframes estamos hablando de storyboard.
  • Por último se pueden hacer prototipos funcionales o también conocidos por maquetas o mockups, ya tienen un funcionamiento dinámico y se consideran prototipos de alta fidelidad. Los dos que hemos descrito anteriormente se consideran de baja fidelidad. 
Lecturas recomendadas:
  • Artículo de Olga Carreras "Arquitectura de información. Fundamentos".
  • "Arquitectura de información en entornos Web" Mario Pérez-Montoro Gutiérrez.
Si prototipamos bien, evitamos futuros mal entendidos con el cliente, se reduce el trabajo en el desarrollo y se aumenta la satisfacción final tanto del cliente como del usuario.
Lecturas recomendadas:
5 consejos para un buen Prototipado:
  1. Sencillez y claridad.
  2. En blanco y negro.
  3. Representar tamaños y proporciones.
  4. Ten en cuenta usabilidad y accesibilidad.
  5. Diseña para tus usuarios. 

domingo, 12 de noviembre de 2017

HTML. De la Página WEB a las Aplicaciones WEB

De la página Web que diseñó Tim Berner Lee en el 1989, formada por un lenguaje de hipertexto, en la que solo había texto. Las Webs de entonces solo servían para consumir contenidos.
Según han ido evolucionando se han ido añadiendo:
  • Imágenes
  • Tablas
  • Marcos
Un cambio importante en el diseño de páginas Web, fue la introdución de formularios, desde ese momento el usuario también podía introducir información en la página y se procedía a una comunicación entre usuario y página.
Según se ha ido evolucionando, ha dejado de ser páginas Webs para convertirse en Aplicaciones Webs.
A través de una App Web podemos:
  • Enviar correos
  • Instalar Software
  • Editar fotográfias
  • Ver videos
  • Editar videos
Que ventajas nos proporcionan las APP Web:
  1. No necesitan actualización por parte del usuario.
  2. Se adapta a cualquier dispositivo.
  3. Ubicuidad: Te permite trabajar desde cualquier sitio. Esto es lo que conocemos como "Cloud Computing".
Ya se están utilizando el Mercado de Aplicaciones Web, ¿ A que nos referimos?. Nos referimos a crear aplicaciones web para comercializarlas a través de portales Web. Aquí dos ejemplos de lo que me refiero:

TIM BERNERS LEE. Creador de la Web

Como todos sabemos Tim Berners Lee, no inventó internet y su protocolo de comunicación TCP/IP. Tampoco inventó el concepto de Hipertexto, lo que si le podemos atribuir es, que relacionó internet y el hipertexto, creando lo que conocemos ahora como WEB.
Aquí dejo un enlace a la Wikipedia donde podemos saber algo más sobre la historia de Tim Berners Lee y la creación de la Web.




VIDEO SOBRE LA HISTORIA DE TIM BERNERS LEE