¿Existen reglas de composición específicas para el diseño web? [cerrado]

¿Existen reglas de composición específicas para el diseño web, o que tengan una importancia elevada en el contexto del diseño web?

Probablemente hay algunos aspectos de la composición que serían más o menos importantes según el medio, y dado que mi espacio principal son las páginas web, tengo curiosidad por saber si hay ciertas reglas de composición que serían de mayor importancia para el diseño web.

¿A diferencia del diseño de impresión? ¿Podría ser más específico?

Respuestas (2)

NOTA: esta respuesta se agregó en 2011. Mucho ha cambiado desde entonces, pero la mayoría de estas recomendaciones siguen siendo válidas. -Miguel

Puede pensar en el diseño web de la misma manera que piensa en el diseño de carteles (en la mayoría de los casos). Tiene un corto período de tiempo para involucrar a un usuario, entregar el mensaje y engancharlo para que dedique más tiempo a conocer los detalles de su sitio. Esa es la mayor diferencia entre diseñar para la web cualquier otra cosa.

En cuanto a la composición, su lienzo deberá adaptarse a tamaños de pantalla de 320 px de ancho a 2100 px de ancho, lo que puede requerir diseños completamente diferentes según la cantidad de contenido que pueda caber. Estas son algunas reglas generales, pero realmente depende de su audiencia.

También deberá considerar cómo su audiencia está viendo su sitio. Es posible que un sitio renderizado en Internet Explorer no tenga las mismas cualidades que la última versión de Safari o Chrome. Tendrá que decidir cómo su diseño se degradará con gracia para cumplir con estos navegadores más antiguos.

En cuanto a tipos de letra y tamaños, no debe ir por debajo de 9 px en ningún caso, con el cuerpo del texto no por debajo de 12 px, aunque el usuario tiene la capacidad de cambiar esto por su parte. Las familias de fuentes son la norma en la mayoría de los sitios. Incluso si usa TypeKit (incrustación de fuentes), aún necesita definir un conjunto de tipos de letra que todos tengan como respaldo, por ejemplo, Times New Roman o Georgia. Ver: http://www.awayback.com/revised-font-stack/

Finalmente, debe considerar la interacción que un usuario tendrá con el sitio. ¿Cuál será su reacción visceral al visitar el sitio? Por ejemplo, asegúrese de que su navegación principal se pueda diferenciar fácilmente de otros elementos y se vea y se sienta como una navegación. Además, la identidad de la página generalmente se encuentra en la parte superior izquierda, pero mientras esté cerca de la parte superior, debería estar bien.

Hay millones de otras cosas a considerar incluso antes de comenzar a pensar en el diseño, pero espero que esas sean algunas que puedan ayudarlo a comenzar.

Desde el punto de vista de un usuario acostumbrado a tener una pantalla ancha, la idea de 800px a 1200px de ancho no me hace feliz. A veces, realmente quiero que reduzcas la resolución a 400 px para poder ver algunas cosas a la vez, en el caso de un sitio de información. A veces, me gustaría ver tanto de lo que está disponible a la vez, como en un sitio de música donde el artista tiene mucho por ahí. Aparte de eso, estoy totalmente de acuerdo con tus otros puntos.
@Hack Saw: estoy hablando de las limitaciones físicas del hardware. Para la mayoría de las audiencias, verá resoluciones de pantalla de entre 800 px y 1200 px con marcos marginales a ambos lados con la ventana maximizada. La mayoría de los sitios que diseño atienden a la audiencia más grande y manejan los casos marginales con una degradación elegante o diseños fluidos (según el proyecto).

Cuando diseña sobre composición, es bueno aprender de la información clásica de diseño gráfico que puede encontrar sobre impresión (por ejemplo, tipografía, cuadrículas, interletraje, espacios en blanco, proporción áurea). Te darán la correcta linealidad y el orden que necesitas para diseñar "lo que sea".

Las dificultades en el diseño web es que nada se muestra de la misma manera. Esto depende de múltiples factores: tamaño del monitor, resolución, calibración de colores, sistema operativo, navegadores, dispositivos (PC o móvil), redimensionamiento de texto, páginas dinámicas con contenido cambiante, elementos de formularios, etc...

Su tarea es conocer estas diferencias y no luchar contra ellas (como muchos lo hacen, se llama el concepto previo del diseño impreso, la gente espera que lo que se desarrolle sea el mismo para todos los medios), sino aceptarlo y adaptarlo a cada uno de ellos. ellos en un diseño atractivo aunque con diferencias.

No olvides que en la web conceptos como hipervínculo, lienzo infinito , permalink, flujos de interacción (como estudiar sobre arquitectura de la información y usabilidad), accesibilidad, estándares web, ancho de banda y SEO son muy importantes. Puedes imaginar que detrás de cada palabra que usé hay toneladas de libros y sitios web especializados en cualquiera de estas cosas, no te asustes. Si desea comenzar desde algún lugar, comience desde este libro:

Llevando tu talento a la web por Jeffrey Zeldman (una figura destacada en el estándar web en la actualidad).