6

Edit to clarify Thank you for the existing answers. I am afraid that you misunderstood my question. I don't want to create mockups (I have some, but they are not suited for my current purpose). I want a tool (possibly something as simple as a freely available CSS theme) which will make my existing, functioning half-finished ASP MVC site look like a mockup.

My boss's boss decided that I have to show the current stage of my work to my stakeholders, so they can get a feeling for the web application I am developing for them. It is a greenfield development, so the users have no expectations built from contact with prior version. He wants it to be at least a little bit clickable, so I can't go and post the mockups I am working from. It will have to be a running version of the current stage of development.

I want to make it crystal clear for the busy, critical mid-level manager that what they see is not what they are going to get, but an early sketch of it. It is a very sensitive matter, because my application increases the manager's paperwork load. Therefore they are already hostile towards the project and inclined to view the prototype in the worst possible way, making conclusions for the expected application quality from the design quality, and complaining that the vital functions whose implementations has not yet started are missing.

To do this, I would like to give my page a hand-drawn look, just like typical mockups. It should shout "I am a rough sketch" from afar, so that nobody could ever mistake it for the real thing.

What are good ways to create such a look? Is there a way more efficient than creating my own mockup-look CSS by hand? I am severely limited in the time I can invest in such a task, and I am also inexperienced at design. I need don't a perfect look, and the pages are nothing complicated, so the simpler the solution, the better.

Improve this question
4
  • 2
    Some products give you the ability to make interactive prototypes that have a "sketchy" or "hand drawn" look that is what you're looking for. Axure, for example, has some native features and some third party libraries that will give you the results you're looking for: 90percentofeverything.com/2009/11/05/…
    – Charles Wesley
    Jun 6, 2013 at 15:42
  • Another mock-up tool is Balsamiq. It is a simple drag and drop system with a bunch of elements premade to populate your mock up page
    – John
    Jun 6, 2013 at 16:24
  • Here is another service that may work for you: invisionapp.com. Their site is all focused on the sharing side of prototyping, but if I remember from a while ago when I originally stumbled upon it, they have the ability to drag over areas of your mock-up and add interactivity really quickly and easily. Basically you can have a bunch of screenshots of your site and link them together to fake the interactions between pages etc...
    – John
    Jun 6, 2013 at 16:59
  • Actually, you could create a real mockup, tile it and use the parts as images in your webdesign. By the way, the new CSS property border-image may allow flexible elements with sketch like borders.
    – danijar
    Jun 10, 2013 at 22:02

3 Answers 3

Reset to default
2

The first thing that comes to mind is to use a wire-framing tool such as Balsamiq to create the mock-up. This gives it a very "incomplete" feel:

Balsamiq mockup elements

Unfortunately, I don't believe you can export working HTML/CSS from Balsamiq, so instead I would use their style as inspiration to generate your "mockup CSS".

It's probably because I deal with Photoshop every day, but I always associate the checkerboard grid as something that is incomplete.

Checkerboard Grid

If not that, then perhaps some sort of grid used for the background would help convey an unfinished look.

An example of something like this I've seen in the past is the old style for Stack Exchange beta sites:

SE Beta Sites old style

It is very faint, but you can see they used a grid as the background among other style elements to give it a very unfinished look.

Improve this answer
2

Similar to Balsamiq is Wireframe Sketcher. It does allow clickability.

Improve this answer
1

Another similar program, but open source and free, is Pencil.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.