¿Cómo diseñar una página web? Herramientas y recursos

como-disenar-una-pagina-web

Diseñar una página web es un proceso lento que requiere tener conocimientos básicos sobre programación, lenguaje web y diseño. Actualmente es muy fácil encontrar en Internet un sinfín de herramientas y sitios que prometen diseñar una web en dos clics… Nada más lejos de la realidad.

Como sucede en cualquier otro sector. Todo lo gratuito o barato, sale caro y es más conveniente aprender los diferentes elementos que se necesitan saber para crear una página web.

Si tienes una buena base y quieres lanzarte al diseño web, este es tu artículo.

Pasos para diseñar una página web

A la hora de diseñar una página web hay que tener muy claro una serie de pasos para cumplirlos todos a medida que avanza el proyecto.

Plasma la idea de la web

Es importante saber qué tipo de web vamos a diseñar, qué se quiere transmitir, cuáles son los colores básicos, el estilo de la marca… etc. En NeoAttack nos basamos en un briefing que completa el cliente.

Planificar la estructura

La estructura es el primer paso para montar una web ya que son los cimientos y es lo que se mantiene a lo largo del tiempo. Es cierto, que siempre se podrán quitar y añadir páginas internas, pero de cara a la optimización SEO es más interesante que no se haga. Esto se puede hacer a mano con lápiz y papel.

Elegir el gestor de contenidos idóneo

Bajo mi punto de vista, WordPress es el mejor gestor de contenidos. Si la página web tiene algún apartado de tienda –o incluso es una tienda online totalmente- se puede contar con WooCommerce.

Crear un mock up o prototipo de la web

Antes de empezar a montar la web, es importante crear un prototipo que marque las líneas de diseño. Este se puede hacer en base a una plantilla o tema predefinido. Para WordPress hay muchas plantillas, siempre recomendable utilizar las de pago.

Comprar dominio y hosting

La selección del hosting depende del tamaño y el peso de la página web.  Hay una gran cantidad de empresas que ofrecen sus servicios de alojamiento. Algunas más caras y otras, más baratas. Es interesante saber cuáles son las condiciones y características que ofrecen junto al precio del hosting. Por ejemplo, soporte, certificados, permanencia… etc.

Montar la web en un hosting de pruebas o en el hosting definitivo

Una vez que ya se tiene claro el estilo, los colores, la tipografía y todos los aspectos que afectan a la web, se comienza con el proceso de diseño. Esto puede llevarte un determinado tiempo, que varía según el tamaño que tenga la página web.

Cambios y más cambios

Si estás haciendo el diseño de una página web propia, lo más seguro es que le dediques todo el tiempo que tengas para retocar hasta el más mínimo detalle. Cuando nosotros trabajamos con los clientes, ofrecemos dos rondas de cambios para poder “controlar” el volumen de esos detalles.

Y hasta este punto se puede considerar trabajo de un diseñador web. Una vez que esté terminada, es importante saber cómo avanzar con una estrategia de marketing capaz de hacer crecer el negocio, alcanzar clientes, aumentar ventas y posicionarse en el sector.

Como crear una pagina web

Herramientas imprescindibles para diseñar una página web

Pensarás que a los diseñadores les viene la inspiración divina de vez en cuando y consiguen hacer sus creaciones mágicamente. Pero no. Gracias a la innovación, cada día podemos apoyarnos en herramientas y programas más maravillosos que los anteriores. El proceso de diseñar una página web es bastante elaborado y es necesario estar en contacto muy directo con el cliente. Este cliente debe tener muy claras las ideas o dejarse asesorar por el profesional. Cuando un cliente no sabe lo que quiere, pero tampoco acepta las propuestas es la definición del fracaso absoluto.

Adobe Color, la extensión perfecta para elegir los colores

El diseño de una página web requiere contar con una combinación de colores atractiva y equilibrada. Pensarás que es algo sencillo, pero no siempre se encuentran las tonalidades adecuadas para ser plasmadas. Además, es interesante guiarse por la teoría del color o utilizar herramientas que permitan obtener una combinación de colores adecuada.

Una de estas herramientas que usamos en NeoAttack para marcar cuáles son colores idóneos para una web es Adobe Color. Esta herramienta mantiene el funcionamiento del resto de programas de Adobe y se integra con ellos fácilmente. También está disponible en versión web.

Adobe Color permite conocer cuáles son los colores más populares y combinaciones basadas en un color específico.

Typecast o Google Fonts para seleccionar las tipografías

El tipo de letra es uno de los elementos más importantes de una página web ya que puede transmitir estados totalmente diferentes. Según el sector, el tipo de público al que se dirija y lo que se quiera transmitir, corresponderá utilizar un tipo de letra u otro.

En Typecast, un sitio web en el que solo se requiere hacer un login para entrar, se pueden crear varias columnas de contenido para alterar la tipografía. Solo hay que escoger en el menú lateral el proveedor de las tipografías y se escribe cualquier tipo de texto para ver cómo queda tal combinación.

Mientras que Google Fonts cuenta con más de 600 tipografías diferentes: sans serif, caligráficas, display, serif… En el propio directorio se pueden ver cuáles son las opciones de tipografías dentro de la web y cómo se combinan según diferentes frases de ejemplo. Cuando hablo de combinar tipografías me refiero a utilizar en los títulos una fuente específica y en el contenido otra tipografía diferente.

Mock Flow, la ayuda perfecta para diseñar una página web

¿Cuál es el primer paso para diseñar una página web? En NeoAttack trabajamos mostrando al cliente un primer diseño basado en el briefing que ha completado previamente. Para hacer esto, nosotros utilizamos Adobe Photoshop. Sin embargo, si se quiere realizar un prototipo en menos tiempo para agilizar los procesos se puede utilizar esta herramienta.

Mock Flow permite montar un prototipo o mock up de tu web en cuestión de minutos de forma online y para diferentes gestores de contenidos. Funciona con un sistema de drag and drop que permite añadir o quitar componentes necesarios para una página web.

Stylebot, una ayuda para el diseño web

Actualmente, para diseñar una página web en WordPress es necesario conocer el lenguaje CSS. La herramienta de Stylebot es una extensión de Chrome que nos ayuda a modificar visualmente y con apoyo cualquier parte de la web a través de código CSS. Esta extensión te permite ir creando los códigos para posteriormente pegarlos en la hoja de estilos de la web.

Tinypng, la herramienta idónea para el peso de las imágenes

Esta herramienta sirve para comprimir las imágenes que vayamos a utilizar en la página web y así no afectar a la velocidad de carga, aspecto que penaliza Google y perjudica el posicionamiento SEO.

Recursos para tener en cuenta a la hora de diseñar una página web

Pixabay y bancos de imágenes gratuitos

Las fotografías son un elemento imprescindible para diseñar correctamente una página web y en muchas ocasiones no se cuenta con un archivo fotográfico y multimedia completo para trabajar de la forma más correcta. En Internet existen varios bancos de imágenes gratuitos que aportarán estos elementos necesarios.

Vectores e iconos, tus aliados para el diseño de una página

Cuando se diseña una página web es importante hacerla lo más visual posible y con la mayor orientación hacia la conversión. En páginas como Freepick o Vecteezy se pueden descargar vectores de forma gratuita con una gran calidad. Estos archivos son editables en programas de diseño como Adobe Illustrator.

Consejo: No mezcles varios paquetes de iconos ya que transmitirán confusión al usuario y dará la sensación de no ser un diseño profesional.

Plugins en WordPress y WooCommerce

Otro de los aspectos clave a la hora de diseñar una página web es contar con una serie de plugins que permitirán añadir a nuestro sitio una serie de funcionalidades. Por ejemplo, un calendario para seleccionar una cita o para que el usuario vea post relacionados en el blog.

En estos enlaces puedes ver una selección de los mejores plugins para WordPress.

ejemplos de páginas web creadas en wordpress

¿Ya sabes cómo diseñar tu página web?

Crear una página web es un proceso algo tedioso y complicado si no se cuenta con los conocimientos suficientes para ello. Desde NeoAttack nos podemos encargar del diseño de tu página web y de cualquiera de los elementos gráficos que lo complementan. Solamente tienes que contactar con nosotros y contarnos qué estás buscando.