Si no tienes conocimientos de programación informática ni diseño web, y tiemblas al pensar en lo difícil que sería construir tu propia página web, con este post tenemos el firme objetivo de que consigas vencer al miedo y te pongas manos a la obra. Te vamos a mostrar un completo tutorial para principiantes sobre cómo crear una página web de forma sencilla.
De todas formas, no nos engañemos, si lo que buscas es un diseño 100% adaptado a ciertas funcionalidades específicas, lo mejor será que contactes con un verdadero profesional en diseño de páginas web. Lo que a continuación encontrarás es una opción para principiantes, pequeñas empresas y startups que quieran contar con una web sencilla con funcionalidad limitadas que no van más allá de algunas páginas de información, un blog o un formulario de contacto.
5 principios del diseño web que no deberás perder de vista
Antes de comenzar con la parte más práctica, permítenos darte algunos consejos para que el resultado sea lo más verosímil y útil posible:
- Menos es más. No es necesario usar todas las posibilidades y opciones que existan en una plantilla web, sino aquellas que sean verdaderamente útiles para tu negocio. Tampoco te empeñes en dar rienda suelta a tu gusto combinando un sin fin de colores y tipografías extrañas, céntrate en tu identidad corporativa, y si es necesario añade algún color complementario básico como el blanco, el negro o el gris para fondos, textos, links y titulares.
- Calidad frente a cantidad. Si solo tienes una fotografía de calidad de tu empresa usa esa, y nada más; Evita el efecto pixelado. En cuanto a los textos, trabaja a fondo el copy que vas a utilizar para presentar a tu empresa y vender tus productos o servicios a través de la web. Escribe, repasa y borra todo aquello que repita conceptos o no aporte nada nuevo.
- No valores los resultados por el esfuerzo que te ha costado realizar determinado diseño o elemento, sino por su verdadera utilizad, imagen que denotarás y lo que tus clientes potenciales puedan opinar.
- Piensa en la usabilidad y navegación para lograr que los usuarios puedan encontrar la información que están buscando en un máximo de tres clics. O en otras palabras, consigue que quien quiera encontrar el teléfono de tu empresa para contactar contigo lo pueda localizar lo antes posible, por ejemplo, haciendo clic en un botón del menú que ponga «contacto», o aún más fácil, añadiendo los datos de contacto en el footer de la web.
- Muestra la información en orden de importancia en función de cómo los usuarios suelen ver una pantalla, de izquierda a derecha y de arriba a abajo. Es decir, pon lo más importante en la esquina superior izquierda y continua en el orden establecido.
¿Cómo crear una página web paso a paso?
Aunque existen un montón de plataformas como Wix, Webnode o Jimdo, nosotros vamos a mostrarte un tutorial para diseño de páginas web con WordPress pues es nuestro CMS (Gestor de contenidos) favorito, el que utilizamos para la gran mayoría de nuestros proyectos propios y los de nuestros clientes.
-
PASO 1: Elige y contrata tu hosting y dominio web
Sin duda alguna, uno de los mejores proveedores que puedes usar es Hostinger. Nosotros lo recomendamos con los ojos cerrados porque jamás nos ha fallado y sus servicios son de primer nivel.
También te recomendamos leer el post de ADC: Todo lo que deberías saber antes de comprar un hosting y dominio
– Elige un hosting orientado a usuarios con bajos conocimientos en servidores.
– Asegúrate de que está enfocado a WordPress para que su instalación sea sencilla. Muchos proveedores de hosting tienen planes especiales para este CMS con aplicación automática de instalación, como por ejemplo Webempresa y SiteGround.
– Los planes y ofertas de contratación de hosting suelen venir acompañados con la compra gratuita de un dominio durante un año, así que no compres el dominio antes a través de alguna otra plataforma.
-
PASO 2: Analiza tus necesidades y define cómo será tu web
Te recomendamos hacer un simple ejercicio. Coge una hoja en blanco y lápiz y escribe:
– Mi objetivo con esta web es…
– La información que quiero incluir es:…
– El material gráfico con el que cuento es: logotipo, tipografías corporativas (…/…/…), colores corporativos (…/…/…), fotografías (…), vídeos (…) y otros (…)
-
PASO 3: Compra una plantilla (aunque puedes usar las gratuitas)
La utilización de WordPress como CMS de una web es gratuita y con ello lleva incluidas una serie de plantillas sin coste alguno que puedes ver en detalle en la web es.wordpress.org/themes/
Sin embargo, nosotros te recomendamos que apuestes con una plantilla de pago pues tienen diseños más actuales y funcionalidades más avanzadas. En webs de confianza como Themeforest encontrarás un amplio catálogo de plantillas para WordPress desde 13 a 1.000$ y enfocadas a negocios o sectores concretos, como por ejemplo: corporativa, creativa, revistas, tienda online, entretenimiento, tecnología, educación y bodas.
– No te dejes embaucar por un diseño bonito y super creativo, recuerda que todo debe encajar con tu imagen corporativa y el objetivo de tu empresa, y por ende, de tu web.
– Ten en cuenta que si no dispones ni pretendes invertir en imágenes o vídeos de calidad de tu empresa y productos, deberás optar por un diseño donde no se potencie la imagen gráfica.
-
PASO 4: Instala WordPress en tu hosting
Ha llegado el momento de instalar WordPress en tu hosting, para ello, deberás seguir las instrucciones específicas que te indiquen pues cada hosting es un mundo. Pero básicamente, si has elegido un hosting (como te hemos recomendado) con instalación automática, tendrás que ir a tu panel, llegar a la sección de aplicaciones y hacer clic sobre la que haga referencia a WordPress.
Para que te hagas una idea, aquí están las instrucciones de instalación de WordPress en Webempresa de forma manual y automática.
-
PASO 5: Instala la plantilla en tu WordPress
Ahora, ha llegado el momento de comenzar con el diseño web. Para ello, entra en tu WordPress y pincha sobre el menú de la izquierda en APARIENCIA y luego en TEMAS. En esa página encontrarás un botón que dice AÑADIR NUEVO, haz clic y una vez que se cargue la página haz clic en SUBIR TEMA. Una vez subido tendrás que poner el ratón sobre él y dar al botón que aparece con el texto INSTALAR.
-
PASO 6: Lee atentamente las especificaciones sobre diseño de la plantilla
Muchos son los que se saltan este paso y prefieren comenzar a toquetearlo todo a su manera. Pero si de verdad queremos sacar el máximo partido a un theme que hemos comprado, más aún siendo principiantes, resulta 100% recomendable leer las instrucciones de cómo proceder para su completa instalación (algunos requieren de plugins adicionales) y customización con nuestra imagen corporativa (cada uno suele contar con su propia página con requerimientos específicos al respecto).
-
PASO 7: Customiza la plantilla con tu imagen corporativa
En el menú de tu WordPress de la izquierda, ve a APARIENCIA y pincha sobre PERSONALIZAR para añadir elementos clave de diseño como son: Identidad del sitio (título y descripción), imagen de cabecera (logo y otras imágenes según el diseño), menús (principal, secundario y distintas ubicaciones disponibles según el diseño), widgets, ajustes de portada (para poner tu página de inicio y tu página de post, si procede) y otras opciones adicionales del theme en concreto.
No entramos más en detalle porque cada tema muestra una configuración diferente al respecto, los hay que incluso en esta sección puedes introducir los colores y tipografías.
Continua customizando tu plantilla a través de las distintas secciones que encontrarás en el menú APARIENCIA, pero evita la parte de EDITOR pues encontrarás un montón de código que siendo principiante te resultará difícil de comprender, y sobre todo, de utilizar.
Algunos temas crean en el menú izquierdo de WordPress una sección exclusiva para que veas todos los elementos que puedes modificar a tu gusto.
-
PASO 8: Crea las páginas de tu web
Toma de nuevo la hoja que escribiste en el paso 2 y tomate un minuto para pensar en la estructura y páginas de tu web. Normalmente, siendo una empresa, las páginas que se suelen crear son las siguientes:
– Home o inicio: La portada de tu web.
– Sobre nosotros o equipo: Donde describas a la empresa, el equipo o lo que más quieras destacar.
– Productos o servicios: El lugar para mostrar y describir lo que vendes.
– Blog: La página donde aparecerán tus últimos post.
– Contacto: Una sección en la que introducir tus datos de contacto (email, teléfono, dirección…) e incluso un formulario de contacto, un mapa de Google Maps y tus redes sociales.
Una vez que las tengas creadas recuerda entrar en AJUSTES y en la sección de LECTURA para indicar cual será la página de portada y cual será la de las entradas para el blog.
Y para cumplir con la ley también será importante que incluyas las páginas de: Política de Privacidad y Política de Cookies.
-
PASO 9: Crea los menús de tu web
En el menú izquierdo ve a APARIENCIA/MENÚS y encontrarás las distintas opciones que tiene tu tema web para incluir estos espacios que redirigen al usuario a páginas, entradas, enlaces personalizados o categorías que tu elijas.
La primera pestaña que te aparecerá será «Editar menús». Y allí mismo podrás seleccionar «Elige el menú que quieras editar» o «crear uno nuevo». Para editar tendrás el nombre del menú, la posibilidad de añadir o quitar páginas, entradas, enlaces o categorías de la columna izquierda, y ajustar el menú para que se le añadan páginas de forma automática o para indicar dónde se verá entre las ubicaciones existentes.
-
PASO 10: Añade otros detalles
No serás un experto en diseño de páginas web, pero… ¡ya tienes la tuya! Eso sí, ahora faltan los detalles como revisar que todo va bien, ver si necesitamos algún plugin para mejorar funcionalidades, pensar en cómo podemos mejorar algunas secciones…
PLUGINS RECOMENDADOS:
Para esta fase te dejamos una selección de plugins que nos encantan para complementar una página web
– Click To Tweet WordPress Plugin
– Elementor
– Infusionsoft Official Opt-in Forms
– Pretty Links
– Really Simple SSL
– Yoast SEO
Si te ha parecido interesante este pequeño tutorial de cómo crear una página web de forma sencilla te recomiendo profundizar en el tema con algún curso relacionado, como por ejemplo el de Crea un blog de éxito para ganar dinero de Vilma Nuñez.