Tutorial de Diseño Web

15 Jul 2020 in

admin

Diseño web – definición: Se define diseño web como la actividad que consiste en la planificación, estructuración, diseño e implementación de un sitio. No es sencillamente una aplicación del diseño convencional sobre Internet, como hacerlo gráfico para expresar estéticamente la identidad visual de la organización, puesto que factores como la usabilidad, la arquitectura o estructura de la información y la experiencia del usuario son requisitos a tomar en consideración desde las primeras etapas del proyecto.

Por lo precedente, el diseño web consiste en hallar un término medio entre la estética y el desempeño, un lugar lo suficientemente atractivo como para que el usuario no salga corriendo y que además cumpla con unos requerimientos de usabilidad, funcionalidad, estructura y navegación que permita a los usuarios localizar lo que están buscando y a la empresas cumplir sus objetivos.

1) Programas de diseño web

Técnicamente, existen múltiples formas y programas de diseño web para llevarlo a cabo:

Mediante la creación directa en código HTML.
Mediante programas como Dreamweaver o bien Microsoft FrontPage.
El diseño web que emplea de manera directa lenguajes de programación del lado del servidor como ASP.NET, JSP, PHP
O el más popular, que es utilizando un sistema CMS (sistema de gestión de contenidos), que permite independizar el diseño web del contenido como tal, permitiendo así al diseñador web la posibilidad de gestionar o bien dirigir el contenido de forma separada e independiente del diseño web propiamente dicho.

El CMS más popular es WordPress, dado que es el más funcional y preparado para la mejora de la visibilidad de la página web en los resultados de búsqueda en Google, Bing, etcétera En los siguientes enlaces tienes mucha más información sobre WordPress y CMS.

2) Precios diseño web

No es el fin de este tutorial de diseño web hacer una disertación sobre los costes del diseño profesional de páginas web. Solamente hacer ciertas aclaraciones al respecto. Además de la variedad de costes en el mercado, que dependen de múltiples factores, el diseño web y su coste en ocasiones no son acordes con el resultado. Primeramente, para poder analizar si el costo de un diseño web es apropiado, hay que tener en cuenta al menos 2 factores:

Se quiere una web a la medida o bien un diseño auto gestionable
Nivel de desarrollo

Hoy día existen numerosas plataformas que ofrecen tener una web sin coste. No hay que confiar que estos diseños serán óptimos. Nada que merezca la pena lo es. Ahí está el ejemplo de Wix, sobre el que hace bien poco escribí un artículo de evaluación, dando los . Otra cosa es WP, que sí, es una plataforma gratuita, pero existe la posibilidad de instalarla en un dominio y alojamiento que no lo son, y es lo que la mayoría de especialistas recomendarían. Se puede preguntar el artículo en el post y en .

Como se ve, el diseño web lleva implícito un amplio abanico de opciones. Así, se puede también hacer otro género de división de formas de realizar un diseño web, esta vez basado en el tipo de web que se quiere construir. Vemos a continuación ciertos de estos géneros de diseño y su público objetivo (basado en )

2.1) Diseño Web Avanzado

Diseño Web orientado a profesionales que desean contar con las nuevas tecnologías en el diseño de sus páginas web. Este diseño web avanzado es requerido primordialmente por empresas tecnológicas o clientes relacionados con el mundo audiovisual.

2.2) Diseño Web Clásico

Diseño tradicional que emplea los elementos básicos: texto e imágenes como contenido, al que se añaden ciertos elementos externos como widgets o bien plugins. Este diseño prescinde de elementos como flash, vídeo streaming o bien cualquier tecnología avanzada. Nada sin lo que no podamos vivir la mayoría de los mortales.

2.3) Diseño Web Industrial

El diseño industrial se hace cargo de las páginas web para industrias, multinacionales y grandes empresas. Son webs corporativas cuyo objetivo es representar la imagen de la compañía.

Descubre los de CITIFACE o

3) ¿Por qué “Diseño Web”?

Antes de los años setenta, el término diseño (a secas) no se empleaba, pues en las artes se usaban más los términos como técnica, confección, maestría. A fines de esa década, no obstante, se comienza a utilizar el término diseño, y junto a él, el diseño web, merced a la aparición de la informática y más tarde de Internet. El diseño empieza a ser entonces concebido como una herramienta de transmisión mediática.

Sin el diseño web, las páginas web no serían más que una maraña de datos y palabras en carpetas, de tal modo que los contenidos (se considera contenido tanto texto como imágenes) por sí solos no sirven. Lo que busca el diseño web es concebir o bien concebir una forma simple, eficiente y atrayente de presentárselos a los usuarios.

De esta forma, de la cohesión entre un buen diseño, una buena estructura web, y una jerarquía bien elaborada de contenidos, surge una buena página web, que además debe contar con otras características clave para su buen desempeño, como la funcionalidad y la usabilidad, entre otras.

Un diseño web eficiente se tiene que componer de los elementos citados para acrecentar su desempeño como lo que es (1) y las funciones que debe cumplir (2 y 3):

un canal de comunicación que da posibilidades como el contacto directo entre el productor y el consumidor de contenidos, característica resaltable de Internet,
un medio de satisfacer los requerimientos, necesidades o bien consultas del usuario y
un medio adicional de ingresos de la organización o bien negocio online, pues el diseño web tiene una dilatada aplicación en el campo comercial.

No debemos entonces olvidar que a fin de que el diseño web tenga éxito, la propia página web debe, más que nada, cubrir las necesidades, cumplir las expectativas del usuario y facilitarle encontrar la información que llegó buscando. En caso contrario, el diseño habrá fracasado.

4) El diseño web como unión de inventiva y técnica

El diseño web es una combinación de labor artística y conocimiento técnico. La creatividad y la creatividad juegan un papel esencial, si bien sin el conocimiento técnico preciso, las anteriores quedarían en nada. El objetivo de esta guía es reunir múltiples elementos decisivos que deberían tenerse en cuenta para obtener un diseño triunfante. Señalo deberían , porque es extraño que así sea. Por lo general lo que prima en el diseño es la estética, más que la funcionalidad, la visibilidad o el logro del objetivo de la propia web o bien el negocio on line. Y no obstante, ¿de qué sirve un sitio espectacular visualmente si no lo ve nadie?

4.1) Diseño web: “lo gráfico”

Pese a que el diseño web no sólo se compone de elementos gráficos, imágenes, disposición y organización o colores de cada página, sino también, como decía ya antes, de la estructura de las pantallas de las páginas y la sencillez del usuario para acceder a donde quiere llegar, en este punto nos centramos en factores de diseño gráfico únicamente, que merecen especial atención.

También, antes de proseguir con los factores del diseño web desde el punto de vista gráfico, es importante señalar los modelos de diseño, desde el punto de vista gráfico:

Diseño web «sólido» o de ancho fijo: en el diseño sólido, los elementos de la página conservan siempre exactamente las mismas dimensiones, independientemente de la resolución que empleemos cada uno en su PC o bien Mac. La ventaja de este tipo de diseño sólido es que, en un caso así, sabemos la apariencia exacta del resultado final, en cualquier dispositivo.
El diseño web «líquido» es aquel en el que los contenidos de la página se adaptan al dispositivo, a la resolución de la pantalla del monitor o aun al navegador. El diseño responsive o adaptable a dispositivos móviles se incluye en el diseño líquido, además de en el “mixto”, a continuación.
El diseño web “mixto” consiste en mezclar elementos de los dos anteriores. Unas partes de la página web son fijos y sostienen sus proporciones (por servirnos de un ejemplo la cabecera y el pie de página), al paso que otros elementos se adaptan en dependencia de la resolución o bien del dispositivo (como las imágenes, el texto, o bien el menú).

4.1.1) ¿Qué género de diseño de los precedentes es el mejor?

Depende de para quién. Si charlamos del diseñador web, probablemente prefiera el diseño sólido, en tanto que con él, puede controlar a la perfección la apariencia de lo que verá el usuario. Si hablamos del usuario, que es verdaderamente quien importa, entonces el mejor es el líquido o bien el mixto, y más en concreto el responsive. Si hablamos de Google, también prefiere que sus usuarios estén contentos, por lo que el diseño web debe ser responsive o, cuando menos, líquido ya que Google vela por que la experiencia del usuario siempre y en todo momento sea óptima.

4.1.2) Imagen gráfica en el diseño web

No cabe duda de que la estética y la apariencia tienen un papel esencial dentro del diseño web ya que los usuarios al fin y al cabo son seres humanos y tendemos a rehusar lo visualmente feo o bien no agradable. En este sentido, es importante que las páginas web sean estéticamente atractivas y que no fatiguen la vista, por ejemplo, con demasiadas llamadas de atención, una exagerada gama de colores o bien colores demasiado vivos de fondo.

De esta forma el diseño consigue favorecer y facilitar las consultas del usuario. Además de lo anterior, las imágenes, que son parte del contenido, han de estar optimados y no ser demasiado pesadas, puesto que en caso contrario la carga de la página sufre y a consecuencia de ello también el posicionamiento orgánico de la página web. Así se logra facilitar la consulta al usuario y ahorrar tiempo. Esto se hace eminentemente con la experiencia de usuario en psique, como factor clave, no sólo del diseño, sino más bien también del .

4.1.3) Distribución del contenido en las diferentes páginas

El flujo de la información ha de ser natural y fácil de continuar de forma intuitiva. En el diseño web, esto se aplica tanto a una sola página como al flujo entre múltiples. El sitio debe contar con una estructura web que tenga un orden lógico y debe discurrir de forma natural, asegurándose el diseñador web de que es fácil llegar a todas y cada una de las páginas de que consta la página. Además, es importante señalar que un buen diseño ha de cumplir con los estándares del para que garanticen no solamente una buena usabilidad y experiencia de usuario, sino más bien también la accesibilidad necesaria y otros factores, tanto para usuarios para motores de búsqueda.

En el sentido del diseño web desde el punto de vista meramente gráfico, también merece la pena tener otros puntos en cuenta como no llenar las páginas de elementos sobresalientes como demasiadas llamadas a la acción, títulos, cambios de fuente, tamaño o colores, etcétera En el siguiente artículo sobre el , se pueden ver en detalle estos y otros factores esenciales a este respecto que aplican, no solamente a la página de Comienzo, sino más bien también al resto.

4.1.4) Disposición gráfica de elementos generales

Para que el diseño web sea mejor, habría que proseguir una disposición gráfica congruente en todas y cada una de las páginas. O sea, que todas y cada una de las páginas estáticas se muestren con exactamente los mismos elementos o bien con muy pocas alteraciones. Esto es a excepción de la página de inicio, que siempre y en toda circunstancia ha de ser diferente, como explico en el enlace anterior cara el artículo sobre las páginas de Inicio.

Por lo general, al diseñar una web, se procura que todas las páginas sigan un mismo modelo, que consta de partes comunes en todas . Estas partes son:

Logo, en general a situar en el rincón superior izquierda. Lo normal es que el logo tenga un link a la página de Inicio.
El menú de navegación principal.
El encabezado o “ header”. Aquí suele aparecer una imagen o el nombre de la página web, el slogan, y en ocasiones los iconos de redes sociales, datos de contacto rápidos…
El cuerpo para el contenido, que debe constar por su parte de texto e imágenes o iconos.
El pie de página o “ footer”, al final de la página. Aquí se acostumbra a incluir información útil, últimas entradas en el weblog, otras llamadas a la acción…
Las barras laterales pueden aparecer o bien no. Acostumbran a albergar, por ejemplo, algún menú adicional, formularios de suscripción, llamadas a la acción por lo general. Si se ponen en una página estática, lo normal será ponerlas en todas y cada una o casi todas para mantener la coherencia estética.

4.1.5) Ubicación de la información más relevante

Como ya indico en las 20 Reglas de diseño para tu página de inicio, el sitio en el que se pone la información más (y menos) relevante es tan importante como el propio diseño. Dependiendo de qué se resalte y se deje de destacar, el usuario seguirá interesado o bien no en proseguir ahondando y navegando, por lo que cómo y dónde se dispone la información es clave en el diseño.

La información que esté situada en la parte superior de la página, sobre todo la parte superior izquierda, tendrá más probabilidades de ser leída por los usuarios de Internet. Mas no solamente se tiene que tener en cuenta la dirección en la que los usuarios ven y escanean la información (en diagonal desde el rincón superior izquierda hacia la esquina inferior derecha), sino cara dónde queremos que se dirijan desde allí.

Evitar incluir demasiadas llamadas de atención o bien a la acción es clave. Si hay demasiadas opciones, el usuario optará por abandonar la web en la mayoría de los casos. Si la intención es que se subscriba, por poner un ejemplo, hay que ubicar esa llamada a la acción en un lugar destacado y evitar que haya más o bien que, como mucho, hay 2 en toda la página.

4.1.6) Las imágenes en el diseño web

Además de la disposición del contenido y los colores, que veremos más adelante, el diseño emplea las imágenes para dar vivacidad y dinamismo a la web. Además, se emplean para trasladar una representación de la organización o bien el negocio en línea. Por esta razón es clave darles la relevancia que merecen, puesto que las imágenes pueden ser más valiosas que mil palabras, como afirma el refrán. Hay que tener cuidado también, como decía más arriba, con el peso de las imágenes. No únicamente ralentizan lacon la consecuente repercusión en la experiencia del usuario, sino que además esa repercusión es tomada en cuenta por Google en el momento de calificar la página y posicionarla en las SERPs(páginas de resultados de búsqueda).

Hay que tener en consideración también que las imágenes poco estéticas o mal usadas, pueden perturbar la comodidad visual del usuario o trasmitir sensación de poco profesionalismo, provocando así el abandono (la tasa de abandono de una web que esté indexada por Google es sabida por el buscador y vista como un factor que estropea la experiencia del usuario y la usabilidad, y por tanto el ranking y posicionamiento de la página web descienden).

4.1.7) Los colores en el diseño web

Los colores deben corresponderse con los colores de la organización, en especial los del logo. También hay que tener en consideración que los colores tienen un simbolismo implícito (colorado se relaciona de manera fuerte o pasión, verde con naturaleza, etcétera) e influyen en las personas, ya sea en su estado de ánimo o bien en su percepción. Por eso se deben elegir colores en función de la marca y también de los objetivos. Sin embargo, si bien es recomendable que expresen una sensación particularmente, ésta no es una condición imprescindible y no hay que obsesionarse. Lo que sí es esencial es que no se deben usar más de tres colores diferentes y que uno de ellos sea el dominante.

En el siguiente post, Pedro Corchero (@pedro__cm) profundiza en el tema de las tipografías y los colores en el en un buen post.

Si precisas un , no dudes en consultar la página haciendo clic en el link.

5) Etapas de un buen diseño web

A la hora de comenzar a maquetar una página Web, es fundamental tener en cuenta qué género de diseño deseamos emplear y qué objetivo y nicho de mercado perseguimos, pues dependiendo de unos o bien otros, el resultado final ha de ser muy diferente.

En la definición del principio de esta guía, decía que el diseño web es una actividad consistente en la planificación, estructuración, diseño e implementación de un sitio web. Por ende, es un procesoque consta de diferentes etapas. En uno de mis posts recientes, explicaba el proceso de planificación para diseñar una web rentable, y en otro algo anterior, contaba los errores más graves al diseñar una web. Ambos se complementan y vienen a resumirse en lo que siempre repito: antes de empezar cualquier proyecto, identificar la meta ( el qué) y para quélo deseamos conseguir. Después ya vendrá el cómo hacerlo, que es lo que nos ocupa en esta guía.

Antes de siquiera proponer el proceso de diseño web, construir unas bases recias sobre las que mantener el proyecto, es lo más importante. De lo contrario, por muy estupendo que parezca, realmente será endeble y sin ningún futuro (el). Por consiguiente, dado que el proyecto del diseño web es una parte de la última fase de planteamiento del proyecto web general, aconsejaría primero pasar por lo precedente, esto es, la identificación del nicho de mercado y de objetivos de la página web y su siguiente análisis. Sólo entonces el proyecto de diseño será triunfante.

5.1) Etapas del diseño web básico (no de un proyecto web):

5.1.1) Definición del diseño en términos de estructuración de información

Esta fase procede de manera directa de la última fase de la preparación que miento más arriba. Resulta conveniente, desde la información lograda a través del análisis, delimitar el ámbito al que nos vamos a referir en la página web, el tema y subtemas que trataremos y la información que queremos compartir. Todo ello de acuerdo con el propósito que persigue el diseño web y la página: informar, enseñar, vender, difundir… La estructuración del conocimiento en la web deja convertir la estructura secuencial tradicional en una estructura multi-secuencial. De esta forma, se prestará atención a las relaciones entre conocimientos más que a la información apartada.

5.1.2) Planteamiento del diseño en términos de apariencia

En esta fase se estudia la imagen que debe trasmitir la web objeto del proyecto, siempre y en toda circunstancia de acuerdo con los objetivos que se plantea cumplir, de ahí la importancia de identificar esos objetivos primero.

5.1.3) Planteamiento del diseño en términos de estructura

Más importante incluso que la anterior, aquí se propondrá la estructura básica de los contenidos, con su eje principal en el menú de navegación, que parte de la página de Inicio: qué páginas va a incluir la página web y si son coherentes entre sí. Cómo se dispondrán en el menú y submenús. Se puede realizar un boceto de la estructura en la que se representarán las páginas principales de la página. Casi todas las páginas web, con escasas salvedades, cuentan con 3 páginas siempre: página de Comienzo, página de Contacto, y página sobre la compañía (la típica “Quiénes somos”). Además, para el buen posicionamiento natural de la página web, es casi indispensable contar con un weblog, que aporta el dinamismo necesario a fin de que los motores de búsqueda visiten la página habitualmente.

Me refiero a la correcta y lógica presentación de las páginas de una web una vez ratificado el menú principal de navegación precedente y su estructura, así como su interrelación. Creadas y distribuidas en menús y submenús las páginas que componen la web, se procede a articular los enlaces internos de forma que su navegabilidad, estructura interna y usabilidad sean óptimas.

5.1.4) Planteamiento del diseño en términos de disposición de elementos

Cuando ya se ha aprobado el borrador precedente del diseño, se puede pasar a la siguiente fase de la definición o bien elección de otros elementos auxiliares que llevarán las páginas. Pies de página, cabeceras, barras laterales etc.

5.1.5) Buen Diseño Web de la página de Inicio

La página de Comienzo es la página más esencial y relevante de toda la web. El usuario solamente dará una oportunidad a esta página. Si no es de su gusto o interés, o no halla a simple vista o de forma intuitiva lo que anda buscando, probablemente jamás más volverá. Como decía más arriba, hay un artículo que trata el tema delde forma más específico y detallada, puesto que el diseño de la página de Inicio difiere en muchos puntos del resto de pautas del diseño web general.

5.1.6) Configuración interna

La configuración interna de una web supone, además de su aspecto y funcionalidad, su buena disposición para ser leída y también interpretada por los buscadores web. Se han de incluir etiquetas meta, descripciones meta, títulos meta, enlaces permanentes que sean posicionamiento en buscadores friendly etc. Da a los buscadores web la posibilidad de entender en su lenguaje la temática general de la página. Una buena configuración interna de base es clave para tal fin y errar en este aspecto puede resultar en un posicionamiento nulo de la misma, con la coherente invisibilidad para los usuarios y fracaso del diseño web y de la propia página.

5.1.7) Inclusión de contenidos

El contenido perceptible de una web consta de textos e imágenes. Debe mantener un elevado nivel de coherencia temática entre páginas y en exactamente las mismas. Lo ideal es que sea cuantioso, cuanto más, mejor. De ahí también la necesidad de un weblog, no únicamente por el dinamismo que aporta y mentaba antes, sino para alimentar la página de abundante y dinámico contenido, siempre que exista una relación lógica y acorde con la temática de la web.

El contenido debe siempre ser lo más claro posible, de fácil de lectura y comprensión. No es preciso decir que ha de estar exento de faltas de ortografía y conviene revisarlo siempre y en toda circunstancia ya antes de su publicación. Igualmente ocurre con los formatos de los textos y disposición de las imágenes: revisar el aspecto como lo verá el usuario antes de publicar.

También hay que tener en consideración el tono de escritura, que ha de ser familiar y cercano, y debe promover la conversación y el engagement(que surja en el usuario el deseo de participar, comentar, repartir o bien compartir contenido).

5.1.8) Testeo o bien ensayo

Preparada la página para su puesta en marcha, es conveniente testar todos de sus elementos, desde la correcta introducción de datos hasta el funcionamiento de los formularios, pasando por la comprobación de menús y enlaces, en pos de posibles enlaces rotos, etc.

Más información sobre métodos posibles para realizar la evaluación (es algo antiguo pero de manera perfecta actual en su información y muy aconsejable): .

6) El impacto del diseño web en la satisfacción del usuario

El primer paso para la composición de un marco teórico que sostenga el diseño centrado en la experiencia del usuario y la usabilidad es, indudablemente, conocer qué factores del diseño influyen en la satisfacción del usuario. Al principio de la guía se han identificado ciertos factores del diseño web que tienen una relevancia vital en cualquier proyecto web que se quiera realizar de forma seria. Hablábamos de la apariencia o el aspecto más gráfico (ya explicado) de la usabilidad, la estructura y la funcionalidad primordialmente.

Aunque podríamos añadir más factores, como la navegabilidad, la verosimilitud, la accesibilidad, la utilidad, etcétera, e incluso también hacer una distinción entre los factores que están más orientados a impedir la frustración y otros cuyo objetivo es facilitar la satisfacción del usuario (cosas muy diferentes), no creo precisa esa división en esta guía. No obstante, puedes consultar “” de Yusef Hassan Montero de la Universidad de Granada si deseas ahondar en ese tema.

Sí tiene especial relevancia en el diseño web la usabilidad, tanto por su relevancia de cara al posicionamiento orgánico de la página web y la calificación que asigna Google a cada página, como por su función vertebral al estar interrelacionada con el resto de factores. En igual medida, el alcance de otros dos factores, la estructura y la funcionalidad, es vital en el diseño. De esta forma, los 3 factores serán el centro de este apartado sobre el diseño desde la perspectiva de la satisfacción del usuario.

6.1) Clientes potenciales: tu objetivo

En primer lugar es esencial resaltar que tener presencia en la red supone la necesidad de satisfacer a un público potencialmente masivo. Público que, dado que es incontable, será heterogéneo en sus necesidades y objetivos y esto debe ser tenido en cuenta. Si el usuario que aterriza en una página web, no ve su consulta o bien necesidad satisfecha, lo abandonará en pos de otras alternativas que sí satisfagan sus necesidades. De ahí que sea natural que, cuando charlamos de diseño web, el éxito o bien fracaso de cualquier página web se supedite, como primer factor, a la satisfacción del usuario (después de su buen posicionamiento, claro. De poco sirve un buen proyecto de diseño, si su visibilidad es nula).

Una forma eficaz de asegurarse una mayor satisfacción del usuario, desde la perspectiva del contenido y no de la técnica, es, simplemente, identificar y describir a ese usuario potencial de la manera más detallada posible, de forma que seamos capaces de crear un contenido que se ajuste a su conjunto de características, más homogéneo que el que mencionaba al principio (me refiero a la). Lo que es seguro, es que un usuario satisfecho pasa de una página a otra de exactamente la misma web, pasa más tiempo en ella que la media, vuelve a visitarla y además posiblemente la recomiende a otros, sobre todo actualmente, con la irrupción y poder de las redes sociales. Todo lo precedente impacta positivamente la experiencia de usuario, que a su vez favorece el, o posicionamiento natural.

6.2) La Usabilidad como factor vertebral en un buen diseño web

Aunque es un concepto complejo y difícil de delimitar, entre las variables que condicionan la satisfacción del usuario destaca el diseño, determinado en última instancia por la usabilidad y la experiencia del usuario, que además es relativamente fácil de medir, a través de multitud de herramientas de analítica web, como puede ser Analytics.

Usabilidades un término que en español no había sido usado hasta que irrumpió la usability, un anglicismo que significa facilidad de empleo. La ISO de 1998 explica cómo la usabilidad se puede delimitar en términos de eficacia, eficiencia y satisfacción con la que un usuario puede conseguir su objetivo, en un contexto de empleo específico. La usabilidad por su parte está compuesta de otras características como la sencillez de comprensión y aprendizaje, operabilidad o bien el grado de atracción y conformidad.

La evaluación de usabilidad en términos de satisfacción del usuario (como facilidad de lectura y comprensión, la sencillez y comodidad de uso, su atrayente tanto visual como técnico, aun el placer generado en la interacción, por ejemplo) asegurará la no frustración y no desmotivación del usuario, como poco. O sea, que un diseño sea usable en este sentido, dependerá de que funcione adecuadamente y de tener una adecuada estructura y jerarquía de información, primero. Y después, de la inclusión de elementos que faciliten, promuevan y provoquen una motivación positiva a permanecer en el lugar.

(Mas no hay que confundir el atributo funcional (que funciona cubriendo unas necesidades adicionales a su función) con la funcionalidad (conjunto de características que hacen que algo sea práctico y utilitario) y con las funcionalidades (atributos que se refieren a la existencia de un conjunto de funciones y sus propiedades específicas que mejora una experiencia de usuario). Esto lo vamos a ver más detalladamente en el apartado sobre el diseño y la satisfacción del usuario desde la perspectiva del factor funcionalidad. Igualmente, no hay que confundir una estructura bien jerarquizada en el menú de navegación y sus páginas adyacentes, con la estructura interna de enlaces y navegabilidad que da una buena estructura web, como base de su visibilidad y buen posicionamiento. También veremos esto en el apartado correspondiente).

Sigue el enlace para más información sobre.

6.3) El factor Funcionalidad

Por regla general, el concepto de funcionalidadse refiere al correcto funcionamiento técnico del sitio. Por ejemplo, aparte de que una aplicación o bien una web sean fáciles de utilizar, si no hacen su función, no serán útiles ni de valor para el usuario.

Sin embargo, como decía algo más arriba, esta definición de funcionales imprecisa e incompleta, puesto que no se trata de que algo funcional sencillamente lleve a cabo una función sin fallos, sino más bien de que además cumpla un fin, y cubra unas necesidades. Una web puede funcionar de manera perfecta y aun así no ser capaz de conseguir sus objetivos, lograr clientes, por servirnos de un ejemplo. En ese caso, no es funcional, sino más bien operativa.

Tampoco hay que confundir el atributo funcionalcon la funcionalidad, conjunto de características que hacen que algo sea práctico y utilitario, y con las funcionalidades, atributos que se refieren a la existencia de un conjunto de funciones y sus propiedades específicas.

Con el próximo ejemplo queda más claro:

WordPress es un gestor de contenidos altamente funcional: no solamente funciona siempre y en toda circunstancia, sino que además supera su función puesto que consta de una enorme funcionalidad por el hecho de que, en conjunto, es un CMS que resulta práctico y utilitario, esto es, antepone su utilidad al resto de sus cualidades.

WordPress, además, posee la capacidad de añadir múltiples funcionalidades. Además de las que ya tiene por defecto, como es la posibilidad de crear una web al unísono que un weblog, también tiene la opción de instalar miles de funcionalidades más, como puede ser una tienda eCommerce o bien un formulario de suscripción. (Fuente: LibroISBN ).

De ahí que no esté conforme en atribuir la pura característica “que funciona” al atributo de diseño “funcional”.

Entonces, desde la perspectiva del diseño web, qué es la funcionalidad, qué significa que una web sea o bien no funcional y qué debemos tener en consideración antes, la funcionalidad o bien la estética.

Hasta principios del siglo XX, las viviendas pasaron de ser, un lugar para tener abrigo y poco más, a ser viviendas funcionales, es decir, que además fuesen capaces de satisfacer ciertas necesidades auxiliares de sus habitantes. Le Corbusier fue uno de los precursores de la idea de comprender al residencia como una máquina. Sobre esto baso mi conjetura de que funcionalNO es algo que marcha, sino cumple la función de, o consigue, satisfacer las necesidades de sus usuarios, más allá de hacerlo sin errores. Una mesa de comedor es funcional solamente de ser posible comer sobre ella. Si es demasiado alta o bien baja para este menester, no es funcional, si bien no tenga defectos y funcione.

Por tanto, desde el punto de vista del diseño web, una web funcional es una web que cumple su función (objetivo), no que solamente funciona. Puede ser completamente operativa, tener una estructura impecable, tanto interna como externa, ser estéticamente magnífica, pero si no cumple el objetivo, se trata de una web deficiente y no funcional.

Es por este motivo preciso, a fin de que la web tenga éxito, tener bien claro cuál es precisamente la meta que debe alcanzar un negocio online. En caso contrario, no se puede aguardar que lo cumpla, pues el propio diseño web no cumplirá con uno de los requisitos elementales: la funcionalidad, que cumpla su función, su objetivo.

Una vez el diseño cuenta con el factor funcionalidad, o sea, orientado a sus objetivos, a través de, por ejemplo, elementos que permitan la compra de productos, habrá que identificar qué otras funcionalidades se quiere añadir, como pueden ser, que animen a la suscripción, o que dejen y promuevan su difusión en las redes sociales, por poner sólo dos ejemplos.

6.4) El factor Estructura Interna

La llamada Arquitectura de la Informaciónse define como “ el arte y la ciencia de organizar espacios con el fin de asistir a los usuarios a satisfacer sus necesidades de información. La actividad de organizar comporta la estructuración, clasificación y rotulado de los contenidos del lugar web”.(Toub; dos mil).

Con estructura webmuchas veces suele referirse a la arquitectura y jerarquía de las páginas, a los menús de navegación e incluso a los mapas de sitio, una suerte de índice jerarquizado del contenido de toda la página web. Esto es, no obstante, un solo componente de la estructura desde el punto de vista del diseño web.

Si bien es absolutamente cierto que todos esos elementos y su eficiencia son clave en el diseño web, también es incompleto. La estructura web interna, a pesar de ser definitiva tanto en la navegación del usuario como de los motores de búsqueda en el momento de indexar las diferentes páginas de un sitio, también es ignorada en la mayoría de los casos. En definitiva, la estructura web, toda ella, tanto interna como externa, viene siendo, junto con la funcionalidad, la otra pata que mantiene la usabilidad del sitio y la experiencia del usuario.

No es suficiente con tener uno o múltiples menús para asegurar la usabilidad y la navegabilidad. Si no hay enlaces. Si bien en un proyecto de diseño web se cree un menú externo por el que navegar, los links internos que se colocan dentro del contenido de cada página independiente y que lleven a otras páginas, son indispensables para la navegación y el rastreo de los buscadores. Esto promueve el interés del usuario en saber más del tema al que se refiere el enlace, cosa que no haría si no estuviese descubiertamente expuesto. Lo mismo le ocurre a la “araña” de Google, que si no identifica esos enlaces que le dan paso a otras páginas de exactamente la misma web, abandona la misma porque piensa que el camino finaliza ahí.

La estructura interna de enlaces y una elección apropiada de textos ancla para los mismos es esencial para el éxito de cualquier proyecto de diseño web. Para crearla, es necesario no abusar de un número excesivo de links ni de las palabra clave que los anclan. Este texto es buen ejemplo de las dos cosas. Todas y cada una de las páginas de la web, incluyendo las entradas del weblog, tienen que hallarse enlazadas entre sí, evitando que ninguna quede aislada.

Una forma idónea de vertebrar los enlaces internos es determinar una página específica para cada palabra clave, a la que llamo nido, y a continuación dirigir todas y cada una de las menciones de esa palabra clave hacia la página nido. Si en la página A menciono la palabra clave “coaching” y tengo una página nido cuya palabra clave he determinado que sea “coaching”, debo dirigir un link hacia ella. De este modo Google y el usuario detectan cuál es la página esencial para esa palabra. En el apartadoencontrarás más detalle sobre este tema y los textos ancla.

Como digo al principio de este apartado, hay otros factores esenciales del impacto del diseño en la satisfacción del usuario, como la findability, la utilidad, o la credibilidad. Si se quiere más información sobre ellos, recomiendo el trabajo citado antes, “” de Yusef Hassan Montero de la Universidad de Granada.

6.5) Plantillas de diseño web

Al principio de este tutorial de diseño web, hablábamos de posibles formas de crear una página web. Básicamente son dos formas: programación (o personalizadas) y a través de un gestor de contenidos. Además de estas opciones, están los servicios que dan al unísono alojamiento y dominio, además de plantillas. Veamos, ya antes de pasar al tema de las plantillas, explicaré en más detalle qué son cada una de estas dos últimas formas de diseño web (aunque se pueden adquirir también plantillas para diseño web en jQuery, Flash, etcétera, no es lo más frecuente, y si el diseño es absolutamente adaptado, con programación, no puede estar basado en plantillas de diseño).

6.5.1) Diseño en Content Management System o bien gestor de contenidos

Los Content Management System, por contra, están basados en plantillas enormemente customizables, o sea, personalizables al gusto del usuario. Los Content Management System tienen su origen en las bitácoras de antaño. Éstas eran, básicamente una sola página que estructuraba contenido dinámico (los famosos posts, artículos o bien entradas) de forma cronológica. Empezaron siendo muy empleados por viajeros, escritores y personas que deseaban simplemente expresarse. WP comenzó siendo el Content Management System por excelencia y todavía lo es, merced al gran desarrollo que prosigue realizando regularmente, implementando nuevas funciones, y evolucionando a un paso mucho más rápido que sus “coetáneos”.

De esta forma, WordPress evolucionó hasta pasar de ser sencillamente una plataforma de blog a ser una plataforma de web, esto es, que podía incluir páginas estáticas. A partir de esta novedosísima peculiaridad, el resto de CMSs siguiéronle los pasos.

En este punto, si alguien quería una web, con weblog incluido, en WP o bien cualquier otro CMS similar, tenía la solución idónea.

Hay que aclarar que WordPress tiene 2 vertientes, WordPress.com y WordPress.org. Ambas plataformas como tal son gratuitas, no cuestan en sí mismas nada. La diferencia entre las dos radica en el alojamiento.

Los dominios (la parte que sigue después del y hasta el .es, .com etc.) han de estar alojados en algún sitio, en el que vamos poniendo la información de la página web o blog. Es un lugar público, de ahí que se puede ver en la red y desde cualquier sitio del mundo. Ahora bien, el alojamiento y el dominio pueden ser gratis o de pago.

comofrece dominio sin coste y alojamiento gratis, igual que lo hacen Blogger o bien muchas otras plataformas. En ese caso, el dominio y URL quedarían de la próxima forma:

midominio.wordpress.com, midominio.wix.com, midominio.blogspot.es, etc

No muy profesional, aunque para según qué cosas, sirve. No hay que hacer nada más registrarse con una dirección de correo electrónico y de forma instantánea, se habrá registrado el dominio y alojamiento, on-line. No hace falta instalar nada.

orgsigue siendo gratis, la diferencia radica en que en el caso de WP.org, sí hay que ser dueño de un dominio por el que habrá que pagar, así como del alojamiento que alojará, valga la redundancia, la información del sitio web, que también hay que pagar. En un caso así, el dominio y URL quedarían de la próxima forma:

midominio.es

Bastante más adecuado y serio para un negocio online. Generalmente este proceso es más largo y también implica a más partes: persona o bien organización, servicio de alojamiento web y Wordpress como paso final.

Otros CMS populares: Joomla!, Drupal, Prestashop, Magento…

6.5.2) Diseñofijoen servicios de alojamiento

Hay empresas de servicios de hosting que, además de ofrecer dominio y alojamiento, han desarrollado en sus servicios la posibilidad de crear la página web directamente con ellos. Realmente también se trata de gestores de contenidos, CMS, solo que solamente los emplean quienes adquieren los servicios de hosting con ellos.

Es el caso de One and One mi web, Jimdoo Wix.

En estos casos, se está sujeto a condiciones particulares y restricciones de cada alojamiento en cuanto al diseño, como mínimo. Además, cambiar de alojamiento con posterioridad, puede ser un auténtico martirio. En realidad, este “servicio” en realidad no es más que una forma de anudar de pies y manos al usuario. Me explico, aunque brevemente. En el blog post sobre las, explica más en profundidad los inconvenientes de este género de plantillas de diseño “fijas”, porque tienen flexibilidad cero, tanto a nivel de diseño como de terminación de contrato.

Al diseñar una web en una de estas plataformas que no son de software libre, resulta prácticamente imposible desligarse de las mismas a menos que se tengan buenos conocimientos informáticos (cómo trasladar dominio y contenido de la web a otro hosting). Si bien pueda, por ese enunciado entre paréntesis, parecer fácil, es mucho más complejo de lo que parece puesto que implica factores complejísimos como las DNS, el correo electrónico y muchas cosas más, que no voy a entretenerme en precisar. De ahí que la mayoría de clientes, aunque / si están descontentos con el servicio, por último desistan de trasladarlo y se queden retenidos sin más opción que conformarse o bien adquirir otro dominio y alojamiento con otro alojamiento web, con la consecuente pérdida que ello supone. No solamente económica, sino también del contenido hasta el momento subido, que quedará atrapado en el antiguo servicio de alojamiento web. En suma, considero este tipo de plantillas o bien mejor dicho, de servicios, de poco o bien nulo valor añadido ya que no son sino una forma de maniatar a los clientes del servicio, sabiendo que la mayoría son inexpertos en estos temas.

6.5.3) Las plantillas

Entonces, en cuanto a las plantillas de diseño, se pueden adquirir tanto de manera gratuita como de pago, y los formatos son innumerables: jQuery, Flash, phpBB2, phpBB3, HTML por supuesto, CSS… o las que ofrecen los distintos Content Management System como son WP, Joomla!, Magento, Blogger, Drupal…

Los CMS tienen temas o plantillas gratis y temas Premium, de pago. Obviamente los de pago, aparentemente, deben ser más desarrollados y administrar una más alto nivel de customización, si bien es cierto que muchos temas gratis ofrecen una gran personalización, sobre todo en Wordpress.

6.6) Cursos de diseño web

Existen multitud de recursos en internet donde puedes aprender desde diseño gráfico propiamente dicho hasta las bases del diseño web. Solamente debes «googlearlos».

Como hemos visto, puesto que, el diseño es clave para el éxito de cualquier web y negocio online, siempre y cuando se comprenda exactamente el mismo como la combinación de usabilidad, estructura, funcionalidad y estética.

Ir aen los que no debes caer.

En CITIFACE diseñamos usando un método exclusivo que incluye posicionamiento y copywriting para canalizar las ventas de tu sitio web.