Como diseñar una página web

por

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

1 Como diseñar una página web. Público y objetivos:

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 esta.

Si estamos dando el paso a digital es más sencillo, basta con aplicar lo que sabemos de nuestro negocio a la plataforma digital, aun así nunca viene mal darle un repaso al tema ya que puede haber cambios importantes debido al mayor alcance de una página web.

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 determinar como mínimo:

  • Particulares o empresas
  • Edad
  • Segmentación sexual
  • Condiciones económicas

¿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, o ignorar completamente el diseño de escritorio por ejemplo, lo que ahorraría costes del diseño en gran medida.

1.2 Objetivos

Aquí no tenemos que hacer ningun estudio aunque también podríamos, pero por lo general cuando queremos hacer una página web ya es por algun motivo.

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, y salvo casos muy extraños si hacemos una web es para que venga gente a ella
  • Posicionar tu “marca”, hay que dejar bien claro que te hace diferente del resto, con tanto competidor en la red hace falta algo que nos haga destacar.

Motivos variables, entre otros:

  • 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 objectivo 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 telefonos 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 tendra que tener un sistema de gestión de ofertas y un diseño que las muestre en forma de llamada de atención para augmentar 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 de la web:

2.1 Colores:

Si disponemos de logotipo lo habitual es utilizar un patrón de colores similar, sinó, 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://blog.hubspot.es/marketing/colores-para-paginas-web

2.2 Tipografía:

Al igual que los colores, la tipografia 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 tipografia clara y de mayor tamaño para facilitar la lectura.
https://fonts.google.com/ Este es el sitio perfecto para buscar tipografías

Solo necesitaremos estos dos puntos por como vamos a desarrollar la web más adelante.

2.3 Estructura

¿Que 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 rapida, practica 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 existentes y tutoriales para esta plataforma es inmensamente superior

Joomla:

Bastante más complicado de usar que WordPress, pero tiene unos resultados más abiertos que este.

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 mucho mayores que en WordPress pero su uso es más complejo.

Creadores online:

Si buscas hacer una página rapida 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 y el control sobre esta es limitado en el mejor de los casos.

Otros creadores online que para mi gusto van algo mejor son los que ofrecen algunas empresas de hosting, en este caso el diseño sigue siendo muy limitado, pero al menos el control y la propiedad recaen en el usuario.

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 podriamos 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 tendriamos 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:

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 algun 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.

Si es una web meramente funcional en la que los usuarios acceden mediante enlace y saben que se van a encontrar, ignorar lo anterior.

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.

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.

Ten en cuenta que solo queremos la cabecera de los apartados y si es necesario por información o SEO un resumen de este.

Por ultimo es aconsejable incluir algun 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 guia de nuestra web, con todos los enlaces secundarios como la política de privacidad y los enlaces funcionales que estes 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.

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 guia general para empezar a diseñar vuestra web.