Recursos gratuitos útiles en diseño web

CÓMO DISEÑAR UN SITIO O PÁGINA WEB

Aquí hay una lista de los recursos que pueden resultar útiles para diseñadores de sitios web, sobre todo para principantes o para quienes no tienen la facilidad de realizar búsquedas en inglés. La idea principal de crear está colección de vínculos de utilidad para diseñadores y desarrolladores web, se basa en compartir los sitios valiosos encontrados en internet y que no siempre son muy conocidos.

Otra razón es que estos sitios frecuentemente son útiles para demostrar algún ejemplo en curso o sesión de capacitación, al compilarlas y subirlas a la web, son de gran ayuda ya que se convierten en una especie de apunte permanente e imborrable, que uno siempre puede consultar, sobre todo si tomo el curso hace tiempo y ya no tiene a la mano esa información.

Estos recursos se usa también en la capacitación y cursos de diseño web, así que el listado sirve como recordatorio para los clientes de la consultoría. La razón es que estos sitios frecuentemente son útiles para demostrar algún ejemplo en curso o sesión de capacitación, al compilarlas y subirlas a la web, son de gran ayuda ya que se convierten en una especie de apunte permanente e imborrable, que uno siempre puede consultar, sobre todo si tomo el curso hace tiempo y ya no tiene a la mano esa información.

Esto eliminará la necesidad de volver a contestar los e-mails de este tipo "hace un año me enseñaste un sitio padre, cual era su dirección?" y parecidos - ahora todo lo recomendado en los cursos o en las pláticas se encuentra en un lugar que todo el mundo puede consultar.

Los vínculos a los recursos, están organizados pensando en el orden en que pueden ser útiles en todo el proceso de desarrollo: desde conseguir elementos de contenido, escoger el software adecuado para poder armar un sitio, hasta depurarlo y hospedarlo en un servidor. La mayoría de ellos son gratuitos y donde se puede - en español.

La lista está en desarrollo continuo, siguiendo las nuevas tendencias e inventos; si la agregas a tus favoritos o marcadores podrás beneficiarte al regresar y ver los cambios y las actualizaciones.

Recursos, herramientas y tips útiles para diseño web

De muchas herramientas, bibliotecas, aplicaciones y páginas web que existen, presento las que uso para desarrollar mis proyectos de manera más fácil y más rápida así como apoyo para impartir mejor los cursos. La compilación es personal y subjetiva, no pretendo decir ni sugerir que estos recursos son los únicos o los mejores, simplemente que los he probado, me gustaron y me sirven, por esto considero que merecen ser promocionados y compartidos con otros diseñadores.

Planeación del sitio web

Antes de iniciar el proceso de diseño web y de su desarrollo hay una etapa de las pláticas con el cliente, cotizaciones, planifiación, revisar las muestras y evaluar los ejemplos, investigar y demás procesos relacionados.

Free Mind
Herramienta libre y multiplataforma para desarrollar mapas mentales y conceptuales.
MindMup
Aplicación web para creación de mapas mentales que funciona en la nube por el navegador.
A website designed
Infografía demostrando varios pasos de un desarrollo de un sitio web típico.

Diseño gráfico

Sortfolio
Una compilación de portafolios de desarrolladores de todo el mundo mostrando las tendencias del diseño.
Lorem Ipsum
Generador del texto simulado para relleno, útil en la etapa de prototipado.
Normalize CSS
Hoja de estilos CSS que funciona como una alternativa moderna para los resets.
Ungrid
La retícula más sencilla para iniciar el desarrollo responsivo.
The Rem Calculator
Calculadora que permite convertir píxeles en las unidades rem para las hojas de estilos.

Elementos de contenido de sitios web

Hay muchos sitios gratuitos en internet que ofrecen elementos de diseño para descargar, como fotografías, tipos de letras o apoyo en la selección de una elegante gama de colores. A veces tienen ciertas restriciones, como otorgar el permiso de uso de un tipo de letra sólo para proyectos sin fines de lucro, pero en general la mayoría de éstos son libres de derechos y están listos para usarse en un sitio:

Color

Colores CSS
Lista de colores CSS ordenable por el nombre u otras clasificaciones.
Color Scheme Designer
Creador de paletas de color con la opción de exportar como CSS o muestras de Photoshop.
Combo Tester
Herramienta para realizar las pruebas de combinaciones de colores para proyectos web.
Pictaculous
Creador de paletas de colores a base de las fotografías con exportación de muestras a Photoshop.
Coolors
Un rápido y cómodo generados de paletas de colores aleatorias.
Checkmycolours
Utilería de revisar el contraste de colores de páginas web para asegurar que sean legibles para todos.
Color Picker
Matices de colores web con sus valores hexadecimales y otras notificaciones.
0to255
Aplicación para obtener los tonos de los colores para el diseño web.
Gradient Editor
Generador del código CSS para obtener diferentes tipos de degradados en el navegador web.

Imágenes

Freepik
Buscador de fotografías, vectores, PSDs e íconos que rastrea varios sitiso con imágenes gratuitas.
Free Images
Un buen banco de imágenes gatuitos, libres de derechos para descargar y usar en los proyectos web.
Favicon.net
Explicaciones sobre el ícono de la página con un tutorial paso a paso en español.
Favicon.cc
Generador en línea de los favicons con la opción de crearlos o convertir desde una imagen.
PS ICO plug-in
Un complemento gratuito para Photoshop que permite convertir imágenes en íconos con el formato ICO.
Real Favicon Generator
Generador automatizado para la creación de íconos para todas las plataformas.
Dinpattern
Una colección de fondos tipo seamless, gratuitos y de buena calidad, para el uso en las páginas web.
Subtle Patterns
Más fondos gratuitos para páginas web.

Texto, tipografía y fuentes

Dafont
Bien organizada colección de tipos y fuentes de calidad libres para descargar.
Font Pair
Herramienta que ayuda a obtener combinaciones armoniosas de las fuentes de Google.
Font Converter
Convertidor universal en línea para formatos múltiples de fuentes.
What the Font
Buscador e identificador de tipos y fuentes.
Entidades XHTML
Lista completa de las entidades XMTL, símbolos y carácteres especiales.
Type Tester
Ensayador tipográfico para probar la configuración de la tipografía en vivo.
Perfect Typography
Calculadora de interlínea para las hojas de estilos de CSS.
CometDocs
Sistema de administración de documentos en línea con opciones de convertir un imagen en texto.
CopyScope
Buscador especializado en encontrar en línea páginas web o textos fusilados o copiados.

JavaScript, bibliotecas y frameworks

jQuery
Descargar jQuery directamente.
Unheap
Una colección organizada y ordenada de los plug-ins para jQuery.
Lightbox
La clásica galería de imágenes con transiciones.
HTML5 Boilerplate
Un punto de partida para desarrollar páginas o aplicaciones con HTML5 y tecnologías modernas.
Initilizr
Inicializador para HTML5 Boilerplate que facilita un principio rápido de proyectos web.

Multimedia

Format Factory
Convertidor multifuncional gratuito para varios formatos de imagen, audio y video.
Free Sound
Una banco de sonidos libres de derechos para descargar de manera gratuita.
ccMixter
Un repositorio de archivos gratuitos con sonidos y música para páginas web, videos, juegos y otros proyectos.

Programas gratuitos de diseño

Aunque Adobe es líder en desarrollo de software comercial para diseño de sitios de internet, hay algunas alternativas que pueden interesar a quienes prefieren usar Linux o trabajan con bajo presupuesto:

Gimp
Editor gratuito, portátil y multiplataforma para fotos y mapas de bits en general.
Inkscape
Aplicación gratuita para la creación y edición del formato vectorial en web (SVG).
Amaya
Editor gratutioto del código abierto para la creación de páginas web.
SumoPaint
Aplicación web para la edición en línea de imágenes tipo mapas de bits.
Pixlr
Versión web de la aplicación Pixlr útil para la edición de fotos en línea.

Análisis y posicionamiento

Aquí se presentan algunos vínculos que direccionan a servicios que permiten depurar el sitio y mejorarlo, ajustandolo a las recomendaciones de W3C y lo que verán los usuarios en sus navegadores:

Validador HTML
Validador del código HTML de porporcionado por W3C.
Validador CSS
Otro validador de CSS de W3C.
Validador Unicorn
Multivalidador integrado que verifica a la vez diferentes aspectos de desempeño de las páginas web.
Checklink
Verificador de vínculos rotos.
Websitegrader
Calificador SEO de páginas web.
Google Analytics
Herramienta de analítica web para monitorear el tráfico.
Google Webmaster Tools
Varios recursos e indicadores diagnósticos para webmasters.
Statcaunter
Estadísticas gratuitas mostrando algunos parámetros diferentes de los anteriores.
Pingdom
Verificador de velocidad de las páginas web.
Web Page Test
Testeo gratuito de la velocidad de páginas web usando los navegadores reales.

Referencias

HTML & CSS Vocabs
Vocabularios interactivos y multilingües, incluyendo español con la nomenclatura de HTML y CSS.
W3schools
Refrencias de códigos web con tutoriales sencillos para aprender HTML, CSS, JavaScript, jQuery, Bootstrap etc.
LaunchList
Lista de verificación del estado del desarrollo para revisar antes lanzar un sitio web.
Can I Use
Referencias de la capabilidad de los navegadores para usar los elementos HTML5 y las propiedades de CSS3.

Cursos, capacitación e idiomas

Duolingo
Sitio web de un sistema para estudiar idiomas, también existe como una aplicación móvil.
Forvo
Guía sonora de pronunciación en inglés presentando diferentes maneras de pronunciar.
Free Rice
Juego para aprender el vocabulario inglés al mismo tiempo ayudando a combatir el hambre en el mundo.

Herramientas web

Archive
Archivero de internet con acceso a varios recursos gratuitos y un respaldo histórico de páginas web.
TinEye
Buscador invertido de imágenes que permite investigar en qué páginas aparece una imágen.
MailChimp
Solución para mercadotecnia en línea y envío de campañas de e-mails con el rastreo de resultados.
WeTransfer
Servicio gratuito para transferir archivos grandes sin la necesidad de registrarse.

Hospedaje y dominios

Existen varias opciones para subir y mantener un sitio en internet, desde las totalmente gratuitas hasta las más caras. Aquí se incluyen las más recomendables, selecionadas por que tienen características interesantes:

Dot.tk
Dominios gratuitos en Tokelau, un páis en Pacífico que permite usar su ccTLD (dominio nacional) a todo el mundo.
Who.is
Herramienta para la investigación de dominios.
DomainTools
Herramienta para saber dónde está alojado un sitio web.
Bustaname
Buscador de dominios con un generador de nombres integrado.

Si tomaste un curso o unas clases particulares conmigo y te enseñé alguna herramienta web que no se encuentra aquí, avísame por favor para actualizar la colección. Igualmente si alguna de las ligas no funciona repórtala, gracias de antemano.