HERRAMIENTAS
COLORES:
- MATERIAL DESIGN - El sistema de color
- MATERIAL DESIGN - Aplicar color a la interfaz de usuario
- picture_as_pdf
- CREATIVOLANDIA - Cómo elegir los colores para mi Web
- AULA CM - Herramientas para elegir gamas de colores en diseño gráfico y Web
- JOOMLA! - Uso de los colores en el diseño Web
- COLOR WHEEL PRO - ¡Vea la teoría del color en acción!
- COLOR LOVERS - Crea una paleta
- COLOUR LOVERS - COPASO: Software de paleta de colores
- MATERIAL DESIGN - Herramienta de color
- PALETTON - Diseñador de esquemas de color
- APLICACIÓN COLORPIX - Enlace de descarga
- ADOBE COLOR - Rueda cromática
- WHAT'S COLOR
FUENTES:
- GOOGLE FONTS - Fuentes de alta calidad para usar en su sitio Web
- GOOGLE FONTS - Empiece a utilizar la API de Google Fonts
- GOOGLE FONTS - Catálogo de fuentes
- TYPECAST/MONOTYPE - Fuentes en todos los lugares donde las necesite
- CLAUDIA CARDONA - Las mejores tipografías para tu Web
- DAFONT - Catálogo de fuentes
ICONOS:
- MATERIAL DESIGN - Iconos
- W3SCHOOLS - Iconos
- link link link
- MATERIAL DESIGN - Guía de iconos de Material: Fuente de iconos para la Web
GUÍAS DE ESTILOS
Una vez que se conoce los colores, las fuentes, y los iconos que vamos a utilizar ya estamos en disposición de hacer una selección de los más adecuados y desarrollar nuestra interface, ya sea desde cero o con un gestor de contenidos.
La guía de estilo es el documento que indica las fuentes, los tamaños de texto (para párrafos, títulos de varios niveles...) y sobre todo los colores principales y secundarios que aplicaremos a lo largo del sitio Web o la aplicación.
- STARBUCKS (Cadena estadounidense de café) - Biblioteca de patrones
- UNIVERSITY OF OXFORD (UK) - Guía de estilo digital: bloques de construcción
- JUNTA DE CASTILLA Y LEÓN - Guía de estilos y componentes
- IES GALILEO - Presentación de la Guía de estilo Web de la Junta de CyL
DISEÑO:
- COMUNIDAD FREELANCER - Guías, tutoriales y recursos para autónomos
- GOOGLE DESIGN - Recursos esenciales de diseño para sus proyectos
- MATERIAL DESIGN - Diseño
- MATERIAL DESIGN - Directrices
- IBM DESIGN LANGUAGE - Un vocabulario compartido para el diseño
- IBM DESIGN LANGUAGE - Diseño
- IBM DESIGN LANGUAGE - Tipografía
- IBM DESIGN LANGUAGE - Iconografía
- GOOGLE CAREERS - JOBS: Encuentre su próximo trabajo en Google
PROTOTIPOS:
Algo muy habitual en los equipos de desarrollo Web es dibujar maquetas de las pantallas de las aplicaciones y sus elementos, de forma que podamos transmitir mejor la idea de lo que queremos a los programadores que lo van a implementar. Esto es válido también para los clientes, que a veces no se hacen una idea de lo que les estamos contando si no lo ven dibujado.
Este tipo de croquis o prototipos pintados a mano de las Webs (llamados generalmente wireframes) son muy útiles, pero hacerlos realmente a mano es problemático porque no suelen quedar muy bien y luego muchas veces ni siquiera se hacen. Una herramienta especializada viene de maravilla para hacerlo mejor, más rápido y que quede de manera presentable.
WIREFRAMES
BALSAMIQ
MAQUETACIÓN WEB. LENGUAJE DE MARCAS. HTML5
- picture_as_pdf link
- W3SCHOOLS - Técnicas de diseño HTML
-
Un elemento semántico describe claramente su significado tanto para el navegador como para el desarrollador.
Ejemplos de elementos no semánticos: div y span - No dice nada sobre su contenido.
Ejemplos de semánticas elementos: form, table y article - define claramente su contenido.
- W3SCHOOLS - Elementos semánticos HTML
- MOZILLA - Lista de Elementos HTML5
Entender CORS (Lectura opcional)
Para que una página web pueda hacer llamadas HTTP a una ruta situada en un dominio diferente al que se usó para descargarla debe pedir autorización primero al servidor del segundo dominio.
MAPAS DE NAVEGACIÓN
Los sitemaps son archivos en los que se proporciona información sobre las páginas, los vídeos y otros archivos de un sitio web, así como sobre las relaciones que hay entre ellos. Los buscadores, como Google, leen estos archivos para rastrear los sitios web de forma más eficaz. Los sitemaps informan a Google de qué archivos de un sitio web son importantes según el webmaster y, además, incluyen datos importantes sobre ellos; por ejemplo, en el caso de las páginas, pueden indicar cuándo se actualizaron por última vez, cada cuánto se modifican y si tienen versiones en otros idiomas.