¿Cómo se presentan los wireframes y los diseños para un sitio web largo de una página?

¡todos! Este es un problema con el que he estado luchando durante un minuto y pensé en escribir para ver qué están haciendo los demás.

En el pasado, cuando presentábamos wireframes, siempre los metíamos en un bonito .PDF con un marco alrededor para nuestra empresa que se veía bien y sexy. Pero eso fue antes de que hiciéramos tantos wireframes y diseños súper largos de una página.

¿Cómo lo están haciendo ahora? ¿Estás haciendo wireframes y diseñando como un archivo .sketch realmente largo y luego exportándolo en una sola pieza a .pdf para presentarlo? ¿O lo está cortando y mostrando las diferentes secciones del one-pager en diferentes páginas de un .pdf?

Me gustaría mostrarlo todo en una sola pieza, pero también quiero conservar la marca de la empresa, así que estoy atascado. Tengo muchas ganas de saber cómo lo estás haciendo.

¡Gracias!

Los imprimimos en varias páginas (de papel), luego los clavamos en una pizarra grande; el tamaño es más o menos realista. Cuando deben enviarse por correo electrónico, solo usamos un PNG / JPG / PSD largo. ¿SÓLO necesitas enviarlos digitalmente?
En las empresas en las que he trabajado hemos usado .psds

Respuestas (4)

Yo uso la aplicación Invision para esto. Si lee los tutoriales, hay una manera de hacer que la navegación se mantenga para que pueda hacer una barra en la parte superior con su marca y hacer que permanezca en la parte superior cuando el usuario/cliente se desplace hacia abajo en la página. Espero que esto ayude.

www.invisionapp.com

https://support.invisionapp.com/hc/en-us/articles/203730455-How-do-I-set-fixed-headers-and-footers-

Dulce. Probé Marvel App, pero aún no he probado Invision. ¡Muchas gracias!

Mis 2 centavos.

Digamos que hice una estructura alámbrica o un prediseño en Illustrator.

Simplemente exporto un jpg grande y largo y lo coloco dentro de un html que contiene:

<html>
<head>
<style>
 body {margin: 0; padding:0;}
 img {width: 100%}
</style>
</head>
<body>
 <img src="MyBigImage.jpg">
</body>
</html>

Y he terminado.

Pero si crees que tu boceto es demasiado largo... probablemente el terminado también lo será, así que no lo hagas tanto.

¿Quieres hacerlo más interactivo?

Exporte cada sección como una imagen separada y agregue una ID

<img id="One" src...>
<img id="Two" src...>

Y haz un menú flotante.

Por supuesto, puede agregar algo de Jquery para que el salto sea fluido. Para la primera entrega probablemente suene demasiado trabajo. Pero es una plantilla que puedes usar y reutilizar. Así que vale la pena.

gracias amigo Esto es exactamente lo que estoy pensando hacer la próxima vez.

Para la web, generalmente codifico la estructura alámbrica y dejo que el cliente la ejecute. Si esta no es una opción y estás en una etapa preliminar del wireframe, puedes separarlo por secciones en el PDF. Si esto es para un dispositivo, siempre puede crear un guión gráfico masivo y permitir que el cliente entre o enviarle un correo electrónico como este:

ingrese la descripción de la imagen aquítomado de parlante

o así en una pizarra blanca:

ingrese la descripción de la imagen aquí

de plantillas de interfaz de usuario

Si esta no es una opción, sugeriría tal vez un hangout o algún tipo de reunión de video para que pueda explicar la estructura alámbrica. Todo esto aún depende de en qué etapa del proceso de estructura metálica se encuentre.

No puedo decidir si amo u odio esa plantilla de pizarra. :)
sí, tienen otras herramientas, pero si tiene tres pizarras de borrado en seco de 4 x 8 una al lado de la otra, es útil
@ DA01 Creo que amaré el concepto y odiaré el color. Parece una solución equilibrada.
¡Gracias a todos por la retroalimentación! A veces estoy haciendo maquetas o colocando cosas en la aplicación Marvel, pero cuando no lo hago, tenía mucha curiosidad sobre cómo lo manejan los demás. Me encantan las pizarras, pero no creo que necesite una plantilla.

¿Cómo lo están haciendo ahora?

Al no utilizar archivos PDF para presentar sitios web. Los sitios web son documentos dinámicos donde es mejor presentarlos en el navegador como un sitio de trabajo. Es posible que aún mostremos algunos esquemas (pero nunca se supone que esos sean 'sexy') y tal vez algunas composiciones visuales para dar una idea del aspecto general, pero evitamos las 'simulaciones de página completa' tanto como podamos para un número de razones... la menor de las cuales es lidiar con diseños receptivos.

¿Cómo se presentan los wireframes y los diseños para un sitio web largo de una página?
RespuestasAquíPolítica de privacidad1y, 0v