Diseño de Interfaces Web

 Sitemap

1 Planificación de interfaces. Documentación

Aplicación del color a la interfaz de usuario
Documentación de Material Design sobre cómo usar el color en la UI de una aplicación web.
Original: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
15 herramientas para elegir Gamas de Colores en Diseño Gráfico y Web
Explicación sobre la psicología de los colores y herramientas para elegir gamas de colores para web.
Cómo elegir los colores para tu web
Explicación sobre la psicología de los colores, orientaciones sobre cómo usarlos y herramientas para elegir gamas de colores para web.
Uso de los colores en el Diseño Web
Explicación sobre la psicología de los colores y teorías de color.

Infografías

Color Theory
Teoría del color para diseño web
Commandaments of Color Theory
10 mandamientos de la teoría de color
Brand colors
Colores y marca
Recomendaciones para escoger una tipografia
12 consejos a la hora de escoger una tipografía.
Las mejores tipografías para tu web este 2018
Tipografías recomendadas para web.
Las 15 tipografías para web más recomendadas
Tipografías recomendadas para web.
Las 20 mejores fuentes web HTML para usar en 2020
Tipografías recomendadas para web. Fuentes seguras para web.
Las 40 mejores Google Fonts para mejorar el diseño de tu página web
Tipografías recomendadas de Google Fonts.
7 combinaciones de fuentes para molarlo todo
Siete combinaciones de fuentes tanto de pago como gratuitas para acertar seguro.
Más de 50 fuentes modernas para usar en tu sitio web de WordPress en 2021
Las fuentes modernas son afiladas, elegantes, atrevidas, profesionales y con estilo. También suelen ser serif (pero no siempre).
Su diseño es inmediatamente distintivo y se usan a menudo en encabezados y logotipos.

Fuentes seguras para web

Las fuentes seguras para web son aquellas que están preinstaladas en muchos sistemas operativos.

Chuleta de fuentes seguras para web.

Colección de fuentes seguras para web.

Listado, artículos y comparativas de fuentes seguras.

Web Safe Font Stacks

Pilas de fuentes seguras para web por tipos para incluir como alternativa a las fuentes seleccionadas para una web.

Infografías

Periodic Typographic Table
Tabla periódica de tipografías
Typographic websafe mindmap
Escoger una fuente segura
Type guide
Guía de tipografías
Psychology of fonts
Psicología de las tipografías
Serif vs SansSerif fonts
Tipografía Serif vs Sans
Type Classification Personification
Personificación de las fuentes tipográficas
Google Fonts Mixing Guide
Guía para mezclar tipografías de Google Fonts
10 Commandaments of Typography
Los 10 mandamientos de las fuentes tipográficas
Web Designers Favorite Fonts
Las 10 fuentes favoritas de los diseñadores web
The Elements Of Web Typographic
Elementos y estilos de las tipografías web
A quick guide to typography on the web
Guía rápida para tipografías web
8 rules to web responsive typography
8 reglas para tipografías en web adaptativa

Una vez que se conoce los colores, las fuentes, y los iconos a utilizar ya estamos en disposición de hacer una selección de los mas adecuados y desarrollar nuestra interface, ya sea desde cero o con un gestor de contenidos. La guia de estilo es el documento que indica las fuentes, los tamaños de texto (párrafos, títulos de varios niveles...) y sobre todo los colores principales y secundarios que aplicaremos a lo largo del sitio o la aplicación.

Cómo crear un framework de diseño eficaz
Explicación sobre los componentes de una web y su diseño.
Guía de estilo, importancia en el diseño de interfaces
Resumen de lo que es una guía de estilo con ejemplos y herramientas de utilidad.
Guía de estilo editorial de developerWorks (IBM)
Directrices y normas ayudar a los desarrolladores de empresas y a los profesionales de las tecnologías de la información a realizar su trabajo de forma eficaz. developerWorks se basa en un estilo editorial moderno y atractivo que se aplica de forma coherente en todo el contenido.
¿Cómo crear una guía de estilo de diseño de páginas web?
Pasos a seguir.
Motivos para tener una guía de estilo para tu web o aplicación.
Recursos de guías de estilo
Ejemplos, artículos, libros, podcast y herramientas de guías de estilo, bibliotecas de patrones y frameworks.

Ejemplos:

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 presentable.

Wireframes: Qué son y cómo crearlos
Qué son, ventajas y herramientas recomendadas.
Diseño de UI a través de Wireframes
Documentación sobre controles de la interfaz de usuario, patrones y principios de diseño visual y ejemplos.
HTML Living Standard
Especificación oficial y actualizada y de HTML5.
HTML5 Page Structure
Estructura de una página HTML5. Elementos.
HTML Tutorial
Tutorial HTML y CSS de w3schools.
HTML: Lenguaje de etiquetas de hipertexto
Documentación de HTML de Mozilla.
HTML & CSS Is Hard (But it doesn’t have to be)
Completo tutorial de desarrollo web para principiantes.
Tutorial HTML5
Tutorial diseñado para que los principiantes en HTML5 comprendan de los conceptos básicos a los avanzados del tema.
HTML tips
Artículo sobre atributos html útiles y poco conocidos.

Plantillas html5

Plantillas de estructura básica de HTML5.