Como diseñar una página web, contenidos:

1. Público y objetivos
2. Apariencia general
3. Elegir plataforma de diseño
4. Dominio host e instalación del software necesario
5. Esquema de la página y plantillas

Una vez obtenidos el hosting y el dominio podemos empezar con el diseño.

1. Cómo diseñar una página web.
“Determinar el público y los objetivos a conseguir”

1.2 Público

Lo primero que tenemos que tener claro es a que público va dirigida nuestra web y cual es el objetivo final de ésta.

Si estamos dando el paso a digital es más sencillo, basta con aplicar lo que sabemos de nuestro negocio a la plataforma digital, aún así nunca viene mal darle un vistazo y repasar algunos puntos importantes a tener en cuenta.
Seamos sinceros, en caso de un negocio, lo ideal seria hacer un estudio de mercado bien hecho, pero tampoco es necesario para hacernos una idea de nuestro público objetivo.
Tendríamos que tener claro como mínimo estos puntos a continuación:

• Nuestra web va enfocada a particulares o a empresas
• Qué edad estimada tiene el publico al que vamos a dirigirnos
• Condiciones económicas de nuestro público objetivo.

¿Y para que sirve todo esto?
Por supuesto tenemos que sacar las conclusiones de esos datos, dependerá también de nuestro objetivo, pero con solo eso ya podríamos determinar desde que dispositivo se conectan más los visitantes, para priorizar más un diseño enfocado a ese dispositivo.
Pero por norma general, a mediados del 2022 en el que estamos ahora todo trabajo de creación de página web debería estar muy enfocada a la visualización en dispositivos móviles como prioridad.

1.2 Objetivos

Aquí no tenemos que hacer ningún estudio aunque también podríamos, pero por lo general cuando queremos hacer una página web tenemos un objetivo en mente.
Algunos de los motivos que siempre hay que tener en cuenta en una web son:

• Conectar con el cliente, la web no es mas que un sistema para conectar fácilmente con la gente, una tarjeta de presentación permanente de nuestros productos o servicios en la red para que nuestros visitantes puedan ver en detalle todo aquello que ofrecemos.
  Nuestra web no es una red social, no es contenido que varía y cambia con el tiempo, en Instagram, Facebook o cualquier otra red social es imposible ver toda la gama de nuestros productos y/o servicios.
  Nuestro contenido es un catálogo siempre desplegado para ser visitado e inspeccionado en detalle
  Salvo casos muy extraños si hacemos una web es para que venga gente a ella.
• Posicionar nuestra “marca”.
• Venta de productos
• Divulgar información
• Escaparate de negocio
• Portfolio personal

1.3 Conclusión

¿De que nos sirve todo esto?

Con esos datos podemos empezar a crear un boceto de lo que seria el resultado final, dependerá mucho del publico objetivo y los objetivos de nuestra web.

Por ejemplo, si queremos vender a un publico femenino joven con baja capacidad económica, sabremos que tenemos que hacer una web diseñada para teléfonos móviles, pudiendo ignorar el diseño de sobremesa o portátil, teniendo que hacerlo muy accesible a todo tipo de dispositivos móviles y la página tendrá que tener un sistema de gestión de ofertas y un diseño que las muestre en forma de llamada de atención para aumentar la tasa de conversión a ventas.

Si por el contrario quisiéramos hacer un portfolio, el diseño de pc seria importante ya que una empresa lo mas seguro es q se conecte desde un portátil o sobremesa y la web tendría que tener apartados dedicados al “quien soy” mucho más elaborados.

2. Como diseñar una página web.
“Apariencia general”

Basándonos en nuestro público y objetivos decidiremos varios puntos del aspecto de nuestra futura web.

2.1 Colores:

Si disponemos de logotipo lo habitual es utilizar un patrón de colores similar, sino, bueno, necesitarás un logotipo para tu web. Si este no tiene colores o es demasiado sencillo habrá que decidir haciendo un estudio de nuestros objetivos.
Aquí tenéis una página que entra en detalles de como elegir y usar la gama de colores de nuestra web https://paletton.com

2.2 Tipografía:

Al igual que los colores, la tipografía transmite directamente una sensación al lector, lo principal es elegir una que se lea fácilmente y de forma secundaria que refuerce el aspecto de la web, de nada nos sirve una letra preciosa que al usuario le cuesta leer.
Por ejemplo, si nuestro público objetivo son personas de mas de 50 años tendríamos que poner una tipografía clara y de mayor tamaño para facilitar la lectura.
https://fonts.google.com/ Este es el sitio perfecto para buscar tipografías
Sólo necesitaremos estos dos puntos por como vamos a desarrollar la web más adelante.

2.3 Estructura

¿Qué tipo de página queremos realizar?
Si nuestra web no tiene demasiada información, por ejemplo, dispone de un “escaparate” con información de nuestro negocio/ocupación y un formulario u otro sistema de contacto, podemos plantearnos hacerlo todo en una sola página utilizando un sistema de anclas

3. Como diseñar una página web.
“Elegir plataforma de diseño”

Al fin ha llegado el momento de darle forma a nuestra web, pero antes, hay que decidir en que plataforma de diseño vamos a realizarla. En este apartado tenemos varias opciones, todas gratuitas:

WordPress:

Me voy a centrar en WordPress, ya que es la plataforma más rápida, práctica y requiere poco conocimiento de código con un buen resultado final. Tiene gran cantidad de opciones y un nivel de personalización grande con todas las facilidades. Se puede crear una página con cero conocimientos de código.
Además la cantidad de añadidos, -plugins-, existentes y tutoriales para esta plataforma es inmensamente superior a, por ejemplo, Prestashop o Joomla.

Joomla:

Bastante más complicado de usar que WordPress. Probamos esta plataforma pero al final nos pareció algo complicada y no tiene la cobertura y soporte que tienen WordPress

Prestashop:

Otra herramienta excelente, esta esta centrada en la creación de tiendas online, si tu objetivo es una tienda avanzada plantéate usar Prestashop, las posibilidades son algo mayores que en WordPress, dependiendo del proyecto, pero su uso es más complejo.
Considero que, en lineas generales, optar por Prestashop antes que por Wordrpess sería un involución

Creadores online:

Si buscas hacer una página rápida y que de el menos trabajo posible, tenemos los creadores online, el diseño esta muy limitado pero puedes crear una página sencilla en una tarde.
En este punto fíjate muy bien en las condiciones del servicio, probablemente la página no te pertenezca nunca, casi siempre ese es el caso, y si se posiciona y quieres irte no podrás migrarla.
Porqué?
Porque en portales como 1&1 tu no tienes una web, lo que haces es alquilar un espacio que al final no es tuyo.
Si tu web triunfa y te la quieres llevar no podrás!
Punto.

4. Como diseñar una página web.
“Dominio host e instalación del software necesario”

A no ser que vayas a desarrollar tu web desde 0 creando el código a mano necesitaras tener los programas necesarios en el servidor de tu página web.

Como conseguir dominio y host

Como instalar WordPress

Seleccionar una plantilla (opcional)

Otro punto interesante de usar un gestor de contenidos es que vienen con plantillas de diseño, así en caso de que no queramos o no dispongamos del tiempo necesario podemos instalar una y hacer las modificaciones para adaptarla a algo parecido a lo que queremos con un ahorro de tiempo considerable, como punto negativo, es posible que ya hayan páginas creadas con esa plantilla y no seremos tan únicos.

Plantillas de WordPress aquí podéis ver la cantidad de temas gratuitos de que dispone WordPress, a parte podemos encontrar infinidad de temas de pago, gestores de edición que facilitan la creación etc…

Instalar los plugins necesarios (WordPress)

Parece que no, pero hay que dedicarle el tiempo necesario a realizar una selección de plugins que cubran nuestras necesidades, aquí tenéis los plugins que yo utilizo en casi todas las páginas, no es que sean todos los necesarios, sino los que siempre uso.

A parte hay que instalar dependiendo de la funcionalidad de la web, WordPress viene bastante básico y pone a nuestra disposición miles de funcionalidades extra en forma de plugins, tanto gratuitos como de pago.

Tampoco hay que pasarse con los plugins, pesan bastante en comparación con la misma función programada especialmente para una página y podríamos ralentizar demasiado la carga de esta, pero obtenemos unas funciones que costarían muchas horas de trabajo con solo un par de clicks y algo de configuración.

5. Como diseñar una página web.
“Esquema de la página y plantillas”

A no ser que decidas crear un blog, mi recomendación es empezar con un esquema en una hoja de papel, real o virtual, donde sinteticemos todo el análisis hecho hasta ahora.

Un escrito donde incluyamos todos los apartados importantes, la estructura del menú y como se enlazaran las páginas unas a otras (linkbuilding).

Si tenemos una plantilla ya creada solo faltara ir substituyendo nuestro contenido donde sea necesario y ya tendríamos la página creada.
Si no tenemos plantilla, tendremos que crearla nosotros mismos.
Empezaremos por el índice, la página de inicio de nuestra web y una de las mas importantes.

Inicio o tambíen llamada “Index”:

En la página de inicio incluiremos por norma general, al principio de todo una idea que nos represente claramente, ya sea imagen o texto, esta puede ser la cabecera de la web si queremos que este presente en todas o casi todas las páginas.

Recomiendo que tenga algún componente visual que capte la atención, es importante que deje bien claro que se va a encontrar el usuario en la página, si la reacción del usuario es un “¿que es esto?” “¿que hacen estos?” o similares, hay una buena posibilidad de que cierren y pasen al siguiente resultado de búsqueda.

A continuación tiene que ir el/los apartado mas importante, que sea lo segundo que se encuentre el usuario, una vez que sabe donde esta le podemos presentar lo que más nos interesa que vea/sepa, correctamente enlazado a su página correspondiente en un botón/cuadro suficientemente grande como para que sea cómodo acceder con el dedo sin tocar otros enlaces, tener en cuenta que no todo el mundo tiene la misma precisión o facilidad por diferentes motivos, así que se generoso con la facilidad de pinchar el enlace.

Footer

Seguiremos incluyendo los apartados de nuestro boceto hasta terminarlos todos, si son demasiados elige los más importantes y con el resto se puede hacer un listado más sencillo, opcionalmente se pueden incluir en el footer como ultimo recurso o ignorar si son irrelevantes.

Por último es aconsejable incluir algún tipo de llamada a la acción o un campo de suscripción.

Todo esto se puede hacer con texto e imágenes temporales y añadir el material definitivo más adelante.

Ten en cuenta que las imágenes finales deberán estar debidamente comprimidas y ser del tamaño adecuado.

Entradas y páginas (WordPress)

El uso de estas dependerá, las páginas suelen ser algo más fijo y duradero mientras las entradas se usan para noticias y similares.

Su función es mucho más especifica que el índice, en ellas tenemos que diseñar algo más sencillo y funcional, ya que el objetivo de estas es desarrollar cada uno de los apartados que hemos colocado en el índice.
Las entradas puedes usarse sin problema como páginas fijas, por ejemplo si quisiéramos por alguna razón que estas tengan categorías ya que las entradas pueden tenerlas mientras las páginas no. Esto siempre puede cambiarse con el uso de plugins.

Importante poner los enlaces internos que hemos decidido en el boceto y los que vayamos viendo que hacen falta sobre la marcha.
Normalmente con una o dos páginas y una entrada diseñada ya nos valdrá, ya que el resto usarán el mismo diseño como plantilla.

Header

A parte de quedar bonito, es lo primero que se ve al abrir la web, debe contener un sistema de navegación que haga la experiencia del usuario lo más sencilla posible, los botones suficientemente visibles, el texto con un contraste suficiente, el menú debe convertirse en menú para móviles al reducir el tamaño de la página…

Lo mejor para darse cuenta si falla algo es abrir la web en el ordenador y en el móvil y navegar un rato para ver que puede fallar.

Footer

El footer es más funcional que otra cosa, lo fácil es usarlo como guía de nuestra web, con todos los enlaces secundarios como la política de privacidad y los enlaces funcionales que estés algo escondidos en el menú principal, como la gestión de la cuenta. Así si el usuario no lo encuentra siempre puede recurrir al footer.

Otro apartado que funciona bastante bien en el footer es incluir los datos del negocio/empresa, contacto, dirección, un mapa…

De todas formas, es un elemento opcional y en caso de que no le veas utilidad puedes directamente eliminarlo.

6. Como diseñar una página web.
“Conclusión”

Una vez finalizada una versión de cada página que necesitaremos toca introducir todo el material disponible, puede ser la parte difícil obtenerlo, ten en cuenta que las imágenes son lo que destaca en una página así que es importante que sean lo mejor posible. Nadie se quejara si el texto no lo ha escrito un profesional, pero si las fotografías tienen un aspecto pobre más de uno cerrará la web al verlas.

Tras subirlo todo hay que repasar, abrir todas las páginas tanto en el pc como en el móvil, pinchar en todos los enlaces a ver si hay alguno mal direccionado o no funciona…

Espero que os haya sido útil como guía general para empezar a diseñar vuestra web.
Siempre puedes contar con mi empresa para poner en marcha tu proyecto web en Tarragona provincia.
Óniro Webs está a tu disposición!
Contáctanos por WhatsApp | Telegram: 605 584 586