En el post anterior os contamos cuáles eran los primeros pasos para crear una web desde cero, desde la idea, el dominio y el hosting, hasta la creación de la web propiamente. Pues bien, ahora que ya la tenemos, es el momento de ponernos creativos y hablar del diseño de la web. Una web atractiva debe tener un diseño pensado, coherente y que llame la atención del usuario para que quiera navegar por ella. Vamos a ver unos cuantos consejos para hacer un buen diseño de página web y algunas herramientas que os harán la vida un poco más fácil.
Consejos para el diseño web
- Coherencia: la página web será la carta de presentación de tu negocio, y no hay nada peor que el desorden y la dejadez para generar desconfianza y perder futuros clientes. Todas las páginas de tu web deben tener una estructura y un estilo general común. Piensa en los colores que vas a usar, las tipografías, los estilos y el registro, y procura que toda tu web mantenga el mismo estilo.
- Navegación fácil: la experiencia del usuario marcará la diferencia entre un sitio con un buen diseño web y uno con un diseño mediocre. El tiempo es oro, así que haz que los pasos de una página a otra sean pocos y rápidos. Si lo que quieres es que tus visitantes conviertan en tu web, reduce los pasos, que sean claros y sencillos. Si el camino es largo y lioso se cansarán a la mitad y se marcharán. Mantén el tráfico en tu web con una navegación fácil e intuitiva.
- Enlaces: una buena manera de facilitar la navegación es destacar los sitios por los que ya has pasado, para no repetir. Algo tan simple como marcar con un color diferente los links que se han visitado hará que el usuario no se pierda por la web. Ponles el camino fácil. Además, si tienes enlaces externos, es recomendable que se abran en una pestaña nueva. De este modo el usuario no tendrá que abandonar tu web.
- Jerarquía visual: cuando llegas a una web quieres encontrar en seguida lo que andas buscando. La mejor manera de conseguirlo es que la estructura sea lo más visual posible. No es recomendable poner demasiado texto, y si se acompaña de un soporte visual, mucho mejor. Una estructura sobria y clara, con la información bien organizada, será un lienzo perfecto para que el usuario se sienta a gusto navegando por tu web.
- Contenido: la mayor parte de la información en internet se encuentra en forma de texto, por lo tanto, no hay que descuidar nunca este elemento. El contenido, además de ser de calidad, tiene que estar bien redactado y bien presentado. La revisión del texto y del lenguaje se ha convertido en algo esencial para dar buena imagen y generar confianza y seguridad. Un diseño web con textos llenos de errores ortográficos o gramaticales ahuyentará automáticamente a los posibles clientes.
- Verticalidad: si el contenido que muestras en tu web está organizado de forma vertical propiciarás que los usuarios naveguen más tiempo por la página. Cuanto más interés genere el contenido, más abajo irán los usuarios y más posibilidades de conversión habrá.
- Botones call to action: una buena manera de incentivar las conversiones en tu sitio web es con los botones. Cuando plantees el diseño de tu web tenlos en cuenta y ponlos allí donde creas que más eficientes van a ser. Los botones call to action deben decir claramente lo que hacen, y deben funcionar siempre. Y por encima de todo, tienen que parecer botones, aunque sea una obviedad. Si el usuario no interpreta este elemento como un botón o no funciona, lo perderás.
- Responsive: actualmente ya se navega más utilizando los dispositivos móviles que desde el ordenador. Por lo tanto, el diseño de la web tiene que estar pensado para que se adapte bien a los diferentes dispositivos. Ten en cuenta la posición de los elementos cuando pienses el diseño, y cómo se verán en un móvil o una tablet.
Herramientas para el diseño web
Hoy en día no hace falta ser un genio del diseño para crear tu propia web. Con un poco de creatividad y las herramientas adecuadas puedes diseñar una web sencilla, funcional y que cumpla tus propósitos, ya sea lograr conversiones, ofrecer información o mostrar tu trabajo. Con esta pequeña selección ya no tienes excusa para empezar a montar tu web.
- Adobe Color CC: una de las primeras cosas que debes hacer a la hora de diseñar tu web es pensar en la paleta de colores. Toda marca que se precie tiene su abanico de colores identificativos, cosa que va muy ligada a la identidad corporativa de la empresa. Con este programa podrás generar combinaciones de colores y cambiarlas al gusto hasta que des con la que más te identifique. Y continuando con los colores, la extensión para Google Chrome o Mozzilla Colorzilla te será muy útil para encontrar colores. ¿Quieres usar aquél rojo teja tan chulo que has visto en una web, pero no hay manera de encontrar el tono exacto? Esta extensión tiene un cuentagotas que coge el código del color de cualquier elemento para poder usarlo.
- Typecast: otro elemento esencial de una web es la tipografía. Es importante escogerla bien, que sea fácil de leer y que sea coherente con el discurso de tu web. Esta aplicación tiene más de 5.000 fuentes con las que podrás trabajar en un solo panel de control. Puedes probar todas las que quieras hasta que encuentres la perfecta para ti. Además, podrás obtener el código CSS para asegurarte que los usuarios verán correctamente la fuente que has escogido para tu web. Y como con el color, la extensión de Google Chrome WhatFont te permitirá saber qué tipografía es esa que te gusta tanto de aquella web con sólo pasar el cursor por encima.
- Mockflow: con esta herramienta podrás montar de manera rápida y fácil un prototipo de tu web. Con el sistema drag and drop diseñar tu web será muy intuitivo y podrás crear proyectos de hasta cuatro páginas con la versión gratuita. Es multiplataforma, con lo cuál podrás montar tu prototipo pensando en Android, iPhone, WordPress, Joomla…
- Invision: te permite crear un prototipo de página web y convertirlo en interactivo con interacciones y transiciones para comprobar el funcionamiento del diseño que has pensado. También puedes compartir el proyecto con quien quieras, cosa que te vendrá muy bien si es para un cliente, para que pueda ver el proceso creativo.
- Proto-io: con este programa podrás diseñar aplicaciones. Es una herramienta muy potente, con multitud de opciones para incluir y configurar los componentes que necesites. Puedes incluir código html, texto, listas, menús, formularios… y todo en una pantalla dividida en zonas para facilitarte el trabajo.
- Sublime Text: si te atreves con la programación para crear el diseño de tu web, este editor de código es para ti. Es sencillo y va directo al grano, sin lugar para distracciones, con lo cuál es un editor muy eficiente. Te permite tener más de una pestaña abierta, y puedes trabajar en el modo de pantalla completa para aprovechar el espacio al máximo.
Con todas estas herramientas puedes conseguir crear un diseño web a tu medida, tal y como lo tienes en la cabeza y que represente todo lo que quieras mostrar de tu negocio. Ten en cuenta qué quieres conseguir con tu web y qué quieres que los usuarios encuentren en ella, de este modo el diseño se adaptará a las necesidades de los futuros clientes. Pónselo fácil, que lo encuentren todo rápido y a la primera y que, además, sea bonito. Y si lo tuyo no es el diseño, déjalo en manos de nuestros diseñadores web, ellos se encargarán de hacer el diseño de tus sueños.
