¿Hay alguna heurística de relleno de CSS que pueda seguir?

Question

tengo un problema simple:

• tengo una imagen dentro de un div.
• Para hacer que la página sea más estéticamente agradable, voy a agregar un relleno adicional a la imagen.

En lugar de globo ocular, me gustaría saber:

¿Hay alguna heurística de relleno CSS que puedo seguir?

Estaba pensando que alguien del calibre de Jakob Nielsen podría haber establecido algunas buenas prácticas sobre el diseño de página y el relleno (es decir, el relleno de píxeles mínimo o la proporcionalidad).

• No estoy afirmando que este es un problema especialmente difícil de resolver.
• Pero es un problema que probablemente volverá a surgir.
• Y me gustaría algunas heurísticas para guiar mis opciones de relleno en el futuro.

Cualquier ayuda sería apreciada.

Answer 1

En realidad son algunas fórmulas estándar para este tipo de cosas.

1. La ley de los tercios. En caso de duda, divídalo en tres partes. Divida por tres hasta llegar a algo razonable.
2. Proporción áurea: esto es un poco más difícil, y realmente necesita un programa como Golden Section para llevarlo a cabo correctamente, pero la idea básica es que su relleno debe ser un múltiplo de la proporción áurea. La proporción áurea es ((a+b)/a) = (a/b)) o alrededor de 1.618.
3. La relación A4. No sé cómo se llama esta, pero es 1,414, la proporción de una hoja de papel A4.
4. Casi cualquier proporción hará que su grilla se vea equilibrada si se mantiene.

Si su imagen tiene 100 píxeles de ancho, se divide por la proporción áurea hasta que obtiene algo que no es CAMINO demasiado grande.

Por lo tanto, los números de proporción áurea para 100 píxeles son 62, 38, 24, 15, 9, 6, 4, 3, 2, 1. En ems puede usar anchos fraccionarios, por lo que termina con 14.5, 9, 5.6 etc.

em unidades son una función del ancho de su "m" en la fuente, por lo que en CSS pueden cambiar a lo largo de la página.

La "medida" es el ancho de la línea de texto. Desea que su medida sea de menos de 2 a 2.5 alfabetos. (Se mide un alfabeto escribiendo el abcdefg ... dos veces.)

El Colin Wheildon folleto/libro comunicación o simplemente hacer Bastante Formas tiene excelentes consejos para el tendido de la tipografía y las imágenes. Está ampliamente orientado hacia la impresión, pero la mayoría de los mismos principios aún se aplican.

Answer 2

has pensado en utilizar un marco css como:

• BluePrintCSS
• YAML
• YUI Grids CSS
• 960 CSS cuadrícula Sistema
• y así sucesivamente (ver este bonito article)

mi favorito es definitivamente blueprint, no está demasiado hinchado como YAML o YUI y le da un comienzo perfecto para un nuevo proyecto. por lo que sé, agrega un relleno de 1.5em a cajas y cosas por el estilo. además es fácil de adaptar. echa un vistazo :)

Answer 3

Es difícil darle una respuesta general porque el aspecto general de la página influye en esta elección. ¿Cuánta densidad de texto? ¿Cuánto espacio en blanco? ¿Cuántas columnas? ¿Cuántas imágenes hay en una página? etc.

Creo que debe experimentar usted mismo y rápidamente encontrará su propio tamaño o rango de relleno que puede comenzar y retocar por proyecto.

Solo eche un vistazo al sitio web de Jakob Nielsen. No me importa cuál es su calibre, no desea obtener orientación estética de él. Por supuesto, muchos de sus consejos de usabilidad son valiosos, pero tómenlo todo con un grano de sal.