¬Ņ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.