¿Cómo darle a un sitio un aspecto de maqueta?

Editar para aclarar Gracias por las respuestas existentes. Me temo que no entendiste mi pregunta. No quiero crear maquetas (tengo algunas, pero no son adecuadas para mi propósito actual). Quiero una herramienta (posiblemente algo tan simple como un tema CSS disponible gratuitamente) que haga que mi sitio ASP MVC existente y funcional a medio terminar parezca una maqueta.


El jefe de mi jefe decidió que tengo que mostrar la etapa actual de mi trabajo a mis partes interesadas, para que puedan tener una idea de la aplicación web que estoy desarrollando para ellos. Es un desarrollo completamente nuevo, por lo que los usuarios no tienen expectativas creadas a partir del contacto con la versión anterior. Quiere que se pueda hacer clic al menos un poco, por lo que no puedo ir y publicar las maquetas con las que estoy trabajando. Tendrá que ser una versión en ejecución de la etapa actual de desarrollo.

Quiero dejar muy claro para el gerente de nivel medio crítico y ocupado que lo que ven no es lo que van a obtener, sino un esbozo inicial de ello. Es un tema muy delicado, porque mi solicitud aumenta la carga de papeleo del gerente. Por lo tanto, ya son hostiles hacia el proyecto y se inclinan a ver el prototipo de la peor manera posible, sacando conclusiones sobre la calidad de la aplicación esperada a partir de la calidad del diseño y quejándose de que faltan las funciones vitales cuyas implementaciones aún no han comenzado.

Para hacer esto, me gustaría darle a mi página un aspecto de dibujado a mano, como las típicas maquetas. Debería gritar "Soy un boceto aproximado" desde lejos, para que nadie pueda confundirlo con la cosa real.

¿Cuáles son buenas maneras de crear ese look? ¿Hay alguna manera más eficiente que crear mi propio CSS con apariencia de maqueta a mano? Estoy severamente limitado en el tiempo que puedo invertir en tal tarea, y tampoco tengo experiencia en diseño. No necesito un aspecto perfecto, y las páginas no son nada complicadas, así que cuanto más sencilla sea la solución, mejor.

Algunos productos le brindan la posibilidad de crear prototipos interactivos que tienen un aspecto "incompleto" o "dibujado a mano" que es lo que está buscando. Axure, por ejemplo, tiene algunas funciones nativas y algunas bibliotecas de terceros que le darán los resultados que está buscando: 90percentofeverything.com/2009/11/05/…
Otra herramienta de simulación es Balsamiq . Es un sistema simple de arrastrar y soltar con un montón de elementos prefabricados para completar su página de simulación.
Aquí hay otro servicio que puede funcionar para usted: invisionapp.com . Su sitio está completamente enfocado en el lado de compartir de la creación de prototipos, pero si recuerdo hace un tiempo cuando me topé con él originalmente, tienen la capacidad de arrastrar áreas de su maqueta y agregar interactividad de manera muy rápida y fácil. Básicamente, puede tener un montón de capturas de pantalla de su sitio y vincularlas para falsificar las interacciones entre páginas, etc.
En realidad, podría crear una maqueta real, colocarla en mosaico y usar las partes como imágenes en su diseño web. Por cierto, la nueva propiedad CSS border-imagepuede permitir elementos flexibles con bordes similares a bocetos.

Respuestas (3)

Lo primero que viene a la mente es usar una herramienta de estructura de alambre como Balsamiq para crear la maqueta. Esto le da una sensación muy "incompleta":

Elementos de maqueta de Balsamiq

Desafortunadamente, no creo que puedas exportar HTML/CSS funcional desde Balsamiq, así que usaría su estilo como inspiración para generar tu "simulacro de CSS".

Probablemente sea porque trato con Photoshop todos los días, pero siempre asocio la cuadrícula de tablero de ajedrez como algo incompleto.

Rejilla de tablero de ajedrez

Si no es así, quizás algún tipo de cuadrícula utilizada para el fondo ayudaría a transmitir una apariencia inacabada.

Un ejemplo de algo como esto que he visto en el pasado es el estilo antiguo de los sitios beta de Stack Exchange:

Sitios SE Beta estilo antiguo

Es muy tenue, pero se puede ver que usaron una cuadrícula como fondo entre otros elementos de estilo para darle un aspecto muy inacabado.

Similar a Balsamiq es Wireframe Sketcher. Sí permite hacer clic.

Otro programa similar, pero de código abierto y gratuito, es Pencil .