Diseño de Interfaces Web

 Sitemap

1 Planificación de interfaces. Herramientas

MATERIAL DESIGN. COLOR TOOL
Herramienta para crear y compartir paletas de colores para la interfaz de usuario.
Permite seleccionar un color primario, uno secundario y medir el nivel de accesibilidad de cualquier combinación de los colores de la paleta.

PALETTON
Generador de paletas de colores muy útil cuando hay un color base definido para realizar combinaciones de hasta cuatro colores.
Provee tablas de color y exportación en distintos formatos (html, css, less, sass, xml y text).

Hex Colors
Conjunto de herramientas para generar paletas de colores.
Incluye una referencia de la paleta de colores de material.

Leonardo
Heramienta de código abierto para crear temas de color accesibles basados en el ratio de contraste de los colores.
Muestra ejemplos de elementos, gráficos del contraste de los colores elegidos y modelos de color (HSV, RGB, etc.).

HTML color codes

Herramienta de selección de códigos de color html, códigos de color hexadecimales, valores RGB y HSL, carta de colores y nombres de colores HTML.

Color Contrast Checker

Herramienta sencilla desarrollada por Mari Johannessen para ayudar a los desarrolladores y diseñadores a asegurarse de que sus paletas de colores son accesibles en la web. Basado en los estándares WCAG 2.0 Nivel AA.

Más herramientas de esquemas de color

Google Icons
Selector de iconos de Google. Genera un enlace a los estilos de icono de la API de Google.
También permite la descarga de los iconos en png y svg.

El set básico está ampliado con contribuciones de los usuarios en: Material Design Icons

Simple icons

1945 iconos SVG gratuitos de marcas conocidas.

Tabler icons

1280 iconos SVG gratuitos completamente personalizables (licencia MIT).

Iconify
Framework unificado de iconos. Permite usar iconos de distintas fuentes (incluidos los iconos de Material y Bootstrap) desde una misma aplicación.
Permite añadir los iconos en código html, css, svg, react y descargarlos en svg.
Transforma los iconos directamente a svg al cargar la página a través de javascript, lo cual evita que se vea mal si el cliente tiene las fuentes personalizadas desactivadas y ayuda a los lectores de pantalla.

SVGBox
Permite añadir iconos SVG a través de etiquetas <img> a las páginas web utilizando por debajo una API en javascript.
Cuenta con varios conjuntos de iconos diferentes.

Vivid.JS

Pequeña biblioteca de iconos SVG personalizables.

Captain Icons

Colección de iconos vectoriales gratuitos con licencia Creative Commons Compartir Igual.

Simple icons

Colección gratuita con 1945 iconos SVG de marcas conocidas.

Más herramientas de iconos

Generadores de fuentes de iconos

Fontello

Permite crear fuentes SVG además de otros formatos a partir de otras fuentes o iconos personalizados. Es una aplicación de código abierto.

IcoMoon

Permite crear SVG Sprites además de fuentes de iconos en distintos formatos a partir de otras fuentes o iconos personalizados. El plan gratuito tiene limitaciones.

Flaticon Iconfonts

Permite crear SVG Sprites además de otros formatos a partir de otras fuentes o iconos personalizados. Tiene un límite de tres colecciones gratuitas de 256 iconos cada una. Requiere registro.

SVG Sprit Generator

Generador de SVG Sprites con el sencillo método de arrastrar imágenes SVG a la ventana.

OJO: La mayoría de los navegadores (inluidos Chrome y Firefox) NO ofrece soporte para fuentes SVG. En cambio, los SVG Sprites si pueden utilizarse en la mayoría de los navegadores a través de los SVG fragment identifiers (Soporte).

Práctica: sprites SVG

Artículo: Los mejores 49 sitios para encontrar hermosos y útiles iconos gratis

Balsamiq Wireframes
Herramienta para la creación de prototipos o maquetas. Es similar en cuanto a funcionalidad a los editores de imagen, permite arrastrar, soltar, guardar mockups en un archivo, copiar y pegar, deshacer, etc.
Incluye una amplia variedad de objetos prediseñados listos para usar y personalizables (hasta cierto punto), como: barras de estado, menús, barras de progreso, etc.
Además, permite exportar el diseño que realizes en png, pdf e incluso al portapapeles.

Práctica de Balsamiq

Axure
Herramienta para la creación de prototipos o maquetas. Es similar en cuanto a funcionalidad a los editores de imagen, permite arrastrar, soltar, copiar y pegar, deshacer, etc.
Incluye una amplia variedad de objetos prediseñados listos para usar y personalizables, como: barras de estado, menús, barras de progreso, etc. Añade un mayor dinamismo y grado de personalización que Balsamiq.
Los prototipos se visualizan directamente en el navegador o dispositivo, dando una idea bastante exacta de cómo quedaría el diseño.
Además, permite exportar el diseño que realizes en png u originar el código del proyecto a partir del prototipo.

Práctica de Axure

Unicode Character Table

Tabla con los códigos unicode extendidos, incluye el código html y css.

Lorem Ipsum

El lorem ipsum, o lipsum, es un texto simulado que se usa para diseñar impresos, gráficos o páginas web. El pasaje se atribuye a un tipógrafo desconocido en el siglo XV se cree que mezcló partes del De Finibus Bonorum et Malorum de Cicerón para su uso en un libro de muestras tipográficas. Por lo general comienza con:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
El propósito de lorem ipsum es crear un bloque de texto de aspecto natural (oración, párrafo, página, etc.) que no distraiga del diseño.

Generadores Lorem Ipsum

SVG Backgrounds

Herramienta de creación de fondos SVG.

Recursos

Subtle Patterns

Patrones png para fondos.

Hero Patterns

Coleción de patrones svg para fondos.

WorldVectorLogo

Vectores de logotipos de infinidad de marcas. Totalmente gratuito e ilimitado.

Awesome Stock Resources

Completo listado de recursos para web.

Design

Inspiración, tutoriales, herramientas, podcast, etc. de diseño web.

<cdnjs>

CDN (Content Delivery Network) gratuito y de código abierto construido para facilitar la vida de los desarrolladores que sirve a más del 11% de todos los sitios web, impulsado por Cloudflare.