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:

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:

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

Diseño gráfico para la web

Maquetación Web

Enlaces de iniciación al diseño web

Usabilidad

Desarrollo Web con estándares

Artículos relacionados

Mentexpansiva

Novedades | Artículos sobre diseño | Cursos de diseño gráfico y web | Proyectos personales | Contacto

chr5

Currículum personal on-line | Formulario de contacto