Claramente, cuando diseñamos, ya sea una web o un proyecto gráfico, participan en gran medida nuestros conocimientos y todo aquello que hemos visto, oído o leído. Diseñamos con objetividad, a partir de nuestra experiencia.
Sin embargo, de la misma manera que necesitamos un poco de inspiración, también, existen herramientas que nos pueden hacer más sencillo el proceso de diseño. No nos lo van a regalar, puesto que la decisión ultima la tomaremos nosotros, pero sí que nos pueden ayudar a tomar decisiones o a escoger un determinado camino.
En el blog hemos visto distintos tipos de herramientas: para decidir combinaciones tipográficas, bancos de imágenes gratuitos, de patrones, de tipografías…. Por lo que hoy os traeremos un compendio que abarque distintos elementos y que así nos puedan ayudar al proceso completo de diseño. Al final, como solemos decir, todo va al cajón de sastre, para esperar el momento de ser usadas!
Comenzamos!
1. Crea tu gradiente
Aunque parezca que el uso de degradados ya no es tan tendencia como antes, sigue estando bastante presente en el diseño. Hemos hablado de sus combinaciones y usos, por lo que no está de más una herramienta que nos ayude a su creación.
En este caso os proponemos webgradients, en la que comparten una selección de degradados, que podemos copiar fácilmente con los códigos HEX del color o bien para CSS. La librería posee 180 degradados por lo que seguro que encuentras el tuyo!
2. Combinación de colores
Seguramente sepas tanto sobre combinaciones de colores que no necesitas ningún recurso para ayudarte, pero por si acaso…. Te recordamos la infografía sobre el color, que seguro te es de ayuda, pero si te atreves con tu propia combinación con esta herramienta puedes ayudarte a llegar a la que mejor se adapte a tus necesidades.
Aunque no hay un gran número de ellas, son combinaciones de muchos tipos que seguro que puedes usar como definitivas o como primer paso para conseguir la tuya. Puedes copiar fácilmente los códigos HEX.
3. Comprueba si tu web es responsive
Que nuestra web tiene que ser responsive, creo que no hay nadie en el mundo que lo dude, por lo que una herramienta de este tipo es fundamental cuando diseñamos una web.
En ella podemos comprobar la visualización de nuestra web en distintos dispositivos y también en horizontal o vertical. No están, obviamente, todos los dispositivos, pero sí que hay una gran parte de ellos que pueden darte una gran idea de cómo se visualizará.
4. Análisis de tus hojas de estilo
Herramienta perfecta para los amantes del CSS. Con ella podrás ver todos los estilos que se incluyen en una determinada web, lo que la hace muy útil, si necesitamos buscar un color o una tipografía.
Solo tienes que introducir la url y si quieres que se muestre en un navegador especifico.
5. Usa tu patrón
Si necesitas un patrón para tu web esta es tu herramienta. Con ella, a partir de una biblioteca podrás escoger el patrón que mejor se adapta a tus necesidades y modificar los colores para que encaje con tu diseño.
Una vez escogido puedes copiar fácilmente el código CSS y usarlo en tu web.
6. Crea tu Mock-up en línea
Hemos compartido varios recursos para crear mockup, pero normalmente han sido de descarga. En este caso os traemos esta web en la que podemos trabajar online con alguno de estos más de 2500 ejemplo.
La forma de trabajo es muy sencillo, elige el mockup que te gusta y solo tienes que subir la imagen y luego descargar tu mockup. Además podemos encontrar los mockup por categorías por si estamos buscando alguno especifico.
Esta es la primera parte del artículo, que hemos querido dividir en dos, en la próxima entrega compartiremos otras herramientas que unidas a estas nos harán más fácil el proceso de diseño. Esperamos que os hayan gustado y sobre todo que os parezcan útiles.
Muy interesante.
Gracias por el aporte.
Muy buenas herramientas.
Muchas gracias por compartir.
Saludos!!!
Un buen post. Util. Sencillo.
Esperamos la segunda parte.
Muchas gracias!
Pronto la parte 2…
Muy buena entrada en el blog, me apunto estos consejos para futuros proyectos!
Muy interesante. Gracias por el aporte.
Me encantan estas herramientas, algunas como es Hero patterns me parece un verdadero descubrimiento, me gusta mucho al igual que web gradients porque están tan de moda que la voy a usar mucho esta temporada.
Os felicito, os leo todas las semanas!
Muchas gracias Carmen, me alegro que te sean de ayuda.
En breve, la parte 2…
Un saludo!
Gracias por el aporte, muy interesante y recomendable.