Diseño web y jerarquía de contenidos

 La unión de un buen diseño con una jerarquía bien
elaborada de contenidos aumenta la eficiencia de
la web como canal de comunicación e intercambio
de datos, que brinda posibilidades como el
contacto directo entre el productor y el consumidor
de contenidos, característica destacable del medio.
 El diseño web ha visto amplia aplicación en los
sectores comerciales de Internet especialmente en
la Word Wide Web. Asimismo, a menudo la web se
utiliza como medio de expresión plástica en sí.
Artistas y creadores hacen de las páginas en Internet
un medio más para ofrecer sus producciones y
utilizarlas como un canal más de difusión de su obra

 El diseño de páginas web trata básicamente de
realizar un documento con información híper
enlazado con otros documentos y asignarle una
presentación para diferentes dispositivos de salida
(en una pantalla de computador, en papel, en un
teléfono móvil, etc.).
 Estos documentos o páginas web pueden ser
creadas:
 creando archivos de texto en HTML, PHP, Asp, Aspx,
JavaScript, JSP, Python, Ruby.
 utilizando un programa WYSIWYG o WYSIWYM de
creación de páginas.
 utilizando lenguajes de programación del lado
servidor para generar la página web.

 Para el diseño de páginas web debemos tener en cuenta tres etapas:
 La primera, es el diseño visual de la información que se desea editar. En esta etapa se
trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros
objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar
sobre el computador se realice un bosquejo o prediseño sobre el papel. Esto facilitará
tener un orden claro sobre el diseño.
 La segunda, es la estructura y relación jerárquica de las páginas del sitio web, una vez
que se tiene este boceto se pasa a 'escribir' la página web. Para esto, y
fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje
de marcación de hipertexto o HTML. Los enlaces que aparecen subrayados en este
documento y otros de Wikipedia son ejemplos de hipertexto, puesto que al pulsar sobre
ellos conducen a otras páginas con información relacionada. La importancia de la
estructura y arborescencia web radica en que los visitantes no siempre entran por la
página principal o incial y en ese caso el sitio debe darle la respuesta a lo que busca
rápido, además permitirle navegar por el sitio.
 La tercera, etapa consiste en el posicionamiento en buscadores o SEO. Ésta consiste en
optimizar la estructura del contenido para mejorar la posición en que aparece la
página en determinada búsqueda. Etapa no gustosa por los diseñadores gráficos,
porque a diferencia del texto, aún para el año 2012 no se pueden tener nuevos
resultados en los buscadores con sitios muy gráficos.

 Características de diseño web

 Simplicidad
El diseño es más simple que nunca, ya que 2.0 significa limpieza y simplicidad.
 Diseño centrado
La gran mayoría de las páginas web están utilizando un diseño centrado en la ventana del navegador,
ya que ofrece una sensación de simplicidad y “honestidad”
 Pocas columnas
Cuantas menos columnas aparezcan en la página, el diseño de la web será mucho más sencillo, y
mostrará con mayor claridad los contenidos; dos columnas es el ideal aunque deberíamos evitar más de
tres columnas.
 Sección superior separada
En la sección superior o cabecera, generalmente aparece el logotipo y el área de navegación; es
importante que se diferencie la cabecera del resto de la página para poder centrar la atención en lo
que es realmente importante.
 Navegación sencilla
Utilizar un menú permanente de navegación, facilitará a los usuarios el acceso a tus contenidos, aunque
en algunas ocasiones deba ser necesario utilizar un submenú que permita acceder a secciones internas
de la página. El menú debe ser claro, obvio y destacado.
 Logotipos en negrita
Un logotipo claro, en negrita, permitirá que en una primera impresión los usuarios presten atención.
 Tamaño de texto grande
Si eliminamos los elementos “sobrantes” de la página, dispondremos de mayor espacio para poder
incrementar el tamaño de la letra, facilitando que los usuarios puedan leer y asimilar nuestro contenido.
 Instrucciones de texto en negrita
Destacar la introducción de la página o las instrucciones en negrita, nos permitirá recalcar la
importancia de este contenido por delante del resto, permitiendo atraer la atención del usuario.

 Diseño web 2.0 y maquetación según estándares W3C. XHTML 1.0 transicional + CSS2.
 Diseño web 2.0 y maquetación XHTML+CSS accesible para el portal comercial y
corporativo de la promotora BIGECO
 Diseño web y desarrollo web
 Diseño web 2.0 y maquetación según estándares W3C. XHTML 1.0 transitional + CSS2.
 DISEÑO

 El diseño web contiene un amplio abanico de posibilidades, lo que lleva a una amplia
variedad de tipos de diseño web. A continuación veremos algunos de estos tipos de
diseño y su público objetivo.

Diseño web avanzado
 Es el tipo de diseño web orientado a profesionales, aquellos que quieren contar con las
nuevas tecnologías en el diseño de sus páginas web. El diseño web avanzado es
demandado principalmente por empresas tecnológicas o clientes relacionados con el
mundo audiovisual.

Diseño web clásico
 Es el diseño web tradicional, utilizando los elementos básicos: texto e imágenes. Este
diseño web prescinde de elementos como flash, video streaming o cualquier
tecnología avanzada.

Diseño web industrial
 El diseño web industrial se encarga de las páginas web para industrias, presentando
unas webs corporativas cuyo objetivo es representar la imagen de la empresa.

El primer diseño web de una página se realiza en 1993, la página web
tenía el nombre Mosaico, y en menos de un año había recibido 2
millones de visitantes. El navegador web era capaz de mostrar tanto
imágenes como textos, aunque con una limitación muy alta a la hora
de diagramar la información de la página web. El diseño web de estas
páginas era lineal y estaba orientado para científicos que eran los
usuarios que compartían su información alrededor de todo el mundo
mediante estas páginas web. La tecnología de los navegadores web
era limitada y no disponía de la capacidad de transmitir información
grafica para la comunicación visual.

El diseño web de esta generación está basado en los
conceptos de la primera salvo por que empieza a
utilizar iconos en lugar de algunas palabras, las páginas
web comienzan a poseer imágenes de fondo, aparece
el diseño y uso de botones con relieve para la
navegabilidad, el uso de banners en lugar de
cabeceras, la estructuración de texto de forma
jerárquica mediante menús o listados, propiedades del
código HTML Standard definido.

 En la tercera generación, el diseño web sigue teniendo muchas
restricciones con el uso del lenguaje para los dos navegadores
web. El diseño web se orienta en esta generación a los
diseñadores, los cuales tienen mucho más dinamismo al
aparecer el plumín de Macromedia Flash, el cual revolucionaría
la concepción de diseño web.
 Es una era de enfocar las páginas web según el objetivo de las
mismas: vender productos o servicios, comunidades,
información, noticias. Para esta especialización del diseño web
de acuerdo al objetivo de las páginas se necesita ayudar al
usuario a encontrar la información, generando una
navegabilidad estructurada e intuitiva.
 La gran mayoría de páginas web que aparecen en esta
generación son de publicidad y venta de productos y servicios,
con lo que es este el diseño más utilizado. Conseguir acercarles
al producto, que deseen ver más páginas del sitio web.

En la cuarta generación, el diseño web ya está
enfocado totalmente a la multimedia,
integrando en las páginas web los elementos
multimedia de última generación. Con usuarios
de todos los tipos, cualquiera tiene una página
web a día de hoy y la variedad de diseño es
enorme debido a todas las posibilidades que
ofrecen las últimas tecnologías para los
programadores. A esto le podemos añadir que
las últimas versiones de los navegadores soportan
muchas más prestaciones y elementos en las
páginas web.

Se podría añadir una última generación de diseño web que
representaría el auge de las páginas de televisión ip o televisión
online. La integración de televisión en la web para empresas,
ayuntamientos o asociaciones representa el movimiento más
notable del diseño web en la actualidad. Un ejemplo de empresas
de diseño que ya ofrecen la posibilidad de integración de televisión
en web es Hooping.net mediante su plataforma de televisión IP
Hooping.tv.

El diseño web es un proceso elaborado
que está formado por varias fases.
Cuanto más grande es el proyecto,
más fases puede tener. A continuación
hablaremos de las fases básicas del
diseño web, aquellas con las que
cuentan todos los proyectos.

 Mientras los productos comerciales obedecen a las leyes del
mercado, que en parte están influenciadas por los recurso si
el usuario quiere algo, lo va a obtener, o crearlo.

La mayoría de nosotros está de
acuerdo en que los sitios de hoy siguen
siendo difíciles de usar. Están llenos de
información irrelevante, y
funcionalidades confusas. Si abres un
sitio web informativo de estos tiempos,
serás bombardeado con
funcionalidades y publicidad. Muchos
sitios quieren hacer demasiado, en
poco tiempo.

Todavía son pocos los dueños de sitios web que tienen en
claro un modelo de negocios o un plan. Muchos sitios se
ponen a sí mismos a hacer dinero a través de publicidad
invasiva y una carga excesiva de funcionalidades de
escomers; esperando que mientras más ofrezcan, más
chances van a tener de conseguir una moneda.
Sitios exitosos como Google, Flickr, o Word of Warcraft
muestran lo contrario:

1 – Haz UNA cosa realmente bien.
2 – Simplifica!
3 – No confíes en publicidad al azar

 Los sitios son funcionalmente confusos porque no son lo
suficientemente delicados, al no ser diseñados con el cuidado
correspondiente. Mientras los sitios web necesitan ser más simples,
esa simplicidad no significa hacer las cosas de una manera
descuidada. Al contrario. La simplicidad se alcanza cuando alguien
se encarga de los de Miren Google por ejemplo. Se ve simple.
Como usuario no te ves afectado por la parte técnica que conlleva
hacer una búsqueda. La máquina se da cuenta por vos y te lo
muestra de una manera tan acabada, que no te haría pensar que
el diseños Más
 y más sitios funcionarán de esta manera simple, pero delicada a la
vez. No porque me guste, sino porque a TODOS nos gusta, cuando
los detalles han sido cuidados. Los diseñadores web necesitan ser
más cuidadosos.

 La razón más importante por las que -para el asombro de muchos
colegas- la TV sigue siendo un medio tan popular, es que ningún sitio
vence la velocidad del control remoto.
 Ningún diseño de interfaz puede igualar a la velocidad de pasar de
una página a la otra en papel. Lo mismo se puede decir de las radios.
Es más simple pasar de estación a estación con el dial de la radio,
antes que ponerte a preparar tu iPod. En términos de velocidad, las
interfaces tradicionales siguen siendo la vara de medida de los
diseñadores web.
 La gente comenzó a usar twitter y Facebook para enviar mensajes
directos en lugar del email, porque requiere menos manipulación física
para enviar un mensaje. Los diseñadores web del futuro se centrarán
menos en el diseño de la superficie, y más en hacer que los procesos
sean más rápidos al reducir la cantidad de interacciones físicas.
 La mejor manera de aprender de interfaces veloces es estudiar las que
usamos a diario, como: picaportes, cajones, botellas de shampoo. Los
diseñadores web necesitan aprender de los diseñadores de productos
tradicionales.

 Belleza
 Los diseñadores web se quejan a menudo de que no tienen suficiente libertad.
Esto no tiene sentido. Hay más que la suficiente libertad. Es más, hay demasiada
libertad. “Demasiado” es la razón por la que tantos sitios se ven y sienten tan
horribles.
 La Experiencia de Usuario está en la interfaz, no en la superficie. Fíjense en los
sitios móviles. A pesar de todo el hipé creado alrededor de lo móvil, los sitios
móviles no se ven lindos. Casi no tienen diseño “de superficie”. Y aun así, todos los
amamos. Principalmente, son el tamaño de la pantalla y la capacidad de
transferencia de nuestras redes inalámbricas lo que lleva a los diseñadores a
recortar todos los elementos ornamentales, y enfocarse pura y exclusivamente en
la interacción.
Desde el punto de vista de un diseñador web, esta es una muy sana práctica.
 En vez de perder muchísimo tiempo en los adornos y en discutir con el cliente si
verde o amarillo, si sheriffs

 o san serif, tenemos que centrarnos en lo que constituye a la interfaz. Estoy más
que seguro que el futuro del diseño web va a estar menos enfocado sobre el
estilo visual. Estoy seguro porque los sitios que les importa menos lo visual y más la
interacción, venden mejor. Y eso es lo que los dueños de los sitios quieren.

 La Experiencia de Usuario está en la interfaz, no en la superficie.
Fíjense en los sitios móviles. A pesar de todo el hipé creado
alrededor de lo móvil, los sitios móviles no se ven lindos. Casi no
tienen diseño “de superficie”. Y aun así, todos los amamos.
Principalmente, son el tamaño de la pantalla y la capacidad de
transferencia de nuestras redes inalámbricas lo que lleva a los
diseñadores a recortar todos los elementos ornamentales, y
enfocarse pura y exclusivamente en la interacción.
Desde el punto de vista de un diseñador web, esta es una muy
sana práctica.
 En vez de perder muchísimo tiempo en los adornos y en discutir
con el cliente si verde o amarillo, si sheriffs o san serif, tenemos
que centrarnos en lo que constituye a la interfaz. Estoy más que
seguro que el futuro del diseño web va a estar menos enfocado
sobre el estilo visual. Estoy seguro porque los sitios que les
importa menos lo visual y más la interacción, venden mejor. Y
eso es lo que los dueños de los sitios quieren.

Diseño web y jerarquía de contenidos

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Diseño web y jerarquía de contenidos

Similar a Diseño web y jerarquía de contenidos (20)

Diseño web y jerarquía de contenidos