Download diseño web - Luis Roberto Salinas

DISEÑO WEB
POR 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