Diseño web, ¿ Por dónde empezar ?
Actualizado: 07 DICIEM 2007
Sinopsis
Este artículo pretende dar claves orientativas fundamentales para
todas aquellas personas inscritas en el contexto del diseño gráfico que
quieran introducirse en el diseño digital y no sepan por donde empezar.
¿ Qué es diseño web ?
Lo primero que deberíamos entender es que el diseño web,
próximo a otras actividades proyectuales como pueda ser el diseño
gráfico, u otras actividades informáticas como pueda ser la
programación, constituye hoy por hoy, un ámbito específico de
desarrollo: esto quiere decir, que existen ya los suficientes conocimientos
básicos del medio, como para considerar esta actividad proyectual como una
actividad autónoma. A efectos prácticos, supone que aunque la disciplina
comparta similitudes con diferentes ámbitos de conocimientos (Diseño
gráfico, informática, producción audiovisual, etc.) hoy por hoy el que
quiera dedicarse al diseño web, hablo desde el punto de vista de una
persona que compite en un mercado de trabajo o que aspira a insertarse en un
equipo de desarrollo de una empresa específica de este sector, deberá
aprender un conjunto de conocimientos específicos sobre el medio que van
desde psicología orientada a la interacción, hasta lenguajes de
programación específicos para la web, sin olvidar por todo los
elementos de comunicación, diseño de la
información y diseño gráfico que puedan
intervenir en los diversos proyectos.
Normalmente para el desarrollo eficiente de un buen proyecto web,
deberían existir por lo menos, dos personas implicadas en un equipo de
trabajo, un programador orientado a web (el responsable
del desarrollo de la mecánica de la web, a nivel de funcionamiento interno)
, y la otra, debería ser un diseñador gráfico orientado a
web (el encargado de diseñar la interfaz gráfica y las estrategias
de comunicación gráfica del proyecto).
Por lo tanto una persona que tiene conocimientos de diseño gráfico
tendría la posibilidad de acceder a una parte, y esto es importante
entenderlo así, del desarrollo web profesional en su conjunto.
El diseñador gráfico como diseñador digital
El diseñador gráfico tradicional maneja conceptos de comunicación
gráfica [Composición, iconografía, tipografía, fotografía, concepto
gráfico,etc] a los que se le añaden los conocimientos específicos del
medio impreso [ software específico de impresión, archivos digitales,
compresión de archivos, comunicación adecuadas con imprentas, formatos,
tipos de soportes, relación conceptual de la comunicación con su soporte,
etc]. El diseñador gráfico orientado a web [o diseñador gráfico
interactivo] es un perfil profesional que independientemente de los conocimientos específicos de
comunicación que suele manejar un diseñador gráfico tradicional, debe
manejar conocimientos específicos del nuevo medio [Interfaz gráfico, diseño de
la información, usabilidad, maquetación para el medio digital, lenguajes de
programación para el diseño de interfaz,etc] afectando del mismo modo a los
niveles conceptuales de la comunicación, ya que el propio medio afecta y
define la forma en la que la información debe de ser diseñada.
Por lo tanto y es lo único que quiero dejar claro en estas líneas, es
que aunque un diseñador gráfico tradicional, disponga de una base favorable
para entender e interpretar la figura del diseñador gráfico interactivo, no
bastará con transcribir sus métodos de trabajos, sus modelos de
comunicación, a la web, en cambio no sólo deberá entender que se encuentra
en un nuevo medio (o paradigma), sino que deberá
estar abierto a aprender todos los conocimientos específicos, sobre todo
relacionados con la psicología cognitiva y la programación (traducir su
propuesta a la máquina), que serán necesarios para dominar el nuevo medio
en el que se desarrolla su trabajo.
Primeros pasos como diseñador gráfico interactivo
Si estas interesado en iniciarte en esto del diseño gráfico interactivo
tendrás que tener en cuenta dos aspectos importantes en el desarrollo de tus
conocimientos:
- 1. El nivel conceptual: A lo conocido como
comunicación visual, tendrás que añadirle todo lo investigado sobre
interacción hombre-máquina, o por lo menos a lo básico que se ha hecho
llamar usabilidad. La usabilidad
habla de como debe organizarse una interfaz, o como debe de estructurarse
la información para que sea asequible por una mente humana [ergonomía
cognitiva]. Conocer la usabilidad, supone desarrollar la
parte conceptual, por que tendrás parte del conocimiento específico que
interviene en el diseño de la comunicación, que es específica del
medio en el que trabajas, permitiéndote tomar decisiones maduras a la
hora de desarrollar tus propuestas gráfico-interactivas.
- 2. El nivel conductual (acción): El medio digital
tiene sus propias reglas: las máquinas, los ordenadores sólo entienden
números, esto significa que para llegar a cabo tus propuestas
gráficas-interactivas, tendrás que hablar el lenguaje de la máquina.
Bueno, con que conozcas el HTML y el CSS, será suficiente. El
HTML, es el lenguaje de marcas, que permite estructurar la información
de una página web y el CSS (hojas de estilo) es una programación
complementaria a la primera que permite mayor control sobre los aspectos
de diseño gráfico-interactivo en el documento HTML. Esta parte podría
ser desarrollada por un programador. Pero te voy a dar una mala noticia.
Los programadores normalmente hacen cosas más difíciles (referente a la
programación), y les interesa habitualmente poco, el aspecto de las
cosas (o su nivel simbólico). Por lo tanto, el HTML, el “lenguaje”
específico de comunicación de los documentos que circulan por la red,
deberían ser “diseñados” (programados), por algo así como
diseñador gráfico !!! (interactivo). La parte positiva es que gracias a
ello, puedes conseguir trabajo, eso sí, tendrás que saber transcribir
tus conceptos gráficos, en lenguaje para la red, y esto significa, saber
generar un código HTML limpio.
Diseñar con la vista, diseñar con la mente.
Actualmente, existen dos modos o métodos, bastante definidos, a la hora
de abordar el diseño web por parte de diseñadores, exigiendo cada uno de
ellos, actitudes diferentes, y produciendo igualmente, resultados
diferenciados:
- 1.Por un lado tenemos los programas wysiwyg
[lo que ves es lo que obtienes]. Un programa wysiwyg , es un programa,
que normalmente te permite a través de menús gráficos, estructurar un
documento web, incluso el aspecto global de un sitio, y traducirlo a
HTML. Entre los más populares de estos programas, se encuentran
Macromedia Dreamweaver y Adobe Golive ambos pertenecientes
actualmente a la compañía Adobe. Éstos dos son considerador los programas
profesionales por excelencia y a través de menus gráficos, se nos
permite realizar maquetas aproximadas que podremos visualizar, mientras,
simultáneamente, el programa genera el código html imprescindible, que
será lo que realmente funcione como web. También existe un proyecto reciente
del grupo de desarrollo MOZILLA, llamado NVU - New Vision de código abierto y gratuito, el cual recomiendo. Esta es la opción aparentemente
fácil.
- 2. Por otro lado tenemos los editores de código HTML.
Nos permiten editar, escribir e incrustar directamente el código HTML en
el editor de forma textual, y darnos una muestra visual del
resultado(tipo navegador). Para trabajar con un editor tendrás que conocer el
código. Existen programas gratuitos que ofrecen bastante prestaciones,
entre ellos es imprescindible nombrar AMAYA, que ha
sido creado por el W3C que cuenta con un corrector de código incluido,
o en el contexto del software libre Bluefish,
un editor bastante maduro que facilita las tareas de desarrollo en diversos lenguajes de programación.
Esta es la opción aparentemente complicada.
|
Programas wysiwyg [visual] |
Editores de código [Textual] |
| GNU/Linux |
|
|
| Windows |
|
|
| Macintosch |
|
|
Es importante que entiendas la diferencia y lo que te pueden aportarte un
programa de código abierto
[opensource] respecto a uno de código propietario.
Comparativa: Tomar la decisión acertada
De entre estas dos opciones, la que suelen elegir los diseñadores
gráficos es la primera, y la que suelen elegir los programadores que se
introducen en el diseño web es la segunda.
Veamos algunas ventajas y desventajas de ámbos métodos como
alteranativas en tus prendizaje:
| Desventajas wysiwyg [Visual] |
Ventajas de editores [Textual] |
- 1. El diseñador depende del software. Los cambios en el
software suponen un aprendizaje nuevo para el diseñador.
- 2. El código que genera el sotfware wysiwyg suele ser
deficiente y de menor calidad que el que pueda generar un buen
diseñador web [código innecesario, repetitivo, y
estructuración deficiente].
- 3. Limita tu conocimiento, al conocimiento del software. Esto
te podrá parecer una tontería, pero estar circunscrito al
software supone que tu capacidad de compresión, de lo que haces,
saber qué repercusión tiene tu trabajo y hasta que punto pueden
configurar espectativas futuras o elaborar nuevas estrategias, se
verá drásticamente limitadas por el programa que uses [y el
método de hacer uso de este mismo software].
- 4. Limita tu capacidad para resolver problemas. El software
traduce tus acciones en código, por lo que los errores que
puedan surgir en el código dependerán de tu capacidad de
compresión de lo que ocurre internamente.
- 5. El software wysiwyg suele ofrecer limitaciones a la hora de
implementar estructuras que implican niveles de abstracción
superior en el diseño de la información.
- 6. Normalmente son programas de pago.
|
- 1. Independencia respecto al Software, esto
supone que no te verás sujeto a limitaciones de software, en
cambio tendrás que aprender la sintaxis del código de
programación (html,xhtml,css,etc).
- 2. Correctores de código. Muchos editores
atienden a los códigos estándares de programación, avisando
cualquier error que cometas.
- 3. Facilita tu capacidad de compresión, de lo
que hagas, en todo momento. Para editar código, necesitarás
saber qué es cada cosa y como usarla. Esto hace que tu
compresión real de lo que está ocurriendo realmente se
multiplique, tu facultad creativa de investigar en el medio,
estará sujeto a esta capacidad de compresión real, y está
determinará tu capacidad de innovar en el medio.
- 4. Solución de problemas. A medida que
aprendes el funcionamiento interno de lo que haces, tu capacidad
para entender donde se producen errores y como solventarlos,
también aumentará. Esta es una de las razones que me llevó a
entender el funcionamiento del HTML.
- 5. Cuando dominas el lenguaje, implementar estructuras, hacer
cambios, o implementar elementos, puede resultar más cómodo y
más rápido que realizar la misma tarea en programas
wysiwyg.
- 6. Los mejores editores que hay son de código abierto (open
source) y gratuitos.
|
| Ventajas wysiwyg |
Desventajas editores |
- 1. Un programa wysiwyg normalmente te permite usar ciertos
recursos webs, con un pequeño uso de forma cómoda. Por lo que,
tareas sencillas, pueden ser fáciles de hacer con dichas
herramienta.
- 2. Los programas wysiwyg normalmente incluyen herramientas de
diagnóstico de archivos de tu sitio web, generar mapas de
relación de archivos, te advierten de enlaces rotos, etc..que
pueden ser útiles cuando se trata de gestionar un sitio con
muchas páginas webs.
- 3. Suelen ser usados de forma estándard en las agencias de
diseño.
|
- 1.La principal desventaja es que tendrás que aprender un
lenguaje (HTML) y un lenguaje complementario (CSS), con sus
reglas sintácticas y sus diferentes vocablos (gramática). Esto
supone esfuerzo y tiempo.
- 2. A la hora de acceder al código, se hace mayor uso del
teclado, por lo que los requisitos de interacción son superiores
a la de un programa wysiwyg. Es recomendable que tengas soltura
mecanográfica (o en su defecto, debas aprenderla).
|
Algunas conclusiones generales
En la siguiente comparativa hemos podido ver como ambos métodos nos van a
llevar por caminos formativos diferentes y esto redundará en la calidad y la
eficiencia de nuestro aprendizaje.
Veamos, los programas wysiwyg, nos ofrecen comodidad a la hora de trazar
actividades básicas, pero se vuelven engorrosos a la hora de representar
funciones más complejas en niveles de abstracción. La principal desventaja
es que coarta nuestra capacidad de compresión real, y por lo tanto
afectaría a largo plazo la creatividad y la posibilidad de innovar en el
medio. El aprendizaje es rápido en las primeras etapas, lento en las medias,
e impide avanzar a largo plazo.Suponen una buena opción cuando requieres un
aprendizaje rápido (aunque superficial), limita tu compresión y tu
capacidad de innovación.
En cambio, la opción de iniciarte al diseño web a través de la
compresión del lenguaje de la web y el uso de sus editores, supone
enfrentarse a la parte difícil al principio (algo que desalienta un poco)
para lo que recomiendo hacer un curso de HTML + CSS bien estructurado. Aunque
el principio sea duro, los resultados se recogerán a medio y largo plazo, ya
que esta medio aumentará tu capacidad de compresión (no sólo de la web) y
tu capacidad de innovar en el medio, también te ofrece la posibilidad de
usar ese aprendizaje para aplicarlo de modo transversal, en el aprendizaje de
otros lenguajes similares.
No me gustaría acabar sin aclarar, que si bien existe estas dos formas de
iniciarse al diseño web, un diseñador web profesional debe dominar el mayor
número de medios a su alcance, lo que supone hacer uso de ambos
indiscriminadamente. Cuanto más conocimientos tengas sobre los aspectos que
conciernen a este tema o similares, dispondrás de mejor capacidad de
destreza y desarrollo conceptual de tus proyectos, y esto es lo realmente
importará cuando estés trabajando en ellos.
Bibliografía de iniciación al diseño web
Usabilidad
- Nielsen, Jakob: Usabilidad: Prioridad en el diseño web, Ed. Anaya, 2006.
- Krug, Steve:No me hagas pensar, Practice
Hall, 2001.
- V.V.A.A. - Knapp, Alberto: La experiencia del usuario, Anaya
Multimedia, 2003.
- Norman,
Donald A.:La psicología de los objetos cotidianos,
Editorial Nerea, 1981.
Diseño gráfico para la web
- Martínez-Val, Juan: Comunicación en el diseño gráfico: la lógica de los mensajes visuales en diseño, publicidad e Internet, Ed. Laberinto, Madrid, 2004.
Maquetación Web
- Zeldman, Jeffrey: Diseño con estándares Web, ed. Anaya, 2004.
- Budd, Andy; Moll, Cameron; Collison, Simon: CSS , Ed. Anaya Multimedia, 2007.
Castro, Elisabeth: Html con Xhtml y Css, Tábula Digital (Ed.
Anaya Multimedia)
Enlaces de iniciación al diseño web
Usabilidad
Desarrollo Web con estándares
Artículos relacionados
