No existe un manual infalible que te indique la caja de herramientas de diseño web que tienes que tener siempre a mano. Como buen diseñador web desarrollador, tu cinturón de bricolaje tiene que tener algunas herramientas imprescindibles que llevarán tus conocimientos al nivel de superpoderes mágicos. Estas son las herramientas de diseño web que te recomendamos que guardes en favoritos de tu navegador.
ADOBE COLOR CC
Si eres buen diseñador web pero la combinación de colores se te va de las manos más que a Desigual, no te preocupes, hay herramientas perfectas que te ayudan a no producir epilepsia.
Adobe Color CC es la herramienta web por excelencia. Podrás jugar y experimentar con la paleta cromática como un niño, puedes guardar tus combinaciones en tu biblioteca (acceso desde tu cueta de Google o Facebook).
GOOGLE FONTS
Otro aspecto fundamental para tener un diseño web atractivo y una buena experiencia de usuario es la elección de tipografías. Con Google Fonts tienes a tu disposición 923 familias de uso libre. Tan solo tienes que tener claro el estilo de tipografía (serif, sanserif, handwriting…).
Si estás trabajando con WordPress, implementar tu tipografía escogida es muy sencillo, pero hay ciertos pasos que tienes que seguir.
Los chicos de DecodeCMS nos han dejado un tutorial super claro.
PIXABAY. FREEPIK
Los bancos de imágenes y vídeos gratuitos que te solucionarán la vida. Cuando tengas tu web y necesites fotografías pero tu cliente no aportarte ningún material, no hace falta que convenzas a tu familia o amigos para que posen como si estuvieran en una clínica dental o en un despacho de abogados, en Pixabay o Freepik encontrarás fotos de todo tipo.
SQUOOS
Una vez tengas tus imágenes, es importante optimizarlas para poder trabajarlas en un entorno web. Tener buen pulso entre el peso de la imagen y la calidad es fundamental para que tu página tenga buena velocidad de carga y buen calidad de contenido. Nos gusta mucho Squoos porque optimiza las imágenes ontime, puedes ir bajando peso y ver cómo va quedando la imagen y con la pérdida y compararla. El punto negativo es que no puedes hacer volcados en lote, tendrás que ir haciendo una a una la optimización.
FIGMA
La aplicación web que dará arquitectura a todo tu sitio web. Figma es gratuita y online, podrás tener todos tus diseños en la nube. Puedes hacer modificaciones en línea, guardarlo en tu Google Drive, es altamente intuitiva y te aportará a ti y a tu cliente una visión del sitio web mucho más clara.
VISUAL STUDIO. SUBLIME TEXT.
Dominar el código es imprescindible si quieres ser diseñador y desarrollador web y para ello, Visual Studio o Sublime Text serán tus herramientas de base. Muchos diseñadores, se asuntan cuando ven la palabra CSS o JavaScript pero si te adentras en el fascinante mundo del código, te aseguramos que te sentirás como Harry Potter en Howarts.
Poder modificar elementos de una web predefinidos (como un slider) te hará llevar tu sitio web a otro nivel. Editores de código como Visual Studio te facilitan la tarea con sus extensiones de color para poder leer el código de manera mucho más intuitiva. Una vez hayas hecho tus creaciones con el código de manera local, implementarlas en WordPress es muy sencillo. Te animamos a que te quites el miedo al código y aprendas a pintar en la pantalla tu primer {Hola Mundo} y disfrutar de hacer magia.
GITHUB
Si ya tienes unos cuántos proyectos o aplicaciones hechss con código es momento de compartirlo con el mundo. GitHub es el portal creado para que los desarrolladores suban sus códigos, lo compartan y otros desarrolladores puedan colaborar.
La comunidad de desarrollo web es altamente colaborativa, todo está en la web, y en GitHub puedes encontrar ese código que necesitas para tu web. Para que al hacer click en un botón, aparezca un popup, cambiar o modificar el estilo de un elemento…
Además, GitHub cuenta con un control de versiones y a través de SourceTree podrás modificar tu código desde Visual Studio en tu ordenador y automáticamente se quedará guardada esa versión en tu repositorio de GitHub. Lo que hemos dicho, magia.
MDN Web Docs. CSSTricks. Stack Overflow
Estos tres sitios webs son casi el ABC del desarrollo web Front End. En ellos encontrarás toda la documentación sobre HTML, CSS, Javascript, Apis, librerías y foros de preguntas y respuestas de desarrolladores desesperados buscando una respuesta a esa función que no termina de ejecutarse correctamente. Por suerte, tu comunidad siempre estará ahí para darte la respuesta que necesitabas y el consuelo a tu frustración.
XAMPP. WAMP. MUMP
Y por último, si tienes que empezar a desarrollar tu página web y el cliente tiene una web antigua publicada en su dominio, necesitas trabajar en local. Más magia. Estos tres nombres pertenecen a tres softwares libres para crear servidores locales en tu ordenador y que no dependas de un proveedor de hosting o contratar uno para poder empezar a trabajar. XAMPP y WAMP (PC) y MUMP (Mac) corren sobre PHP y usan PHPMyAdmin para crear las bases de datos. No hace falta saber de informática para activarlos, solo seguir un tutorial como este.
Si ya tienes tus herramientas de diseño web y quieres saber algunos consejos para empezar a montar tu página web, te lo contamos aquí.
