1. Paso 3: Opciones de diseño, maquetación y programación:
En base a las necesidades que hayamos detectado en el capítulo anterior podremos elegir
entre los diferentes tipos de web que existen actualmente en el mercado, y ya que es posible
que más de una pudiera cubrirlas, pasamos a explicar en qué consiste cada tipo, ventajas e
inconvenientes de las mismas.
Existen muchas más opciones como Joomla en lugar de Wordpress, Prestashop o Magento
para tiendas online, y muchos lenguajes de programación donde elegir, pero precisamente
por ser un tema tan extenso, nosotros vamos a hablar de las que creemos mejores,
obviamente teniendo en cuenta que es una opinión y no tiene por que ser compartida.(Esto no
sé si ponerlo de otra forma, pero era por evitar que nos digan cosas los listillos)
*3.1 Tipos de web
-
Diseño a la medida:
En este grupo podríamos englobar todos aquellos sitios web que, independientemente
de su posterior programación, parten de un diseño 100% personalizado y corporativo.
Normalmente se toma como punto de partida la identidad corporativa previamente
diseñada, utilizando los colores, tipografías e incluso formas definidas en ella (por
ejemplo si en el logo o papelería corporativa hay elementos redondeados, o si son más
bien angulosos, esto se podría aplicar a los diferentes elementos que vaya a llevar la
web, como botones, cajas de contenido, etc), consiguiendo así aumentar el estilo
corporativo.
Dentro de tener un diseño único y exclusivo diseñado, además de para reforzar tu
imagen de marca, para que haya tantas funcionalidades como necesites tener, hay
varios tipos de web donde elegir en lo que a programación se refiere:
o Página web en HTML: Si en el capitulo anterior definiste que no necesitas
actualizar los contenidos de la web, que lo único que necesitas es tener
presencia online, dónde te puedan encontrar y contactar, hablar sobre tu
servicios y/o productos y empresa, este tipo de web puede cumplir tus
necesidades a un bajo coste y sin perder la posibilidad de tener un diseño
propio.
 Ventajas:
Tienes acceso a la maquetación para optimizarla de cara a su
posicionamiento en buscadores
Podrás tener un diseño desarrollado exclusivamente para ti
Son de bajo coste
 Desventajas:
No podrás actualizar contenidos
Al no renovar contenidos ni poder compartirlos en redes sociales
no son la mejor opción de cara al SEO
Si necesitas realizar cambios necesitarás tener conocimientos de
maquetación o acudir a un profesional que te los haga
o Web desarrollada en Wordpress: Si lo que has visto que necesitas es una
página web que puedas administrar tú mismo de una forma sencilla, donde
poder añadir o borrar contenidos o secciones en un momento dado, subir

2. productos o trabajos nuevos realizados, o incluso tener un blog, esta puede ser
una buena opción para ti.
Wordpress es el CMS (sistema de gestión de contenido) de código abierto y
modificable, desarrollado en PHP y MySql, más popular, y por tanto, con mayor
número de plugins y widgets desarrollados en el mercado.
En un principio Wordpress se desarrolló con la intención de que se usara solo
para blogs, pero cada día es más habitual su uso para sitios web corporativos, y
en sus últimas actualizaciones ya la programación está más orientada hacia
esto.
Dentro de utilizar Wordpress también encontramos varias opciones:
1. Desarrollo de Theme a la medida:Esta opción, como en el caso de las
webs hechas en HTML, parte de una identidad corporativa y un posterior
diseño 100% a la medida, que después se maquetará e integrará con la
programación de wordpress
 Ventajas:
Tendrás una web completamente única y personalizada para ti.
Tendrás acceso al código para poder optimizarlo y posicionar la
web en buscadores.
Podrás integrar infinidad de plugins y widgets con diferentes
funcionalidades en tu web
Podrás gestionar el mantenimiento tú mismo
 Desventajas:
Realizar un diseño propio e integrarlo en wordpress, si tu web es
compleja, será bastante costoso.
2. Modificación de theme de partida: Otra opción, en muchos caso más
sencilla, es partir de un theme ya desarrollado, y modificarlo hasta conseguir
un diseño también a la medida.
 Ventajas:
Las mismas que en el caso anterior propias de wordpress
Reducirás costes y tiempos en el desarrollo del proyecto
 Desventajas:
Puede que la maquetación no sea tan limpia y óptima como si se
hubiera desarrollado de cero para tu tema.
o Web desarrollada con CMS propio: En el caso de necesitar una web
autoadministrable, con un diseño propio y exclusivo y varias funcionalidades
específicas para tu web, la mejor opción seguramente sea esta, ya que al estar
programada de cero exclusivamente para ti, podrás tener una web única y con
todo lo que necesites sin problemas de diseño, maquetación o integración.
 Ventajas:
Tendrás una web desarrollada expresamente para cubrir tus
necesidades, tanto estéticas como funcionales.
Podrás administrar tú mismo la web
Estará desarrollado de una forma óptima para su posterior
posicionamiento en buscadores.
Podrás tener el código validado tanto visualmente para todos los
navegadores y versiones de los mismos, como si código.

3. 
-
Desventajas:
Suelen tener un coste más elevado
No hay plugins y widgets ya desarrollados que puedas integrar
No tiene la comunidad que tienen plataformas como wordpress
Diseño basado en plantillas:
Ahora que ya hemos hablado sobre Wordpress, no queremos dejar de dar una tercera
opción basada en este CMS más económica que las anteriores, pero también mucho
menos personalizables.
Esta opción consiste en buscar un tema ya existente que cumpla más o menos con tus
necesidades estéticas y que ya tenga integradas las funcionalidades que necesitas,
para después modificar, dentro de lo que este tipo de páginas permite, la estética y
adaptarla a la tuya corporativa.
Podrás cambiar colores, tipografías y añadir tu logotipo.
o Ventajas:
 Recudirás significativamente tanto los tiempos como el coste económico
 Conservas todas las ventajas que tiene Wordpress y su uso
o Desventajas:
 Tendrás muchas limitaciones a la hora de personalizar y adaptar la
estética de la plantilla a la tuya corporativa
 Es posible que encuentres otras páginas realizadas con el mismo theme
que el tuyo, por lo que no tendrás un identidad visual propia ni exclusiva
*3.2 No es oro todo lo que reluce
Además de estas opciones, todos hemos oído hablar de empresas que ofrecen páginas web
que puedes crearte tú mismo y después actualizar de una forma sencilla por un precio
bastante razonable, pero por desgracia, no es oro todo lo que reluce.
Este tipo de páginas están prediseñadas y programadas igual, por lo que como en el caso de
la utilización de plantillas ya existentes en Wordpress, tú web no será para nada exclusiva
más allá de que puedas meter tu logotipo, cambiar un par de colores y buscar imágenes de
buena calidad.
Más allá de la estética nos encontramos con que no tendremos acceso al código ni a su
alojamiento, no podemos realizar modificaciones, ni tampoco optimizarla para posicionarnos
en internet, por lo que al final, no salen tan rentables como nos las venden.
También hay programas con los que sin tener conocimientos de diseño, maquetación o
programación web te puedes hacer tú mismo la página, pero este tipo de aplicaciones con la
que se trabaja de una forma visual, “traducen” los elementos que vamos introduciendo a
HTML, generando un código poco deseable que a los navegadores y buscadores no les suele
gustar nada, por lo que tampoco podríamos llevar a cabo acciones SEO, ni tendríamos una
web accesible.

4. Hoy en día una página web es como una tarjeta de presentación, en muchos casos será lo
primero que tus clientes o potenciales clientes vean de ti, y todos conocemos la importancia
de las primeras impresiones.
Será un medio a través del cual darte a conocer, y también en muchos casos un medio de
comunicación directo con tus clientes, por lo que no deberíamos descuidarlo ni rebajar la
importancia que realmente tiene.
*3.3 Tips de diseño
Como comentábamos al principio de este capítulo, hay muchas más opciones y cosas a tener
en cuenta, así que aquí os resumimos algunos puntos que creemos importantes:
-
-
Maquetación web: Es fundamental que, elijamos el tipo de web que elijamos, la
maquetación de nuestra web sea lo más limpia posible. La maquetación en una página
web es equiparable a los cimientos en un edificio, si no hay una base sólida no se
sostendrá y no podremos realizar cambios sin que se descoloquen elementos, y no
sería accesible para personas con discapacidades visuales, además de todos los
problemas que nos encontraríamos si quisiéramos posicionar nuestra web o
simplemente para que se viese bien en todos los navegadores. Por eso es básico que
tengamos una buena maquetación y no utilicemos programas que generan esta
maquetación por nosotros.
o Debemos asegurarnos de que la maquetación es la adecuada para el tipo de
web que elijamos. Si vamos a poder renovar contenidos, las capas que los
contengan deberán estar maquetadas para que crezcan y se adapten al tamaño
de los mismos.
o En el caso de que fuera necesario, deberíamos tener varias hojas de estilos
para asegurarnos de que nuestra web se ve bien en todos los navegadores.
o Nos aseguraremos de poner las meta etiquetas “title”, “description” y “keywords”
y el atributo “alt” en las imágenes para poder posicionar nuestra web en
buscadores.
o Tendremos en cuenta si nuestra web se va a poder ver en diferentes
dispositivos y maquetar para ello.
Flash: Muchas veces nos encontramos con páginas que contienen elementos que se
mueven, animaciones o efectos que son muy visuales y atractivos. Hace unos años la
única manera de conseguir tener estas cosas en una web era desarrollándola con
flash, lo que nos trae problemas como :
o No se ven en dispositivos móviles
o los buscadores no leen el contenido y por tanto no la posicionan
o obligamos al usuario a descargar e ir actualizando un plugin para poder verla
correctamente.
o Los usuarios no pueden usar los botones de navegación de los exploradores.
o No podremos saber cosas como el número de personas que entra en nuestra
web.
o Al tener un ancho y alto fijos, si el usuario tiene una configuración diferente a la
nuestra perderá la visión de la web.
o No podremos hacer que sean accesibles para personas con discapacidad.
o Para poder ver la web primero tiene que cargar, por lo que haremos esperar al
usuario más que con otro tipo de páginas.
Por suerte hoy en día existen otras alternativas para conseguirlo, como el HTML5 y CSS3,
javascript…

5. -
Usabilidad: En resumen la usabilidad es la facilidad con la que se maneja una página
web y lo intuitivo que es de cara al usuario. Hay varias cosas a tener en cuenta para
hacer nuestra web usable:
o La colocación de elementos: Los usuarios esperamos encontrar ciertos
elementos en el mismo sitio, por ejemplo, el logo arriba a la izquierda, el
buscador arriba a la derecha, etc. Si cambiamos de ubicación estos elementos,
el usuario puede que se pierda o piense que no están.
o El color de los enlaces: Es recomendable poner los enlaces de un color
diferente al resto de texto o subrayados para diferenciarlos visualmente. Si
además hacemos que tengan un color diferente cuando estamos en la sección
con la que enlazan en el caso de ser enlaces de navegación, mejor aún, así el
usuario sabrá dónde está en todo momento.
o El uso de ventanas emergentes: Los enlaces que tengamos a diferentes
secciones de nuestra web deben abrirse en una misma ventana para que el
usuario no termine con infinidad de ventanas abiertas y termine por cerrar todo e
irse, sin embargo, los enlaces externos es mejor que se abran en otra, así no le
sacamos de nuestra web.
o La navegación: Es muy importante que los nombres de los enlaces de
secciones sean claros y explicativos y que el menú esté siempre visible.
Debemos organizar bien los contenidos de las secciones, y poner cuidado a la
hora de elegir las URL’s de las mismas, poniendo palabras descriptivas e
intentando que haya entre 20 y 50 caracteres en ellas.
En el caso de que tengamos subsecciones y nuestro menú sea desplegable,
pondremos especial cuidado en que la cascada no sea demasiado larga ni
compleja (que no haya demasiadas categorías dentro de otras).
o Formularios: En una páginas web debemos saber dónde poner un formulario y
qué información pedir. Si pedimos demasiados datos, o sobre todo, si lo
hacemos demasiado pronto, es posible que los usuarios sientan desconfianza y
abandonen nuestra página. Es recomendable pedir los datos que realmente
sean imprescindibles, y hacerlo en una sección de contacto donde además
facilitaremos otros medios de contacto.
o Diseños congelados: Evitaremos siempre que podamos el uso de el scroll
horizontal, ya que el usuario no está demasiado acostumbrado a usarlo y no le
resultará cómodo ni agradable.
o Diseño publicitario: Cuando introduzcamos los contenidos debemos intentar
que sea de calidad, que no sea demasiado denso, y organizarlo visualmente en
bloques con títulos destacados para que los usuarios puedan encontrar
rápidamente la información que están buscando y no se agobien al ver
demasiado contenido. Por otro lado, debemos evitar las estéticas demasiado
publicitarias, ya que si el usuario no tienen intención de comprar algo,
seguramente no le preste atención.
o Diseños con movimiento y sonido: Este tipo de diseños es relacionado por el
usuario con la publicidad, por lo que los suelen ignorar. Además, los textos en
movimiento son difíciles de leer, y tanto movimiento y sonido pueden llegar a ser
molestos.
o Páginas splash: Son a las que llevamos al usuario antes de entrar en el
contenido principal de nuestra web. Lo único que consiguen este tipo de páginas
es retrasar y marear al usuario y dan la impresión de que nos preocupamos más
por la estética que por ofrecerle lo que está buscando, por lo que es mejor no
ponerlas.

6. o Páginas huérfanas: Son aquellas que no tienen enlaces a ningún sitio y que
una vez que aterrizamos en ellas no podemos movernos de ahí. Incluso en una
landing page es recomendable incluir enlaces que ofrezcan la posibilidad de
navegar y ampliar la información.
o Accesibilidad: Tener una web apta para personas con discapacidades visuales
implica tener en cuenta:
 La elección de colores: Usaremos combinaciones de colores que
contrasten, más aún si hay texto sobre un fondo de color, asegurándonos
de que siempre sean legibles.
 Tipografías: El tamaño de los textos es otro punto a tener muy en cuenta
puesto que cuanto más largo sea el mismo, más fácil es perder la guía
visual. Si tenemos grandes bloques de texto deberemos usar las
tipografías a un tamaño en el que sea fácil de leer, dejaremos el espacio
adecuado entre líneas aunque esto haga que aumente el alto total del
bloque de contenido, y tendremos en cuenta que siempre es preferible
utilizar tipografías Serif que crean una línea imaginaria que subraya y
guía a la vista mientras se lee. Además, usaremos tipografías seguras
que todo el mundo pueda ver en su equipo, y en caso de querer un tipo
de letra más original recurriremos a Google Fontso similares para
incluirlas sin usar texto en imagen.
 Imágenes: No debemos abusar de ellas y siempre incluiremos una
descripción en su etiqueta “alt” para que en caso de que la imagen no se
vea, el usuario sepa lo que había ahí y los lectores de pantalla lo lean.
-
Error 404: Es más que recomendable tener una página de Error 404 personalizada
donde no simplemente salga un mensaje diciendo que la página que buscamos no
existe, sino que debemos hacer saber al usuario cuales pueden ser los motivos de que
no se encuentre la página y dar opciones de navegación poniendo enlaces a otras
secciones, un botón de volver o incluso un buscador.
Paso 4: Elección del partner para nuestra web
Una vez que ya tenemos claro lo que necesitamos y cómo lo necesitamos, llega la hora de
preguntarnos a quién recurrir para desarrollar nuestro proyecto web.
-
¿Contrato una agencia o un freelance?
Esto depende en gran medida de las necesidades que hayamos definido. Si
necesitamos una página en HTML a modo de “tarjeta de presentación online” que no
se moverá mediante acciones de marketing online como posicionamiento web o redes
sociales, un freelance puede que sea la mejor opción, seguramente nos resulte más
accesible económicamente y estará perfectamente capacitado para llevar a cabo la
labor.
Sin embargo, si nuestra intención es consolidar nuestra imagen de marca, transmitirle
al usuario los valores de nuestra empresa, promover nuestra web y sacarle el máximo
partido al mundo online llevando a cabo acciones de SEO para mejorar nuestra
posición en los resultados de búsqueda de Google, generando tráfico a nuestra web
mediante el uso de redes sociales y demás, necesitaremos diferentes profesionales
que estén especializados para cada una de estas tareas.

7. Buscar un diseñador gráfico que sea capaz de generar confianza, transmitir
modernidad o cualquier otra cosa que necesitemos transmitir a nuestros potenciales
clientes mediante la estética, a un buen maquetador web que deje perfectamente
asentados los cimientos de nuestra web, a un programador que deje preparadas todas
las funcionalidades que queramos tener, un SEO que se encargue del posicionamiento,
un Social Media para las redes sociales, y ponerles a todos de acuerdo para que
trabajen conjuntamente, puede ser extremadamente complejo y al final poco rentable.
En este caso la mejor opción es recurrir a una agencia que cuente con diferentes
especialistas en los campos de acción que necesitemos cubrir. Así tendremos un único
proveedor con quien tratar y que se encargue de organizar al equipo de trabajo.
-
¿Cómo elegir la agencia adecuada?
Por supuesto es importante que tengamos en cuenta el presupuesto con el que
contamos y busquemos profesionales que encajen con nuestras posibilidades, pero
más allá de eso debemos buscar una agencia en la que poder delegar y confiar.
Deberemos buscar una agencia con un equipo de trabajo que cuente con profesionales
de cada uno de los sectores que vayamos a necesitar cubrir.
Por ejemplo, si vamos a tener redes sociales corporativas necesitaremos una agencia
que cuente con profesionales que nos puedan asesorar sobre cuales son las más
adecuadas para que nuestra empresa tenga presencia en ellas, además de que se
encarguen de abrir nuestros perfiles, gestionar nuestras cuentas a diario e ir llevando
un control mediante estadísticas y analítica.
Esto mismo es aplicable a cada una de las especialidades que vayamos a necesitar
cubrir, desde el estudio y definición inicial de nuestra web, pasando por el diseño, la
maquetación y programación hasta las posteriores acciones de marketing online que
vayamos a desarrollar.