Diseño Web y sus medidas
Hola, buenas tardes, vine buscando ayuda...
Resulta que en la universidad nos van enseñar un poco de Diseño Web... apenas estamos adentrándonos en el tema, yo hace unos años lleve un poco de diseño web pero muy básico, tiene que ir con retículas (Diseño Editorial) y los elementos de una pagina web como el encabezado,menú,contenido,barras laterales etc.
Lo que no entiendo muy bien... son las medidas... nosotros vamos a trabajar en una medida de 1200x800px y obviamente de tarea tenemos que llevar una propuesta (un boceto retículado) pero el profesor me pide que ponga medidas y pues no se como ponerlas... osea cuando espacio aprox. de px tengo que poner entre sección y sección, cuanto es lo ideal de un encabezado, etc... espero me haya explicado y espero puedan ayudarme :)
andresare
Eso a ojo; quiero decir, a medida que crees tu composición verás el espacio necesario. No hay unas normas tales como "entre sección y sección debe de haber 5 píxeles y si hay más está mal". En cualquier caso, es un problema con fácil solución: ve a una web que te guste y empieza a medir.
Entiendo que el profesor quiere las medidas para ver si todo encaja y cumple su función.
smalonso Mod
A ojo ¡nunca! 😨 Hay decenas de recursos para construir retículas, mantener el ritmo visual, espacios entre elementos, equilibrios de peso y fuerzas visuales, etc. Muchas veces hay que usar la calculadora y ponerse a hacer operaciones básicas para ver que todo cuadre numéricamente y al píxel, tanto en pantalla como a la vista.
Uno de los recursos que creo que te puedo ir bien ahora es basarte en la regla de los 8 puntos, 8-point grid system.
Si te pones a analizar, todas las medidas estándar són múltiplos de 8: 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, [...], 800, [...], 1200 [...]. Resumiendo mucho, esta regla consiste en aplicar medidas múltiples de 8 a las distancias y anchos de la retícula vertical & horizontal, tamaños y distancias entre objetos y textos, y medidas e interlineado de textos.
Aplicando este método verás que todo tendrá más harmonía y estabilidad visual, y te ganarás al profesor seguro 😉
andresare
Sabía que iba a pasar esto. Con a ojo, como he dicho en ese mismo mensaje, me refiero en que a medida que vaya construyendo el diseño irá viendo el espacio que necesita. No definiendo desde el principio que los márgenes deban medir 5 píxeles, por ejemplo, sí o sí. Evidentemente luego debe de haber una proporción armónica, pero eso es independiente de si la cabecera debe de medir 48 o 64 píxeles. La de Domestiska, por ejemplo, es visiblemente más grande que la de Twitter.
ely_torres
Mil gracias por tomarse el tiempo de responder, tendré en cuenta todo lo que me han comentado
rafael_o Mod
Retomo este tema aunque ya tenga unos meses.
El concepto de medidas totales en pixeles, ya es un poco viejo ya que los dispositivos van cambiando de resolución. Antes, era más fácil porque las medidas eran más uniformes. Ahora lo que se tiene que hacer es pensar en términos de brakepoints.
Ahora podemos considerar que un FullHD es una "estándard" pero no dominante. Y mucho menos en móviles.
1200x800px no es ninguna medida estándard. Es más, definir un alto para la página no tiene mucho sentido, ya que el contenido se puede alargar a medida que agregas contenido.
Pero 1200 sí puede ser un brakepoint, como retúcula interna.
Pongo como ejemplo la portada de domestika (cuya ilustración de Germán González me encantó)
En la primer imagen puedes ver el fullHD suponiendo que esté el navegador en pantalla completa. Pero en la segunda puedes ver la página completa al hacer scroll. En la tercera la ventana NO mide el tamaño de la pantalla, y los brakepoints han cambiado.
cara_m
Te recomiendo este artículo donde solucionan temas de tamaños responsive de webs https://www.jluislopez.es/diseno-web-responsive/