Reglas generales de diseño de páginas web

898 views
752 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
898
On SlideShare
0
From Embeds
0
Number of Embeds
290
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Reglas generales de diseño de páginas web

  1. 1. Koldo Parra de la Horra 1 REGLAS GENERALES SOBRE DISEÑO DE PÁGINAS WEB Recomendaciones previas a la hora de crear tus páginas.
  2. 2. Koldo Parra de la Horra 2 Nombres de Archivos • Es importante, para evitar problemas con los nombres de archivo cuando queramos “subirlos” al servidor, que se tengan en cuenta ciertas reglas. De lo contrario, puede ocurrir que nuestra Web funcione perfectamente en nuestro equipo y en el servidor no: – Utilizar una sola palabra como nombre de un archivo. – Que no tenga más de 8 caracteres. – Que no tenga vocales con tildes, ni mayúsculas, ni “eñes”, ni espacios en blanco. Ejemplo: web_1.html La “barrabaja” es un buen sistema para evitar espacios
  3. 3. Koldo Parra de la Horra 3 Resolución • Actualmente las resoluciones estándar en la Web son la de 800 x 600 píxeles o 1024 x 768 píxeles, hecho al que ha contribuido la generalización de monitores de 17 e incluso 19 pulgadas en los equipos nuevos. Con los monitores de 15 pulgadas, el estándar en la Web era de 800 x 600 píxeles. • La importancia de la resolución de pantalla sobre la forma de ser visualizadas las páginas Web en la ventana del navegador es muy importante. A mayor resolución se dispone de más puntos de información para presentar los elementos en pantalla, pero estos puntos son más pequeños, con lo que los elementos de la interfaz (textos, imágenes, objetos de formulario, etc.) se ven más pequeños. • Lo mejor es diseñar la página con tamaños relativos, es decir, indicando las dimensiones de las tablas, imágenes, etc en forma de porcentaje en lugar de fijar medidas absolutas. De esta manera se ajustará al ancho de pantalla de manera automática.
  4. 4. Koldo Parra de la Horra 4 Recomendaciones • Facilidad de navegación: Un factor importante es la forma de presentar la información. Hay que tener en cuenta que a medida que la cantidad de páginas de una Web aumenta, es cada vez más difícil para las visitas encontrar lo que necesitan. La mejor forma de ofrecer la información es organizarla en áreas definidas, permitiendo así que la navegación sea muy intuitiva. Si las visitas necesitan emplear mucho tiempo para encontrar la página buscada, es casi seguro que no se va a regresar posteriormente. • Cuidado con el “tamaño” de las páginas: Un lector no debe tener que esperar “mucho” tiempo para que la página sea completamente mostrada en pantalla. Hay que optimizar las imágenes y otros contenidos para que pesen lo justo y necesario. • Prueba tus páginas antes de publicarlas: Para asegurarse de que se puede navegar correctamente con cualquier navegador disponible en el mercado (Internet Explorer, Mozilla, etc.) y con diferentes tipos de resolución de pantalla (600 x 800, 1024 x 768 etc.)
  5. 5. Koldo Parra de la Horra 5 Planificación de la Web• Debemos preguntarnos: – ¿Cuales son los objetivos de la página (sitio Web)? – ¿Qué secciones tendrá? – Organización interna de cada página del sitio¿Qué marcos tendrá?(Composición visual). – ¿Cuantas páginas y cómo estarán enlazadas entre sí? – ¿Cuantos niveles de anidación (subniveles)? – ¿Qué estructura de menús crearemos? – ¿Qué aspecto (diseño) le queremos dar? ¿Colores de fondo y del texto? – ¿Qué lugares ocuparán las imágenes y el texto? – ¿Vamos a introducir o no contenidos multimedia? – ¿Tamaños de letra, colores y contraste? – ¿Logotipos y Text Arts”? • Por tanto, son muchas las decisiones que hay que tomar antes de empezar a crear la página.
  6. 6. Koldo Parra de la Horra 6 Estructura de Carpetas • Establecer esta estructura (denominado también mapeado del sitio Web) es esencial para la planificación de una Web. • Se recomienda meter todos los archivos (objetos asociados) de la Web dentro de una carpeta, y dentro de esta crear diferentes carpetas para: – Imágenes – Videos – Sonido – Documentos – Etc… • Colocaremos las imágenes, videos, etc… dentro de la correspondiente carpeta (pueden crearse subcarpetas dentro de estas), pero una vez se haga referencia a su ubicación desde un archivo de una de las páginas Web ya no deberemos moverlo, puesto que si lo hacemos, no se mostrará.
  7. 7. Koldo Parra de la Horra 7 Estructura de Carpetas (2) • Es importante fijarse en lo siguiente: – El archivo “index” es la página Web principal. Más tarde crearemos otras que deberán llevar otros nombres. Pues bien, conviene que la “página index” esté en el directorio raíz de la carpeta principal. – Ahora supongamos que al editar la página “index” con el programa Kompozer, insertamos una imagen que está dentro de la carpeta “imágenes”. Pues bien, realmente no se inserta, sino que se inserta una referencia a la carpeta donde está almacenada la foto para que el navegador la busque y la muestre. – Por ello, una vez hecho esto, no debemos cambiar la ubicación ni de la imagen, ni por supuesto del archivo “index”.
  8. 8. Koldo Parra de la Horra 8 Estructura de navegación • A la hora de crear los enlaces entre las distintas páginas de nuestro proyecto, debemos definir que tipo de estructura queremos: Estructura lineal: Se va pasando sucesivamente de una hoja a la siguiente o de esta a la anterior, de manera similar a un libro. Esta estructura es adecuada para manuales. Estructura jerárquica (en árbol): Donde existen varios niveles de anidación. Desde una página principal se accede a unas secundarias, las cuales a su vez dan paso a un nivel inferior ,etc…. Da mayor sensación de orden a los contenidos. Estructura mixta: combina los dos modelos anteriores. Estructura libre: Es el formato más flexible a la hora de la navegación pero el más confuso, pues proporciona múltiples enlaces cruzados. Por ello es especialmente importante en este caso establecer un esquema o mapa Web previo.
  9. 9. Koldo Parra de la Horra 9 Estructura de navegación (2) • Elegida la estructura de navegación, hay que decidir qué queremos que se vea y dónde:
  10. 10. Koldo Parra de la Horra 10 Composición Visual (1) • No todas las páginas de un sitio requieren tener la misma composición visual. De hecho, la página de portada (index) suele tener una estructura diferente al resto, pues sirve de presentación. • Lo que si es habitual es organizar la página por marcos, o mediante tablas, reservando así espacios apara las diferentes secciones dentro de la página. Así se establece un encabezado, un pie de página, una zona de menús y un cuerpo central para los contenidos. No hace falta ser tan rígidos. La estructura puede ser la que queramos, pero estas son las habituales. • Se desaconseja el uso de plantillas de marcos. El uso de tablas es mucho más versátil y flexible.
  11. 11. Koldo Parra de la Horra 11 Adecuación formal de los Textos El objetivo fundamental es la LEGIBILIDAD Tres reglas básicas: 1. Los tipos de letra o “fuentes” deben ser comunes. 2. Los tamaños de las tipografías, espaciados, interlineados, alineaciones de párrafos, etc deben ser adecuados y armónicos. 3. Los contrastes entre colores de textos y colores de fondos deben ser adecuados para facilitar la lectura y no cansar la vista.
  12. 12. Koldo Parra de la Horra 12 Adecuación formal de Textos (2) • Tres reglas básicas: 1. Los tipos de letra o “fuentes” deben ser comunes, es decir, aquellos que son utilizados por el 99% de los usuarios y programas navegadores (Consideradas como fuentes “Web-Safe”). Tipos de letra habituales en el diseño Web son: – Times New Roman – Arial – Verdana – Tahoma Otros tipos de letras utilizados con frecuencia, pero que no se recomiendan son: – Trebuchet – Century Gothic – Lucida Grande – Palatino – Garamond – Baskerville – Univers – Rockwell – Gotham
  13. 13. Koldo Parra de la Horra 13 Adecuación formal de Textos (3) Aunque resulte una cuestión de diseño avanzado ha de buscarse que la tipografía elegida y el “Art Text” del logotipo tengan una cierta relación o armonía estética. Aquí vemos varios ejemplos de elecciones tipográficas correctas.
  14. 14. Koldo Parra de la Horra 14 Correcta elección del tamaño de los textos: Debe establecerse una cierta jerarquía textual. Evidentemente los encabezados y títulos a un mayor tamaño, y el cuerpo de la página a menor tamaño ( conviene utilizar fuentes entre 8 y 12 puntos para cuerpos de texto) . No obstante, no se recomienda utilizar demasiados tamaños diferentes dentro de una página, sino 3 o 4 máximo. Las viñetas (bullets) y sangrías (indent) son recursos útiles para estructurar la información, separar conceptos, subordinar unos a otros, crear dependencias, etc. Una buena estrategia de trabajo es preparar una paleta de fuentes con una letra serif para el texto, una letra sans para los títulos y subtítulos, con tamaños mayores, otra para los pies de foto, resúmenes, citas y notas, de menor tamaño, y tal vez, una letra especial para el título principal. Es una fórmula que es simple y efectiva, que evita la mezcla de diferentes fuentes de palo seco juntas o diferentes letras serif juntas, combinaciones que raramente funcionan. Adecuación formal de Textos (4)
  15. 15. Koldo Parra de la Horra 15 La mayoría de los editores Web tienen una serie de tamaños predefinidos. Lo mejor es ajustarse a ellos. Por ejemplo Frontpage: Sin embargo Kompozer opta por partir de un tamaño de 12 puntos con la posibilidad de subir o bajar escalonadamente con los botones de aumentar y disminuir fuente. Adecuación formal de Textos (5)
  16. 16. Koldo Parra de la Horra 16 Para probar diferentes tamaños y tipos de letras se recomienda esta página: http://www.fonttester.com/web_safe_fonts.html Escribimos el texto. Ajustamos el tamaño. Y vemos el efecto en diferentes tipografías. Adecuación formal de Textos (6)
  17. 17. Koldo Parra de la Horra 17 más existen otros factores que influyen en la legibilidad: La longitud de la línea o el interlineado. Cuando conseguimos que éstos tres elementos armonicen (tipografía y su tamaño, longitud e interlineado) se producirá una mayor facilidad de lectura, será más natural nuestro recorrido visual sobre el texto . Aplicación de los efectos de Negrita y Cursiva. Que pueden ser utilizadas para proporcionar variedad al texto y para particularizar en el mismo ciertas palabras. Se desaconseja la utilización del subrayado para evitar confusiones con los enlaces Web. Espaciado entre caracteres: La legibilidad de un texto va a depender del correcto espaciado entre letras y palabras que lo forman. Alineación de los textos: El texto puede alinearse de cinco formas distintas: alineado a la izquierda, alineado a la derecha, justificado, centrado o asimétrico. Los comienzos de párrafo deben ser fácilmente reconocibles, pudiendo usar para este fin las sangrías, los estilos o la separación de párrafos con un retorno (uno, nunca dos). Adecuación formal de Textos (7)
  18. 18. Koldo Parra de la Horra 18 as correctas para resaltar textos: omo norma general, las letras redondas y minúsculas suelen ser dentro de una familia las más legibles, más que las cursivas, negritas, mayúsculas y estrechas. as negritas (bold) llaman poderosamente la atención dentro de un texto e incluso distraen seriamente, por lo que nunca se debe abusar de ellas o emplearlas de modo puramente decorativo. Deben quedar reservadas para enfatizar algunas palabras, siempre de manera muy restringida, y nunca en frases completas. Si son utilizadas adecuadamente ayudan a ojear rápidamente el texto y facilitan la rápida comprensión de la información. Adecuación formal de Textos (8)
  19. 19. Koldo Parra de la Horra 19 Colores, Textos y Contrastes (9) s correctas para resaltar textos: s mayúsculas son mucho más difíciles de leer que las minúsculas, por ello no son recomendadas para textos largos sino para palabras sueltas. Su capacidad de resaltar dentro de un texto le hacen un recurso muy valioso para captar atención sobre un elemento de información. a opción interesante para publicidad la constituyen las combinaciones de mayúsculas y minúsculas en una misma palabra. Esta combinación presenta una muy difícil lectura lo que requiere mayor procesamiento y por tanto puede producir un mayor recuerdo, si bien esto última hipótesis no ha sido comprobada empíricamente. s itálicas o cursivas son muy poco legibles y son poco recomendables, solo deben ser utilizadas con fuentes de tamaño suficientemente grande.
  20. 20. Koldo Parra de la Horra 20 Espaciado entre caracteres: El track o tracking ajusta el espacio entre caracteres El kern o kerning se utiliza para ajustar el espacio entre entre las letras de una misma palabra o en algunos pares de caracteres determinados que llaman la atención por estar demasiado juntos o separados Adecuación formal de Textos (10) El track o tracking ajusta el espacio entre caracteres El track o tracking ajusta el espacio entre caracteres El track o tracking ajusta el espacio entre caracteres El kern o kerning se utiliza para ajustar el espacio entre entre las letras de una misma palabra o en algunos pares de caracteres determinados que llaman la atención por estar demasiado juntos o separados El track o tracking ajusta el espacio entre caracteres Adecuación formal de Textos (10) El kern o kerning se utiliza para ajustar el espacio entre entre las letras de una misma palabra o en algunos pares de caracteres determinados que llaman la atención por estar demasiado juntos o separados El track o tracking ajusta el espacio entre caracteres Espaciado entre caracteres: Adecuación formal de Textos (10) El kern o kerning se utiliza para ajustar el espacio entre entre las letras de una misma palabra o en algunos pares de caracteres determinados que llaman la atención por estar demasiado juntos o separado El track o tracking ajusta el espacio entre caracteres
  21. 21. Koldo Parra de la Horra 21 longitud de línea: o factor decisivo en la facilidad de lectura de un texto y en su poder comunicativo es el ancho de línea. A una menor longitud de línea, mayor velocidad de lectura, razón por la cual los periódicos tienen columnas muy estrechas. Sin embargo, líneas demasiado cortas dificultan la lectura por el ritmo visual al que obliga con el cambio constante de línea. Una mayor longitud de línea requiere de un salto de mayor longitud de un punto de fijación ocular (el extremo derecho final de una línea) al siguiente (el inicio izquierdo de la siguiente). A mayor longitud del salto, más inexactitud en la siguiente fijación y por tanto mayor dificultad de lectura. mo regla, podemos tomar para una línea más de 40 caracteres y menos de 70. En líneas muy cortas, es importante la correcta distribución de las unidades de significado, procurando siempre que cada línea ofrezca al lector una entidad significativa propia, lo que hace el texto mucho más fácil de leer y más comprensible. Adecuación formal de Textos (11)
  22. 22. Koldo Parra de la Horra 22 longitud de línea: o factor decisivo en la facilidad de lectura de un texto y en su poder comunicativo es el ancho de línea. A una menor longitud de línea, mayor velocidad de lectura, razón por la cual los periódicos tienen columnas muy estrechas. Sin embargo, líneas demasiado cortas dificultan la lectura por el ritmo visual al que obliga con el cambio constante de línea. Una mayor longitud de línea requiere de un salto de mayor longitud de un punto de fijación ocular (el extremo derecho final de una línea) al siguiente (el inicio izquierdo de la siguiente). A mayor longitud del salto, más inexactitud en la siguiente fijación y por tanto mayor dificultad de lectura. mo regla, podemos tomar para una línea más de 40 caracteres y menos de 70. En líneas muy cortas, es importante la correcta distribución de las unidades de significado, procurando siempre que cada línea ofrezca al lector una entidad significativa propia, lo que hace el texto mucho más fácil de leer y más comprensible. Adecuación formal de Textos (12)
  23. 23. Koldo Parra de la Horra 23 terlineado y separación de párrafos: erlineado (leading), espacio vertical entre las líneas de texto, es un factor importante para que el lector pueda seguir correctamente la lectura sin equivocarse de línea o cansar la vista, además de ser uno de los responsables de la sensación de color que toma un bloque de texto. o regla general, conviene darle al interlineado uno o dos puntos más que el valor del cuerpo de la fuente, o sea, que si tenemos un texto en cuerpo 10, un interlineado de 12 da un blanco apropiado en la interlinea. Si se utilizan valores de interlineado menores al cuerpo de texto las líneas pueden comerse unas a otras o volverse difícil leer. yor espacio entre líneas, mayor facilidad de lectura. Se recomienda un interlineado óptimo de un ancho de línea de 1,5. Adecuación formal de Textos (13)
  24. 24. Koldo Parra de la Horra 24 Correcta alineación de los textos: El texto puede alinearse de cinco formas distintas: alineado a la izquierda, alineado a la derecha, justificado, centrado o asimétrico. – El texto alineado a la izquierda es el más natural y recomendable para textos largos. Crea una letra y un espacio entre palabras muy uniforme, y dado que las líneas terminan en diferentes puntos, el lector es capaz de localizar fácilmente cada nueva línea. Esta es posiblemente la forma de alineación de textos que resulta más legible. En cuanto a legibilidad, es mejor el texto alineado a la izquierda que el justificado. – Por el contrario, la alineación a la derecha va en contra del lector, porque es difícil encontrar la nueva línea. Este método puede ser adecuado para un texto que no sea muy extenso, pero no para grandes bloques. Adecuación formal de Textos (14)
  25. 25. Koldo Parra de la Horra 25 Correcta alineación de los textos (2): – El texto justificado, puede ser muy legible si el diseñador asegura que el espacio entre letras y palabras sea uniforme y los molestos huecos entre palabras, denominados "ríos", no interrumpan el curso del texto. En caso contrario las palabras con mayor espacio entre caracteres sean involuntariamente enfatizadas. Resulta adecuado en columnas estrechas o bloques de texto de poca extensión, ya que resulta monótono y cansa al lector. – Las alineaciones centradas dan al texto una apariencia muy formal y son adecuadas cuando se usan con mesura. Pero debe evitarse configurar textos demasiado largos con este modelo. – Las alineaciones asimétricas se usan cuando el diseñador desea romper el texto en unidades de pensamiento lógicas, o para dar a la página un aspecto más expresivo. Obviamente la configuración de grandes cantidades de texto de esta manera acaba por cansar al lector. Adecuación formal de Textos (15)
  26. 26. Koldo Parra de la Horra 26 Uno de los factores más importante de los textos, que influye sobremanera en la legibilidad de los mismos, es el contraste entre estos y el fondo sobre el que se sitúan. Un contraste adecuado hace que los textos se lean bien y que su lectura no canse al lector, condición muy importante en obras de contenido textual importante. Si el tipo se disminuye en tamaño, debe incrementarse la fuerza de contraste de color. Colores y Contraste (1)
  27. 27. Koldo Parra de la Horra 27 Estamos acostumbrados a ver tipos negros sobre papel blanco, y tradicionalmente esta combinación es la más legible. Además muchos tipos se han diseñado para ser leídos como letras negras sobre fondo blanco y ofrecen así su optima legibilidad. En el momento en que se añade color al tipo o al fondo, se altera la legibilidad del texto. Para alcanzar la óptima legibilidad cuando se diseña con tipos y color se han de sopesar cuidadosamente las tres propiedades del color (tono, valor e intensidad) y determinar el contraste apropiado entre las letras y su fondo. Podemos usar contrastes de tono (cálidos y fríos), contrates de valor (luminosos y oscuros) o contrastes de saturación (vivos y apagados). Colores y Contraste (2)
  28. 28. Koldo Parra de la Horra 28 Si dos colores análogos están demasiado cerca en el círculo cromático y no aportan suficiente contrate de tono o valor, deberían reajustarse para agudizar dicho contraste. Un buen principio es coger colores que no estén directamente enfrentados ni estén demasiado próximos en el círculo cromático. Un texto de color amarillo sobre fondo blanco perdería importancia, ya que, no resaltaría al ser los dos colores claros, sin embargo, si el color de fondo es negro, el amarillo cobraría fuerza. Según algunos estudios, la letra más legible es la negra sobre fondo amarillo. Colores y Contraste (3)
  29. 29. Koldo Parra de la Horra 29 Existe una herramienta online que nos facilita la elección de los colores en nuestra página es la siguiente: http://www.yafla.com/yaflaColor/ColorRGBHSL.aspx El secreto para combinar colores se esconde en la posición de éstos en el círculo cromático. Ésta Web te servirá de ayuda para inspirarte si tienes que elegir y combinar una gama completa de colores para tu Web. Colores y Contraste (4) Yafla Color te permite crear la gama a partir del color que quieras como principal, en función de su posición en el círculo cromático te da el color complementario, tríada, análogos, etc… con diferentes matices y además funciona como conversor entre los modelos de color RGB y HSV.
  30. 30. Koldo Parra de la Horra 30 Otra herramienta similar la puedes encontrara en: http://www.colorschemer.com/online.html Colores y Contraste (5)
  31. 31. Koldo Parra de la Horra 31 Ayuda con los colores (1)  Para averiguar cualquier color en Hexadecimal (códigoPara averiguar cualquier color en Hexadecimal (código RGB recomiendo esta página:RGB recomiendo esta página: http://http://www.easycalculation.comwww.easycalculation.com/color-/color-coder.php?hexcolorcoder.php?hexcolor=5B8307&=5B8307&rgbcolorrgbcolor=91,131,7=91,131,7 • Introducimos aquí el valor en Hexadecimal • Nos muestra el valor en decimal de los canales R, G y B. • Nos muestra el color.
  32. 32. Koldo Parra de la Horra 32 Ayuda con los colores (2)  También es interesante este PDF que te puedesTambién es interesante este PDF que te puedes descargar aquí:descargar aquí: tabla básica de colores RGB.pdftabla básica de colores RGB.pdf
  33. 33. Koldo Parra de la Horra 33 Encabezado y Pie de página (1) • El encabezado o “header” suele estar formado por un “banner” con el título de la Web y un logotipo o imagen identificativa. • El encabezado de cualquier sitio Web es importante por partida doble. En primer lugar, define la estética de todo el sitio. Y en muchos casos, incluye botones que deben ser funcionales para la navegación.
  34. 34. Koldo Parra de la Horra 34 Encabezado y Pie de página (2) • El pie de página o “Footer” suele reservarse para la información técnica de la Web y la información sobre la propiedad y derechos de la Web. • Si la página tiene excesivo contenido y obliga a un “scroll” o desplazamiento vertical, (cosa que debe evitarse), deben colocarse enlaces de retorno en la parte inferior o bien enlaces para navegación a otras partes de la página sin necesidad de retornar a la zona superior.
  35. 35. Koldo Parra de la Horra 35 Uniformidad de estilo (1) • Las CSS u Hojas de estilo en cascada (Cascade Style Sheets) son unos archivos que se pueden crear también con algunos editores de páginas Web (por ejemplo Kompozer), y que definen una serie de estilos para los textos (tipos de letra, colores, tamaños, etc..) y también para los colores de fondo y otras propiedades de la página. Esto da un aspecto u niforme a todas las páginas Web del sitio Web que estemos diseñando lo que añade elegancia y seriedad al conjunto. • Es relativamente sencillo configurar una hoja de estilos, pero también podemos descargar de la Web modelos gratuitos e incorporarlos a nuestro diseño. De esta manera se nos facilita en gran medida el trabajo de diseño formal de la Web, ya que sólo tendremos que incorporar los contenidos. También son conocidas como “Templates CSS” o plantillas CSS
  36. 36. Koldo Parra de la Horra 36 Uniformidad de estilo (2) • Hay lugares de descarga gratuita de plantillas CSS. Dos ejemplos: http://www.freecsstem plates.org/
  37. 37. Koldo Parra de la Horra 37 Uniformidad de estilo (3) http://www.free-css.com/free-css- templates/page1.php
  38. 38. Koldo Parra de la Horra 38 REGLAS GENERALES SOBRE DISEÑO DE PÁGINAS WEB Fin de la presentación.

×