Ojo de diseñador para
          Text
   desarrolladores
Acerca de esta
 presentación
Nicolas Borda

      •   Creo y mantengo temas Drupal que
          contribuyo al proyecto

      •   He creado temas para...
Inspiración

• Presentación de Steven Wittens en el
  OSCMS del 2007: Designer eye for the
  geek guy
• Presentación de Ma...
Cuadrículas
Unidad (de medida)
Pixeles/Ems



Pixeles/Ems
3



2
Unidades

• Las unidades son las
  elementos básicos que
  definen la cuadrícula.
  Son uniformes.
• Las proporciones puden...
Canal
Columnas
• Columnas: El agrupamiento de unidades
  que le dan estructura a una página, no son
  necesariamente uniformes.

• Canal:...
Lineas
colgantes
• Lineas colgantes: Son creadas con el
  alineación horizontal de unidades.
Módulos o
 campos
• 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 Mae...
Proporción Divina
• Se ha encontrado
  expresado por toda la
  naturaleza.
• Esteticamente
  placentero.
• Muchos artistas...
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...
Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is gr...
Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is gr...
Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is gr...
Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is gr...
body	{	
      font-size: 12px; }


p	 {	font-size: 1em;	 	 /* 12px */
 	
	 	 	line-height: 1.5em;	 /* 18px */
	 	 	margin:...
Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is gr...
h1 	 {	font-size: 1.5em;	 	 /* 18px */
	 	 	line-height: 1em;	 /* 18px */
                      	
	 	 	margin: 0 0 1em 0; ...
Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is gr...
.sidenote	 	
          { font-size: 0.8333em;	 	 /* 10px */
	 	 	 	line-height: 1.8em;	 /* 18px */ }
                     ...
Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is gr...
h2	 font-size: 1.1667em;
   {	
	 	line-height: 1.286em;
	 	margin-top: 1.929em;
	 	margin-bottom: 0.643em; }


font size:	...
Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is gr...
Teoría de color
• Lleno de mis-concepciones y floro
Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is gr...
Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is gr...
Ritmo Vertical
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is gr...
Ojo de Diseñador para Desarrolladores
Ojo de Diseñador para Desarrolladores
Ojo de Diseñador para Desarrolladores
Ojo de Diseñador para Desarrolladores
Ojo de Diseñador para Desarrolladores
Ojo de Diseñador para Desarrolladores
Ojo de Diseñador para Desarrolladores
Ojo de Diseñador para Desarrolladores
Ojo de Diseñador para Desarrolladores
Ojo de Diseñador para Desarrolladores
Ojo de Diseñador para Desarrolladores
Ojo de Diseñador para Desarrolladores
Ojo de Diseñador para Desarrolladores
Ojo de Diseñador para Desarrolladores
Upcoming SlideShare
Loading in...5
×

Ojo de Diseñador para Desarrolladores

505

Published on

Published in: Travel, Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
505
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ojo de Diseñador para Desarrolladores

  1. 1. Ojo de diseñador para Text desarrolladores
  2. 2. Acerca de esta presentación
  3. 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. 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
  5. 5. Cuadrículas
  6. 6. Unidad (de medida)
  7. 7. Pixeles/Ems Pixeles/Ems
  8. 8. 3 2
  9. 9. 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)
  10. 10. Canal Columnas
  11. 11. • Columnas: El agrupamiento de unidades que le dan estructura a una página, no son necesariamente uniformes. • Canal: El espacio entre las unidades.
  12. 12. Lineas colgantes
  13. 13. • Lineas colgantes: Son creadas con el alineación horizontal de unidades.
  14. 14. Módulos o campos
  15. 15. • Módulos: Combinación de unidades y columnas. El ancho y alto es variable.
  16. 16. Esquema
  17. 17. 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.
  18. 18. Proporción Divina • Se ha encontrado expresado por toda la naturaleza. • Esteticamente placentero. • Muchos artistas como Leonardo Da Vinci lo usaban para sus obras.
  19. 19. La Regla de Tres • Divide tu espacio de trabajo en tres
  20. 20. La Regla de Tres • Posiciona los elementos más importantes de tu composición donde las líneas se intersecten
  21. 21. Tipos de esquemas web
  22. 22. Tipos de esquemas web
  23. 23. Tipografía
  24. 24. • 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
  25. 25. 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.
  26. 26. 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.
  27. 27. 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.
  28. 28. 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.
  29. 29. 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
  30. 30. 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.
  31. 31. 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
  32. 32. 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.
  33. 33. .sidenote { font-size: 0.8333em; /* 10px */ line-height: 1.8em; /* 18px */ } font size: 10px ÷ 12px = 0.8333em line height: 18px ÷ 10px = 1.8em
  34. 34. 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.
  35. 35. 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
  36. 36. 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.
  37. 37. Teoría de color
  38. 38. • Lleno de mis-concepciones y floro
  39. 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. 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.
  41. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×