El diseño es una bestia compleja, el diseño web lo es doblemente. Hay mucho más que la armonía visual y el equilibrio que se deben tener en cuenta, a menudo es necesario investigar y realizar algunas matemáticas de la vida real (¡jadeo!).
Por extraño que parezca, me encanta pensar en estas cosas, tanto que realmente construyo mis propias calculadoras en lugar de usar las herramientas disponibles de otros desarrolladores. Hoy te mostraré cómo y por qué construir tus propias calculadoras de diseño para que puedas dominar los números detrás de tus diseños.
Conoce Instacalc
He mencionado Instacalc una o dos veces antes en Design Shack. No es una herramienta de diseño en absoluto, sino un campo de juego matemático nerd. Entonces, ¿por qué en el mundo me gusta tanto?
Instacalc es el producto perfecto que se encuentra en algún lugar entre una calculadora normal y una hoja de cálculo. Es mucho más poderoso que una calculadora y no es tan complejo como una hoja de cálculo.
Cómo funciona
Cuando cargues Instacalc, verás una serie de campos. Aquí es donde insertas tus cálculos. Simplemente escriba un problema para ver instantáneamente la solución a la derecha.
Estos campos pueden manejar mucho más que simples fórmulas, siéntase libre de ser tan complejo como lo necesite, Instacalc manejará cualquier cosa que le lance con facilidad.
El poder real en Instacalc, sin embargo, radica en su capacidad para hacer referencia a otras filas para construir sobre cálculos anteriores. Por ejemplo, aquí hacemos un cálculo en R1, luego usamos la solución de ese cálculo para lograr algo aún más complejo en R2.
Además de hacer referencia directamente a otras filas, puede configurar variables dentro de cada fila y luego hacer referencia a ellas en el resto de sus cálculos. Aquí hay un ejemplo:
Instacalc también maneja el texto bastante bien. Si simplemente lanza el texto después de un número, se ignorará y no interferirá en el cálculo. Si precede algo con? //, este texto se transferirá al resultado final y se colocará después de la solución como un comentario.
Finalmente, puede titular, guardar y compartir cualquier calculadora que cree. Esto hace de Instacalc una poderosa herramienta para crear calculadoras personalizadas reutilizables a las que usted y otros pueden hacer referencia una y otra vez.
¿A quien le importa?
"Cuando construyes y reutilizas tu propia calculadora, te ves obligado a comprender los conceptos que funcionan en los cálculos".Así que ahí lo tienen, una herramienta de calculadora de fantasía. Así que, por que deberías preocuparte? La razón es que puede aprovechar Instacalc para construir y guardar sus propias calculadoras de diseño. Por ejemplo, digamos que quieres convertir píxeles a ems, ¿cómo lo harías? ¡Apenas golpee su calculadora!
Sé lo que estás pensando. Ya hay una tonelada de calculadoras de diseño pre-construidas, perfectamente funcionales en la web. ¿Por qué pasar por la molestia de hacer el tuyo? Soy un gran defensor del uso de cualquier herramienta que lo ayude a ahorrar tiempo, pero también me interesa entender los procesos detrás de esas herramientas.
Cuando usa alguna calculadora aleatoria de px para em, puede obtener la respuesta que está buscando, pero no obtiene ningún conocimiento o experiencia en el proceso. Sin embargo, cuando construyes y reutilizas tu propia calculadora, te ves obligado a comprender los conceptos que funcionan en los cálculos. No tiene que hacer las matemáticas en su cabeza, pero sí tiene que saber de dónde provienen las matemáticas, y eso es un poco de conocimiento valioso.
Calculadora básica de px a em
Basta de configuración, vamos a profundizar y construir algunas calculadoras. El primero que vamos a intentar es nuestro ejemplo de arriba, su ejecución básica de los píxeles del molino para convertirlos. Este es un cálculo realmente simple y para entender qué? está en un nivel fundamental, realmente deberías calcular las matemáticas.
Para comenzar, debe tener un tamaño de fuente base para su documento HTML, digamos 16px. Ingresamos esta variable en nuestro cálculo así:
Tenga en cuenta que este es un valor personalizable. Si desea que el tamaño de la base sea 14px, simplemente reemplace? 16? con? 14 ?. A continuación, necesitamos el valor en píxeles que queremos convertir a ems. Una vez más, configuramos una variable personalizable.
Aquí está la parte educativa. Para terminar la calculadora, debes saber cómo funciona la conversión. Resulta que, para convertir px en em, simplemente toma el valor de píxel que desea convertir y lo divide por el tamaño de fuente base. Para realizar este cálculo, insertamos las variables que creamos en los dos pasos anteriores.
Como puede ver, utilizando una base de 16px, 24px se convierte a 1.5em. Si cambiamos el valor de px a 8px, se convierte a 0.5em.
Pruébalo
¡Eso es! Ahora tenemos una buena calculadora de px para em. Todo lo que tienes que hacer es reemplazar el tamaño base y / o el valor para convertir, y la calculadora escupirá una solución. Puede probar nuestra calculadora utilizando el widget integrado a continuación (haga clic aquí si el widget no se carga).
em a px calculadora
Ahora que ya sabemos cómo funciona todo esto, hagamos girar el cálculo y lo convirtamos de em a px. Al igual que antes, necesitamos crear un tamaño base y un valor para convertir.
Esta vez, sin embargo, multiplicamos el valor para convertir por el tamaño base para llegar a la conversión de píxeles. Entonces, con un valor base de 14px, 2em es igual a 28px.
Pruébalo
Ahora nuestra calculadora es realmente inteligente! Convierte px y em en ambas direcciones. Compruébelo utilizando el widget integrado a continuación (vaya aquí si el widget no se carga).
% a em Calculadora
A veces, los desarrolladores realmente declaran el tamaño de fuente base como un porcentaje. Por ejemplo, 62.5% es un tamaño de fuente base común porque hace que ems sea fácil de convertir mentalmente a px en su cabeza (1.2 em = 12px, 1.4em = 14px, etc.). ¿Por qué funciona esto? ¡Si resolvemos las matemáticas, podemos averiguarlo!
Como puede ver, para convertir em a px con un tamaño de base expresado como un porcentaje, primero multiplicamos el tamaño de base expresado por el valor de píxel inicial del tamaño completo del navegador (100% o 16 px). Luego, multiplicamos el resultado de ese cálculo por el valor de em que queremos convertir a px. Juega con esta calculadora a continuación o ve aquí para verla en Instacalc.
Proporción de oro Altura de línea
Como ejemplo real de la creación de mi propia calculadora relacionada con el diseño, consulte el siguiente ejemplo. Después de leer la guía de Pearsonified para la tipografía de la proporción de oro, quise envolver mi cabeza en torno a las complejas fórmulas que él estaba lanzando, así que construí esta calculadora.
Básicamente, lo que hace es aprovechar el concepto de la proporción áurea para llegar a la altura de línea ideal para una porción de texto cuando se le dan dos entradas: tamaño de fuente y ancho de línea.
Si simplemente me hubiera detenido después de leer el artículo de Pearsonified, nunca hubiera entendido realmente los principios matemáticos que él estaba exponiendo. No fue hasta que cavé profundo y jugué con los números que todo hizo clic.
Calculadora de cuadrícula
Otro lugar en el que usamos con frecuencia los cálculos en el diseño web es cuando diseñamos una cuadrícula. Las calculadoras de cuadrícula son una moneda de diez centavos por docena, pero cuando realmente entiendes las matemáticas detrás de ellas, puedes rodar tus propios marcos de cuadrícula que están perfectamente diseñados para tu situación única. Aquí hay una calculadora de cuadrícula de muestra que construí para comenzar.
¿Qué vas a construir?
Ahora debe saber todo sobre Instacalc y cómo puede ayudarlo a comprender mejor los cálculos más complejos relacionados con el diseño. Ahora es el momento de saltar y construir algunas de sus propias calculadoras. ¡Deja un comentario abajo y muéstrame lo que se te ocurre!