Diseño Web: El Qué, Quién, Cuánto y Cómo, del Diseño de Sitios Web.

En esta publicación respondo de forma sencilla, las más importantes preguntas que se hacen en Google con respecto al diseño web, empezando por la definición, el funcionamiento y la funcionalidad, la forma en que trabaja el Diseño Web, las formas que existen para crear un diseño web, cuáles son los diseños más utilizados, quién puede diseñar una página web y cuánto se le paga, y por último, por qué y cómo se documenta un proceso de diseño web. Iniciamos.

¿Qué es el diseño web?

Busqué la definición de diseño web, y encontré muchas acepciones, algunas mucho mejores que otras, pero a todas les faltaba algo, si bien las más completas tenían casi todos los elementos, hay aspectos faltantes, por lo que me di a la tarea de procurar hacer la definición más concisa posible, que abarcara todas las aristas. Creo que lo logro con la siguiente definición, pero le ruego, si no lo considera así, que me indique en los comentarios lo que usted piensa al respecto. Aquí vamos.

El diseño web es la disciplina que se encarga de crear interfaces digitales en internet, que sean accesibles mediante el uso de navegadores web, utilizando herramientas visuales como fotografías, videos, textos y gráficos, e hipervínculos, orientadas a presentar un mensaje previamente determinado, y proyectar una imagen adecuada, a través de una optimización de usabilidad orientada al usuario, y en cumplimiento de objetivos específicos, definidos por su creador.

Esto implica la cuidadosa planificación y creación del contenido, y los cambios y mantenimiento de aplicaciones y sitios web, así como la administración de la infraestructura necesaria para instalar los sistemas creados, y mantenido de forma optima, según los requerimientos demandados de uso de recursos técnicos.

Para lograrlo utiliza protocolos de Internet, lenguajes de marcado de texto como el HTML, y sistemas para el estilizado de elementos como el CSS, para embellecer y facilitar la presentación de la información.

Estas aplicaciones o sitios web pueden ser simples creadas por una persona que cumple varias funciones, o complejas creadas por equipos de profesionales, en la que cada uno de los miembros del equipo se encarga de diferentes aspectos del sistema, estos equipos pueden incluir básicamente diseñadores gráficos, redactores, ingenieros en sistemas o programadores, expertos en usabilidad, generadores de contenido audiovisual y profesionales en mercadeo.

Un diseñador gráfico, utiliza su talento para generar gráficos atractivos, utilizando figuras y colores, crea íconos, corrige fotografías, maneja y acomoda logotipos y revisa y aplica tipografías, manteniendo uniformidad gráfica, todo optimizado y de acuerdo a los tamaños necesarios, y visualmente adecuados, en búsqueda de una imagen global del sitio que sea atractiva y que complemente la narrativa.

El Redactor crea textos envolventes, concisos y explicativos, coherentes y con objetivos claros, y en búsqueda de que el lector se abastezca de la información solicitada, pero que luego este lector se dirija según el flujo previamente establecido.

EL experto en usabilidad genera las pautas para la creación de los textos, gráficos, imágenes, íconos y el resto de los elementos, establece el flujo según la proyección de la psiquis del usuario requerido, y en cumplimiento de los objetivos previamente establecidos.

EL programador o ingeniero utiliza el lenguaje de marcado y los sistemas de estilizado para colocar los textos, imágenes y gráficos, y los hipervínculos, de acuerdo a lo solicitado por el experto en usabilidad, en cumplimiento del flujo adecuado, para el cumplimiento de los objetivos deseados.

En el caso de las empresas, generalmente quien establece los objetivos deseados es un profesional en mercadeo, que define las características del cliente meta, localiza los temas a tratar (palabras clave), busca producir la información y satisfacer la necesidad del cliente, establece los flujos deseado que cumpla con sus objetivos de mercadeo, lo que define el resultado final de lo que se quiere que el cliente potencial haga, una vez que llegue al sitio web.

Con esto quiero decir que el diseño web no es una finalidad en sí, sino un medio para lograr un objetivo. Y utiliza variadas herramientas para lograrlo.

¿Cuál es el funcionamiento de una página web?

El funcionamiento de una página web puede verse desde dos perspectivas diferentes, desde el punto de vista técnico de lo que sucede para tener una página web en nuestro dispositivo, o desde el punto de vista comercial, de cuál es el funcionamiento de una página web dentro de nuestros objetivos empresariales.

Desde el punto de vista técnico una página web funciona de la siguiente forma. Hay dos extremos en el sistema, de un lado están los servidores que tienen espacios en disco duro en donde se almacena la información, y a cada trozo de información se le asigna una dirección que la distingue, y que es diferente de todas las demás. Del otro lado está un dispositivo que contiene un navegador, que sirve para interpretar la información enviada por el servidor, el navegador hace una solicitud para que se le presente una copia de una información, el servidor envía esa copia de información, y el navegador interpreta el resultado, presentándolo en la forma en que lo vemos.

Si bien es inmediato (dependiendo de la velocidad de navegación) lo cierto es que suceden muchas cosas técnicas. El primer punto es el de las direcciones. Cada sitio web tiene una dirección expresada en una secuencia de números llamado dirección IP (Protocolo de Internet), que está relacionada para simplificación del sistema, a una expresión literal llamado URL (Localizador de Recursos Uniforme).

Una vez localizado el sitio, el servidor transfiere una serie de comandos, en HTML, en CSS y en php, js, y otros, que son interpretados por el navegador. Todos estos códigos trasladan la información y le dan formato, para que se vea de forma atractiva en el navegador. El texto, las imágenes, los gráficos, videos y demás información pueden o no, estar en el mismo servidor. De hecho es muy frecuente que diferentes elementos se encuentren en servidores de entrega de contenido, generalmente localizados más cerca del origen de la solicitud. (De usted), para darle velocidad al despliegue de la información.

Por otro lado, el sitio puede estar construido en HTML y guardado como tal en el servidor, o puede ser solicitado a un administrador de contenido que construye el HTML en el momento, cada vez que se genera la solicitud de la página, lo que tiene el nombre de sitio web dinámico.

Desde el punto de vista comercial, un sitio web tiene varios objetivos. Sirve como repositorio de información de currículo personal de los colaboradores, y empresarial, compartiendo esta información de capacidades técnicas o profesionales y la experiencia de trabajo de la empresa y las personas que trabajan para ella, así como una serie de ejemplos de trabajos y/o servicios realizados.

También puede ser utilizado como herramienta de mercadeo, ofreciendo soluciones a los problemas de las personas. Puede ser utilizado como herramienta de venta de productos y servicios, como herramienta de educación, tanto desde el punto de vista formal educativo, como desde el punto de vista comercial, educando clientes y prospectos.

Son muchas y muy variadas las funciones de un sitio web dentro del esquema de una empresa.

Cómo funciona el diseño de páginas web?

Idealmente el diseño de páginas web sigue una serie de 10 pasos que ordenan la información, de forma tal que facilitan el flujo y el cumplimiento de los objetivos de la empresa, sean estos, de mercadeo, de imagen, o simplemente de información.

1. Establecimiento de objetivos. El primer paso es establecer los objetivos a cumplir, categorizándolos y agrupándolos para facilitar su procesamiento.
2. Ordenamiento lógico de la información. Hay que ordenar la información de forma lógica, en orden de importancia, limitando las opciones de decisión del usuario para facilitar la presentación de la información.
3. Creación del diagrama de flujo. La mejor forma de ordenar esta información de forma visual es mediante la creación de un diagrama de flujo, integrando todas las opciones y generando la posible estructura del sitio web que se va a diseñar. Aquí se empieza a ver el tamaño del sitio web.
4. Análisis de palabras clave. Una vez que se tenga claro cuál es la información y su estructura, se debe hacer un análisis de palabras clave, buscando la o las palabras que contengan las mejores características que faciliten lograr las mejores posiciones orgánicas.
5. Análisis de competencia. El siguiente paso es hacer un análisis de competencia, de las diferentes palabras clave, no sólo desde el punto de vista del nivel y calidad de la competencia, sino también para analizar la estructura de los diferentes sitios web, con énfasis en los primeros puestos de las palabras clave seleccionadas.
6. Estrategias de mercadeo. Con los objetivos puntualizados, el resultado del estudio de palabras clave y el análisis de competencia, se establece la estrategia de mercadeo, y se determinan las necesidades de diseño para completar esa estrategia.
7. Replanteo del diagrama de flujo. En este punto, casi siempre se replantea el diagrama de flujo según los resultados y la información del estudio de palabras clave, el análisis de competencia y las necesidades de la estrategia de mercadeo, para generar el mejor diseño web posible.
8. Redacción de textos. Una vez establecido el diagrama, se redactan los textos de forma precisa y concisa, de cada una de las páginas, y se hacen las revisiones necesarias.
9. Recopilación de material gráfico. Se busca el material gráfico que apoye y complemente la información, y que cumpla con la imagen gráfica de la empresa, este material puede contener, fotografías, dibujos, logotipos, y videos.
10. Implementación. Con la información de textos y material gráfico se montan las páginas del sitio web, y se verifica la funcionalidad y todos los enlaces.

El cumplimiento de estos 10 pasos creará la base de un sitio web con objetivo, bien realizado, correctamente planificado y que justifica la inversión en un proyecto con sentido. Nótese que en ningún momento aquí se habla de un diseño realizado en ningún lenguaje en específico, o mediante una forma en particular. Este procedimiento puede ser usado tanto para la creación de un sitio en una plataforma gratuita, como para la creación de un sitio llevado a cabo por un equipo de profesionales y con un costo elevado.

¿Cuáles son las formas de diseñar una página web?

Hay siete formas de diseñar una página web, con diferentes costos, calidades, velocidades de carga, y posibilidades técnicas diferentes. Cada una tiene sus aspectos positivos y sus aspectos no tan positivos, los enumeraremos en la siguiente lista

1. La forma más barata de hacer un sitio web es mediante programas gratuitos en línea de creación de sitios web. Por lo general estos programas tienen grandes volúmenes, lo que hace los sitios muy lentos y con muchos problemas, imposibles de posicionar en los motores de búsqueda.
2. Luego de esto están los programas en línea de creación de sitios web de pago. Por lo general son la fase siguiente a los sistemas gratuitos, y arrastran muchos de sus problemas. Además, cargan a sus clientes de pago el costo de la infraestructura que usan para los sistemas gratuitos, lo que los hace un poco más caros que otros.
3. En tercera instancia están los programas de creación de sitios web de las empresas de Hosting. Estos programas son en general bastante mejores, tienen mejores velocidades de carga, y un mucho mejor desempeño para el posicionamiento de su sitio web en los motores de búsqueda, y son bastante más económicos, nosotros tenemos uno, y puede analizarlo haciendo click en este enlace. Su uso es muy fácil y es un excelente punto de entrada al web.
4. La cuarta forma de hacer un sitio web es mediante el marcador de texto HTML, con formato en CSS, y para ello puede utilizar una herramienta de desarrollo web como el Dreamweaver, Atom o Notepad++, y se requiere un nivel técnico medio de programación en HTMlL.
5. La quinta forma mediante la cual puede hacer un sitio web es con un administrador de contenido, denominados CMS por sus siglas en inglés, como por ejemplo el WordPress. Este es probablemente la mejor forma de hacer un sitio web, aunque se requiere de algunos conocimientos técnicos. Se instala una plantilla y se modifica según la necesidad.
6. La sexta forma y aun con WordPress y con un nivel técnico mucho más alto, se puede hacer un sistema más complejo, esto se para necesidades más avanzadas con programación en php.
7. La última es mediante un sistema programado en alguno de muchos lenguajes de programación, para sistemas como bancos, mercados en línea, aplicaciones complejas y más.

Cualquiera de las formas que escoja para hacer el sitio web, es importante la planificación de su sitio con el posicionamiento y mercadeo web en mente.

¿Cuáles son los diseños de páginas más utilizados?

Los diseños de página web más utilizados son:

1. Menú vertical. Generalmente en la parte izquierda del sitio, y a su costado, el cuerpo de la página. Si bien puede quedar más cuerpo antes del “fold” de la página, su menú queda cortado, sin embargo se utiliza cuando los menús son más extensos, y es considerado un formato antiguo.
2. Menú horizontal. Colocado en la parte suprior y luego el cuerpo del sitio. La ventaja es que el menú queda desplegado una vez que se ingresa al sitio, la desventaja es que no hay mucho espacio entre el menú y el “fold” de la página.
3. Barra Lateral. Este estilo de diseño tiene un menú en la parte superior, y en el cuerpo tiene una barra lateral con información relacionada. Esta barra puede estar en la parte izquierda o en la parte derecha de la página.
4. Página única. Con un menú horizontal en la parte superior pero que se mantiene pegado arriba de nuestra pantalla, aún cuando se baje en la página. Esta configuración tiene toda la información dentro de la misma página, y el menú lleva a secciones diferentes en esa larga página de información. Se utiliza cuando no hay grandes cantidades de información.
5. Ancho Completo. Este diseño de sitio web no tiene bordes a los lados, y los elementos de fondo y franjas de color van de extremo a extremo de la pantalla. El texto y otros elementos también podrían llegar hasta el final, sin embargo no se hace por razones estéticas.
6. Caja. Este diseño hace una caja o espacio a los lados de la pantalla, y el diseño, sus elementos y la información quedan dentro de esta caja.

Algunos de estos tipos de diseño se pueden mezclar en una misma página, como por ejemplo un diseño horizontal, con barra lateral y en caja, y algunas veces un mismo sitio web tiene dos o más formatos de página.

Un mismo sitio web puede tener el mismo formato de diseño tanto en su versión de escritorio, como en su versión móvil, o puede tener formatos diferentes para cada uno de los dispositivos.

¿Quién puede diseñar una página web?

Luego de haber estado en este mercado por varios años, puedo con toda confianza decir que casi cualquier persona puede diseñar un sitio web. Hay una serie de herramientas que le permiten hacer un sitio web a cualquier persona sin ser un diseñador o un programador, pero hay limitantes para lo que una persona sin conocimiento pueda hacer, sin embargo, en la inmensa mayoría de los casos, estos sitios web pueden quedar bastante bien, lo único que podría mencionar es que el tiempo invertido será bastante mayor.

Ahora bien, como describí anteriormente, un sitio web está mejor fabricada si se hace en equipo, debido a la naturaleza del producto, pero profesionales independientes pueden fabricar sitios con resultados muy buenos. Un diseñador gráfico hará una página más bonita pero probablemente menos funcional, un programador o ingeniero en sistemas hará un sitio más funcional, pero quizá menos estilizada, pero ninguno de los dos hará una página que venda más, de la forma que lo hará un profesional de mercadeo.

Ahora bien, con las herramientas que tenemos en el mercado actualmente, casi cualquier persona puede hacer un sitio web. Si usted puede arrastrar elementos y escribir, puede fabricar usted mismo su sitio web. Probablemente la única verdadera diferencia es que usted demorará más tiempo pero le costará menos dinero, pero nadie sabrá mejor que usted, qué necesita de un sitio web. Claro, siempre hay limitantes en lo que las herramientas puedan hacer, y no se puede menospreciar la información que adquiere un profesional en el estudio de su carrera.

¿Cuánto se le paga a un diseñador de páginas web?

Un sitio web básico estándar de micro o pequeña empresa, con unas 5 páginas puede tener un precio de US$300 a US$500, mientras que una tienda virtual con unos 25 productos o servicios puede costar de US$500 a US$750 o más.

Un sitio web estándar típico de micro o pequeña empresa, con información de la empresa y sus colaboradores, de sus productos y servicios y medios de contacto, puede tomar unas 25 horas de trabajo más o menos, mientras que una tienda virtual puede extenderse de 35 a 45 horas o más, dependiendo de la cantidad de productos, y las complejidades de configuración de los sistemas de envío y el cobro.

Dependiendo mucho del tipo y calidad del profesional, el país en el que vive y muchos otros factores, un profesional individual puede cobrar desde US $8.oo por hora, pero un buen promedio podría ser $12.oo por hora, sin embargo, profesionales con una infraestructura mayor podría cobrar más de $100 por hora, todo depende del conocimiento y experiencia, y si es un profesional solo o respaldado por una agencia.

Una de las cosas que más genera aumento de costos a la hora de contratar un diseñador web, es no tener claro los objetivos, y listas las imágenes y textos. Esto es crucial, ya que el no tener la información completa genera pérdidas de tiempo.

¿Qué incluye el diseño de una página web?

Aparte de diseñar el sitio web, el diseñador web debe instalar el sitio y publicarlo, en el espacio de hosting del cliente, debe indicarle a Google que el sitio existe, y configurar la recolección de datos para el cliente. Debe entregar, toda la documentación del sitio web, esto es, un reporte del sitio correctamente documentado, así como los respaldos de la información, y del mismo sitio web, para que este sea restituido en caso de una eventualidad, por cualquier persona que uno contrate.

El cliente debería dar los logos, fotografías y textos, así como la estructura deseada del sitio, mientras que el profesional debe implementar lo aportado según las especificaciones del cliente. Sin embargo, algunos clientes si proveen logos y algunas fotografías, pero no proveen los textos, y hay que escribir la información de la mejor manera, para luego presentarla y que sea corregida por el cliente.  Muchas veces también se espera del diseñador, que aporte imágenes y gráficos de su propia autoría o genéricos, pero que cumplan con la necesidad propia.

Entre más información se le provea al diseñador de sitios web, más rápido avanzará el proyecto, es posible que salga más económico, y quede mucho mejor. Nadie mejor que el propio cliente para la edición de la información.

Con respecto a los aspectos técnicos de dominio, hospedaje certificados SSL y cuentas de correo, lo ideal es que el cliente posea él mismo su información, en cuentas que pueda manejar personalmente, independientemente del diseñador contratado, sin embargo, por falta de conocimiento el cliente deja en manos del diseñador web, todo lo relacionado con respecto a los temas técnicos, lo cual es un grave error, ya que más adelante, la relación con el diseñador puede verse comprometida, y si él tiene control de todos los datos, sus cuentas y sus Dominos y más, el cliente queda en una posición de vulnerabilidad no recomendada, y puede perder todo el trabajo y el dinero invertido.

Si desea contratar los servicios de Dominios, hosting, correos y certificados SSL, nuestra empresa da un excelente servicio, revisar precios en el menú

¿Qué significa documentar un sitio web?

Documentar un sitio web es una buena práctica de cualquier diseñador o programador que crea un sitio web para terceros, en donde en la actualidad o a futuro, intervengan otras personas. O incluso de cualquier persona que individualmente crea el sitio web para uso propio, ya que nunca sabremos cuál pueda ser el resultado final, y que tan lejos nos llevará un trabajo como este, especialmente si está correctamente fabricado desde el inicio.

Documentar un sitio web es la práctica de escribir en un documento las razones de por qué se tomaron las decisiones, cuáles fueron los resultados, y qué otras decisiones se tomaron en el proceso de diseño y creación del sitio web. Debe incluir desde lo más básico y obvio, hasta lo más complejo. Aspectos técnicos, de diseño, de mercadeo, de función y de usabilidad.

Esto ayudará a otras personas no solo visualizar el estado actual del sitio web, y los cambios que en el tiempo se han realizado, sino también ayudará a entender las razones de las decisiones tomadas, aun cuando las personas que tomaron esas decisiones no se encuentren cerca.

¿Cómo documentar el diseño de una página web?

Hay 15 aspectos importantes a la hora de documentar un sitio web. Estos son los considerados más relevantes, sin embargo, cada sitio es diferente, por lo que cada documentación también lo será.

1. Escribir la justificación del proyecto, la fecha de creación, el entorno económico, de mercadeo, lo que motiva la creación del sitio, cuál o cuáles son los problemas o desafíos que intenta superar
2. Enumerar los objetivos que desea cumplir el sitio web.
3. Mostrar el ordenamiento lógico de la información a tratar, y escribir las razones de tales decisiones, que permiten luego entender qué se hizo y por qué.
4. Mostrar en esta documentación el diagrama de flujo planteado inicialmente.
5. Mostrar cuáles palabras clave se estudian y el por qué de la escogencia de esas palabras clave para el estudio.
6. Describir lo mejor posible el proceso de estudio de palabras clave, cómo se realizó, que aspectos se analizaron, cómo se categorizaron las palabras clave, y cuáles fueron los resultados obtenidos
7. Describir lo mejor posible el proceso de análisis de la competencia de esas palabras clave, cuáles otros sitios se estudiaron, qué aspectos se estudiaron y cuáles fueron los resultados de esos análisis, tanto desde el punto de vista de competencia, como desde el punto de vista de usabilidad de los diferentes sitios.
8. Hacer una explicación clara de los resultados de ambos procesos, y la descripción de las razones de la jerarquización final adoptada.
9. Según el resultado de estos análisis, se plantearán las estrategias de mercadeo necesarias, y hay que documentar muy bien este proceso, para el posterior análisis de los resultados.
10. En este punto se debe documentar el proceso de compra de los sistemas técnicos y el dominio, cuáles fueron las razones para escoger la compañía seleccionada, según precio, características técnicas, reputación y más. Hay que incorporar aquí los usuarios y claves de acceso. Este documento y su información es de carácter sensible.
11. De acuerdo a los resultados de este proceso, muy probablemente se replanteará el diagrama de flujo y las consecuentes páginas que conforman el sitio web.
12. Luego se documentan las diferentes versiones de redacción planteadas y sus respectivas correcciones con la explicación adecuada y justificada de cada corrección hasta la versión final.
13. Se debe documentar la solicitud del material gráfico y lo entregado por el diseñador, junto con las correcciones (si las hubiera), diferentes versiones (Si las plantearan) y la decisión final justificada.
14. Es importante guardar dentro de este proceso los diferentes respaldos del sitio web, con fecha, y razones de los diferentes cambios.
15. Por último, se debe mantener vivo el documento, con los constantes cambios y modificaciones que se hacen en el proceso.

Conclusión

Con esto tenemos una idea clara del Qué, Quién, Cuánto y Cómo del Diseño de sitios web, espero hayan encontrado respuesta a sus preguntas.

Este es una de una serie de publicaciones que pretende educar con respecto a los diferentes aspectos del ecosistema Internet, servicios básicos, buenas prácticas, diseño y mercadeo web, siempre desde el punto de vista de lo correcto, sin atajos misteriosos y prácticas poco éticas, sino más bien en concordancia con lo que los motores de búsqueda quieren que las personas y las empresas hagan en Internet. Le aconsejamos inscribirse en nuestro News Letter para recibir las últimas publicaciones y algunas ofertas, garantizamos que no recibirá más de 2 emails por semana, y no más de 6 emails al mes.