Elementos del diseño
La planificación de interfaces gráficas es una tarea fundamental en el diseño de interfaces Web, ya que conlleva un conocimiento previo y una organización y documentación de las tareas a desarrollar, obteniendo un resultado final más consistente y fácil de mantener.
Utilizado habitualmente en el contexto de las artes, ingeniería, arquitectura y otras disciplinas creativas, diseño se define como el proceso previo de configuración mental en la búsqueda de una solución en cualquier campo.
Diseñar requiere principalmente consideraciones funcionales y estéticas. Esto necesita de numerosas fases de investigación, análisis, modelado, ajustes y adaptaciones previas a la producción definitiva del objeto.
De las fases de diseño nombradas anteriormente (investigación, análisis, modelado, ajustes y adaptaciones), ¿sabrías identificar dichas fases en el siguiente vídeo de DIY Perks?
Diseñar es una tarea compleja, dinámica e intrincada. Es la integración de un conjunto de requisitos técnicos, sociales y económicos, de necesidades biológicas con efectos psicológicos y de materiales, forma, color, volumen y espacio, todo ello pensado e interrelacionado con el entorno.
Las personas dedicadas al diseño deben comunicar las ideas y conceptos, de una forma clara y directa, por medio de los elementos gráficos. Por tanto, la eficacia de la comunicación de los mensajes visuales que elaboran estas personas dependerá de la elección que haga de los elementos a emplear y del conocimiento que tenga de ellos.
Percepción visual
Percibimos todo lo que nos rodea a través de los sentidos: la vista, el oído, el olfato, el gusto, el tacto, aunque actualmente empleamos únicamente la vista, el oído y el tacto en nuestra comunicación con el ordenador. Percepción, es el proceso de recogida y tratamiento de la información sensorial. Consiste en recibir, a través de los sentidos, las imágenes, sonidos, impresiones o sensaciones externas y elaborar e interpretar toda la información recibida.
Hoy en día, la mayor parte de los sistemas informáticos son sistemas interactivos y su éxito o fracaso depende, en gran medida, de la interfaz persona-ordenador. Por este motivo la interfaz tiene que estar diseñada pensando en las necesidades del usuario.
Debemos tener en cuenta que cada día aumenta el número de personas que utilizan el ordenador, que estas personas se enfrentan a la interacción con el ordenador con diferentes grados de preparación y con distintas expectativas.
¿Qué significan las siglas IPO?
La IPO (Interacción Persona-Ordenador) es la disciplina que estudia el intercambio de información entre las personas y los ordenadores. Cuando hay una buena comunicación entre el usuario y el ordenador el intercambio de información es más eficiente, se reducen los errores y aumenta la satisfacción del usuario.
Teoría de la Gestalt
Lee el artículo Teoría de la Gestalt.
Elementos conceptuales del diseño
Los elementos conceptuales no son visibles. Los elementos conceptuales del diseño son la base del mismo, sobre ellos se asientan los demás elementos que veremos más adelante. Cada uno tiene sus propias características que les permiten desempeñar funciones determinadas dentro de una composición.
- Punto
- Linea
- Plano
- Volumen
¿Son las líneas visibles en la naturaleza?
Elementos visuales
Los elementos visuales son la parte más importante de un diseño, porque son lo que realmente vemos.
Cuando dibujamos una línea en un papel, empleamos una línea visible para representar una línea conceptual. La línea visible tiene largo y ancho y, su color y textura quedan determinados tanto por los materiales empleados como por la forma de usarlos. Así, cuando los elementos conceptuales se hacen visibles, tienen forma, medida, color y textura.
- Forma: Identificamos lo que percibimos porque lo que vemos posee una forma. Una forma se define como un área que se destaca del espacio que la rodea debido a un límite definido explícita o implícitamente.
- Medida: Todas las formas tienen un volumen o una dimensión. El tamaño de las formas se puede establecer de forma relativa, por comparación de unas con otras, pudiendo decir así que una forma es más grande o más pequeña que otra pero, en cualquier caso, es físicamente medible.
- Color: El color y, el contraste de color en particular, se utilizatambién para llamar la atención sobre una parte determinada de la imagen.
- Textura: El material con el que se hacen los objetos aporta a su superficie una textura determinada con unas determinadas características de rugosidad, suavidad, aspereza, homogeneidad, etcétera.
Elementos de relación
Este grupo de elementos gobierna la ubicación y la interrelación de las formas en un diseño. Algunos, como la dirección y la posición, pueden ser percibidos y otros, como el espacio y la gravedad, pueden ser sentidos.
- Dirección: La dirección de una forma depende de su relación con el observador, con el marco que la contiene o con otras formas cercanas con las cuales se compara.
- Posición: La posición de una forma es juzgada por su relación respecto al cuadro que la contiene o a la estructura global del diseño.
- Espacio: Las formas por muy pequeñas que sean, ocupan un espacio. Así, el espacio puede estar ocupado o vacío. Se puede utilizar la perspectiva para organizar y sugerir el espacio creando la ilusión de profundidad. Se pueden superponer objetos de modo que el observador percibe como más cercano el objeto que está delante de los demás. También podemos lograr la profundidad dentro del campo visual utilizando el contraste y la variación de tamaño en las formas.
- Gravedad: La sensación de gravedad no es visual, es psicológica. Tenemos tendencia a aplicar cualidades tales como pesadez o ligereza, estabilidad o inestabilidad, tanto a las formas individuales como a los grupos de formas.
Elementos prácticos
Los elementos prácticos del diseño permanecen ocultos en el contenido y en la trascendencia del diseño.
- Representación: Una forma es representativa cuando se deriva de la naturaleza o del mundo hecho por el ser humano. La representación puede ser realista, estilizada o medio abstracta. Una fotografía de un monumento es una representación realista del mismo. Un dibujo de los perfiles de dicho monumento es una representación estilizada del monumento y un dibujo naif del monumento es una representación semiabstracta.
- Significado: Es la imagen conceptual que se representa en nuestra mente cuando el diseño transporta un mensaje visual. Cada receptor del mensaje le dará una interpretación, un significado distinto, según sean sus conocimientos y experiencias previas.
- Función: la función se hace presente cuando un diseño debe servir a un determinado propósito. La imagen anterior cumple una función muy importante. Colocada en el lugar adecuado como por ejemplo, una sala de revelado de fotografías, o una sala de microfilmación cumple la función de mantener el ambiente oscuro para poder trabajar.
El color
Lee el artículo Representación de colores.
Diseño de una interfaz web
Cuando comenzamos a diseñar una interfaz Web tenemos que tener en cuenta las respuestas a las siguientes preguntas:
- ¿Sabes cuántas cosas hay que tener en cuenta a la hora de comenzar a elaborar una interfaz Web?
- ¿Tienes claro a que tipo de público irá dirigida tu página?
- ¿Quieres obtener un rendimiento económico con cada visita?
- ¿Quieres contentar a todo el mundo que te visite o prefieres especializarte en un tema y tener menos seguidores?
Estas respuestas nos darán una idea clara de cuáles son los objetivos de nuestra Web y nos orientarán sobre el enfoque que debemos darle al diseño de nuestra interfaz.
Si comienzas un proyecto Web sin pensar en los usuarios a los que va a ir dirigido, es probable que no tengas la acogida que esperabas en un principio.
Una interfaz Web es un sistema gráfico que permite acceder a los usuarios a los contenidos de la Web mediante el uso de elementos gráficos, los cuales son conocidos por la mayor parte de los usuarios que acceden a nuestra página.
El objetivo principal en el diseño de una interfaz Web es que sus potenciales usuarios pueden acceder a todos su contenidos de la forma más rápida y sencilla posible.
Para conseguir dicho objetivo deberemos tener en cuenta varias cosas:
- La paciencia de las personas no es ilimitada. Cuando una persona busca una información y, entra en una página después de haber realizado una búsqueda, no permanecerá mucho tiempo en ella si no encuentra rápidamente lo que busca.
- El gusto, considerado como una cuestión de preferencias personales en materia de estética, varía mucho de unas personas a otras, pero no debemos olvidar que, un diseño cuidadoso, una interfaz agradable y, un empleo coherente de los elementos gráficos, nunca nos hará perder visitantes.
- Los enlaces que no funcionan o que, sencillamente, no conducen a la información que prometían, provocan en el usuario una sensación de rechazo, con la consiguiente pérdida de confianza en nuestra página, pudiendo llegar, incluso, a la determinación de no visitarla de nuevo.
¿Qué significa que una página sea usable?
Usable es un término ampliamente utilizado en el ámbito informático. Es una traducción del término inglés “Useable” y su significado, por analogía con el término “utilizable” sería “que se puede usar”. ¿Pero qué significa “que se puede usar”? Podríamos pensar que un sitio Web es usable sólo por el hecho de haber accedido a él y haber visitado alguno de sus enlaces. Nada más lejos de la verdad. Una página es usable si al usuario le resulta fácil el uso de su interfaz.
¿Por qué es importante que nuestra página sea usable?
Porque la facilidad de uso está relacionada directamente con la eficiencia. Si la página es usable, el usuario no dudará al tomar decisiones sobre lo que tiene que hacer y podrá efectuar un mayor número de operaciones en menos tiempo.
¿Qué significa que una página sea visual?
Podemos decir que un sitio Web es visual cuando las percepciones del usuario, sus opiniones acerca del sitio y, sus sentimientos y actitudes generados mientras lo usa, son positivos. Un sitio Web debe ser atractivo para mantener la atención del usuario, pero también debe ser coherente en el uso de los elementos gráficos. Por ejemplo, si diseñamos una Web relacionada con el tema de la madera y empleamos los colores tostados no sería muy coherente visualmente utilizar el color fucsia en un formulario de pedidos de árboles.
Un sitio Web tiene la característica de ser visual cuando los elementos gráficos empleados están orientados a conseguir los objetivos del sitio y no se han empleado como elemento decorativo.
Guías de estilo
Una guía o manual de estilo es un conjunto de normas para el diseño y la redacción de documentos, ya sea para el uso general, o para una publicación u organización específica. Los manuales de estilo son frecuentes en el uso general y especializado, en medios escritos, orales y gráficos. También dice que el manual de estilo se compone tanto de normas lingüísticas, como de estilo, para que el mensaje sea más coherente, eficaz y correcto.
Algunos manuales de estilo se centran en el diseño gráfico, y abarcan tópicos tales como la tipografía, los colores y espacios en blanco. Los manuales de estilo de sitios Web se centran en los aspectos técnicos y visuales de la publicación, la prosa, uso correcto del lenguaje, la gramática, la puntuación, la ortografía pero, sobre todo, la estética. La estricta aplicación de los reglamentos del manual de estilo proporciona uniformidad al aspecto visual de un documento.
La guía de estilo está dirigida las personas encargadas del diseño y programación de la interfaz Web. Esta guía debe recoger todos los aspectos relacionados con el diseño de la interfaz propia del sitio y, servir de ayuda eficaz en la toma de decisiones, tanto en el proceso de diseño como en la fase posterior de mantenimiento de un sitio Web.
Una guía de estilo incluye aspectos relacionados en la inclusión en la interfaz de fotografías, logos, imágenes, iconos, los colores, los tipos de letra y, aquellos relacionados con la maquetación Web vista anteriormente.
Una guía de estilo se hace imprescindible cuando el sitio Web es desarrollado por un grupo de personas.
Haz click aquí. para descargar el manual de estilo del Gobierno de Navarra.
Elementos de las guías de estilo
Los elementos de una guía de estilo son:
- Fotos y logos
- Tipografías
- Colores
- Iconografía
- Estructura
Fotos y logos
Los recursos gráficos se emplean mucho en la Web. Si se utilizan adecuadamente, pueden mejorar el aprendizaje del usuario y añadir valor a nuestro sitio. Ahora bien, si se utilizan inadecuadamente, producen el efecto contrario.
A la hora de emplear imágenes en la Web, debemos tener en cuenta que las imágenes son archivos que tienen un tamaño y que para poder visualizarse correctamente deben descargarse previamente. Por esta razón, sólo usaremos aquellas imágenes que complementen nuestro sitio Web y trataremos de evitar aquellas cuya única finalidad sea adornar nuestro sitio.
Una guía debe indicar al equipo de desarrollo de la interfaz los siguientes puntos:
- Formato. El tipo de formato en el que deberán estar almacenadas la imágenes o logotipos empleados.
- Tamaño. El tamaño de la imagen o logotipo que se establece dando las medidas de ancho y alto en píxeles.
¿Sabrías decir 5 formatos de imagen que se pueden encontrar en una web?
Todos los tamaños y formatos a emplear en las imágenes y logos del sitio deben quedar perfectamente descritos en el documento de la guía de estilo.
Tipografías
El uso de una fuente familiar al usuario aumenta la facilidad de lectura.
A la hora de elegir la tipografía más adecuada hay que tener en cuenta varias cosas:
- La fuente. No todas las fuentes se leen con la misma facilidad y no todas las fuentes se ven igual en todas las plataformas. La fuente ARIAL es una fuente muy extendida que asegura una correcta visibilidad en todos los tamaños y, en todas las plataformas y navegadores.
- El estilo o tipo de la fuente. En la guía de estilo hay que especificar en que casos debemos usar la negrita, el subrayado, la cursiva o alguna de las posibles combinaciones. Hay que tener en cuenta que:
- El subrayado se emplea normalmente en los enlaces pudiendo dar una falsa impresión al usuario si se emplean con otra finalidad.
- Se debe usar la negrita sólo para conseguir fijar la atención del usuario sobre un elemento, destacándolo sobre el resto.
- No se deben utilizar diferentes características de la fuente para mostrar el énfasis de más de una o dos palabras o una frase corta.
- Tamaño de la fuente. La guía de estilo debe reflejar los tamaños a emplear según la ubicación del texto y su finalidad. No se emplea el mismo tamaño en un texto empleado como titular de un contenido que el del propio contenido. Así mismo, se pueden establecer diferentes tamaños según la importancia del titular.
- El color de la fuente respecto al fondo. La guía de estilo debe especificar el color de la fuente en función de la ubicación del texto y su finalidad. A la hora de elegir un color para el texto hay que tener en cuenta que:
- Se lee mejor un texto en color oscuro sobre un fondo de color claro que al revés.
- Se lee mejor un texto sobre un fondo liso que un texto sobre un fondo con una textura o con una imagen.
Conocer los tipos de fuentes y sus comportamientos en los distintos navegadores y sistemas operativos es de gran importancia para garantizar una visualización consistente de nuestro sitio Web.
¿Qué son las serifas? ¿Para qué sirven?
Colores
En una guía de estilo deben figurar los colores a emplear en el sitio Web en todos los textos, fondos, e imágenes según sea su ubicación y finalidad. La información debe suministrarse aportando los valores para el modelo RGB tanto en hexadecimal como en decimal.
La guía de estilos debería reflejar, entre otras, las combinaciones hexadecimales para el color de:
- Las fuentes en el bloque central de la página principal (la que está en el centro de la imagen).
- Los fondos de los títulos de las secciones de la página principal (mencionadas en el párrafo anterior).
- Las fuentes del menú de navegación y del título del contenido en cada una de las páginas de las secciones (las cuatro que están alrededor de la principal).
- Los fondos de las opciones del menú de navegación y de su título en cada una de las páginas de las secciones.
Por último, una serie de consejos que te pueden ser útiles:
- Si vas a emplear los colores como sistema de codificación asegúrate de que sea fácil de comprender.
- Ser consistentes en el uso de los colores. Usar un color siempre para lo mismo.
- No excederse en el uso de colores distintos.
- Utilizar combinaciones de colores que transmitan armonía.
- Utilizar correctamente el contraste de colores para destacar las partes relevantes del sitio.
- Ten en cuenta la psicología del color.
Iconografía
La iconografía es la aplicación práctica de los elementos prácticos del diseño.
Un icono es un signo que mantiene una relación de semejanza con el objeto representado. Desde el punto informático, un icono es un pequeño gráfico en pantalla que identifica y representa a algún objeto, usualmente con algún simbolismo gráfico, para establecer una asociación.
Los iconos se suelen emplear para complementar los textos de los enlaces en la página de portada.
La elección de los iconos es muy importante, puesto que si un usuario no es capaz de determinar su significado a simple vista, entonces no habremos conseguido nuestro propósito de ahorrarle tiempo en la visualización de la página.
¿Por qué usamos iconos?
¿Un icono debería contener la menor cantidad de detalle posible sin perder significado?
Es importante hacer uso de iconos a los que el usuario está ya acostumbrado.
En la guía de estilos se especificarán los iconos a emplear en el sitio web, dónde se van a emplear y con que finalidad.
Resulta muy arriesgado emplear iconos por el mero hecho de adornar nuestras páginas pero que no aportan ningún significado por sí solos.
Os dejo una lista de webs para conseguir iconos de forma gratuita:
- https://www.iconfinder.com/
- https://icons8.com/
- https://www.flaticon.es/
- https://fonts.google.com/icons
- https://icones.js.org/
- https://www.svgrepo.com/
- https://fontawesome.com/
- https://feathericons.com/
- https://www.webiconset.com/category/free-icons/
- https://lenguajejs.com/retos/recursos/iconos/
Si conoces alguna web de iconos que creas que merezca estar aquí ponla en los comentarios y la añadiré 😉.
¿Es recomendable usar emojis en lugar de imágenes para los iconos?
No. Pero… ¿sabrías decirme por qué?
Estructura
En una guía de estilos debe quedar reflejada no sólo la disposición de estos bloques en cada una de las páginas del sitio, sino también el esquema de navegación que va a existir entre las diferentes páginas del sitio.
Es muy común en los sitios Web de gran tamaño que la página de portada o principal tenga un diseño diferente al de las demás, pero, tanto si todas las páginas son iguales como si tenemos grupos diferentes de páginas iguales entre sí, nuestra guía de estilo deberá reflejar todos los diseños posibles indicando en todos los casos:
- El tamaño en píxeles que ocupará el encabezado y dentro de él lo que ocupará y dónde se ubicará cada uno de sus elementos.
- El tamaño en píxeles o en porcentaje de la zona de navegación y su ubicación, así como si estará dispuesta horizontal o verticalmente, o si estará dividida en secciones distintas y, en su caso, la ubicación de cada una de ellas.
- Cómo se dispondrán los enlaces dentro de cada zona de navegación y su tamaño.
- El tamaño, el lugar y el formato de la zona de posicionamiento dentro de la página.
- El tamaño de la zona del contenido y su ubicación. Dónde se colocará el título y lo que ocupará dentro de la zona de contenido.
- Si hay cuadros de contenidos secundarios, cuál va a ser su tamaño y posición y cuál será su funcionamiento. Si estarán siempre visibles o se mostrarán al pasar el ratón por alguna zona concreta.
- El tamaño y la distribución de los elementos del pie.
- También se deberán reflejar los huecos que se quieran dejar a propósito.
- Cómo se van a mostrar los submenús de navegación, si los hubiera.
¿Por qué crees que es importante en el diseño de página web reflejar los huecos?
Los huecos en el diseño de una web son tan importantes como los silencios en el teatro o en una partitura. Actúa como refuerzo comunicativo. Puede colocarse intencionadamente para llamar la atención, para evitar un agrupamiento indeseado debido al principio de proximidad o al principio de semejanza. O simplemente para facilitar la lectura del contenido.
Elementos de una interfaz web
Son muchos los elementos de los que puede estar compuesta una interfaz Web. El número de elementos empleados dependerá del objetivo del sitio. Así, un portal de noticias, o un portal de un organismo público seguramente utilizará un mayor número de elementos que una página Web de un restaurante o una página personal. Los más destacados son:
- Elementos de identificación.
- Elementos de navegación.
- Elementos de contenidos.
- Elementos de interacción.
Elementos de identificación
Los elementos de identificación son componentes visuales y funcionales que permiten a los usuarios reconocer de forma clara el propósito y la marca del sitio, facilitando la navegación y el entendimiento de la página. Son por ejemplo:
- Logotipo
- Título con el ombre de la empresa
- Favicon
- Título de la sección
- Pie de página
¿Qué es el favicon?
Elementos de navegación
Ya hemos dicho que los elementos de navegación son los que nos permiten acceder a todos los contenidos que se encuentran en las diferentes páginas de un sitio Web. Pero, lo que no hemos dicho, es que si queremos que nuestra página sea usable, el usuario debe conseguir navegar por la página sin perderse y sin tener la sensación de perderse. Para conseguirlo, el sistema de navegación debería constar de una serie de elementos:
- Elemento de regreso a la portada.
- Menú de secciones y/o áreas de interés.
- Información sobre la ubicación del usuario dentro del sitio Web.
Es importante para el usuario tener algún elemento que le permita volver al principio sin necesidad de utilizar la herramienta “ir hacia atrás o regresar” del navegador. Este problema suele resolverse empleando un enlace en el logotipo de la empresa que se sitúa normalmente en parte superior izquierda de cada una de las páginas que componen el sitio Web.
El menú de secciones y/o áreas de interés es una zona de la interfaz en la que se detallan las secciones y/o áreas en las que está dividida la información contenida en el sitio Web. Debe ser fácilmente localizable. Se suele ubicar en la parte superior de cada página, debajo del logotipo. Es importante que estas secciones y áreas estén bien identificadas mediante un texto descriptivo y/o una imagen representativa. También es importante que mantenga la misma posición en todas las páginas del sitio.
No debemos olvidar que, cuando el sitio Web es de gran tamaño, con muchas secciones y subsecciones, es de gran importancia que el usuario sepa en todo momento el lugar donde se encuentra dentro del sitio. Por ello debemos informar, en cada una de las páginas, el camino recorrido desde la página principal o portada hasta la página actual y, lo haremos empleando una línea de texto por debajo del menú de secciones y por encima de los contenidos. Incluso podemos aprovechar esta línea para permitir, mediante el empleo de enlaces, vueltas hacia atrás en el camino de navegación.
En la imagen siguiente están señaladas cada uno de los elementos mencionados. Se ha empleado como ejemplo la página que habla del Consejo General del Estado en el antiguo sitio Web del Ministerio de Educación y Ciencia.
Elementos de contenido
El contenido es la parte esencial de una página Web. Es importante que los contenidos estén expresados en un lenguaje claro y conciso y, presentados en un formato agradable y de fácil lectura. Además, si el sitio Web está formado por muchas páginas, el contenido debe situarse siempre en la misma ubicación. También es importante evitar que el usuario tenga que hacer grandes desplazamientos durante la lectura de los contenidos. Siempre es mejor dividir el contenido en más de una página y enlazar unas con otras.
Elementos de interacción
¿Qué son las zonas de interacción?
Cuando el usuario elige el idioma en el que desea ver el sitio, cuando realiza una búsqueda de información rellenando un formulario de búsqueda, cuando manda una opinión o cuando firma un libro de visitas introduciendo sus datos, todos los elementos del sitio necesarios para realizar este tipo de operaciones forman parte de la zona de interacción.
Los elementos que permiten la interacción son muy variados y cada uno de ellos cumple una función concreta:
- Botón. Elemento que permite al usuario realizar una acción. Se suele utilizar para su representación un rectángulo con efecto de relieve y con un texto escrito que sirve para orientar al usuario sobre la acción que se realizará al presionarlo. Su diseño debe mantenerse en todo el sitio Web.
- Áreas de texto. Son rectángulos en los que el usuario puede escribir. Deben ir acompañadas de una etiqueta que describa el tipo de información que se le pide al usuario.
- Botones de opción. Son elementos excluyentes entre sí que están agrupados bajo una misma descripción. Constan de una circunferencia acompañada de un texto descriptivo. Se identifica el que está seleccionado porque contiene un círculo negro.
- Casillas de verificación. Al contrario de lo que sucede con los botones de opción, las casillas de verificación no son excluyentes entre sí. El usuario puede no seleccionar ninguna, o bien, seleccionar una, algunas o todas las casillas. Suelen ir agrupadas bajo una misma descripción y acompañadas cada una de ellas por un texto descriptivo. Tienen forma de cuadrado que cuando se selecciona queda marcado con una uve “V” o con una doble aspa “X”.
¿Un enlace puede tener forma de botón?
¿Cómo se les llama a las botones de opción en inglés?
¿Cómo se les llama a las casillas de verificación en inglés?
Maquetación web
La maquetación web es el proceso de estructurar y organizar los elementos visuales de una página web para asegurar que se presenten de manera clara, atractiva y funcional en diferentes dispositivos y tamaños de pantalla. Consiste en definir cómo se disponen los bloques de contenido (como texto, imágenes, menús, etc.) y cómo estos elementos interactúan con el usuario.
A la hora de realizar la maquetación Web, deberemos pensar previamente:
- Cuáles son los elementos que va a contener cada una de nuestras páginas.
- Cómo irán colocados cada uno de esos elementos dentro de las páginas teniendo en cuenta siempre el espacio disponible, es decir, la ventana del navegador.
Para diseñar un sitio web, debemos comenzar por hacer una distribución de los grandes bloques de elementos de información.
En los comienzos del HTML, la única forma de estructurar los contenidos de una página web era empleando tablas. Para poder agrupar estos contenidos en los bloques de encabezado, zona de navegación, contenidos y pie, había que anidar unas tablas dentro de otras y definir los tamaños de cada bloque dándole valores, absolutos o relativos, a la altura y anchura de cada celda. Era fácil, aunque laborioso, pero se conseguía situar exactamente cada cosa en su sitio. Había que tener el código HTML con las tabulaciones bien colocadas para no perderse en un maremágnum de etiquetas tr y td.
A día de hoy tenemos otros tipos de display mucho más intuitivos y versátiles como son flex y grid.
Con la aparición de la hojas de estilo, las cuales no hay que confundir con las Guías de estilo que vimos con anterioridad, se tiende a dejar de emplear tanto los marcos como las tablas sustituyendo ambos por el empleo de la etiqueta DIV para definir los bloques y las hojas de estilos para configurar la visualización de dichos bloques. Pero este tema no es tan sencillo por lo que se verá más adelante.
Elementos de ordenación
Cuando diseñamos un sitio Web debemos ser consistentes en la distribución de los grandes bloques en todas las páginas del sitio y debemos tener en cuenta el espacio disponible en la ventana del navegador.
Encabezado
El bloque de Encabezado está situado siempre en la parte superior de cualquier página. Suele contener además de los elementos identificativos del sitio Web: el logotipo, el nombre de la empresa, elementos de acción que permiten cambiar el idioma de lectura, realizar búsquedas, e incluso, si el sitio es muy grande, puede contener elementos de navegación que permanecen a la vista en todas las páginas del sitio.
El bloque de Encabezado se repite en todas las páginas de un sitio Web y debe permanecer visible en todas ellas siempre que sea posible y la complejidad del sitio nos lo permita.
Navegación
El bloque de Navegación es donde se coloca el sistema de navegación del que ya hemos hablado en el apartado Zonas de navegación, contenido, interacción.
Contenido
El bloque de Contenido es aquel en el que se muestran los contenidos. Los contenidos representan la meta del usuario y la razón por la que visita nuestro sitio Web por lo que debemos prestar mucha atención al diseño de este bloque. Debemos reservar una zona lo suficientemente grande para que el usuario pueda leer los contenidos cómodamente, sin necesidad de realizar grandes desplazamientos. Es importantísimo evitar que el usuario tenga que realizar desplazamientos horizontales para leer el final de cada línea.
Pie
El bloque de Pie de página está situado al final de la página y, al igual que el encabezado, se repite en todas las páginas del sitio. Normalmente se emplea el pie como zona de navegación complementaria a la zona superior situada en el encabezado. En ellas se repiten algunos enlaces que se suelen colocar en el encabezado como el enlace al Mapa del sitio (que veremos en el próximo apartado) o, el enlace a la información de contacto y, además, se colocan algunos enlaces nuevos como los enlaces a la información relativa a los derechos de autor, privacidad e información legal.
El diseño del pie no suele estar tan elaborado como el del encabezado, ya que su importancia es menor. El usuario tiene que ser consciente de que lo que está viendo es el pie. Esto es de gran importancia en aquellos casos en los que, por ser el tamaño vertical de la página mayor que la ventana del navegador, el usuario se ve obligado a desplazarse verticalmente, pudiendo perder de vista el encabezado. Con un diseño más sencillo del pie respecto al resto de los bloques conseguimos esa percepción por parte del usuario.
Mapa de navegación
Cuando un sitio Web es muy grande y complejo, como el antiguo sitio del Ministerio de Educación y Ciencia, es conveniente tener un mapa del sitio que ayude a los usuarios a encontrar lo que buscan.
El mapa del sitio proporciona a los visitantes un lugar donde buscar de forma sencilla los contenidos que le interesan si es que no los ha encontrado ya en la página principal.
Aquí puedes ver un par de mapas de navegación:
A continuación, vamos a ver cuáles son las estructuras más habituales de los mapas de navagación.
El mapa de un sitio Web va a tener una estructura que dependerá de la relación que tengan las páginas del sitio entre sí. Esta relación puede ser de diferentes tipos:
Representación gráfica de las estructuras de mapas de sitios
- La estructura lineal es adecuada en aquellos sitios compuestos por páginas donde la lectura de las mismas es secuencial. Su estructura es similar a la de un libro donde avanzas de página en página, pero puedes volver a la página anterior y desde ésta a la anterior para releer algún párrafo.
- La estructura reticular se emplea en aquellos sitios en los que todas sus páginas están relacionadas entre sí. No resulta adecuado cuando el sitio está compuesto por muchas páginas porque el usuario puede llegar a perderse.
- La estructura jerárquica es la más común. Se emplea en aquellos sitios donde existen varias secciones bien diferenciadas pero de poca complejidad de modo que el usuario no tiene porque navegar de una sección a otra.
- La estructura lineal jerárquica es también de las más empleadas cuando cada una de las secciones tiene un volumen de información más elevado y conlleva una lectura secuencial del contenido de la sección. También se emplea este método en aquellos sitios en los que sus secciones representan grados de dificultad de la información presentada y se permite la navegación entre secciones.
¿Qué estructura de mapa debería tener esta web?
Tecnologías para el diseño de documentos web
Los sitios Web están compuestos de páginas que están escritas en lenguaje HTML.
HTML, acrónimo de las palabras en inglés HyperText Markup Language o Lenguaje de Marcado de Hipertexto, es el lenguaje de marcado predominante para la elaboración de páginas web. Los documentos escritos en este lenguaje sirven para describir tanto la estructura como el contenido de una página web.
El HTML emplea marcas o etiquetas dentro del documento para informar al navegador de lo que es presentación dentro de un documento y lo hace, normalmente, delimitando el texto entre dos etiquetas: una de apertura y una de cierre, y, digo normalmente, porque hay etiquetas que no tienen etiqueta de cierre. Una etiqueta se distingue del resto porque va encerrada entre corchetes angulares (los símbolos “menor que” y “mayor que”) y tiene unas normas sintácticas que se deben respetar si queremos que el resultado mostrado en el navegador sea el que pretendemos. La mayoría de ellas constan de: nombre de la etiqueta y atributos de la etiqueta, aunque algunas no tienen atributos.
XML, acrónimo de las palabras en inglés de eXtensible Markup Language o Lenguaje de Marcas eXtensible, se propone como un estándar para el intercambio de información estructurada entre diferentes plataformas. XML no es realmente un lenguaje en particular, es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C).
A diferencia del HTML en el que los errores sintácticos no producen errores en el navegador y sólo pueden provocar variaciones en la presentación, el XML es muy estricto en cuanto a sus normas de sintaxis.
XHTML, acrónimo de las palabras en inglés de eXtensible Hypertext Markup Language o lenguaje extensible de marcado de hipertexto. Es un lenguaje que utiliza las mismas etiquetas y atributos que el HTML pero aplicando las reglas de sintaxis del XML.
¿Conoces alguna herramienta especializada para hacer diseños web?
- Balsamiq
- Figma
Plantilla de diseño
La reutilización de código es una técnica común que intenta ahorrar tiempo y energía, reduciendo el trabajo redundante.
Las plantillas de diseño Web son sitios Web prediseñados que se pueden usar como base en un diseño Web y que permiten adaptarlo a las necesidades del diseñador de forma rápida y fácil, ahorrando una gran cantidad de tiempo y dinero.
Hoy en día, hay gran cantidad de sitios comerciales que suministran plantillas de diseño Web por muy poco dinero si consideramos el tiempo ahorrado en el diseño.