Dimensiones para el diseño de un sitio web

Tengo tres preguntas relacionadas:

  1. Cuando se trata de decidir sobre las dimensiones del diseño web receptivo, ¿quién toma las decisiones en una agencia digital? ¿Es el diseñador visual, el desarrollador, el propietario del producto o todos juntos? ¿Cuál fue tu experiencia con esto?

  2. ¿Qué dimensiones usa usted u otras personas hoy en día para el diseño web receptivo (en términos del ancho real de la mesa de trabajo con el que comienza en Sketch)?

  3. Supongamos que definirá los puntos de interrupción mientras trabaja en Sketch y está utilizando un marco de 8 puntos, ¿cómo sabría qué tamaños de mesa de trabajo debe elegir para puntos de interrupción específicos?

Cualquier respuesta directa y clara sería muy apreciada.

¡Hola y bienvenido a GDSE! Estoy esperando una respuesta para esto. NO soy un diseñador web profesional, solo he creado algunos sitios simples. Parece obsoleto pensar en términos de dimensión de píxeles. Veo la página web como una "máquina" con un conjunto de reglas de diseño (css) que garantiza que el contenido se muestre de forma agradable en cualquier tipo de pantalla . Una maqueta es solo una vista previa de cómo se vería la página en una pantalla específica. Si el usuario cambia el tamaño de la ventana, el diseño cambiará en consecuencia. No se basa en dimensiones de píxeles absolutas, sino en un conjunto de reglas relativas al espacio dado.

Respuestas (3)

¿Quién manda?

El mercado. La tecnología actual.


En un entorno específico, supongo, el director del proyecto. Él / ella decidiría si es necesario para un proyecto de bajo ancho de banda, solo para dispositivos móviles, para un proyecto específico de súper alta resolución.

Entre sus opciones, el propietario del producto puede tomar la decisión final (incluida toda la culpa si es incorrecta). El diseñador visual y el desarrollador pueden contribuir con su investigación (no con sus opiniones).

Quienquiera que esté tomando la decisión, asegúrese de que esté actualizado con las últimas versiones de hardware. Este es prácticamente un trabajo de tiempo completo para estar al día entre Apple, Samsung, Google y Microsoft.

No existe una política de navegación, pero hay varios servicios que ofrecen las dimensiones más recientes y ampliamente aceptables. Hay una lista de referencias en creativebloq.com llamada 'Excelentes herramientas para probar sus diseños web adaptables'.

Los puntos de corte normalmente no varían en gran medida. Los dispositivos no se han vuelto más anchos o más estrechos de repente. Por lo tanto, los puntos de interrupción estándar realmente no requieren que nadie los "establezca". Deben ser entendidos.

Si observa algunos paquetes receptivos (Bootstrap, Zurb Foundation, etc.), todos usan los mismos puntos de interrupción relativos. En todo caso, como diseñador, preguntaría si se pueden necesitar puntos de interrupción especiales (y por qué); de lo contrario, usaré lo que normalmente uso para extragrande/grande, mediano y pequeño.

En cuanto al ancho de la mesa de trabajo... no estoy seguro de que lo entienda. Lo mejor es pensar primero en dispositivos móviles . Lo que significa que diseña para el tamaño más pequeño y luego ajusta la capacidad de respuesta del diseño para los tamaños más grandes.

Supongo que por "mesas de trabajo" quiere decir que desea diseñar una página/sitio completo en algún software de dibujo y luego moverlo a HTML. Simplemente no he trabajado de esa manera en 10 años. Es más problema de lo que vale.

  • Wireframe (en la aplicación de dibujo debido a la velocidad y facilidad)
  • Composición suelta basada en estructura alámbrica
    • Esto se hace en HTML para mostrar alteraciones generales de respuesta. Son simplemente divs/boxes y bloques de texto ficticio para mostrar las áreas generales, los tamaños y cómo reaccionan a los cambios de respuesta.
  • Bosquejo
    • Esto también es HTML. Se puede usar una aplicación de dibujo para crear los activos necesarios aquí, como fotos, botones, etc. Pero nada se presenta completamente en una aplicación de dibujo.

No estoy , de ninguna manera, afirmando que esta es la única forma de trabajar. Hay algunos clientes que todavía quieren maquetas de página completa y luego dejar que alguien más cree el HTML/CSS para ellos. Y hay algunos diseñadores que simplemente no pueden crear maquetas HTML/CSS. No hay daño allí.

Si tuviera que crear maquetas de página en una aplicación de dibujo, usaría 4 anchos de punto de interrupción comunes....

  • 320 px, 425 px, 768 px, 960 px (o mayor)