TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás /...

14
TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial

Transcript of TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás /...

Page 1: TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial.

TALLER DISEÑO

WEBJosé Joo Villablanca DG & otras yerbas

Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial

Page 2: TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial.

web

Internet es una red de comunicaciones de cobertura mundial que posibilita intercambiar información a ordenadores situados en cualquier parte del mundo.

• Uno de las facetas mas conocidas de Internet, que ha contribuido enormemente a su popularidad actual, es la “World Wide Web” o WWW ( se podría traducir como “Telaraña de Cobertura Mundial”), que permite acceder de forma sencilla a un enorme volumen de información sin necesidad de un complejo equipo informático ni de conocimientos técnicos especiales.

•En la WWW las personas que buscan una información utilizan una herramienta conocida como navegador para acceder a información de distinto tipo (texto, imágenes, sonidos, etc.), pasar de una información a otra a la que se hace referencia, etc.

Cómo funciona internet

Page 3: TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial.

HTML - hipertexto

• Un hipertexto incluye enlaces a otros documentos donde se desarrollan con más detalle conceptos, ideas, noticias o cualquier texto que aparezca en el documento.

• Una página web puede incluir tres tipos de información: texto, gráficos e hipertexto.

• Un hipertexto es lo que determina una búsqueda; es decir, las palabras que te llevarán a encontrar lo que necesitas en otras webs dentro de toda la red.

• La diferencia entre un texto y un hipertexto es que este último contiene una serie de enlaces con otros documentos que se encuentran en Internet, lo que nos permite buscar como en el índice de un libro lo que nos interesa. Esto quiere decir que puedo entrar a una página donde aparezca la palabra que busco, pero si no me sirve, puedo regresar sin problemas al índice.

web

Page 4: TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial.

• Un error frecuente en el desarrollo web es que los sitios se construyen más para los diseñadores y sus necesidades que para los verdaderos usuarios finales que son los que generalmente nos traerán beneficios o casos de éxito.

• El modelo de proceso del diseño web no garantizará la obtención de un buen sitio

• si los diseñadores ignoran las necesidades de los usuarios. Una normativa que tú como webmaster es que debes asumir que tú no eres el usuario.

• Lo que el diseñador entiende no es lo que un usuario entenderá.

• Como diseñador, tienes profundo conocimiento del sitio Web, conoces dónde se encuentran la información, sabes cómo instalar programas complementarios, dispones de una resolución óptima de pantalla, has configurado correctamente su

navegador, etc.

webEl diseñador y el diseño web

Page 5: TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial.

• Es necesario aceptar el hecho de que la mayoría de los usuarios no tienen un profundo conocimiento del sitio que tú estás elaborando tan cuidadosamente. Incluso puede que ni siquiera tengan tus mismos intereses.

• Dada la importancia de los intereses y deseos de los usuarios, podría parecer apropiado preguntarles para diseñar el sitio de la manera que ellos desean. Este proceder pudiera parecerle una buena idea, hasta que tengas en cuenta otra normativa del diseño web: los usuarios no son diseñadores.

• Para disminuir la dificultad o fracaso en la construcción de Sitios web, deberíamos adoptar un método modelo que describa las diferentes fases presentes en el desarrollo de sitios Web.

• A continuación, el diseñador puede llevar a la práctica cada uno de los pasos, utilizando las guías y la documentación que le muestra al diseñador el modo de hacer las cosas para asegurarse que cada paso se realiza adecuadamente.

web

Page 6: TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial.

• Un modelo de procedimiento ideal para el desarrollo Web ayudaría al diseñador (webmaster) a superar la complejidad o fracaso del sitio, a minimizar el riesgo de fallo del proyecto, a encargarse de los cambios que, con toda certeza, surgirán durante la realización del proyecto y a entregar el sitio con rapidez proporcionando la información necesaria para poder realizar toda la gestión durante el proceso.

• La idea es planificar bien el objetivo de nuestra página web para así implementar todas éstas recomendaciones que te he facilitado.

• Una excelente guía la podemos conseguir en:

http://www.guiaweb.gob.cl

web

Page 7: TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial.

web

• Mucho se ha hablado del ahorro en papel que nos reporta el uso del computador como medio de comunicación. Sin embargo, muchos diseñadores están regresando al uso del papel como medio eficaz de diseño, para plasmar sus ideas. Lo mejor antes de comenzar a diseñar resulta plasmar el mapa mental generado para un mejor entendimiento, y por decirlo así, aterrizaje de las ideas generadas para la creación del sistema.

• Para muestra un botón, aquí algunos ejemplos de lo que digo, aunque distan mucho de ser entendibles, al menos para simples mortales.

• Adjunto aquí algunos bocetos, desde los ejemplos más claros, hasta los mas, como decirlo, artísticos:

Aqui modelos mentales, bien artísticos:

Ordenando el cuento

Page 8: TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial.
Page 9: TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial.
Page 10: TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial.
Page 11: TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial.

Para comenzar un buen diseño, este resulta un boceto muy adecuado:

Page 12: TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial.

Esta ya resulta un poco mas elaborado, pero mas sólido, es decir, representa mejor las ideas planteadas:

Page 13: TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial.

• Lo importante detrás de todo es permitir que el brain storm generado por las ideas pueda ser plasmado de alguna manera en algo tangible.

• Uno nunca sabe que genial idea puede ser llevada a la práctica gracias a este

medio.

web

Page 14: TALLER DISEÑO WEB José Joo Villablanca DG & otras yerbas Instituto Profesional Santo Tomás / Diseño Publicitario Multimedial.

web

A TRABAJAR !