La pregunta puede tener una respuesta bastante amplia que necesita días y días de estudio, pero intentaré algo corto.
Tiene que diseñar su diseño siguiendo una cuadrícula invisible, como en papel, en la web, que lo ayudará a mantener todo en la alineación y el orden correctos. Las dificultades son que en la web, los tamaños y las proporciones son variables, y el contenido es dinámico en muchos aspectos (preferencias de configuración, calibración del monitor, iluminación, tamaño del monitor, navegador, sistema operativo, etc.).
Por esta razón, no consideremos la proporción entre las cosas, sino concentrémonos en una configuración clásica. Un diseño clásico es el encabezado en la parte superior, el pie de página en la parte inferior y 3 columnas en el centro (con la izquierda y la derecha más pequeñas que un centro). Ese podría ser el sitio web en dos columnas o más columnas, todo depende de la cantidad de información que tenga y de cuánto desee mostrar o cuánto "aire" (también conocido como espacio en blanco) desee poner entre la información que tiene .
Nota: Tenga en cuenta que hay algunas limitaciones técnicas de CSS, como la alineación de columnas (que están en la misma fila horizontal) en la misma altura cuando tienen contenido diferente que llena la columna. La gente está tratando de solucionarlo con una solución creativa hasta que el navegador actualice su representación CSS en el estándar más nuevo
Hay 4 diseños posibles:
1) Diseño fijo: define cada div en px que se ajusta dentro de un tamaño específico que será visible dentro de un navegador (por ejemplo, dentro: 800x600)
pro: el diseño es estable con: podría tener mucho espacio en blanco dependiendo de la pantalla del usuario
De esta solución, puede decidir a la izquierda (sabiendo que habrá un gran espacio a su derecha y podría jugar con un fondo gráfico), o alinear el centro (dividiendo el espacio en blanco a la izquierda y a la derecha, reduciendo su cantidad que la alineación a la izquierda).
2) Diseño fluido: la página se adaptará al tamaño de la pantalla, moviendo y adaptando contenido
pro: siempre llenará la página sin dejar espacios en blanco descontrolados con: perderá el control sobre las proporciones y la cuadrícula donde coloca su contenido (ejemplo: un párrafo en más líneas que se convierten en una oración de una sola línea larga en resoluciones de pantalla más altas)
Técnica Ejemplo u otro más complejo
3) Diseño original: se basan en romper las reglas de diseños y cuadrículas. No utilizan el diseño de columna clásico y se basan principalmente en efectos de diseño gráfico, como mostrar información en todo el sitio web, y están utilizando un posicionamiento más absoluto que cualquier otra solución. Bueno para la diversión artística en la web o cartera loca y nada más (no estoy en contra, pero requieren conocimiento de las reglas de comunicación de diseño web, técnica y buen esfuerzo creativo).
No encuentro un ejemplo en este momento, lo siento.
pro: gran estética y contra original: no puede usar esto para sitios web comerciales, ni para blogs ni para nada con una gran cantidad de información.
4) Diseño dinámico fijo: es lo que uso hoy en día para mis sitios web personales y para los sitios web de los clientes que tienen tiempo para gastar en hacer un sitio web flexible pero bajo control. No es más que un diseño fijo, pero con un javascript que verifica constantemente el tamaño de su pantalla (en caso de cambiar el tamaño o para determinar qué tamaño es) y pasar el CSS apropiado para ese tamaño. Así que no importa cuál sea el tamaño de su pantalla, siempre tendrá un buen control. Por ejemplo, si tengo un diseño de 3 columnas, si cambio el tamaño del navegador, puedo decidir que la tercera columna desaparecerá y pasará al final del contenido, antes del pie de página.
pro: Control completo + flexibilidad con: Mucho esfuerzo en diseñar y depurar el tiempo necesario para verificar que todo esté bien, pensando incluso en el futuro porque agregará contenido nuevo más adelante en el futuro y todo tiene que funcionar bien.
Artículo donde me
inspiré (hoy en día jquery hace un gran trabajo con resize (), hace 3 años tenía un guión largo y largo para eso :))
Una última nota
Hoy en día hay una nueva tendencia en los diseñadores web gráficos (personas que son más diseñadores gráficos que programadores), que usando un diseño fijo están diseñando cada página de su blog como lo hacen las revistas con sus artículos. Creativo y diseñando cada artículo con su propio estilo.
Un exponente es Jason Santa Maria
Otros articulos:
Hay más artículos por ahí. Busque "diseños CSS". O siga lugares donde se habla de usabilidad y diseño como Signal Vs Noise
Todo lo que hay que saber sobre composición es experiencia y estudio, o pruebas de usabilidad (prueba y error). Ponga a alguien al frente de su sitio web y vea cómo reaccionan ante su diseño. O un dispositivo de seguimiento ocular :)
Soy autodidacta, así que no puedo sugerir sobre libros sobre composición, pero un buen libro sobre diseño de cuadrícula puede ayudarlo mucho.
Si desea un buen sistema para diseñar diseños web, eche un vistazo al sistema de cuadrícula 960 . Es lo que uso para la mayoría de mis diseños. Creo que también hay una buena selección de plantillas para usar en diferentes paquetes, como Photoshop e InDesign, así como algunas imprimibles para todas sus necesidades de diseño de sitios web.
También se puede ver un buen ejemplo de diferentes diseños aquí: http://designshack.co.uk/articles/layouts/10-rock-solid-website-layout-examples
fuente