Herramientas de utilidad para Diseño Web

Jun 2, 2018 | General, Tutoriales, Wordpress

Buenas, en esta ocasión voy a hacer una recopilación de herramientas, que quizás os puedan venir bien para poder realizar vuestros diseños. Algunos ya los conoceréis, pero quizás otros los conoceréis por primera vez y os quitará seguro muchos quebraderos de cabeza.

Color

Vamos a empezar con las utilidades de color. La primera y para mi la más practica es Adobe Color (antiguo Adobe Kuler).

Esta herramienta nos permite seleccionar cualquier color y presentarnos no solo el seleccionado, sino otros en función de la opción que seleccionemos, tales como análogos, monocromáticos, triada, complementarios, compuestos, tonos y personalizados.

También incluye una biblioteca de paletas de colores realizadas por profesionales.

Existen otras muchas herramientas online para el tema de color, pero considero que esta es tan completa que cuando la utilices te olvidarás de las demás.

CSS3

En tema de CSS existen opciones muy variadas, para animaciones, efectos hover, … El que utilice DIVI, verá que muchas de las opciones que aparecen en estas utilidades, ya las incorpora el tema por defecto, pero no a todo de momento se le puede aplicar efectos CSS si no es mediante el CSS personalizado.

Estas utilidades te dan el código preparado de lo que quieres hacer, solo faltaría aplicar la clase o id a la cual queremos realizar el efecto.

Vamos con la primera

Esta utilidad nos devuelve un código en función de los parámetros que le indiquemos. En la pantalla principal vemos todos los efectos CSS que podemos aplicar. Como he dicho, muchas ya vienen con DIVI, pero no a todo en este tema se le puede poner sombra, bordes redondeados, si no es con un código personalizado.
CSS_generator Namaste Web
Mucho más completa que la utilidad anterior, pero algo más complicada de utilizar. Te da muchas más opciones a realizar, aunque como digo, a costa de ser algo más compleja.
enjoyCSS Namaste Web
Otra utilidad, totalmente visual y que como en el caso de las anteriores, podemos ver los resultados en tiempo real y nos genera el código que tenemos que insertar.
CSS_animation Namaste Web
Os dejo algunos enlaces a otras utilidades que también podréis sacarles provecho:
Magic Effects

CSS Animation Generator

SVG Loaders

Imagenes

Aunque en WordPress existen muchos plugins que reducen el tamaño de nuestras imagenes tales como WP Smush ó ewww optimizer, no es para nada bueno subir una imagen de 5MB para esperar que estos plugins nos las comprima.

Lo suyo, es subir una imagen ya optimizada y si el plugin nos ayuda, pues mejor, pero como digo, lo suyo es subirla ya optimizada.

Podemos usar photoshop, Gimp, o algunas utilidades Online que paso a mercionaros.

Tan fácil como arrastrar y soltar dentro del recuadro que nos brinda tinyPNG para que nos comprima las imagenes de una forma bestial, sin perder calidad. No nos pide nada para comprimir, lo hace todo automatizado. Una vez la comprime, solo nos queda descargarla. Los formatos aceptados son png y jpg.
tinypng Namaste Web
Este recurso no es más que un banco de imágenes, eso sí, para mí el mejor banco de imágenes con busca en español que existe. Todas son libres, encontraras lo que quieras, pero siempre sabiendo que al ser de libre difusión, lo que hay es lo que hay. No obstante, seguro que encontraras lo que buscas.
pixabay Namaste Web

Varios

En este último apartado, os dejaré una serie de enlaces que también pueden ser de utilidad. Os animo a que los visitéis ya que todos pueden ser de utilidad en algún momento.

Análisis Web

Pagespeed: Analiza tu web para ver su velocidad de carga y como podemos optimizarla.

GTmetrix: Analiza tu web para ver su velocidad de carga y como podemos optimizarla.

Pingdom: Analiza tu web para ver su velocidad de carga y como podemos optimizarla.

Iconos

Flaticon: Uno de los mejores bancos de iconos que existen.

Icon-icons: Otro banco de iconos.

Font Awesome: Infinidad de iconos. Tiene su plugins en el repositorio de WordPress.

Minimizar código

CSS Minifier: Copias tú código CSS en una ventana y en la de al lado te lo sirve totalmente minificado.

JsCompress: Copias tú código CSS en una ventana y en la de al lado te lo sirve totalmente minificado.

Minify: Sirve tanto para css como javascript

Esto es solo una pequeña recopilación de las muchas utilidades que existen y que nos harán la vida más fácil a la hora de hacer nuestros diseños. Espero que le saquéis provecho.
Share This
A %d blogueros les gusta esto: