doc/elementos_diseño_visual.md
# Elementos del diseño visual para páginas web
## Estrategía
Los lenguajes CSS y HTML son los nativos de las páginas web y deben aprenderse, para lo cual recomendamos http://freecodecamp.org.
Sin embargo el diseño visual (o diseño gráfico) de una página web relaciona la identidad institucional del dueño, los objetivos de negocio o de influencia de la página y su público. Como se describe en [GRDES] "es importante para un diseñador gráfico entender las necesidades de su cliente, así como las necesidades de la gente que interacturará con el diseño. El trabajo del diseñador es combinar los objetivos del negocio con objetivos creativos para elevar el diseño más alla de los medios puramente estéticos"
## Maquetación
Se refiere a la organización de los elementos visuales en una página.
Como se explica en [LAYOUT] "a alto nivel, incluye decidir la ubicación de textos e imagenes ... requiere inteligencia, sentimiento y creatividad, y se informa de la cultura, de la psicologia y de lo que los autores del contenido y los editores desean comunicar y enfatizar."
Nos parecen preferibles maquetaciones dinámicas (o adaptables, del inglés _responsive_), pues optimizan esfuerzo y recursos comparando con diseñar maquetaciones estáticas para cada posible dispositivo donde se consultará la página web.
Las decisiones suelen incluir (traducido de [LAYOUT]):
* Tamaño de las margenes
* Tamaño y posición de imagenes y figuras
* Decidir el número y tamaño de las columnas y los canales (del inglés _gutters_ que es el espacio entre columnas)
* Ubicación de espacio en blanco intencional
* Uso de efectos especiales como superponer texto sobre una imagen, alrededores o instrusión, o sangrar una imagen sobre el margen de una página.
Los elementos específicos por ubicar pueden incluir:
* Capítulo o títulos de secciones, o encabezados o subencabezados
* Títulos de imagenes
* Cajas o notas al margen, que presenten información al lado del flujo del texto principal.
* Encabezados y pies de página, cuyo contenido es usualmente uniforme a lo largo de diversas páginas del sitio web.
Flexbox y CSS Grid son ayudas importantes para lograr maquetaciones adaptables, pero para comenzar a maquetar, especialmente cuando no se tiene mucha experiencia, recomendamos emplear Bootstrap (ver <https://getbootstrap.com/>).
O aún más comenzar con una herramienta que genera HTML y CSS con Bootrap como <https://www.layoutit.com/build> e inspirarse en ideas de maquetaciones (y diseños visuales web completos) en galerias como por ejemplo <https://colorlib.com/wp/free-bootstrap-gallery-templates/>
### Espacios en blanco
Espacio entre los elementos de la página.
### Escala
Los elementos deben ser suficientemente grantes con relación a la página (sin grandes huecos). También, los elementos de mayor importancia, como encabezados, deben ser más grandes que los de menos significado.
### Alineación
Proceso que asegura que todo elemento se posiciona correctamente en relación con otros elementos, por ejemplo asegurando que las columnas se alinean a lo largo de la página.
## Tipografía
Es recomendable usar dos tipos de letra, uno serif (o con adornos como el tipo Roman) para títulos y uno sans-serif (sin adornos como el tipo Arial) para el texto. Recomendamos emplear <https://fonts.google.com/> pues consta de tipografías de libre uso, información de cada tipografía y muestra de como se ve una tipografía en combinación con una segunda. Otro sitio de tipografías usables desde el web es <https://fontlibrary.org/>
## Colores y contraste
Es importante elegir una paleta de colores, tipicamente de 5 colores. La paleta puede partir de un color base (por ejemplo tomado del logo de la institución o de un tema del negocio) y después emplear un esquema de colores (ver [ESQCOLOR]) para completar la paleta. Una herramienta en línea que facilita proponer un color base y usar alguno de los esquemas de colores (o regla de armonia de colores) para generar los otros 4 es <https://color.adobe.com/create>
## Iconos
Pueden ayudar a simplificar y a la vez aclarar la interfaz, se recomienda FontAwesome: <https://fontawesome.com/>
## Jerarquía visual
Establece que elementos son más importantes, mediante escala, color, tipografía, posición, contraste o una combinación..
# Referencias
* [GRDES] <https://en.wikipedia.org/wiki/Graphic_design>. Consultado Oct.2019
* [LAYOUT] <https://en.wikipedia.org/wiki/Page_layout>. Consultado Oct.2019
* [ESQCOLOR] <https://es.wikipedia.org/wiki/Esquema_del_color>. Consultado Oct.2019
* https://www.freecodecamp.org/news/learn-ui-design-in-5-minutes-tutorial/