14
Guías de diseño gráfico http://ucab-informaticaii.blogspot.com

Clase - Guías de diseño web

Embed Size (px)

Citation preview

Page 2: Clase - Guías de diseño web

Guías de diseño gráfico

UsabilidadEn interacción persona-ordenador, la usabilidad se refiere a la claridad y la elegancia con que se diseña la interacción con un programa de ordenador o un sitio web.http://es.wikipedia.org/wiki/Usabilidad

Page 3: Clase - Guías de diseño web

Guías de diseño gráfico

Simplicidad• Menos es mejor: Utilice la menor cantidad de recursos para comunicar lo que desee.

• Para lograrlo es indispensable tener claro el objetivo comunicacional. ¿Qué quiero decir?.

• El visitante debe tener claro a primera vista y de manera muy sencilla de que se trata la página.

Page 4: Clase - Guías de diseño web

Qué quiere hacer la persona que ingresa en twitter.com:

Saber de que se trata el servicioIngresar a su cuentaSuscribirse al servicio

Page 5: Clase - Guías de diseño web
Page 6: Clase - Guías de diseño web
Page 7: Clase - Guías de diseño web
Page 8: Clase - Guías de diseño web

Guías de diseño gráfico

Menos columnas• Por norma general no debemos usar más de tres columnas.

• Si el sitio no va a manejar demasiada información (ej.Página de noticias) lo recomendable es usar dos columnas

Page 9: Clase - Guías de diseño web
Page 10: Clase - Guías de diseño web

Guías de diseño gráfico

Lo más importante arriba• El visitante va a ver la página comenzado por la parte superior izquierda como si fuera un libro. Por esa razón se coloca el logo en ese lugar.• La información más importante debe estar situada en la parte superior

Page 11: Clase - Guías de diseño web
Page 12: Clase - Guías de diseño web

Diagrama General - Ejemplo

LOGO Explicación del sitio web en una frase

Barra de navegación si tiene varias secciones

Información destacada

Área para noticias / artículos Área para widgets

Page 13: Clase - Guías de diseño web
Page 14: Clase - Guías de diseño web