Nueve herramientas y media para diseñar como un diseñador web sin serlo

Si bien hace unos años el diseño web podía suponer un auténtico reto para cualquiera y era un asunto de unos pocos expertos, lo cierto es que el lanzamiento de nuevas herramientas y la aparición de servicios alternativos ha puesto al alcance también de los más novatos, esta disciplina.

Un “arte” que, mediante las utilidades más apropiadas, lograremos desarrollar con éxito. Y es por eso por lo que hoy hemos decidido recabar algunos de los servicios y aplicaciones más completos al respeto; unos recursos que te lo pondrán más fácil a la hora de crear un logo, conseguir una plantilla, etcétera. ¿Listo para diseñar como un auténtico diseñador web sin serlo? Este debe ser tu repertorio de cabecera.

Strinkingly

Strinkingly, así, es una aplicación muy interesante que permite, a prácticamente cualquiera y desde cero, diseñar un sitio web responsive de manera ágil y sin quebraderos de cabeza. Para empezar a utilizarla puedes servirte de tus credenciales de Facebook, momento a partir del cual ya podrás escoger entre las distintas plantillas predefinidas que, por cierto, podrás modificar a tu antojo.

También es posible crear la tuya propia, aunque no te recomendamos que lo hagas si acabas de empezar, pues no está de más tener una guía inicial aunque posteriormente el resultado no se parezca en nada al original. La variedad, en todo caso, resulta limitada en comparación con otras utilidades, pero merece la pena conocerla. Por otra parte, aparece estructurada en función del tipo de página que deseas alumbrar: empresa, startup, personal, tienda, generales y portfolio.

Typecast

Por su parte, Typecast te brinda la oportunidad de trabajar con más de 5.000 fuentes distintas en un solo panel de control (Typekit, Fonts, Google Fonts, Fontdeck, etcétera). Un servicio que te permitirá decidir de manera más célere la mejor tipografía para los textos de tu web.

Asimismo y para que puedas hacerte una composición de lugar, incluye la posibilidad de crear columnas de texto y contenido y alterar la tipografía usada. También podrás obtener el código CSS con el objetivo de que, cuando carguen tu página, tus clientes vean exactamente lo mismo que tú. Es gratuita e incluye seminarios y un blog en el que encontrarás más detalles.

Dafont

Aunque no tan completo como el que le precede en esta lista, Dafont es un buscador de tipografías que añade fuentes con regularidad (brinda la oportunidad a los usuarios de hacerlo). Un lugar en el que intercambiar recursos, visualizar su aspecto y, en definitiva, disponer de alternativas con las que personalizar los contenidos de nuestro inminente sitio web.

Para ponérnoslo todavía más fácil, cuenta con diferentes categorías que estructuran las fuentes en función de su aplicación o temática de nuestra página: animación, de tebeo, desgastadas, distorsionadas, de terror, góticas, básicas, hechas con brocha, a mano alzada, tecnológicas, etcétera.

Canva

Lo que nos ofrece Canva es la posibilidad de generar diseños específicos basándonos en plantillas que disponen de las características y medidas apropiadas para cada red social. Todo sin necesidad de descargar ningún programa, desde la propia página web. Para empezar a utilizarla podemos registrarnos a través de Facebook y Google, o mediante nuestro correo electrónico. Picmonkey es otra opción muy similar.

Si quieres conocer más datos sobre este editor gráfico que recientemente ha lanzado su versión en español, no dejes de consultar este artículo.

Freepik

Freepik, asimismo, se trata de un banco de imágenes gratuito. Un tipo de recurso del que te hemos hablado con mayor exhaustividad en anteriores artículos y que resultará fundamental a la hora de crear un sitio web estético y que no incurra en ningún tipo de ilegalidad. Evidentemente, existen otras alternativas, pero en este en concreto podrás conseguir vectores, imágenes, iconos y PSD.

Otras de nuestras opciones al respecto son TheNounProject –un buscador de iconos vectoriales-, Vector3free –muy similar-, Freeimages, Pixabay, Vecteezy y Flaticon –en el que puedes descargar en png, svg, psd o icofont-.

Adobe Color

Adobe Color, por su parte y como su propio nombre indica, le da protagonismo al color. En concreto, se trata de una herramienta gratuita de Adobe y a la que podrás acceder a través de la web (sin necesidad de descargar software alguno) que resultará de gran utilidad a la hora de crear una paleta de color para tu proyecto, distintas combinaciones, etcétera.

Algo que se agradece, en especial si tenemos en cuenta que precisamente los tonos serán el signo de identidad de nuestra firma. Además, resulta fácil de utilizar: basta con introducir la URL para entrar, directamente, en un panel de edición en el que, nos presentan un círculo cromático y datos como los colores análogos, los complementarios, tonos monocromáticos, etcétera. También incluye datos identificativos en la parte inferior y nos deja crear un tono a partir de una imagen.

Squarespace Logo

Como comentábamos, el diseño del logo también resulta básico. Sí, porque este icono debería transmitir con claridad las ideas de tu empresa, sus valores y un largo etcétera que ya puedes suponer. Además, ha de ser sencillo, legible, y reconocible sobre distintas superficies, en blanco y negro, y demás.

Unos rasgos que te será más fácil cumplir con la ayuda de Squarespace Logo que, si bien se queda limitado en algunos aspectos, es perfectos para aquellos que carecen de nociones avanzadas. Para empezar a utilizarlo basta con escribir el nombre de tu marca en el recuadro que se te indica y, seguidamente, entrarás en un editor, donde podrás añadir elementos e imágenes predefinidas.

Cuando acabes, tienes la opción de descargar el resultado, eso sí, a baja resolución. Además, el sitio pone a nuestra disposición un apartado de soporte y ayuda, preguntas frecuentes, workshops y un blog en el que encontramos artículos de lo más ilustrativos.

Squaresplace website

Esta misma entidad cuenta con otra herramienta centrada específicamente en la creación de un sitio. Para ello, pone a nuestra disposición distintas plantillas. El proceso requiere de un registro sencillo: nombre, dirección de correo electrónico y contraseña.

Será a partir de entonces cuando podremos empezar a desarrollar, siguiendo las correspondientes instrucciones que nos brinda el tutorial, nuestra propia página. Incluso nos deja seleccionar si se tratará de una web de empresa –y el sector-, personal, etcétera. Una vez acotados los citados parámetros, nos dejará empezar a diseñar. Incluye un panel a la derecha con plantillas, diseño, ajustes, analíticas y similares.

Withoomph

También dedicada a los logotipos, Withoomph nos brinda la posibilidad de crearlos de manera prácticamente automática escribiendo el nombre de nuestra marca y algunas palabras clave básicas que utilizará para combinar de manera aleatoria y crear diferentes combinaciones. Una vez decidido el “modelo”, podemos modificar el color, la tipografía, etcétera. Básico pero útil.

Ahora bien, no podemos evitar comentar que para visualizar la imagen JPG en alta resolución, además del PNG con fondo transparente, deberemos abonar la suma de 20 euros. Un importe que nos parece excesivo. La cantidad asciende a los 40 euros para recibir los vectores editables EPS y archivos PDF escalables.

Consejos para principiantes

• Al margen de las herramientas en sí mismas y antes de ponerte manos a la obra, convendría que tuvieses en cuenta una serie de cuestiones:
• Empieza usando plantillas para tener una guía y aprender más al respecto.
• Evita las combinaciones de colores estridentes.
• Escoge uno corporativo.
• Cuida la legibilidad.
• Sé coherente y mantén una estética continuista, donde todos los elementos queden integrados correctamente.
• Vigila el tamaño de los textos, el uso de las mayúsculas y la tipografía.
• No abuses del logo.
• Cuida la distribución.
• No te excedas recargando el diseño.
• Y por último, no dejes de formarte.

En Genbeta | Veinte trucos para celebrar 20 años de GIMP

En Xataka Foto | 48 alternativas a Adobe Photoshop, 22 programas de escritorio y 26 servicios online