MODULO 2 - Lección 20 PROTOTIPOS VISUALES DE ALTA FIDELIDAD

El prototipo o diseño visual es la evolución del mockup, un documento más elaborado y detallado dónde dar estilo a los elementos generales y particulares del diseño, con elementos como el color, la composición o la tipografía, para obtener un prototipo más ajustado al diseño final.

En el prototipo se diseñan las dimensiones en pixeles y los atributos estéticos de la mayoría de los elementos visibles de la web.

Hay que definir los siguientes elementos:

- Color
- Áreas
- Cajas de contenido
- Imágenes
- Textos
- Menús y enlaces
- Iconos

SOFTWARE DE EDICIÓN DE IMÁGENES:

- Adobe Photoshop
- Gimp (Gratuito)

SOFTWARE DE DIBUJO VECTORIAL:

- Adobe Ilustrator
- Inkscape (Gratuito)

El software ha de trabajar en capas, para poder asignar a cada objeto unas dimensiones y espacio propios. También nos ha de permitir MEDIR, utilizando reglas y poder trabajar el documento con dimensiones reales, así como editar imagenes.

CONSEJOS PARA ANTES DE EMPEZAR A CREAR LA PÁGINA WEB:

1 - Buscar inspiración (ver links en video, minuto 3:57)
Para buscar ideas:

  • Investigaremos en corrientes creativas
  • Desarrollaremos la idea y la conceptualizaremos
  • Tomaremos en cuenta la temática de la web, las tendencias y el público a quien va dirigida
  • Tomaremos ideas de todas las fuentes posibles
  • Potenciaremos nuestra creatividad
2 -Paleta de colores:

  • Estableceremos una paleta básica. Es importante para dar consistencia y estilo propio.
  • Usaremos una paleta básica.
  • Escogeremos una gama de colores
  • Haremos combinaciones
  • Utilizaremos una base de 3 colores
(Ver enlaces en vídeo, minuto 5:09)


3 - Buscar recursos gráficos:

  • Imágenes y elementos gráficos
  • Tipografias
  • Iconos
  • El material del cliente
El material se puede comprar en bancos de imagen o bien utilizar los de licencia  libre o gratuita. También podemos general el material nosotros mismos.
Se puede utilizar también el material gráfico del cliente y hay que tener en cuenta las imposiciones creativas como la imagen corporativa.
(Ver enlaces en vídeo  min. 6:24)

4 - Definir las tipografías.

  • Que sea legible.
(Ver enlaces en vídeo min. 7:11)

5 - Recopilar el material necesario:

  • mockup
  • Información facilitada por el cliente
  • recursos
  • logos


CONSEJOS PARA  EMPEZAR A DISEÑAR LA PÁGINA WEB:

1 - Trabajar en capas:

Trabajar en capas, facilita:
  • El trabajo y la organización
  • El proceso de diseño
  • Editar cada elemento
Es recomendable asignar una capa a cada elemento del diseño y agrupar en carpetas los diferentes objetos comunes a una misma zona, así como guardar siempre una copia del documento maestro.

2 - Diseñar de general a particular:

  • Comenzar por lo más general
  • Definir las áreas de la estructura
  • Cajas de contenido
  • Trabajar en el diseño dentro de las áreas y cajas ya definidas
3 - No abusar de...:
  • Espacio
  • Color
  • Tipografía
  • Decoración excesiva
  • Efectos complejos
  • Muchos elementos
4 - Optimizar el tiempo:

  • Definir las prioridades del proyecto
  • No perder el tiempo diseñando elementos irrelevantes
  • Diseñar según nuestras posibilidades
  • Tener en cuenta siempre la visión del conjunto y la coherencia en el estilo
  • Tener siempre en cuenta las necesidades del cliente

5 - Organiza:

  • Carpetas de trabajo
  • Prototipos
  • Documento Maestro
  • Registrar los cambios
  • Editables
  • Finales
(Ver enlaces en el vídeo min. 11:39)




Comentarios

Publicar un comentario

Entradas populares de este blog

MODULO 4 - Lección 5 - HTML: TABLAS

Imagen
Una tabla HTML es una forma gráfica de representar información de manera esquematizada, ordenada y compacta. Las tablas se organizan en filas y celdas. Las tres etiquetas principales para las tablas son: La etiqueta <table></ table> indica el inicio y el cierre de la tabla y el resto de etiquetas estarán recogidas entre ellas. Fila: Table Row <tr></tr> Celda de datos: Table Data Cell <td></td> Otras etiquetas para las tablas son: Celda de Cabecera: Table Header Cell <th> sustituye a la etiqueta  <td>  para celdas de cabecera. Es posible agrupar filas en 3 bloques de estilos: <thead> agrupa una o más filas de cabecera <tbody> se utiliza para agrupar filas de cuerpo, tipicamente aquellas que contienen el grueso de los datos. <tfoot>  Agrupa las filas del pie de la tabla. <caption> añade un título sobre la tabla Los estilos se trabajarán en CSS Para combinar celdas,...
Leer más

MODULO 2 - Lección 4 PROTOTIPADO, WIREFRAMES, MOCKUPS Y PROTOTIPOS

Imagen
El arquitecto de información es el responsable de: Identificar los objetivos del proyecto Identificar las necesidades de los usuarios Especificar las funcionalidades y requerimientos de la aplicación web Define y diseña los sistemas de navegación, organización, etiquetado y búsqueda Prototipa la aplicación web La responsabilidad final es asegurar que los usuarios podrán encontrar y gestionar la información de manera efectiva. Los arquitectos de información, se valen de la diagramación y el prototipado para especificar cual será la organización, estructura, navegación y funcionamiento de la aplicación web. Los PLANOS son diagramas de organización y funcionamiento y se suelen denominar Blueprint, diagramas de contenido o flujo o mapa web. Jesse James garret, nos explica el vocabulario visual para describir arquitectura de información y diseño de interacción: Un vocabulario visual para describir arquitectura de información y diseño de interacción MAQUETAS: Pro...
Leer más

MODULO 4. Lección 14: HTML: NUEVAS FUNCIONALIDADES EN FORMULARIOS (PARTE 2)

Imagen
autocomplete: Nos permite especificar si un formulario completo o si un campo de este debe tener la opción de autocompletado activado o no. Si esta activado, su valor es ON , el navegador completa automaticamente el campo con valores que el usuario ya haya introducido en ese campo ocasiones anteriores. Si se desactiva, asignando el valor OF , lo que se consigue es prevenir que un campo se complete automáticamente. <form autocomplete="on"> Funciona con el atributo FORM y con los siguientes tipos de input: text, search, url, tel, email, date pickers, password, range, colors <input type="email" name "email"  autocomplete="off"> autofocus: Permite especificar en que campo de entrada queremos que se coloque el foco cuando se carga la página. Es un atributo de tipo buleano, por lo que no se debe definir más de un elemento con este atributo en la misma página. Permite comenzar a escribir de inmediato s...
Leer más