Aquí te voy a presentar 11 herramientas geniales para ayudarte al diseñar tu página web, son páginas webs o extensiones de Chrome que harán más fácil la creación de tu web.
En la publicación anterior te comentaba cuales eran los 13 elementos básicos para una web en condiciones, aquí ya te hablé de 3 herramientas que yo utilizo para el diseño web, hoy te presento 11 más que te harán el trabajo más sencillo.
Como ya he dicho el diseño web tienen que ser el adecuado para lo que tu visitante quiera, debes hacerlo siempre pensando en el usuario final, que sea sencillo, moderno y adaptado a todos los dispositivos.
_________________________________________________________________________________________________________________________________
Si piensas que lo que necesitas es contar con un experto para tu web no dudes en contactar conmigo AQUI
_________________________________________________________________________________________________________________________________
🌈Colorzilla
Los colores corporativos como ya te comenté deben ser coherentes con la página web. El otro día te hable de Adobe Color cc, con el que podías hacer combinaciones perfectas de colores.
Hoy te muestro una extensión de Chrome, ColorZilla con el que puedes sacar el código del color de una imagen, sección o fuente de una web.
¿Alguna vez has navegado por una web y te has preguntado que color será ese?
Pues al instalar esta extensión solo tienes que coger el cuenta gotas que aparece en la barra del navegador y ponerlo encima del color que desees saber y te dará los códigos de color, así como el tamaño de la imagen.
Así de sencillo detectar el color, copiarlo y llevártelo donde quieras.
🔠WhatFont
Al igual que en el ultimo post te comenté que una buena combinación de fuentes era esencial para la creación de la pagina web, ya que mejorábamos la usabilidad.
¿Has visitado una página y has dicho, «jo, que fuente tan chula, cual será»?
Como antes, te traigo una extensión de Chrome, WhatFont, super útil, que te da la información exacta de la fuente que se usa en esa página.
Tan solo con seleccionar esa extensión, y poner el cursor sobre la letra a inspeccionar, te dice de que tipografía se trata, pero si pinchas sobre ella te da más datos como tamaño grosor, color, etc.. dándote un resumen de los datos de esa sección.
📷Pic info
Aquí otra extensión de Chrome, muy interesante es Pic info, que te da toda la información de una imagen, desde la URL de la misma, tamaño o dimensión usada y si dispone de texto ALT (texto descriptivo de la imagen).
Es muy sencillo de usar, tan solo tienes que pinchar en la extensión, marcar la foto y saldrá un recuadro con toda la info.
🌆Pexels
Ya hemos hablado en otros posts, lo esencial que es tener contenido de calidad en nuestras páginas webs, y dentro de ese contenido de calidad, para no crear webs mediocres, están las imagenes.
En el articulo anterior te comenté un banco de imágenes que podías utilizar Pixabay, hoy te comento otra web con muchísimas imágenes de calidad, creadas por profesionales.
Pexels es una web y una app tanto para Android como iOS, en la que puedes encontrar imágenes y videos totalmente gratuitos que puedes descargar y usar en tus paginas web. Puedes descargar con el tamaño original o el tamaño que necesites.
🎞️Canva
Para crear imágenes resultonas con la calidad suficiente para nuestros blog o páginas web, es cada vez más sencillo, sin tener que ser un experto en diseño gráfico, sin la necesidad de utilizar Adobe Illustrator o photoshop.
Existen multitud de plataformas con las que crear imágenes ideales, una de ellas es Canva , para mi una de las mejores, puedes crear todo tipo de materiales y formatos para las redes sociales. Tienes opciones gratuitas y otras de pago, con las gratuitas podrás hacer muchísimas cosas.
Nada más entrar en la web verás un montón de plantillas que podrás elegir, cuando la elijas pasas aun pantalla donde tendrás que elegir elementos (textos, ilustraciones o imágenes que puedes cargar o elegir de sus base de datos), arrastrarlos y modificarlos para luego guardar y descargar la imágen.
Como bien sabemos la imágenes de cabecera son esenciales y marcaran la diferencia en tus entradas del blog.
🐼Tinypng
Seguimos con el tema de las imágenes, igual de importante es la calidad como el tamaño y el peso de la imagen, este último es esencial para la velocidad de carga de la página web y su optimización.
Se trata de un compresor de imágenes, que permite comprimir los 3 formatos más utilizados, webp, png y jpeg. Su utilización es muy fácil, tan solo con cargar o arrastras la o las imágenes (hasta 20 diferentes, que tontería para que quieres hacer 20 iguales), comprimir y descargar.
🚀Emojikeyboard
Seguro que has visto muchas webs con emojis.
¿Sabes que es un emoji? Son dibujos o signos utilizados para expresar emociones o ideas.
Con esta base para darle un toque diferente a nuestros textos podemos incluirlos, en Emojikeyboard.top, podrás encontrar 3521 para copiar y pegar en tus textos.
Iconfinder
Como los emojis los Iconos nos ayudan a aportar creatividad a nuestros textos, sobre todo del blog, para que no sean tan monótonos.
En muchas webs encontraras que los servicios están presentados con iconos, es una forma muy profesional de mostrar gráficamente a que se dedica tu empresa.
¿Dónde puedo encontrar esos iconos? Iconfinder.
Es la mayor base de datos gratuita que puedes encontrar, recuerda indicar que te muestre los iconos gratuitos y con fines comerciales.
📑Stylebot
¿Alguna vez has pensado en como quedaría una web existente con otros formatos?
Pues bien, con esta extensión de Chrome, puedes hacerlo.
Con Stylebot, puedes trastear todas las webs que quieras y si te gusta ese formato copiar el código CSS y trasladarlo a tu web. Sin ser un experto desarrollador web puedes aplicar este tipo de codificación a tu página.
📱Simulador móvil: herramienta de prueba receptiva
Como ya hemos hablado, el tema responsive (que se adapte a todos los dispositivos) es esencial para que todos los usuarios tengan la misma experiencia accedan desde un móvil, tablet o pc.
Para ver como queda tu web, puedes usar esta extensión de Chrome, con este simulador, podrás comprobar y navegar por los diferentes aparatos.
Si necesitas mostrarle a tu cliente como funciona su web, tienes la opción de hacer una captura de pantalla o un pequeño video, que puedes descargar en formato GIF.
WordPress Theme Detector
Yo uso wordpress como CMS (herramienta para crear y gestionar una web), muchas veces he visitado páginas creadas con esta plataforma y siempre he pensado, mira esta que chula, ¿Qué plantilla o plugins tendrá o habrá usado?
Pues desde ésta web WordPress Theme Detector puedes hacerlo, tan solo escribiendo la dirección web, esperas unos segundos y te indica toda la información de creación de la web en wordpress. Es genial!!
Conclusión
Hay multitud de extensiones y páginas webs que pueden ayudarte en el diseño de tus páginas. Aquí te he mostrado tan solo una pequeña representación de lo que puedes usar de forma gratuita.
Si no quieres complicarte, lo mejor y más rápido que que contrates a un experto, que pueda hacerte la página web y que te dé el mejor servicio.
_________________________________________________________________________________________________________________________________
Espero haberte ayudado un poco, si necesitas de mis servicios no dudes en contactar conmigo AQUI
_________________________________________________________________________________________________________________________________
