DISEÑO WEBPOR LUIS SALINAS

DISEÑO

• El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web. No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y vídeo. Se lo considera dentro del diseño multimedia.

 • 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.

ETAPAS

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 boceto o pre diseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.

ESTRUCTURA BÁSICA DE UNA PAGINA WEB EN

HTML5

• 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 inicial 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.É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.

REGLAS DE DISEÑO

• Aunque el diseño de un sitio web debe ser INTACHABLE, no es lo único que vende. Las que venden son las ideas, y estas se hallan generalmente detrás de las palabras. 

Por esta razón, además de un diseño impecable desde el punto de vista de la imagen, es necesario tener en cuenta otros aspectos fundamentales para crear un sitio web efectivo: su facilidad de uso o “navegabilidad”, la efectividad del texto en la página de inicio, la estructura del sitio, y las herramientas que ofrece.

1. LA FACILIDAD DE USO• La página de inicio debe ser la mejor. si esta no atrapa al

visitante jamás pasará a las siguientes. se deben incluir todos los beneficios en ella, con enlaces a sub páginas en los que se desarrollan más detalladamente.• Cómo comunicarse con la empresa y cómo comprar debe

indicarse en todas las páginas del sitio.• Escribir párrafos cortos, utilizando verbos activos y con cierta

carga emocional. no es conveniente compensar la falta de inventiva literaria con un exceso de gráficos, fotos, etc. además de que el mensaje se desvirtúa aumenta innecesariamente el tiempo de descarga y eso va en contra de la cantidad de visitas al sitio: muchos usuarios no tiene ni tiempo ni paciencia para esperar la descarga de los gráficos y se van.

2. LA ESTRUCTURA

• Todas las páginas deben seguir el mismo estilo estético.• Los encabezamientos deben comunicar la idea general de la página.• Toda página debe tener un enlace a la página de contacto y a la de

ventas.• El tamaño del contenido para pantallas de 1024x768 pixeles (las más

estándar), la medida en pixeles es: 955px de ancho por 610px de alto. de esta manera no obtendrás barras de desplazamiento. obviamente el alto puede varias según contenido

3. LA IMAGEN

• Los sitios vendedores nunca se ven como sitios personales o de aficionados.• El logotipo de la empresa es

fundamental.

ESTRUCTURA DE UNA PAGINA WEB CON HTML5

• Con la evolución a HTML5, han aparecido varias etiquetas nuevas para especificar más la estructura de la web. Las metatags del HTML 5 también cambia respecto a las anteriores metatags, ahora son más cortas.La declaración del DocType es <!DOCTYPE html>.La declaración del charset es < meta charset=”utf-8″> (para poner un ejemplo)• Para ir directamente al grano, muestro una plantilla de como usar las

esta etiquetas para la estructura web.

RESUMEN DE ETIQUETAS

• Header: es el encabezamiento de la página o de la sección.• Footer: es el pie de página o de la sección• section: es la sección dentro de una página web.• Article: contenido, contenido y más contenido.• aside: Cosas varias, ejemplo, todo aquello que se pone en los blogs en la barra

derecha, como nuve de tags, los más descargados, visitenos en Twitter, FB, etc.• Nav: la navegación de la web.Todas estas etiquetas van dentro de la etiqueta <body></body>.

En resumen, tenemos más etiquetas para que los buscadores interpreten mejor la información que hay en la web y para que los diseñadores entiendan con menos código HTML la estructura de la página. Y con esto recordar que los IE no son muy compatibles con el estándar del HTML5, tendremos que esperar al IE9.

SIMETRÍA

• El diseño simétrico sugiere estabilidad, equilibrio, resultando estético, ordenado, atractivo y agradable de contemplar. Por el contrario, el asimétrico muestra irregularidad, desigualdad en las formas y desequilibrio. 

Hay que tener en cuenta que la simetría usada no debe de ser del todo exacta, ya que la simetría perfecta no es natural, es demasiado "perfecta", valga la redundancia, haciendo aparecer las composiciones artificiales y premeditadas. Pequeñas variaciones en la distribución simétrica dan ese toque de ruptura que hace su contemplación más amena y natural. 

•En el caso de una página web, la concepción simétrica de la misma comienza con el reticulado elegido, ya que va a ser el que defina la distribución básica de elementos en ella. Hay que tender entonces a diseñar un reticulado lo más simétrico posible.

Ejemplos claro de esta regla son la creación de formularios y de fichas. Se construyen generalmente apoyándose en una tabla maquetadora, por lo que deberemos buscar la simetría en esta tabla, aunque luego, debido a las diferentes longitudes y naturaleza de los campos, el resultado final "parezca" no serlo.

ASPECTOS TÉCNICOS Y ESTÉTICOS DEL CONTENIDO DE UNA PAGINA WEB• Resulta deseable que los espacios Web presenten entornos originales, y que

utilicen las crecientes potencialidades del ordenador y de las tecnologías multimedia e hipertexto, dichas tecnología usada con fines didácticos debe atender a diversos aspectos como son los que se consideran a continuación.• La página principal será la base por la que fluirá la información, por ello, debe

presentarse de forma ordenada. En ella tendrá que aparecer la estructura de contenidos o apartados que se desarrollen a través de los hipervínculos establecidos con las páginas que complementen la información inicial. La pantalla de un ordenador es un soporte de espacio limitado para la lectura, por esta razón hay que procurar que las páginas no sean excesivamente largas.

LAS IMÁGENES• No deben aparecer únicamente como elementos decorativos,

sino que deben complementar la información que aporta el texto. No es conveniente cambiar las imágenes de la Web con demasiada frecuencia, pues, además de dar identidad a la página, acelera el proceso de navegación.

FORMATOS DE IMAGEN SOPORTADO POR LOS NAVEGADORES DE

INTERNET• GIF (Graphic Image File Format).

Es el formato más adecuado para aquellas imágenes sencillas, de formas simples y en las que no existe un elevado número de colores.

• JPEG (Joint Photographic Experts Group).

 

• Fue diseñado para la compresión de imágenes fotográficas, basándose en el hecho de que el ojo humano no es perfecto y no es capaz de captar toda la información que se puede almacenar en una imagen de 24 bits.

Por regla general, es el más indicado para aquellas imágenes que son fotografías.

 

• PNG (Portable Network Graphics).

Proporciona un formato compresión de imágenes sin pérdida.

 

• El más adecuado para imágenes de elementos renderizados, ya que se logran unos degradados muy suaves y una buena definición de las líneas.

EL TEXTO

• El texto es muy importante ya que le ayuda al usuario captar y percibir la información. Es necesario que los textos estén organizados en párrafos cortos. No obstante, se debe procurar no romper abruptamente los párrafos, ni interrumpir la continuidad de las ideas que se exponen en ellos. Los distintos colores y diferentes tipos de letras aportan información por sí mismos, ya que pueden servir para diferenciar los títulos de otros tipos de enunciados o distinguir los menús de navegación del texto de las páginas.

VIDEOS

• Un sitio web que se precie de ser novedoso debe integrar necesariamente vídeo. La integración de un archivo de vídeo en la web se traduce también en más clics y en más visitas. Para lograr la máxima efectividad, es recomendable asignar una página a cada vídeo y que en dicha página haya también contenido de texto.

EL SONIDO

• Las normas básicas que consideramos importantes para usar sonido en una página son: · Dejar que el usuario elija si desea o no escuchar el sonido, especialmente cuando éste no sea relevante para la información que mostramos. Para ello, debe aparecer un enlace para activarlo y desactivarlo.· Los botones de enlace deben ser los de uso más frecuente para el usuario.· El usuario debe estar informado antes de descargar un archivo de audio de las características de éste, tales como tamaño, tipo de conexión a Internet