Los cuadros de InDesign son tan simples como hacer clic y arrastrar. Las capas de Photoshop permiten a los pintores colorear píxeles en cualquier lugar que quieran. Pero el diseño con HTML y CSS es un juego de empuje y cascada.

Ocurre todos los días: los directores de arte expertos en Photoshop se burlan de los diseños, puliendo su espacio, eligiendo cuidadosamente los tipos de letra y los colores adecuados. Entregan su trabajo a un entusiasta desarrollador de HTML, quien anuncia que el diseño probablemente demorará días en convertirse en HTML / CSS funcional. Peor aún, harán cambios para tener en cuenta los diferentes tamaños de pantalla. El tiempo es un misterio para ambas partes. ¿Le tomará al desarrollador una hora o una semana convertir su PSD en HTML / CSS funcional?

Los fundamentos del diseño web: lo posible, lo práctico, las posibilidades, son fáciles de comprender. Al igual que el diseño en sí, la comprensión de los principios ayudará a cualquier diseñador a producir mejores diseños y agilizar el proceso de construcción de un sitio.

Bloque de elementos, flujo de elementos en línea

Todo en una página web, desde párrafos hasta imágenes hasta enlaces a texto en negrita, reside en recuadros invisibles. Estas cajas vienen en dos variedades: bloque y en línea. La diferencia entre inline y block radica en su comportamiento.

• Los elementos de bloque son rectángulos. Les encanta llenar el espacio horizontal.
• Los elementos en línea son rectangulares, excepto que pueden envolverse.

Los elementos del bloque se amontonan uno encima del otro. A menos que se indique lo contrario, ocupan tanto espacio horizontal como sea posible, empujando hacia arriba o hacia abajo todo lo que los rodea. Para el diseño, los elementos de bloque son la herramienta de diseño principal.

Los elementos en línea se basan en el formato de texto. No rompen el flujo de texto, y sus dimensiones se expanden para ajustarse a sus contenidos. Decirle a un elemento en línea que mantenga un ancho de 200 píxeles no funcionará. Llenarlo con texto lo hará.

Por defecto, cada elemento en el es un elemento en línea o bloque. Los diseñadores pueden cambiar su naturaleza con un poco de CSS, por ejemplo, convirtiendo una pila de elementos de lista (bloques nativos) en una fila, o una serie de enlaces horizontales (de forma nativa en línea) en una pila vertical. Eso significa que cualquier elemento visible se puede usar para el diseño. Si deberían depende del diseño en cuestión.

Los elementos de bloque nativos incluyen:

• Divisiones
• Párrafos

• Liza
  • Artículos en una lista
  • Encabezados

    -

  • Mesas
    Cotizaciones en bloque

    Organizadores en HTML5

    , ,
    El cuerpo mismo

    Los elementos en línea incluyen:

    • Anclajes (hipervínculos)
    • Negrita y
    • Itálico y
    • Imágenes
    • Citaciones
    • Tipo de estilo
    • Etiquetas de formulario
    • Depende de usted

    Etiquetas comunes que no son ni en bloque ni en línea:

    • El título del documento