Estructura y diseño de un sitio web

27,550 views

Published on

Objetivos:
Tomar decisiones del desarrollo de un sitio web analizando e interpretando las especificaciones del diseño
Conocer conceptos de diseño para la diagramación de paginas
Conocer los diagramas de flujo, guiones gráficos y diagramas para la creación de un Sitio Web.
Comunicarse con los clientes respecto de diseño y el contenido.

Published in: Education
1 Comment
12 Likes
Statistics
Notes
  • Me parece muy buena esta presentación. El tema es atractivo para los que trabajamos en empresas y organizaciones al frente de los Dptos. de Comunicación y RRPP, como es mi caso. Justo ahora contratamos equipo de diseño para rediseñar nuestro sitio WEB, que es muy primitivo y elemental, y con su trabajo ya tengo más elementos para saber lo que deseamos, o mejor, lo que necesitamos. Gracias por ofrecer a los demás sus conocimientos.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
27,550
On SlideShare
0
From Embeds
0
Number of Embeds
305
Actions
Shares
0
Downloads
650
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Estructura y diseño de un sitio web

  1. 1. Por: Rodrigo Pérez
  2. 2. Objetivos Tomar decisiones del desarrollo de un sitio web analizando e interpretando las especificaciones del diseño Conocer conceptos de diseño para la diagramación de paginas Conocer los diagramas de flujo, guiones gráficos y diagramas para la creación de un Sitio Web. Comunicarse con los clientes respecto de diseño y el contenido.
  3. 3. Estructura Después de recopilar el contenido (textos, imágenes, logotipos, etc.) se organiza para comunicar el mensaje al cliente y cumplir sus metas. Para ello, se dibuja:  El diagrama de flujo  la estructura de la pagina principal  una página interna de muestra
  4. 4. Gráfico de Flujo Debe enfatizar:  la estructura conceptual y la organización del sitio  como el usuario fluye a través de tareas definidas y los pasos respectivos El sitio muestra caminos al usuario El usuario se mueve por los caminos por las acciones. Las acciones generan resultados
  5. 5. La Página Es el elemento clave de la experiencia del usuario. Se representa con un rectángulo Es una unidad de representación Se utilizan etiquetas para identificar paginas y archivos de datos Las relaciones se representan por líneas simples o conectores. Los conectores también pueden ser etiquetados cuando una acción deba ser aclarada. Un elemento área, identifica un grupo de páginas que comparten una característica en común
  6. 6. Mapa del sitio Muestra un mayor nivel de representación del sitio. Debe mostrar:  Áreas principales  Archivos HTML  Páginas dinámicas de cada sección Hay que revisarlo desde el punto de vista del usuario, para comprobar si:  Tiene estructura lógica  Es Navegable.
  7. 7. Diagrama de página Es una esquema donde se integran:  El contenido  La navegación  La funcionalidad básica Indica:  El posicionamiento de los gráficos  La navegación  Los textos  Encabezados  Otros elementos que deben aparecer en pantalla.  La jerarquía de la información
  8. 8. Elementos del diagrama depágina Gráficos Texto Navegación Color• Se • Los • Los • Llene el color representan rectángulos rectángulos de fondo del con indican la indican la diagrama con rectángulos posición del posición de un color que indican texto los • Usualmente el tamaño y • Etiquete los hipervínculos se utilizan la posición. rectángulos de la página escalas de• Se etiquetan con la • Etiquete los grises para los descripción rectángulos no distraer la rectángulos del texto o con el atención. con el coloque texto nombre de la nombre de de relleno. página a las los archivos que se que dirigen las representan ligas.
  9. 9. La navegación Debe ser clara y consistente Los botones, hipervínculos y gráficos utilizados deben ser coherentes y deben indicar al usuario:  Donde se encuentran dentro del sitio.  A donde necesitan ir.  Cómo regresar a donde se encontraban.
  10. 10. La navegación (cont.) Los botones:  Deben llevar una etiqueta clara que indique su función.  Pueden usarse íconos para dar una ayuda visual al usuario, sólo si son claros en su significado. Aquí tenemos un ejemplo de botón que sirve para regresar a la página principal, su icono es de una casa y su etiqueta es home HOME
  11. 11. La Navegación (cont.) Al realizar el diagrama se deben tomar en cuenta las especificaciones técnicas como:  Tamaño de pantalla  Velocidad de descarga  Plataforma (Windows, Mac, Linux)  Navegador (Explorer, Firefox, Chrome, etc.) Se recomienda realizar un diagrama para:  La página de inicio.  Las páginas internas
  12. 12. La Navegación (cont.) El diagrama describe como funciona una pagina web El diagrama se utiliza para comunicar información técnica entendible para:  El cliente  Los diseñadores  Los desarrolladores  Todos los que participan en el proceso
  13. 13. La Navegación (cont.) Los diseñadores pueden modificar la apariencia (Look and Feel) de la página sin afectar la jerarquía de la información. Se pueden crear varias composiciones distintas para la aprobación del cliente.
  14. 14. Escenario o Vistas de Usuario Después de los diagramas, se determinan las tareas que realizará el visitante típicamente Implementar estas tareas permite observar la usabilidad del sitio. Se recomienda reducir el número de pantallas y rutas que el usuario complete sus tareas más rápido.
  15. 15. Ejemplo vista de usuario En un proceso de compra, el usuario sigue los siguientes pasos:  Elegir características del producto>  Colocar el producto en el carrito de compras>  Registrar sus datos personales>  Capturar sus datos bancarios para realizar el pago>  Confirmar la compra (fin de la tarea)
  16. 16. Elementos Técnicos parapáginas web Menú • Despliega ligas en poco espacio. • provee navegación flexible y rápida de pop-up descargar. • Intercambia una imagen por otra Rollover • atrae la atención del visitante • indica áreas donde se puede hacer clic. • Se puede usa en paneles de navegación
  17. 17. Elementos Técnicos parapáginas web • Sirven para intercambiar información con el usuario Formas • Ejemplo: Datos personales, Libro de visitas, etc.Transiciones • Mejoran el diseño del sitio o efectos
  18. 18. Elementos Técnicos parapáginas web •Añade narraciones, Sonido música de fondo •Enriquece el Video contenido del sitio.
  19. 19. Diseño de un sitio En esta fase se conceptualiza la apariencia visual del sitio basándose en:  Audiencia  Metas  Contenido. Se crean varias composiciones visuales para expresar la identidad del cliente. Se incluye un tono general del sitio y diseño de botones, color, fuentes e imágenes.
  20. 20. Punto Valor Línea Elementos De DiseñoTextura Forma Color
  21. 21. El Punto Es el primero y más simple Sirve como foco de énfasis para llamar la atención a información importante. La combinación de puntos representan ideas más complicadas. Un serie de puntos atrae la atención en especial si encuentran cercanos entre sí.
  22. 22. La línea Se define como una serie de puntos. Dirigen la atención hacia un punto. Actúan como bordes entre ideas o pasos de una secuencia. Permite visualizar rápidamente un objeto o idea. Puede ser recta, curva o irregular. Las líneas:  Verticales: detiene el movimiento del ojo. simbolizan poder y fuerza.  Horizontales: simbolizan descanso y relajación.  Diagonales: son dinámicas y orientadas a la acción.
  23. 23. La forma Es un área que sobresale del espacio alrededor, dando un borde definido o una diferencia. Se compone de líneas que encierran un área. Pueden dirigir el movimiento del ojo. Las formas simples son mas fáciles de recordar Definen una relación entre una figura o el fondo.
  24. 24. Valor Es el grado de luz u oscuridad Todos los elementos de diseño lo requieren un valor de contraste para ser vistos. Es utilizado para describir objetos, formas y espacio. Las áreas:  oscuras: denotan misterio, drama, amenaza.  Luminosas: denotan felicidad, cercanía, calidez
  25. 25. Textura Es la apariencia de la superficie de un objeto: aspereza, suavidad, profundidad. Se utilizan para acentuar un área.
  26. 26. Color Es la parte de luz que se refleja en los objetos. Los colores primarios, no son mezclas de otros colores y son: Rojo, Amarillo, Azul. Color secundario: se obtiene al mezclar dos colores primarios. El color puede ayudar a mejorar o demeritar la composición
  27. 27. La rueda del color  Se crea cuando los Azul colores primarios y secundarios se colocan en círculo Verde Morado  Los colores directamente enfrentados se llaman complementarios y crean un granAmarillo Rojo contraste  Cuando se utilizan colores cercanos en la Naranja rueda se crean armonías
  28. 28. La rueda de color (cont.) Hue • Otra palabra para color Chroma • Intensidad o pureza del color Tinte • Color mezclado con blanco Tono • Color mezclado con gris
  29. 29. Son las manera en que se usan los distintos elementos gráficos juntos
  30. 30. Movimiento Es la creación de la ilusión de movimiento por medio de:  Formas o líneas curvas  Repetición de figuras geométricas  Líneas o delineado borros
  31. 31. Balance Consiste en compara o estimar dos cosas una contra otra, así como el contraste entre ellas.  Espacio vacío (blanco) y espacio lleno  Texto e imágenes  Color y sin color o diferencia de colores  Textura contra espacios planos
  32. 32. Balance (Tipos) Hay tres tipos cuando se usa color, forma y posición: Simetría: Correspondencia de partes en lados opuestos de un punto, una línea o un plano. Asimetría: Falta de simetría Simetría radial: simetría alrededor de un punto 0. Se pueden identificar tres líneas de simetría: horizontal, vertical y diagonal.
  33. 33. Balance (Regla de lostercios) Técnica para lograr balance Consiste en dividir una imagen en 9 partes iguales, usando dos líneas paralelas horizontales y dos líneas paralelas verticales Se utilizan los puntos de intersección de las líneas para distribuir los objetos.
  34. 34. Énfasis Se expresa con fuerza o tensión Atrae la atención a un punto focal Puede expresarse énfasis por:  contraste  aislamiento de un objeto  por posición
  35. 35. Unidad El uso correcto del balance produce un efecto armonioso Puede crearse unidad por:  Proximidad  Repetición  Continuidad
  36. 36. Color en la web El color se expresa con valores del sistema hexadecimal. Se utiliza este sistema porque es más compacto identificar un color entre millones de ellos usando solo 6 dígitos hexadecimales.
  37. 37. Hexadecimal vs. Decimal El sistema hexadecimal maneja 16 dígitos posibles para cada posición. Los dígitos en ambos sistemas coinciden del 0a9 Observe la tabla de equivalencias abajo:HE 1 2 3 4 5 6 7 8 9 A B C D E FXD 1 1 1 1 1 1E 1 2 3 4 5 6 7 8 9C 0 1 2 3 4 5
  38. 38. Color en la Web• Cada color se representa con la combinación de tres canales: rojo, verde, azul• Esta forma de representación del color se le llama RGB Color Rojo Verde Azul RGB
  39. 39. Un color en cifras decimales Cada color se representa utilizando 3 cifras para cada canal 0a 0a 0a 255 255 255• Cada cifra representa el grado de intensidad de cada canal• Cero es la menor intensidad y 255 es la máxima intensidad
  40. 40. Un color en cifras hexadecimales  Cada color se representa utilizando 3 cifras para cada canal 00 a 00 a 00 a FF FF FF • Cada cifra (de dos dígitos) representa el grado de intensidad de cada canal • 00 es la menor intensidad y FF es la máxima intensidad
  41. 41. Paleta de colores Componen una paleta16.7 completa de colores usando dígitos Millones de hexadecimales colores
  42. 42. Primera paleta de coloressegurosBlack Maroon Green NavySilver Red Lime BlueGray Purple Olive TealWhite Fucsia Yellow Aqua Estos 16 colores son reconocidos en todos los navegadores. Su nombre equivale a su representación numérica.
  43. 43. Segunda paleta de colores seguros Se compone de 216 colores. El sistema operativo reserva 40 para uso interno Un color seguro (Websafe) se muestra por igual en cualquier navegador en modo de 256 colores
  44. 44. A pesar de la paleta de colores segura, lavisualización de un color puede variar según el tipo de monitor que se este usando.
  45. 45. Composición del diseñovisual Es muy importante lograr un diseño correcto para una página web, a fin de mantener la consistencia de todo el sitio. El diseñador puede tomar algunas libertades con los elementos de página, pero sin olvidar la información esencial ni modificar las partes fundamentales.
  46. 46. Guión Gráfico Relata o comunica a los diseñadores del equipo las decisiones que se tomaron en cuanto al diseño, la composición y la usabilidad del sitio, al igual que para mostrarlo al cliente, y que este apruebe el comienzo de la producción.

×