¿Tamaño para web? Diseñando con Muse

Hum... Justamente estar midiendo monitores ya prácticamente no aplica.

Lo que se usa ahora son los media queries, y como referencia puedes usar los brakepoints que usa bootstrap.

Revisa la versión 3xxx, que a la fecha es la vigente.

Acá están sintetizados: https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/

/*========== Mobile First Method ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

/*========== Non-Mobile First Method ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}

Utiliza de preferencia el modo mobil first.

Hola @rafael-8, gracias por responder.
He estado mirando información sobre lo que me has pasado y lo entiendo, pero no sé cómo hacer un diseño para eso. ¿Tendría que hacer el diseño para cada ancho diferente? Osea, un diseño para móvil, otro para tablet, etc.

Y si lo que quiero es diseñar la página en Photoshop, ¿cómo lo haría?
Tengo la versión CC2017 y he utilizado la que marca como más habitual, pero a la hora de pasarlo a Muse y luego a la web se queda corto el ancho. Espero que podáis ayudarme, gracias de antemano.

Ponte las pilas o tu cliente va a terminar con una web del siglo pasado. Investiga sobre responsive web design
Espero que tengas suerte y menos mal que no eres, por ejemplo, ingeniera o arquitecta y entras en un foro a ver si alguien te dice como construir un puente porque tú no sabes... Luego nos quejaremos, pero por tu pregunta queda claro que no tienes muy claro de que va el tema. A lo mejor sería honesto aprender lo suficiente para ser capaz de entregar un producto de calidad y después ofrecer servicios profesionales... pero aquí cualquier abre photoshop y piensa que diseñar una web es mirar el ancho de una pantalla.

Hola @ehdt, pensé que esto era un foro de ayuda, no de debate. Soy un estudiante y la empresa que me lo ha pedido es en la que estoy de prácticas. En un principio me pidieron solo el diseño, el cual me dijeron que hiciese en Photoshop, y así lo tenía pensado hacer con Grids. El diseño que hice les gustó y me pidieron que hiciese la web funcional, así que por eso me puse con el Muse. He hecho otras webs en Muse, y han quedado bien, pero nunca he terminado de entender el ancho, por ejemplo si en Muse coloco un elemento que ocupa todo el ancho de pantalla a la hora de previsualizarlo se hace más pequeño, y hace algunas cosas raras. Y sí, sé lo que es el responsive obviamente, pero quería saber que tamaño poner a la hora de darle un ancho, nada más.

Te recomiendo ser menos hostil, a veces solo por preguntar os lanzáis al cuello como animales, y preguntar para mejorar es lo más normal del mundo. Un saludo y por lo que veo no has respondido para nada a la pregunta que he realizado, no sé si es porque no sabes o simplemente porque no quieres ayudar.

Muy buenas nunca he utilizado el Adobe muse, pero tengo entendido que cuando creas el proyecto puedes aplicar puntos de ruptura para cada diseño, es lo que tengo entendido.
Yo utilizo Sketch, antiguamente el Illustrator porque solo realizaba el diseño visual.
Cuando se diseña para responsive, se debe diseñar para los diferentes tamaños de pantalla, es decir escritorio, tableta y smartphone.

Puedes empezar por el diseño smartphone y luego adaptarlo al resto de tamaños o empezar por el de escritorio, pero es más recomendable empezar por el smartphone.
Luego programador, maquetador web crea los puntos de ruptura para que la web se responsive, es decir mientras cambias el tamaño de pantalla el código escoge el diseño adecuado o asignado para el tamaño de ventana o pantalla.
Resumiendo si quieres diseñar una web responsive, tienes que diseñar varios anchos de pantallas, por ejemplo, escritorio 1200px, tablet 900xp, 500xp móvil.

Luego YouTube es tu amigo, haciendo búsqueda rápido salen cosas:

https://youtu.be/xXhkctt3R_U

Espero que te sirva de algo, cuando puedas échale un repaso a los tipos de web:

http://www.responsiveorwhat.com

Hola @jbb, muchas gracias por tu respuesta. He utilizado Sketch una vez para realizar una aplicación móvil, pero no lo he vuelto a usar porque solo está disponible en Mac, y ahora no tengo. Igualmente Adobe ha sacado experience design que es parecido, pero aún tiene algunos fallos y no es tan completo (está en beta).

Tu respuesta me ha aclarado bastante, es cierto que en Muse existen esos puntos de los que me hablas, así que los utilizaré, y para cuando no haga una web en Muse diseñaré la web como me dices, que es como tenía pensado hacerlo (pc, tablet y móvil), pero no lo tenía muy claro, por eso lo pregunté. Un saludo :)

@drvsk8 Aunque seas estudiante sigo pensando que si no sabes cosas tan básicas como esa, no podrás ofrecer un buen servicio a tu cliente. Si te respondo así es porque en esta profesión parece que cualquiera que sea capaz de abrir un software de diseño o alguien que haya hecho un curso se convierte automáticamente en diseñador. Por lo que dices y como lo dices no tienes los conocimientos y fundamentos necesarios para dar servicio profesional. Vuelvo al ejemplo de otras profesiones. ¿Te imaginas al fontanero de tu casa entrando en un foro para saber algo super básico del funcionamiento de las tuberías? Pues lo mismo. Ofrecerte a hacer una web y cobrar por ello sin saber qué es ni tan siquiera el diseño responsive me parece irresponsable y creo que juega en contra de los intereses de la profesión.

Tienes mil formas de formarte y de aprender y de practicar tus habilidades pero cobrar por algo que no sabes hacer nos deja a todos en mal lugar.

No sé en qué momento he dicho que no sepa lo que es responsive. No cobro por nada, son prácticas, lo repito, sinceramente parece que te has quedado con lo primero que has leído.

Respecto a lo que he preguntado es porque a mí me han explicado que a la hora de hacer una web deberíamos ver el ancho más utilizado, y lo que yo he preguntado en este hilo es, cito:

Me gustaría saber cuales son los más usados a día de hoy, o directamente el ancho de página que esté más estandarizado.

Lo demás me parece que te lo estás sacando de la manga porque al parecer llevas un mal día y con alguien lo tendrás que pagar. Te has sacado de la manga un montón de cosas que has dado tu mismo por sentado, ni siquiera siendo real y ni siquiera preguntandome. Por como has hablado pareces un profesional que ya tiene sus estudios, es decir, eres mayor que yo, pero tampoco tienes la educación para responder como yo te respondo.

Por último añado: preguntar no es delito, ya sea la pregunta más estúpida del mundo o la más enrevesada. Que me manden a mi hacer una web a mi y no a ti no tiene por qué afectarte tanto. Un saludo, nos vemos.

>:P Se borró mi explicación larga.

No uses Photoshop, Sólamente para los elementos como Fondos y cosas así. Los logos e íconos van en vectores de preferencia.

Hazlo todo en Muse y olvídate ya de resoluciones.

a la hora de hacer una web deberíamos ver el ancho más utilizado

Nop, ya no. Lo que te puse son brakepoints, el Muse te los va a dar en automático.

No haces un diseño para cada tamaño, lo que tienes que hacer es pensar como el diseño "salta" de un arreglo a otro al cambiar de resolución, por ejemplo de 3 columnas a 1 al llegar a un tamaño de movil.

Cualquier página hace eso actualmente. Eso es responsive design.

Oh. Recuperé mi comentario original. Perdón si ahora suena repetitivo:

Bueno, la pregunta ya cambió, no es sólo las medidas sino cómo se hace. Lo cual es bastante complejo. Coincido que antes de que esperes hacer una página real hay que aprender muchas cosas.

si lo que quiero es diseñar la página en Photoshop, ¿cómo lo haría?

Básicamente en Photoshop se hace la idea, ok tal vez eso sea diseñarla, pero no va a hacer absolutamente nada más que una imagen. De ahí habría que mandársela a otra persona un coder, o meterla en un programa de diseño de UI como sketch o muse, pero repito ese es un campo totalmente diferente a usar photoshop.

¿Tendría que hacer el diseño para cada ancho diferente? Osea, un diseño para móvil, otro para tablet, etc.

Sí y no. Lo que tienes que saber es qué esperar del diseño, como se adapta cuando cambia el dispositivo. Por ejmplo cualquier página actual, cuando vas cambiando el tamaño del navegador, se va reestirando y de repente los bloques se reorganizan. Eso es el concepto responsive design. Responde a las condiciones de dispositivo, tamaño, resolución y zoom. Lo que te pongo son medidas llamadas "brakepoints" cuando llega a esas medidas "snap" las cosas cambiarán por ejemplo en lugar de 3 columnas a una. En aquellas medidas intermedias simplemente las cosas son elásticas. Nada de eso se puede hacer en un archivo de Photoshop, por lo que ahí simplemente visualizas estas etapas y preparas los "assets" necesarios, logos, fotos, íconos. (aunque también hay un montón de métodos diferentes para poner estos assets, png, svg, fuentes...) Si estás usando Muse, piensa todo dentro de el programa. Sólamente genera uno que otro asset en Photoshop, fuera de eso olvídate de Photoshop. De hecho tal vez la pregunta es irrelevante, ya que Muse te va a ayudar a esta adaptabilidad. --- Aunque probablemente por el momento es mejor que busques un skin de Wordpress que te fucnione y lo adaptes.

Deacuerdo con rafael. No te lies de un programa a otro. Diseña todo en MUSE, y si eventualmente necesitas uno que otro recurso gráfico, lo haces en Photoshop/Illustrator y lo importas. Primero bosqueja con lápiz y papel tu diseño (wireframe), te ahorrará tiempo y dolores de cabeza
Te recomiendo que sigas los puntos de quiebre (breakepoints) que te ha dejado rafa (como una opción) pero dependiendo de tu diseño tendrás que experimentar cuando un objeto colapsa con otro para cambiarlo de posición y/o dimensión en un punto de quiebre. (colapsar me refiero al mover el ancho de la página y determinar cuando el objeto choca o se monta sobre otro. Allí debes hacer un nuevo punto de quiebre y redistribuir los objetos)
Beber de todas las fuentes de conocimiento es útil, te llevará tiempo. Mira tutoriales, experimenta, pregunta siempre y adelante. No olvides que es muy importante aprender a través de cursos y profesores de manera presencial o en la web. Si te puedes pillar un curso de pago, tanto mejor.
Te dejo un tutorial, creo que te podrá servir algo.
Suerte.
https://www.youtube.com/watch?v=xXhkctt3R_U&t=2559s

Hola drvsk8!.

La verdad que todos los diseñadores nos hemos visto en alguna situación en la que estás tu ahora (tengan los años de experiencia que tengan) osea que está bien que preguntes y quieras aprender. Eso te convertirá en un buen profesional :).

Te explico un poco cómo trabajaba yo por si te puede ser de utilidad (ojo, que no son verdades universales y dependiendo del proyecto que tengas, puedas aplicar estos consejos o no…). Estuve durante unos años en una agencia como diseñadora UX y UI. Yo solamente hacía los diseños (no hacía la programación) y los hacía en Photoshop. La primera mala noticia es que…en efecto, tendrás que pensar en el diseño y comportamiento que quieres utilizar según el tamaño del ancho del dispositivo .

Primero empezaba por “el peor de los casos” que es el diseño para móvil más pequeño posible (320px), es donde menos espacio tienes para meter la información. Y de ahí ya, iba tirando a resoluciones más grandes.

Te recomiendo que no lo hagas al revés (de dispositivos grandes a pequeños) porque luego para resolver algunas cosas, tendrás que volver atrás y entrarás en un bucle sin fin entre diseños de dispositivos…

Pues eso, primero diseñaba a 320 de ancho, y ese es el comportamiento para dispositivos entre 320px y 480px

Luego a 480px, y ese es el comportamiento para dispositivos entre 480 y 768px

...y así sucesivamente.

Luego dependiendo del proyecto, no tienes porqué poner tropecientosmil puntos de corte.

Es decir, volviendo al ejemplo que puse, si el comportamiento y distribución de la web va a ser igual en los dispositivos de 320 a 480 que la de 480 a 768, pues sólo haces un diseño (el de 320px) y pones que se comporte así para dispositivos menores o iguales a 768px.

Los puntos de corte que sí o sí te recomendaría poner son:

Para dispositivos menores o iguales a 480px (este diseño lo tendrás que hacer a 320px de ancho)
Diseños para dispositivos entre 481px y 768px (este diseño lo haces a 481px de ancho)
Diseños para dispositivos entre 769px y 1024px (este diseño lo haces a 769px de ancho)
Diseños para dispositivos entre 1025 y 1200 px (este diseño lo haces a 1024px de ancho)
Diseños para dispositivos mayores a 1200px (este diseño lo haces a 1200px de ancho)

Quizá estos puntos de corte están un poco desactualizados con respecto a los que puso Rafael al principio, en todo caso, dependerá del proyecto que tengas que poner más o menos puntos (y dónde ponerlos).

Y después de este rollo que acabo de soltar, he de decir que si además del diseño, eres tú el que vas a tener que hacer la programación, a no ser que el proyecto necesite algo muy muy muy pero que MUY específico (por ejemplo, un buscador que se comporte de una determinada forma fuera de lo standard, cosa que además con Muse tampoco vas a poder hacer) probablemente lo puedas resolver con Wordpress y yo que tú, en vez de “gastarme” con esto, invertía en aprender wordpress, que además tiene un plugin que se llama Visual Composer y hay millones de plantillas responsive personalizables (con este plugin que te comento incluido).

A mí al principio también me daba mucha pereza salir de la zona de confort de adobe CC…pero una vez que le coges el tranquillo a wordpress es super fácil de configurar y personalizar. Además así el cliente en un futuro, puede tener cierta autonomía y no tiene que recurrir a ti cada vez que quiera el cambio más mínimo.. (ojo que esto puede ser malo también…pero esto daría para otro hilo en el foro :) )

Mobile First, esencial para no volverse loco. Muy bueno y completo tu comentario.
Saludos.

A favor de Guillermo.