¿Cómo diseñar una página web? Guía para principiantes
Si estás pensando en crear una página web y no sabes por dónde empezar o si necesitas diseñar un sitio web atractivo y con un aspecto profesional, en este post te vamos a ayudar a conseguirlo.
¿Qué necesitas antes de diseñar una página web?
Si estás interesado en diseñar una página web te recomendamos que antes de empezar pienses en el tipo de contenido que quieres publicar. Cuando lo tengas claro podrás seguir con el siguiente paso, que es contratar el dominio y alojamiento.
Comprar un dominio para tu proyecto web
Incluso antes de ponerte a diseñar una página web te recomendamos contratar el nombre del dominio. Es un paso que podrás realizar en pocos minutos y te garantizará que ese nombre quede reservado para ti o para tu negocio, evitando sorpresas en el futuro.
El registro del dominio incluye la reserva del nombre de tu web por un año. A partir de ahí tendrás que hacer las renovaciones del dominio, si es que lo quieres mantener por más tiempo. En nuestra página de registro de dominios podrás hacer búsquedas de nombres para ver cuáles están libres para tu sitio web.
Ten en cuenta que al contratar un alojamiento web en Arsys podrás disfrutar de un dominio gratis el primer año, por lo que igual te interesa pasar directamente al siguiente paso.
Elegir el alojamiento web y la plataforma para crear tu sitio web
Además de un dominio vas a necesitar un hosting web. Esto consiste en un espacio en un servidor donde publicarás los archivos de la página web. El servidor estará permanentemente encendido y enviará el contenido a todos los visitantes que entren en tu página.
El alojamiento web lo puedes contratar en varias modalidades que se diferencian básicamente en los recursos, como espacio en disco, número de direcciones de correo, número de bases de datos y otros factores. Incluso hay hosting WordPress que te permite disponer de esta popular plataforma de publicación ya instalada y configurada, lo que te ahorrará tiempo y evitará mayores complicaciones.
Pasos para diseñar una página web
Ahora vamos a ver qué pasos requiere el proceso de diseño de una web y su publicación en Internet.
Definir la idea y el propósito de tu proyecto web
Toda web debería tener un propósito. ¿Qué quieres conseguir con tu página web? ¿Relevancia como profesional? ¿Quizás el objetivo es conseguir que más clientes potenciales conozcan tus productos o servicios? ¿Que las personas conozcan tu marca?
Tener claro ese objetivo principal te ayudará a crear una página web que consiga cumplir tus expectativas o la de tus clientes.
Investigar los diseños web de la competencia
Dentro de la planificación inicial también es útil un análisis de la competencia en el que investigar qué otras páginas existen en Internet que tratan temas similares a los que tú deseas abordar. Posiblemente tu competencia ya esté presente en Internet y puedas obtener algunas ideas y saber qué enfoques tienen sus sitios, en qué se podrían mejorar, etc.
Detallar los contenidos para tu página web
Ahora que tenemos claro el tema y sabemos cómo nos podemos diferenciar, para aportar algo más de valor a través de nuestro sitio web, podemos hacer una planificación más detallada sobre qué contenidos queremos ofrecer. En este caso podemos poner por escrito los temas que se deben desarrollar en cada una de las páginas, el árbol de contenidos que tendrá el sitio, etc.
Realizar el primer mockup y wireframe
A la hora de diseñar una web no comenzamos generalmente por definir la concepción gráfica completa, con colores y detalle de las interfaces de usuario. En vez de ello comenzamos creando el prototipo de página web de los bloques que va a tener la página y lo que pasará cuando pulsemos botones o enlaces. Ese producto previo al diseño web es al que le denominamos mockup o wireframe.
Hacer un mockup nos ofrecerá la posibilidad de definir mejor el funcionamiento de la web y la experiencia de usuario, de una manera esquemática, fácil de componer y de modificar. Una vez definidos los bloques y el funcionamiento mediante el wireframe, los podemos discutir con los gestores del proyecto u otras personas de nuestro equipo y, si fuera necesario, ajustarlos modificando los prototipos.
Los mockup o wireframes se pueden hacer con papel, tarjetas o programas generalistas como Illustrator o Google Drive, pero generalmente los profesionales usan herramientas de prototipado para realizar estas tareas con mayor vistosidad y productividad.
Configurar las herramientas necesarias en tu CMS
Dependiendo del tipo de proyecto que se deba realizar y las necesidades derivadas del prototipo debemos escoger el conjunto de herramientas y tecnologías para el desarrollo. Para proyectos de sitios web es muy común el uso de un sistema gestor de contenidos o CMS.
Gracias al CMS podemos construir páginas muy fácilmente y administrar su contenido. Generalmente la alternativa más utilizada es WordPress. Si hemos contratado un alojamiento para WordPress no será necesario realizar mucho más, porque nos entregarán el CMS ya instalado, pero si no es así tendremos que instalarlo por nuestra propia cuenta.
Para ello, necesitamos crear una base de datos MySQL, lo que realizaremos mediante el panel de administración de nuestro espacio de alojamiento. Una vez que hemos creado la base de datos necesitaremos:
- La IP o nombre del servidor donde está la base de datos
- El nombre de usuario para el acceso
- La clave de este usuario
- El nombre de la base de datos que vamos a utilizar
Además debemos subir por FTP los archivos de WordPress que podemos obtener de la descarga desde wordpress.org. Con todos esos datos podremos acceder al servidor para realizar la instalación de WordPress, accediendo con el navegador al dominio donde hemos colocado los archivos del CMS.
Personalizar y configurar las principales páginas desde el CMS
Una vez en WordPress podemos crear el contenido del sitio, al menos para las principales páginas que hemos decidido en la planificación inicial. Esto lo haremos mediante la gestión del contenido de páginas y entradas.
Realizar un diseño responsive adaptado a diferentes dispositivos
En este punto comenzamos a desarrollar el diseño del sitio. Es importante que sea adaptable a cualquier tipo de dispositivo, tanto ordenadores como móviles y tablets, lo que llamamos un diseño responsive«.
Esto lo podemos conseguir muy fácilmente mediante la instalación de un tema de WordPress. Existen cientos de alternativas gratuitas. Desde la propia página de administración de WordPress en la sección de temas podemos encontrar los controles para la instalación de temas.
No obstante, para adaptarnos de manera más fiel al mockup realizado en pasos anteriores es siempre una ventaja poder realizar nuestro propio diseño. Para ello necesitaremos tener conocimientos de HTML y CSS, así como ocasionalmente de PHP. Si te interesa profundizar en este punto puedes consultar en este post los primeros pasos para la creación de temas de WordPress.
Probar y testear el sitio web
El test del trabajo de diseño realizado puede hacerse de una manera sencilla mediante la navegación por el sitio y el uso de sus distintas funcionalidades. Si es posible siempre es una buena idea ayudarnos de otras personas, para que ellos realicen la navegación por el sitio y nos ofrezcan un feedback, o simplemente veamos cómo lo usan, para detectar posibles problemas o lugares donde no resulta totalmente claro nuestro diseño.
Para mejorar el diseño y la usabilidad de la página existen diversas técnicas más avanzadas. El diseño de interfaces de usuario (UI) y la experiencia de usuario (UX) son dos aspectos clave en el desarrollo web. Mientras que la UI se centra en el aspecto visual y la interacción, la UX se enfoca en cómo los usuarios se sienten al utilizar un sitio web y si sus necesidades se satisfacen. Para lograr una UX efectiva, es necesario seguir un proceso iterativo que incluye el diseño de la experiencia para diferentes usuarios, la definición de métricas para medir los resultados, el diseño de interacción intuitiva y la medición de la experiencia generada. Mediante mejoras constantes, se busca optimizar la UX y brindar a los usuarios una experiencia satisfactoria y placentera al interactuar con el sitio web.
Publicar la página web
Después de corregir todos los errores y realizar las mejoras necesarias en la experiencia de usuario, estamos en condiciones de publicar la web.
Si estamos trabajando con un CMS como WordPress directamente sobre el dominio contratado entonces solamente necesitaremos terminar de publicar las páginas con el contenido del sitio, haciendo clic en el botón de publicar de cada página o entrada.
No olvides activar la opción para que los buscadores puedan indexar el contenido, en los ajustes generales del sitio. Ahora es el momento de comenzar a realizar algo de posicionamiento SEO, por lo que si tenemos ocasión de enlazar la página desde otros dominios sería ideal para que Google la pueda indexar más rápidamente.
Analizar la web para realizar ajustes y mejoras
Una vez publicada es muy probable que aún haya algunas cosas que mejorar o corregir. Podemos divulgar la página entre más personas y solicitar que naveguen por ella para enviarnos sus comentarios, a fin de realizar los últimos ajustes y mejoras.
¿Cómo conseguir diseñar una buena página web?
Para acabar vamos a dar algunos consejos útiles para conseguir diseñar una buena página web, de modo general, que seguro que nos vendrán bien.
Ten en cuenta la experiencia de usuario
Ya hemos hablado de experiencia de usuario, pero conviene volver a remarcar este punto porque es un tema muy relevante. No podemos dejar de lado temas como la UX y la UI.
Define la identidad de tu marca (colores, fuentes, imágenes…)
A la hora de diseñar es importante ser consistente y usar los mismos colores y fuentes a la largo de toda la página, que deben estar definidos por la identidad de tu marca.
Crea contenidos de calidad y sencillos para los usuarios
El contenido de la web debe tener la suficiente calidad, con un lenguaje apropiado, sin faltas de ortografía y con una extensión amplia. Todo ello facilitará que Google la tenga en mejor consideración de cara al posicionamiento web. Además debe usar un lenguaje sencillo, o al menos enfocado al target de usuarios de tu página.
Considera las últimas tendencias en diseño web
Por último, presta atención a las páginas con diseños modernos que marcan tendencia. Intenta inspirarte en ellas, tomando prestadas ideas que puedan mejorar el aspecto de tu web. En Arsys publicamos regularmente resúmenes que puedes usar para facilitarte las cosas, por ejemplo puedes leer este artículos sobre tendencias de diseño
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.