Cuál es la herramienta que hacen los diseñadores web para presentar prototipo [cerrado]

¿Cómo presentan algunos diseñadores web su prototipo de sitio web receptivo en una computadora, tableta y presentación móvil como esta?ingrese la descripción de la imagen aquí

¿Al tener esos dispositivos? Adobe Edge también le permite obtener una vista previa en vivo de su trabajo en prácticamente cualquier dispositivo
He leído algunos detalles sobre la vista previa en vivo, pero ¿qué pasa si no tengo esos dispositivos, como si no tuviera un dispositivo Android o iOS para usar? ¿Hay alguna herramienta que pueda hacer esto automáticamente? @Johannes
Mientras investigaba sobre esto, descubrí una herramienta llamada Screenfly, aunque no incluye la imagen del dispositivo, al menos muestra cómo se ve el sitio en una resolución de pantalla particular.
Sí, la mejor manera de probar cualquier cosa es de forma nativa en el dispositivo. Aparte de eso, buscaría emuladores para Android/ios/etc. Finalmente, puede obtener un complemento del navegador que cambia el tamaño de su ventana a un tamaño determinado para simular un dispositivo determinado.
La última vez que revisé, Firefox tenía una herramienta para probar sitios web receptivos. Dreamweaver también tiene una ventana de visualización ajustable, con ajustes preestablecidos para algunos dispositivos y muchas medidas de factores de forma diferentes, al menos en CC.
¿Prototipo? te refieres a funcional verdad? Porque lo que estás mostrando es solo una maqueta que puedes obtener fácilmente de una búsqueda en Google.
Eso no es un prototipo. Eso es solo una foto.
relevante y un intento de una respuesta general: ¿ Cómo simular un logotipo en un entorno realista?

Respuestas (3)

Hay plantillas PSD que puede descargar y/o comprar, que generalmente vienen con acciones que colocan su diseño en sus (tres pantallas diferentes que muestran un diseño receptivo en su caso). Simplemente haga una búsqueda en Google de "plantilla de maqueta psd" y puede hacer clic en cualquiera de los primeros resultados.

^ Exactamente lo que quise decir. Jajaja. Prolly quiere uno funcional. No estoy seguro.

Tengo 2 soluciones para ti:

Primero: puedes hacer esto en Adobe Photoshop. Elija el marco de su dispositivo y coloque su captura de pantalla en él.

Segundo: si quieres invertir, prueba algunas herramientas como https://placeit.net/ o http://picapp.net/ . Todo lo que tienes que hacer es elegir el marco que te gusta de su galería y subir tu captura de pantalla.

Buena suerte !

Si su pregunta es cómo ver su sitio web en diferentes dispositivos si no los tiene, entonces una solución inteligente es usar el navegador Google Chrome.

Así es como funciona:

  1. Abre tu sitio web en Google Chrome.
  2. Haz clic en el ícono del menú superior derecho (el que tiene 3 líneas horizontales).
  3. Elija Más herramientas —> Herramientas para desarrolladores.
  4. Haga clic en el ícono pequeño del dispositivo móvil en el panel del desarrollador; esto mostrará una barra de herramientas de "Dispositivo" en la parte superior de su sitio web.
  5. Elija el dispositivo en el que desea ver cómo se muestra su sitio web.

De esta manera, puede tomar capturas de pantalla de su sitio web en diferentes dispositivos. Para obtener el resultado en su imagen, use Photoshop o una herramienta dedicada para colocar estas capturas de pantalla dentro de la imagen final.

¡Espero que esto ayude!