¿Cómo presentar maquetas de diseño web a un cliente?


8

Estoy trabajando en un proyecto de rediseño de sitio web. Tendré que presentar algunas maquetas diferentes al cliente para su revisión. Quiero asegurarme de que el cliente pueda ver todo en contexto. No quiero asumir que el cliente tiene el software correcto. Tal vez incluso agregue algunos comentarios, preguntas o antecedentes sobre la dirección del diseño.

¿Cuál es una forma típica de presentar maquetas a un cliente? Supongo que presentar maquetas de sitios web por correo electrónico no era la mejor manera. Si el correo electrónico es un medio exitoso para presentar maquetas, explique eso en una respuesta.


bueno, un medio exitoso de una maqueta es codificarlo. SIEMPRE habrá una variación del diseño al código. Esa pequeña variación hará que el cliente pregunte o diga "eso no fue así en el diseño".
DᴀʀᴛʜVᴀᴅᴇʀ

¿Siempre podrías crear tu propio servidor y darles enlaces a la maqueta que has diseñado? Creo que esa será la mejor manera. Es posible que desee crear una cuenta de bajo nivel y darles detalles de inicio de sesión.
BBking

Respuestas:


6

Bueno, hay varias formas de enviar una maqueta a un cliente. Si le preocupa el software, puede exportar cada diseño como a .pdfy construir una página múltiple .pdfen Acrobat, y agregar comentarios para ayudar en la presentación si no desea simplemente enviar imágenes.

Otra opción es hacer que se impriman profesionales en cartulina y hacer una demostración en una reunión.

crear presentaciones de diapositivas y mostrarlas en una entrevista.

Codifique el sitio web en un marco de alambre, por eso publiqué esto .

Si desea ir barato, compre papel de boceto como este , obtenga una regla de 36 "de estructura metálica en su sitio y use lápices de colores para ilustrar el marco de alambre.

Su pregunta es muy vaga y hay varias ideas y soluciones. Cuando leo esta pregunta, no sé en qué fase estás en el rediseño. Cuando te refieres a la maqueta, asumí que estabas en la etapa de marco de alambre.

EDITAR: pero en realidad si está tan preocupado de que el cliente obtenga la sensación correcta para el sitio, también podría codificarlo y asegurarse de que su archivo CSS sea lo suficientemente editable como para no cavar un hoyo con los cambios. ¿Se supone que este sitio es un sitio CMS, un sitio HTML simple, un sitio de comercio electrónico, etc., etc.? ¿Por qué no simplemente crear todo el sitio en un marco de alambre CSS?


Esas son algunas buenas ideas. Por maqueta me refiero a un ejemplo de alta calidad de cómo se vería el sitio (aún no html / css). Planeaba crear algunas maquetas diferentes en Photoshop ya que es más rápido / fácil cambiar el diseño en Photoshop en lugar de en el código. Crear una presentación basada en la web ayudaría al cliente a tener una idea de cómo se vería el sitio en un navegador. También podría agregar algunos Google Analytics para saber exactamente qué navegador está usando el cliente para asegurarme de que se vea bien en su navegador.
Andrew

bueno, qué navegador usa el cliente realmente no importa si su demografía es hacia algo diferente. necesita saber cuál es su demografía para ver si se necesita IE o no.
DᴀʀᴛʜVᴀᴅᴇʀ

Un buen consejo, pero ya conozco los navegadores de destino. La parte importante de conocer el navegador del cliente es que no comete un error evidente que el cliente verá de inmediato. Además, si el cliente está utilizando una herramienta de administración para editar su sitio, es importante asegurarse de que su navegador sea compatible.
Andrew

5

Si entendí correctamente, se está preguntando si existe una forma 'estándar' de compartir maquetas (como la hay al enviar, por ejemplo, diseños de logotipos, donde generalmente se siguen las pautas de presentación).

En lo que a mí respecta, no, no lo hay.

Dependerá principalmente de los medios de comunicación que haya estado utilizando con sus clientes. Si bien los correos electrónicos son perfectamente válidos en la mayoría de los casos, es posible que deba compartir los resultados de su trabajo con un equipo más grande, por ejemplo. En ese caso, es posible que desee utilizar alguna aplicación que permita a las personas interactuar de una manera más dinámica.

Algunas herramientas de gestión de proyectos que he utilizado para la retroalimentación del equipo son BaseCamp y Trello . Pero hay muchos similares que pueden resultarle muy útiles (incluso Google Docs: también hay una lista completa aquí ). Su ventaja es que permiten que diferentes miembros dejen comentarios sobre el desarrollo, y como mencionas en el comentario, permite el seguimiento de todo.

Balsamiq es otra gran herramienta para agregar fácilmente comentarios y realizar modificaciones a las maquetas en línea (realmente no requiere ninguna experiencia por parte del cliente, es muy intuitivo), pero probablemente necesitará obtener una licencia extendida para poder invitar a personas terminado.


Esa lista completa es bastante buena. No estaba necesariamente pensando en un servicio de terceros (también soy desarrollador, puedo construir el mío). Solo me pregunto cómo los diseñadores suelen presentar maquetas de diseño web de forma digital para obtener comentarios de los clientes.
Andrew

3

Creo que está preguntando sobre el acto físico de presentación en lugar de los detalles de la tecnología.

Tiene razón en que el contexto es una gran parte de una presentación exitosa. Enviar maquetas para que las vean sin que estés allí no es lo ideal. Lo que generalmente sucederá es que obtendrá comentarios desenfocados ... a menudo donde los comentarios se centrarán en los detalles estéticos intrascendentes y, a menudo, subjetivos, en lugar de los problemas estratégicos clave del panorama general.

Lo que recomendaría es alguna forma de recorrido formal con ellos. Idealmente en persona, pero si no en persona, puede manejarlo fácilmente a través de una llamada telefónica (enviar los archivos 5 minutos antes de la llamada) o mediante algún tipo de tecnología para compartir pantalla como Skype.

De esta manera, no solo puede mostrar sus imágenes, sino que también puede EXPLICAR sus imágenes. Puede hablar sobre las decisiones estéticas y de estrategia comercial que tomó para llegar a las conclusiones a las que llegó. Puede ayudar a centrar la atención en los aspectos clave y desviarse de los detalles menos clave para mantener el proyecto en el objetivo.

En cuanto a qué mostrar, estoy de acuerdo con muchos de los otros comentarios de que mostrar maquetas visuales estáticas para sitios web no es ideal y probablemente hay mejores maneras de hacerlo, pero esa es realmente una pregunta completamente diferente.


Buena publicación y para agregar, creo que te estás refiriendo a un seminario web. Existen algunas soluciones para pequeñas empresas y soluciones corporativas.
DᴀʀᴛʜVᴀᴅᴇʀ

3

Como desarrolladores y comunicadores, trate de que sus clientes sepan que lo que están viendo es una imagen estática y plana de su diseño de sitio prospectivo. Estos son algunos de los métodos para exhibir un diseño web a un cliente:

Métodos para presentar maquetas de diseño web

  • Coloque la imagen en una página web y envíeles un enlace.

  • Enviar un archivo JPEG o PNG por correo electrónico

  • Use algún tipo de aplicación basada en la web

  • Use el sitio web CodedPreview

  • Crear un estudio de cliente

  • Exportar maquetas en PDF

  • Envíeles un archivo JPEG o PNG y pídales que lo impriman


2

Me puse en contacto con un amigo mío que me recomendó lo siguiente:

  • Si solo estás trabajando con imágenes, hay aplicaciones como mocku.ps
  • Si está buscando un producto más completo, está Pixelapse , que se centra más en la colaboración. Incluye control de versiones, copias de seguridad, comentarios, etc.

2

No hay ningún procedimiento estándar que yo sepa. Al igual que con la mayoría de las cosas, una vez que obtiene más del lado comercial del proceso, diferentes compañías y diferentes personas tienen diferentes prácticas.

He trabajado con una empresa, que estaba un poco más en el lado del trabajo continuo / marketing para los clientes, tengo un sistema inteligente, donde les dan a sus clientes un inicio de sesión en su sitio web, que los lleva a una página con todos sus recursos disponibles para descargar. Esto estaba más orientado a las copias de su logotipo y otros trabajos misceláneos en diferentes formatos de color, resoluciones y formatos de archivo, por lo que las empresas sin un diseño basura podrían obtener diferentes variaciones de este, o un archivo vectorial si lo necesitaban por cualquier motivo. Podría hacer algo similar a esto, tener un registro que muestre imágenes y notas sobre el trabajo en progreso.

Sin embargo, ese es un procedimiento bastante pesado. Si se trata de un concierto más pequeño y único, es posible que desee considerar compilar sus imágenes en un archivo pdf con notas que expliquen qué es qué, dónde o qué están en el proceso, qué se necesita de quién y qué sigue. Dale una palmada a tu logotipo en la parte superior y dale un buen formato, y se verá más profesional que simplemente adjuntar imágenes a un correo electrónico.


1

Hace unos meses me encontré con una aplicación llamada InVision . Proporciona la capacidad de cargar maquetas y sus revisiones, crear prototipos interactivos y la capacidad de dejar un comentario en un área específica de la maqueta. Esta aplicación ha mejorado la forma en que doy / recibo comentarios y me comunico con mis diseñadores y clientes.


0

Bueno, estás creando maquetas para comunicarte. Así que vaya a talleres en vivo siempre que pueda.

En tales talleres, discuta las maquetas mientras modifica y anota sus maquetas al mismo tiempo. Están creando algo juntos, esto también lo convierte en su bebé.

Tenga en cuenta que lo anterior funciona si realiza varios pasos (en lugar de tener una gran presentación cuando ya completó por completo un prototipo detallado). Por cierto, primero quieres hacer una maqueta de tus pantallas / páginas principales. Solo entonces entra en detalles y hazlo un escenario a la vez.


0

En el último proyecto que tuve que presentar, tuvimos una reunión con el cliente y mostramos los png del guión gráfico en el navegador. Nada lujoso, pero presentaba los diseños en su entorno "nativo".


0

Mi experiencia con el envío de imágenes por correo electrónico al cliente es mala: el cliente generalmente tiene un problema con la relación y el tamaño de la imagen en su cliente de correo. Esto podría causar que una vista previa del diseño web se vea y se sienta un poco diferente.

Utilizamos el servicio en línea para publicar nuestro trabajo. Subimos nuestras imágenes a un servicio de alojamiento de terceros y enviamos las URL para el cliente.


0

Anteriormente, en 2000, el envío de diseños por correo fue efectivo. Ahora, la presentación del diseño al cliente tiene servicios especiales. ¿Está diseñado específicamente para esto?

Veamos cómo el servicio (m) maquetter.com puede ayudarlo. Está especialmente desarrollado para este propósito que codifica:

  • Agregue rápidamente los diseños del sitio que dibuje;
  • Distribuya diseños por secciones del sitio web (repitiendo su menú, por ejemplo).

También te permite:

  • para marcar diseños aprobados por el cliente
  • actualizar el mismo diseño y almacenarlo en el historial.

Este servicio le proporciona un enlace corto. Lo envía (por correo, mensaje de texto o Skype). El cliente puede ver cómodamente sus diseños en cualquier navegador. Puede ver cómo funciona como lo puede ver su cliente .

El servicio es gratis. Pero puede usar el plan de tarifas pagas para poder presentar más diseños.

Inténtalo tú mismo

Para más información puedes leer el blog


Saludos. Sí, creé la idea del servicio y el gerente del proyecto. En mi tiempo libre quiero ayudar a los diseñadores en su trabajo. Para transmitirles la idea de este y otros servicios similares (sé sobre 13ti). Sí maquetter representado en la versión paga. Pero el 1 de octubre, presentamos el paquete de servicios "gratis, para siempre".
Igor Abyzov

0

Puede crear una demostración interactiva con sus capturas de pantalla / imágenes. Eche un vistazo a estas herramientas: http://www.appdemostore.com/ y http://giveabrief.com/ .

Ambos son muy fáciles de usar; elige un marco de dispositivo, sube tus imágenes y agrega la interacción que necesitas. Puede incluir botones, íconos para pellizcar, extender, etc. Espero que lo ayude. :)

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.