El diseño web es una de las disciplinas tecnológicas que han venido evolucionando rápidamente

en esta última década y se ha convertido en una de las áreas de mayor oportunidad dentro de una
industria en constante evolución y crecimiento.

El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios
web. Un diseñador web tiene que ver con cómo crear y desarrollar un pagina web así también
como los clientes interactúan con ella. Los buenos diseñadores web saben cómo poner juntos los
principios de diseño para crear un sitio que se vea muy bien. También entienden acerca de la
usabilidad y cómo crear un sitio que los clientes quieren navegar alrededor de porque es tan fácil
de hacer.

Requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la

información y la interacción de medios como el audio, texto, imagen, enlaces y vídeo. Se lo
considera dentro del diseño multimedia.

PLANIFICACION

En el diseño de una página web, cuanto mejor sea la planificación, más fácil será la
implementación. Independientemente del propósito de la web, ya sean fines privados o
comerciales, planear bien la concepción de una página web es esencial para recibir beneficios en
el futuro. Por lo tanto, es fundamental contar con el tiempo necesario para generar ideas,
considerar opciones de diseño e implementarlas. Para contar con una presencia online
estructurada, es recomendable considerar e incorporar los elementos que enunciamos a
continuación.

 ¿CUÁL ES EL PRINCIPAL OBJETIVO DE LA WEB?

Antes de comenzar con el diseño de una página web es importante aclarar qué se quiere lograr y a
quién se quiere llegar; más específicamente, ¿cuál es el propósito de tu web? Esta será la base de
todo el trabajo y lo que orientará cada componente de la web hacia el mismo objetivo. Por
ejemplo, dentro de las intenciones de una web estarían aumentar la visibilidad de su contenido,
informar o publicar anuncios comerciales. En caso de que la web tenga fines comerciales, el
propósito será ganar clientes y vender productos. Para cualquier empresa o institución es
fundamental tener una buena presencia online, de lo cual una gran parte, se le atribuye al diseño
web.
  EL NOMBRE

Nombre de dominio. Define cómo se llamará tu sitio web. Tendrás que decidir entre colocar el
nombre de marca o una palabra clave. Comprueba que esté disponible y regístralo.

Presta mucha atención a este paso porque es de vital importancia. A través de este nombre será
cómo te ubique la audiencia. Por lo tanto, debe tener relación con tu sector y ser fácil de recordar.

 ESTRUCTURA

Cuando hablamos de partes de una web no sólo hablamos de aspectos de diseño, sino de aquellos
apartados o funciones generales que todo sitio web debería tener con el fin de que cualquier
usuario que acceda a la misma, independientemente del rol que juegue, ya sea un visitante
esporádico, un usuario registrado o un administrador de contenidos, pueda obtener fácilmente la
información contenida o, dependiendo del caso, le resulte sencillo hacerlo navegando por el sitio.

Home

La home o portada es quizá el elemento más importante de un sitio web. Dependiendo de lo

atractiva que sea ésta y de la cantidad de información, fotos, menús y demás elementos, que sean
utilizados de forma proporcionada y que un usuario vea al visitarla por primera vez va a
determinar la continuidad del mismo. Esto es crucial para sitios de comercio electrónico, donde se
busca que el usuario navegue y compre. Está estudiado que la mayoría de usuarios, si en 15
segundos no han visto algo interesante en una web siguen navegando a otro sitio y abandonan. Sí,
sólo 15 segundos.

Otro aspecto muy importante relacionado con la portada y, en general, con todo el sitio web es la
cantidad de dispositivos que pueden ver su contenido sin problemas. Es fundamental hoy en día,
cuando más de la mitad de los dispositivos que navegan por Internet son móviles o tablets, que el
sitio web se adapte correctamente. Esto es lo que tratábamos en anteriores artículos sobre el
Responsive Design.

Menús

Como parte fundamental de la navegación en un sitio están los menús. El menú debe ser claro,
vistoso y mostrar las secciones del sitio web, puede contener un buscador y se debe ocultar
cuando se accede desde un dispositivo móvil para mostrarse mediante un botón. En algunas
secciones podemos tener nuevos menús laterales que accedan a contenido filtrado relevante para
esa sección. Por ejemplo, y volviendo al ejemplo de un sitio Tienda online, es muy habitual entrar
en una sección de productos y en el menú lateral filtrar el contenido por marcas, precios, etc. O en
un Blog que aparezcan las categorías o nube de etiquetas de nuestros artículos.

Es un error muy grave mostrar menús principales demasiado cargados de opciones, que consiguen
perder y aburrir al usuario provocando su abandono, ¿recordáis los 15 segundos de antes? Pues
tenedlo en cuenta para vuestros propios sitios web.
Header

El header o encabezado es una parte importante del diseño web, contiene el menú principal y
muestra el logotipo de la empresa o el nombre del sitio. En la portada suele venir acompañado de
un slider o deslizador de imágenes con titulares o claims del sitio que invitan a seguir navegando.
Estas imágenes suelen ser de calidad y muestran fotos de la empresa, fotos relacionadas con el
sector, etc. Últimamente se han puesto de moda vídeos cortos de gran tamaño en vez de estas
imágenes. El tamaño del encabezado en la portada dependerá mucho del tipo de página, siendo
pantalla completa la web de un estudio de fotografía o un tercio de la altura un sitio de Tienda
online por ejemplo.

Footer

El footer o pie de página cierra todas las vistas de nuestra web. En él se mostrarán normalmente
las secciones más relevantes de nuestro sitio, los enlaces a las redes sociales de nuestra
organización, el acceso a contacto y los enlaces obligatorios por ley a la Política de Privacidad,
Cookies y Condiciones de uso. Dependiendo del espacio que tengáis puede ser interesante
mostrar la dirección o razón social, teléfonos, etc.

Secciones

De igual manera a la portada, nuestro sitio se organizará en secciones accesibles desde los menús
principales. El contenido debe ser claro y conciso. Es importante mostrar imágenes, fotos y diseños
vistosos para mantener el interés del usuario y es fundamental que las secciones estén bien
tituladas para que el usuario en todo momento sepa dónde está y de dónde viene. Para obtener
buenos resultados SEO es fundamental que estas secciones tengan título utilizando las etiquetas
HTML para tal efecto, es decir, h1, h2, ….

También es muy útil colocar los denominados breadcrumbs (“migas de pan” en inglés) que
muestran, junto al título de la sección, el camino por las secciones y apartados que hemos seguido
hasta llegar a la página donde nos encontramos. Esta funcionalidad nos permitirá volver a varios
niveles superiores pinchando en los enlaces mostrados en estas “migas de pan”, lo que permite al
usuario navegar de forma fluida conjuntamente con los menús disponibles en el sitio.

Contacto

Es importantísimo la retroalimentación por parte de nuestros usuarios, por lo que siempre

debemos proporcionar un mecanismo sencillo para el contacten con nosotros y sepan dónde
estamos. La sección más importante para ello es la de Contacto. Lo habitual en esta sección hoy
día es encontrar un mapa de cualquiera de los servicios conocidos existentes como Google Maps u
Open Map en donde se marque nuestra ubicación física, ya sea la de una tienda o varias, oficina,
etc. La dirección aparecerá destacada también junto a dicho mapa y en otra zona relevante de
esta sección un formulario de contacto.
En el formulario de contacto solicitaremos al usuario aquella información relevante para nosotros,
siempre y cuando no sea algo largo y tedioso que implique rellenar multitud de campos que
provocarán que el usuario se aburra. También es interesante que el usuario pueda preguntarnos
o enviarnos sugerencias en dicho formulario.

Conclusiones

Sin entrar profundamente en aspectos de diseño hemos mostrado en este artículo lo importantes
que pueden ser algunas decisiones a la hora de elaborar y configurar nuestro sitio web.
Dependiendo de lo que hagamos conseguiremos más tráfico que repercutirá en nuestros
resultados, ya sea vendiendo en un sitio de Tienda online, por publicidad que tengamos en
nuestro sitio o simplemente por darnos a conocer al mundo.

 ELEMENTOS DEL DISEÑO

Es aquí donde comenzarás a definir el aspecto visual del sitio.

Debes tomar en cuenta los fundamentos del diseño para que tu web funcione como desee. Por
ejemplo, la jerarquía visual o cómo quieres que se vean los elementos en la página. Qué quieres
que el usuario vea primero al llegar a una página.

Esto lo logras a través del tamaño de los elementos, colores, contrastes, uso de espacios en
blanco, alineación, entre otros

1.- Contenido:

La página no debe ser atractiva solamente en su parte visual, debe tener un contenido interesante
que atraiga lectores.
Ninguna página puede considerarse exitosa si no cuenta con un contenido apropiado y actualizado
frecuentemente. El contenido da la posibilidad real de aumentar el número de visitas y hacer que
los viejos visitantes consulten la pagina a menudo (porque encuentran siempre algo nuevo).

2.- Imágenes:

Deben usarse buenas fotografías, preferiblemente tomadas por un profesional. Es importante

presentar imágenes que no estén pixeladas (baja resolución) o desenfocadas, esto da una idea
sobre la calidad misma del sitio.
También se pueden utilizar ilustraciones sencillas (imágenes vectoriales).

3.- Tipografía:

Es importante utilizar fuentes llamativas pero que conserven una fácil legibilidad. La tipografía
debe llamar la atención del usuario pero debe conservar la línea de diseño del sitio.
También es importante variar el tamaño de una misma fuente para resaltar secciones interesantes
del texto.

4.- Botones e iconos:

Utilizar botones prácticos y representativos, así como iconos grandes y vistosos aumenta la
facilidad de navegación en la página y se dan una guía clara a los usuarios, no es necesario colocar
accesorios que no van a brindar un valor real, por ejemplo un reloj para clientes que se
encuentran en el mismo uso horario.

5.- Animaciones y movimiento:

Para generar una sensación de dinamismo, es bueno utilizar elementos animados. Pero es
importante no excederse con los elementos móviles, la cuota del 20% del total de la pagina es
suficiente, porque pueden causar saturación, distraer la atención de las cosas importantes que se
quieren decir y por ultimo sacar al usuario del sitio.

6.- Fondos claros y sencillos:

Los fondos claros o totalmente blancos facilitan la visualización, también dan un aspecto
despejado a la página resaltando las imágenes, existe la tendencia a utilizar fondos negros para
lecturas largas, para no cansar al lector con la luz del monitor.

7.- Enlaces a redes:

Es de gran ayuda para los usuarios incluir enlaces a redes sociales con las cuales se tiene
familiaridad y se interactúa con regularidad, también a sitios de interés. Esto con el fin de generar
comunidad y crear lazos de mutuo intercambio con sitios que pueden apalancar la oferta, como
proveedores y clientes actuales.

8.-Sobriedad:

Una página debe permitir una fácil visualización de los contenidos (videos, imágenes, textos),
saturar al cibernauta es contraproducente, si la información o contenido tarda en ser cargado es
una visita menos y un potencial cliente o negocio que no conoció la oferta que se propone, tener
un diseño sencillo con botones o enlaces en el lugar adecuado, genera un fácil reconocimiento y
navegación que en posteriores visitas se traduce en una identificación con los usuarios.

Cada día nacen muchas páginas, por lo tanto cada vez existen más opciones en la red, no olvide
que un sistema de contenido dinámico atrae y que es necesario actualizar la información de
acuerdo al ritmo que determine la organización, no se recomienda actualizaciones con más de un
mes calendario.

 COMUNICACIÓN VISUAL DE LA IDENTIDAD CORPORATIVA

El diseño corporativo contiene, además del logo, otros elementos importantes en lo que se refiere
a diseño web. Estos son los más importantes:

 Tipografía corporativa: Del inglés corporate font, la tipografía corporativa define el tipo de
fuente utilizado por la compañía de forma mayoritaria o exclusiva. Además de reconocible
y legible (también en diferentes tamaños) la tipografía debe adecuarse a la imagen de la
empresa, a su filosofía y al efecto que se busca. Es la fuente que debería usarse en todos
los textos, con frecuencia también se encuentra en el logo.
  Identidad visual: En muchos casos es conveniente incluir imágenes en la página web, las
cuales, además de aportar diversidad, son un medio para despertar emociones en el
receptor. La identidad visual se compone por el conjunto de imágenes, fotos, motivos y
símbolos que se usan y, como la tipografía, deben mostrarse de forma unitaria y
coherente. Tanto el contenido como el estilo de las imágenes deberían subrayar la imagen
que transmite la compañía en la web. Hay que evitar, por ello, imágenes en baja
resolución que denoten poca profesionalidad.

 Paleta cromática: Los colores han de estar escogidos en función del concepto general de
comunicación visual, ya que el diseño del logo, las imágenes, los fondos y otros elementos
visuales tomarán como referencia esta paleta de colores.

 Elementos técnicos
Por ello, a la hora de poner en marcha o renovar la web del centro educativo se debe tener en
cuenta las siguientes pautas técnicas:

 Rapidez de carga. Más de la mitad de los visitantes abandonará la página si tarda más de 3
segundos en cargar el contenido. Para evitarlo, trata de usar contenidos audiovisuales
ligeros y optimizar la web.
 Compatibilidad con navegadores. Es importante comprobar que la página es capaz de ser
abierta y mostrar el mismo contenido con cualquier explorador de internet, desde Google
Chrome o Internet Explorer hasta Mozilla, Safari u Opera, entre otros.
 Adaptación a móviles y tablets. A la hora de crear la web o elegir la plantilla, selecciona un
diseño ‘responsive’, es decir, adaptable a los distintos dispositivos tecnológicos, ya que
gran parte de los usuarios utilizan móviles o tablets para navegar por internet.

 Vínculos activos. Encontrar una web con enlaces que redirigen al frustrante error “No se
puede mostrar la página” da imagen de dejadez, aunque la página sea diariamente
actualizada. Documentos que son borrados, entradas que caducan o fallos de programación
pueden hacer que el visitante abandone el site antes de tiempo, por lo que es importante
revisar perió- dicamente que todos los vínculos funcionan correctamente.
 El posicionamiento. La mayoría de gestores de web dan la posibilidad de incluir pluggins o
herramientas de posicionamiento que ayudan a la hora de optimizar las entradas. Si quieres
que tu página aparezca en las primeras posiciones de los buscadores, no olvides cuidar el
SEO de todos los elementos de la web (páginas, imágenes y entradas).
 La analítica. Para poder evaluar el funcionamiento de la página es imprescindible contar con
sistemas de estadística web, como Google Analytics. De este modo, el centro conocerá
cuáles son las páginas más vistas, cuánto tiempo pasan los nuevos usuarios en el site, qué
urls presentan mayor tasa de abandono, cuál es el perfil de los visitantes, etc.
  LA NAVEGABILIDAD
La navegabilidad o navegabilidad web es la facilidad con la que un usuario puede
desplazarse por todas las páginas que componen un sitio web. Para lograr este objetivo, un
sitio web debe proporcionar un conjunto de recursos y estrategias de navegación diseñados
para conseguir un resultado óptimo en la localización de la información y en la orientación
para el usuario.

 LA PROMOCIÓN WEB
La promoción web consiste básicamente en atraer a los visitantes correctos hacia un
determinado sitio web mediante la implementación de un conjunto de actividades,
técnicas y métodos que hemos sintetizado en una serie de cinco pasos: 1) Determinación
de los objetivos, 2) Identificación del público objetivo, 3) diseño del mensaje, 4) decisión
sobre la mezcla de promoción web y 5) cuantificación de los resultados obtenidos con la
promoción web.