1. Por: Rodrigo Prez

2. Objetivos Tomar decisiones del desarrollo de un sitioweb analizando e interpretando lasespecificaciones del diseo Conocer conceptos de diseo para ladiagramacin de paginas Conocer los diagramas de flujo, guionesgrficos y diagramas para la creacin de unSitio Web. Comunicarse con los clientes respecto dediseo y el contenido. 3. Estructura Despus de recopilar el contenido (textos,imgenes, logotipos, etc.) se organiza paracomunicar el mensaje al cliente y cumplir susmetas. Para ello, se dibuja: El diagrama de flujo la estructura de la pagina principal una pgina interna de muestra 4. Grfico de Flujo Debe enfatizar: la estructura conceptual y la organizacin del sitio como el usuario fluye a travs de tareas definidas y los pasos respectivos El sitio muestra caminos al usuario El usuario se mueve por los caminos por lasacciones. Las acciones generan resultados 5. La Pgina Es el elemento clave de la experiencia del usuario. Se representa con un rectngulo Es una unidad de representacin Se utilizan etiquetas para identificar paginas yarchivos de datos Las relaciones se representan por lneas simples oconectores. Los conectores tambin pueden ser etiquetadoscuando una accin deba ser aclarada. Un elemento rea, identifica un grupo de pginasque comparten una caracterstica en comn 6. Mapa del sitio Muestra un mayor nivel de representacin delsitio. Debe mostrar: reas principales Archivos HTML Pginas dinmicas de cada seccin Hay que revisarlo desde el punto de vista del usuario, para comprobar si: Tiene estructura lgica Es Navegable. 7. Diagrama de pgina Es una esquema donde se integran: El contenido La navegacin La funcionalidad bsica Indica: El posicionamiento de los grficos La navegacin Los textos Encabezados Otros elementos que deben aparecer en pantalla. La jerarqua de la informacin 8. Elementos del diagrama depgina Grficos TextoNavegacin Color Se Los Los Llene el colorrepresentanrectngulos rectngulos de fondo delconindican laindican ladiagrama conrectngulosposicin delposicin de un colorque indicantexto los Usualmenteel tamao y Etiquete loshipervnculos se utilizanla posicin. rectngulos de la pginaescalas de Se etiquetan con la Etiquete losgrises paralosdescripcin rectngulos no distraer larectngulosdel texto o con elatencin.con el coloque texto nombre de lanombre dede relleno. pgina a laslos archivos que sequedirigen lasrepresentanligas. 9. La navegacin Debe ser clara y consistente Los botones, hipervnculos y grficos utilizados deben ser coherentes y deben indicar al usuario: Donde se encuentran dentro del sitio. A donde necesitan ir. Cmo regresar a donde se encontraban. 10. La navegacin (cont.) Los botones: Deben llevar una etiqueta clara que indique su funcin. Pueden usarse conos para dar una ayuda visual al usuario, slo si son claros en su significado. Aqu tenemos un ejemplo de botn que sirve para regresar a la pgina principal, su icono es de una casa y su etiqueta es homeHOME 11. La Navegacin (cont.) Al realizar el diagrama se deben tomar en cuenta las especificaciones tcnicas como: Tamao de pantalla Velocidad de descarga Plataforma (Windows, Mac, Linux) Navegador (Explorer, Firefox, Chrome, etc.) Se recomienda realizar un diagrama para: La pgina de inicio. Las pginas internas 12. La Navegacin (cont.) El diagrama describe como funciona unapagina web El diagrama se utiliza para comunicarinformacin tcnica entendible para: El cliente Los diseadores Los desarrolladores Todos los que participan en el proceso 13. La Navegacin (cont.) Los diseadores pueden modificar laapariencia (Look and Feel) de la pgina sinafectar la jerarqua de la informacin. Se pueden crear varias composicionesdistintas para la aprobacin del cliente. 14. Escenario o Vistas de Usuario Despus de los diagramas, se determinan lastareas que realizar el visitante tpicamente Implementar estas tareas permite observar lausabilidad del sitio. Se recomienda reducir el nmero de pantallasy rutas que el usuario complete sus tareasms rpido. 15. Ejemplo vista de usuario En un proceso de compra, el usuario sigue los siguientes pasos: Elegir caractersticas del producto> Colocar el producto en el carrito de compras> Registrar sus datos personales> Capturar sus datos bancarios para realizar elpago> Confirmar la compra (fin de la tarea) 16. Elementos Tcnicos parapginas webMen Despliega ligas en poco espacio. provee navegacin flexible y rpida de pop-up descargar. Intercambia una imagen por otra Rollover atrae la atencin del visitante indica reas donde se puede hacer clic. Se puede usa en paneles de navegacin 17. Elementos Tcnicos parapginas web Sirven para intercambiarinformacin con el usuarioFormas Ejemplo: Datos personales,Libro de visitas, etc.Transiciones Mejoran el diseo del sitioo efectos 18. Elementos Tcnicos parapginas webAade narraciones, Sonidomsica de fondoEnriquece el Video contenido del sitio. 19. Diseo de un sitio En esta fase se conceptualiza la apariencia visual del sitio basndose en: Audiencia Metas Contenido. Se crean varias composiciones visuales paraexpresar la identidad del cliente. Se incluye un tono general del sitio y diseode botones, color, fuentes e imgenes. 20. Punto ValorLneaElementosDe DiseoTextura FormaColor 21. El Punto Es el primero y ms simple Sirve como foco de nfasis para llamar laatencin a informacin importante. La combinacin de puntos representan ideasms complicadas. Un serie de puntos atrae la atencin enespecial si encuentran cercanos entre s. 22. La lnea Se define como una serie de puntos. Dirigen la atencin hacia un punto. Actan como bordes entre ideas o pasos de unasecuencia. Permite visualizar rpidamente un objeto o idea. Puede ser recta, curva o irregular. Las lneas: Verticales: detiene el movimiento del ojo.simbolizan poder y fuerza. Horizontales: simbolizan descanso y relajacin. Diagonales: son dinmicas y orientadas a laaccin. 23. La forma Es un rea que sobresale del espacioalrededor, dando un borde definido o unadiferencia. Se compone de lneas que encierran un rea. Pueden dirigir el movimiento del ojo. Las formas simples son mas fciles derecordar Definen una relacin entre una figura o elfondo. 24. Valor Es el grado de luz uoscuridad Todos los elementos dediseo lo requieren un valorde contraste para servistos. Es utilizado para describirobjetos, formas y espacio. Las reas: oscuras: denotan misterio, drama, amenaza. Luminosas: denotan felicidad, cercana, calidez 25. Textura Es la apariencia de lasuperficie de unobjeto: aspereza,suavidad,profundidad. Se utilizan paraacentuar un rea. 26. Color Es la parte de luz que se refleja en losobjetos. Los colores primarios, no son mezclas deotros colores y son: Rojo, Amarillo, Azul. Color secundario: se obtiene al mezclar doscolores primarios. El color puede ayudar a mejorar o demeritarla composicin 27. La rueda del color Se crea cuando losAzulcolores primarios ysecundarios se colocanen crculo Verde Morado Los coloresdirectamenteenfrentados se llamancomplementarios ycrean un granAmarilloRojocontraste Cuando se utilizancolores cercanos en la Naranjarueda se creanarmonas 28. La rueda de color (cont.)Hue Otra palabra para color Chroma Intensidad o pureza del colorTinte Color mezclado con blancoTono Color mezclado con gris 29. Son las manera en que se usan los distintos elementos grficos juntos 30. Movimiento Es la creacin de la ilusin de movimiento por medio de: Formas o lneas curvas Repeticin de figuras geomtricas Lneas o delineado borros 31. Balance Consiste en compara o estimar dos cosas una contra otra, as como el contraste entre ellas. Espacio vaco (blanco) y espacio lleno Texto e imgenes Color y sin color o diferencia de colores Textura contra espacios planos 32. Balance (Tipos) Hay tres tipos cuando se usa color, forma yposicin: Simetra: Correspondencia de partes en ladosopuestos de un punto, una lnea o un plano. Asimetra: Falta de simetra Simetra radial: simetra alrededor de unpunto 0. Se pueden identificar tres lneas de simetra:horizontal, vertical y diagonal. 33. Balance (Regla de lostercios) Tcnica para lograrbalance Consiste en dividir unaimagen en 9 partesiguales, usando doslneas paralelashorizontales y doslneas paralelasverticales Se utilizan los puntosde interseccin de laslneas para distribuirlos objetos. 34. nfasis Se expresa con fuerza o tensin Atrae la atencin a un punto focal Puede expresarse nfasis por: contraste aislamiento de un objeto por posicin 35. Unidad El uso correcto del balance produce un efectoarmonioso Puede crearse unidad por: Proximidad Repeticin Continuidad 36. Color en la web El color se expresa con valores del sistemahexadecimal. Se utiliza este sistema porque es mscompacto identificar un color entre millonesde ellos usando solo 6 dgitos hexadecimales. 37. Hexadecimal vs. Decimal El sistema hexadecimal maneja 16 dgitosposibles para cada posicin. Los dgitos en ambos sistemas coinciden del0a9 Observe la tabla de equivalencias abajo:HE 1 2 3 4 5 6 7 8 9 A B C D E FXD1 1 1 1 1 1E 1 2 3 4 5 6 7 8 9C 0 1 2 3 4 5 38. Color en la Web Cada color se representa con la combinacin detres canales: rojo, verde, azul Esta forma de representacin del color se lellama RGBColor Rojo VerdeAzulRGB 39. Un color en cifras decimales Cada color se representa utilizando 3 cifras para cada canal 0a 0a0a 255255 255 Cada cifra representa el grado deintensidad de cada canal Cero es la menor intensidad y 255 es lamxima intensidad 40. Un color en cifras hexadecimales Cada color se representa utilizando 3 cifras paracada canal 00 a00 a 00 aFFFF FF Cada cifra (de dos dgitos) representa el grado de intensidad de cada canal 00 es la menor intensidad y FF es la mxima intensidad 41. Paleta de coloresComponen una paleta16.7completa decolores usandodgitosMillones dehexadecimales colores 42. Primera paleta de coloressegurosBlackMaroon Green NavySilver RedLimeBlueGrayPurpleOliveTealWhite FucsiaYellowAquaEstos 16 colores son reconocidos en todos los navegadores.Su nombre equivale a su representacin numrica. 43. Segunda paleta de colores seguros Se compone de 216colores. El sistema operativoreserva 40 para usointerno Un color seguro(Websafe) semuestra por igualen cualquiernavegador en modode 256 colores 44. A pesar de la paleta de colores segura, lavisualizacin de un color puede variar segn el tipo de monitor que se este usando. 45. Composicin del diseovisual Es muy importante lograr un diseo correctopara una pgina web, a fin de mantener laconsistencia de todo el sitio. El diseador puede tomar algunas libertadescon los elementos de pgina, pero sin olvidarla informacin esencial ni modificar las partesfundamentales. 46. Guin Grfico Relata o comunica a los diseadores del equipo las decisiones que se tomaron en cuanto al diseo, la composicin y la usabilidad del sitio, al igual que para mostrarlo al cliente, y que este apruebe el comienzo de la produccin.