Tecnología y Coaching para Emprendedores

¿Qué Es Exactamente el Diseño Web? Roles y Perfiles Profesionales

diseno-web-responsive

Cuando justo nos iniciamos al mundo del diseño web, tenemos muchas dudas sobre en qué consiste exactamente esta profesión. Más todavía, alguien puede ser muy bueno a nivel de diseño, pero no tanto a la hora de pasar este diseño a código HTML y CSS, por no hablar de programar funcionalidades más avanzadas y que, muchas veces, requieren de conocimientos de bases de datos. Así que, ¿en qué consiste exactamente el diseño web?

La verdad es que lo que entendemos como diseño web comprende muchos conocimientos y disciplinas que trabajan de manera conjunta. No podemos separar el diseño del rendimiento web, ni tampoco de la estrategia de contenidos o el posicionamiento web. ¿Por qué entonces le llamamos diseño web? Porque fue cómo se originó y el ciudadano de a pie entiende la creación de un sitio web que dé resultados como contratar el diseño de una web.


¿Qué Es Exactamente el Diseño Web?

Allá en la época donde Google no existía y usábamos Lycos para hacer búsquedas online, los diseños web eran de lo más simples. ¿Motivos? La tecnología estaba empezando a dar sus primeros pasos, la inmensa mayoría de usuarios tenía internet como algo nuevo y no existían siquiera las redes sociales ni los motores de búsqueda como hoy los conocemos. De aquí que el crear una página web se llamara diseño web y el aplicar funcionalidades más avanzadas, como un buscador interno, se llamara desarrollo web.

Pero los tiempos cambian y hoy la confusión de términos es de lo más extendida, con muchos potenciales clientes que ven como sinónimos el diseño web, el diseño gráfico y el desarrollo web. Así que en este post vamos a ver en qué consiste exactamente el diseño web.


Conceptualización Web

ideas diseno webEste es el gran olvidado del diseño web, pensar en el a quién, el cómo y el por qué antes de pensar en el qué. ¿A quién me dirijo? ¿Por qué quiero esta web? ¿Cómo tengo pensado alcanzar mis objetivos? Y una vez todas las preguntas a plantear están resueltas, es cuando se piensa en el qué: qué diseño me interesa más, qué plataforma, qué CMS, etc.

En una gran empresa hay personas que se dedican exclusivamente a esto, haciendo análisis de mercado, investigando la competencia, estudiando el perfil de la persona que quiere contratar la web. En el mundo de a pie del freelance acostumbra a venir alguien que pide que le haga la web y que sólo piensa en cuánto le va a costar. ¿Por qué? Porque no sabe qué existe este paso ni conoce su importancia y es la obligación del profesional informarle y asesorarle, a pesar de que no siempre se tengan en cuenta nuestros consejos.


Estrategia de Contenidos

cotenidos web¿Qué es antes, el huevo o la gallina? ¿el diseño o el contenido? En mi opinión, antes de lanzarse a crear el diseño o seleccionar una plantilla de WordPress se debería pensar en el tipo de contenidos que queremos ofrecer para saber qué diseño es el más adecuado.

No es lo mismo el sitio web de un blogger profesional que el de una pyme que busca atraer a clientes a su negocio local. Y no es lo mismo presentar un portafolio de diseño gráfico que uno de fotografía, por mucho que ambos sean artísticos. Y no es lo mismo un sitio que se actualiza con frecuencia a uno que casi no se actualiza, o el de un freelance al de una gran empresa. No sólo cambian las necesidades, sino la estrategia de contenidos.

De nuevo, en las grandes empresas hay profesionales que se dedican a esto, son expertos en comunicación o en content curation. Porque una frase dicha de varias maneras tiene un impacto u otro. La selección de una imagen u otra puede provocar un gran cambio en los resultados. Y eso es algo a tener en cuenta.


Arquitectura de la Información

Estupendo, ya tenemos claro por qué queremos una web, a quién nos dirigimos, cómo pretendemos alcanzar nuestros objetivos y qué esperamos lograr. También hemos definido una clara estrategia de contenidos que nos ayude en este proceso. Ahora se trata de empezar a poner un poco de orden entre todos los kilos de información que hemos acumulado en los dos pasos anteriores.

estrategia de contenidos web

Organizar la información de por sí no es fácil, clasificarla menos. ¿Cómo distribuimos los contenidos en el sitio web? ¿Qué enlaces son los que van al menú principal? ¿Cuántas categorías usará el blog? ¿Qué sistema de taxonomías utilizaremos? De nuevo, en las empresas grandes tenemos arquitectos de la información para estas tareas. En el mundo freelance se acostumbra a hacer lo que se puede, jeje.


Diseño

Sólo después de los pasos anteriores entramos en lo que sería propiamente dicho el mundo del diseño. Se trata de trasladar todas las ideas recopiladas anteriormente a una distribución visual que no sólo sea fácil de usar y navegar, sino que despierte emociones, el conocido diseño web emocional.

Es en este paso donde se crean los prototipos y wireframes y se hace el diseño en Photoshop. Aquí es imprescindible tener bien formación de diseñador, bien tener talento innato para el diseño, porque valoramos una web en los primeros dos segundos sólo por el diseño.

Aquí es donde muchos freelancers se frustran, porque no a todos se les da bien el diseño. Es tan fácil como subcontratar a alguien que haga el diseño por ti. Querer ser un 10 en todo es un error típico de los autónomos, si algo se te da mal, mejor delégalo y céntrate en tus habilidades. En la gran empresa este problema no existe ya que el diseño de la web lo está haciendo un diseñador gráfico experimentado.


Front End

html5En las empresas y agencias, el front end es el que se encarga de pasar a código un “diseño web” en forma de imagen. Es el encargado de pasar los diseños de Photoshop a HTML5 y CSS3. También es el responsable de añadir animación al diseño con el uso de JavaScript. En definitiva, es un perfil que se dedica a picar código. ¿Es por eso programador o desarrollador web? No.

El desarrollador web o programador web es el que se encarga de implementar funciones más avanzadas que muchas veces requieren de llamadas a bases de datos. Es el conocido perfil back end que veremos a continuación. El trabajo del front end es crear un código óptimo y semántico y muchas veces se apoya en el uso de un framework para ir más rápido (siempre y cuando el diseño se haya hecho teniendo en cuenta el framework).


Back End

Foto de Andrew

Foto de Andrew, especialista back end

Como comentaba en el apartado anterior, el back end es el programador o desarrollador web que se encarga de hacer que determinadas cosas funcionen, como puede ser un motor de búsqueda, un formulario de contacto, un cupón de descuento y mucho más. En mi curso básico de diseño web me he encontrado a algún alumno que se sorprende de no aprender a hacer que el formulario de búsqueda que creamos funcione, pero esto es un trabajo de back end.

Así, el diseñador crea el visual, el front end pasa el visual a código y, en caso necesario, el back end hace que esto funcione. Esto es algo evidente para la gente que llevamos tiempo en el mundo del diseño web, pero no para los clientes o personas que justo empiezan. Me ha pasado alguna vez que alguien me ha preguntado si sé programar una web y le he contestado con otra pregunta: ¿qué entiendes por programador web? Porque existe mucha confusión en este aspecto, y puedes dominar HTML5 y CSS3, pero no tener ni idea de PHP o MySQL.


Otros…

Es en este punto cuando la web se entiende por finalizada y se entrega al cliente, pero el trabajo no ha hecho más que empezar. Es como entregar las llaves de una tienda nueva que ya está decorada y puesta a punto. Ahora hay que lograr que este sitio web empiece a dar resultados. Necesitamos hacer muchísimas tareas, desde SEO, marketing online y community manager a analítica web y muchas otras tareas.

Sé de muchos sitios que se han creado de manera correcta teniendo en cuenta todos los puntos anteriores y que, llegados a este punto, se quedan en un punto muerto. Seguro que te ha pasado de ir a un sitio en octubre 2014 y encontrarte que pone: “próximo evento: marzo 2013”. Hombre, muy actualizado parece que no está. Es en este punto donde intervienen muchos otros profesionales para hacer que un sitio web dé los resultados deseados.


Para acabar..

Este artículo está muy relacionado con el post “las claves de todo proyecto web de éxito“, pero aquí lo vemos desde la perspectiva de los profesionales que hay detrás de un sitio web de gran envergadura. Si eres freelance o quieres serlo, puedes juntarte con otros profesionales y crear un equipo donde cada uno domina una área (y montáis una especie de agencia) o puedes especializarte en algunas de las áreas anteriores y subcontratar el resto.

Si te ha gustado el artículo, te agradeceré que dejes un comentario y lo compartes en las redes sociales.

¡Gracias!


Comentarios

  • Fredy Pascual

    Interesante articulo, muy claro con respecto a otros que he leído.

    Saludos.

    • Sandra

      Gracias Fredy :-)

  • edsonmgoz

    Hola Sandra!! Que súper que hayas tratado este tema y el proceso que se lleva para obtener una web con buenos resultados. A veces toca que los clientes no comprenden ese procedimiento y piensan que un programador puede hacerlo todo sin tomar en cuenta esos puntos que tratas en tu artículo y encima lo quieren de un día para el otro, bueno acá también entra el poder explicar al cliente de la mejor forma la labor que uno tiene y todo el proceso que lleva trabajar en un proyecto bien hecho si es que así lo quiere. Saludos y nuevamente éxitos para el premio Bitácoras 8-)

    • Sandra

      Muchas gracias, Edson :-) El Bitacoras pinta muy difícil, la categoría de Tecnología es muy competitiva, pero yo lo intento :-)

  • Román

    Excelente post, Sandra
    Yo tenía la confusión entre el desarrollador web y el back end, con esto me sacas de muchas dudas y además de cómo llevar un adecuado proceso.
    Saludos.

    • Sandra

      Me alegro te haya ayudado :-)

  • Carlos A Gutierrez

    Muy bien explicados todos los puntos!, gracias por el aporte!

    • Sandra

      Hola Carlos! Me alegro te haya gustado :-)

  • Ricardo Plaza

    Yo soy más de back end, me he peleado mucho con bases de datos etc, pero el diseño se me hace muy cuesta arriba porque nunca tuve dotes artísticas y creo que para diseñar hay que tener un ojo especial aparte de conocimientos, creo que debe ser algo innato como todo lo artístico. Un saludo

  • Pier

    Excelente artículo!!!
    No logro entender por qué las agencias buscan diseñadores gráficos, web, desarrollador y mercadotécnicos a la vez, que sepan de todo, incluso animación y video. Si soy “Diseñador Web” entiendo que deba tener una noción de html y css además de lo conceptual, pero no tengo por que construir la página en códigos. En este momento estoy en Londres y no solo la barrera del idioma debo enfrentar sino que se exigen muchas disciplinas en una sola persona, (html, css, java) incluso una agencia exigía hasta conocimiento de excel.

    • Sandra

      Hola Pier, el motivo es porque quieren el todo en uno y así ahorrar costes, pagan a una persona y obtienen el rendimiento de varias..

  • Orland

    Un excelente articulo Sandra, me ha dado claridad frente a estos temas y a entender mucho más la concepción de un proyecto web, puntos claves que a veces se pasan por alto o simplemente no se involucran dentro de las fases de un portal web.

    Un saludo desde Colombia.

    • Sandra

      Me alegro te haya ayudado, Orland :-)

  • Fabian

    Sandra excelente articulo, no soy diseñador, trabaje junto a uno y he aprendido bastante. Igual lo mio es el back, pero hago de todo… Con el tiempo se sufre alguna desventaja en cuanto a no especializarte en algo concreto? Muchas gracias

    • Sandra

      Hola Fabián, todo depende de tus objetivos, en las empresas se tienden a buscar perfiles más especializados, pero cada vez más se buscan perfiles con un área concreta de especialización y conocimientos del resto de áreas. En el mundo freelance si estás sólo y no montas una agencia necesitas tener un perfil más generalista para satisfacer a tus clientes o subcontratar servicios. Un saludo y suerte!

  • Oscar

    Hola, Sandra! muchas gracias por el post! me gustó! saludos.

    • Sandra

      Me alegro, Oscar!

  • Lidia Ramírez

    Un excelente aporte, más para las personas que iniciamos en el mundo laboral, gracias por tu tiempo y contribución. Saludos

    • Sandra

      Gracias, Lidia!

  • expert g

    Excelente contenido en verdad de los mejores para poder explicar a los clientes como es que se mueve el asunto. Gracias Sandra. Desde Puerto Rico.

  • Luis

    Muchas gracias Sandra por explicar cosas que para muchas personas en el medio parecieran triviales pero en realidad es muy importante aclarar para poder ser mas directo y cerrar proyectos con más clientes, saludos desde Cd. de México !

    • eSandra

      Gracias a ti por comentar :-)

  • elvis

    Hablando de actualizaciónes deberías actualizar el contenido de este post ya que quería votar para el premio bitácora y ya caduco :( de todas maneras gracias por brindar tus conocimientos , se aprende mucho :)

    • eSandra

      Hola Elvis, gracias por avisar, lo acabo de actualizar, ni me acordaba, lo publiqué en octubre 2014 :-)

      Igualmente, gracias por la intención de votar, ¡se agradece!

      un abrazo,
      Sandra

  • Juan David

    Hola, muy interesantes tus artículos, me gustaría hacer algunas preguntas:
    después de entregar un diseño, cuanto tiempo le haces seguimiento al cliente?
    le cobras por el seguimiento o va incluido con el precio de la web?

    como haces para explicarle al cliente como funciona la web y para que el mismo suba sus post, haces un video general para todos tus clientes o un video personalizado para cada cliente?

    por ahora eso jejej
    soy uno de tus fieles seguidores

    Saludos :)

    • eSandra

      Hola!

      yo el seguimiento no lo incluyo en el precio final, pero sí el explicar cómo funciona su web y para eso hago una sesión individual en que lo explico, bien en Barcelona, bien vía Google Hangouts o Skype. Pero esto es algo que cada uno ha de valorar :-)

      Lo que puedes hacer es dar un plazo de 1-2 semanas desde la entrega para soporte si no entienden algo, y a partir de aquí pueden contratar un servicio extra de soporte o mantenimiento, ¿no te parece?

      Un abrazo!
      Sandra

  • Juan David

    Muchas gracias por tu respuesta, me parece buena idea de darle 1 o 2 semanas de soporte y luego si quiere contratar ese servicio.

    tengo otra duda. crees que es mejor hacer una plantilla personalizada en wordpress desde cero (quita muuucho tiempo) o escoger una plantilla ya terminada y adaptarla a las necesidades del cliente?

    saludos desde Colombia

    • eSandra

      Esto depende del presupuesto y de las funcionalidades.. no es lo mismo hablar de 700 EUR que de 2.000 EUR, o de un blog que una página con cursos online.. aquí no hay una respuesta estándar..

      un abrazo!