Ojo de Diseñador para Desarrolladores
-
Upload
nicolas-borda -
Category
Travel
-
view
507 -
download
1
Transcript of Ojo de Diseñador para Desarrolladores
Ojo de diseñador para desarrolladores
Text
Acerca de esta presentación
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.nettwitter.com/ipwa
drupal.org/user/130909
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
Cuadrículas
Unidad (de medida)
Pixeles/Ems
Pixeles/Ems
3
2
• 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)
Unidades
Columnas
Canal
• Columnas: El agrupamiento de unidades que le dan estructura a una página, no son necesariamente uniformes.
• Canal: El espacio entre las unidades.
Lineas colgantes
• Lineas colgantes: Son creadas con el alineación horizontal de unidades.
Módulos ocampos
• Módulos: Combinación de unidades y columnas. El ancho y alto es variable.
Esquema
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.
Proporción Divina
• Se ha encontrado expresado por toda la naturaleza.
• Esteticamente placentero.
• Muchos artistas como Leonardo Da Vinci lo usaban para sus obras.
La Regla de Tres
• Divide tu espacio de trabajo en tres
La Regla de Tres
• Posiciona los elementos más importantes de tu composición donde las líneas se intersecten
Tipos de esquemas web
Tipos de esquemas web
Tipografía
• 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
Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certainit’s not just imagining that light in the eastern sky. Unfortunately theeastern sky is off to port this morning. Yesterday it was starboard.Minerva has been sailing up and down the New England coast for thebetter part of a fortnight, trying to catch a wind that will decisively takeher out into deep water, or “off soundings,” as they say. They are probablynot more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot sothat he can look straight down and see Minerva’s wake being born in afoamy collision around the rudder. He opens a small hatch below awindow and drops out a Fahrenheit thermometer on a string. It is the verylatest in temperature measurement from Europe – Enoch presented it tohim as a sort of party favour. He lets it bounce through the surf for a fewminutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objectivebeing to see if there’s any rumour that the North Atlantic is striped withcurrents of warm water. He can present the data to the Royal Society ifGod-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.
† The forecastledeck is theshort deck that, towardsthe ship’s bow, is builtabove the upperdeck.
Ritmo VerticalAboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
Ritmo VerticalAboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
Ritmo VerticalAboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
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
Ritmo VerticalAboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
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
Ritmo VerticalAboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
.sidenote{font-size: 0.8333em; /* 10px */ line-height: 1.8em; /* 18px */ }
font size: 10px ÷ 12px = 0.8333em
line height:18px ÷ 10px = 1.8em
Ritmo VerticalAboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
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
Ritmo VerticalAboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
Teoría de color
• Lleno de mis-concepciones y floro
Ritmo VerticalAboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
Ritmo VerticalAboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
Ritmo VerticalAboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.