Diseño Web

PRODUCCIÓN GRAFICA
I.T. Diseño Industrial

Por José Pablo Suárez-2004

Universidad de Las Palmas de Gran Canaria
 Objetivos
 Objetivo 1: construir una jerarquía de
menús y páginas que parezcan
naturales y bien estructuradas al
usuario.
 Principio
 Unbuen diseño gráfico busca siempre
el equilibrio óptimo entre la
sensación visual y la información
textual o gráfica.
 INTEGRIDAD DEL DISEÑO EN
WWW
 Consistencia y predicción son dos
atributos esenciales de cualquier
sistema de información, ayudando a
los usuarios a identificar el origen y
relación de las páginas en el World
Wide Web
 Notas para el Diseño Web
 Lo primero que se debe de plantear una persona que pretende
diseñar una página, son las necesidades o metas que desea
cubrir por medio de la página.
 Es importante que entre el diseño de la página y el mensaje o
información que desea transmitir al público, exista coherencia,
además de que se debe de tener bien definida la imagen que
se desea tener ante los navegantes de la web.
 Se debe pensar es la clase de audiencia a la que se desea
llegar, por ejemplo, si se quiere captar la atención del publico
joven, resultaría poco eficaz mantener una imagen demasiado
sobria, pero si desea un publico mayor, tampoco seria muy
conveniente una imagen extravagante.
 Es muy importante que, sino es totalmente necesario, no se
utilicen todas las herramientas para el diseño, ya que esto en
lugar de ayudarnos a captar atención, hace que la página sea
muy pesada, y a la hora de que alguien desea entrar a ella se
aburrirá de tanto esperar a que baje la misma.
 Y en cuanto a colores se refiere, es importante recordar que en
entre mas discretos sean los colores mejor, y nunca se debe de
sobresaturar una página con color.
 Notas para el Diseño Web
 Antes de estructurar las ideas se debe pensar en los
requisitos de los clientes de la web.
 Las personas que por primera vez entran en una
web, no saben lo que les ofreces, ni entienden como
has estructurado la navegabilidad de tu web.
 Estos usuarios normalmente otorgan 15 segundos
para que ellos puedan entender lo que les ofreces y
tienes para ellos. La exposición de tu sitio deberá de
ser ante todo comprensible y entendido.
 Debes de hacer fácil el sitio para utilizarlo como
recurso, como un software útil que resuelve tu
dudas.
 No se deber mantener la información muy lejos
demás de dos clic.
 INTERACCIÓN EN LOS SITIOS DE WEB
 Interacción, permite la seguridad y
confianza al usuairio. De que no es
difícil extraer la información. Se le
llama poder de convencimiento.
 La facilidad de interacción hace que
aumente la experiencia y aprendizaje
de los usuarios, se debe hacer que
ellos tomen el control
 MERCADOTECNIA DE VALOR
AÑADIDO DE LOS SITIOS WEB
 Los usuarios disponen de poco tiempo, hay que
agradecerles que dediquen de su tiempo a tu web.
Ofreciendoles variedad de documentales de Internet
que puedan servirles, agradarles y claro interesarles
que aprovechen de algo gratuito y constructivo.
 Si vendes software, hay que mostrar lo que puedes
hacer , que prueben el equipo, dales ejemplos
claros que puedan convencerlos con una evaluación
electrónica de sus necesidades.
 Si tus clientes encuentran información importante
en tu web, la convertirán en referencia.
 La personalización de la mercadotecnia uno por uno,
es de las mejores maneras de convencer la gente
que vaya a tu web.
 DISEÑO DE PAGINAS

Texto, Diseño
figuras y cuidado y
gráficos se organizado de
entremezcla las páginas en
en de forma un servidor
desafortuna ayudará a los
da en contra usuarios a
de una encontrar
mayor rápidamente
legibilidad y la información
utilidad que buscan
 Longitud de las páginas
 Determinar la longitud de páginas en el
WWW requiere buscar el equilibrio entre tres
factores:

1. La relación entre la página y el tamaño de

la pantalla
2. Las necesidades editoriales del contenido.
3. El diseño modular de la colección de
páginas WWW.
 Relación entre el tamaño

del documento y la pantalla
Numerosos estudios han
demostrado el efecto
desorientador de las pantallas
de ordenador desplazables
 La mayoría de quienes
accederán a sus páginas lo
harán en condiciones de
pantalla y ordenador inferior a
él.
 La largas páginas de WWW
requieren por parte del usuario
un esfuerzo por recordar mucha
más información de la que ve
en pantalla, olvidando
fácilmente el contexto en que
se enmarca la misma:
 Las necesidades editoriales del
contenido.
 Si necesitamos procurar tanto un buen acceso en línea como
cierta facilidad de impresión o salvado:

 a. Divida la páginas en partes (cada parte correspondería a

un par o tres páginas impresas) que mantengan cierta
coherencia en su contenido incluyendo gráficos y figuras.
Use las facilidades del hipertexto (flechas, botones, parte
1...) para hacer llamadas de una a otra.
 b. Procure un link a un archivo externo que contenga todo
el texto completo en una sola página, diseñado para que el
usuario pueda leerlo completo, imprimirlo o salvarlo en un
solo proceso. No olvide incluir el URL de la hoja en el texto
para que los usuarios puedan acceder a las actualizaciones
de la página citada.
 El diseño Modular de colecciones
de documentos
 Una de las ventajas de los documentos on-line es la facilidad
con que pueden ponerse al día y actualizarse.

 En un sistema modular bien diseñado la actualización de

grandes materias se puede realizar sin necesidad de cambiar
todos los documentos o grandes secciones del servidor.

 Reemplazando las secciones caducadas por unas nuevas

puestas al día se mantiene la integridad de la obra y lo que
es más importante: su actualidad.

 Al menos, cada página en el WWW debe poseer un enlace

con la página principal o "home page", o si no, uno a algún
submenú. Lo mas recomendable es poner en el pie de todas
las páginas un icono (o texto) que enlace con la página
principal, y otro con el submenú que jerárquicamente esté
por encima del documento.
Documentos Muertos
 Encabezamientos de
documentos
 La correcta titulación de un documento WWW permite al lector
conocer de forma inmediata la materia principal de la que trata el
mismo, e incluso (si la hay) la relación con otras paginas. La
utilización de gráficos en las cabeceras pueden indicar también la
relación entre diferentes páginas del WWW.
 Como mínimo una cabecera de WWW debe contener un título
destacado cercano a la parte superior de la página.
 Botones como este manual que permiten al lector moverse hacia
delante y atrás en una serie de páginas
 Tipografía
 Una buena tipografía depende del contraste entre
una fuente y otra, así como entre la caja de texto y
el espacio en blanco que lo rodea. Nada atrae más
al ojo y al cerebro que los fuertes contrastes, lo que
sólo se consigue con un cuidadoso diseño de las
páginas.
 Ls pies de página: Validar el origen
y el autor
 Origen del documento
 Autor o autoridad responsable del mismo

 Contacto con la persona o sección para más

información
 Copyright o derechos de autor de la página

 Fecha de creación o última actualizacióny

fecha de caducidad del documento
 Otros links a la página principal de la
institucion, etc..
 Información imprescindible
 Información de contacto.
 Dirección de correo y teléfono.

 Copyright

 Fechas de página
 URL
 Todaslas páginas en sistemas World
Wide Web poseen un único "Uniform
Resource Locator" (URL) que funciona
como la dirección "Internet" de la
página.
 La etiqueta <META>
 Permite que robots de búsqueda
encuentre nuestra pagina y la indexe
en los buscadores mas conocidos:
 <META name="description" content="Aquí va la descripcion general de la pagina">

 <META name="keywords" content="Palabras clave separadas por comas">

 Dominios y su registro
DX GUIA DE DISENO WEB - diseño eXperimental http://www.dx.com.mx/
 Los dominios son une manera sencilla de identificar ordenadores en Internet,
están conformados por un nombre y terminación, la cual indica la procedencia
o el ramo al que pertenecen.
 Existen diversas terminaciones de dominio o dominios de primer nivel: .org,
.com, .es, .mx, etcétera; e indican el grupo al que pertenecen. Los principales
grupos son genéricos y territoriales.
 Dominios GENERICOS:

– com.- Para empresas o cualquier página con carácter comercial.

– org.- A organizaciones, asociaciones etc.
– gov.- Para páginas del gobierno de los Estados Unidos.
– .net.- De proveedores de servicios.
– .mil.- Instituciones militares de Estados Unidos.
– .edu.- Instituciones que tengan relación con la educación.
– .int.- Pertenece a la Unión Internacional de Telecomunicaciones, y va dirigida a los
Organismos creados en acuerdos internacionales.

 Dominios TERRITORIALES:
Son otorgados a personas o empresas relacionadas con un país determinado, e
indican el origen de la página y son señalados con respecto al país.
 Dominios y su registro
 NIC es el organismo que se encarga de la regularización del
registro de dominios a nivel mundial, y ella indica el uso de
cada dominio y autoriza el registro y el registrador de un
dominio.

 El registro de un dominio se puede hacer a través de alguna de

las diversas empresas que, a nivel mundial se encargan de
realizar este trabajo y cuestan entre 6 y 35 dólares por año.

 Para el registro de un dominio territorial, se tiene que hacer

con el NIC del país de procedencia de la página, quien es el
encargado de indicarnos como realizar esta labor y también
llevan el registro de este tipo de dominios.

 En la actualidad, además de ser riesgoso, es muy difícil

conseguir un dominio de forma gratuita, ya que existen muy
pocas empresas que ofrezcan este servicio sin ningún costo, y
la gran mayoría de las que lo hacen reserva para si los
derechos del dominio.
 Alojamiento Web
 Cuando se quiere publicar una página en Internet, se debe colocar
en algún servidor, que son ordenadores conectados a la red, y
envían la página cuando un explorador la pide.
 Existen dos tipos diferentes de servidores, servidores gratuitos y
servidores de pago. Estos últimos nos ofrecen mayores recursos y
prestaciones que los servidores gratuitos.
 Para poder encontrar el mejor alojamiento, es necesario plantearnos
los objetivos que deseamos conseguir, y las necesidades de nuestro
proyecto.
 Factores para elegir proveedor:

– La calidad del servicio, en cuanto a velocidad se refiere, esto no es algo

muy sencillo, ya que la forma mas rápida, fácil y cómoda seria
preguntando al mismo proveedor del servicio, pero, salta a la vista que
no es la manera mas confiable. Una opción sería navegar por el sitio de
la empresa en la que estemos buscando alojamiento, y darnos una idea
de que tan buena es la calidad del servicio que nos ofrecen.

– La transferencia que nos ofrece cada proveedor, es también un aspecto

muy importante, ya que al pasarnos del límite que se le ha asignado a
nuestro dominio, se nos cobrara una cantidad extra.
– Se debe hacer una comparación de precio, con base en la calidad de cada servidor
en el que estemos interesados.
 Registro en las Buscadores
 Un de las maneras mas efectivas para conseguir que una
página web sea visitada, es registrándola en uno de los tantos
buscadores que existan en la red.
 Para esto, se tiene que llenar un formulario, el cuál es ofrecido
por el buscador al que uno se desea inscribir, pero
generalmente son iguales, o tienen bastante similitud entre si.

 Procedimientos básicos para el registro en cualquier buscador:

– *Índices.- Cada buscador tiene diversas categorías en las que

clasifica las páginas dependiendo de su contenido, se navega a la
categoría a la que se va a añadir, y se busca nueva dirección, o
algo similar, y después aparecerá el formulario.
– *Motores de búsqueda,- Son lo buscadores que no tienen un
índice, y que mantiene una búsqueda constante de las nuevas
páginas, para así incluirlas en su buscador.

Herramientas de miltiregistro: Para registrarse en distintos

buscadores a la vez.
 Consejos en el Diseño Web
 Para que un sitio web resulte atractivo para nuestro publico potencial,
existen algunos tips que se deben seguir, y que resultaran de gran
utilidad en la búsqueda de nuestro objetivo, cualquiera que este sea.

 1: Se deben de plantear metas, por que lógicamente, no podemos

conseguir un objetivo, si este no se tiene en mente.
 2: La simplicidad en nuestro diseño es fundamental, nunca se debe
de ir uno al extremo de la extravagancia, debe existir mucha
sobriedad en nuestro diseño.
 3: Una cosa muy importante es la comunicación entre usted y las
personas relacionadas con su profesión, es básica, de esta forma se
puedan intercambiar ideas de gran utilidad para todos.
 4: La velocidad es una cosa importantísima a la hora de atraer al
usuario, recuerde que ese tiempo que tarda en bajar su página es en
que puede convencer o no al publico de permanecer ahí, si tarda
demasiado, lo mas seguro es que el usuario se vaya.
 5: En cuanto a los textos contenidos en su página, se debe tomar en
cuenta que lo que resulta entretenido o interesante para nosotros,
puede no serlo para la mayoría de las personas. Tampoco se debe de
llenar toda la página con letras y más letras, pues esto resulta,
generalmente muy aburrido para el público.
 Consejos en el Diseño Web
 6: Las formas lineales, color plano, resultan de lo más eficaces
para la Web, pues son mucho más fáciles de cargar que las
imágenes y los efectos, además de ser más discretos.
 7: Se debe aprender a separar gráficos y textos, se debe de
recordar que estos dos jamás deben de mezclarse, nunca
intente insertar texto en gráficos.
 8: Dedicar el tiempo libre para la búsqueda y conocimiento de
las nuevas tecnologías, es de lo más eficaz para mantenerse
siempre en el gusto del público.
 9: Se debe aprender a ver sus diseños desde la perspectiva del
usuario, así se podrán cubrir sus necesidades y demandas mas
fácilmente.
 10: También se debe a prender a ver el diseño desde otros
ángulos del mismo, es decir, no específicamente desde el
diseño web, sino, por ejemplo desde la perspectiva de un
arquitecto.
 11: Acompañar el trabajo con música, puede resultar
placentero, relajante y de mucha efectividad.