The document discusses web design and typography. It covers topics like grids, units, columns, white space, typography, vertical rhythm, and color theory. It provides examples and formulas for calculating font sizes, line heights, and margins to establish consistent vertical spacing in web design. The presentation aims to teach designers an "eye for detail" when it comes to front-end development.

1. Ojo de diseñador para
Text
desarrolladores

2. Acerca de esta
presentación

3. Nicolas Borda
• Creo y mantengo temas Drupal que
contribuyo al proyecto
• He creado temas para otros proyectos de
software libre como ProjectPier y
proximamente Open Atrium
• Trabajo con muchas agencias de Drupal
creando temas para sus clientes de
manera freelance
nic.ipwa.net
twitter.com/ipwa
drupal.org/user/130909

4. Inspiración
• Presentación de Steven Wittens en el
OSCMS del 2007: Designer eye for the
geek guy
• Presentación de Mark Boulton en
DrupalCon Paris del 2009: Designing Grid
Systems Does Not Begin and End With 960

12. Cuadrículas

13. Unidad (de medida)

14. Pixeles/Ems
Pixeles/Ems

15. 3
2

16. Unidades
• Las unidades son las
elementos básicos que
definen la cuadrícula.
Son uniformes.
• Las proporciones puden
ser racionales (3:2) o
irracionales (1:1.618 -
divina proporción)

17. Canal
Columnas

18. • Columnas: El agrupamiento de unidades
que le dan estructura a una página, no son
necesariamente uniformes.
• Canal: El espacio entre las unidades.

19. Lineas
colgantes

20. • Lineas colgantes: Son creadas con el
alineación horizontal de unidades.

22. Módulos o
campos

23. • Módulos: Combinación de unidades y
columnas. El ancho y alto es variable.

27. Esquema

28. Proporción Divina
• La longitud de a+b es al
segmento mas largo a,
como a es al segemento
mas corto b.
• Michael Maestlin fue el
primero en públicar una
aproximación.

29. Proporción Divina
• Se ha encontrado
expresado por toda la
naturaleza.
• Esteticamente
placentero.
• Muchos artistas como
Leonardo Da Vinci lo
usaban para sus obras.

31. La Regla de Tres
• Divide tu espacio
de trabajo en tres

32. La Regla de Tres
• Posiciona los
elementos más
importantes de tu
composición
donde las líneas
se intersecten

33. Tipos de esquemas web

34. Tipos de esquemas web

35. Tipografía

36. • El arte y técnica de
alinear letras, diseñar
fuentes, y modificar
glyfos.
• Uno de los primeros
libros publicados fue la
Biblia de Gutenberg

39. Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
† The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

40. Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
† The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

41. Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
† The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

42. Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

43. body {
font-size: 12px; }
p { font-size: 1em; /* 12px */
line-height: 1.5em; /* 18px */
margin: 0 0 1.5em 0; }
line height: 18px ÷ 12px = 1.5em

44. Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.

45. h1 { font-size: 1.5em; /* 18px */
line-height: 1em; /* 18px */
margin: 0 0 1em 0; }
font size: 18px ÷ 12px = 1.5em
line height: 18px ÷ 18px = 1em

46. Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.

47. .sidenote
{ font-size: 0.8333em; /* 10px */
line-height: 1.8em; /* 18px */ }
font size: 10px ÷ 12px = 0.8333em
line height: 18px ÷ 10px = 1.8em

48. Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.

49. h2 font-size: 1.1667em;
{
line-height: 1.286em;
margin-top: 1.929em;
margin-bottom: 0.643em; }
font size: 14px ÷ 12px = 1.1667em
line height: 18px ÷ 14px = 1.286em
top margin: 27px ÷ 14px = 1.929em
bot margin: 9px ÷ 14px = 0.643em

50. Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.

51. Teoría de color

52. • Lleno de mis-concepciones y floro

53. Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
† The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

54. Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.

55. Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.