Fuente Digital https://disenowebakus.net/diseno-de-un-sitio-web.

php

Diseño de un sitio Web - Características y elementos básicos

El diseño de las páginas debe ser en función de los requerimientos del sitio y de los
usuarios, cuidando los elementos empleados comunicar el mensaje.

Profesor Hugo Delgado 27/10/2019 Administrar un Sitio Web 9 Comentarios 144 Votos
79,481 Visitado

Diseño WebEstándares WebPlanificación Sitio WebMenú de Navegación Página

WebCaracterísticas de la WebWeb

Diseño de un sitio Web - Características y elementos básicos | Administrar un Sitio Web |

El diseño de las páginas debe ser en función de los requerimientos del sitio y de los
usuarios, cuidando los elementos empleados comunicar el mensaje

COMPÁRTELO:

Estándares y pautas para el diseño de páginas Web

Los estándares y pautas para el diseño de un sitio Web son un conjunto de elementos de
vital importancia a considerar antes de su realización para obtener una buena usabilidad.

Todos estos dependen de que el visitante primero llegue hasta el sitio y una vez en su
interior, cumpla con los objetivos que lo condujeron hacia él de una manera rápida y
simple, garantizando un futuro regreso.

En ocasiones se piensa que sólo con tener un sitio Web en Internet se logra que sea
visitando por las personas que tengan interés en su contenido, pero realmente no
funciona así tan simple.

Hay que tener en cuenta un conjunto de elementos desde su diseño e implementación

para que felizmente esto ocurra.
Los elementos fundamentales son:

Claridad en los objetivos del sitio.

Información básica correspondiente al contenido.

Selección de un nombre de dominio correcto.

Selección de la tecnología para el diseño y la programación.

Selección adecuada de un alojamiento Web (hosting)

Claridad de los buscadores, directorios de Internet y el SEO, optimización para los

motores de búsqueda.

Realización de un diseño en función de los requerimientos del sitio y de los usuarios.

La navegabilidad.

Realización de la programación en determinación de los requerimientos del sitio y de los

usuarios.

Aplicación de técnicas de SEO para lograr una mayor visibilidad en Internet.

Actualizar los contenidos periódicamente.

El diseño de sitios

Cuando un usuario llega a una página, generalmente puede figurarse qué hay ahí, si
solamente se tomaría un poco de tiempo.

Dependiendo de los estudios, la capacidad para encontrar la página correcta en que

realizar una operación a partir de la página de inicio va del 26 al 42%.

Esta diferencia se explicaba en el conocimiento o no por parte del usuario de que debería
seguir varios pasos hasta lograr su objetivo.

El problema de fondo es que la usabilidad sufre dramáticamente tan pronto como el

usuario sale de la página de inicio y empieza a navegar para resolver el problema.
La Web se diseñó como un entorno para leer papeles, y su usabilidad para tareas más
complejas depende en gran medida de un diseño muy sencillo con la menor distracción
posible, información muy clara sobre la arquitectura y eficaces herramientas de
navegación

La página de inicio

ES LA BANDERA DEL SITIO Y DEBE SER DISEÑADA DE FORMA DIFERENTE AL

RESTO.

El primer éxito de una página de inicio es responder a dos cuestiones:

¿Dónde estoy?

¿Qué hace este sitio?

Otras misiones que debe cumplir la página de inicio son:

Ofrecer una idea clara del esquema de navegación en el sitio.

Ofrecer acceso directo a las funcionalidades más comúnmente usadas del sitio.

Anunciar las novedades o promociones.

Proporcionar una herramienta de búsqueda.

Presentar el nombre y el logo.

Realización de un diseño en función de los requerimientos del sitio y de los usuarios

El diseño del sitio es una herramienta fundamental para atraer a los usuarios y el éxito
que se obtenga en muchos otros aspectos como:

Promoción

Velocidad de carga

Afinidad de los usuarios

Entre otros

Dependerá en buena medida de las consideraciones que se realicen al diseñar.

Es importante destacar que el diseño de las páginas se debe realizar pensando en el
cliente y no en el administrador, escogiendo cuidadosamente todos los elementos que se
utilicen y empleando solamente los recursos necesarios para comunicar el mensaje que
se desee, logrando que el sitio tenga un aspecto sencillo y nada recargado.

La consistencia en la apariencia y sensación es importante para mantener garantizando el

mismo aspecto y el diseño en todas las páginas

La página de inicio debe dar una idea general del sitio, pues está constituye su punto de
entrada fundamental.

Es lo primero que ven los usuarios y crea esa primera impresión que es tan importante.

Es en ella donde se determina si se continuará explorando las páginas o si se navegará

hacia otro lugar más interesante.

Los textos son elementos significativos dentro del diseño del sitio Web. Estos contienen la
mayor parte de la información que se brinda, las explicaciones y los detalles de los
elementos que componen el sitio, constituyen la vía principal de comunicación con el
cliente.

Esta es la razón fundamental para que los textos sean escogidos, revisado y corregidos
de forma tal, que se reflejen las ideas que se quieren transmitir.

Para la presentación de los texto es primordial conocer el tipo de fuente que se va a

emplear de manera tal que se pueda leer bien sin importar el tipo de navegador o sistema
operativo de los usuarios.

Es necesario tener en cuenta el tamaño del texto, que debe ser pequeño y claro para
permitir la lectura rápida.
Por lo que se recomienda utilizar la división por secciones de la página lo que posibilita
que el usuario pueda leer más sobre un tema sin que pierda atractivo de la página.

La implementación de imágenes y gráficos complementa la información que se quiere

brindar en el sitio. Constituyen una herramienta fundamental pues proporciona al usuario
un criterio visual.

Hay que tener en cuenta que el uso indiscriminado puede hacer más lento el proceso de
carga de las páginas o provocar estrés visual. Se recomienda usar imágenes cuando
realmente sea necesario para comunicar el mensaje que se desea.

El formato de imágenes y gráficos dependerá de la estructura en cuanto a colores y

definición, se pueden seleccionar distintos tipos, los más utilizados son los .jpg, .gif y
.png, realmente aunque existen algunos patrones no siempre se cumplen en todos los
casos.

Se recomienda grabar las imágenes en los tres formatos y en función del compromiso
entre la calidad estética que se ofrece y la velocidad de descarga de la página escoger
cuál es el más adecuado.

Navegación del sitio

Otro aspecto a tener en cuenta en el diseño es la navegación del sitio.

Un buen sistema de navegación es la base para alcanzar los objetivos que se pretenden,
pues este es el instrumento mediante el cual los usuarios acceden de una página en otra.

Un sistema de navegación útil es aquel que:

Guía a los visitantes hacia la información que se requieren de forma rápida e intuitiva

Conduce al visitante hacia las páginas donde este es capaz de interactuar con los
elementos del sitio.
Construir un sistema de navegación que contribuya a incrementar la satisfacción del
usuario y que, en consecuencia, tribute al éxito del sitio, está más allá de agregarle
enlaces.

En esta labor se debe considerar un conjunto de factores como el agrupamiento de la

información, la estructura, los retornos a páginas, entre otros.

La navegación es uno de los elementos básicos de la Web, y va más allá del uso de
enlaces hypertextuales.

Una interface de navegación debe ayudar al usuario a responder a tres preguntas:

¿Dónde estoy?

¿Dónde he estado?

¿A dónde puedo ir?

¿DÓNDE ESTOY?

Es probablemente la pregunta del millón.

La respuesta, en términos de situación dentro de un sitio debe proporcionarse a dos

niveles:

En relación a la Web como un todo

En relación a la estructura del sitio

La primera es importante en tanto que el usuario a menudo percibe la Web como un todo.

Los cambios drásticos en mecanismos de navegación no son bien asumidos dentro de

esta perspectiva.
Esto implica así mismo, que el usuario no sabrá en qué sitio está a menos que se lo
digas. Por ello, la norma número uno es colocar tu logo o marca identificativa en todas tus
páginas.

La situación en cuanto a la estructura del sitio se consigue mediante la inclusión de

cabeceras que muestran a grandes rasgos la estructura del web y resaltan la situación
actual.

Un tercer elemento a tener en cuenta es el propio título de la página, que debe ser
significante e individualizado.

¿DONDE HE ESTADO?

Con la tecnología Web actual resulta difícil contestar a esta pregunta. Existen, sin
embargo, algunos recursos que nos permiten afrontarla:

El botón atrás del navegador que nos proporciona una historia secuencial de las páginas
visitadas.

Los enlaces ya visitados que nos indican las opciones ya vistas dentro de los enlaces de
una página

En este sentido, es importante respetar la convención en cuanto a la representación de

los links (azul para los activos y rosa para los visitados).

El usuario sabe siempre de esta manera lo que ha visto y lo que no, dentro siempre de lo
que puede ver.

¿A DÓNDE PUEDO IR?

Esta cuestión se responde con las opciones visibles de navegación y con el resto de
enlaces dentro de la página.
Es imposible mostrar todos los destinos posibles en una sola página, una buena
estructura del sitio, fácil de comprender y asimilar por el usuario, será de gran utilidad a la
hora de conocer los puntos posibles de destino desde un sitio dado.

Hay tres clase de hyperenlaces que pueden ser usados en una página:

Enlaces embebidos (El tradicional texto subrayado)

Enlaces estructurales (Apuntan a otro nivel de la estructura, por lo que diferirán de página
a página, si bien es necesario que mantengan una coherencia comprendida y esperada
por el usuario. Es más conveniente utilizar nombres descriptivos del nivel jerárquico que
este en sí)

Enlaces asociativos (Proporcionan información adicional o colateral, del tipo de "ver

también")

Extenso y profundo

Generalmente, el diseño más común de navegación es listar todos los elementos de alto
nivel del sitio, a menudo en una banda a la derecha de la pantalla.

El beneficio de este diseño (Extenso) es que el usuario es continuamente informado de

los servicios disponibles en el sitio haya entrado por el punto que haya entrado.

La desventaja es que existe una pérdida del 20% de la pantalla en páginas destino
pudiendo recuperar misma información con un clic adicional a la página de inicio.

La alternativa es presentar información en profundidad, esto es, en cada página informar

de los diferentes elementos jerárquicos que la anteceden, un esquema de navegación que
se conoce como breadcrumbs (migajas de pan, conocido así por el cuento de Hansel Y
Gretel, donde dejaban rastros en el camino para volver a casa).

Este segundo escenario tiene la ventaja de ocupar poco espacio y ser muy sencillo, lo que
deja al usuario concentrarse en el área de contenidos que es lo que generalmente hace.

Su inconveniente radica en la dificultad de utilizarlo en estructuras no jerárquicas.

El usuario controla la navegación

En el diseño de interfaces tradicional, el diseñador puede controlar donde puede ir el

usuario en cada momento. En el diseño Web no es así.

Además, una aplicación tradicional es un sistema de interfaces cerrado, dentro del que
está el usuario.

Pero en la web el usuario se mueve rápidamente de un sitio a otro dentro de una misma
ventana, de un mismo entorno, por lo que llega a percibir la Web como un todo, más que
como una acumulación de aplicaciones diferenciadas.

Ello implica compartir una serie de reglas que el usuario ha aprendido a través de su
experiencia y que confía en que le sean suficientes para moverse por cualquier sitio de la
red.

Diseño creacionista vs diseño darwinista

El diseño tradicional de interfaces nace de una reflexión profunda y prolongada,

acompañada de estudios, experimentos (Xeros, PARC, Apple, etc.) y ensayos que se
plasmaron una vez analizados y comprobada su eficacia en la guía de estudio GUI.

Es por tanto un diseño creacionista, un largo embarazo que dio a luz a una criatura
consolidada.

En la Web se introducen elementos continuamente, en su campo de experimentación es

la propia red, su uso.

Sólo las buenas ideas sobreviven, las otras desaparecen en un puro modelo evolucionista
del diseño.

Reducir el desorden de navegación

Es tanto el volumen de información que el diseñador debe emplear métodos variados para
reducir la confusión, métodos como:

Agregar (unidad que representa una colección de otras más pequeñas, lo que es sencillo
dentro de un sitio, pero complicado cuando se trata de categorizar sitios diversos)

Sumarización (formas de representar gran cantidad de información a través de otra más

pequeña)

Filtrado (eliminando la información no relevante, son especialmente útiles los filtros

colaborativos, aquellos en los que un colectivo decide qué información es la valiosa)

Truncado (dejar sólo la parte inicial de la información y dejar al usuario que la seleccione
para ver el resto)

Representaciones basadas en ejemplos (más de mil millones de datos)

Qué tan ancha debe ser la página

En términos de anchura lo mejor es crear páginas adaptables al ancho.

Si no es posible, es mejor asumir que muchos usuarios lo verán pantallas de 1024

píxeles, lo que deja en términos reales poco más de 800 píxeles.

Las páginas de entrada (intro) deben morir

Frente a quien dice que es una buena manera de arrancar y dar una bienvenida, lo cierto
es que los usuarios las saltan tan rápido como pueden.

Es mejor diseñar una página de inicio sencilla que unifique la información situacional con
la presentación de noticias útiles e información del directorio.

Página de inicio vs. páginas interiores

El elemento de diseño más importante de la página de inicio debería ser el nombre de la

compañía.

No tiene que ser necesariamente el más grande, pero al menos debe estar en la esquina
superior izquierda de la pantalla.
Esta información debería repetirse en todos los lugares interiores, especialmente porque
desconocemos el punto de entrada del usuario.

Las páginas interiores deben centrarse en los contenidos y dejar las bienvenidas para la
home page.

Para facilitar este acceso y reubicar al usuario, coloca siempre un enlace directo a la
página de inicio.

Cuanto más famoso sea tu sitio, menor debe ser el área dedicada a identificarse, ya te
conocen.

Frente a quien prefiere forzar la entrada por la página de inicio, debe prevalecer la idea de
satisfacer al usuario proporcionando puntos de entrada más cercanos a sus intereses.

El reto del espacio en pantalla

Cuando diseñe una página para impresión, se toma en cuenta el tamaño físico del
documento final.

Se emplea un texto mucho más grande en un cartel que en una tarjeta de visita, por
ejemplo. Pero en el mundo de la Web este sistema se rompe porque los usuarios pueden
configurar sus monitores en todo tipo de dimensiones distintas.

Estos detalles afectan a la cantidad de espacio de pantalla con el que las páginas tienen
que trabajar.

Cuanto mayor es la resolución y más grande la ventana de navegación, más contenido

cabe en la pantalla. Esto presenta un dilema:

¿Cómo nos aseguramos de que las páginas tienen el mejor aspecto si no sabemos la
configuración de pantalla del visitante?
Los diseñadores Web utilizan dos estrategias de diseño para tratar estas cuestiones:

Buscar la flexibilidad con tamaños proporcionales: Con ellos el diseño se expande o

contrae para adaptarse al espacio disponible en la ventana del navegador. Por ejemplo, si
crea una página Web en tamaño proporcional con una barra de menús y un área de
contenido variable, la primera siempre permanecerá en el mismo ancho, mientras que el
segundo aumenta o disminuye para acomodarse a la ventana del navegador, sin importar
lo grande o pequeña que sea. Si tiene dudas, el tamaño proporcional es la mejor opción
porque garantiza que las páginas Web se ajustarán a cualquier dimensión. No obstante,
puede imponer un diseño máximo o mínimo para evitar que se alteren en exceso.

Seleccionar un tamaño fijo razonable: En ocasiones, demasiada flexibilidad causa sus

propios problemas. Por ejemplo, si reduce una página con tamaño proporcional a
dimensiones extremadamente pequeñas, algunos elementos pueden agolparse en
posiciones extrañas. Si tiene un diseño complejo con mucho gráficos y elementos
flotantes, el resultado puede ser un lío. Por otro lado, las ventanas demasiado grandes
pueden producir otros inconvenientes. Piense que si estira una página de tamaño
proporcional para que llene el ancho de un monitor de pantalla grande, tal vez resulte en
líneas de texto extremadamente largas que son difíciles de leer. La solución es la
implementación de páginas de ancho fijo que se vean bien en cualquier tamaño de
monitor.

El tamaño de ancho fijo es el enfoque más habitual.

Si opta por la solución de ancho fijo, deberá saber cuál utilizar.

Por supuesto, no hay manera de conocer el factor del visitante. Las últimas esta
estadísticas revelan que un 20% de los usuarios usan pantallas de 1024 píxeles de
ancho, tanto con monitores antiguos como con nerbooks o iPad.

Evidentemente, como diseñador Web debe satisfacer a la minoría, por lo que un diseño
de ancho fijo tendrá un magnífico aspecto con un diámetro de unos 1,000 píxeles.

De este modo, los usuarios Web con dispositivos de pantalla reducida podrán disfrutar del
contenido de sus páginas, siempre que aumente la ventana del navegador para que
ocupe toda la pantalla.
Entender la resolución

Un píxel es la menor unidad de medida de un monitor, también conocida como punto.

Una resolución de 1024x768 significa que se muestra una cuadrícula que tiene 1024
píxeles de ancho y 768 de alto (con un total de 786,432).

La resolución menor que puede encontrar actualmente (sin contar los teléfonos móviles)
es 1024x600, el tamaño de una pantalla típica de un netbook.

Recuerde: las personas con monitores grandes no necesariamente configuran la ventana

del navegador para que llene la pantalla.

Después de todo, es difícil leer largas líneas de texto. Por esa razón 1,000 píxeles es una
buena suposición para el ancho medio de una ventaja de navegador.

Plantillas de estilo

El estándar CSS es una de las mayores esperanzas de recuperar la separación entre la

presentación y el contenido.

Es importante usar un único estilo para el sitio, incluso cuando se personalice por áreas
de contenido, ya que da coherencia y unidad al sitio.

Asegurar el funcionamiento de las plantillas

Debe tenerse en cuenta:

No usar más de 2 fonts (fuentes) y un tercero para cuestiones específicas (referencias,

citas textuales, etc.)

No usar tamaños de letra absolutos

No usar el atributo !important, que deshabilita las preferencias del usuario. Respeta sus
decisiones.
Si existen varias plantillas usa siempre los mismos nombres para las clases.

FRAMES

Se recomienda lo siguiente con respecto a los frames: Siempre decir NO.

El concepto original de la web (Tim Berners-Lee) fue la unidad total de distintos conceptos
en una sola línea, la página.

La página web representa:

La visión de la información en pantalla

La unidad de navegación

Una dirección accesible (URL)

Un elemento a almacenar en el servidor

Un elemento a editar por el autor

Con base a esto, el uso de frames debería restringirse porque:

Rompe el modelo único

Difumina el concepto de URL única

Distorsiona la mecánica de los links, favoritos, navegación hacia atrás...

Dificulta la visión en pantallas pequeñas

Plantea problemas a la hora de imprimir con algunos navegadores

Es más complicado para los autores

Produce efectos no deseados en algunos buscadores

Muchos sitios que ofrecen alternativas con y sin frames constatan que muchos usuarios
prefieren la navegación sin frames.
Pueden, sin embargo usarse en determinadas condiciones, siempre que tengamos en
cuenta lo anterior.

Imprimiendo

Se imprimen páginas porque:

Se está acostumbrado o resulta más cómodo leer de papel que de la pantalla.

Se evita perder la información si la página se mueve o desaparece

Los usuarios gustan ordenar su información en carpetas

Es un buen método para pasar la información a otros

No siempre se imprime bien lo que se ve bien. Por ello, es mejor hacer dos versiones de
los documentos, una para ver y otra para imprimir, pero nunca dejes información sólo
disponible a través de la impresora.

Hoy en día en los navegadores es posible incluir en el <head> (cabecera) de la página un

enlace para la versión imprimible (<link rel="alternate" media="print" href="estilo-
impresion.css" type="text/css" />)

Conclusión

La simplicidad debería ser la meta del diseño de páginas.

El usuario accede a la red buscando algo, no disfruta viendo el diseño.

Las páginas deben hacerse para que funcionen:

Con distintos tipos de tecnologías

En distintos monitores y plataformas

Accesible para cualquier tipo de usuario

La revisión del estado del arte de la Web así como de su posicionamiento en Internet
constituye un buen punto de partida para la aplicación de técnicas que aumenten la
visibilidad de los portales Web.

El estudio de los elementos generales de la Web permite lograr un mayor entendimiento

de estos temas y aplicar nuevas ideas en su desarrollo.

Con la investigación acerca de los estándares y pautas más comunes para el diseño de
sitios Web permite tener en cuenta los últimos elementos existentes y estar a la medida
de las últimas tecnologías para su implementación y su diseño.

Los conocimientos adquiridos sobre los navegadores Web facilitan la creación de páginas
que sean atractivas a los usuarios, independientemente de cuál estén utilizando o del
sistema operativo instalado, logrando que se comporten de igual manera en todos los
casos.

Para alcanzar un buen diseño Web para Internet debe considerarse:

La claridad en el objetivo del sitio

Existencia de la información básica correspondiente al contenido

Seleccionar un nombre de dominio correcto.

Seleccionar la tecnología para el diseño, la programación y un alojamiento web adecuado

Realización de un diseño en función de los requerimientos del sitio y de los usuarios.

Los motores de búsqueda y directorios de Internet

La optimización para los motores de búsqueda.

Con la revisión de todos estos factores se considera que para lograr un correcto
posicionamiento en Internet y una buena visibilidad es necesario tener en cuenta desde el
inicio de la creación de la Web.

Fuente Digital https://disenowebakus.net/diseno-de-un-sitio-web.php