Introduccion Diseno Web

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
Introducción al diseño web
Primeros pasos para aquellas personas que deseen crear su propia página web, desde el punto
de vista del diseñador. Motivación a seguir, programas a utilizar, etc.
Autores del manual
Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Gck
(6 capítulos)
César Martín
http://www.unosaficionados.com
(1 capítulo)
Serviweb
Diseño web Murcia
http://www.serviweb.es/
(1 capítulo)
Introducción al diseño web: http://www.desarrolloweb.com/manuales/33/
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
1

Prólogo a los primeros pasos en el diseño web
Consideraciones a tener en cuenta a la hora de diseñar una página web.
Hace unos días, durante una cena, mi padre me preguntó qué era exactamente eso de los chats, “o lo que quiera que la gente
hace cuando se escribe a través de Internet”. Es un hombre un tanto suspicaz ante las nuevas tecnologías, de manera que me
vi obligado a lidiar en tres frentes a la vez, añadiendo además el hecho de que la pregunta, planteada con intenciones
solapadas, sonó como un aldabonazo y me desconcertó unos segundos. Las tres líneas de ataque de las que hablo eran las
siguientes: una, la que me obligaba a describir de manera superficial las bases tecnológicas de los chats, ya que mi padre los
había comparado con sistemas de comunicación más convencionales, y yo debía establecer las distancias adecuadas. En
segundo lugar, le expliqué los elementos de la práctica, como por ejemplo la interfaz típica de un software de chat o las
funciones básicas: flujo de texto en tiempo real y transmisión de archivos, así como el modo en que los chats se organizan y
pueden ser disfrutados en diversas salas; se conoce que cosas muy elementales. En tercer lugar le sugerí la utilidad de los
chats, sus ventajas frente a otras formas de comunicación a distancia y le expliqué, de forma más general ya, que pese a su
postura, Internet constituye en gran medida el sistema sanguíneo del futuro, aunque en el mejor de los casos se trate arterias
de fibra de carbono... De ahí pasamos a conversar acerca de cuestiones mucho más diversas en torno a la Red, pero esto ya
no tenía importancia. Un tema u otro era un asunto de formas.
En realidad, yo no siento mucha atracción por los chats genéricos, y si acaso opto por aplicaciones de mensajería
instantánea. Pero aquella conversación me reveló algunas de las bases que, después, me ayudarían a responder a una usuaria
en cierto foro de diseño web. Su pregunta era: “Aunque no sé mucho de ordenadores, siempre estoy enganchada, y ahora
quiero hacer mi propia página web. ¿Por dónde empiezo?”
Desde luego eso era toda una declaración de intenciones y no existía, ni existe, una respuesta infalible. El desarrollo web es
un proceso creativo e íntimo, como lo es la navegación en Internet; ¿dónde voy si me conecto a la Red? Pues eso depende
de ti. Es más: lo probable es que muy pronto ya ni siquiera dejes que otros usuarios compartan y fisguen en tu historial. De
la misma manera, una vez que empezamos a diseñar, decidimos que nadie puede entrometerse en nuestra forma de trabajar.
¿Cierto?
Entonces, ¿quiere esto decir que no hay una especie de protocolo de principiantes? Oh, sí que hay un protocolo,
un camino de baldosas que todos solemos seguir para llegar a nuestro destino (naturalmente, el destino de cada
usuario es distinto, y mientras más diferente e ingenioso, mayor será el aprendizaje).
Artículo por Gck
Introducción al diseño web
Datos a tener en cuenta a la hora de empezar en el diseño web, pues la web es un canal de publicación
con características muy especiales.
Como en el caso de los chats, podemos considerar que existen tres directrices elementales que sirven de guías. Una de ellas
es el conocimiento tecnológico de Internet; estamos obligados a saber cómo funciona de manera general, desde las
conexiones de ordenador hasta el valor de los servidores, pasando por la arbitraria congestión de las líneas telefónicas y,
desde luego, considerando los diversos navegadores que hay en el mercado, además de prestar atención a la necesidad de
instruirnos, aunque sea un poco, en el lenguaje HTML. Es muy difícil tomarse en serio a alguien que no tiene constancia de
que, echando un vistazo al código fuente de una página, hallará etiquetas tan básicas como <head> y <body>. Estos
conocimientos técnicos nos informan de nuestras posibilidades creativas; no basta con crear una preciosa imagen y colgarla
en nuestra página principal, si no sabemos que dicha imagen podría tardar un minuto en cargarse... Y a día de hoy ésa sí es
una verdad infalible.
En segundo lugar, estamos obligados a saber trabajar. No es más difícil que eso; si trabajas en modo código, debes dominar
el HTML y, mejor aún, el HTML y otros lenguajes de uso común en la Red. Si empleas software de tipo WYSIWYG (lo que
ves es lo que obtienes, en español), debes ser capaz de conocer las funciones de tu programa. Desde luego que detenerse a
2

leer las instrucciones es aburrido, y provoca lo que se conoce como “curva de aprendizaje”, pero es la única manera de llegar
a entender y desarrollar todas las posibilidades técnicas e imaginativas que te permiten las diferentes aplicaciones del
mercado. Si usas DreamWeaver, aprende DreamWeaver; puede que conozcas FrontPage, por ejemplo, pero eso no conduce
a ninguna parte. Son programas distintos que necesitan procesos de instrucción diversos.
Artículo por Gck
Características especiales de la publicación web
Diferencias específicas de la publicación de contenidos en la web con respecto a otros medios como
podrían ser la televisión.
En tercer lugar es fundamental saber que Internet no es una conferencia telefónica, un CD-ROM o televisión a la carta. La
Red sufre limitaciones propias y disfruta también de posibilidades más extensas y personales. Así, cuando diseñamos
nuestros sitios web, debemos entender que el visitantes no espera lo mismo de nuestras páginas que de un programa de TV,
incluso aunque ambos traten el mismo tema.
Tomemos por ejemplo un documental sobre los elefantes africanos. E imaginemos a un ciudadano muy interesado en dichos
animales, que en un momento del día debe elegir entre ver la vida de los elefantes en televisión, o buscar información en
Internet a propósito de lo mismo. Nosotros tenemos la obligación de diseñar una página web al respecto. ¿Tomaríamos
inspiración de la televisión? Quizás alguna, pero si sabemos lo que nos conviene, no pasaríamos de ahí. Por ejemplo, la tele
se encuentra a un mínimo de dos metros del televidente; el monitor de la computadora, a unos palmos; el texto debe ser
estrecho para no irritar al navegante. En la tele eso da igual. A la tele también le es indiferente mostrar cientos de tomas,
cientos de perspectivas y cientos de sonidos emitidos por los elefantes africanos. El web apenas podría hacer eso, en
condiciones estándar de conexiones de 56kb. Pero nosotros podemos crear enlaces a páginas que traten todas y cada una de
las costumbres del enorme paquidermo. La televisión, no...
La pregunta, sintetizada, es ésta: ¿qué damos al navegante para hacerle fiel a nuestros contenidos aunque tan sólo sea
durante una sesión? Le damos personalización, le damos contenidos, le damos libertad, le damos ingenio, le damos belleza,
le damos oportunidades, le damos buen gusto, le damos comodidad, le damos datos, le damos síntesis, le damos gráficos, le
damos información detallada, le damos esquemas, le damos conocimientos en tres palabras o sabiduría en textos de tres
kilómetros, le damos todo y más, le damos, en fin, lo que sea que busca. ¿Estamos en condiciones de hacer estas cosas? Más
nos vale.
Artículo por Gck
¿Algo más sobre el diseño web?
Es importante tomarnos el trabajo en serio al hacer una página web: redactar sin faltas y organizar la
información debidamente.
Hay más cosas, cierto. El diseño enfocado a la Red suele ser hijo de la receptividad, como cualquier otro tipo de diseño. Más
allá del aprendizaje técnico, que consiste en leer informaciones a veces aburridas y engorrosas, existe un modo
complementario y muy excitante de aprender. Como decía, hablamos de receptividad. De ver lo que otros muchos hacen
con un talento que parece inagotable, y dejar que lo que vemos sedimente en nuestro trabajo; desde el diseño gráfico de los
sitios web, desde las imágenes que incluyen y que a veces definen su identidad, hasta la manera en que escriben sus textos.
Dejadme decir que pocas cosas me parecen tan divertidas y poco serias como un párrafo mal escrito. ¿Es que
desenvolvernos en un entorno digital nos da derecho a escribir mal? Sin duda que no. Los textos deben ser sugestivos,
esclarecedores o enigmáticos, pero siempre llamativos y eficientes.
Hace poco visitaba un sitio web de cierta gran empresa y terminé preguntándome si la redacción había corrido a cargo de
algún narrador extranjero. El texto era breve y directo, pero cometía fallos gramaticales tan evidentes que era lo que más
3

llamaba la atención; incluso más que el bonito y “efervescente” diseño. Tengamos en cuenta que si nos consideran poco
aplicados, no nos tomarán como una alternativa razonable. (Y olvidemos la idea de que alguien nos pague por nuestro
trabajo.)
Miremos, analicemos, aprendamos de los demás. Es un proceso basado en la febril actividad de nuestro ratón. Tendremos
que hacer clic cientos, miles de veces, antes de que el efecto de los maestros del web deje huella en nosotros. Para empezar
podemos observar los estudios y casos de grandes empresas del medio como Adobe y Macromedia, que incluyen secciones
ex profeso muy interesantes; y también tenemos la oportunidad de mirar las páginas de las agencias de publicidad y diseño;
con frecuencia sus mejores trabajos están hechos para sí mismos, y no para sus clientes.
Artículo por Gck
Herramientas para profesionales del diseño web
Herramientas que podemos utilizar para diseñar una página web con excelentes resultados. Algunas
recomendaciones importantes y otras para trabajos más específicos.
Después necesitas el software que interpretará tus deseos, inquietudes y talentos y les dará la forma que quieras —en el
mejor de los casos—, de manera que puedas transferirlo todo a un servidor web abierto al público. Tampoco aquí existe
acuerdo. Todo dependerá de si trabajas en modo html —1st Page 2000 es una aplicación reconocida y gratuita— o
WYSIWYG, cuyo espectro es también muy amplio, desde el popular y doméstico FrontPage de Microsoft, hasta los
profesionales y valiosos DreamWeaver o GoLive!, pasando por los accesibles pero potentes Namo Web Editor o
NetObjects Fusion...
Tampoco viene mal disponer de algún programa de diseño gráfico. De una manera elemental podemos decir que los hay de
dos tipos más o menos puros, y un tercer tipo mixto. En uno de los casos se trata de aplicaciones de dibujo vectorial, es
decir, aquellas que generan gráficos desde cero mediante herramientas de trazado geométrico, fundamentalmente, pero
también a mano alzada; dicho de una forma más llana, hablamos de dibujos de líneas y curvas. Pero no nos confundamos.
Estos programas son madre de muchas de las mejores ilustraciones que vemos tanto en la Red como en publicidad impresa
y en los envases de productos cotidianos. Actualmente se asume que Adobe Illustrator es el mejor en este campo; sin
embargo, compite con el clásico indiscutible CorelDraw, además de con Macromedia Freehand. Y, no obstante, existen
alternativas baratas y eficientes, bien criticadas y admiradas en los medios, como ZonerDraw 4 o Xara.
El segundo de los casos cuando hablamos de gráficos es el retoque fotográfico; o lo que es lo mismo, el trabajo de diseño
visual sobre imágenes que normalmente combinan fotografías reales con objetos diseñados y efectos visuales. También
Adobe y Corel se disputan el pastel, de momento favorable al primero. Sus estrellas son Photo Shop y Photo Paint. Las
alternativas más accesibles suelen ser Paint Sho Pro de Jasc y Ulead Photo Impact.
Una tercera opción es el software que combina retoque fotográfico y dibujo vectorial; cada vez más, ésta es una posibilidad
que traen de serie todos los grandes programas, de manera que no hace falta cambiar de aplicación para mezclar los modos
de trabajo gráfico.
Artículo por Gck
4

Diseño adecuado
El diseño gráfico, industrial, de identidad, debe ser adecuado al producto, persona, empresa que
representa. Luego podemos entrar a debatir otros aspectos del diseño.
¿Qué significa adecuado?
El diseño es una representación formal y por tanto suele ser el primer punto de contacto entre la persona y el producto /
servicio / persona.
Para que un diseño sea adecuado se disponer de la información necesaria para conocer al cliente, mercado, consumidores,
producto / servicio.
Con esta información realizar los prototipos necesarios.
Desarrollar el diseño final.
Estilos Vs. Adecuación
Hay diseñadores / consultores / "gurús" que defienden un estilo frente a la adecuación del diseño a la necesidad.
El estilo sea "neutro", "barroco", "limpio", "alemán", "americano" no es más que un estilo y por tanto no puede ser el punto
de partida para el desarrollo del diseño.
El punto de partida debe ser el entendimiento de la necesidad del cliente.
Las necesidades del cliente pueden depender de multitud de factores y no se pueden generalizar. Cada momento, cada
región, cada canal, cada precio, cada consumidor, hace que la necesidad sea diferente.
La mejor herramienta que puede demostrar el diseñador es la comprensión y entendimiento para luego poder realizar la
solución gráfica.
Diseño
La adecuación del diseño frente al estilo hace que los valores del mismo sean algo más universales y duraderos.
Es decir, si uno defiende un estilo (neutro, barroco) se puede ver comprometido por la realidad del entorno.
Los valores del diseño con los que me siento identificado suelen ser del estilo:
• Ayuda.
• Cumple.
• Duradero.
• Se integra (con las personas, sistemas, usuarios).
El diseño debe ayudar a las personas.
La ayuda puede ser de muchos tipos, puede ayudar a la gente a ganar más dinero, a leer con más facilidad, a saltar más alto, a
pasar un buen rato.
El diseño cumple su función
El diseño debe cumplir la función asignada. El diseño es una "utilidad" para llegar a un fin.
Duradero.
Lo efímero nos lleva al consumismo desmedido. Tender a que el diseño sirva hoy, mañana, dentro de 10 años. Esta lección
me ha llevado tiempo aprenderla.
Integrado
Este concepto hace referencia a que el diseño se ha de integrar en los procesos naturales de las personas. No hay que crear
5

nuevos obstaculos, sino dotar a las personas de mejores herramientas.
Diseño no es diseño gráfico y no es diseño industrial
En muchas conversaciones se cita "diseño" aplicándolo sin mucho criterio a disciplinas que pasan por el diseño industrial,
gráfico, identidad...
Visto desde fuera no pasa nada, pero desde dentro es como si hablando de deportes se citara el futbol, las barras paralelas y
la natación como si fueran la misma cosa. Supongo que una cosa es ser espectador de sillón y otra subirse a una barra
paralela a dar dos mortales.
Diseño gráfico. Comunicación
Color. Forma. Tipografía. Imágenes.
Diseño industrial. Producto.
Procesos industriales. Ergonomía. Materiales.
"Diseño". Proceso "creativo".
El proceso creativo de resolver un problema se puede llamar "diseño" pero es un término tan vago que por lo general no
quiere decir nada.
Buscar soluciones sin ataduras
El diseño debe adecuarse a la resolución del problema, evitando que un estilo nos condicione una forma de pensar o buscar
soluciones.
Artículo por César Martín
Diseño Web. Problemas generales
Los princiapales problemas que nos podemos encontrar a la hora de decidir el diseño para nuestra web.
Uso de Flash
Las Facilidades y Utilidades que presenta flash son innumerables a la hora de interactividad, e impacto visual. Por otra parte
la interactividad mejora notablemente en conexiones de cliente/servidor en sus últimas versiones, desafortunadamente las
webs 100% flash pueden traer algunos problemas en la incorporación a buscadores.
Interactividad
El diseñador a la hora de buscar una solución a la interactividad deberá tomar en cuenta a que público está orientado el sitio.
Unos de los principales problemas que se presenta en la interactividad, es la complejidad que el diseñador le agrega al site, y
sin opción de volver atrás, o mostrar un mapa del site, logrando así que el usuario navegue secciones de subsecciones y
quede perdido dentro de la página. Una página deberá ser lo que se llama APT (a prueba de tontos) así logra el objetivo
deseado, que el usuario encuentre su búsqueda.
Incompatibilidad
En este tema entramos en una dura lucha entre los exploradores más famosos del mercado, pero a la hora de ser útil en este
rubro, se puede invocar a flash ya que se ejecuta con su proyector y muy rara vez tendrás problemas. Hay que tener mucho
cuidado cuando se hacen páginas dinámicas, con php, asp, etc... Y también con los CSS que se va a incluir en la hoja de
estilo, esto te puede traer algunos dolores de cabeza ya que los exploradores interpretan diferente y algunos dejan pasar de
largo código y otros no, o definen código diferente. Entonces ahí se entra en una disputa no solo con el cliente que quiere
6

que su sitio se vea en todos los navegadores, sino también con uno mismo al intentar hacer que las cosas funcionen en
varios navegadores. Una solución viable es conocer a fondo los exploradores mas usados en el mercado, y saber como
interpretan código.
Formularios Web
Estoy seguro que a la mayoría le molesta completar formularios Web. Estos mismos si bien son útiles, pueden lograr que un
usuario deje de hacer su consulta y se retire del sitio. En mi opinión estos formularios deben ser absolutamente claros y
concisos, y por supuesto evitar hacer preguntas inútiles, sin olvidar que el formulario debe ser corto. (Preferencia general de
los usuarios). Es útil configurar una auto respuesta para que le quede al usuario un comprobante de lo consultado, ya que
este mail puede causar un visita futura.
Uso desconsiderado de Ventanas
Actualmente nos encontramos invadidos por las publicidades en pop-ups, evite el uso de pop-ups en el sitio, primero porque
ya los exploradores más vendidos traen una herramienta para bloquearlos y resulta molesto para el visitante tener que
activarlo para ver el material que busca.
Artículo por Serviweb
Conclusión a la introducción al diseño web
Últimos apuntes de interés para el diseño de páginas web.
¿Existe vida más allá de los gráficos estáticos?
En realidad sí. La opción más común es Flash de Macromedia, que permite crear películas realmente complejas e
interactivas combinando ilustraciones embebidas, gráficos vectoriales, sonidos y ActionScript, el lenguaje de comandos
específico de Flash, amén de otras posibilidades muy bien conocidas. Adicionalmente está disponible el formato vectorial
SVG, del que es accesible un manual en Desarrollo Web.
Conclusión
En conclusión, el trabajo del desarrollador web (esa especie de alquimista obligado a dominar y combinar variables tan
dispares, y a veces de apariencia incompatible, como la usabilidad y el atractivo de cara al usuario, y la efectividad técnica de
cara a la empresa que paga sus honorarios, como por ejemplo en el caso de tiendas on-line), este trabajo, decía, es un
proceso largo que requiere un enorme grado de instrucción y aprendizaje técnico, pero también generosas dosis de intuición
y anticipación. A fin de cuentas, la Red muta y crece cada poco tiempo, y no podemos quedar atrás. Buena suerte.
Por dónde continuar
En DesarrolloWeb.com se ha publicado otro manual de diseño que seguro que resultará interesante para aquellos que
quieran profundizar en el tema: Curso práctico de diseño web.
Podemos concer algunos programas interesantes para el diseño en la categoría de diseño de la sección de programas.
También tenemos otros contenidos sobre diseño clasificados en nuestro directorio, donde encontraremos otros manuales,
categorías, artículos y enlaces a otras webs.
Esperamos que esta introducción al diseño haya resultado interesante.
Artículo por Gck
7

8

Introduccion Diseno Web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (12)

Similar a Introduccion Diseno Web

Similar a Introduccion Diseno Web (20)

Último

Último (20)

Introduccion Diseno Web